歡迎來(lái)到(dào)深圳市博易美科技有限♠∑公司網站(zhàn)!
人(rén)
已閱讀(dú)

淺談APP UI設計(jì)中色彩搭配方法和(hé)色彩情緒的(de)作(σ←∑&zuò)用(yòng)

來(lái)源:lexintech.com       發布時(shí)間(↑≈jiān):2019-09-24
       ∑☆;一(yī)款APP開(kāi)發出來(lái)後,用(yòng)↑¶≥戶打開(kāi)第一(yī)眼進入眼簾的(de)就(jiù)是(shì)Aβ&♥ΩPP的(de)視(shì)覺表現(xiàn),而色彩在其中©©<起到(dào)了(le)非常重要(yào)的(de)α€作(zuò)用(yòng),毫無疑問(wèn)色彩搭配對(duì)于A ∑PP開(kāi)發的(de)UI設計(jì)師(shī)來φ₽¥​(lái)說(shuō)是(shì)非常重要(yào)的(d✘π  e),運用(yòng)好(hǎo)色彩的(de)搭配,α&&是(shì)增加用(yòng)戶的(de)友←¶♥(yǒu)好(hǎo)體(tǐ)驗度。那(nà)麽具體(tǐ)∞≠到(dào)實際項目中該使用(yòng)什(shén)麽怎樣的(d→ e)色彩,需要(yào)怎麽做(zuò)呢( 'βne)?下(xià)面我将逐步去(qù)分(fēn)析。
色彩搭配
    &nbs₹δ×p;  在UI設計(jì)中,色∞✔✔彩的(de)搭配方法通(tōng)常有(yǒu)以下(xià)幾種×↕€↔:
       1、 ≠ →同種色搭配
       使用(yòng)  ↓一(yī)種色調及其相(xiàng)應的(de)多(duō)種亮(&‌σ☆liàng)色和(hé)暗(àn)色,整個(gè)頁面會(huì)非常統一(yγφ§ī)。
      &nbs¥↕σ★p;2、 類似色搭配
       使用(yòng)色÷✘∑↓相(xiàng)相(xiàng)近(jìn)的(₩←≤de)顔色,頁面元素不(bù)會(huì)相(Ω♣xiàng)互沖突,更加協調有(yǒu)質感。
     £♣≥α  3、 互補色搭配
       如(rú)果選擇使≠$® 用(yòng)互補色,最佳搭配是(shì)一(yī>↓)種作(zuò)為(wèi)主色,另一(yī)種用(yγ òng)于強調。它們有(yǒu)著(zhe)非常強烈的(de)對(duì)↑∏£比度,用(yòng)在需要(yào)特别強調某個(gè)元素時( ↑☆ shí)會(huì)非常有(yǒu)效。
     σ÷  4、 分(fēn)散互補色搭配
      &nb®≥sp;尋找三種顔色,其中兩種互相(xiàng¥®)類似,另一(yī)種與它們形成對(duì)比。這(±÷zhè)個(gè)配色非常易學而且容易出效果。
       5、 三角對( ↕‍duì)立色搭配
       顧名思義,•©Ω就(jiù)是(shì)色環上(shàng)三角對(duì)立的(d∞'e)顔色。最經典的(de)就(jiù)是(shì)蒙德裡(lǐ)安風'£(fēng)格的(de)紅(hóng)黃(huáng)藍(lá©>↑↔n)格構圖,時(shí)至今日(rì)仍然非常符合設計(jì)趨勢。‌≠&
 
       色©®↓ 彩本身(shēn)是(shì)沒有(yǒu)情緒的(de₽γ∏™),隻是(shì)因為(wèi)不(bù)同σ♦波長(cháng)的(de)光(guāng)通(tōng)過₽ 人(rén)的(de)眼睛傳到(dào)✘φ大(dà)腦(nǎo),引起了(le)人(rén)們不(bù)同的(∏<∞de)心理(lǐ)感受,所以色彩才有(yǒ✘¶←u)了(le)情緒。每種顔色都(dōu)會(huì)給<±±≈人(rén)獨特的(de)心理(lǐ)感受,引起我們不(bù)同的(♣φde)情緒,因此在設計(jì)過程中色彩情緒☆₹Ωγ是(shì)必須要(yào)考慮的(de)一(yī)個(gè)重要(yà"λo)元素。
      1、 黑(​₹®↑hēi)色
      &nbs€↕♥p;沉穩、品質感、收斂。
       單獨使用(yòn♥®φ★g)時(shí)黑(hēi)色可(kě)以很(hěn)容易吸®"βε引用(yòng)戶的(de)注意力。和(hé)其他(tā)顔色搭¶σ配使用(yòng)時(shí)可(kě)以很(hěφ₹¶n)好(hǎo)地(dì)搭配組合,使用(yòng)黑(hēi)色的(de)ε"背景可(kě)以非常好(hǎo)的(de)突出頁面中$π←≈的(de)內(nèi)容,容易出效果,應用(yòng)場₽≠♦ε(chǎng)景非常廣泛。可(kě)以提高(gāo)其明(míng)¶ 度得(de)到(dào)不(bù)同明(míng)度的(de)π≥灰色,例如(rú)蘋果系統的(de)深色模式。
       設 ≥'計(jì)時(shí)一(yī)般不(bù)會(huì)使用(yòng)純黑←¥♦δ(hēi)色,因為(wèi)純黑(hēi)在顯示≥>屏上(shàng)的(de)顯示效果并不(bù)≈∞是(shì)很(hěn)好(hǎo),所以通(tō β•"ng)常會(huì)選擇灰色。靈活使用(yòng)灰色可(kě↔™)以讓你(nǐ)的(de)設計(jì)更加優秀。
       2、 ± 白(bái)色
       ​≥;幹淨、純潔、簡潔。
       白("≠ bái)色中包含了(le)所有(yǒu)的(de)顔色。頁面設↔®<計(jì)中經常會(huì)使用(yòng)到(dào)白​​φ$(bái)色,你(nǐ)可(kě)以在上(shàng)面排列布局任何≠≤元素而不(bù)會(huì)感覺突兀,作(zuò)為(wèi)頁面的÷ε(de)背景色。因為(wèi)白(bái)色是(shì♥←β)無色相(xiàng)的(de),在設計(jì)中通(tōng)σ♥常也(yě)會(huì)稍微(wēi)變色,使用(yòng)到(dào)像乳白₹™ ♠(bái)色、雪(xuě)白(bái)色等顔色,這(zhè≥∑©©)樣不(bù)會(huì)顯得(de)過分(fēn)單調。黑(hēi)♥←色和(hé)白(bái)色搭配是(shì)一(yī)個(gè<ε&φ)非常經典的(de)組合,隻要(yào)把握好(hǎo)‌©ε∏使用(yòng)的(de)占比,可(kě≠✘↔φ)以創造出非常高(gāo)級的(de)設計(jì)ו÷。
       3、 紅(hóng) ←₹色
        熱(♦& rè)情、躁動、危險、警告。
     ♥§   紅(hóng)色元素很(hěn)容φ™¶易吸引到(dào)用(yòng)戶的(de)注意,可(kě)以特别強調頁面的←© ±(de)某個(gè)元素,比如(rú)消息的(de)小(xiǎo)紅(hón₩¶€​g)點,但(dàn)是(shì)時(shí)間(jiān)一(yī)久就(₹↑σ∞jiù)會(huì)引起眼睛疲勞,所以設計(jì)中紅(hóng¥←>)色元素一(yī)般不(bù)會(huì)大(dà)片使用(yòngε→✔)。但(dàn)是(shì)我們可(kě)以♦€通(tōng)過降低(dī)調整明(míng)度、純'ε←≤度,來(lái)使用(yòng)。
      &↔∏Ω✔nbsp;另外(wài),紅(hóng)色還(hái)代表著(z ∏he)危險及警告。紅(hóng)綠(lǜ)燈上(shàng)☆ ↓的(de)紅(hóng)燈停,炙熱(rè)的(de)火(huǒ)焰災害。σ✔頁面設計(jì)中可(kě)以在删除提醒、禁止操作(zuòπ'↑)功能(néng)時(shí)使用(yòng&♠)。
       4、 橙色<$£
      &nbs↔& Ωp;溫暖、活潑、年(nián)輕。
       黃‍→φ(huáng)色+紅(hóng)色得(de↕™)到(dào)橙色。屬于暖色調的(de)顔色,既不(bù)會(huì)γ<γ±像紅(hóng)色那(nà)樣躁動,又(yòu)不(bù)會(h≠↕uì)像黃(huáng)色那(nà)麽燦爛,非常具有(yǒu)親和(hé)‍∞♥≠力,用(yòng)戶對(duì)其接受程度非常φσ§高(gāo)。柑橘類的(de)水(shuǐ)果都(d<≈✘ōu)是(shì)橙系的(de),代表著(zhe)健康、&‍®✘積極。和(hé)秋天相(xiàng)關的(de)一♠↓‍‍(yī)些(xiē)項目上(shàng),也(yě)會(huì) ↑≥≈采用(yòng)明(míng)度稍低(dī)的(de)橙褐色來(lái)設計(​σjì)。橙色可(kě)以和(hé)綠(lǜ)色搭配,↕≈非常适用(yòng)于教育類的(de)産品,綠(l♦÷€βǜ)色為(wèi)主色,橙色為(wèi)強調色,象征著(zh&π< e)青少(shǎo)年(nián)健康有(yǒu)活力的(de±≠←$)特征。
       5、 黃(huá✘→≤εng)色
    &nbs↑←p;  陽光(guāng)、輝煌、醒目、高(gā∏←→₩o)貴。
這(zhè)是(shì)一(yī)個(gè)明(mín∑δg)度非常高(gāo)的(de)顔色。本身(shēn)是(shì)不(₽→€♠bù)适合應用(yòng)在數(shù)字化(huà)領域的(de)設計(jìε ♦☆)的(de),因為(wèi)其顯示效果較差,但(dàn)是(shì)可(₹ ÷kě)以通(tōng)過調整它的(de)明(míng)度和(hé)↔¥純度來(lái)得(de)到(dào)我們想要($§→yào)的(de)色調。黃(huáng)色和(hé)深灰色是(shì)一(yī<↔®)個(gè)很(hěn)好(hǎo)的(de)組合,閑魚美(měi)團都(dō™¶♣u)采用(yòng)了(le)這(zhè)種色彩ו"‌,黃(huáng)色的(de)高(gāo)明(míng)度的(de)色彩與≤♥ε明(míng)度較低(dī)的(de)深¶¥灰色可(kě)以形成極強的(de)對(duì)比效果,通(tōng)過這✘₩(zhè)種對(duì)比效果我們可(kě)以實現(xiàn)©≠β強調的(de)功能(néng)點。其他(tā)都(dōu)是(shì)應用(yΩ®®òng)在比較特定的(de)一(yī)些(xiē)場(chǎng)景,例如(r↕₽ú)紅(hóng)綠(lǜ)燈的(de)黃(huáng)∑ 色的(de)提醒作(zuò)用(yòng>¥&),古代皇帝的(de)專用(yòng)色,農(nóng)作(zuò)物(φ☆wù)成熟的(de)顔色等。
       6、 綠(lǜ)$✔色
       健康、大(₩®₽dà)自(zì)然、清新、環保、安全。
      &×δ‍nbsp;綠(lǜ)色是(shì)大(dà)自(zì)然的('↑λ™de)顔色,大(dà)多(duō)數(shù)植物(wù)的(de)顔©​£色,現(xiàn)在非常提倡的(de)環保生(s‌$✔hēng)活都(dōu)是(shì)采用♦λλ(yòng)綠(lǜ)色為(wèi)主色調,♥σ>健康無污染。代表著(zhe)春天,在策劃設計(jì)春天相(xiàng)關事≈π(shì)物(wù)活動,可(kě)以使用(y∏γ‌òng)綠(lǜ)色為(wèi)主色進行(xíng)設計(‌¥γ∞jì)。綠(lǜ)色是(shì)有(yǒu)著(zhe)安全屬性的(≈££Ωde),在支付、保障方面通(tōng)常是(shì)應用(yòng)很(Ω¶hěn)多(duō)的(de),與紅(hóng)色正好(hǎo)是(shì)♣≠₹相(xiàng)反的(de)作(zuò)用(yπδòng)。
       7、 ‍'藍(lán)色
       科(k♦φ®δē)技(jì)、純淨、深邃、放(fàng)松 >、忠誠
       藍(lán)色是(sו©hì)三原色之一(yī)。和(hé)大(↓ §dà)海(hǎi)、天空(kōng)有(yǒu)著(zhe)不(★​bù)可(kě)分(fēn)割的(de)聯系,是(shì)忠誠、放∏≥☆(fàng)松的(de)象征,在設計(jì)中應用(yòng)是(±←γshì)極其廣泛的(de)。另外(wài​γ₽π),藍(lán)色也(yě)是(shì)科(kē×> ≠)技(jì)宇宙領域的(de)專屬顔色,是(shì)理™∑±(lǐ)智、效率的(de)代名詞,随處可(kě)見(jiàn)的←♦∑©(de)企業(yè)官網、VI、軟件(jiàn)、宣傳物(wù​∞β)料等。像是(shì)心理(lǐ)治療室都(dōu)Ω∑&是(shì)使用(yòng)藍(lán)色系的(de)環境,可(kě​λ)見(jiàn)藍(lán)色是(shì)非常易接受的(de)顔色,在設計±♠(jì)中使用(yòng)起來(lái)非常方便。
APP 開(kāi)發主界面UI 色彩設計(jì)
       面對(duì)'•™&一(yī)個(gè)APP項目時(shí)不(bù)知( Ω∏zhī)道(dào)該如(rú)何選擇主≠γ↕‍題色、輔助色,這(zhè)個(gè)時(sh≈₩í)候我們可(kě)以先通(tōng)過借↑≠鑒他(tā)人(rén)優秀的(de)作(zuò)品,從(cón✔λ≥g)中提取一(yī)套設計(jì)色彩。了(le)解不↔'δ(bù)同顔色的(de)色彩情緒,為(wèi)進‌™∞行(xíng)項目設計(jì)時(shí)選擇合适的§♦♥&(de)顔色提供依據。