線框圖的價值體現在產品迭代的每一個階段，產品經理、設計師、工程師、信息架構師、商業分析師等每一個角色都可以用它來溝通和交流想法。它是整個產品的設計藍圖。
線框圖的作用
線框圖，字面意思理解為由線條和圖形組成的設計圖，實際上確實如此。但怎么畫、如何畫、畫成什么樣的精細度卻是它的精髓所在。線框圖的應用場景很多，一般我們會使用它作為一種快速草圖，既可以用一些軟件進行繪制，也可以用身邊的紙筆。有人會說這和原型有什么區別，我的看法是它們之間并沒有明確的界限。不同的團隊、不同的迭代流程和交流范圍都會影響方案的最終形態，在實際中應該靈活選擇最合適的風格來適應工作需求。
產品立場：
- 快速表達產品概念
- 將產品的設計邏輯和信息表現形式完整聯系起來
- 通過可視化的形式傳遞整個產品的架構，包括內容的布局、信息的組織方式、接口的功能及同用戶交互的行為體現等等。
角色立場
- 交互設計師和信息架構師用來表現視圖和頁面之間的用戶流。
- 平面設計師利用線框圖推進視覺設計。
- 開發者通過線框圖能夠了解產品的功能，判斷哪些部分需要何種代碼實現。
- 對于后臺開發人員，低保真的線框圖能夠表達清楚整個產品的結構和功能即可。對于前端工程師，最好使用高保真的線框圖來表達清楚產品的細節。
每個特定角色的關注點都不同，產品內部的相關者需要確保設計滿足需求，以適合整個產品的全局實現。作為產品的早期畫像，線框圖也直接影響著最終的產品形態。
線框圖的表現形式
你在線框圖上添加的每一個元素、功能或者是動作都會影響相關人員或是用戶對產品概念的最終理解。所以制作線框圖，準確表達我們需要傳遞的想法才是最終目的，工具或者定義都不要過分糾結。
工具
使用任何工具都不是問題，只要能夠達到你的期望效果。有時候也需要根據不同階段選擇最適合的表現形式，來達到事半功倍的效果。
手繪草圖：交互設計師必練的基本功，在產品原始的概念階段，這個時候，很可能只有一個產品的大體架構或者流程，建議用紙筆即可，一方面實現快速，也便于修改。有人可能覺得紙筆沒什么技術含量，但是如果你從來沒有用過或者很少的話，你會發現，明明頭腦里有很多想法，卻完全不知道怎么畫出來，我自己就有這樣的體會，當時找了一些手繪的草圖來學習，看著很簡單，結果自己畫出來真的很丑。
軟件：Axure、Balsamiq等是我認為比較實用的交互工具，雖然現在各種交互軟件層出不窮，但是我仍然覺得axure是很強大的一款工具，如果你能夠把它用穿。當然各種交互動畫的實現不在我們討論的范圍之內。另外，設計師同樣可以用PS、AI、Sketch等繪圖軟件來實現。
類型（保真度）
這里討論的保真度包括了我們常說的低（高）保真原型，在實際工作中你會發現，當我們對線框圖進行不同程度的加工之后，它的形態往往就變成了我們所謂的原型。
無論采用何種設計形式，開始階段一定要確定好框架和流程，保證全局無誤。否則如果邊做邊想或者做到一半再去修改，會平添很多不必要的工作量，先有骨骼，再有皮囊在這里是一樣的道理。
簡圖：最簡單的一種線框圖，提供了一些基本必要信息，布局、信息層次等。你也可以添加不同尺寸的文本來體現信息的主次關系。也可以算作設計的架構形式。
灰度模型：灰度模型主要為后面的圖像設計做鋪墊，通過灰度的深淺來體現信息的主次關系，這種形式比較適合表現用戶流，可以只用色塊完成，也可以根據偏好適當細化增加文本內容。
文本高保真：字體顏色內容等方面都進行了細化，所以一般不需要過多的解釋，也比較適合推進視覺設計。
顏色高保真：在視覺設計之前令線框圖更細膩，利用顏色能夠更好的強調主次以及用戶行為等，但是不要花費大量精力在顏色的選擇上，首先你不一定能用對，其次會令相關人員產生不必要的困惑，使用比較通用的顏色即可。
- 交互高保真：讓靜態的線框圖動起來，表現更多視覺無法體現的細節：彈窗、縮放、滾動、點擊等等，這種形態一般就是我們常說的原型。
添加細節
如何添加細節，需要精細到何種程度，同樣需要根據實際情況進行考量。
基礎型：如果你是產品原型的主要負責人（小公司比較常見的狀態），那么能夠確保自己理解無誤、沒有遺漏即可，可以適當省略一些比較直觀的細節；如果設計師是個經驗豐富的人，而你又希望他有一定的自由發揮空間的話，也可以同樣處理；此外，如果你為自己的線框圖或是原型圖準備了相近的說明文檔，線框圖做的簡單一些也無妨。
注釋型：圖形的表現形式畢竟有限，有些細節需要我們做一些輔助說明。比如一些交互細節，像點擊、縮放、輸入數據，文本、跳轉鏈接、圖片的尺寸變化以及一些復雜的動畫形式、速度等等，只要表述不明的地方，最好都能附上輔助說明。Axure可以實現大部分的簡單交互，甚至邏輯判斷，但是這些實現對于一般的普通用戶來說往往比較耗時，同時，即使你實現了，相關人員可能根本沒有注意到，此時，最好再附上說明，例如：“點擊后出現XXX彈窗”。
線框圖和原型的概念很相近，原型讓線框圖能夠動起來，能夠直觀的體驗到多個線框圖之間的交互過程，幫助開發人員或者用戶快速理解產品，對于設計人員來說，精細化的靜態頁面則更有助于他們實現預想中的產品設計。
總之，制作線框圖最重要的一點就是千萬不要糾結用什么工具什么軟件，用自己最順手的就好，如何設計，如何準確的表達出我們的想法才是我們需要修煉的內功。
部分圖片來源于google
內容參考：uxpin_the_guide_to_wireframing.pdf
如果你也熱愛設計，歡迎通過公眾號與我交流
