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

適當的畫布

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

標號的使用

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

頁面的階層

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

動作的標示

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

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

文字的使用

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

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

也有許多時候會直接使用文字來取代UI按鈕，優點是直接精確的溝通避免Icon產生理解不一，可能需要在用詞上注意不同國家的文化差異。
 
以上三大項是一般我們在繪製Wireframe需要注意的地方，當然還有許多設計小細節，有機會再一一討論。