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

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

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

小工具箱：

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

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

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

法則3：增加空白空間

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

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

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

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

留白空間、HTML和CSS

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

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

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

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

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

大量的空白可以把混亂的界面做得簡(jiǎn)潔美觀，比如這個(gè)論壇：

或者維基百科：

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

在行之間留出空間。在各個(gè)元素之間留出空間。在各組元素之間留出空間。

分析一下哪些是可行的。

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

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

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