APP改版筆記:顏色篇

FLY
3 評(píng)論 10369 瀏覽 118 收藏 15 分鐘

本文以金融產(chǎn)品為例,來(lái)跟大家討論一下在app改版的時(shí)候,它的顏色應(yīng)該怎么確定和修改~

前期分析

1. 產(chǎn)品用色

以金融產(chǎn)品為例,APP在改版時(shí)先需要確認(rèn)主色是否需要修改。

主色的修改可以使APP在視覺(jué)上有一個(gè)非常大的變動(dòng),對(duì)老用戶(hù)的認(rèn)知會(huì)有一個(gè)很大的改變;在此基礎(chǔ)上更新輔助色等,從而確立和優(yōu)化新的品牌顏色DNA;在未來(lái)改版時(shí)也有據(jù)可依。

不過(guò),貿(mào)然改變主色也是件很有風(fēng)險(xiǎn)的事情。在用戶(hù)對(duì)此產(chǎn)品印象不深的時(shí)候貿(mào)然修改主色,或者是每次大的改版都頻繁的修改顏色,都會(huì)增加用戶(hù)的使用成本且不能在用戶(hù)心中樹(shù)立很好的品牌認(rèn)知。

在舊版本主色為藍(lán)色的情況下,新版本還需不需要修改主色,可以進(jìn)行一系列的調(diào)查分析。

2. 調(diào)查數(shù)據(jù)

調(diào)查顯示,大多數(shù)人認(rèn)為藍(lán)色是他們最喜歡的顏色。藍(lán)色被認(rèn)為是全球最安全的顏色。

APP改版筆記--顏色篇

來(lái)自NICK BABICH的數(shù)據(jù)

APP改版筆記--顏色篇

來(lái)自NICK BABICH的數(shù)據(jù)

通過(guò)相關(guān)數(shù)據(jù),得出的結(jié)果是藍(lán)色非常匹配金融產(chǎn)品;那么分析調(diào)查結(jié)果,可以得出更詳細(xì)的說(shuō)明。

經(jīng)過(guò)分析,主色依然以藍(lán)色為主,但會(huì)進(jìn)行優(yōu)化和微調(diào)。

藍(lán)色象征著:冷靜、理智、沉穩(wěn)、廣闊、潔凈、智慧、誠(chéng)實(shí)。與核心關(guān)鍵詞相對(duì)應(yīng),能很好的體現(xiàn)出品牌調(diào)性,與金融產(chǎn)品非常契合。商業(yè)設(shè)計(jì)中,強(qiáng)調(diào)科技、效率的商品或企業(yè)形象,大多選用藍(lán)色當(dāng)標(biāo)準(zhǔn)色、企業(yè)色。

藍(lán)色,代表重視人與人之間的信賴(lài)關(guān)系,給人一種創(chuàng)新的感覺(jué);通常,公司使用藍(lán)色是因?yàn)樗c技術(shù)和創(chuàng)新聯(lián)系在一起。

尋找主色

方法一:情緒板選取

(1)根據(jù)產(chǎn)品屬性、產(chǎn)品內(nèi)容、slogan、品牌形象特點(diǎn)以及已知信息等總結(jié)出主要關(guān)鍵詞,并從中延展出相關(guān)的衍生關(guān)鍵詞加以輔助。

核心關(guān)鍵詞:金融、供應(yīng)鏈、安全

衍生關(guān)鍵詞:金錢(qián)、科技感、品質(zhì)感、靈活性、融合、鏈接、信賴(lài)、高效、穩(wěn)重、專(zhuān)業(yè)性。

其他關(guān)鍵詞:輕質(zhì)感、便捷性、直觀的、差異性、版塊化、情感化、呼吸感、冷靜、沉著、理智、舒適、留白。

(2)將總結(jié)出的關(guān)鍵詞進(jìn)行梳理分類(lèi),并分析出心理預(yù)期以及視覺(jué)物化所需的元素,便于尋找圖片,可以制作情緒板方便查看。

第一組:金錢(qián)、科技感、品質(zhì)感、靈活性。

心理預(yù)期:品質(zhì)高端、流暢直觀

視覺(jué)物化:金幣鈔票、機(jī)器人、跑車(chē)、建筑、咖啡廳、紋理、天空、海洋、云彩

APP改版筆記--顏色篇

第二組:融合、連接、信賴(lài)

心理預(yù)期:漸變、活力、舒適、整體性

視覺(jué)物化:水滴、細(xì)胞、圓形、鏈條、繩、握手、對(duì)話、朋友

APP改版筆記--顏色篇

第三組:高效、穩(wěn)重、專(zhuān)業(yè)性

心理預(yù)期:簡(jiǎn)潔、突出重點(diǎn)、穩(wěn)重、特定元素

視覺(jué)物化:卡片、陰影、放大字體、留白、防盜門(mén)、醫(yī)生、護(hù)士、專(zhuān)業(yè)設(shè)備

APP改版筆記--顏色篇

(3)圖庫(kù)中篩選出合適的,不同色相的藍(lán)色圖片,將圖片進(jìn)行晶格化或模糊處理作為色板備選,從中可以選出主色并進(jìn)行優(yōu)化,作為設(shè)計(jì)風(fēng)格的導(dǎo)向。

APP改版筆記--顏色篇

APP改版筆記--顏色篇

方法二:同色系產(chǎn)品對(duì)比

(1)整理主流的以藍(lán)色為主色的APP(可以是非競(jìng)品)進(jìn)行篩選、比對(duì)、尋找規(guī)律,列出其色相、飽和度、明度等數(shù)值。

APP改版筆記--顏色篇

APP改版筆記--顏色篇

(2)對(duì)比新舊主色,分析出新版顏色改進(jìn)的地方與優(yōu)點(diǎn),作為后期審查時(shí)的解釋說(shuō)明。

APP改版筆記--顏色篇

(3)舊版主色

  1. 舊版主色對(duì)比后發(fā)現(xiàn)在色相、飽和度兩項(xiàng)數(shù)值相比之下都不高,整體偏暗偏灰,顏色發(fā)舊。
  2. 雖然比較“耐看”,即使長(zhǎng)時(shí)間使用眼睛也很難疲勞。但對(duì)于金融產(chǎn)品來(lái)說(shuō),用戶(hù)并不會(huì)像使用資訊類(lèi)、社交類(lèi)APP那樣頻繁。
  3. 設(shè)計(jì)中會(huì)使用大量的留白。搭配淺色發(fā)暗的主色沒(méi)有辦法很好的突出品牌感。作為按鈕或是icon沒(méi)辦法做到十分突出。

(4)新版主色

  • 新版主色在色相、飽和度、明度都有提高,整體感覺(jué)更亮更流行。
  • 新主色給人感覺(jué)更加厚重,會(huì)增加用戶(hù)的安全感。
  • 頁(yè)面中,新主色作為按鈕和icon更加醒目,更有品牌感,顏色的延展性更高。

(5)其他方法

我們可以從一些設(shè)計(jì)網(wǎng)站,或者是自己的收藏中獲取靈感。設(shè)計(jì)往往是偏感性的,在遵從理性方法的基礎(chǔ)上,我們可以適當(dāng)?shù)奶鍪`,運(yùn)用自己的美感去尋找一些不同的顏色。

花瓣、dribbble、behance、pinterest等等,都可以找到豐富的資源供我們參考。

這里推薦一款谷歌插件「Site Palette」,可以自動(dòng)吸取網(wǎng)站的主要顏色;還可以幫助我們建立色板,以及尋找相關(guān)配色的圖片;搜索到的顏色也可以直接下載,sketch和Adobe軟件都可以下載使用。

(可以直接在谷歌瀏覽器的擴(kuò)展程序中搜索到,會(huì)有簡(jiǎn)易教程。)

APP改版筆記--顏色篇

(6)方法總結(jié)

上面列舉出了一些方法,簡(jiǎn)單分析下其中的優(yōu)缺點(diǎn)。

方法一優(yōu)點(diǎn):通過(guò)關(guān)鍵詞、尋找符合圖片、制作情緒板等步驟一步步分析出范圍,可選顏色范圍比較大。提取出的顏色符合預(yù)期,邏輯清晰,有理有據(jù)。

方法一不足:整理出的色彩范圍與前期關(guān)鍵詞的提取、搜集到的圖片、晶格化的效果關(guān)系很大;且選擇出的顏色往往并不能直接使用,需要進(jìn)一步細(xì)化。(畢竟從晶格化效果的小方格中提取出的顏色并不一定能達(dá)到百分百滿(mǎn)意。) 設(shè)計(jì)師選取顏色的主觀性很高,但縮小了選擇范圍,可視為選色的導(dǎo)向。

方法二優(yōu)點(diǎn):通過(guò)搜集其他成熟產(chǎn)品的主色,列舉出對(duì)應(yīng)數(shù)值,觀感上更加直觀;通過(guò)比較我們可以很快的發(fā)現(xiàn)其特點(diǎn);且顏色的范圍也被大大縮小,在框架內(nèi)選取主色更加穩(wěn)妥,效率更高。

方法二不足:既然是在框架內(nèi)選擇顏色,那么我們的顏色就被「框」了起來(lái),在有限的范圍內(nèi)選取主色增加了色彩相似的可能,品牌特色會(huì)降低;其次就是我們?cè)谒鸭渌a(chǎn)品主色的時(shí)候可能會(huì)因?yàn)橐恍┰驅(qū)е律畹漠a(chǎn)生,但都是在可控范圍內(nèi)。

所以,在設(shè)定主色的時(shí)候,可以將“方法”和“感性”相結(jié)合;靈活運(yùn)用情緒板或?qū)Ρ鹊确椒?,在此基礎(chǔ)可以加上自己的想法。比如:主色的色相可以加大(偏紫色,增加神秘感);也可以減小色相(顏色偏青,使顏色更年輕有活力)等等。

色彩延展

主色確定之后,我們要尋找一些不同的輔助色來(lái)和主色搭配。

主體顏色以藍(lán)色為基準(zhǔn),通過(guò)調(diào)試互補(bǔ)色、鄰近色等方法獲得相應(yīng)的輔助色。輔助色的運(yùn)用,可以更好地突出頁(yè)面中的主題,讓頁(yè)面更有層次感,也使得頁(yè)面色彩更豐富,避免了顏色單一的問(wèn)題。

輔助色

選出的主色「#1482ff」以此為主導(dǎo),色相H數(shù)值±15 (360/24) 可以得出24色相環(huán)的全部顏色。從中我們可以找出互補(bǔ)色、鄰近色等。

也可以通過(guò):http://color.adobe.com/這個(gè)網(wǎng)站來(lái)輔助完成這項(xiàng)工作。

APP改版筆記--顏色篇

APP改版筆記--顏色篇

按照自己的主色建立了色相環(huán),并從中找出了互補(bǔ)色和鄰近色,我們就擁有了新的六種顏色可選擇。

我們需要從中挑選出合適的顏色優(yōu)化并作為輔色,以應(yīng)對(duì)界面中不同的位置和細(xì)節(jié)。

最終選取的輔助色為:

APP改版筆記--顏色篇

中性輔助色

中性輔助色常常用在字體或是線框顏色上。設(shè)計(jì)中應(yīng)極力避免使用純黑。我們可以在純黑色的基礎(chǔ)上,在明度數(shù)值處加上相等數(shù)值,得出四種灰色來(lái)作為備選。

APP改版筆記--顏色篇

在設(shè)計(jì)時(shí),為了避免選取的中性輔助色的色彩在頁(yè)面中過(guò)于單一,我們可以脫離其范疇,適當(dāng)加入色相和飽和度,來(lái)作為新的輔助色備選。

比如:色相為主色色相212,飽和度可以相加統(tǒng)一數(shù)值20。

APP改版筆記--顏色篇

之后,我們要結(jié)合其他輔助色,給APP中的主要文字、次要文字、可交互文字、錯(cuò)誤信息文字、禁用文字等分別賦予上對(duì)應(yīng)的顏色。比如說(shuō):主要文字可以用主色或者是明度為20的深色;禁用文字可以用明度為80的淺色灰等等。

建立顏色庫(kù)

我們可以在色盤(pán)的24種顏色中,選擇幾種頁(yè)面中會(huì)用到的顏色,來(lái)進(jìn)行顏色庫(kù)的建立,這里我選了12種顏色。

APP改版筆記--顏色篇

可以通過(guò)網(wǎng)站:https://coolors.co輸入選擇的顏色數(shù)值,會(huì)自動(dòng)幫助設(shè)計(jì)師建立色板;去掉過(guò)深的顏色,得到最終色板。

也可以在Material Design官網(wǎng)中,輸入顏色進(jìn)行色板的制作。

APP改版筆記--顏色篇

顏色整理

主要顏色

APP改版筆記--顏色篇

icon涉及顏色

APP改版筆記--顏色篇

背景涉及顏色

APP改版筆記--顏色篇

字體涉及顏色

APP改版筆記--顏色篇

個(gè)人認(rèn)為,建立顏色系統(tǒng)或是設(shè)計(jì)規(guī)范是為了讓設(shè)計(jì)師更快、更高效的完成特定任務(wù)。它為設(shè)計(jì)師制定了一個(gè)范圍,一個(gè)標(biāo)準(zhǔn),大大提高了設(shè)計(jì)師的工作效率。但往往有些時(shí)候,設(shè)計(jì)師自身的直觀感覺(jué)也非常重要。在大體框架內(nèi),做設(shè)計(jì)時(shí)也可加入些自己的不同想法。

 

作者:FLYXMF,微信公眾號(hào):Fly Lab

本文由 @FLYXMF 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 非常有收獲,謝謝!

    來(lái)自廣東 回復(fù)
  2. 每一篇文章都很有收獲

    來(lái)自河南 回復(fù)
  3. 相當(dāng)感激 收益頗豐,不過(guò)如果能解釋下為什么最后通過(guò)色相的24色色環(huán)得到了互補(bǔ)色和類(lèi)似色后,最后選點(diǎn)的輔助色是怎樣微調(diào)得到的就好了。

    來(lái)自重慶 回復(fù)