大家好，我是Clippp褪迟。今天為大家?guī)淼奈恼率?b>「留白」的使用冗恨。留白賦予頁面呼吸感答憔，在UI設(shè)計(jì)中有著不可替代的作用。
1/遵循鄰近法則
UI中元素間的空白反映出元素之間的關(guān)系掀抹。鄰近法則表明：
相關(guān)元素間距小虐拓，不相關(guān)元素間隔遠(yuǎn)；
同類型元素的間距應(yīng)均勻分布傲武。
下圖中文本的大小蓉驹、粗細(xì)和顏色相互配合，突出界面中的層級結(jié)構(gòu)谱轨。
2/保持適當(dāng)?shù)拈g距
讓界面保持呼吸戒幔，避免元素排版過于緊密。對于大多數(shù)UI來說土童，擁有充足的留白通常比留白太少要好诗茎。
3/利用留白將注意力集中在特定元素上
空格是一種強(qiáng)調(diào)文本的有效方法。它可以與改變文本大献汗、顏色或粗細(xì)結(jié)合使用敢订。
使元素更大或更亮并不是引起用戶注意的唯一方法。想想看罢吃，當(dāng)一切都變得更大楚午、更亮?xí)r，實(shí)際上并沒有意義尿招。
4/在設(shè)計(jì)和開發(fā)中使用相同的方法測量間距
可以用以下兩種方法之一來測量相鄰文本之間的間距矾柜。
相鄰文本框
這種方法是大多數(shù)UI測量間距的方式。但這種方法不是特別精確就谜，因?yàn)槊總€(gè)文本框的頂部和底部都存在多余的空間怪蔑。
相鄰邊界框
這種方法更精確，但實(shí)現(xiàn)起來更復(fù)雜丧荐。兩種方法都是合理的缆瓣，使用時(shí)要權(quán)衡取舍。
5/使用間距系統(tǒng)
間距系統(tǒng)指在設(shè)計(jì)中使用成比例關(guān)系的間距值虹统，使用間距系統(tǒng)能給帶來和諧感和一致性弓坞。
同調(diào)色板一樣，間距系統(tǒng)要求設(shè)計(jì)師從一組受限的選項(xiàng)中做出決策车荔，這使設(shè)計(jì)迭代更快渡冻、更系統(tǒng)。
6/避免使用看起來過于相似的間距值
對比很重要忧便。當(dāng)上下兩組元素的間距過于接近時(shí)族吻，會導(dǎo)致用戶認(rèn)知邏輯的混亂。
如果要使兩個(gè)間距值不同，那么就留有足夠的間距加強(qiáng)對比呼奢。
相鄰間距值之間在視覺上應(yīng)保持明顯的差異。
7/隨著文本大小的增加切平，降低行高
在保持相同比例行高的同時(shí)增加文本大小會導(dǎo)致每行文本間距過大握础，標(biāo)題與文本的關(guān)系拉不開。
通常標(biāo)題的行高比例通常小于正文的行高悴品，標(biāo)題作為獨(dú)立的部分存在禀综。
8/留白之外
在信息密集的界面中，還需要利用其他方法來傳達(dá)元素間的關(guān)聯(lián)：
在元素周圍添加細(xì)微的填充或描邊苔严；
用細(xì)線將緊密排列的元素分隔開定枷。
總結(jié)
界面看起來很合理是有原因的。通過經(jīng)驗(yàn)和實(shí)踐届氢，可以磨練關(guān)于如何在設(shè)計(jì)中應(yīng)用留白的視覺感和直覺欠窒。
精彩推薦：
2退子、案例分析：柵格系統(tǒng)的布局設(shè)計(jì)
