線框表示

本文總結(jié)了在學(xué)習(xí)banner設(shè)計(jì)過程中出現(xiàn)的線框的一些用法與設(shè)計(jì)特點(diǎn)，希望大家在以后的設(shè)計(jì)工作中能夠靈活運(yùn)用這種元素。

在上兩期整理banner設(shè)計(jì)的過程中，我發(fā)現(xiàn)線框在banner設(shè)計(jì)中的應(yīng)用非常廣泛。不僅能夠輔助一些元素的設(shè)計(jì)，還可以為設(shè)計(jì)增色不少，增加設(shè)計(jì)感。所以，我決定總結(jié)研究一番，發(fā)現(xiàn)這里面還是有點(diǎn)道道的。

線作為平面構(gòu)成中三元素之一，具有非常廣泛的應(yīng)用范圍。

「線」在版式中的作用主要表現(xiàn)為：表示強(qiáng)調(diào)、明確分隔、視覺引導(dǎo)、組織信息、豐富裝飾畫面等。

在banner設(shè)計(jì)中，應(yīng)用線框也起到強(qiáng)調(diào)、視覺引導(dǎo)，組織信息，豐富畫面層次等作用。接下來，我們針對一些案例分析線框在banner設(shè)計(jì)中應(yīng)用的整體特點(diǎn)，以及在應(yīng)用時(shí)需要注意的設(shè)計(jì)細(xì)節(jié)。線框在banner中的應(yīng)用也同樣適用于在海報(bào)等其他設(shè)計(jì)范疇，舉一反三。

一. 應(yīng)用情況分類 1. 大線框，輔助背景和整體版式

特點(diǎn)：在banner中運(yùn)用線框整體形式感強(qiáng)，可以起到較好的引導(dǎo)視覺的作用，用戶在看到banner的第一眼便會(huì)把注意力集中在線框內(nèi)的區(qū)域。

2. 小線框，應(yīng)用于局部文案

特點(diǎn)：在banner文案處應(yīng)用線框設(shè)計(jì)是最常見的。文案作為傳達(dá)banner信息的主要載體，在此處應(yīng)用banner可以很好的輔助設(shè)計(jì)，吸引關(guān)注，突出文案重點(diǎn)部分。在后面，我將專門分析線框如何應(yīng)用在文案部分。

3. 小線框，應(yīng)用于局部圖像

特點(diǎn)：在圖像周圍添加線框可以通過空間關(guān)系讓圖像更有立體感，增加設(shè)計(jì)的層次，起到突出產(chǎn)品的作用。

二. 應(yīng)用細(xì)節(jié)

上面簡單總結(jié)了線框的應(yīng)用范圍，接下來，我們結(jié)合這些應(yīng)用場景分析一下需要注意的細(xì)節(jié)與設(shè)計(jì)思路。

1. 封閉&不封閉

封閉的線框透氣性差一些，但在視覺上更規(guī)范、穩(wěn)重。

不封閉的線框最為常見，透氣，具有較強(qiáng)的設(shè)計(jì)感，能夠發(fā)揮的的設(shè)計(jì)空間也很廣。

在具體設(shè)計(jì)時(shí)，有兩種方式可以打破線框。

直接選擇切斷部位斷開

在線框軌跡上疊加其它元素（文案、圖片等）斷開

此種方式較常見，可以利用文案、圖像與線框的空間關(guān)系塑造空間感，使線框與整體更好的融合在一起。

2. 粗線條&細(xì)線條

粗線條能夠更加引人注目，個(gè)性十足

細(xì)線條顯得細(xì)膩、柔美、輕盈

3. 虛&實(shí)

在線框的應(yīng)用中有虛實(shí)的區(qū)分?！柑摗沟木€框在呈現(xiàn)形式上很靈活，較容易結(jié)合自己的創(chuàng)意，若隱若現(xiàn)，沒有實(shí)線那么強(qiáng)烈的空間存在感。

4. 線框形狀

線框的形狀比較靈活，我們可以根據(jù)設(shè)計(jì)靈活調(diào)整，最常見的是矩形，可以平衡畫面，規(guī)整，方便排版。

三角形的線框輔助可以加強(qiáng)視覺沖擊力，營造個(gè)性、別致的感覺。

圓形線框起到聚焦視覺中心點(diǎn)的作用，通常應(yīng)用在文案的強(qiáng)化設(shè)計(jì)中。

其它形狀具有更多的發(fā)揮空間和個(gè)性，但不要過于復(fù)雜。

5. 表現(xiàn)形式

線框雖然看似簡單，但也可以有很豐富的表現(xiàn)形式，通過對線框的「強(qiáng)化設(shè)計(jì)」，可以豐富線框的設(shè)計(jì)感。

巧用漸變

豐富畫面、個(gè)性絢麗。在深色背景中加入線框時(shí)，一般選用白色，但如果文字和線框都為白色，往往會(huì)感覺單調(diào)，此時(shí)將線框改為漸變色是個(gè)不錯(cuò)的選擇。

紋理、質(zhì)感

加入特殊的紋理、質(zhì)感，可以與其他元素保持風(fēng)格統(tǒng)一，使畫面更協(xié)調(diào)。

創(chuàng)意結(jié)合

結(jié)合主題的創(chuàng)意線框讓人眼前一亮。

不規(guī)則變化

不規(guī)則的變形可以增加俏皮的感覺，不死板。

利用背景元素設(shè)計(jì)

使線框與整體搭配更統(tǒng)一、協(xié)調(diào)。

三. 排版方式探索

這部分主要總結(jié)一下線框在應(yīng)用過程與文案、圖片結(jié)合時(shí)常見的設(shè)計(jì)方式。

1. 與文案

圖示中的案例是以矩形作為基礎(chǔ)，如果小伙伴們應(yīng)用了三角形或其它形狀，在與文案結(jié)合時(shí)也基本類似，靈活設(shè)計(jì)即可。

找了一些三角形案例：

2. 與圖片

圖片與線框結(jié)合可以豐富畫面，增強(qiáng)設(shè)計(jì)感。

好了，到這里總結(jié)了在學(xué)習(xí)banner設(shè)計(jì)過程中出現(xiàn)的線框的一些用法與設(shè)計(jì)特點(diǎn)，也希望在以后的設(shè)計(jì)工作中能夠靈活運(yùn)用這種元素。不知道大家看完有什么啟發(fā)和建議呢？歡迎留言。

通過這次總結(jié)使我認(rèn)識(shí)到無論是生活還是設(shè)計(jì)，處處都存在細(xì)節(jié)，而且都有一定的規(guī)律可循，所以我也強(qiáng)烈推薦大家在設(shè)計(jì)時(shí)留心各種設(shè)計(jì)形式和自己覺得很棒的設(shè)計(jì)元素，做好總結(jié)。雖然看起來現(xiàn)在沒有什么用處，但要相信厚積而薄發(fā)。

作者：阿澤

來源：微信公眾號“設(shè)宴（ID：sheyandesign）”

本文由 @設(shè)宴 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自StockSnap.io，基于 CC0 協(xié)議

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

一、什么是線框

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

二、為什么線框圖很重要

線框圖是產(chǎn)品設(shè)計(jì)過程中的關(guān)鍵步驟，因?yàn)樗梢詭椭O(shè)計(jì)師決定應(yīng)用程序或網(wǎng)站的外觀及功能。線框圖確保參與項(xiàng)目的每個(gè)人對其產(chǎn)品設(shè)計(jì)的結(jié)構(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)對你產(chǎn)品的成功來說至關(guān)重要，這些研究將幫助你設(shè)定明確的期望，即通過線框圖如何實(shí)現(xiàn)你的目標(biāo)。

2.保持簡單

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

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

3. 展示各種想法

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

4. 確保線框圖易于理解

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

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

5.協(xié)作

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

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

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

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

有些人會(huì)說：我們的電子商務(wù)網(wǎng)站中的結(jié)賬頁面與許多其他網(wǎng)站類似，所以可以跳過應(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ì)認(rèn)為直接使用你最喜歡的設(shè)計(jì)工具來創(chuàng)作挺好的。盡管像Mockplus這樣的現(xiàn)代原型開發(fā)工具，可以在幾分鐘內(nèi)創(chuàng)建出功能完整的原型，但在大多數(shù)情況下，最好從筆和紙開始。

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

3.不要使用顏色

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

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

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

4.不要試圖去美化它

不要過分關(guān)注線框的外觀，它們不需要設(shè)計(jì)的很像成品。請記住，線框是一種工具，可幫助你了解頁面信息層次結(jié)構(gòu)而不是視覺或交互設(shè)計(jì)。

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

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

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

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

三、結(jié)論

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

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

原文作者：Nick Babich

原文地址：https://www.mockplus.com/blog/post/dos-donts-of-wireframing

本文由@Mockplus團(tuán)隊(duì) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議