10個(gè)網站教你留白技巧

作者：龍 時(shí)間：2018-08-01 浏覽：

想要讓一個(gè)元素足夠吸引用(yòng)戶的(de)注意力，往往需要通(tōng)過周圍的(de)留白來(lái)襯托，這(zhè)樣的(de)設計所營造的(de)用(yòng)戶體驗更爲優雅。

在極簡主義風格是主流的(de)今天，「少即是多(duō)」是設計師奉爲圭臬的(de)準則。控制配色方案的(de)數量，限制視覺元素的(de)數量，在清晰的(de)層級之下(xià)，呈現最核心的(de)元素，抓人(rén)眼球，直擊核心。

這(zhè)樣的(de)設計對(duì)于留白極爲依賴，因此，留白很重要。

留白并不一定必須是白色的(de)，它可(kě)以是其他(tā)的(de)任何顔色，而留白的(de)另外一個(gè)名字是「負空間」。留白能夠襯托和(hé)凸顯視覺主體，這(zhè)也(yě)是它發揮作用(yòng)的(de)主要途徑。

盡管留白看起來(lái)不複雜(zá)，但是在複雜(zá)多(duō)變的(de)設計環境之下(xià)，往往并不是一件簡單的(de)事情。優秀的(de)留白設計能夠在簡約的(de)風格和(hé)功能的(de)可(kě)用(yòng)性之間達到平衡，而要做(zuò)到這(zhè)一點，需要相當的(de)實踐和(hé)積累。

在什(shén)麽地方用(yòng)留白

必須承認，并非每個(gè)設計都需要大(dà)量的(de)留白。留白的(de)使用(yòng)一定是有範圍，且有留白會對(duì)設計中下(xià)列因素産生影(yǐng)響：

• 排版布局
• 影(yǐng)像圖片
• 功能控件
• 文本内容
• 邊距間隙

Mark Boulton 将留白劃分(fēn)爲大(dà)小兩種。

小留白是在較小的(de)元素之間小間隙，比如下(xià)面的(de)元素周圍的(de)留白就是小留白：

• 鏈接
• 列表
• 圖标
• 按鈕
• 文本段落

相反，在處理(lǐ)相對(duì)較大(dà)的(de)元素的(de)時(shí)候，周圍的(de)負空間是大(dà)留白。

正确使用(yòng)留白能夠爲整個(gè)設計帶來(lái)平衡感。對(duì)于文本内容，你會發現易讀性的(de)高(gāo)低和(hé)其中的(de)小留白的(de)控制有著(zhe)密切的(de)關聯，這(zhè)對(duì)于内容的(de)呈現有著(zhe)重要的(de)影(yǐng)響。

使用(yòng)留白的(de)好處還(hái)有很多(duō)：

• 留白能夠增加内容的(de)可(kě)理(lǐ)解性。
• 留白能夠凸顯特定的(de) UI 元素，CTA 元素大(dà)都如此。
• 可(kě)以讓設計更加整潔、友好。

Bear Creek Distillery

充滿形式感和(hé)沖擊力的(de)圖片搭配上令人(rén)眼前一亮的(de)文案，Bear Creek Distillery 可(kě)以輕松地從同類網站中脫穎而出。爲了(le)突出他(tā)們作爲酒類供應商的(de)核心競争力「蒸餾技術」，設計師盡可(kě)能地降低可(kě)能讓人(rén)分(fēn)心的(de)因素，從而将信息精準直接地傳遞給訪客。

Squarespace

在保證用(yòng)戶能夠獲取足夠的(de)信息的(de)前提下(xià)，Squarespace 的(de)設計師盡量限制了(le)界面上使用(yòng) UI 元素的(de)數量。搜索框讓用(yòng)戶能夠輕松找到他(tā)們想要的(de)信息，而文案設計上的(de)獨特性使得(de)品牌的(de)調性得(de)到了(le)放大(dà)。文本的(de)字體色彩選用(yòng)了(le)黑(hēi)色，和(hé)淺色的(de)背景構成了(le)強烈的(de)對(duì)比，讓閱讀和(hé)信息的(de)獲取都無比的(de)輕松。

Progressive Punctuation

如何使用(yòng)标點符号來(lái)傳達複雜(zá)的(de)情緒？Progressive Punctuation 這(zhè)個(gè)網站将這(zhè)些「全新」的(de)标點符号都展示了(le)出來(lái)。

和(hé)其他(tā)的(de)頁面不同的(de)地方在于，頁面需要承載多(duō)個(gè)不同的(de)非标準标點符号，爲了(le)将信息準确的(de)傳達，設計師巧妙地使用(yòng)留白來(lái)控制符号之間的(de)間距，确保整體的(de)優雅性，又保證了(le)信息的(de)傳達。

Apple

關于留白的(de)設計，很難繞過蘋果這(zhè)麽經典的(de)案例。雖然他(tā)們不是先驅，但是蘋果将這(zhè)一技巧的(de)運用(yòng)在自家的(de)産品設計和(hé)網站設計上，體現的(de)淋漓盡緻。

在他(tā)們的(de)網站上，你會看到清晰的(de)視覺脈絡，頁面的(de)每個(gè)部分(fēn)都有清晰的(de)視覺焦點，主次分(fēn)明(míng)，用(yòng)戶永遠(yuǎn)不會在這(zhè)裏迷失和(hé)分(fēn)心。

Tinker

你可(kě)以在 Tinker 定制手表，在網站上，你可(kě)以選擇手表的(de)樣式、色彩和(hé)裝飾元素。

爲了(le)突出産品的(de)可(kě)定制性，Tinker 這(zhè)個(gè)網站中所能看到的(de)最顯著的(de)視覺元素是清晰的(de)被分(fēn)離出來(lái)的(de)手表組件圖片，就像蘋果的(de)官網一樣，設計師不希望你的(de)注意力被别的(de)東西轉移走了(le)，減少次要信息的(de)展示，從而提升核心元素的(de)展現。隻展示必須的(de)内容，直接給你需要的(de)一切——手表就可(kě)以了(le)。

The Pisacco Chronicle

The Pisacco Chronicle 是一個(gè)專注于美(měi)食、電影(yǐng)和(hé)藝術的(de)線上雜(zá)志，這(zhè)些是絕大(dà)多(duō)數人(rén)都非常喜歡的(de)東西。

有趣的(de)是，網站爲了(le)吸引人(rén)采用(yòng)了(le)寶麗來(lái)風格的(de)輪播圖。頁面中的(de)标題和(hé)導航都非常吸引人(rén)，這(zhè)很大(dà)程度上是因爲頁面上能讓人(rén)注意到的(de)元素确實不多(duō)。如果有更多(duō)的(de)文本内容，就很難保證各個(gè)元素都那麽清晰直觀了(le)。

沒有晃眼的(de)色彩和(hé)跳出式的(de)配色，這(zhè)樣讓頁面中的(de)圖片内容沒有不吸引人(rén)的(de)理(lǐ)由。

Seedlip

這(zhè)個(gè)品牌同樣是釀酒廠，不過這(zhè)次他(tā)們的(de)網站推薦的(de)是軟飲料。這(zhè)次的(de)飲料是基于全新的(de)概念創造而來(lái)，使用(yòng)帶有大(dà)量留白的(de)網站來(lái)呈現是個(gè)不錯的(de)選擇。

網站同樣使用(yòng)了(le)大(dà)量的(de)留白來(lái)凸顯信息，更重要的(de)是設計師還(hái)強化(huà)了(le)浏覽體驗，用(yòng)戶向下(xià)浏覽的(de)時(shí)候，高(gāo)清的(de)飲料圖片會成爲整個(gè)視覺的(de)中心。爲了(le)強化(huà)品質感，設計師讓用(yòng)戶可(kě)以很快(kuài)注意到這(zhè)個(gè)品牌巴洛克風格濃郁的(de)華麗 LOGO，而這(zhè)樣的(de)效果同樣和(hé)留白的(de)貢獻分(fēn)不開。

Pocket Penguins

企鵝出版社一直以他(tā)們出色的(de)封面設計而出名。加粗的(de)文本和(hé)大(dà)膽的(de)色彩是他(tā)們的(de)特色，Pocket Penguins 這(zhè)個(gè)網站就完美(měi)的(de)延續了(le)他(tā)們的(de)品牌特色，通(tōng)過色彩和(hé)排版讓用(yòng)戶注意到他(tā)們的(de)書(shū)本。

Sweetgreen

使用(yòng)留白和(hé)色彩豐富的(de)圖片來(lái)吸引用(yòng)戶是非常有效的(de)方法，因爲兩者能夠正好構成對(duì)比。

對(duì)于美(měi)食尤其是如此，色香味三者當中，色彩和(hé)視覺是最先傳達給人(rén)的(de)，誘人(rén)的(de)圖片是 Sweetgreen 這(zhè)個(gè)網站吸引用(yòng)戶的(de)最有力武器，所以留白盡量襯托出這(zhè)些圖片，讓這(zhè)些美(měi)食被用(yòng)戶注意到。

Jomor Design

當你想要傳遞信息的(de)時(shí)候，讓用(yòng)戶隻專注于那條信息是最有效的(de)方法，如果用(yòng)戶隻有這(zhè)麽一個(gè)信息映入眼簾的(de)時(shí)候，自然就怎麽都不會錯過了(le)。

Johor Design 這(zhè)個(gè)網站一直緻力于傳達清晰的(de)信息。作爲一個(gè)設計機構，他(tā)們使用(yòng)一個(gè)精心設計的(de)文案來(lái)抓住你的(de)注意力，「I wanna help you kick ass.」（讓我來(lái)幫你成爲最牛的(de)。）

如果頁面中有圖片的(de)話(huà)，這(zhè)段話(huà)是不會被注意到的(de)，因爲文本通(tōng)常沒有圖片吸引人(rén)。

結語

巧妙地使用(yòng)留白能夠讓你的(de)設計足夠優雅，想要簡明(míng)直接，同樣需要運用(yòng)好留白。消除不必要的(de)幹擾，專注于傳遞關鍵性的(de)信息，這(zhè)些都需要留白的(de)參與。