国产精品一区电影_国产男女无遮挡猛进猛出_日本丰满熟妇videossex8k_中文字幕无码乱人伦,久久综合伊人77777麻豆,亚洲最大在线观看,无码人妻久久一区二区三区app

武漢互聯網公司——APP設計中的色彩搭配

作者： 時間：2024-07-31 瀏覽：

App的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維；好的色彩搭配可以加深用戶對產品的印象；明確界面的視覺層次，讓用戶分清主次信息；同時還能給用戶賞心悅目的視覺享受。那么，在UI設計時該如何進行色彩搭配呢？

我們可以從App中都包含了那些色彩開始，通常一個App中包含了主色、輔助色、點綴色、背景色這4類，下面就以微信讀書為例，武漢網站設計小編進行詳細的講解（個人角度）。

1、 主色

主色是指在配色中處于主導地位的色彩，給用戶的第一眼印象，通常是產品的品牌色。

在App設計中，主色一般占有色相色彩的60%的比例；這里指的是60%的界面都使用到的主色比例，而不是使用面積（因為通常一個界面中使用面積最大的是背景色）；還有就是背景色多為淺灰色或白色，它們都屬于無色相色彩，因此不涉及到配色過程中。

我們看到微信讀書的第一印象，就可以判斷它的主色為藍色，這也是它的品牌色；在標簽欄、按鈕、圖標、注冊登陸全都使用了這種純凈的主色，使界面看上去非常和諧一致。



2、輔助色

輔助色與主色相輔相成，輔助色的功能是幫助主色建立更完整的形象，使界面豐富精彩起來，避免畫面過于單一。

通常，主色的鄰近色、互補色、分散互補色和三角對立色都可以成為優秀的輔助色，但注意輔助色不宜過多，否則就會使界面看上去花哨分散了主題；根據6:3:1原則，輔助色可以占有色相色彩的30%或更少為宜。



在微信讀書中，綠色、橙色、梅紅、藍紫色是除了主色以外使用最多的顏色，它們都是輔助色，主要用于功能圖標和欄目分類上。

雖然輔助色看起來有點多，但其實都是從主色的鄰近色和對比色（及其鄰近色）中提取出來的搭配，而且只用在頁面中很少的地方，這種搭配技巧既可以豐富色彩的搭配，傳遞出年輕活躍的產品氣質，又保證了整體搭配的和諧統一。



3、點綴色

點綴色是除了主色和輔助色以外的另一種色彩，通常體現在細節上。

其作用是，當頁面中主色和輔助色不能滿足關鍵信息的提示時，就需要點綴色來吸引用戶眼球，還有就是利用點綴色來平衡畫面的冷暖色調。

點綴色通常都是分散的，使用面積小，顏色非常顯眼，能與主色形成強烈的對比；一般點綴色是主色的互補色。在微信讀書中，使用了香檳金、梅紅和紅色作為點綴色；香檳金用在文章分享按鈕上，梅紅色用在點贊圖標上，強調其特殊性，紅色用在通知及退出登錄提醒上，用于警示。



來看看這三種點綴色與主色之間存在什么樣的關系，在色相（H）上，3種點綴色為鄰近色，與主色為互補色；在明度（B）上，3種點綴色均為高明度色彩，起到強提醒的作用。這種強對比的互補色的點綴色可以快速引起用戶注意力。



4、背景色

背景色就比較好理解了，通常為了襯托內容，大多數App都是用淺灰色作為背景色，以白色作為背景色的對比色，來區分視覺層次；建議是可以根據前景色來提取背景色，將其調亮或變暗，這樣可以讓界面色調更加統一。

在微信讀書中背景色是偏藍色調的淺灰色，而不是純灰色，背景對比色是在白色里加入了藍色色相，而不是純白色，整體對比較柔和，給人清爽通透的感覺。



以同色系配色為主導，多色搭配為輔。

同色系為統一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業務的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設定不同的任務屬性和情感表達；再搭配中性色黑白灰，賦予更多的變化和層次。

兩種配色通過主次、使用比例，可靈活運用在業務的各個場景中，具有非常好的延展性。好了，APP設計中的色彩搭配就到這，接下來武漢網站設計小編還會更新一些其它相關的研究和總結，一定會給你在工作中帶來幫助的。