前一篇([互動設計]從繪製Wireframe開始到UI/UX)有提到一些繪製Wireframe的工具,雖然各家工具還是有不同特點,但依然有一個設計原則,本篇我們就以架構內容已經討論完畢的情況下,針對繪製框線圖要注意的細節來討論,前面也有提到Wireframe是技術類參考文件,目的是做溝通。因此,我們不需要花太多時間處裡視覺元素,要做的事情就專注在溝通,把需求標示清楚即可。
適當的畫布
我們在做網站或軟體開發還是必須以裝置螢幕尺寸為底,為了表現在不同裝置位置上的樣貌,依然要使用正確的比例來繪製,如此一來設計師才易做出正確的設計。(可能光手機就有很多解析度,但可以用16:9、16:10這樣去分類即可)
標號的使用
標號的目的是為了增加整體的可讀性,可以列出幾個重點項目。
頁面的階層
列如現在是在首頁還是在其他頁面的明顯標示,通常都會標示在頁框的上方,因為有時候頁面的結構非常相似,如果不寫出來不容易分辨,標明的好處當然也是更清楚畫面的架構位置。
動作的標示
通常指的是點擊後的反應行為,或者連出去到什麼頁面,將行為拉出明顯的指示放到框架外,切勿在框架內直接標註,避免混淆是頁面中的元素。
若相同的頁面,執行特定行為後有所改變也應該要清楚標示,例如顯示的資訊有何變化。
文字的使用
而文字的部分也要以好閱讀,有統一性規則為優先來使用。
- 使用統一的深色(灰黑)
- 使用單一字型(黑體)
- 字級大小勿太多變化(用主標、次標、內文2-3種即可)
- 勿使用暗示風格的圖案(照片用叉叉的方塊表示,Icon則用簡單造型)
也有許多時候會直接使用文字來取代UI按鈕,優點是直接精確的溝通避免Icon產生理解不一,可能需要在用詞上注意不同國家的文化差異。
以上三大項是一般我們在繪製Wireframe需要注意的地方,當然還有許多設計小細節,有機會再一一討論。