為空間設(shè)計(jì)做減法
在UI設(shè)計(jì)里用好空白需要對(duì)美藻治、功能、人類行為習(xí)慣有很深的理解巷挥∽眩空間的設(shè)計(jì)就是語(yǔ)言與視覺(jué)表達(dá)之間的聯(lián)系股冗，更多地考慮到反饋紧索、時(shí)效性陡厘、和用戶習(xí)慣拓诸。也許頁(yè)面中間的空間布局是為解決頁(yè)面周邊的問(wèn)題。
我們將會(huì)從完全純粹的留白開始講留白空間設(shè)計(jì)或粮。然后我們會(huì)將一些更加實(shí)際的案例來(lái)教你如何處理空間的擺放來(lái)讓你的頁(yè)面顯得不那么雜亂或孤立溺拱。
負(fù)空間并不是空白
白色的地方會(huì)讓人望而卻步画畅。我們?cè)?a target="_blank" rel="nofollow">Web UI Best Practices中說(shuō)道白色的地方會(huì)讓人感到太空蕩蕩了怔锌，你覺(jué)得必須得加點(diǎn)東西在上面寥粹。但實(shí)際上完全不是這樣：設(shè)計(jì)師只不過(guò)是把留白當(dāng)做一種工具來(lái)設(shè)計(jì)出最好的界面和最好的用戶體驗(yàn)。
所有好的視覺(jué)設(shè)計(jì)師都知道負(fù)空間的重要性埃元，留出空白的地方是為了將用戶的注意力引導(dǎo)至存在的物體涝涤。負(fù)空間就是一個(gè)一片綠葉，是為了讓主體更加奪目的同時(shí)還要讓主體別太顯眼亚情。
如果你認(rèn)為設(shè)計(jì)不應(yīng)該留白那看一下世界最差網(wǎng)站妄痪，這是一個(gè)極端的案例哈雏，因?yàn)槊總€(gè)元素都想吸引人的眼球楞件。
在交互設(shè)計(jì)中，留白有三個(gè)功能：提高用戶理解程度裳瘪、澄清元素之間關(guān)系土浸、吸引用戶的注意力。
1.提高用戶理解程度
如果界面提供給用戶太多雜亂無(wú)章的信息彭羹，那么減少這些混亂會(huì)提高用戶的理解程度黄伊。事實(shí)上Usaura的創(chuàng)始人Dmitry Fadeyev 指出在文章段落及左右邊界之間適當(dāng)?shù)牧舭讜?huì)提高用戶20%的理解能力。這種留白是建立在設(shè)計(jì)師給用戶提供可消化的內(nèi)容省去無(wú)用細(xì)節(jié)的基礎(chǔ)上的派殷。
留白可以分解成4種元素：
1. 圖片留白—圍繞圖片还最、圖標(biāo)墓阀、圖表的空白
2. 布局留白—邊界、空格等
3. 文字留白—在行與行之間拓轻、字與字之間的空白
4. 內(nèi)容留白—欄與欄之間的空白
讓我們看一下這4種空白是怎么和諧相處的
Medium是將4種留白元素平衡運(yùn)用的絕佳例子
首先讓我們從交互的角度來(lái)看一下用戶的目標(biāo)：他們想要盡快地找到有趣的內(nèi)容斯撮。在主頁(yè)上通過(guò)留白將放置在中間的內(nèi)容進(jìn)行強(qiáng)化。在圖片周圍和和每一欄之間都留置了充足的而空白扶叉，雖然在圖片周圍的留白要是更加統(tǒng)一那就更好了（圖片左側(cè)的空白與底部的空白不一致）
除了提高理解程度勿锅，留白還能幫助建立心智地圖。極少的留白被應(yīng)用在導(dǎo)航與內(nèi)容流之間使用戶能夠有沉浸式體驗(yàn)（相同的功能應(yīng)該放在一起）枣氧。因?yàn)橛覀?cè)的導(dǎo)航最主要是創(chuàng)建和保存內(nèi)容溢十，所以在右側(cè)和主內(nèi)容流之間留置了更多的空白。所以留白也能幫助用戶對(duì)頁(yè)面上不同的功能進(jìn)行分類达吞。
當(dāng)你點(diǎn)擊進(jìn)入一篇文章時(shí)张弛，留白能幫助用戶聚焦最重要的—內(nèi)容。注意在每行之間的留白是怎樣提高文章的可讀性的宗挥∥谑看一個(gè)細(xì)節(jié)，在JW Marriot 的Logo通過(guò)周圍的留白非但沒(méi)有打擾到用戶而且更加的醒目（一個(gè)對(duì)“圖標(biāo)要大一點(diǎn)契耿，再大一點(diǎn)”的有力反駁）
就像主頁(yè)瞒大，你能看見在各個(gè)項(xiàng)目組之間為了增加間距來(lái)分清功能的大量留白。例如在底部右側(cè)內(nèi)容與commenting/ favoriting/ share 圖標(biāo)之間的留白搪桂。
更重要的是透敌，合理的留白消除了界面上不需要的東西，每一個(gè)項(xiàng)目的目的都是幫助用戶達(dá)成他們的目標(biāo)踢械。想一下在The Guide to Mockups中的“減法雕刻”酗电，你雕去越多的材料你就越突出了主體并為其創(chuàng)造了更多的空間：
你開始拿到的是一塊厚厚的原石，首先鑿出個(gè)大概内列，然后從另一個(gè)角度去雕刻修整撵术，再?gòu)牧硪粋€(gè)角度雕刻細(xì)節(jié)，最后你要磨出臉话瞧、手臂嫩与、軀干。通過(guò)細(xì)化各個(gè)結(jié)構(gòu)交排，慢慢地你肯定就會(huì)得到你想要的了划滋。
想要學(xué)習(xí)更多關(guān)于留白的內(nèi)容查看22條好的例子和21條絕佳的例子。
留白是減法雕刻埃篓。當(dāng)你雕去不必要的東西時(shí)处坪，也是在突出留下東西的美。
2.澄清關(guān)系
當(dāng)格式塔專家在觀察人們?cè)趺唇M織視覺(jué)信息時(shí)，他們?cè)?a target="_blank" rel="nofollow">接近法則這受阻了同窘，接近法則闡釋了當(dāng)物體靠的比較近時(shí)看起來(lái)是相似的玄帕。看一下這幅圖想邦。
幾乎所有人看到的是兩組點(diǎn)桨仿，而不是20個(gè)點(diǎn)。所有的點(diǎn)都是一樣的案狠，唯一不同的是分隔它們之間的白色空格大小服傍。這個(gè)觀察結(jié)果在交互設(shè)計(jì)中有許多重要的應(yīng)用。特別是在輸入框中：
1. 把標(biāo)簽放在與之相關(guān)的地方?— 在這個(gè)例子里將標(biāo)簽與其相關(guān)內(nèi)容靠的更近所傳達(dá)的意思更明確骂铁。
Web UI Best Practices 中提到吹零，用戶對(duì)表格（各種調(diào)查表什么的）有輕微的疑慮就會(huì)影響到表格的填報(bào)完成度。在這種情況下拉庵，稍微調(diào)整空格大小就能增強(qiáng)用戶填表格的信心灿椅，從而提高表格的填報(bào)完成率。
2. 將相關(guān)項(xiàng)目組合在一起 — 在填很長(zhǎng)的表格時(shí)钞支，用戶會(huì)感覺(jué)“臣妾做不到啊…”所以一些用戶甚至都沒(méi)有嘗試就放棄了茫蛹。將信息合理分組有助于幫助用戶更輕松地完成表格。表格是用戶體驗(yàn)中最難跨越的鴻溝烁挟，但該原則同樣適用于導(dǎo)航和內(nèi)容頁(yè)婴洼。在導(dǎo)航時(shí)，你可以使用一個(gè)下拉菜單顯示4-7條一級(jí)導(dǎo)航項(xiàng)目撼嗓，將其他項(xiàng)目放置于二級(jí)菜單來(lái)代替同時(shí)將20條項(xiàng)目一股腦兒放在導(dǎo)航欄上柬采。
3. 吸引注意力
我們剛才提到，其他項(xiàng)目的缺失將會(huì)使頁(yè)面上顯示的更加突出且警。讓我們看一下Yelp的重設(shè)計(jì)（取自User Testing & Design）
上面的高保真原型中我們?cè)谒阉鳈谂c分類之間設(shè)置了大量留白粉捻。這樣做了之后分類標(biāo)簽更能吸引人的注意（比現(xiàn)在網(wǎng)站使用的垂直分類方式更簡(jiǎn)單清晰）。鼠標(biāo)在按鈕上在懸停時(shí)按鈕上顏色的變化吸引了用戶的注意并制造了更好的反饋斑芜。
但因?yàn)槿藗?a target="_blank" rel="nofollow">選擇性的關(guān)注造成視野狹隘—選擇性過(guò)濾掉廣告肩刃，你也需要知道內(nèi)容之間的間隙必須減小。
在Westfield London的例子中杏头，公司顧問(wèn)Jakob Nielsen通過(guò)彈出窗口演示了事情的發(fā)展時(shí)間線盈包。由于“2000”沒(méi)有被注意到，所以左邊的設(shè)計(jì)是失敗的大州。用戶一開始就被圖片和內(nèi)容本身給吸引過(guò)去了续语。但在新的圖片中“2000”被稍微調(diào)整之后這個(gè)問(wèn)題就被解決了垂谢。
另外我們必須知道留白之所以有用是因人類注意力和記憶力是有限的厦画。
看一下下圖中Google與Yahoo的對(duì)比，Yahoo一下子想讓用戶關(guān)注的東西過(guò)多，Google知道用戶想要最基本的搜索功能根暑。為了實(shí)現(xiàn)用戶的目標(biāo)力试，Google的設(shè)計(jì)更多的是進(jìn)行有效的交互。
內(nèi)容組塊化
大多數(shù)設(shè)計(jì)師同意“別讓我思考”的設(shè)計(jì)思路排嫌。
這并不是說(shuō)用戶很懶畸裳，只不過(guò)是用戶頭腦里已經(jīng)有許多東西了，更多的東西只會(huì)讓事情完成起來(lái)更復(fù)雜淳地。界面設(shè)計(jì)給用戶造成的負(fù)擔(dān)就是“認(rèn)知加載”怖糊，好的UI設(shè)計(jì)應(yīng)該盡量減少認(rèn)知加載。
人類的大腦不僅復(fù)雜而且也是不可預(yù)料的颇象。根據(jù)George Miller的研究伍伤，在1956年科學(xué)家指出人類的短期記憶只能承載5-9個(gè)項(xiàng)目（平均7個(gè)）。具體的數(shù)字現(xiàn)在還在爭(zhēng)論當(dāng)中（現(xiàn)在說(shuō)是3-6個(gè)）遣钳，Miller的發(fā)現(xiàn)被證明有效并推導(dǎo)出了重要的交互理論方法扰魂，包括“組塊化”
組塊化是將關(guān)聯(lián)的信息組合使其更容易使用和記憶。這幅圖中第一組形狀更容易被記住因?yàn)樗鼈儽唤M塊化了蕴茴。
但是現(xiàn)在組塊記憶被玩壞了劝评，它就像一條硬性規(guī)定而不是一種最好的操作。例如有些設(shè)計(jì)師堅(jiān)持認(rèn)為菜單倦淀、下拉菜單蒋畜、列表等永遠(yuǎn)不能超過(guò)6個(gè)項(xiàng)目，但這并不是推薦的組塊化使用方法撞叽。
組塊化并不是一條一成不變的定理百侧，而是可以根據(jù)實(shí)際內(nèi)容作出改變的。簡(jiǎn)單的說(shuō)能扒，組塊化用在以下的情境中：
1. 當(dāng)你的產(chǎn)品需要先記憶許多信息接下來(lái)才能被使用時(shí)
2. UI必須和外部刺激共同爭(zhēng)奪用戶的注意力佣渴。（例如手機(jī)app）
3. 數(shù)字化學(xué)習(xí)軟件（因?yàn)橛脩艚酉聛?lái)必須再次使用信息）
另一方面，如果是為了搜索和瀏覽初斑，你就不需要使你的信息塊狀化辛润。但也有例外，看下圖的Etsy见秤。
當(dāng)用戶不需要記住分類時(shí)砂竖，塊狀化分類的內(nèi)容增加了視覺(jué)層級(jí)。當(dāng)你從分類里點(diǎn)擊進(jìn)去時(shí)鹃答，塊狀化消失了里面的內(nèi)容依次排列乎澄。在具體項(xiàng)目級(jí)別沒(méi)有必要使用塊狀化不然用戶每頁(yè)只能瀏覽5-6件商品會(huì)崩潰的。
Etsy的做法讓用戶在所有的頁(yè)面都得到了良好的體驗(yàn)测摔，更多數(shù)量的商品被展現(xiàn)出來(lái)但是用戶并不感到厭煩置济。在上面的例子中共展示了32件不同的物品解恰。用其他的設(shè)計(jì)方法用戶可能會(huì)心煩意亂。多虧了組塊化得方法浙于，用戶才能得到所有的信息护盈。
小結(jié)：
留白也許會(huì)一無(wú)所用或者大有用處就看你怎么用它了。
在相關(guān)項(xiàng)目之間太多的留白是失敗的設(shè)計(jì)羞酗，把許多項(xiàng)目堆在一起會(huì)顯得雜亂無(wú)章腐宋。在布局方面注意空白的安排，特別是關(guān)系到用戶的記憶及是否可以通過(guò)適當(dāng)?shù)牧舭讉鬟_(dá)有價(jià)值的信息檀轨⌒鼐海空間設(shè)計(jì)在交互設(shè)計(jì)方面非常重要，有時(shí)候無(wú)言勝千言参萄。
