原文：Medium點擊這里
標注：2017.03.28 - 6 min read
譯者：Lisa - lisapeng1996@gmail.com 侵刪
如何在網(wǎng)頁設計中運用留白
設計師角色便是創(chuàng)造用戶想要使用的吸引人的布局。留白是一個能夠幫助你制造出一個美觀油讯，易讀網(wǎng)站的概念。
我們生活在一個注意力總是被分散的時代蹬叭。我們周圍總是有各種各樣的信息，有印刷的方庭，數(shù)字媒體跨扮，戶外的廣告和在線的廣告。網(wǎng)站携龟，電子商務，移動app——他們都充斥著各種各樣的內容勘高。
我們應該創(chuàng)造出用戶喜歡訪問的網(wǎng)站峡蟋。所有的布局需要很容易理解，這樣才能擁有一個可瀏覽华望，閱讀性好的內容蕊蝗。
“臃腫的”網(wǎng)站真的很難閱讀。復雜性通常會讓用戶感覺不舒服赖舟。如果我們將大量各種各樣的信息覆蓋網(wǎng)站蓬戚，這樣將會打擾用戶的視覺焦點，他們將會離開或者不會采取我們想讓他做的行為宾抓。這個行為可能是在電子商務網(wǎng)站購買某些東西或者在博客上讀某篇文章子漩。
然而，有一個概念能夠幫助平面設計師創(chuàng)造出好的網(wǎng)頁體驗石洗，讓內容可以很好的展示并且閱讀幢泼。
是留白——給你的布局更多的空間，有時僅僅是去掉不必要的雜亂并且在它們的重要元素中間放置空白讲衫。
什么是留白
留白的最好解釋應該是簡單的缕棵，就像它自己的名稱一樣簡單：
白色空間，或者負型空間，是網(wǎng)站上的空白區(qū)域招驴。
這個一個沒有被標記的空間篙程，它不僅僅使布局變得更加有可讀性，也強化了內容别厘。用戶可能會更好的把焦點注意到更少更有代表性的元素上虱饿。
COS在線商城是一個優(yōu)質服裝品牌的網(wǎng)站，它用了大量的留白來增強它的高品質感丹允。
空間概念的發(fā)展
我們能夠追溯留白的歷史一直到“New Typography”運動郭厌。它由Jan Tschichold提出在1920年代萌芽。
這個運動倡導了以下這些原則：
1. 元素的非對稱平衡
2. 有層次的內容設計
3. 有目的的留白運用
4. sans serif的字體
Beatrice Warde的高腳酒杯
早期在字體中的留白概念例子是1930年Beatrice Warde的一篇文章雕蔽，“The Crystal Goblet”折柠。
Warde描述了兩種高腳酒杯：第一個是“實心的，有精致的花紋”批狐，第二個是“干凈的水晶玻璃扇售，和氣泡一樣薄一樣透明”。對它們其中一個的選擇將會體現(xiàn)人是否是一個真正的紅酒鑒賞家嚣艇。
水晶的高腳酒杯揭示了人們對紅酒的喜歡承冰，“因為里面的所有都是可以展現(xiàn)出來的，而不是藏在好看的東西里面”食零。
Warde認為這個象征著在印刷和排版領域需要更多的干凈困乒。她明白對空間的合理使用將會使內容更豐富。
你能夠對負型空間做什么
Tschichold和Warde發(fā)表在它們的工作中的文章可以解釋當前的認知科學贰谣。
留白娜搂，或者負型區(qū)域，是你構圖元素中間的空間吱抚。然而百宇，它不用是真的白或者空。它是一個沒有給用戶帶來認知負擔的背景秘豹，所以他們能夠關注到主要元素上去携御。
當談到平面設計，在不同的UI元素中建造一個視覺層次很重要既绕。它會引導用戶走向交互的戰(zhàn)略點啄刹。
甚至，留白能夠幫助減少信息雜亂岸更，給內容更多的呼吸感鸵膏。
有這些在腦海里，讓我們概括一下我們在網(wǎng)頁設計中能夠用留白做什么吧：
1. 網(wǎng)站更易瀏覽
一個空白區(qū)域的平衡安排能夠增強瀏覽網(wǎng)頁的舒適感怎炊。用戶能夠很輕易的瀏覽內容谭企，所以對于他們來說找到他們想找的東西也變得更加簡單了廓译。
2. 提升內容的可讀性
在元素之間保持一個更舒適的距離能夠讓內容更易閱讀。它幫助用戶能夠更快更容易的瀏覽網(wǎng)頁內容债查。
3. 提升藝術美感
應用更多的空白區(qū)域并且減少不必要的元素能夠大大的增加你的網(wǎng)站視覺效果非区。
4. 高質量的印象
視覺元素的豐富會降低質量的感官。用留白方法盹廷，在另一方面來說征绸，恰恰相反。
你能用的幾種留白
現(xiàn)在你已經(jīng)了解了留白的好處俄占，讓我們開始練習一下吧管怠。這里有幾種你能夠運用到的負型空間：
1. 大留白
這是在不同的元素之間的空間。它幫助區(qū)分層次感并且保證網(wǎng)站的正確視覺流缸榄。
2. 小留白
小留白是元素之間一些小的空白區(qū)域渤弛。我們能夠運用它來使用它增加布局的清晰度和透明感。
3. 積極留白
在物體周圍放置一些留白讓用戶的注意力向它們集中甚带。增加它們的可視性和用戶的注意力她肯。
4. 消極留白
這是在元素周圍放置一些小的留白，制造一些合適的負型區(qū)域鹰贵，指出界面的活躍元素晴氨，并且保證內容有很好的可讀性。
留白應用很好的例子
為了在你的設計中得到怎么運用留白很好的想法碉输，你必須要看看它是如何的強大籽前。讓我們看看把留白應用的很好的品牌吧。
Ocilus的加載頁是如何不用很多信息就銷售一個產(chǎn)品的很好的例子敷钾。它所需要的就是一張吸引人的圖片聚假，干凈的排版，注意力的吸引闰非，和元素間的足夠留白。
服裝電子商務品牌ETQ就證明了簡單也能有很好的銷售量峭范。減少冗雜和不必要的信息能夠將用戶的注意力集中在商品上财松。
同時，品牌的質感能夠通過設計很好的展示出來纱控。
Invision的博客也是正確運用排版辆毡，攝影，留白的很好例子甜害。這能夠吸引鼓勵訪問者讀博客舶掖。
可能在這些設計中看不到很大改革的東西，但是尔店，與此同時眨攘，你能夠感覺到它們和那些充斥著大量內容的網(wǎng)站的區(qū)別主慰。
不要盡可能的填充更多信息。雖然有時候你的客戶可能會讓你那樣做鲫售。沒關系共螺，設計師的角色需要關注最重要的元素，創(chuàng)建一個有清晰信息和合適視覺流的網(wǎng)站情竹。
用留白創(chuàng)建一個UI元素的視覺層次藐不，這樣你的網(wǎng)站才能傳達給用戶一個好的用戶體驗。
