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

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

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

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

二、為什么需要線框圖？

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

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

如果進(jìn)行初期可用性測(cè)試的話，線框圖（或擴(kuò)展為Lo-Fi Prototype）可作為用戶測(cè)試工具。

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

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

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

受眾：不同場(chǎng)合，不同的受眾，對(duì)線框圖的需求亦有不同。

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

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

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

五、需要注意的問題：

1. 效率

快速制作，快速討論并達(dá)成共識(shí)，該效率下的線框圖才有真正的價(jià)值。

2. 越簡(jiǎn)略，越利于討論

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

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

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

4. 不添加顏色

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

5. 版本歷史

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

作者：書生wilson

文章來源：flyalone.net

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

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