實用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)秀的作品
學習 · 提示
相關教程