亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計(jì)中配色設(shè)計(jì)攻略

發(fā)布時(shí)間：2024-03-25 13:16:44 瀏覽量：221次

　　不知道有沒有小伙伴跟我一樣在做頁面配色時(shí)會(huì)很痛苦呢，很多時(shí)候都是憑感覺去配色。最近研究了一下配色方法，今天我就針對(duì)UI設(shè)計(jì)中配色設(shè)計(jì)攻略進(jìn)行簡單的說明，希望能幫助到一部分小伙伴。

　　有個(gè)有趣的研究成果 —— “七秒鐘定律”：人們?cè)谔暨x商品和服務(wù)時(shí) ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內(nèi)，色彩的作用占到了 67%。

　　一個(gè)設(shè)計(jì)作品呈現(xiàn)在用戶面前，最先進(jìn)入眼簾的就是產(chǎn)品的視覺表現(xiàn)，而色彩在其中起到了很大的作用。那么具體到實(shí)際項(xiàng)目中該怎樣配色呢 ?

　　1.色彩基礎(chǔ)知識(shí)

　　相信大家都知道，UI 色彩使用的是 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式，也就是色相(H)、飽和度(S)、明度(B)。


　　一個(gè)正確的選色過程是先確定出色相(H)，然后再在這個(gè)色相維度下選出飽和度(S)和明度(B)。

　　選取色相時(shí)就要用到色相環(huán)這個(gè)熟悉的朋友了，每種顏色都有自己的色彩情緒。


　　2.UI設(shè)計(jì)中的色彩選擇

　　在眾多的 UI 設(shè)計(jì)規(guī)范中，色彩一般分為：

　　主色：產(chǎn)品的核心色彩，品牌色

　　輔色：豐富頁面視覺和傳達(dá)效果的次要顏色

　　2.1 主色的選擇

　　主色是一個(gè)產(chǎn)品的品牌色，比如像淘寶的橙色、美團(tuán)的黃色等。


　　怎么確定一個(gè)產(chǎn)品的主色呢?可以從以下幾點(diǎn)考慮：1、產(chǎn)品屬性 2、行業(yè)屬性 3、用戶人群。

　　常見的APP主色應(yīng)用：

　　1.綠色：主要集中在社交、學(xué)習(xí)教育、效率辦公等領(lǐng)域。

　　如：微信、豆瓣、愛奇藝、QQ 音樂、網(wǎng)易云課堂、 BOSS 直聘、拉鉤招聘。

　　為什么這些產(chǎn)品喜歡使用綠色呢?

　　綠色是中性色彩，沒有明顯的冷暖傾向，相對(duì)柔和，適合覆蓋用戶群體廣泛的應(yīng)用程序，且無論學(xué)習(xí)辦公還是社交軟件中的界面都需要長時(shí)間閱讀，相比紅黃等色彩，柔和的綠色更為適合。

　　2.藍(lán)色：更多集中在工具類產(chǎn)品。

　　如：百度、QQ瀏覽器、酷狗音樂、知乎、貝殼找房、釘釘、支付寶

　　藍(lán)色幾乎成了工具類辦公類產(chǎn)品的品牌色，為什么呢?

　　作為工具類產(chǎn)品(含辦公類)產(chǎn)品，效率是他們所看重的，而藍(lán)色是冷色系色彩能夠讓用戶更加冷靜，高效的完成任務(wù)。

　　3.紅橙色：基本集中在電商類產(chǎn)品中。

　　如：淘寶、拼多多、京東

　　為什么電商類產(chǎn)品喜歡用暖色調(diào)呢?

　　暖色調(diào)給人溫暖、活躍、歡快的氣氛，符合用戶購物時(shí)的狀態(tài)，能夠刺激用戶的購買欲。

　　2.2 輔助色的選擇

　　輔助色是豐富產(chǎn)品的次要顏色， 除了品牌傳達(dá)外，具有更強(qiáng)的實(shí)用性。

　　選擇輔助色時(shí)可以有以下2個(gè)方法：

　　1、依據(jù)色相環(huán)配色：兩個(gè)顏色在色相環(huán)中角度越大，視覺差異越大，對(duì)比越強(qiáng)。所以在配色時(shí)，越需要被突出的顏色，可以在色環(huán)中離主色越遠(yuǎn)，越不需要被突出的顏色靠的越近。

　　如攜程，UI設(shè)計(jì)中配色設(shè)計(jì)攻略https://www.aaa-cg.com.cn/ui/2583.html?gpfAPP主色是藍(lán)色，去支付按鈕是需要被重點(diǎn)突出的顏色，使用了主色的互補(bǔ)色橙色， 讓我們一眼就能看見并產(chǎn)生強(qiáng)烈的點(diǎn)擊欲望。


　　2、根據(jù)實(shí)際場景選擇

　　比如通知、提醒、取消用紅色;確認(rèn)、同意用綠色、藍(lán)色;收藏、打分、評(píng)價(jià)用橙黃色。都是已經(jīng)在用戶心智中建立了標(biāo)準(zhǔn)的用色類型，跟著常規(guī)方法來做，是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。

　　3.UI設(shè)計(jì)頁面中的色彩應(yīng)用

　　3.1 主色占比大，色彩豐富度高

　　主色作為頂部標(biāo)題欄或其它重要模塊中的背景色進(jìn)行大面積應(yīng)用，

　　適合場景：需要加深用戶對(duì)品牌的認(rèn)知和辨識(shí)度，同時(shí)產(chǎn)品中包含大量功能點(diǎn)，需要用豐富的色彩來吸引用戶關(guān)注，如 hello bike。


　　3.2 主色占比大，色彩豐富度低

　　這類配色主色占比大，盡量使用主題色，很少使用其他顏色。

　　適合場景：比較適用于圖片內(nèi)容豐富的題材中，或者是相對(duì)正式、品牌感強(qiáng)的產(chǎn)品，如拉勾、酷狗音樂。


　　3.3 主色占比小，色彩豐富度高

　　適用場景：需要突出自身帶有的服務(wù)和功能，留出更多的空間在內(nèi)容模塊的展示上，如大眾點(diǎn)評(píng)。


　　3.4 主色占比小，色彩豐富度低

　　適合場景：產(chǎn)品服務(wù)相對(duì)單一，需要用戶更加注重內(nèi)容本身，會(huì)盡力避免給予用戶過多的干擾。如新浪微博。


　　總結(jié)

　　每次配色時(shí)，我們都需要對(duì)使用哪種配色方案做出規(guī)劃，然后再動(dòng)手執(zhí)行。設(shè)計(jì)時(shí)做到有理有據(jù)，這樣后面的工作就會(huì)輕松很多了。

UI設(shè)計(jì)中投影的使用技巧

UI設(shè)計(jì)中首頁設(shè)計(jì)排版技巧

UI設(shè)計(jì)中頂部欄的設(shè)計(jì)要點(diǎn)

UI設(shè)計(jì)中IOS和安卓的設(shè)計(jì)差異

UI設(shè)計(jì)中按鈕設(shè)計(jì)指南

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定