網(wǎng)頁設(shè)計常規(guī)的交接流程是這樣的：

但這只適用于一般的常規(guī)網(wǎng)頁，如今越來越多的網(wǎng)頁需要同時適配多端設(shè)備，如果只按這樣的流程，一旦進(jìn)行適配就容易出現(xiàn)各種錯亂與問題。

因此，交接工作還需要更完整一些：

柵格示意圖

柵格示意圖可以是簡單的頁面結(jié)構(gòu)框架圖也可以是在設(shè)計圖的基礎(chǔ)上進(jìn)行柵格說明。

柵格示意圖的意義在于可以讓開發(fā)了解總柵格數(shù)和具體某一塊內(nèi)容所占據(jù)的柵格數(shù)。這兩個柵格數(shù)決定著整個頁面的內(nèi)容架構(gòu)，也決定著在不同屏幕響應(yīng)之后的變化。

從前端實現(xiàn)來說，在不同的分辨率下，頁面的寬度也不同，假設(shè)同樣分為 12 柵格，每柵格寬度自然也就不同，因此前端更在意的是其實是柵格數(shù)。

如果有幾份不同尺寸的設(shè)計圖，最好也提供各自的柵格示意圖以供對比。

不同尺寸的設(shè)計稿

一般的網(wǎng)頁，建議交接兩個版本就足夠：大屏顯示器和移動端。

功能性復(fù)雜的網(wǎng)頁，比如后臺等，最好選擇 3 個版本及以上：大屏顯示器，中等顯示器，小屏顯示器。具體的參考分辨率分界點，在上一篇文章中有討論過，這里再貼一遍。

如果自己還是無法判斷，那么不妨征求一下前端的意見。

切圖標(biāo)注

使用常規(guī)的標(biāo)注切圖方法就可以。借助一些插件就可以很輕松做到。

但是有一點，通常設(shè)計師標(biāo)注會使用 px 單位，需要完全依賴前端自己去換算成 %、vw、vh、em 等各類前端單位。尤其是在換算百分比的時候更是一件令人頭疼的事。

這個問題在藍(lán)湖上被完美解決。不僅標(biāo)注切圖很輕松，開發(fā)還可以在按住「Ctrl」的情況下直接鼠標(biāo)點擊查看百分比，十分方便。

特殊效果的溝通

在頁面設(shè)計中有時候會加入一些交互動效設(shè)計。特別是一些需要開發(fā)使用代碼實現(xiàn)的動效。

我更傾向于在設(shè)計作品構(gòu)思前期就與前端溝通一些我的想法。畢竟有時候想法很美好，現(xiàn)實很殘酷。被開發(fā)打回來也是一件很頭疼的事。

網(wǎng)頁中常用的一些特殊展示效果，比如：

鼠標(biāo)的交互反饋

視覺差效果

滾動翻頁效果

滾動延時觸發(fā)動效

還有一些炫酷的動效背景

有點看不清楚，背景是緩緩旋轉(zhuǎn)的星空

另外有時候會有一些在特殊屏幕上的應(yīng)用特別的響應(yīng)方案，除了這些，還會有其他需要提前溝通的內(nèi)容，越復(fù)雜的動效最好越早和前端打好招呼，避免設(shè)計完成后卻被反饋無法實現(xiàn)。

界面設(shè)計走查

這一步會自己進(jìn)行走查的設(shè)計師不多，一般都交給了公司的測試工程師。但其實測試工程師關(guān)注的更多還是功能和邏輯，至于界面的一些細(xì)節(jié)并不一定在意。設(shè)計師自己進(jìn)行走查，是保證完美還原很關(guān)鍵的一步。

方法一：使用測試機(jī)，在多種設(shè)備上進(jìn)行測試

一般互聯(lián)網(wǎng)都會有測試機(jī)，如果沒有，動用你的「人脈」，和周邊的同事朋友借一借吧?；蛘哂梅椒ǘ?。

方法二：使用瀏覽器的開發(fā)者模式

向前端開發(fā)要來開發(fā)好的前端頁面，在打開的文件夾里找到一個名為「index.html」的文件，就能在瀏覽器中打開了。

接下來打開「開發(fā)者模式」。圖例是在Chrome瀏覽器中。

會打開這樣一個界面，在網(wǎng)頁的上方可以選擇一些常規(guī)的不同界面，也可以自己設(shè)置大小。在一定程度上可以替代真實的測試機(jī)。

懂一些前端知識還可以在右側(cè)的代碼中進(jìn)行一些微調(diào)試。