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

 

網頁版面設計經常是網頁設計師與客戶溝通的痛點，尤其視覺設計是一件很主觀的事，每個人對於同樣的畫面都會有自己的看法與想法。

 

有些公司甚至是透過「企業決策」產生這個需求版型，先把各個主管的建議加進來，再把大老闆的意見也放進來，最後產生一個混合所有需求的版型，這種不是以目標族群(TA)為主的版型設計，當然設計出來的結果也只有老闆看著滿意，而消費者(客戶)看了搖頭，因為這樣太多意見的版面看不太出真正的閱讀動線和視覺焦點。

 

其中，首頁通常是網頁中最優先進行的一塊，我們以「首頁」為例來介紹網頁的視覺溝通流程。

 

Step 1：列出每個元素的優先順序

以文字的方式列出每個區塊的優先順序，用來避開在設計上「每個都很重要」的誤區，有限的空間裡如果全部都是重點，那就等於沒有重點。第一階段要進行所謂的「需求確認」，了解網頁頁面真正的需求及優先順序，將有助於把一個網頁做好。

 

範例：

 

• 主視覺區塊
• 產品專區/服務項目
• CTA (Call To Action)
• 關於我們
• 實績案例
• 常見問答
• Social Link

 

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

 

• 主視覺區塊：聚焦品牌或企業價值
• 產品專區：把你的產品讓讀者知道，增加曝光度。
• CTA (Call To Action)：讓使用者找得到你，增加轉單率。
• 關於我們：精簡說明「你是誰」。
• 服務項目：把你的服務項目讓讀者知道，增加搜尋機會。
• 實績案例：展示客戶的評價，以提升信任感。
• 常見問答：針對訪客常見疑問進行預先解答。
• Social Link：讓網友跟好朋友分享，但其實網友不太會做這個舉動。

 

Step 2：依優先順序做取捨

標示在越前面的是越重要的區塊要素，也就是決定是否會與你接洽的主要因素。

通常讀者們在一個網頁區塊的停留時間落在10-15秒之間(會看超過的通常是老闆自己)，思考網頁設計元素的優先順序時，一定要加入時間要素，超過15秒不會注意到的東西，真的不用放進去了。不要以為自己有很多設計小巧思，其實只有不到5%的人會注意到那些毫不起眼的設計。

 

取捨後的結果，範例：

 

• 主視覺區塊
• 關於我們
• 產品專區
• 常見問答
• 服務項目
• CTA (Call To Action)

 

Step 3：依取捨結果提出草稿畫面

透過上方的取捨動作，你會得到一個你預期網站首頁的區塊，接下來就是視覺設計。通常在網站設計前，我們會透過圖片剪貼方式拼出一個需求畫面，這是最簡單也是最快速、也是最容易表達概念的方式。當然因為是從各個不同的網頁上剪貼來的，對於網頁配色、設計風格，很難在這個階段就表達很完整。這樣做的主要原因是讓網頁設計團隊跟你取得首頁區塊的共識，透過圖片剪貼的方式來讓溝通成本降低。

 

Step 4：依草稿畫面完成網頁UI設計

當草稿畫面討論到可以定下來的程度，對畫面上的設計元素比例也都符合每個需求點、優先順序後，就可以請設計師花時間將這整個畫面完稿。

但是，網頁設計不是平面設計，網頁設計不是平面設計，網頁設計不是平面設計！(很重要，一定要說三次)，每個設計元素都是有它代表的功能性概念，加上現在RWD網頁設計架構，因此在版面設計的同時也要考慮在手機版的呈現方式。通常越單純的設計，才能適應各種不同尺寸的裝置。網頁設計一定要避免疊床架屋的處理，越是複雜(不是豐富)的設計，越容易走向失敗的結果。

 

 

 

Step 5：開版後進行設計簡報

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

 

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

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

 

 

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

 

 

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

 

 

 

 

 

 

 

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