2018-7-3 ui設(shè)計(jì)分享達(dá)人
留白對(duì)于設(shè)計(jì)的價(jià)值，已經(jīng)得到相當(dāng)廣泛的認(rèn)可了。盡管留白看起來(lái)不復(fù)雜，但是在復(fù)雜多變的設(shè)計(jì)環(huán)境之下，往往并不是一件簡(jiǎn)單的事情。優(yōu)秀的留白設(shè)計(jì)能夠在簡(jiǎn)約的風(fēng)格和功能的可用性之間達(dá)到平衡，而要做到這一點(diǎn)，需要相當(dāng)?shù)膶?shí)踐和積累。
留白的概念
留白本身通常還被稱為負(fù)空間，留白和負(fù)空間雖然是兩個(gè)不同的說(shuō)法，但是兩者表述的是同一個(gè)東西。之所以有兩個(gè)不同的說(shuō)法，是因?yàn)閮蓚€(gè)名稱是來(lái)源于不同的兩個(gè)領(lǐng)域。
留白是來(lái)自排版印刷設(shè)計(jì)領(lǐng)域，因?yàn)轫?yè)面的背景通常是白色的，而文本和圖片周圍的區(qū)域也多是白色的空白，因此有留白之說(shuō)。而負(fù)空間這個(gè)說(shuō)法是源自于攝影，吸引人注意的視覺(jué)主體被稱為正空間，而相應(yīng)的留白就成了負(fù)空間。
需要注意的是，留白并不一定非得是白色的，可以是其他的顏色，甚至是其他的圖案。
留白為何如此重要
當(dāng)你進(jìn)入一個(gè)擠滿各種物品和人的房間，到處都是東西和人，找到特定的東西肯定是一個(gè)非常艱難的事情。相應(yīng)的，在干凈的地面上，擺放的唯一的物品肯定是非常醒目的，你不需要花費(fèi)任何力氣就能注意到它。這也是留白發(fā)揮作用的原理所在。
雖然客戶可能會(huì)要求設(shè)計(jì)師在頁(yè)面上盡可能多地塞滿各種元素和功能，這樣可以節(jié)省空間。但是，實(shí)際上這是一個(gè)最常見(jiàn)的錯(cuò)誤的做法：用戶并不需要在網(wǎng)頁(yè)上一次完成全部的工作。更重要的是，太多的元素會(huì)分散用戶的注意力，用戶會(huì)難以找到真正想要的信息。正如同 Aarron Walter 所說(shuō)：“你想讓用戶注意到所有事情的時(shí)候，他們會(huì)感知不到任何東西的?！?br />
UI設(shè)計(jì)中的留白
留白可以在網(wǎng)頁(yè)布局中各個(gè)元素之間，還可以在特定 UI元素的內(nèi)部。留白賦予了頁(yè)面呼吸感，而它本身并不一定非得是白色的空白區(qū)域。
在UI交互設(shè)計(jì)中，留白不僅僅是出自審美的考量，它還能提供實(shí)際的作用：
聚焦視覺(jué)重點(diǎn)突出信息本質(zhì)。
合理劃分空間，預(yù)留舒適的閱讀體驗(yàn)。
提供準(zhǔn)確的點(diǎn)擊區(qū)域，有效預(yù)防誤觸操作。
跨平臺(tái)適配，易于重置排版。
因此，留白是一種重要的、功能強(qiáng)大的設(shè)計(jì)元素，它對(duì)于創(chuàng)造積極的用戶體驗(yàn)有著重大的影響。 交互設(shè)計(jì)基金會(huì)的 Mads Soegaard 是這么說(shuō)的：“留白就像一塊畫布，它是將不同設(shè)計(jì)元素融合到一起的背景，又讓這些元素通過(guò)對(duì)比襯托脫穎而出。”
在什么地方用留白
必須承認(rèn)，并非每個(gè)設(shè)計(jì)都需要大量的留白。留白的使用一定是有范圍，且有留白會(huì)對(duì)設(shè)計(jì)中下列因素產(chǎn)生影響：
排版布局
影像圖片
功能控件
文本內(nèi)容
邊距間隙
留白劃分為大小兩種：
小留白是在較小的元素之間小間隙，比如下面的元素周圍的留白就是小留白：
鏈接
列表
圖標(biāo)
按鈕
文本段落
相反，在處理相對(duì)較大的元素的時(shí)候，周圍的負(fù)空間是大留白。
正確使用留白能夠?yàn)檎麄€(gè)設(shè)計(jì)帶來(lái)平衡感。對(duì)于文本內(nèi)容，你會(huì)發(fā)現(xiàn)易讀性的高低和其中的小留白的控制有著密切的關(guān)聯(lián)，這對(duì)于內(nèi)容的呈現(xiàn)有著重要的影響。
使用留白的好處還有很多：
留白能夠增加內(nèi)容的可理解性。
留白能夠凸顯特定的 UI 元素，CTA 元素大都如此。
可以讓設(shè)計(jì)更加整潔、友好。
需要考慮的問(wèn)題和隱患
1.客戶溝通術(shù)語(yǔ)紊淆
和不熟悉設(shè)計(jì)術(shù)語(yǔ)的客戶進(jìn)行溝通的時(shí)候，應(yīng)該盡量讓他們明白負(fù)空間/留白的含義和功能。對(duì)于非設(shè)計(jì)從業(yè)者而言，很多時(shí)候確實(shí)不能很快接受「屏幕中需要留下更多的留白」這樣的概念。對(duì)于黑色或者深色的背景，這類客戶可能會(huì)有不好的聯(lián)想，事實(shí)上并非如此。在進(jìn)行足夠深入的溝通之后，盡量將這些關(guān)鍵點(diǎn)灌輸給客戶，避免術(shù)語(yǔ)和概念上的誤讀。
2.希望減少留白，增加頁(yè)面和內(nèi)容
其實(shí)這個(gè)是幾乎所有的設(shè)計(jì)領(lǐng)域都會(huì)面臨的問(wèn)題?？蛻魰?huì)希望室內(nèi)設(shè)計(jì)師在一面墻擺滿柜子而不是給兩個(gè)剩余的地方留白，而建筑設(shè)計(jì)師也常常需要建筑周圍有足夠的留白，確保呼吸感，提供更好的服務(wù)。設(shè)計(jì)師需要和客戶溝通，了解哪些部分更重要，哪些部分次重要，而哪些內(nèi)容是可有可無(wú)的，分清層級(jí)，進(jìn)行篩選。留白有助于營(yíng)造更加協(xié)調(diào)的布局，讓信息和功能的可用性更強(qiáng)。
3. 優(yōu)先級(jí)不夠高
如果深思熟慮的信息架構(gòu)和界面并不匹配，留白并不是萬(wàn)能的解決方案。你需要在考慮界面設(shè)計(jì)之前，就確定用戶獲取信息的方式，然后再進(jìn)行設(shè)計(jì)。在確定風(fēng)格之前，先要梳理清楚用戶流程，否則，再好的負(fù)空間設(shè)計(jì)也不足以發(fā)揮出它應(yīng)有的功能。
具體案例分析
Apple
關(guān)于留白的設(shè)計(jì)，很難繞過(guò)蘋果這么經(jīng)典的案例。雖然他們不是先驅(qū)，但是蘋果將這一技巧的運(yùn)用在自家的產(chǎn)品設(shè)計(jì)和網(wǎng)站設(shè)計(jì)上，體現(xiàn)的淋漓盡致。
在他們的網(wǎng)站上，你會(huì)看到清晰的視覺(jué)脈絡(luò)，頁(yè)面的每個(gè)部分都有清晰的視覺(jué)焦點(diǎn)，主次分明，用戶永遠(yuǎn)不會(huì)在這里迷失和分心。
在保證用戶能夠獲取足夠的信息的前提下，Squarespace 的設(shè)計(jì)師盡量限制了界面上使用 UI 元素的數(shù)量。搜索框讓用戶能夠輕松找到他們想要的信息，而文案設(shè)計(jì)上的獨(dú)特性使得品牌的調(diào)性得到了放大。文本的字體色彩選用了黑色，和淺色的背景構(gòu)成了強(qiáng)烈的對(duì)比，讓閱讀和信息的獲取都無(wú)比的輕松。
如何使用標(biāo)點(diǎn)符號(hào)來(lái)傳達(dá)復(fù)雜的情緒？Progressive Punctuation 這個(gè)網(wǎng)站將這些「全新」的標(biāo)點(diǎn)符號(hào)都展示了出來(lái)。
和其他的頁(yè)面不同的地方在于，頁(yè)面需要承載多個(gè)不同的非標(biāo)準(zhǔn)標(biāo)點(diǎn)符號(hào)，為了將信息準(zhǔn)確的傳達(dá)，設(shè)計(jì)師巧妙地使用留白來(lái)控制符號(hào)之間的間距，確保整體的優(yōu)雅性，又保證了信息的傳達(dá)。
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com