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

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

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

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

二、為什么需要線框圖？

團隊內(nèi)部溝通設(shè)計思想，從而對產(chǎn)品框架得到一致的理解。

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

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

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

三、構(gòu)建wireframe之前需要思考以下幾點？

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

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

目標(biāo)：希望線框圖此時產(chǎn)生什么作用？

內(nèi)容：準(zhǔn)備好要展示的內(nèi)容列表，才能正確的做事。

四、不同時期的線框圖設(shè)計概要圖示

五、需要注意的問題：

1. 效率

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

2. 越簡略，越利于討論

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

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

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

4. 不添加顏色

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

5. 版本歷史

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

作者：書生wilson

文章來源：flyalone.net

標(biāo)簽： wireframe 交互設(shè)計 產(chǎn)品 ��

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