1. 限制顏色的數量
將色彩應用於設計並平衡顏色間的關係也很重要。一般來説,您使用的顏色越多,就越難達到它們間的平衡。這就是為什麼會建議在一個配色方案中使用有限數量的顏色。對於一些移動應用產品,您可以用一種主色來創造一些令人驚豔的產品。訣竅是使用主色的明暗變化。您可以通過降低亮度和增加飽和度來創造更暗的顏色變化,而更明亮的顏色可以通過增加亮度和降低飽和度來產生。看一看 iOS 版的 Facebook App 應用。這款應用的主要顏色是藍色,在界面上使用藍色作為主色。 Facebook 使用了藍色的深淺變化顏色組合。
2. 使用 60%:30%:10% 顏色比例規則
即使顏色數量很有限,也不易於創造出一個和諧的配色方案。許多設計師面臨著色彩比例的問題,這在之前的移動應用程序的 UX/UI 設計提示的文章中就説過,也許合理分配 UI 界面中的顏色比例並非易事。
希望一個簡單的顏色比例規則,即 60%:30%:10% 可以幫您建立一個適當的平衡。這項配色技術來自於室內設計行業。這條規則很容易把顏色平衡帶入到構圖畫面中。配色應該遵循 60%-30%-10% 的比例,按照這條規則,您將擁有 60% 的主色,30% 的輔助顏色,10% 的強調顏色。
3. 不要忽略可訪問性的兩個基本規則在 UI 設計的重要性
在建立 UI 界面時,設計師的首要目標是確保每個多用户在使用產品時都有良好的的使用經驗。當所有多用户羣體,包括有視覺障礙的人,都可以正常訪問設計時,就能很好實現可行性。負責配色的設計師必須熟悉 WCAG 2.1 規則(https://www.w3.org/TR/WCAG/),並將實踐融入到配色選擇中。可訪問性的兩個基本規則應該應用於每個 UI 設計中:
● 當出現在有色背景上時,文字應該是清晰的。元素之間應該有足夠的顏色對比,這樣視力較低的多用户就可以閲讀文字了。設計師可以使用一些專門的工具,比如 Webaim 對比檢查器來檢查顏色對比的可識別性。
● 不要只依靠顏色來傳達功能。運用文字説明與 UI 元素一起發生的事件,這將使界面也適合那些色盲多用户使用。
配色工具
為了補充我們建立配色方案的快速指南,我們還提供了一些配色工具,在 7 條用於建立 UI 配色方案的實用技巧(一)中也有詳細的介紹。它們可以簡化建立特定的 UI 配色方案的步驟。
Coolors.co(https://coolors.co/)
Coolors.co 是一個便捷的配色工具。您所需要做的就是鎖定選定的顏色並按空格來生成調色盤。或者,您可以上傳一個圖片,並從中製作一個調色盤。該工具允許將顏色組合匯出到不同的格式,比如 SVG 。
Adobe Color CC(https://color.adobe.com/zh/create/color-wheel/)
Adobe Color CC 允許您使用一個色輪來建立一個配色方案。建立的方案可以匯出到 Adobe Photoshop 中。它還提供了來自 Adobe 創意 WooCommerce 社羣的數千種優秀的配色組合。
Paletton(http://paletton.com/)
Paletton 類似於 Adobe Color CC,關鍵的區別在於您不僅限於了 5 個色調。當您有了主色並且想要使用更多的配色時,這個特性就很方便了。
谷歌的 MDL Color Customizer(https://getmdl.io/customize/index.html)
對於 Android 開發者來説,這是一個很好的工具。它允許多用户在 Android 應用上,靈活地組成主色及輔助顏色。
結語
顏色是 UI 設計的基石。在為 UI 界面配色時,請記住,沒有錯誤的顏色。最重要的是您如何合理使用它們。多花點時間來建立一個對您的產品最有效力的配色方案,並在 UI 界面中合理地應用它。