# Wireframe


用手繪或是電腦軟體畫出產品頁面雛形，一般線框圖可以由線框、無色但有灰度的方塊、文字、線條及箭頭構成。在畫的同時把 User Story 、Functional Map、 Flow Chart、 UI Flow 都放旁邊參考。

用途：
網頁或應用程式的低保真原型。
去除所有視覺影響，用來確認將要顯示的頁面元素。
需要考慮 觸發( ex: 網頁的hover )、回饋( ex: 點擊後出現下拉選單 )、行為、狀態。

[大學生的 UI 設計選修課（9）練習畫 Wireframe 的方法](https://blog.akanelee.me/2019/09/24/usc-ui-design-class-9-wireframe/)

[為什麼要畫3次 Wireframe？](https://blog.akanelee.me/posts/159795-three-times-wireframe/)

Wireframe 是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。

繪製Wireframe的目的在於確認每一個頁面的構成，重點在於畫面上要呈現什麼內容、而不是看起來漂不漂亮。就像是室內設計平面圖，只有簡單的幾何圖型，卻是裝修最重要的依據。

- 每個頁面都已繪出？ UI Flow
- 所需功能都被規劃到了嗎？ Funcitonal Map
- 畫面上元件是否易於操作？ Layout, 頁面資訊

Wireframe 製作成本低，容易被修改、繪製快速，在開發初期是溝通和發想的重要步驟，節省時間和人力成本，又可防止開發中期發現缺漏或不合用導致全盤重來。

註解說明通常有幾大類：
- 過場動畫、特效
- 畫面操作
- 視窗種類
- 狀態改變

### UI stack


[如何修正壞 UI](https://medium.com/@zonble/%E7%BF%BB%E8%AD%AF-%E5%A6%82%E4%BD%95%E4%BF%AE%E6%AD%A3%E5%A3%9E-ui-2f972da15d5b)

[頁面的第 6 種狀態：極限狀態](https://blog.akanelee.me/posts/384307-sixth-state-of-the-page-maximum-state/)

[各種狀態與突發狀況](https://blog.akanelee.me/posts/162719-various-states-of-emergency/)

### 元件使用原則適用情境

Todo

### 原子設計方法論


[Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)