留白對(duì)于設(shè)計(jì)的價(jià)值,已經(jīng)得到相當(dāng)廣泛的認(rèn)可了。留白的存在讓其中的元素得到更好的凸顯,有了留白才有強(qiáng)調(diào),它們從來(lái)都是一體兩面,焦不離孟。今天的文章,我們來(lái)聊一下留
留白對(duì)于設(shè)計(jì)的價(jià)值,已經(jīng)得到相當(dāng)廣泛的認(rèn)可了。留白的存在讓其中的元素得到更好的凸顯,有了留白才有強(qiáng)調(diào),它們從來(lái)都是一體兩面,焦不離孟。今天的文章,我們來(lái)聊一下留白的使用技巧和最佳實(shí)踐。
留白本身通常還被稱(chēng)為負(fù)空間,它們可以在網(wǎng)頁(yè)布局中各個(gè)元素之間,還可以在特定 UI元素的內(nèi)部。留白賦予了頁(yè)面呼吸感,而它本身并不一定非得是白色的空白區(qū)域。留白界定了 UI元素本身的空間邊界,而借助格式塔原理,它還可以創(chuàng)造視覺(jué)上的聯(lián)系。
因此,留白是一種重要的、功能強(qiáng)大的設(shè)計(jì)元素,它對(duì)于創(chuàng)造積極的用戶(hù)體驗(yàn)有著重大的影響。 交互設(shè)計(jì)基金會(huì)的 Mads Soegaard 是這么說(shuō)的:“留白就像一塊畫(huà)布,它是將不同設(shè)計(jì)元素融合到一起的背景,又讓這些元素通過(guò)對(duì)比襯托脫穎而出?!?/span>
在諸多的平面設(shè)計(jì)領(lǐng)域當(dāng)中,負(fù)空間都發(fā)揮著無(wú)法替代的作用。無(wú)論是設(shè)計(jì)LOGO、平面插畫(huà)還是字體的時(shí)候,留白的使用關(guān)系著整個(gè)設(shè)計(jì)的表現(xiàn)力。就像下面的博客插圖,負(fù)空間的運(yùn)用讓整個(gè)畫(huà)面顯得更加生動(dòng)。
無(wú)論是在網(wǎng)站設(shè)計(jì)還是 UI設(shè)計(jì)當(dāng)中,設(shè)計(jì)師都需要借助留白來(lái)提升界面和導(dǎo)航的可用性。布局元素周?chē)牧舭谆蛘哓?fù)空間通常被稱(chēng)為宏空間,而它們之間的留白和內(nèi)部的負(fù)空間,則被稱(chēng)為微空間。
留白和負(fù)空間雖然是兩個(gè)不同的說(shuō)法,但是兩者表述的是同一個(gè)東西。之所以有兩個(gè)不同的說(shuō)法,是因?yàn)閮蓚€(gè)名稱(chēng)是來(lái)源于不同的兩個(gè)領(lǐng)域。
留白是來(lái)自排版印刷設(shè)計(jì)領(lǐng)域,因?yàn)轫?yè)面的背景通常是白色的,而文本和圖片周?chē)膮^(qū)域也多是白色的空白,因此有留白之說(shuō)。而負(fù)空間這個(gè)說(shuō)法是源自于攝影,吸引人注意的視覺(jué)主體被稱(chēng)為正空間,而相應(yīng)的留白就成了負(fù)空間。
需要注意的是,留白并不一定非得是白色的,可以是其他的顏色,甚至是其他的圖案。
當(dāng)你進(jìn)入一個(gè)擠滿(mǎn)各種物品和人的房間,到處都是東西和人,找到特定的東西肯定是一個(gè)非常艱難的事情。相應(yīng)的,在干凈的地面上,擺放的唯一的物品肯定是非常醒目的,你不需要花費(fèi)任何力氣就能注意到它。這也是留白發(fā)揮作用的原理所在。
雖然客戶(hù)可能會(huì)要求設(shè)計(jì)師在頁(yè)面上盡可能多地塞滿(mǎn)各種元素和功能,這樣可以節(jié)省空間。但是,實(shí)際上這是一個(gè)最常見(jiàn)的錯(cuò)誤的做法:用戶(hù)并不需要在網(wǎng)頁(yè)上一次完成全部的工作。更重要的是,太多的元素會(huì)分散用戶(hù)的注意力,用戶(hù)會(huì)難以找到真正想要的信息。正如同 Aarron Walter 所說(shuō):“你想讓用戶(hù)注意到所有事情的時(shí)候,他們會(huì)感知不到任何東西的?!?/span>
對(duì)于設(shè)計(jì)而言,負(fù)空間的價(jià)值是非常高的,我們隨便總結(jié)一下,都有很多:
它讓頁(yè)面的可閱讀性得到了提升;
它增強(qiáng)了視覺(jué)層次;
它使得元素和元素之間的關(guān)系更加清晰,更容易被感知,而不需要借助表格、框架這樣的附加手段;
它為頁(yè)面增加了呼吸感,而不至于導(dǎo)致混亂;
它讓用戶(hù)更容易將注意力集中到核心元素上,減少分心;
它提升了頁(yè)面的風(fēng)格,讓設(shè)計(jì)更加優(yōu)雅。
看看這個(gè)城市指南的著陸頁(yè)吧,負(fù)空間在背景中扮演了非常重要的角色,更重要的是,圖片中的元素和前景的文本標(biāo)題之間有所互動(dòng),這也同樣是借助負(fù)空間的方式來(lái)呈現(xiàn),呈現(xiàn)出一種和諧而有趣的設(shè)計(jì)效果。
合理的使用留白能夠讓界面的用戶(hù)體驗(yàn)提升不少。
可讀性和清晰度:如果和元素之間沒(méi)有足夠的留白,會(huì)變得難以閱讀,用戶(hù)需要花費(fèi)額外的精力來(lái)進(jìn)行分辨。不合理的留白設(shè)計(jì)會(huì)讓用戶(hù)感到緊張,想要讓用戶(hù)感到自然,需要讓留白恰到好處,令布局顯得足夠自然。如同音樂(lè)中的韻律感一樣,設(shè)計(jì)中的韻律感是通過(guò)留白的變化來(lái)呈現(xiàn)的。
品牌化:如果你熟悉LOGO的設(shè)計(jì),你會(huì)發(fā)現(xiàn)設(shè)計(jì)師借助元素周?chē)牧舭讈?lái)營(yíng)造氛圍提升感覺(jué),留白的功能性在品牌設(shè)計(jì)上有著非常顯著的體現(xiàn)。打破留白的設(shè)計(jì)規(guī)則,對(duì)于整體是有害的。
強(qiáng)化屬性:留白的運(yùn)用能夠強(qiáng)化屬性,比如新聞博客平臺(tái)會(huì)更加密集地呈現(xiàn)信息,甚至?xí)柚鷦?dòng)態(tài)的數(shù)據(jù)呈現(xiàn)和較為致密的布局來(lái)營(yíng)造一種資訊的密集感和平臺(tái)的調(diào)性。
視覺(jué)層次:富有層次感的留白設(shè)計(jì)能夠創(chuàng)造出視覺(jué)層次,并且讓用戶(hù)注意到特定的元素和信息。
留白對(duì)于視覺(jué)的影響主要體現(xiàn)在以下的幾個(gè)方面:
文案和內(nèi)容
圖形元素
導(dǎo)航
視覺(jué)識(shí)別
接下來(lái)看看幾個(gè)案例。這是 The Big Landscape 的首頁(yè),沒(méi)有表單,沒(méi)有視覺(jué)框架,僅僅借助留白來(lái)平衡所有的設(shè)計(jì)元素。設(shè)計(jì)師構(gòu)建出了清晰的層次結(jié)構(gòu),并且允許用戶(hù)一瞥即可看清所有的內(nèi)容塊,這樣的設(shè)計(jì)看起來(lái)是清晰而有條不紊的,而且充滿(mǎn)呼吸感。白色的背景和簡(jiǎn)約的布局讓整個(gè)界面充滿(mǎn)了實(shí)體雜志的質(zhì)感, 而這也相對(duì)視覺(jué)化地告知用戶(hù)這是一個(gè)在線(xiàn)的數(shù)字雜志。
另外一個(gè)是移動(dòng)端的APP Upper。整個(gè)應(yīng)用的留白都是使用黑色來(lái)進(jìn)行填充的,在視覺(jué)上,黑色的留白和核心的視覺(jué)元素構(gòu)成了鮮明的對(duì)比,從而起到了凸顯的作用。整個(gè)設(shè)計(jì)留白充足,用戶(hù)不會(huì)錯(cuò)過(guò)關(guān)鍵的部分,也不會(huì)分心,布局的組織性極強(qiáng),可讀性也都毫無(wú)問(wèn)題。設(shè)計(jì)師確保了整體的優(yōu)雅性,也讓布局更加具有美學(xué)特征。
1. 術(shù)語(yǔ)紊淆
和不熟悉設(shè)計(jì)術(shù)語(yǔ)的客戶(hù)進(jìn)行溝通的時(shí)候,應(yīng)該盡量讓他們明白負(fù)空間/留白的含義和功能。對(duì)于非設(shè)計(jì)從業(yè)者而言,很多時(shí)候確實(shí)不能很快接受「屏幕中需要留下更多的留白」這樣的概念。對(duì)于黑色或者深色的背景,這類(lèi)客戶(hù)可能會(huì)有不好的聯(lián)想,事實(shí)上并非如此。在進(jìn)行足夠深入的溝通之后,盡量將這些關(guān)鍵點(diǎn)灌輸給客戶(hù),避免術(shù)語(yǔ)和概念上的誤讀。
2. 希望減少留白,增加頁(yè)面和內(nèi)容
其實(shí)這個(gè)是幾乎所有的設(shè)計(jì)領(lǐng)域都會(huì)面臨的問(wèn)題。客戶(hù)會(huì)希望室內(nèi)設(shè)計(jì)師在一面墻擺滿(mǎn)柜子而不是給兩個(gè)剩余的地方留白,而建筑設(shè)計(jì)師也常常需要建筑周?chē)凶銐虻牧舭祝_保呼吸感,提供更好的服務(wù)。設(shè)計(jì)師需要和客戶(hù)溝通,了解哪些部分更重要,哪些部分次重要,而哪些內(nèi)容是可有可無(wú)的,分清層級(jí),進(jìn)行篩選。留白有助于營(yíng)造更加協(xié)調(diào)的布局,讓信息和功能的可用性更強(qiáng)。
3. 優(yōu)先級(jí)不夠高
如果深思熟慮的信息架構(gòu)和界面并不匹配,留白并不是萬(wàn)能的解決方案。你需要在考慮界面設(shè)計(jì)之前,就確定用戶(hù)獲取信息的方式,然后再進(jìn)行設(shè)計(jì)。在確定風(fēng)格之前,先要梳理清楚用戶(hù)流程,否則,再好的負(fù)空間設(shè)計(jì)也不足以發(fā)揮出它應(yīng)有的功能。
0
喜歡他,就推薦他上首頁(yè)吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)