網頁設計思考之一

一直在思考一個問題: 怎樣的設計算好的設計? 是否有規則可循? 應該注意什麼?

一個很漂亮的網頁模板應用到不同案子往往呈現出不同的效果. 例如: 韓國網頁設計模版的顏色和圖形配置都很漂亮,但是要套用到我們的專案時總有不對勁的地方, 經常從上百個模版來來回回找不到一個合適的.可能我龜毛, 但這不是主要的原因. 原因是網站的主題不同, 區塊數量不同, 擺放位置也不同, 如果要置換掉圖片, 畫面整體色調和風格就差很多, 如果要新增或刪除某些資料區塊, 原來很平衡的版面配置和結構就破壞了, 所以最後還是選擇自己重新設計.

當然認為省時省力用的很高興的人也大有人在, 可能神經敏感度比較弱吧! 顏色亮一點暗一點, 位置左一點右一點, 字大一點小一點, 都是影響畫面的因素之一. 如果分辨不出這些細微差異也不用期待有什麼好作品產生. 從事設計的人得把"眼光"和"敏銳度"調高一點才有可能做出好作品, 才有進步的空間.

我是不喜歡讓規則綁死的人, 但是規則沒有原則應該有的, 可能一直依照某些原則做. 只是長年累月下來已經內化成為直覺, 如果要再外化成語言文字形容出來就需要仔細回想和整理. 這就好比回答穿衣服是先穿左手還是右手, 先穿左腳還是右腳一樣, 需要模擬一下才有答案是吧!

按照設計流程歸納出應該注意的幾點:

1. 清楚網站需求和規劃

好的設計除了自我的主觀認知外, 應該要符合客戶, 使用者和企劃的期待, 在操作介面, 使用功能, 資訊結構和視覺感受上都能滿足需求. 所以漂亮不是好的設計唯一追求的目標. 在開始設計時要清楚整個專案的需求和規劃的方向才好做整體思考, 並預留近期內(2~3年)可能新增資料的擴充性. 漏了其中一二項要再找空隙補進來都很容易破壞畫面, 需要重新調整版面. 時程掌控和團隊成員也很重要, 總是有機會遇到老在狀況外或傳遞錯誤訊息的天兵, 沒法殺了他就只能自立自強一點另外找人問清楚. 因為事情最後沒做好要再去責怪誰都無濟於事.

多數設計人員會本能的以視覺為優先考量, 一旦要求顧慮其他功能需求總會有顧此失彼的情況. 例如無障礙化或web標準化的要求下, 很多動態呈現效果必須放棄, 限制了畫面的可變化性. 當功能為必需時, 設計之前一定要先將這些因素考慮進來.

2. 區分網站型態和主題

以資訊為主的網站本身資料多, 設計時以能夠協助讀者區隔和辨識資料並流暢的引導閱讀內容為主要目的. 很忌諱加太多背景圖和琳琅滿目的icon, 造成畫面擁擠, 找不到喘息的空間. 企業網站的話, 視覺感受可以強一些, 表現希望傳達的印象和公司理念, 重點資訊應該擺在主推的產品介紹, 其他的是其次, 不需佔用太大面積. 而資料少的網站就要仰賴技巧性的留白, 色塊或者裝飾圖片撐版面, 避免看起來空洞. 但是資料太多也不是好事, George Miller有項心理學法則(1956年): "魔術數字7加減2" 指出人一次能處理或記憶的資訊數量大概只有7項, 多了也記不住, 反而模糊了焦點. 網站首頁設計也一樣, 只需把希望人家知道的重點依序強調出來就可以.

主題清楚的網站很好選擇插圖和背景, 例如介紹農產品的知識網站, 是鳳梨的就擺上鳳梨照片, 是水蜜桃就擺水蜜桃照片, 絲毫不含糊. 但是像範圍涵蓋台灣風土民情, 資訊科技, 生活體育, 衛生保健等主題廣泛的網站就很難只選擇其中一二項圖片作表現. 如果只放科技圖片會被誤以為是科普網站, 只放風景照片也容易被誤認為是旅遊景點介紹, 侷限了這個網站的主題. 如果要用合成方式縮小照片同時放很多張的, 又容易看不清楚照片內容, 造成圖片雜亂混合在一起不好看的情況. 所以經常有人為了要選哪一張主題圖片和客戶糾纏不清.

比較好的解決方式有三種: 一個是採用多張照片輪播(Flash或程式控制), 可一次清楚呈現多個主題; 一個是允許客戶自己依照當時的焦點內容更換主題圖片, 但是這一點必須視客戶的製圖能力而定, 避免讓他"上窮碧落下黃泉去找一張圖"的困擾(一位客戶就是這樣形容他的痛楚); 另一個是乾脆不要放主題圖片, 將網站的Logo和Title名稱修好看一點, 取代主題圖片成為視覺焦點. 很多所謂web2.0 的網站是這麼做的, 可以減少像這樣的爭議問題.

3. 構思網站版面和層級

了解需求和主題型態之後就依據資料結構做版面配置和風格設計. 先從重要性分配資料區塊的面積和位置, 再設定合適的風格繪製主題icon圖像. 基本的要求是文字排列要工整(注意中英文版文字表現的差異), 段落與邊界的距離留白適當, 色彩的選用搭配協調等. 以資訊網站來說, 做到這幾點就成功一半了. 不需要堅持一定得放多少圖片才對得起客戶. 和歐美的網站比較起來, 台灣的網站設計花俏繁複了點.

網頁一致性原則也很重要, 內容文字的連結應該統一一種顏色表示, 使用者才容易辨認出這是可點選的連結. 除了選單按鈕之外, 應該避免上面區塊的連結一種顏色, 下面區塊連結又一種顏色, 到另一個頁面又有各自不同的顏色. 標題也是, 相同層級的標題應該用相同的圖示或大小粗細相同的字級表示. 這觀念和書籍排版一樣, 每本書都有目錄, 對照目錄的層級在內頁看到的大標小標都有一致的樣式呈現, 才能辨認目前這段文字在整本書中屬於哪個層級. 但是很多網站設計沒有這種觀念, 每個頁面使用各自不同的標題設計.

4. 與客戶溝通

客戶的意見需要尊重, 但是發現有疑慮時應該提出來討論, 另找一個合適的解決方法. 設計師的專業就表現在可以預先知道可行和不可行的情況. 一味遵照客戶意見做容易有才改了一個問題又衍生另一個問題的情況, 拉長修改的時間. 但是要設計師像拼圖一樣拼湊出客戶腦袋中的想法是頗高難度的. 有一種客戶無法清楚描述想像中的畫面, 但是又很堅持一定要做出他要的樣子, 所以就藉用你的手不停的修改. 遇上這種客戶是設計師最無奈的事!

也有一種很害怕被貼標籤的人, 明明不喜歡藍色想改成綠色, 又不方便明說, 於是"指鹿為馬"改這改那的, 看你什麼時候可以猜到他要的顏色. 如果不識相的直接問喜歡什麼顏色? 只會得到"依照施政方針"這類模糊的答案. 有時候客戶說出來的不見得是他真正的想法, 設計師可能要像"決斷2秒間"這本書提到的: 做準確的"薄片擷取", 找出真正關鍵的點才能對症下藥. 所以做設計不是太難, 要面對這些難搞的客戶比較難.


上述整理的多半是實務上容易遇見需要注意的地方, 不著重在畫面的細節, 因為設計的基本功夫參考網頁設計或平面設計這類書籍就可以, 像之前介紹的幾本書都不錯, 不需要談相同的東西, 我也不會寫的比這些書好.

正常來說, 每一段時期應該有不同的想法出來, 表示有進步. 用"看山是山; 看山不是山"來比喻設計應該是很貼切的. 隨著認知了解程度的不同, 看法也會不同. 希望以後我還有另外不同的想法出來, 寫成思考之二, 之三... .