APP改版筆記:顏色篇

FLY
3 評論 10385 瀏覽 118 收藏 15 分鐘

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

前期分析

1. 產(chǎn)品用色

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

主色的修改可以使APP在視覺上有一個非常大的變動,對老用戶的認知會有一個很大的改變;在此基礎(chǔ)上更新輔助色等,從而確立和優(yōu)化新的品牌顏色DNA;在未來改版時也有據(jù)可依。

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

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

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

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

APP改版筆記--顏色篇

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

APP改版筆記--顏色篇

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

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

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

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

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

尋找主色

方法一:情緒板選取

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

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

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

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

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

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

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

視覺物化:金幣鈔票、機器人、跑車、建筑、咖啡廳、紋理、天空、海洋、云彩

APP改版筆記--顏色篇

第二組:融合、連接、信賴

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

視覺物化:水滴、細胞、圓形、鏈條、繩、握手、對話、朋友

APP改版筆記--顏色篇

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

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

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

APP改版筆記--顏色篇

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

APP改版筆記--顏色篇

APP改版筆記--顏色篇

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

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

APP改版筆記--顏色篇

APP改版筆記--顏色篇

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

APP改版筆記--顏色篇

(3)舊版主色

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

(4)新版主色

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

(5)其他方法

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

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

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

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

APP改版筆記--顏色篇

(6)方法總結(jié)

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

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

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

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

方法二不足:既然是在框架內(nèi)選擇顏色,那么我們的顏色就被「框」了起來,在有限的范圍內(nèi)選取主色增加了色彩相似的可能,品牌特色會降低;其次就是我們在搜集其他產(chǎn)品主色的時候可能會因為一些原因?qū)е律畹漠a(chǎn)生,但都是在可控范圍內(nèi)。

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

色彩延展

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

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

輔助色

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

也可以通過:http://color.adobe.com/這個網(wǎng)站來輔助完成這項工作。

APP改版筆記--顏色篇

APP改版筆記--顏色篇

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

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

最終選取的輔助色為:

APP改版筆記--顏色篇

中性輔助色

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

APP改版筆記--顏色篇

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

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

APP改版筆記--顏色篇

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

建立顏色庫

我們可以在色盤的24種顏色中,選擇幾種頁面中會用到的顏色,來進行顏色庫的建立,這里我選了12種顏色。

APP改版筆記--顏色篇

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

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

APP改版筆記--顏色篇

顏色整理

主要顏色

APP改版筆記--顏色篇

icon涉及顏色

APP改版筆記--顏色篇

背景涉及顏色

APP改版筆記--顏色篇

字體涉及顏色

APP改版筆記--顏色篇

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

 

作者:FLYXMF,微信公眾號:Fly Lab

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

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

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

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

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

    來自重慶 回復(fù)