實(shí)用UI設(shè)計(jì)法則（上）(3)

關(guān)于顏色的其它幾點(diǎn)建議

顏色是視覺設(shè)計(jì)中最復(fù)雜的。我從復(fù)雜的理論和長期的實(shí)踐中挑出了一些好的建議送給你:

小工具箱：

不要用純黑色：在現(xiàn)實(shí)世界中幾乎見不到絕對的黑色。調(diào)整不同的飽和度可以增加設(shè)計(jì)的豐富程度，也更接近現(xiàn)實(shí)世界。Adobe Color CC：尋找、調(diào)整、創(chuàng)造顏色組合的絕佳工具。在Dribble通過顏色搜索：尋找某種顏色如何搭配的好方法，非常實(shí)用，如果你已經(jīng)決定了要用那種顏色，可以通過顏色搜索看看世界頂級的設(shè)計(jì)師是如何配色的。

配色工具的選擇多多，這兒大概是最全的：《你也可以成為色彩達(dá)人！最好用的配色工具Top 5》

想玩轉(zhuǎn)Dribble，這一篇足夠了！《設(shè)計(jì)師必讀！玩轉(zhuǎn)Dribbble終極指南》

法則3：增加空白空間

為了讓UI看起來更加有設(shè)計(jì)感，留出一些空白的空間。

在第2條法則中，我說到了黑白優(yōu)先的原則，讓設(shè)計(jì)師在考慮顏色之前先想想空間和布局，那么現(xiàn)在我們就來說說如何安排空間和布局。

HTML的默認(rèn)版式是這樣的：

所有東西都堆在屏幕上，字號、行距都很小，段與段之間有一些間隔，但是也不是很大。這么布局實(shí)在是太難看了。如果你想設(shè)計(jì)出精美的UI，那就需要留出更多空白的空間。

留白空間、HTML和CSS

如果你和我以前一樣，習(xí)慣用CSS來調(diào)整布局，那你最好改掉這個壞習(xí)慣，因?yàn)镃SS默認(rèn)是沒有留出空間的。試著把空白當(dāng)作默認(rèn)狀態(tài)，在空白頁面添加各種元素。從沒有修飾過的HTML開始，先做好內(nèi)容，然后再做排版。

下圖是Piotr Kwiatkowski設(shè)計(jì)的一個音樂播放器。

請注意左側(cè)的菜單欄。字號是12px，行間距有文字的兩倍高。再看看列表的名稱，“PLAYLISTS”和下劃線之間有15px的空白，播放列表名稱之間還有25px的間距。

在頂部導(dǎo)航欄也有很大的空間，搜索圖標(biāo)和“Search all music”占到了導(dǎo)航欄高度的20%。

留白的空間收到了良好的效果，不同的元素有機(jī)的組合在一起，使得這個頁面成為最好的音樂播放器UI之一。

大量的空白可以把混亂的界面做得簡潔美觀，比如這個論壇：

或者維基百科：

很多人認(rèn)為在維基百科的這個新頁面上，很多功能找不到了，但是你不能否認(rèn)這是學(xué)習(xí)頁面設(shè)計(jì)的一個好案例。

在行之間留出空間。在各個元素之間留出空間。在各組元素之間留出空間。

分析一下哪些是可行的。

好了，以上就是第1部分的內(nèi)容，感謝閱讀！

在第2部分中，我會講到剩下的4條法則：

學(xué)會在圖片上呈現(xiàn)文字做好強(qiáng)調(diào)和淡化只用合適的字體善于借鑒優(yōu)秀的作品