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)
- 降低等待的不耐感
- 系統回饋
Mockup 視覺稿
畫好 wireframe 之後就是 mockup，此階段決定頁面的視覺風格，並定義出UI Style Guide。像是 dribbble、 Behance 這些網站上都是 Mockup
標示文件包含：尺寸、距離、文字屬性、色碼。
圖片標示元素包含： 圖片類型、圖檔名稱、間距、座標、尺寸、透明度。
文字標示元素包含：字級、字體、色碼、字距、行高、透明度、樣式。
除此之外 對齊方式、濾鏡 (CSS)、邊框樣式 也需要標示出來。
Prototype 原型
是指可被操作且動態的原型，目的是模擬使用者與介面之間的互動，例如說按鈕按下後會出現的操作方式與呈現等。簡單來說，就是模擬一個產品完整的體驗。
老師推薦製作prototype的工具： Hype3、Principle、invision、POP app
