實用UI設(shè)計法則（上）(2)

法則2：黑白優(yōu)先

在上色前用灰度模式設(shè)計可以簡化大量的工作，讓你更加關(guān)注空間和元素布局。

UX設(shè)計師現(xiàn)在都喜歡“移動優(yōu)先”的概念，這就意味著你要先考慮好在手機上如何顯示頁面，然后才考慮在超清的Retina屏幕上的顯示效果。

這種限制非常好，能夠幫你理清思路。先解決一些棘手的問題（在小屏幕上顯示）。然后再解決簡單的問題（在大屏幕上的可用性）。

我希望你先用黑色和白色設(shè)計，先把復(fù)雜的問題解決了。在不借助顏色幫助的情況下把app做得美觀易用。最后再有目的地上色。

這種方法能保持app“干凈”、“簡潔”。加入過多的顏色很容易毀掉簡潔性。“黑白優(yōu)先”會促使你關(guān)注空間、尺寸和布局這些更重要的問題。先來看一些經(jīng)典的用灰度模式設(shè)計的頁面。

“黑白優(yōu)先”法則并不適用于所有情況，比如運動、卡通等有著鮮明特色的設(shè)計就需要好好地運用各種顏色。不過，大部分app并沒有這樣鮮明的特點，只要保持干凈和整潔就好，絢麗的顏色被公認是很難設(shè)計的，所以，還是先用黑色和白色來吧。

第二步：如何上色

上色最簡單的方法就是只加一種顏色。

在灰色的基礎(chǔ)上只加一種顏色可以簡單快速的吸引眼球和注意力。

你也可以更進一步，在灰色的基礎(chǔ)上加兩種顏色，或者添加統(tǒng)一色調(diào)的多種顏色。

實踐中的顏色法則——什么是色調(diào)？

網(wǎng)頁主要用的是十六進制RGB表。但RGB不是個好的顏色設(shè)計框架，HSB模式會更好用，其中H（hues）表示色相，S（saturation）表示飽和度，B（brightness）表示亮度。

HSB模式是比RGB模式更適合我們看待顏色的方式。

通過調(diào)整單一色相的飽和度和亮度，你可以生成各種不同的顏色——深色、淺色、背景色、強調(diào)的地方、吸引眼球的地方等，但是又不會很扎眼。

如果你對色彩不敏感，建議先打好基礎(chǔ)：《設(shè)計師配色寶典！教你從零開始學(xué)配色（一）》時間緊急也可以直接速成呦！《秒變配色高手！怎么都不會錯的6條網(wǎng)頁設(shè)計配色原則》

使用一種或兩種基礎(chǔ)色調(diào)的多種顏色是強調(diào)和淡化某些元素，而又不把設(shè)計搞得一團糟的最可靠的方法。