色彩在交互設計中的應用

最新 04-25

UI設計微課堂

關注將獲得一對一解答，設計、資源、分享

這樣就能第一時間收到我精選的UI設計精品教程

感謝大家的支持！下方高能

對於交互設計師來說，通常交互原型都做為黑白稿。為什麼要做黑白稿呢？那是因為在前期交互設計中，交互設計師為了更專注於產品的流程、跳轉，避免前期投入更多的精力在UI效果製作方面。對於很多小公司或小團隊來說，通常只有一個設計師或者設計資源很少，設計師拿到需求後，直接就出高保真效果圖了（當然，前期也經過了討論，在紙上也畫了交互的流程了）。

對於時間不充分的時候來說，這樣是會節約一部分時間。但是，這樣經常會帶來一個弊端：交互考慮不充分。為什麼會這麼說呢？因為在製作高保真效果圖的時候，設計師會投入更多的時間去關注頁面是否好看，產品經理也會去關注這個文字顏色深一點好還是淡一點好，用紅色好還是黃色好......一大堆的視覺問題就提前出來了。

換個方式來說，同樣的給你一天時間：一個只做交互設計；另一個就交互和視覺一起做，然後出高保真。你不難想像到，一天只用來做交互設計的，他邏輯和流程肯定比直接出視覺稿的要好，考慮的更全面。所以，對於時間充足或者設計資源充足的團隊來說，交互設計和視覺設計分離是很有必要的。

今天就來說說色彩在交互設計中的應用，前面說的是交互設計通常是黑白稿，但是對於用戶來說，他看到的是真實線上的產品。我們最終的目的是設計產品給用戶使用，做為一個交互設計師，那就不能只考慮黑白交互稿上的事情了，要關注後期視覺的設計,用戶是怎麼理解產品的交互的，這是非常重要的問題。我們主要從以下幾個方面來研究色彩在交互中的作用：

1.區分層級

2.功能指示

3.信息類別指代

4.色彩心理學在交互設計中的作用

區分層級

不管是UI設計還是其他平面設計，層級是設計中非常重要的一個環節。視覺層級手法主要有以下幾種元素，實際設計中為了讓效果拉開主次，可能會同時使用多種方法以達到更好的效果：位置、大小、距離、內容形式、色彩。在此，我們主要研究下色彩的的作用。

如何用色彩來建立層級？

首先，你要確定主色。確定主色的因素有很多，比如說行業屬性、企業色、個人便好、色彩心理作用等。不管最後我們以何種方式來做，但必須要確定出主色，一款app、一個網頁，必須要有一個主色。

上圖是谷歌官方推薦顏色部分展示，谷歌推出了一套配色體系，在你沒有任何靈感、方案時，你可以使用谷歌的配色。具體可以看谷歌顏色規範文章確定主色後，根據應用的不同場景，還需要設置主色體系的色彩，可以根據透明度的變化來設置。推薦一款谷歌配色方案網站如下圖

其次，確定輔助顏色。

主色是指應用程序中最常出現的顏色。一輔助色是指用來強調自己的UI的關鍵部分的顏色。輔助顏色用於強調UI的部分選擇。它可以是互補的或類似於你的主要顏色，但它不應該簡單地是一個輕或黑色變化你的主要顏色。它應該與周圍的元素對比，並謹慎應用。

輔助顏色最適用於：

1.按鈕，浮動動作按鈕和按鈕文字

2.文本欄位，游標和文本選擇

3.進度欄

4.選擇控制項，按鈕和滑塊

5.鏈接

6.標題

使用輔助顏色是可選的。如果您使用主色的變體來強調元素，則輔助顏色不是必需的。

所以，色相不同，可以用來區分層級。色相相同的顏色，我們也可以根據透明度、明度來區分層級

功能指示

功能指示，主要包括功能跳轉、獲取焦點、可操作和不可操作

1.功能跳轉指示，在UI、交互設計中是一個很重要的指示，要讓用戶使用你的產品，不會感到迷茫。我們除了箭頭、文字提示、按鈕等來指示外，還可以用顏色來指示功能，當然很多情況下是於文字、按鈕結合。通常就用輔助色來指代文字可操作，如右圖的文字鏈接。同樣，我們經常會在微信朋友圈、QQ空間、微博中看到文字鏈接提示。