工作清單:Wireframe

Funational MapUI Flow 後,終於到來回修改最多次的 Wireframe 階段了。比起 Funational Map 和 UI Flow,這應該是最多人會接觸到的「規劃」。同時也是最花時間、圖片說明量最大的部份。在這階段修修改改總比都在畫 Mockup 或套程式了才在修改來得輕鬆省力。

本文很舊了僅供參考。

以下是 Wireframe 該包含的部份,要寫的說明文字量可不少:

說明文字

說明文字包山包海,不只 Funational Map 和 UI Flow 有的都要畫或寫在 Wireframe 上,沒有的也一樣要註明清楚。請以 「就算沒人講解也能讓第一次接觸這份文件的人看得懂」 的心態製作 Wireframe 文件。

編號

UI Flow 有幾頁、Wireframe 就有幾頁甚至更多。把 UI Flow 當成是一本書的目錄頁、編號就是頁碼。當產品頁面數量一多,編號可以加快溝通的速度,光看編號開頭就知道是哪個分類下的頁面。狀態或提示視情況會額外編碼。未來RD在刻介面時就是以 Wireframe 為基礎,要是 Wireframe 少畫一頁,最後產品也會掉一頁…

尺寸

  • Web Desktop、Table、Mobile
  • iOS、Android…
  • Mac、Win…

不同平台有不同的尺寸,繪製 Wireframe 時需按照這些規定製作。平台官方文件給的是多少 px、電腦軟體畫的 Wireframe 上就是多少 px。手繪 Wireframe 比例大概抓一下就好了。

Grid

  • Web Desktop、Table、Mobile
  • iOS、Android…
  • Mac、Win…

不管哪個平台都有它的 Grid 要遵守,尤其是 Responsive Web。通常都會有一份設計規範,明確定義 Grid 規則,比如 Bootstrap 、Smart TV Definition of Application Screen Layout

(參考:Grid 的運用:PS外掛Fixed Grid System詳解

狀態變化

如果 Functional Map 和 UI Flow 都有規劃到,那只要耐心地將所有狀態變化畫出來就好(參考: 各種狀態與突發狀況 )。需要注意 Flow 不會特別註明、但還是要在 Wireframe 寫清楚的部份。

  • 按鈕狀態
  • 讀取中
  • 圖表
  • 選單

按鈕狀態

按鈕狀態包含下列數種:一般 normal、點擊 highlight、無法被點選 disable、多選 select。注意 Web Desktop 和 Web Mobile 的操作方式不同,Desktop 有 a:hover 可用,但 Mobile 沒有。

讀取中

如果頁面、圖片等等須要連網更新,就要考慮製作「讀取中」的提示狀態。

圖表

產品裡如果包含圖表,記得要給 RD 產生圖表的規則,每個數值、欄位是怎麼來的。這部份可能會是 PM 或 BD 產出,如果沒有,請在小組會議上提起這件事要求專案成員提供。

選單

所有選項都該被列出,尤其是下拉式選單。

文字、圖片

Wireframe 雖然去除視覺影響,但文字 h1、h2、p 等各種形態仍要統一。比如所有標題都用 20px、副標 18px、內文 14px。圖片尺寸也同樣要有統一性。統一性指的不是 18px 就畫 18px 人肉電腦這麼精準,而是指這個標題在這裡畫這麼大、在其他地方的這個標題也要畫差不多這麼大。有誤差沒有關係,不要搞到內文字看起來比標題大就好。

  • 文字
  • 圖片

文字

畫 Wireframe 時 PM、BD 不一定能提供定版的文案,此時會用假字。假字內容越接近產品最終形態越好,比如標題文字就給一個像是真正會被使用的標題;時間文字直接打上 2014 年 9 月 19 日。需考量某個區塊的文字必須全部顯示、又有可能會有好幾行和一兩個字的極端情況。如果手繪就不用這麼講究了,用一排 XXX 或是橫線帶過,知道這裡放的是文字即可。

圖片

Wireframe 不會使用真正圖片,而是使用方框或填充灰色的方塊代表,可以的話要與最終產品上出現的圖片比例尺寸盡量接近。

連結

觸發這個元件後頁面會導到哪裡去,請對照 UI Flow 的頁面編號。

  • 連到哪一頁
  • 出現什麼

連到哪一頁

有些元件觸發後會連到其他頁面,元件旁就要寫明「因為做了什麼事」、「所以連到哪一頁」,標上連結過去的頁面編號。

跳出什麼

有些元件觸發後不會連到其他頁面,而是出現 Popover、Modal Window 之類的視窗或選單。同樣要在該元件旁註明「因為做了什麼事」、「所以出現什麼」。

特效

各式動態效果、能讓產品看起來很炫、但拿掉也不會影響到功能的部份。 規劃特效動畫前請先和 RD 討論實作可行性,嚴禁設計師自己一個人天馬行空腦補。

  • 特效
  • 轉場
  • 音效
  • 震動

特效

某些小地方使用特效動畫有畫龍點睛之效,用太兇會造成使用者反感、RD 也會想揍你。Wireframe 上要寫明特效呈現方式,圖文很難表達時請另附件範例,務必要讓接手 Wireframe 的人能理解。

轉場

頁面和頁面之間的過場動畫。轉場動畫可提示使用者這個頁面是依附在前頁、還是中斷目前操作。轉場動畫時間不要太頻繁、時間過長,使用者容易疲憊厭煩。Xcode 內建數種轉場方式,也有人用 Swift 寫了套件,請和 RD 討論好要用哪種方式處理再註明到 Wireframe 上。

外部影響

各種外部輸入而影響頁面的可能。

  • 手勢
  • Portrait 和 Landscape
  • 搖晃
  • 語音
  • 外部設備

結論

Wireframe 是線框稿沒錯,但在產品開發上它不僅僅是線框稿這麼簡單,Wireframe 文件應該包含所有製作上的細節,說明文字量非常龐大,不僅僅只有圖而已。實際製作的時候真要照這份清單跑,絕對有種怎麼畫怎麼寫永遠都做不完的感覺。但 RD 要接手 Wireframe 進行開發、未來產品驗收也需要這份文件,越詳細越不容易有溝通落差或誤會。

上述內容肯定有遺漏缺少的部份,本文很舊了僅供參考。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close