[互動設計]繪製Wireframe的要點

前一篇([互動設計]從繪製Wireframe開始到UI/UX)有提到一些繪製Wireframe的工具,雖然各家工具還是有不同特點,但依然有一個設計原則,本篇我們就以架構內容已經討論完畢的情況下,針對繪製框線圖要注意的細節來討論,前面也有提到Wireframe是技術類參考文件,目的是做溝通。因此,我們不需要花太多時間處裡視覺元素,要做的事情就專注在溝通,把需求標示清楚即可。

適當的畫布

我們在做網站或軟體開發還是必須以裝置螢幕尺寸為底,為了表現在不同裝置位置上的樣貌,依然要使用正確的比例來繪製,如此一來設計師才易做出正確的設計。(可能光手機就有很多解析度,但可以用16:9、16:10這樣去分類即可)

1538820737078

標號的使用

標號的目的是為了增加整體的可讀性,可以列出幾個重點項目。

頁面的階層

列如現在是在首頁還是在其他頁面的明顯標示,通常都會標示在頁框的上方,因為有時候頁面的結構非常相似,如果不寫出來不容易分辨,標明的好處當然也是更清楚畫面的架構位置。

1538828493955

動作的標示

通常指的是點擊後的反應行為,或者連出去到什麼頁面,將行為拉出明顯的指示放到框架外,切勿在框架內直接標註,避免混淆是頁面中的元素。

1538829466050

若相同的頁面,執行特定行為後有所改變也應該要清楚標示,例如顯示的資訊有何變化。

1538829920296

文字的使用

而文字的部分也要以好閱讀,有統一性規則為優先來使用。

  • 使用統一的深色(灰黑)
  • 使用單一字型(黑體)
  • 字級大小勿太多變化(用主標、次標、內文2-3種即可)
  • 勿使用暗示風格的圖案(照片用叉叉的方塊表示,Icon則用簡單造型)

也有許多時候會直接使用文字來取代UI按鈕,優點是直接精確的溝通避免Icon產生理解不一,可能需要在用詞上注意不同國家的文化差異。

 

以上三大項是一般我們在繪製Wireframe需要注意的地方,當然還有許多設計小細節,有機會再一一討論。

Leave a Reply