iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
2

前面三個階段是在確定產品的功能,一旦產品的核心不會有太大變動之後,就可以開始做畫面設計,這邊也是有三個階段- wireframing, mockup, prototyping.

Wireframe 中文叫線框稿,依精細度從粗糙的低擬真到詳細的高擬真,wireframe 也不可能一次到位,一定會反覆修改,所以一開始不用想得完美,再度拿出紙筆把你心目中的畫面畫在紙上,記住只要用一種顏色就好,頂多用其他顏色做註解,每一個功能畫一系列的 wireframe,然後和同事主管討論可行性。依照回饋修改 wireframe,增加其真實度。

當要設計畫面細節時,就可以使用電腦軟體如 Photoshop, Illustrator等等,我是用 Sketch,該軟體有附帶 iOS 及 Material Design 的 UI template,我只需要複製我要的元件到頁面上就可以了。網路上也有許多類似的 template 素材。

這邊提供一些製作 wireframe 的關鍵點:

  • 一開始要決定產品支援的裝置和平台,同時也要確認未來會支援的對象,一旦新增支援對象,設計工作需要重構,非常費工。例如目前只開發手機版型,如果突然臨時改需求說要支援到平板,可不是只是把手機版型放大這麼簡單。
  • 檢視各功能在每一種情境下的運用狀況,如果不需要,就移除。
  • 檢視設計在不同裝置的差異。
  • 設計時要考量裝置有水平及垂直二種方向。
  • 考慮頁面佈局的方式,是要採用 static, fluid, adaptive 或是 responsive. Liquidapsive (Liqui-dap-sive)
  • 決定網站的 breakpoints。
  • 訂螢幕預設大小,以 mobile-first 為原則。行動裝置挑 iPhone SE 的 320 x 480, PC挑 1024 x 768. 如果是舊專案,可以從GA數據知道目前使用者的常用螢幕尺寸。
  • 從低擬真 wireframe 做起,看看客戶能不能接受,逐步進化到高擬真 wireframe。
  • Wireframe 也要符合網頁要使用的 grid system,方便接下來做 mockup 及 coding 時不用再去調整元件間距。
  • 接著能設計互動的細節,像是按鈕回饋,表單檢核,提示用語等等的顯示模樣。
  • 檢查每一個UI的 extreme case,像是字數超長、對身障者的易用性、無資料狀態等等。
  • 考慮頁面在轉換當中的狀態,例如 scrolling, loading等等,畫面要有什麼視覺提示?
  • 行動裝置的手勢會對畫面有什麼影響。
  • 不同類型使用者的差異,如老手和新手。
  • 支援頁面,如404, 驗證碼。
  • 做到中高擬真時的 wireframe 可以直接丟 prototype。
  • 對方只會用他們已知的語言來表達他們的感受,設計師需要能把它轉化成自己能理解的語言,以視覺圖像的形式確認雙方有一樣的認知後,才開始工作。

上一篇
Flow Chart & UI Flow
下一篇
Mockup
系列文
如何在前端開發流程中加入使用者經驗設計 - 以線上相簿為例30

尚未有邦友留言

立即登入留言