中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：產(chǎn)品的配色若設(shè)計(jì)合理，除了可以給用戶(hù)留下深刻印象之外，還可以向用戶(hù)傳遞信息、強(qiáng)化品牌印象。而在不同產(chǎn)品的界面設(shè)計(jì)中，設(shè)計(jì)師需要依據(jù)用戶(hù)體驗(yàn)、產(chǎn)品需求以及相應(yīng)的配色理論做出相應(yīng)方案。本文作者結(jié)合其自身案例總結(jié)了幾種配色方案，一起來(lái)看一下。

藝術(shù)家亨利 ·馬蒂斯曾經(jīng)說(shuō)過(guò)：“顏色賦予人魔法般的能量”。

每個(gè)人都知道學(xué)會(huì)魔法最簡(jiǎn)單的方法是犧牲一只山羊，但我們卻不能為了設(shè)計(jì)出好的用戶(hù)界面去這樣做。

幸運(yùn)的是，在 UI 設(shè)計(jì)領(lǐng)域，我們可以更靈活地運(yùn)用顏色：顏色可以向用戶(hù)傳遞一定的信息，影響他們的選擇甚至是感受。并且由于沒(méi)有 “山羊” 必須被犧牲，因此可以 100% 地隨意使用顏色。

顯然，色彩理論并不是一門(mén)晦澀難懂的學(xué)科：它幾乎是大多數(shù)藝術(shù)和設(shè)計(jì)課程第一學(xué)期的東西，并且如果你正在閱讀這篇文章，可能你已經(jīng)至少對(duì)它有了一個(gè)基本的了解。

然而，我們一定能忽視色彩所具備的潛力。尤其是在 UI 設(shè)計(jì)領(lǐng)域，巧妙地使用顏色可以引導(dǎo)用戶(hù)以你希望的方式使用某些東西，或者它是說(shuō)服潛在客戶(hù)繼續(xù)向下滾動(dòng)你的登錄頁(yè)面的關(guān)鍵因素。擁有現(xiàn)有配色方案的品牌可以思考如何使用它們從而受益。新的應(yīng)用程序可以利用色彩脫穎而出，也可以融入到現(xiàn)有的 APP 中。

簡(jiǎn)而言之：設(shè)計(jì)時(shí)，顏色應(yīng)該時(shí)刻在你的腦海中。

以下的配色方案選擇的案例，講解了我是如何在設(shè)計(jì)中將其付諸實(shí)踐的，以及它是如何幫助每個(gè)項(xiàng)目實(shí)現(xiàn)其目標(biāo)的。

聲明：在這篇文章中，我將以英式的方式拼寫(xiě) colour (顏色)，而且 “u” 在整篇文章中隨處可見(jiàn)，所以泡一杯茶，拿一包麥克維蒂消化餅干，然后繼續(xù)閱讀……

一、單色?One colour to rule them all

先說(shuō)一個(gè)簡(jiǎn)單的配色方案：?jiǎn)紊＿@是最保險(xiǎn)的，最常用的方案，我以紫色為主色畫(huà)了一幅畫(huà)當(dāng)作案例，見(jiàn)下圖。在藝術(shù)中，只使用一種顏色通常是為了在繪畫(huà)中營(yíng)造一種意境或情緒（也參考畢加索的藍(lán)色時(shí)期）。

你好西雅圖

但我們?nèi)绾卧?UI 設(shè)計(jì)中使用單色配色方案呢？

首先，很難找到真正單色的用戶(hù)界面，因?yàn)榇蠖鄶?shù)時(shí)候都有灰色陰影，以及區(qū)分用戶(hù)交互動(dòng)作成功和錯(cuò)誤的顏色，這些顏色都必不可少。

實(shí)際上，對(duì)于簡(jiǎn)單的界面來(lái)說(shuō)，只有一種主色有助于強(qiáng)化你的品牌信息。我最近設(shè)計(jì)的一款自定義邊框圖像生成器 APP 就運(yùn)用了單色配色方案，以創(chuàng)建最小化且清晰的外觀：

單紫色配色方案

這個(gè)案例中我只在 Logo 設(shè)計(jì)運(yùn)用了主色調(diào)紫色，在 APP 本身的設(shè)計(jì)中用不同色值的紫色作為呼應(yīng)。這是個(gè)簡(jiǎn)單的 APP，因此使用單色創(chuàng)造了一個(gè)簡(jiǎn)約的品牌印象。

但是要注意，隨著界面變得復(fù)雜，主色和強(qiáng)調(diào)色對(duì)于區(qū)分靜態(tài)元素和交互元素起到重要作用，需要更巧妙的配色方案…

二、互補(bǔ)色?Complementary colours：a world apart

色彩世界中的兩極相吸

互補(bǔ)色是最受歡迎的色彩方案之一，因?yàn)檫@種組合有著充足的原理支撐。互補(bǔ)色在色輪上相對(duì)而坐彼此吸引，就像千禧一代觀看《老友記》重映一樣。

HyeRyeong Oh 發(fā)表于Unsplash

上圖中的水母和海水，就是非常有視覺(jué)沖擊力的色彩對(duì)比。用苛刻的甲方的話來(lái)說(shuō)，這種配色方案能讓作品變得 “流行”。

在 UI 和品牌設(shè)計(jì)中，互補(bǔ)色很符合現(xiàn)有的設(shè)計(jì)慣例：有一個(gè)主要的品牌色和一個(gè)輔助色。

比如標(biāo)志性的宜家藍(lán)黃，或者喜力的（世界著名的荷蘭啤酒品牌 Heineken ）綠紅。

當(dāng)設(shè)計(jì)用戶(hù)界面時(shí)，盡量保證在頁(yè)面的主體部分只使用一種顏色，這樣就不會(huì)讓用戶(hù)眼花繚亂不知所措。

下圖是我最近為一家壽司店設(shè)計(jì)的網(wǎng)站，每個(gè)頁(yè)面都有一個(gè)主色，而互補(bǔ)色恰到好處地突出重點(diǎn)，吸引用戶(hù)的注意力。頁(yè)面的顏色變化有助于創(chuàng)造用戶(hù)的視覺(jué)焦點(diǎn)，并提供視覺(jué)變化防止用戶(hù)對(duì)顏色產(chǎn)生視覺(jué)疲勞。

壽司網(wǎng)站設(shè)計(jì)

當(dāng)然，如果常規(guī)的補(bǔ)色方案不足以體現(xiàn)你的設(shè)計(jì)個(gè)性，還可以選擇補(bǔ)色分割方案。

三、補(bǔ)色分割?Split the difference

補(bǔ)色分割是指使用一種基色，輔助色取自其補(bǔ)色的兩側(cè)。

補(bǔ)色分割方案

下圖的阿姆斯特丹街景繪畫(huà)中，我運(yùn)用了補(bǔ)色分割的配色方案來(lái)區(qū)分自然河流、樹(shù)木和人造街道。

阿姆斯特丹街景

建筑本身也用了很多白色，這里有一個(gè)要點(diǎn)：不是所有的東西都需要上色。事實(shí)上，在你的設(shè)計(jì)中 恰當(dāng)?shù)亓舭灼鸬搅藦?qiáng)調(diào)顏色和內(nèi)容的作用。下圖將給你展示一個(gè)在 UI 設(shè)計(jì)中運(yùn)用這個(gè)方法的案例：

作者 Phil Cohn 的個(gè)人網(wǎng)站

這個(gè)作品里我不僅大量使用了留白，還使用了和阿姆斯特丹繪畫(huà)中相似的補(bǔ)色分割方案。

此外，確保一個(gè)頁(yè)面只讓一種顏色主導(dǎo)，因?yàn)樘嗟膶?duì)比色會(huì)讓人產(chǎn)生視覺(jué)負(fù)擔(dān)，對(duì)于每個(gè)部分，也使用一種顏色為主，就像純素壽司的官網(wǎng)一樣。這也讓你可以加入更多顏色細(xì)節(jié)，例如下面背景中的三文魚(yú)配色與阿姆斯特丹房子相呼應(yīng)。

阿姆斯特丹系列插畫(huà)

對(duì)比色是吸引注意力的好方法，但在這個(gè)信息轟炸的時(shí)代，你想傳遞平靜的情緒呢？看起來(lái)是屬于同類(lèi)的鄰近色配色方案是最好的選擇。

四、鄰近色?Everybody needs good neighbors

我要說(shuō)的最后一個(gè)配色方案是關(guān)于鄰近色的，相似的顏色在色輪上彼此相鄰。

相似的顏色聚在一起，就像南極的企鵝一樣

想想我們身邊連成片的樹(shù)木，一望無(wú)際的草地，沙如雪的大漠。完全不需要色輪的另一邊來(lái)凸顯他們的存在。在下圖中我運(yùn)用了鄰近色原理來(lái)創(chuàng)造和諧的感覺(jué)：

鄉(xiāng)村的小路插畫(huà)

食品品牌中經(jīng)常使用這種配色方案，尤其是有機(jī)食品。它們也可以很容易地應(yīng)用 UI 設(shè)計(jì)中，就拿我為一個(gè)餐館做的這個(gè)設(shè)計(jì)來(lái)說(shuō)：

餐館網(wǎng)站設(shè)計(jì)

在這里沒(méi)有突兀的對(duì)比色，取而代之的是自然又不失精致的配色方案和大量的留白。要注意的是，有時(shí)鄰近色配色可能有點(diǎn)平淡，所以要根據(jù)設(shè)計(jì)場(chǎng)合謹(jǐn)慎使用。

五、你能在畫(huà)面中用到 RGB 色彩空間中所有的顏色嗎？Can you paint with all the colours of the RBG colour space？

當(dāng)然，在色彩理論的世界里，還有很多有待學(xué)習(xí)的東西。不僅有其他配色方案，如三色、方形和雙互補(bǔ)，我甚至沒(méi)有開(kāi)始加入飽和度、色相和明度的知識(shí)。我鼓勵(lì)大家閱讀更多關(guān)于配色的內(nèi)容，更重要的是動(dòng)手進(jìn)行創(chuàng)作！

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

作者：Phil Cohn，譯者：陳熠璇，編輯：孫淑雅，審核：吳鵬飛、張聿彤；公眾號(hào)：TCC翻譯情報(bào)局

原文鏈接：https://uxdesign.cc/how-to-apply-colour-theory-in-user-interface-design-4ca48e94e4cd

本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議