午夜精品久久久久久-午夜精品久久久久久91-午夜精品久久久久久久-午夜精品久久久久久久2023-国产精品亚洲精品久久成人-国产精品亚洲精品日韩动图

許多設(shè)計(jì)項(xiàng)目是從線框圖的設(shè)計(jì)開始的，但是真正專業(yè)的線框圖到底要經(jīng)歷哪些步驟呢？今天這篇來自UXPin設(shè)計(jì)師Faye Bridge的文章，幫你總結(jié)了一套實(shí)用的線框圖設(shè)計(jì)五步法，幫你從最早的階段奠定整個(gè)項(xiàng)目的基礎(chǔ)~

想要讓整個(gè)數(shù)字產(chǎn)品或者設(shè)計(jì)項(xiàng)目結(jié)構(gòu)化，線框圖是它最早也是最重要的組成部分。線框圖向整個(gè)團(tuán)隊(duì)展示了布局、導(dǎo)航、視覺層次、信息架構(gòu)和內(nèi)容優(yōu)先級(jí)等關(guān)鍵的問題，它勾勒出了整個(gè)項(xiàng)目的基本輪廓，呈現(xiàn)了關(guān)鍵信息。

而今天的文章會(huì)幫你了解提升線框圖設(shè)計(jì)品質(zhì)的所需要知道的一切。繼續(xù)讀下去，你會(huì)知道線框圖為什么這么重要，不同的工具要如何使用，并且如何通過一步步的操作最終完成線框圖的設(shè)計(jì)。

線框圖為何如此實(shí)用

在形式上，線框圖使用了大量的占位符，比如帶標(biāo)記的框圖，它們隨后會(huì)被實(shí)際的內(nèi)容填充起來。在絕大多數(shù)情況，設(shè)計(jì)師會(huì)出于下面的考慮來使用和設(shè)計(jì)線框圖：

·結(jié)構(gòu)化的設(shè)計(jì)：在細(xì)化到具體技術(shù)細(xì)節(jié)之前，明確整個(gè)界面的運(yùn)作方式和交互走向
·構(gòu)建基礎(chǔ)：導(dǎo)航和布局的搭建幾乎決定了整個(gè)項(xiàng)目的大體走向。如果有亟待解決的問題，最好打一開始就著手解決，而不是到高保真原型階段再尋求方案。
·以內(nèi)容為中心的設(shè)計(jì)：線框圖的設(shè)計(jì)思路是以內(nèi)容為中心，它鼓勵(lì)你思考頁面哪些部分更重要，進(jìn)而設(shè)計(jì)合理的布局。
·更多的創(chuàng)意和嘗試：由于線框圖足夠簡單，這意味著你可以更容易創(chuàng)建，不用耗費(fèi)太多精力便可嘗試不同的思路，拿出多種多樣富有創(chuàng)意的方案。

線框圖是設(shè)計(jì)的框架。

線框圖設(shè)計(jì)思路

線框圖的設(shè)計(jì)并沒有一種固定的形態(tài)，你可以在圖片編輯器中完成，也可以通過專門的線框圖工具來制作，甚至可以直接在紙上繪制。接下來，我們看看各種不同方式的優(yōu)劣。

·紙：最基本的線框圖和草圖也相去不遠(yuǎn)。如果你想嘗試探索不同的思路來尋求最佳的方案，你可以忽略視覺的精準(zhǔn)度，在紙上快速勾勒出來以做探索。

來源：UXPin

·專業(yè)平臺(tái)：諸如UXPin這樣的可以制作線框圖和高保真原型的設(shè)計(jì)平臺(tái)，它們大多適宜于團(tuán)隊(duì)協(xié)作。

來源：UXPin

·展示軟件：如果你不想使用使用UXPin這類收費(fèi)的平臺(tái)，也可以使用Keynote 和Powerpoint 這樣的軟件來展示。好處自然是更加省錢，但是缺點(diǎn)是它們多數(shù)時(shí)候必須通過郵件來回傳遞再做編輯，溝通和設(shè)計(jì)成本都偏高。

來源：Keynote

·圖片編輯器：有些設(shè)計(jì)師喜歡在Photoshop和Sketch這樣的圖片編輯軟件中搞定一切設(shè)計(jì)問題。如果你也是這類工具的重度用戶的話，創(chuàng)建線框圖所用的形狀和視覺元素絕對(duì)夠輕松。不過要記住，后續(xù)的高保真原型你需要重新創(chuàng)建（在UXPin這類工具中則不然，線框圖在后續(xù)創(chuàng)建高保真原型的時(shí)候是可以復(fù)用的）。

媒介的選取僅僅只是個(gè)開始，接下來我們看看設(shè)計(jì)的具體步驟。

線框圖5步流程

雖然線框圖的設(shè)計(jì)并沒有一個(gè)標(biāo)準(zhǔn)規(guī)范，但是我們發(fā)現(xiàn)下面的五步設(shè)計(jì)流程是最實(shí)用的：

1、內(nèi)容清單
2、視覺層次
3、內(nèi)容線框圖
4、打磨線框圖
5、低保真原型

接下來我們看看每個(gè)步驟都是怎么操作的。

1、內(nèi)容清單

首先你得創(chuàng)建一個(gè)內(nèi)容清單，其中聚合了所有相關(guān)的素材，在創(chuàng)建線框圖之前得合理地整理起來。

來源：Maadmob

內(nèi)容清單最好是制作成為電子表格，其中根據(jù)頁面來劃分，將所有需要單獨(dú)呈現(xiàn)的內(nèi)容都清楚地羅列出來。內(nèi)容清單有助于你進(jìn)行以內(nèi)容為中心的設(shè)計(jì)，在這樣的思路下，你會(huì)更精準(zhǔn)的判斷哪些元素更加重要。

最好是按照下面的流程來制作內(nèi)容清單：

·列出所有的內(nèi)容，附上URL和簡短的描述
·根據(jù)主題組織整理出內(nèi)容條目
·將每條內(nèi)容條目分配到最合理的頁面，將出現(xiàn)在多個(gè)不同頁面上的內(nèi)容條目標(biāo)注出來
·篩選出冗余內(nèi)容，將你不需要的內(nèi)容刪除掉，你刪除掉的內(nèi)容越多，那么你留下的內(nèi)容就越有價(jià)值
·如果你愿意的話，可以將你的團(tuán)隊(duì)分割為不同的小組，并且將特定的人分配到特定的頁面或者目錄

接下來，你需要基于你的內(nèi)容列表來創(chuàng)建視覺層次。

2、視覺層次

當(dāng)你的內(nèi)容清單整理出所有可用的條目之后，再篩選出每個(gè)頁面的優(yōu)先級(jí)就不難了。

隨后，你可以在電子表格中按照優(yōu)先級(jí)的高低，分別標(biāo)記出每個(gè)項(xiàng)目一級(jí)、二級(jí)和三級(jí)的內(nèi)容條目，而這就是我們要的視覺層次的劃定依據(jù)了。

3、內(nèi)容線框圖

這個(gè)部分將會(huì)將你之前所規(guī)劃的內(nèi)容劃分到不同的區(qū)塊當(dāng)中去。

正如同UXPin所創(chuàng)建的案例，內(nèi)容線框圖僅僅是關(guān)乎內(nèi)容的走向，而非展示方式。如果你的工具支持，柵格系統(tǒng)可以很好的幫到你，尤其是當(dāng)多個(gè)頁面都牽涉到相同的布局之時(shí)。

線框圖在絕大多數(shù)情況下都同移動(dòng)端優(yōu)先的設(shè)計(jì)相適應(yīng)。當(dāng)你的線框圖要優(yōu)先適配小屏幕的時(shí)候，只需要優(yōu)先考慮最重要的部分，然后隨著尺寸的增加而添加細(xì)節(jié)和元素。另外一種處理方式是打一開頭就將所有元素都設(shè)計(jì)出來，然后隨著屏幕尺寸的縮小而對(duì)元素進(jìn)行刪減，但是這種方法的問題在于，費(fèi)時(shí)費(fèi)事，而且容易讓界面元素之間出現(xiàn)割裂。

4、打磨線框圖

完成了基本結(jié)構(gòu)的搭建之后，下一步就是要將它們塑造成可識(shí)別的組件。這意味著你需要為圖片預(yù)留空間，考慮鏈接和圖標(biāo)的交互走向，并且計(jì)算各個(gè)組件之間的尺寸比例。

當(dāng)然，千萬要控制好度，不要設(shè)計(jì)得太過細(xì)致。線框圖本質(zhì)上還是界面的框架，其中的控件是占位符，不用做的那么精確。

當(dāng)然，在打磨線框圖細(xì)節(jié)的過程中，也別忘了用戶流程的設(shè)計(jì)。在這個(gè)階段，你可以適當(dāng)?shù)貙⒔换ズ驮O(shè)計(jì)模式納入到其中，并且更準(zhǔn)確地定義整個(gè)界面的視覺層次。

5、低保真原型

我們強(qiáng)烈建議當(dāng)你設(shè)計(jì)好線框圖之后，將其轉(zhuǎn)化為低保真的原型，這樣你就可以盡早開始測試。

挑對(duì)了設(shè)計(jì)平臺(tái)，你可以輕松地基于線框圖來加入交互，許多優(yōu)秀的工具甚至可以通過簡單拖放來實(shí)現(xiàn)這一點(diǎn)。即使你的低保真模型僅僅具有最基本的交互，也可以及早地幫你造出可用性問題，特別是在整體布局和導(dǎo)航上。

快速原型設(shè)計(jì)的思路核心在于盡可能快地完成原型設(shè)計(jì)，加入交互，開始測試，然后獲取反饋，迭代升級(jí)。這種思路之下，你無需一次完成全部的測試內(nèi)容，而是逐步完成，分段完善的。

隨著低保真原型的逐步推進(jìn)，你的整個(gè)項(xiàng)目的基礎(chǔ)就逐步完善了起來，隨后，你便可以開始移動(dòng)端的視覺設(shè)計(jì)了。