網頁設計 ? 視覺設計 ? Sketch中的色彩使用技巧

Sketch中的色彩使用技巧

發表于: 視覺設計. 評論
Sponsor

本教程將介紹使用Sketch設計時實用的色彩理論和工具資源。我們會通過實際案例來幫助你更有自信的進行設計,Sketch的功能示例也能幫你更高效地設計。

Sketch中的色彩使用技巧

一、為什么要重視在UI中使用正確的顏色

顏色不僅僅是為了使UI更加吸引人,它們也為用戶和企業帶來許多好處。

  • 顏色增強用戶體驗——得益于正確的色板,內容更加易讀。特定區域和對象更加富有意義,更加容易被注意到。
  • 顏色增強品牌個性——顏色的使用能夠和企業或品牌建立更好的聯系。得益于此,UI取得用戶的信任,使得用戶感覺到自己在正確的位置上。
  • 顏色有助于目標的實現——顏色讓設計師和用戶通過正確的方式交流。如果你想在app中警告某人,你會使用正確的顏色(通常是紅色),用戶會立即意識到這是值得閱讀的信息。另一方面,綠色按鈕會激發用戶購買特定產品的欲望,它表明這是安全的過程。

二、設計中的色彩模型

在分享更多實用技巧之前,我們有必要了解一些色彩理論。

以下是數碼設計中最常見的色彩模型:

  • RGB
  • HSL
  • HSV / HSB

RGB ——(紅,綠,藍)RGB是附加顏色模型。通過混合紅、綠、藍三種光來重現各種顏色。

HSL ——(色相、飽和度、亮度)HSL是RGB模型的替代模型。HSL中每種顏色的色相圍繞中性色的中心軸呈放射狀分布,中性色的范圍是頂部的白色到底部的黑色。

HSV/HSB ——(色相、飽和度、值或亮度)這種顏色模型經常被誤認是HSL,其實它也是RGB模型的一種替代模型。和HSL類似,HSV的每種顏色色相圍繞中性色的中心軸呈放射狀分布,不同的是,中性色的范圍值從頂部的100%到底部的0%。

Sketch中的色彩使用技巧

1. Sketch中的色彩模型

Sketch支持上述所有色彩模型,你可以在設計中盡可能地使用它們。下一章,我會通過一些技巧,教你如何在HSB模型中調出更好看的色調。

Sketch中的色彩使用技巧

2. 配色方案

App更加吸引人的關鍵在于使用正確的色板。

一些顏色看起來比其他顏色更佳,也是為什么我們要設計配色方案的原因。配色方案幫助設計師找到適合其余顏色的色調。下面是一些配色方案類型:

  • 單色
  • 類比色
  • 互補色
  • 分裂互補色
  • 三角對比配色
  • 正方形配色方案
  • 矩形配色

下面我只重點提及4種最常用的配色方案類型,想詳細了解請閱讀《設計師理論:如何設計你自己的配色方案》
https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/

單色 —— 單色配色方案由同一色相中的不同色調、色彩、和色度構成。請小心用在App中——UI可能比較單調。

Sketch中的色彩使用技巧

類比色 —— 類比配色方案由色輪中相鄰的三種顏色構成。這種方案容易創建,比單色配色方案更加吸引人

Sketch中的色彩使用技巧

互補色 —— 互補配色方案通過融合色輪上的2種對立顏色構成。容易通過這些顏色的色彩和色度拓展。

Sketch中的色彩使用技巧

三角對比配色 —— 三角對比配色方案由三種在色輪中具有同等間隔的色相構成。這種配色方案很難調和,但它們能夠讓設計更具吸引力。

Sketch中的色彩使用技巧

3. 在Sketch中創建配色方案

有一些工具&插件可以幫助你快速創建自己的色板:

Alembic—— 一個從Sketch中的照片提取顏色的插件;
https://alembicforsketch.com

Sketch Palettes —— 一個讓你在Sketch中保存和加載色板的實用插件;
https://github.com/andrewfiorillo/sketch-palettes

Import Colors —— 支持導入不同格式色板的插件;
https://github.com/Ashung/import-colors-sketch

Automate —— 功能強大的輔助插件,你可以用它創建色彩樣式指南;

三、正確的平衡 —— 神奇的60-30-10原則

60-30-10原則是室內設計行業中的一個著名和永恒的裝飾原則。它非常簡單和高效。這個原則可以用來找到配色方案中的正確平衡。

60%+30%+10%是所用顏色之間的比例:

60%——屬于主要顏色的數量;

30%——次要顏色的范圍;

10%——房間剩余的部分屬于強調色;

Sketch中的色彩使用技巧

1. 60-30-10原則——如何應用在UI設計中?

盡管這個原則來自室內設計,但你可以將其成功地應用在數碼設計中。將App或者頁面視作內容的空間,應用該原則使你的設計更加平衡。

Sketch中的色彩使用技巧

四、灰色不灰

灰色不明顯,但博得用戶眼球。如果你和我一樣,就會在各個方面尋求靈感。看看建筑,如今我們慣用灰色調,而且完美適合現代建筑。我也注意到越來越多的汽車是灰色的,但它們看起來非常吸引人。

這些中性色為物體增添多少生機?這個秘密微妙且甚為重要…

好的灰色不是純灰色——如果你在中性色上增加一些顏色,會發生神奇的效果。

1. 灰度——如何應用在UI設計中?

當你考慮在App中使用灰色時,純灰色可能不會那么吸引人。為了讓你的UI更好看,可以嘗試為中性色增加一些色度和飽和度。這樣做會讓用戶感覺到中性色更加自然。

Sketch中的色彩使用技巧

使用不是100%純正的灰色對我們的眼睛至關重要。這讓一切看上去更加自然。甚至蘋果公司也開始使用 “Truetone” ,讓iPhones、iPads和Macbooks的屏幕根據光線色溫自動調整,以感覺更自然。

2. Sketch中的灰度

雖然你必須牢記通過自己正確的方式設置中性色,但你也可以用簡單的 Convert to Grayscale (https://github.com/mheesakkers/sketch-plugin-convert-to-grayscale)插件將畫板設置為灰色(純灰色色調)。

五、色調——讓UI更加吸引人的技巧

在本節中,我將向你展示如何使UI的色調變得更加生動和吸引人。

首先,讓我們了解如何構建不同的顏色變體。

如果你觀察現實世界中的顏色如何相互作用,你會注意到陰影和色彩不僅僅是亮度的變化。許多陰影具有比主色更高的飽和度。另一方面,亮面雖然更亮但飽和度弱些。如果你想要讓設計感覺上更加自然,你應該遵循此觀察。

1. 在Sketch中創建深色變體

  1. 吸取你項目的一種顏色;
  2. 將Sketch的色彩模式轉換為HSB模式;
  3. 降低B(HSB的亮度)的值,直到合適深色的范圍;
  4. 增加S(HSB的飽和度)的值;
  5. 瞧!

Sketch中的色彩使用技巧

制作深色色調

Sketch中的色彩使用技巧

2.在Sketch中制作淺色變體

  1. 吸取你項目的一種顏色;
  2. 將Sketch的色彩模式轉換為HSB模式;
  3. 增加B(HSB的亮度)的值,直到合適淺色的范圍;
  4. 降低S(HSB的飽和度)的值;
  5. 瞧!

Sketch中的色彩使用技巧

制作淺色色調

Sketch中的色彩使用技巧

簡單的步驟,你的顏色變體在色板中看起來更好。

為了獲得更好的效果,你可以學習這種制作顏色變體的框架:《UI設計中的顏色:實用的框架》。
https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e

六、顏色無障礙——適合所有用戶的設計

考慮到那些以不同于我們大多數人的方式感知色彩的人是十分重要的。色彩在我們的感知中起著重要作用。在 《完全用戶體驗的易用性App設計》(https://uxmisfit.com/2017/05/21/design-apps-that-do-not-sux-accessibility-on-mobile/) 一文中,我介紹了設計無障礙App必不可少的幾個方面。

為了讓你的網頁或移動端解決方案完全無障礙,你應該遵循WCAG 2.0指南(https://www.w3.org/TR/WCAG20/)。大量的要點提醒我們顏色的正確使用。

如果你的UI是為特定平臺(iOS或Android)設計的,則應該遵循它們的視覺無障礙設計規范:

Apple iOS HIG —— Color and Contrast;
https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/color-and-contrast/

Material Design —— Accessiblity;
https://material.io/design/usability/accessibility.html#color-contrast

1. Sketch中的顏色無障礙

為了確保所有的顏色都匹配網頁無障礙指南,我建議使用 Stark (https://www.getstark.co/)插件。它讓你可以檢查對比度和模仿色盲的視角。

2. 顏色含義 & 文化環境

顏色對我們如何感知解決方案造成巨大影響。正確的色調在每一種文化中都具備它們的意義,它們也和我們的情緒有關。

下面是基礎顏色和情緒以及意義之間的關系:

白色——清新、干凈、現代、純潔;

灰色——中性、中庸;

黑色——神秘、力量、豪華、邪惡;

紅色——力量、熱情、自信、愛;

藍色——安全、平靜、舒適、可靠;

綠色——清新、自然;

黃色——溫暖、危險、開心;

橙色——活力、幸福;

顏色的含義取決于你生活的環境。如果你想了解更多,請閱讀 《世界各地的顏色象征和含義》(https://www.shutterstock.com/blog/color-symbolism-and-meanings-around-the-world)。

針對特定市場的設計必須了解當地的顏色含義,這有利于你設計的UI兼容更多的含義和避免誤解。

3. Sketch中顏色處理的一些技巧

選擇常用的顏色——想要知道Sketch中哪種顏色使用頻率高,點擊拾色器右邊的按鈕,它會顯示文檔中最常用的顏色列表。

查找和替換顏色——你想要快速替換文檔中的色板(并且你沒有通過 Prime (https://www.primedesignsystem.com/)使UI庫中的顏色保持一致),你可以通過菜單中的編輯>查找和替換顏色(或者Option-Command-F快捷鍵)來替換顏色。

一些額外選項可以讓你設置顏色修改是否影響不同透明度的顏色。酷!

七、色板及配色工具資源

在設計導航的配色欄目中,有很多可以幫助你為UI設計創建合適色板以及配色用的工具,比如coolors APP、UI Gradient、Color Hunt等都是很不錯工具資源,設計師可以挑選一個喜歡的來使用。

Sketch中的色彩使用技巧

八、總結

顏色在我們的設計中起著重要作用。大多數時候,我們會直觀地使用它們。然而,有意識地運用能夠獲得更好的效果,用戶也會感覺到與眾不同。

作者:Thalion
原文:https://medium.com/sketch-app-sources/sketch-colors-7682c1eedc78
翻譯:Poto (ID:shejidaren888)

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

{ 發表評論 }