線框圖（Wireframe）標註的識別規劃小技巧

各位好，看完「繪製線框圖（Wireframe）的視覺處理小技巧」，我們來聊聊怎麼在 Wireframe 上面寫互動註解。

我先列出一般頁面上常見的幾個重點：

• 這是哪一頁（網址、畫面的變化）
• 這頁有什麼變化（狀態的變化、資料量的變化）
• 介面有沒有互動
• 連結點擊之後要去哪

除此之外，我還會畫面上註記「數據追蹤需求」、「後端資料需求」、「前端動效」、「狀態變化的條件」等等，但這些註記較為複雜，每個專案不同，本篇先略過。

 

技巧一：建立與資訊架構呼應的識別

有87%的機率，我們在專案中會看到一份 Wireframe 檔案如下圖，請試著在沒有人說明的情況下，猜猜看這兩頁是網站中的哪一頁版面規劃？

現在，下圖我們做了些微的調整，加上邊框、並在左上角添加符合 Sitemap 規劃的說明。喔買尬，這兩個版型不過就是中段換成了文字區塊而已，居然就從首頁層級跳成活動單頁？

事實上，如果是專案中合作的設計師，此時看了右邊的活動單頁，恐怕會眉頭一皺，想動手把 Banner 的比例、版型的空間等等做出調整。

包括活動單頁文字太長怎麼辦？除了置頂輪播外，內文有多圖片嗎？之類的問題，直到大家都同意這是符合活動單頁情境的 Landing Page 該有的長相。

或許PM在這邊還會跟專案同事一起討論，此專案中活動單頁要不要在輪播 Banner 上跟首頁一致，開發也方便，行銷素材製作也有一致性。

題外話：通常一百個網站有一百零一個會將活動單頁的大圖投放到首頁版位去，而且沒有人會花時間因應版面重製。

僅僅是增加了頁面的命名，幫助讀者建立情境，規劃的問題就會逐漸浮現。

 

技巧二：頁面狀態變化的識別

又來到大家來找碴時間！
請在0.7秒內找出左右圖片不同的地方，叮咚！時間超過囉（按碼錶）。

是的，眼睛好的同學可能發現上面圖右是已登入的畫面。我們規劃的網站或APP一定會遇到各種狀態變化，但問題是如果我們沒有在 Wireframe 中標示出來，專案內的其他同事都能心領神會嗎？千萬不要依賴這種默契！

如果頁面的某些區塊會因為登入、權限、互動行為而產生變化，那就明顯的標示出來。

如上圖，在一些比較複雜的 Layout 上，我們會把區塊獨立切開來，建立不同狀態的局部 Wireframe。

另外在頁面的變化中，還有一種「資料量」的變化，例如這個：

 

技巧三：標示互動，不要寫在臉上

我看過很多次下圖右的方式，把介面上互動的說明寫在畫面上，如果你覺得問題不大，我再舉個更雷的栗子。

有木有看到圖左？不說清楚我還以為是圖片下面有簡介文案，結果是指示可點擊的功能說明。

再次 Highlight 一下，把說明註解拉出去，讓主畫面保持清爽，別在臉上寫註解。

 

技巧四：連結點擊之後要去哪？撰寫導航指引

理論上 Wireframe 應該搭配一份資訊架構的規劃服用，例如說什麼 Sitemap 之類的。

Wireframe 加上狀態變化的畫面也很多，所以請適當規劃編號，可以配合輸出時的圖檔命名，我通常會跟下一棒負責出 Mockup 的設計師統一檔案命名原則。

以上幾個小技巧能迅速提昇 Wireframe 的可讀性、易用性，也會讓你的 Wireframe 看起來好像有點專業，通常大家看到清楚易懂的東西，也會比較有耐心。

這是我工作上製作 Wireframe 的習慣，有想到什麼再持續補充，也希望大家給我一些建議。

相關文章：

• 為什麼 Side project 的用戶研究要找受訪者/受測者這麼難？
• 繪製線框圖（Wireframe）的視覺處理小技巧
• 淺談線框圖（Wireframe）
• 我入行產品UX的攻略
• UX工作上常見的多重角色困境

 

 

原文出處：線框圖（Wireframe）標註的識別規劃小技巧