注：線框圖是設(shè)計(jì)進(jìn)程中的第一步，也可以說(shuō)它是最重要的步驟之一，因?yàn)檫@是你的想法開始成形的時(shí)候。盡管線框圖看起來(lái)很簡(jiǎn)單，但你不一定能設(shè)計(jì)好，你的線框圖可能會(huì)對(duì)最終的成品產(chǎn)生重大影響。本文介紹了正確的（和錯(cuò)誤的）設(shè)計(jì)線框圖方式，這些提到的技巧將幫助你構(gòu)建更好的網(wǎng)頁(yè)和移動(dòng)線框圖。

一、什么是線框

線框是布局的基本框架。線框中不會(huì)使用真實(shí)的用戶界面元素；相反，會(huì)使用占位符 – 用戶界面元素通常被表示為輸入框，線框在設(shè)計(jì)和開發(fā)過(guò)程的早期階段用于驗(yàn)證信息架構(gòu)和普通一般的用戶流程。

二、為什么線框圖很重要

線框圖是產(chǎn)品設(shè)計(jì)過(guò)程中的關(guān)鍵步驟，因?yàn)樗梢詭椭O(shè)計(jì)師決定應(yīng)用程序或網(wǎng)站的外觀及功能。線框圖確保參與項(xiàng)目標(biāo)每個(gè)人對(duì)其產(chǎn)品設(shè)計(jì)的構(gòu)造和功能都有一個(gè)同步的認(rèn)識(shí)，線框還可以作為產(chǎn)品文檔 – 為構(gòu)建應(yīng)用程序或網(wǎng)站的設(shè)計(jì)人員提供指導(dǎo)。

但是，設(shè)計(jì)師如何充分利用線框，他們應(yīng)該避免什么？

首先，你需要做的：

1.創(chuàng)建線框之前進(jìn)行研究

假如你想創(chuàng)建一個(gè)好的線框圖，你必需研究用戶的需要——他們到底想要什么。你需要思考兩個(gè)重點(diǎn)目標(biāo)：商業(yè)目標(biāo)和用戶目標(biāo)。這兩個(gè)目標(biāo)對(duì)你產(chǎn)品的勝利成功來(lái)說(shuō)至關(guān)重要，這些研究將幫助你設(shè)定明確的希冀期望，即通過(guò)線框圖如何實(shí)現(xiàn)你的目標(biāo)。

2.堅(jiān)持簡(jiǎn)單

線框圖與其他設(shè)計(jì)工具的主要優(yōu)點(diǎn)是創(chuàng)建速度快和結(jié)構(gòu)簡(jiǎn)單。速度尤為重要，線框圖不應(yīng)拖慢你的速度。

在提出恰當(dāng)?shù)慕鉀Q方案之前，你可能會(huì)嘗試很多種不同的選項(xiàng)。這就是為什么盡量保持你的線框圖簡(jiǎn)單性至關(guān)重要—— 這樣可以避免你分心并把重心放于傳達(dá)你的想法上。

3. 展示各種想法

在建立線框框架時(shí)，注意盡可能多地爆發(fā)想法。一般而言，創(chuàng)建的設(shè)計(jì)越多，就會(huì)越有時(shí)機(jī)找到最佳的處理方式。在一個(gè)點(diǎn)子上產(chǎn)生多種想法和變數(shù)，可以讓你看到每個(gè)想法的優(yōu)點(diǎn)和缺點(diǎn)。

4. 確保線框圖易于了解

線框作為交流的工具，其幫助其他人了解你的想法。假如你打算和團(tuán)隊(duì)和公司分享你的線框圖，那么請(qǐng)確保任何人都可以輕松的看懂你的線框圖。假如僅有一個(gè)人可理解你的線框，就說(shuō)明已經(jīng)出現(xiàn)了問(wèn)題。

嘗試遵循以下內(nèi)容來(lái)提高理解力：

向一個(gè)與你的項(xiàng)目無(wú)關(guān)的人展現(xiàn)你的線框，并詢問(wèn)他們一些問(wèn)題。這可讓你明白你應(yīng)該做些什么來(lái)提高理解力；

給你的線框添加注釋，使其更易于閱讀和理解；

查看某些元素或交互的描述也會(huì)容易很多，而不是通過(guò)查看靜態(tài)圖像來(lái)判斷應(yīng)該如何做；

用語(yǔ)言補(bǔ)充一些重要細(xì)節(jié)，而不是讓線框自己呈現(xiàn)。

5.協(xié)作

切勿單獨(dú)作畫。當(dāng)你與其他人一起集思廣益時(shí)，常常會(huì)反應(yīng)出一些好的結(jié)果，設(shè)計(jì)初期向團(tuán)隊(duì)成員展示你的線框可以幫助你證實(shí)和改進(jìn)你的想法。

反饋可幫助你改進(jìn)工作—— 聽取團(tuán)隊(duì)成員對(duì)你設(shè)計(jì)的意見，進(jìn)行迭代，依據(jù)反饋來(lái)改進(jìn)設(shè)計(jì)。

你不應(yīng)該做的：

1.不要略過(guò)應(yīng)用程序的某些部分

有些人會(huì)說(shuō)：我們的電子商務(wù)網(wǎng)站中的結(jié)賬頁(yè)面與許多其他網(wǎng)站相似，所以可以跳過(guò)應(yīng)用程序的某個(gè)部分的線框圖。很明顯我們曉得如何設(shè)計(jì)，所以忽略它，專注于設(shè)計(jì)其他部分。

避免這種想法，你必需確保應(yīng)用程序的每個(gè)部分都要有線框，因?yàn)檫@可以避免你遺漏掉可能影響用戶體驗(yàn)交互的一些重要部分。不要疏忽你應(yīng)用程序中的任何內(nèi)容。

2.不要一開始就使用數(shù)字工具

當(dāng)你開始創(chuàng)建線框圖時(shí)，你可能會(huì)以為直接使用你最喜歡的設(shè)計(jì)工具來(lái)創(chuàng)作挺好的。雖然像Mockplus這樣的現(xiàn)代原型開發(fā)工具，可以在幾分鐘內(nèi)創(chuàng)建出功能完好的原型，但在大多數(shù)情況下，最好從筆和紙開始。

首先畫出你的想法，然后才切換到數(shù)字工具。

3.不要使用顏色

你有沒(méi)有想過(guò)為什么線框經(jīng)常應(yīng)用灰度來(lái)創(chuàng)建？這是有目的的——灰度級(jí)可防止被顏色分心。線框的主要目的是布置內(nèi)容并描述應(yīng)用程序的功能，添加多種顏色可能會(huì)導(dǎo)致分心。

因此，最好避免在線框中使用顏色（除非要突出顯現(xiàn)某些特定的元素）。

不要使用顏色。假如你想要這樣做，可以特意一些。在這個(gè)例子中，tonianni使用紅色突出重要元素并添加注釋。

4.不要試圖去美化它

不要過(guò)分關(guān)注線框的外觀，它們不需要設(shè)計(jì)的很像成品。當(dāng)你過(guò)于關(guān)注后者時(shí)，可能會(huì)有太多精美的元素，但絕對(duì)不是面對(duì)解決方案的。因而，當(dāng)談到線框圖時(shí)，你首先得讓它們有價(jià)值。線框應(yīng)該輕松傳達(dá)你的想法并協(xié)助溝通，而視覺(jué)和交互設(shè)計(jì)應(yīng)留在產(chǎn)品設(shè)計(jì)過(guò)程的后期階段。

5.不要產(chǎn)生依賴

不要太依賴于你的線框圖。隨時(shí)準(zhǔn)備丟掉它們，是的，可能很難丟棄一些你費(fèi)盡心機(jī)做出來(lái)的東西（特別是當(dāng)你覺(jué)得它還好，但卻不符合你設(shè)計(jì)的產(chǎn)品概念時(shí)）。

但重要的是要記住，你需要嘗試很多不同的選項(xiàng)才能設(shè)計(jì)出來(lái)的線框圖（可能是10/50/ 100 個(gè)），只要這之后，你才會(huì)選擇一個(gè)（兩個(gè)）來(lái)作為你原型的基礎(chǔ)。

三、結(jié)論

線框圖是用戶體驗(yàn)設(shè)計(jì)師的基本技能。 隨著時(shí)間的推移，任何其他技能都可以得到改善。提高線框圖技巧的關(guān)鍵在于練習(xí)，你做得越多，就會(huì)越順利。

因此，下一個(gè)項(xiàng)目請(qǐng)留出一定的時(shí)間來(lái)創(chuàng)建線框圖。早期花費(fèi)一些時(shí)間在線框圖上，后期的話可以為你儉省大量時(shí)間。