前面三個階段是在確定產品的功能，一旦產品的核心不會有太大變動之後，就可以開始做畫面設計，這邊也是有三個階段- 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。
• 對方只會用他們已知的語言來表達他們的感受，設計師需要能把它轉化成自己能理解的語言，以視覺圖像的形式確認雙方有一樣的認知後，才開始工作。