掌握空白的力量? Mastering the Power of Nothing
如何在界面設(shè)計(jì)中使用空
空白是界面設(shè)計(jì)中最寶貴的資源伞梯，頁面上的空白，經(jīng)常被忽視帚屉，但是它們跟UI元素所占用的空間一樣重要谜诫。
“空白被認(rèn)為是一個活躍的元素，而不是一個被動的背景攻旦∮骺酰”
——Jan Tschichold
在本文中，我的目標(biāo)是解釋空白在設(shè)計(jì)中是如何提升用戶體驗(yàn)的牢屋。然而且预，在開始之前我們需要先明確空的意義。
認(rèn)識空白
空白是頁面元素與元素之間烙无，以及元素周圍的空間锋谐。當(dāng)設(shè)計(jì)師談?wù)摽瞻讜r，他實(shí)際上意味著負(fù)空間皱炉，術(shù)語“負(fù)空間”起源于傳統(tǒng)藝術(shù)形式怀估，它用于更準(zhǔn)確的捕獲物體的形狀。
“Suprematism: Self Portrait in two dimensions” by Kasimir Malevich. 負(fù)空間就是元素之間的部分。
雖然我們稱之為空白多搀，但并不意味著就是白色的歧蕉。只要該空間沒有任何的文字和圖像，即使被填充了任何顏色康铭，這也算是一個空白惯退。所以他與實(shí)際的白色并沒有關(guān)聯(lián)，“空白”和“負(fù)空間”這兩個詞可以互換从藤。
為什么空白很重要
空白是獲得一個好設(shè)計(jì)的基本要素催跪，像傳統(tǒng)藝術(shù)，物體在圖形用戶界面里也需要負(fù)空間夷野，文字懊蒸，Button，Logo悯搔，和其他元素需要空間去呼吸给赞，所有好的用戶界面從頂部到底部趋箩，頁面中所有的元素都有合適的空白值盹牧。
這里有兩種類型的空白
大空白和小空白
Micro和Macro熄守，大空白和小空白
小空白：文本和網(wǎng)格之間的空白。這個空白有助于內(nèi)容的可讀性灌曙。
大空白：頁面上主要元素之間的空白菊碟，與小空白不同，大空白是作為整體設(shè)計(jì)的容器在刺。
7種可以影響到UX的空白方式
空白是一個非常好的工具去平衡設(shè)計(jì)元素逆害，更好的組織內(nèi)容，去提升視覺信息傳達(dá)的體驗(yàn)增炭。
1.強(qiáng)調(diào)確定的元素
優(yōu)先考慮具體的要素或內(nèi)容忍燥，是設(shè)計(jì)師最常見的任務(wù)之一，雖然設(shè)計(jì)師可以用許多視覺方法來聚焦某些特定的元素隙姿，一個獲得比較好效果的方法是在焦點(diǎn)的周圍運(yùn)用留白梅垄。
距離和注意之間有一種關(guān)系，較大的距離能使人注意输玷，周圍的缺失队丝，使現(xiàn)有的元素更佳突出。設(shè)計(jì)師會運(yùn)用合適的留白去強(qiáng)調(diào)重要的元素欲鹏，一個特定內(nèi)容段落机久，較大的Padding值會加強(qiáng)用戶對這個區(qū)域的吸引力，因?yàn)槠聊簧弦呀?jīng)沒有其他可引起注意赔嚎。
物體周圍的空白越多膘盖，更容易吸引眼球胧弛。
Google，在下面的例子里侠畔，在他們的設(shè)計(jì)中大力倡導(dǎo)空白结缚，空白幫助傳達(dá)設(shè)計(jì)的意圖，重點(diǎn)放在頁面的主要目標(biāo)上软棺，沒有多余的貢獻(xiàn)給其他區(qū)域红竭。
相同的技術(shù)運(yùn)用在了落地頁，特別是在突出呼叫操作按鈕（call to action）方面喘落，如果你瀏覽MailChimp的主頁茵宪，你會注意到“Sign Up Free”這個按鈕立刻吸引了人的注意。
2.鏈接相關(guān)的元素
當(dāng)我們在檢查一個布局時瘦棋，我們通常把他看做是一些對象的組合稀火，這是因?yàn)槲覀兊拇竽X會根據(jù)物體之間的相對位置，來創(chuàng)造一個關(guān)系模型赌朋。格式塔的法則解釋了憾股，臨時的物體會被看做是一個整體』郏空白也提供了一種視覺隱射，看一下這張圖：
很可能你看到的是兩組點(diǎn)陣茴恰，而不是12個原點(diǎn)颠焦，這是12個相同的點(diǎn)，唯一不同的是他們的間距不同往枣。
這個法則可以被用作交互設(shè)計(jì)元素上伐庭，我們來看他在Web表單的上下文中是如何運(yùn)用的。
相關(guān)的標(biāo)簽要靠的越近分冈，我們一直到圾另，一組元素靠在一起看上去是有關(guān)系的。把標(biāo)簽放到離輸入框更近的時候雕沉，他更難能方便的傳達(dá)信息集乔。通過調(diào)整間距，可以讓表單更容易被瀏覽坡椒，增加成功的機(jī)會扰路。
相關(guān)領(lǐng)域的成組
這是一個眾所周知的事實(shí)，長的表單能讓人感到壓迫倔叼。用戶在填這些表格的時候會變得猶豫汗唱。把相關(guān)的字段組合在一起，能幫助用戶了解他們必須填寫的信息丈攒。以下的形式中哩罪，兩種表格都有相同數(shù)量的字段授霸。不同的是右邊劃分了三個組，內(nèi)容的數(shù)量是相同的际插，但是給用戶的印象是大不同的碘耳。
3.防止視覺雜亂
許多的App和網(wǎng)站承載著太多的信息和元素，沒有足夠呼吸的空間腹鹉。這種通常發(fā)生在產(chǎn)品的創(chuàng)造者希望傳遞太多的信息藏畅，不幸的是，用戶的關(guān)注度有限功咒，越多的元素競爭著被關(guān)注愉阎，用戶關(guān)注的就越少。
如果你不認(rèn)為這是一個問題可以看下面的例子力奋，這是一個有太多的元素引起的極端案例榜旦。
許多網(wǎng)站遭遇著相同的問題溅呢，缺乏留白會給用戶的眼睛和耐心帶來壓力，充滿了文字和圖片猿挚，這樣的網(wǎng)站使用戶產(chǎn)生挫敗感咐旧，使他們逃離。
過多的信息負(fù)載讓界面變得混亂办绝，那么減少混亂能提高理解力：通過消除分心伊约，你可以強(qiáng)制用戶只關(guān)注即時可見的內(nèi)容，你可以用空白來減少壓迫性孕蝉，將空白視為分心的音量旋鈕屡律，更多的空白等于更少的噪音，讓用戶更能聚焦降淮，當(dāng)布局達(dá)到了空白平衡超埋，處理和理解文本變得更加容易，更容易解讀圖標(biāo)和圖像佳鳖，并提供更好的用戶體驗(yàn)纳本。
Tip：
要確認(rèn)設(shè)計(jì)整齊，請嘗試“5秒測試”淑玫，觀察一個壓面5秒鐘巾腕，然后記下你記得的內(nèi)容面睛，這將幫你你了解頁面中是否有合適的留白。
4.通過互動內(nèi)容引導(dǎo)用戶
如果你希望用戶的視線從一個點(diǎn)流向另一個點(diǎn)尊搬，你需要一個他這么做的理由叁鉴，這個理由就是空白，當(dāng)空白運(yùn)用的得當(dāng)佛寿，能給頁面創(chuàng)造一個自然的流動幌墓。
調(diào)整空白已實(shí)現(xiàn)有效掃描并保持讀者的興趣，如下圖所見冀泻，這是Dropbox通過鋸齒模型引導(dǎo)用戶瀏覽一系列的產(chǎn)品關(guān)鍵特征常侣。
不對稱是另一種留白技術(shù)，可以用來引導(dǎo)用戶對某一部分的注意弹渔，當(dāng)一個元素運(yùn)用了不對稱空間胳施，他立馬就會從周圍的元素中跳脫出來，他看起來更有活力肢专，如果你要在頁面中設(shè)計(jì)一個鏈接或者按鈕舞肆，要引起別人的注意，這一種方法可行博杖。
5.提高可讀性
內(nèi)容為王椿胯，內(nèi)容是大多數(shù)應(yīng)用程序和網(wǎng)站的價值，這就是為什么良好的可用性的一個關(guān)鍵方面是內(nèi)容的可讀性剃根，很多元素可以提高可讀性压状，比如字體的大小和顏色，或使用標(biāo)題跟继，留白是另一個考慮的重點(diǎn)，因?yàn)樗麑?nèi)容的可讀性有直接的影響：
行間距可以大大提高一個文本的可讀性镣丑，一般來說舔糖，行間距越大，用戶閱讀時候的體驗(yàn)就越好莺匠，但是太多會破壞統(tǒng)一性金吗，使得設(shè)計(jì)中斷。
段落和文字塊之間的空格有助于幫助人們更好的理解他們閱讀的內(nèi)容趣竣，根據(jù)2004年的研究摇庙，這種空白增加了近20%的理解。
6.運(yùn)用視覺分隔線
設(shè)計(jì)師經(jīng)常使用橫向或縱向的線去創(chuàng)造分隔線遥缕，雖然這樣的分隔線在大多數(shù)情況下是可以的卫袒，但他們有一個主要的缺點(diǎn)，大量分隔線的使用會導(dǎo)致視覺的噪音单匣，造成密集擁擠的頁面夕凝。
隨著用戶的偏好向更簡潔的界面轉(zhuǎn)移宝穗，剝離UI到他最基本必須的元素是成功的關(guān)鍵，可以用元素和間隔來劃分码秉，而不是線逮矛，更少的分隔線能給界面清爽，現(xiàn)代和更實(shí)用的感受转砖，慷慨的留白可使一些復(fù)雜的界面看起來更受歡迎和须鼎。這一變化背后的真正意義在于，在關(guān)注內(nèi)容和功能同時消除多余的元素府蔗。
7.創(chuàng)造一個成熟和優(yōu)雅的感受
雖然留白經(jīng)常被看作是改善用戶體驗(yàn)的技術(shù)晋控，但他也可以被用作純粹的審美目的，大量留白的網(wǎng)站能反映出極簡主義和奢華礁竞。
空白有助于提高整體設(shè)計(jì)的基調(diào)糖荒，通過把更多的焦點(diǎn)放在產(chǎn)品本身，使產(chǎn)品看上去更奢華模捂。
關(guān)于利益相關(guān)者的幾句話
現(xiàn)在你可能知道空白是重要的捶朵，另一方面，空白可能引起設(shè)計(jì)師和利益相關(guān)者的矛盾狂男∽劭矗“空白太多了，我們可以用來做什么岖食？”是我們經(jīng)常從利益相關(guān)者（客戶或經(jīng)理）那里聽到的红碑。
把這種要求作為一個機(jī)會去教育利益相關(guān)者，作為設(shè)計(jì)師泡垃，我們的工作就是幫助他人理解為什么留白是用戶體驗(yàn)重要的組成部分析珊，安排會議并解釋你的思考過程，如果這不起作用蔑穴，你可以采用A/B測試忠寻，測試一個設(shè)計(jì)的兩個版本，一個由設(shè)計(jì)師提出存和，一個由客戶提出奕剃，用戶可能會喜歡那個不那么混亂的版本。
結(jié)論
白空間不是一個空白的畫布捐腿，他是一個強(qiáng)大的設(shè)計(jì)工具纵朋，但是這個工具很難掌握：應(yīng)用中的白空間既是藝術(shù)也是科學(xué)，了解應(yīng)該使用多少空白來創(chuàng)建良好的布局需要練習(xí)茄袖。你設(shè)計(jì)的越多操软，你學(xué)到的也越多。
原文鏈接：https://medium.springboard.com/mastering-the-power-of-nothing-a9f6971f1fd
