網(wǎng)頁(yè)設計后如何交接驗收？需注意的幾點(diǎn)說(shuō)明發(fā)布者：本站     時(shí)間：2021-02-22 13:02:13

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


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

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



柵格示意圖
柵格示意圖可以是簡(jiǎn)單的頁(yè)面結構框架圖也可以是在設計圖的基礎上進(jìn)行柵格說(shuō)明。

網(wǎng)頁(yè)設計后如何交接才能順利落地？高手總結了這 6 個(gè)步驟！

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

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

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

不同尺寸的設計稿
一般的網(wǎng)頁(yè)，建議交接兩個(gè)版本就足夠：大屏顯示器和移動(dòng)端。

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


如果自己還是無(wú)法判斷，那么不妨征求一下前端的意見(jiàn)。

切圖標注
使用常規的標注切圖方法就可以。借助一些插件就可以很輕松做到。

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

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

特殊效果的溝通
在頁(yè)面設計中有時(shí)候會(huì )加入一些交互動(dòng)效設計。特別是一些需要開(kāi)發(fā)使用代碼實(shí)現的動(dòng)效。

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

網(wǎng)頁(yè)中常用的一些特殊展示效果，比如：有點(diǎn)看不清楚，背景是緩緩旋轉的星空

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

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

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

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

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

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

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

網(wǎng)頁(yè)設計后如何交接才能順利落地？高手總結了這 6 個(gè)步驟！

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

網(wǎng)頁(yè)設計后如何交接才能順利落地？高手總結了這 6 個(gè)步驟！

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

1. 重要內容可視

主要測試頁(yè)面中的重要內容，在做響應的時(shí)候，尤其是小屏設備上，內容不會(huì )被溢出可視界面邊緣外。

2. UI 細節實(shí)現效果

可以與設計圖對比，記錄下相關(guān)問(wèn)題差異提交給開(kāi)發(fā)，保證細節不會(huì )被遺失，設計效果的完美實(shí)現。我一般會(huì )整理成文檔再交給開(kāi)發(fā)。

懂一些前端代碼會(huì )更方便，可以直接在開(kāi)發(fā)者模式下進(jìn)行調試，然后告知開(kāi)發(fā)。

3. 頁(yè)面加載速度

這是為了確保加載等待期不會(huì )過(guò)長(cháng)。

如果過(guò)長(cháng)，可與開(kāi)發(fā)探討原因并嘗試解決，因為導致的原因可能很多。如果是圖片、動(dòng)圖、視頻等體量過(guò)大，導致加載緩慢，可進(jìn)行一下壓縮再使用。

流程不是按部就班，還是那句話(huà)：溝通永遠是交接工作的第一要素。