0514-87330378
吃透這10個(gè)網(wǎng)站，你就明白了網(wǎng)頁中留白的技巧
2018-03-28 20:55:20
想要讓一個(gè)元素足夠吸引用戶的注意力，往往需要通過周圍的留白來襯托，這樣的設(shè)計(jì)所營造的用戶體驗(yàn)更為優(yōu)雅。
在極簡主義風(fēng)格是主流的今天，「少即是多」是設(shè)計(jì)師奉為圭臬的準(zhǔn)則。控制配色方案的數(shù)量，限制視覺元素的數(shù)量，在清晰的層級之下，呈現(xiàn)最核心的元素，抓人眼球，直擊核心。
這樣的設(shè)計(jì)對于留白極為依賴，因此，留白很重要。
留白并不一定必須是白色的，它可以是其他的任何顏色，而留白的另外一個(gè)名字是「負(fù)空間」。留白能夠襯托和凸顯視覺主體，這也是它發(fā)揮作用的主要途徑。
盡管留白看起來不復(fù)雜，但是在復(fù)雜多變的設(shè)計(jì)環(huán)境之下，往往并不是一件簡單的事情。優(yōu)秀的留白設(shè)計(jì)能夠在簡約的風(fēng)格和功能的可用性之間達(dá)到平衡，而要做到這一點(diǎn)，需要相當(dāng)?shù)膶?shí)踐和積累。
在什么地方用留白
必須承認(rèn)，并非每個(gè)設(shè)計(jì)都需要大量的留白。留白的使用一定是有范圍，且有留白會(huì)對設(shè)計(jì)中下列因素產(chǎn)生影響：
排版布局
影像圖片
功能控件
文本內(nèi)容
邊距間隙
Mark Boulton 將留白劃分為大小兩種。
小留白是在較小的元素之間小間隙，比如下面的元素周圍的留白就是小留白：
鏈接
列表
圖標(biāo)
按鈕
文本段落
相反，在處理相對較大的元素的時(shí)候，周圍的負(fù)空間是大留白。
正確使用留白能夠?yàn)檎麄€(gè)設(shè)計(jì)帶來平衡感。對于文本內(nèi)容，你會(huì)發(fā)現(xiàn)易讀性的高低和其中的小留白的控制有著密切的關(guān)聯(lián)，這對于內(nèi)容的呈現(xiàn)有著重要的影響。
使用留白的好處還有很多：
留白能夠增加內(nèi)容的可理解性。
留白能夠凸顯特定的 UI 元素，CTA 元素大都如此。
可以讓設(shè)計(jì)更加整潔、友好。
Bear Creek Distillery
充滿形式感和沖擊力的圖片搭配上令人眼前一亮的文案，Bear Creek Distillery 可以輕松地從同類網(wǎng)站中脫穎而出。為了突出他們作為酒類供應(yīng)商的核心競爭力「蒸餾技術(shù)」，設(shè)計(jì)師盡可能地降低可能讓人分心的因素，從而將信息精準(zhǔn)直接地傳遞給訪客。
Squarespace
在保證用戶能夠獲取足夠的信息的前提下，Squarespace 的設(shè)計(jì)師盡量限制了界面上使用 UI 元素的數(shù)量。搜索框讓用戶能夠輕松找到他們想要的信息，而文案設(shè)計(jì)上的獨(dú)特性使得品牌的調(diào)性得到了放大。文本的字體色彩選用了黑色，和淺色的背景構(gòu)成了強(qiáng)烈的對比，讓閱讀和信息的獲取都無比的輕松。
Progressive Punctuation
如何使用標(biāo)點(diǎn)符號來傳達(dá)復(fù)雜的情緒？Progressive Punctuation 這個(gè)網(wǎng)站將這些「全新」的標(biāo)點(diǎn)符號都展示了出來。
和其他的頁面不同的地方在于，頁面需要承載多個(gè)不同的非標(biāo)準(zhǔn)標(biāo)點(diǎn)符號，為了將信息準(zhǔn)確的傳達(dá)，設(shè)計(jì)師巧妙地使用留白來控制符號之間的間距，確保整體的優(yōu)雅性，又保證了信息的傳達(dá)。
Apple
關(guān)于留白的設(shè)計(jì)，很難繞過蘋果這么經(jīng)典的案例。雖然他們不是先驅(qū)，但是蘋果將這一技巧的運(yùn)用在自家的產(chǎn)品設(shè)計(jì)和網(wǎng)站設(shè)計(jì)上，體現(xiàn)的淋漓盡致。
在他們的網(wǎng)站上，你會(huì)看到清晰的視覺脈絡(luò)，頁面的每個(gè)部分都有清晰的視覺焦點(diǎn)，主次分明，用戶永遠(yuǎn)不會(huì)在這里迷失和分心。
友情鏈接：
-
免費(fèi)通話
-
在線QQ
點(diǎn)擊QQ聊天 -
客服微信
掃一掃
加客服微信服務(wù)熱線
0514-87330378 - 在線留言
- 返回頂部