Wireframe 線框稿
用手繪或是電腦軟體畫出頁面雛形,一般線框圖可以由線框、無色但有灰度的方塊、文字、線條及箭頭構成。在畫的同時把 User Story 、Functional Map、 Flow Chart、 UI Flow 都放旁邊參考。
用途:
- 網頁或應用程式的低保真原型。
- 去除所有視覺影響,用來確認將要顯示的頁面元素。
- 需要考慮 觸發( ex: 網頁的hover )、回饋( ex: 點擊後出現下拉選單 )、行為、狀態。
頁面的六種狀態
理想狀態 ( Ideal State)
- 你最希望人們看到的狀態又稱最完美狀態
- 最能發揮產品淺力的狀態
- 設計畫面的其他狀態的基礎
空白狀態 ( Empty State)
- 用戶第一次開始使用
- 所有資料都清除後
- 沒有資料可顯示時
極限狀態 (Maximum State)
- 最小值 (可能有負數)
- 最大值 (超過如何顯示) ex : Line未讀訊息顯示 999+
錯誤狀態 (Error State)
- 有事情出錯時畫面
- 各種出錯的回饋
局部資料狀態 (Partial State)
- 只顯示部份資料的時候
- 引導使用者填完資料
- 讓使用者預見理想狀態
- 引起使用者的興趣,留住 ex: 給予使用者小獎勵
載入中狀態 (Loading State)
- 降低等待的不耐感
- 系統回饋
Prototype 原型
是指可被操作且動態的原型,目的是模擬使用者與介面之間的互動,例如說按鈕按下後會出現的操作方式與呈現等。簡單來說,就是模擬一個產品完整的體驗。
老師推薦製作prototype的工具: Hype3、Principle、invision、POP app