DMA01
線框圖(Wireframe)標註的識別規劃小技巧

線框圖(Wireframe)標註的識別規劃小技巧

獸群之心 / Soking

我們來聊聊怎麼在 Wireframe 上面寫互動註解。

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

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

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

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

 

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

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

缺乏明顯的資訊架構識別會讓人在 wireframe 中迷路

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

添加資訊架構的描述讓 Wireframe 有了路標指示

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

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

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

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

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

 

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

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

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

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

展示頁面區塊重要的狀態變化

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

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

頁面依據載入的資料量與狀態呈現變化,空值真的hen常被忘記

 

技巧三:標示互動,不要寫在臉上

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

介面的互動指引,可以拉出指示線到畫面外說明

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

真的別把介面的說明註解寫在畫面內

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

來人啊!把說明註解拉出去!

 

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

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

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

配合資訊架構,寫清楚導航指引

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

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

 

相關文章:

 

 

原文出處:線框圖(Wireframe)標註的識別規劃小技巧

 獸群之心 / Soking
獸群之心 / Soking

產品設計師以及 UX 教育講師。

Hahow線上課:https://hahow.in/cr/think-with-ux

工作聯絡:[email protected]

談UX設計師網站改版三招:利害關係人訪談/數據分析/Prototype
本篇文章是工作心得,著重專案流程上遇到的情境問題。以下我會介紹這三種 UX 工具如何陪我度過網站改版案的驚濤駭浪: 1. 利害關係人訪談 2. 數據分析 3. Prototype
淺談設計品質控管(Design QA)
今天想來和大家聊聊關於「設計品質控管」這件事,聊聊設計師可以在什麼地方出力,讓每次發佈的產品的體驗變得更好。
UX設計師運用Google Analytics協助網站改版的網站分析小技巧
本文延續《談UX設計師網站改版三招:利害關係人訪談/數據分析/Prototype》這篇網站改版話題,從數據分析的角度再整理一次網站改版過程中UX設計師們可以運用的實務技巧。