談網頁設計流程：如何進行視覺設計溝通？

網頁版面設計經常是網頁設計師與客戶溝通的痛點，視覺設計是一件很主觀的事，每個人對於同樣的畫面都會有自己主觀的看法。有些公司甚至是透過「企業決策」產生這個需求版型，先把各個主管的建議加進來，再把大老闆的意見也放進來，最後產生一個混合所有需求的版型。這種企業決策後的版型，不是以消費者(客戶)為需求，而是以政治風向為考量。既然不是以目標族群(TA, Target Audience)為主的設計，當然設計出來的結果也只會大老闆看著滿意，而消費者(客戶)看了搖頭。這樣的版面也經常看不太出真正的閱讀動線和視覺焦點。

 

其實視覺設計是有一定的專業程序，透過這些被無數專案驗證過的設計流程不但可以蒐集需求資訊，也能了解決策順序(不管是行銷策略的或是消費者的購買決策)，並根據優先順序來設計網頁。這樣一來，不但能使參與設計的整個團隊(包含業主老闆、行銷主管、設計師、設計主管)都處於理性有效的溝通之中，也能讓最後的完成品回頭驗證當初的規劃策略是否正確。

 

其中，產品網頁通常是網頁中最複雜的最難處理的一塊，我們就以產品網頁為例來介紹。

 

 

先以文字列出每個網頁設計元素的優先順序

以文字列表的方式列出每個功能的優先順序，就能避開在設計上「每個都很重要」的誤區。這個步驟也就是所謂的「需求確認」，了解網頁頁面真正的需求及優先順序，將有助於把一個網頁做好。一個所謂看得懂、找得到的網頁設計，必然經過這些思考流程。

 

範例：

• 產品名稱
• 產品主圖
• 產品規格
• 立即訂購
• 產品說明
• 其他選購項目
• Social Link

 

我們可以進一步對每個設計要素加入需求原因：

1. 產品名稱(找對商品)
2. 產品主圖(看清楚產品外觀)
3. 產品規格(看規格是否符合使用者需求)
4. 立即訂購(看到對的產品，就可以直接買)
5. 產品說明(字太多，沒時間就不會仔細看)
6. 其他選購項目(如果這個產品不是真正想要的，看一下還有什麼其他的選擇)
7. Social Link(讓網友跟好朋友分享，但其實網友不會這麼好心)

 

再依優先順序做取捨

標示在前面的是最重要的購買決策要素，也就是決定購買的主要因素。網友們在一個網頁上會先花3秒確認這是不是要搜尋的產品，再花6秒看介紹做進一步的確認。也就是說在一個網頁的停留時間不會超過10秒(會看超過10秒的通常是老闆自己)，思考網頁設計元素的優先順序時，一定要加入這10秒的時間要素，超過10秒不會注意到的東西，就可以不用放進去了。不要以為自己有很多設計小巧思，其實只有不到5%的人會注意到那些毫不起眼的設計。

 

依取捨後的結果提出模擬畫面(草稿)

透過圖片剪貼方式從網路上剪貼拼成一個想要的需求畫面，是最簡單也是最快速、也是最容易表達概念的方式。當然因為是從各個不同的網頁上剪貼來的，對於網頁配色、設計風格，很難在這個階段就表達很完整。在先後順序上，可以請企劃人員先剪貼出一版，再請設計師剪貼出完整度較高的版本(較接近完成品)。

 

依模擬畫面完成網頁UI設計(完稿)

當模擬畫面討論到可以定下來的程度，對畫面上的設計元素比例也都符合每個需求點、優先順序後，就可以請設計師花時間將這整個畫面完稿。網頁設計不是平面設計，網頁設計不是平面設計，網頁設計不是平面設計(很重要，一定要說三次)，每個設計元素都是有它代表的功能性概念，加上現在RWD網頁設計架構，因此在版面設計的同時也要考慮在手機版的呈現方式。通常越單純的設計，才能適應各種不同尺寸的裝置。網頁設計一定要避免疊床架屋的處理，越是複雜(不是豐富)的設計，越容易走向失敗的結果。

 

最後進行設計簡報

完成設計後，很多人會以為到這個階段就結束了，但當一個好的設計遇上不完整的簡報，也常常會被打槍。設計簡報可以是口頭方式或是書面方式。畫面簡單可以自行理解的，就直接用口頭報告。畫面複雜又涉汲許多設計概念的，建議用PPT做簡報。

 

網頁設計簡報有下列幾個重點：

1. 以電腦畫面的比例尺寸來呈現網頁。一個網頁設計稿經常是長條型的畫面，但網頁在真正使用的情境下，基本上只能看到電腦螢幕的區塊。把一個網頁設計稿以PPT分頁分成幾個不同的區塊，將有助於讓網頁設計領域以外的相關人士進一步理解網頁的真實使用狀況。
2. 在PPT上將每個區塊標示可能的互動功能和設計說明。這裡寫重點就好，用來提示提案者及簡報對象用(大老闆或主管)。

 

結語

網頁是被設計來進行互動的，但使用者並不會一直在網頁上點來點去。90%的使用者面對複雜的網頁畫面都會有選擇障礙，剩下的10%不是金主就是業主。大部份的使用者看著網頁只會往下滑，尤其是手機上網習慣，更加重了這個設計趨勢。因此盡可能的減少需要使用者點擊或展開的動作，才會是好的網頁設計。一個操作簡單、看得懂、找得到的網頁，在網友眼中就是100分的網頁。

 

 

＊ 歡迎分享這篇文章，分享時請加入文章來源：凱士網頁設計公司

 

 

 

 

 

 

 

Eric Wang 凱士網頁設計公司 專案顧問 Eric，擁有設計、理工、管理等跨領域背景，樂於和不同領域的專業工作者進行分享與討論。在專案工作外，同時也兼任大學行銷系業界講師及企業內訓課程講師，長期致力於「網頁設計白話文運動」。