實用UI設計法則（上）(3)

關于顏色的其它幾點建議

顏色是視覺設計中最復雜的。我從復雜的理論和長期的實踐中挑出了一些好的建議送給你:

小工具箱：

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

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

想玩轉Dribble，這一篇足夠了！《設計師必讀！玩轉Dribbble終極指南》

法則3：增加空白空間

為了讓UI看起來更加有設計感，留出一些空白的空間。

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

HTML的默認版式是這樣的：

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

留白空間、HTML和CSS

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

下圖是Piotr Kwiatkowski設計的一個音樂播放器。

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

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

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

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

或者維基百科：

很多人認為在維基百科的這個新頁面上，很多功能找不到了，但是你不能否認這是學習頁面設計的一個好案例。

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

分析一下哪些是可行的。

好了，以上就是第1部分的內容，感謝閱讀！

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

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