本文主要內容包括線框圖定義、目的、制作概要、注意問題等，現(xiàn)階段筆者處于學習階段，待有了更多實踐之后，將添加更多細節(jié)。

一、什么是線框圖（wireframe）？

線框圖是對最終產品各頁面內容的簡單呈現(xiàn)，通過簡單線條展示現(xiàn)產品框架和主體內容模塊，通常不做頁面細節(jié)（顏色/字體/圖片等）描述。

線框圖提供了一個供討論、供評審、供確認的承載物。

二、為什么需要線框圖？

團隊內部溝通設計思想，從而對產品框架得到一致的理解。

用于向公司上層和客戶展示設計想法。

如果進行初期可用性測試的話，線框圖（或擴展為Lo-Fi Prototype）可作為用戶測試工具。

作為最終網(wǎng)站的初級設計藍圖（blueprint），給設計師和工程師一個清晰的產品構架。

三、構建wireframe之前需要思考以下幾點？

時機： 產品不同的開發(fā)階段，團隊需要的線框圖的重點內容和詳細程度是不同的。

受眾：不同場合，不同的受眾，對線框圖的需求亦有不同。

目標：希望線框圖此時產生什么作用？

內容：準備好要展示的內容列表，才能正確的做事。

四、不同時期的線框圖設計概要圖示

五、需要注意的問題：

1. 效率

快速制作，快速討論并達成共識，該效率下的線框圖才有真正的價值。

2. 越簡略，越利于討論

線框圖需要經(jīng)過反復討論、確認、修改，因此初期的線框圖不要增加過多細節(jié)，便于激發(fā)想象和隨時修改

3. 時刻體現(xiàn)優(yōu)先級順序

在確定功能需求之后，一定要確定功能需求的優(yōu)先級，并體現(xiàn)在線框圖上，甚至可以將優(yōu)先級順序注釋在旁邊，討論過程中用于提醒參會者。如果線框圖用于展示，那么優(yōu)先級的體現(xiàn)會讓受眾一目了然。

4. 不添加顏色

灰度有助于把注意力集中在產品功能層面和布局層面，如果直接加圖片和顏色，容易讓人陷入對色彩細節(jié)的判斷中忽略掉功能層面更本質的東西。

5. 版本歷史

隨時將各種版本的線框圖編號、存檔，并記錄增量，便于恢復設計過程中的一些失誤，追根溯源。

作者：書生wilson

文章來源：flyalone.net

標簽： wireframe 交互設計 產品 ��

版權申明：本站文章部分自網(wǎng)絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。