今天和大家聊聊顏色系統(tǒng)，在做一套新產(chǎn)品的色彩體系時(shí)，大家常常需要解決一個(gè)問題，那就是顏色梯度，也就是色卡制作。如何從品牌色開始建立一套科學(xué)的調(diào)色板？這篇文章嘗試解決這個(gè)問題。

無論你是一位需要從 0-1 制定色彩系統(tǒng)的品牌設(shè)計(jì)師，還是在一個(gè)已有設(shè)計(jì)系統(tǒng)的產(chǎn)品設(shè)計(jì)師，都需要掌握如何更加專業(yè)的創(chuàng)建設(shè)計(jì)系統(tǒng)中的顏色梯度。

我們?cè)谄匠５?UI 設(shè)計(jì)工作中，經(jīng)常需要通過 AE 來做一些小動(dòng)效，比如生長(zhǎng)、毛玻璃等效果，這樣有利于刺激用戶去點(diǎn)擊，增強(qiáng)趣味感，從而提升轉(zhuǎn)化，助力業(yè)務(wù)達(dá)成等目標(biāo)。其中有一些動(dòng)效技巧經(jīng)常能用到，也是我經(jīng)常反復(fù)去查看的知識(shí)點(diǎn)，在此整理了一波分享給大家，希望能幫助大家在工作中更加得心應(yīng)手。

小荷健康用戶等級(jí)體系設(shè)計(jì)項(xiàng)目總結(jié)復(fù)盤

作者：許波bobobo來源：站酷網(wǎng)



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

1.亮色與重色的比例

我們?cè)谠O(shè)定界面風(fēng)格的時(shí)候，少不了顏色的配比，但顏色一定是講究平衡的，其中一個(gè)最重要的平衡就是明暗的平衡，如果你的界面全屏都是很亮的顏色，那就會(huì)導(dǎo)致非常的刺眼，比如像瑞文同學(xué)的這個(gè)顏色設(shè)定：

就是過于明亮了，其實(shí)當(dāng)我們的顏色過于明亮?xí)r，最常用的一種方式就是，直接用黑色去壓住亮色，像下面這組圖標(biāo)的做法一樣，減少亮部顏色，直接增加黑色：

這樣就不會(huì)那么刺眼了，當(dāng)我們明白了底層原理之后，再去優(yōu)化配色，我們看前后的變化：

這樣就會(huì)比之前舒服很多，當(dāng)然，也可以試試頭圖變成黑色，按鈕變成綠色，把重色面積繼續(xù)加大，但不管哪一種，都會(huì)比之前全是亮色要好很多！

2.這個(gè)改動(dòng)可愛了太多

小A同學(xué)是一個(gè)非常有潛力的同學(xué)，但是最開始交上來的吉祥物作業(yè)，也不是很理想，效果如下：

話不多說，我們就改動(dòng)一個(gè)點(diǎn)，五官緊湊，看看前后效果對(duì)比：

可愛的程度完全不在一個(gè)檔次，我們?cè)倏纯葱同學(xué)后面的延展效果：

比之前強(qiáng)了很多很多倍，就是因?yàn)橐粋€(gè)五官緊湊。

3.對(duì)顏色的敏銳度

我們?cè)谧鼍毩?xí)的時(shí)候，很重要的一個(gè)鍛煉點(diǎn)就是視覺敏銳度，能夠敏銳的發(fā)現(xiàn)哪里不舒服，這個(gè)真的很重要。

而視覺敏銳度里面就有一個(gè)維度是顏色，比如我們?cè)诳聪旅嬉欢堤峭瑢W(xué)做的質(zhì)感圖標(biāo)作業(yè)：

我們應(yīng)該快速的看出，第一個(gè)圖標(biāo)顏色不是很和諧，沒有后面兩個(gè)那么舒服，主要是那個(gè)藍(lán)色有點(diǎn)臟，我們看優(yōu)化后的三個(gè)圖標(biāo)：

就比之前要統(tǒng)一舒服很多。

當(dāng)我們的練習(xí)達(dá)到一定量時(shí)，敏銳度自然就會(huì)提高很多，所以一定要多去練習(xí)，把敏銳度這一塊提高上來。

4.綠色好難配??！

這是潘子同學(xué)的疑惑點(diǎn)：

他感覺綠色好難啊，第一次交上來的作業(yè)如下：

先不說造型問題，就光說顏色，就有點(diǎn)單薄，也有點(diǎn)太亮了，還有就是顏色比較正。

其實(shí)我們?cè)谂渚G色的時(shí)候，只要把綠色加一點(diǎn)藍(lán)色，或者加一點(diǎn)黃色就會(huì)讓顏色好看很多。

后來潘子同學(xué)把顏色進(jìn)行了優(yōu)化：

這樣就比之前還要多了。

還有包括檸檬同學(xué)用的綠色:

也是比較好看的。

這回再用綠色的時(shí)候，大家清楚怎么好看了吧！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。 

作者：菜心輕量文    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司               

動(dòng)效是用戶體驗(yàn)的重要組成部分，也是產(chǎn)品調(diào)性的重要體現(xiàn)。如今動(dòng)效設(shè)計(jì)也有了更多的解決方案，如Framer、Principle、Flinto、Protopie等，這些軟件在制作交互原型時(shí)，確實(shí)有更輕量便捷的優(yōu)勢(shì)，但效果也有一定的局限性，或者要求使用者有代碼基礎(chǔ)，比較適合有針對(duì)性的人群。而After Effects作為動(dòng)效軟件的鼻祖，以其強(qiáng)大的兼容性、效果豐富性和清晰明了的圖層操作邏輯深得設(shè)計(jì)師們喜愛，不論是UI、運(yùn)營(yíng)還是多媒體類型的設(shè)計(jì)都能滿足，無疑是目前最具有普適性的動(dòng)效軟件。本文從AE的插件、操作以及落地三個(gè)方面，為大家整理了一波實(shí)用技巧，希望能幫助大家在工作中更加得心應(yīng)手。

——————————

Part 1. 便捷靈活-不容錯(cuò)過的精品插件

工欲善其事必先利其器，不論是AE還是其他軟件，好的插件都能配合軟件本身達(dá)到事半功倍的效果。這里介紹十款A(yù)E上不容錯(cuò)過的精品插件。

1.1 文件導(dǎo)入

AE與PS有很好的兼容性，PS的圖層以及各種樣式都能無偏差的導(dǎo)入到AE，但同樣是Adobe家族的AI，要導(dǎo)入AE卻特別麻煩，更不用說沒有血緣的Sketch了。偏偏AI和Sketch卻經(jīng)常需要和AE打交道，這時(shí)候以下兩款插件便應(yīng)運(yùn)而生。

Overlord：AI與AE互導(dǎo)

Overlord不僅可以實(shí)現(xiàn)AI導(dǎo)入AE，還能隨時(shí)從AE導(dǎo)回AI修改，這對(duì)本身不適合用于繪制圖形的AE來說，無疑是補(bǔ)上了一個(gè)短板。

最新的Overlord支持路徑、形狀、參數(shù)圖形、剪切關(guān)系、文本、甚至大部分的漸變參數(shù)都能無偏差互導(dǎo)，并且可以設(shè)置導(dǎo)成子圖層還是獨(dú)立圖層，可以說是非常方便了。

官網(wǎng)鏈接：https://www.battleaxe.co/overlord

AEUX：Sketch導(dǎo)入AE

如果說Overlord是AI和AE之間的一座橋梁，那AEUX就是Sketch和AE之間的一座橋梁。導(dǎo)入前在Sketch里將圖層整理好，導(dǎo)入AE后圖層關(guān)系也是一目了然。

官網(wǎng)鏈接：https://aeux.io/

1.2 使用過程

——————————

Motion Tools：常用功能合輯

如果說AE只能裝一款插件，那必然是Motion Tools了，它將很多常用操作整合到一個(gè)面板上，并且可以跳過繁瑣的常規(guī)操作。包括快速調(diào)整曲線、定位圖層錨點(diǎn)、克隆關(guān)鍵幀、制作回彈效果、錯(cuò)位圖層序列、生成多圖層空對(duì)象等。這里演示幾個(gè)常用功能。

快速調(diào)整速度緩動(dòng)曲線：

不用再通過輸入表達(dá)式，做出操控便捷又靈活的回彈效果：

錨點(diǎn)是元素變換時(shí)的基準(zhǔn)點(diǎn)，更改錨點(diǎn)也是高頻操作。Motion Tools不僅可以快速修改圖層錨點(diǎn)，并且支持多圖層批量操作：

官網(wǎng)鏈接：https://motiondesign.school/products/motion-tools/

Auto Crop：預(yù)合成裁切

新轉(zhuǎn)成的預(yù)合成尺寸總是占滿畫布，不方便做動(dòng)畫且干擾其他圖層選擇。手動(dòng)調(diào)節(jié)的話會(huì)影響元素的位置、位移等屬性，Auto Crop很好地解決了這個(gè)問題，能夠?qū)㈩A(yù)合成裁切至適合當(dāng)前元素的尺寸。

官網(wǎng)鏈接：https://aescripts.com/auto-crop

Auto Sway：飄動(dòng)效果

Auto Sway能夠很便捷的制作頭發(fā)或者服裝飄動(dòng)的效果，在日常運(yùn)營(yíng)設(shè)計(jì)中，讓你的人物快速變得生動(dòng)靈活起來。

官網(wǎng)鏈接：https://aescripts.com/autosway

Trapcode Particular：粒子效果

AE自身帶有粒子效果器，點(diǎn)擊“效果 → 模擬 → CC Particle World ”就是。但更強(qiáng)大更為人所熟知的卻是這款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。

很多運(yùn)營(yíng)或游戲頁面中的氛圍元素，例如落花、飄雪、灰燼、火花、彩帶等，Particular都可以快速做出。

除了運(yùn)營(yíng)設(shè)計(jì)，粒子在很多UI場(chǎng)景也同樣適用，例如結(jié)合形變或路徑做的飄散和拖尾效果，就可以用在充電或掃描等場(chǎng)景。

官網(wǎng)鏈接：https://www.maxon.net/zh/red-giant-complete/trapcode-suite

1.3 高品質(zhì)導(dǎo)出

Bodymovin：Lottie格式輸出

Bodymovin能夠?qū)E中矢量圖形做成的動(dòng)效導(dǎo)成json文件，變成一串純粹的代碼，再被Lottie渲染還原出來。這就讓“尺寸”和“幀率”擺脫了以往體積的束縛，導(dǎo)出的即使是又高清又流暢的大圖，也可以保持很小的體積。

QQ最新的Q彈超清表情，就是用Lottie實(shí)現(xiàn)的，大家可以在手機(jī)QQ上親自體驗(yàn)這種爽滑Q彈的感覺哦。

官網(wǎng)鏈接：https://aescripts.com/bodymovin/

PAG：完整的動(dòng)畫工作流

PAG（Portable Animated Graphics ）是一套完整的動(dòng)畫工作流，在動(dòng)畫導(dǎo)出與渲染方面和Lottie相似，但更進(jìn)一步的是，PAG還引入了視頻序列幀結(jié)合矢量的混合導(dǎo)出能力，這就保證了PAG能支持AE的所有特性和效果。

另外PAG還提供完善的桌面預(yù)覽工具、性能監(jiān)測(cè)可視化、運(yùn)行時(shí)可編輯等特點(diǎn)，能很好的打通設(shè)計(jì)與開發(fā)之間，從創(chuàng)作到素材交付上線的流程。

官網(wǎng)鏈接：https://pag.io/

Gifgun：導(dǎo)出小巧高清的Gif圖

Gif格式因?yàn)椴恢С职胪该鲄^(qū)域且容易有鋸齒，如今的實(shí)際開發(fā)中已經(jīng)有了Apng、Lottie等很多更好的替代方案，但在網(wǎng)頁瀏覽、文檔編輯等許多場(chǎng)景，還是需要使用Gif來演示動(dòng)效或者作為封面縮略圖。AE從2014版本后就不支持Gif導(dǎo)出了，而Gifgun就是一款能很好地導(dǎo)出Gif格式的插件。

Gifgun導(dǎo)出的格式小巧清晰，本文所有動(dòng)圖就是用這款插件導(dǎo)出，真香。

官網(wǎng)鏈接：https://aescripts.com/gifgun/

Aftercodecs：導(dǎo)出小巧高清的MP4

AE本身不支持直接導(dǎo)出MP4，很多時(shí)候只能先導(dǎo)出體積龐大的MOV格式，再通過第三方軟件轉(zhuǎn)成MP4，操作繁瑣不說，還損失畫質(zhì)。

Adobe自家的多媒體編碼軟件Media Encoder，也可以完美導(dǎo)出MP4格式，不過這款軟件本身體積較大，每次打開都要運(yùn)行很久。

這里推薦使用更實(shí)用的MP4導(dǎo)出軟件 — Aftercodecs。安裝后在輸出模塊設(shè)置里，就能找到對(duì)應(yīng)的導(dǎo)出項(xiàng)了，并且導(dǎo)出的MP4也是小巧高清的。

官網(wǎng)鏈接：https://aescripts.com/aftercodecs/

Part 2. 高效操作-效率翻倍的小技巧和快捷鍵

2.1 實(shí)用小技巧

小技巧這部分，整理了AE高頻操作經(jīng)常會(huì)遇見的一些問題，以及對(duì)應(yīng)比較高效的解決方案。

用空對(duì)象調(diào)整元素

當(dāng)我們想調(diào)整的元素已經(jīng)打上過關(guān)鍵幀，這時(shí)直接調(diào)整元素的位置或縮放屬性，就會(huì)影響到原本的效果，使用空對(duì)象就可以解決這一問題。

整體拉伸關(guān)鍵幀

關(guān)鍵幀比較多時(shí)，按住 “ Option ” 鍵，用鼠標(biāo)拖動(dòng)最末尾的關(guān)鍵幀，可以對(duì)所選關(guān)鍵幀進(jìn)行整體等比拉伸，并且支持多圖層同時(shí)操作。

快速定位圖層中心錨點(diǎn)

新建形狀層的定位錨點(diǎn)總是不對(duì)齊圖層的中心，這在做一些帶縮放或旋轉(zhuǎn)屬性的動(dòng)畫時(shí)就特別不方便，按住“Command”雙擊“平移錨點(diǎn)工具”，即可使圖層錨點(diǎn)快速對(duì)位到圖層中心。

還有更直接的方法，就是在“首選項(xiàng)”里將“在新形狀圖層上居中放置錨點(diǎn)”打上勾，以后新建的形狀層錨點(diǎn)都會(huì)自動(dòng)對(duì)齊圖層中心啦。

中英文AE快速切換

AE的很多插件和表達(dá)式對(duì)中文版本不兼容，包括很多教程也都是國(guó)外案例，所以其實(shí)直接用英文版的AE是最好的。但是難免也有跟我一樣看見英文界面就抓瞎的同學(xué)，平時(shí)還是習(xí)慣用中文版，有需要時(shí)才換成英文版。這里介紹一種AE快速切換中英文的方法，對(duì)2018以上的版本都適用。

以macOS系統(tǒng)為例，在以下路徑找到：

前往 \ 電腦 \ Macintosh HD \ 資源庫 \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml

將“application.xml”這個(gè)文件用“文本編輯”打開，然后按“Command + F”使用查找命令，將“zh_CN”文本替換為“en_US”，保存后重啟AE就是英文版了。

Windows也是同理，對(duì)應(yīng)路徑為：

C: \ Program Files \ Adobe \ Adobe After Effects CC \ Support Files \ AMT \ application.xml

然后將“application.xml”這個(gè)文件用“記事本”打開，同樣的查找“zh_CN”后替換“en_US”就好。

之后可以將“application.xml”文件分別存一份“zh_CN”中文和“en_US”英文的版本，下回再要切換時(shí)，直接將對(duì)應(yīng)的“application.xml”文件復(fù)制到原路徑替換即可。

視頻素材循環(huán)

新置入一段想要循環(huán)的視頻素材時(shí)，很多人習(xí)慣將素材復(fù)制多次，或者通過時(shí)間重映射打上關(guān)鍵幀后在添加循環(huán)表達(dá)式。其實(shí)并不需要這么麻煩，在項(xiàng)目窗口右鍵對(duì)應(yīng)的素材，選擇“解釋素材 → 主要”，在彈出窗口直接就可以設(shè)置素材循環(huán)次數(shù)。

2.2 高效快捷鍵

雖然AE的全部快捷鍵可以寫滿長(zhǎng)長(zhǎng)一串列表，但在精不在多。實(shí)際使用時(shí)，其實(shí)只要記住一些常用的關(guān)鍵快捷鍵，就已經(jīng)可以效率翻倍，享受“鍵步如飛”的感覺了。

以最常用的“添加關(guān)鍵幀”為例，在不使用快捷鍵的前提下，想要給對(duì)象添加一個(gè)“位置”關(guān)鍵幀，需要至少3個(gè)步驟：

而使用快捷鍵 “ Option+Shift+P ”，一步即可完成，并且不會(huì)展開不相關(guān)的屬性：

這對(duì)于一個(gè)工程里需要用到成百上千次的k幀操作來說，著實(shí)可以省下不少時(shí)間，可以說是不得不用的一個(gè)快捷操作。

秉持在精不在多的原則，整理出以下一些高效又常用的快捷鍵，親測(cè)好用哦！

因?yàn)樽髡呤荕acOS系統(tǒng)，所以下文中提到的 Option 可以對(duì)應(yīng) Windows 的 Alt ； Command 對(duì)應(yīng) Windows 的 Control 。

五大基礎(chǔ)變換屬性

在對(duì)應(yīng)圖層使用這五個(gè)快捷鍵，即可快速展開或收起對(duì)應(yīng)屬性。

位置：P（Position）

縮放：S（Scale）

旋轉(zhuǎn)：R（Rotation）

不透明度：T（Transparency）

錨點(diǎn)：A（Anchor）

常用工具選擇

選擇工具：V

形狀工具：Q

鋼筆工具：P

攝像機(jī)工具：C

關(guān)鍵幀操作

快速添加關(guān)鍵幀：Option + Shift + “ * ”（ * = 對(duì)應(yīng)屬性快捷鍵）

向右移動(dòng)關(guān)鍵幀一幀：Option + 右箭頭

向左移動(dòng)關(guān)鍵幀一幀：Option + 左箭頭

向右移動(dòng)關(guān)鍵幀十幀：Option + Shift + 右箭頭

向左移動(dòng)關(guān)鍵幀十幀：Option + Shift + 左箭頭

緩動(dòng)關(guān)鍵幀：F9

時(shí)間指針操作

定位到上一可見關(guān)鍵幀：J

定位到下一可見關(guān)鍵幀：K

定位到圖層入點(diǎn)：I

定位到圖層出點(diǎn)：O

設(shè)置當(dāng)前為工作區(qū)開始：B

設(shè)置當(dāng)前為工作區(qū)結(jié)束： N

圖層操作

將圖層拆分 ：Shift + Command + D

裁去時(shí)間線左側(cè)圖層：Option + [

裁去時(shí)間線右側(cè)圖層：Option + ]

設(shè)置當(dāng)前為入點(diǎn)： [

設(shè)置當(dāng)前為出點(diǎn)： ]

復(fù)制圖層：Command + D

其他常用操作

展開/收起帶關(guān)鍵幀的屬性：U

展開/收起所有屬性：UU

展開/收起遮罩屬性：M

展開/收起音頻屬性：L

轉(zhuǎn)為預(yù)合成：Shift + Command + C

圖像自適應(yīng)合成寬高：Shift + Option + F

After Effects官方快捷鍵大全：https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/keyboard-shortcuts-reference.ug.html

Part 3 .實(shí)際落地-動(dòng)效輸出與標(biāo)注

設(shè)計(jì)再好的動(dòng)效如果不能實(shí)際落地，那一切也只是徒勞，所以動(dòng)效輸出在對(duì)接開發(fā)時(shí)非常關(guān)鍵。按照輸出和實(shí)現(xiàn)的方式不同，我們可以將動(dòng)效分為兩種類型，一種是播放型動(dòng)效，一種是交互型動(dòng)效。

3.1 播放型動(dòng)效輸出

播放型動(dòng)效是指在輸出時(shí)效果就已經(jīng)固定的動(dòng)效，滿足觸發(fā)條件后播放出來，過程中并不會(huì)有影響效果的元素。

例如常見的APP底部導(dǎo)航點(diǎn)擊效果，icon動(dòng)效在用戶點(diǎn)擊時(shí)觸發(fā)播放，這個(gè)效果在輸出時(shí)就是固定的，不受任何其他因素影響，可以由設(shè)計(jì)師直接導(dǎo)出。

播放型動(dòng)效有以下幾種比較常見的輸出格式：

Gif、Apng、Webp本質(zhì)上都是將位圖進(jìn)行壓縮和轉(zhuǎn)換，而Lottie則是基于代碼層面的動(dòng)畫渲染，PAG則結(jié)合了兩者的特性。目前一般使用Apng、Lottie、和PAG就已經(jīng)可以覆蓋大部分的輸出場(chǎng)景，是可以優(yōu)先考慮的動(dòng)圖格式。

3.2 交互型動(dòng)效標(biāo)注

交互型動(dòng)效是指變換內(nèi)容跟我們的交互操作相關(guān)聯(lián)的動(dòng)效，并且包含無法由設(shè)計(jì)師直接導(dǎo)出的元素，比如用戶的頭像、名稱等。

比如這個(gè)支付面板切換的效果，變換的元素中包含了用戶的余額和綁卡信息，這些信息是無法由設(shè)計(jì)師輸出的。

這種動(dòng)效需要開發(fā)在代碼側(cè)還原。如果只是輸出視頻demo，開發(fā)同學(xué)很難將其中的細(xì)節(jié)（例如時(shí)間出入點(diǎn)、曲線速率等）還原出來。這就需要設(shè)計(jì)師有一份清晰的標(biāo)注文檔，將動(dòng)效的細(xì)節(jié)參數(shù)跟開發(fā)更好的明確下來。

一份規(guī)范的動(dòng)效標(biāo)注文檔，至少應(yīng)該包含以下幾個(gè)方面，

觸發(fā)：在什么條件下觸發(fā)動(dòng)效，例如點(diǎn)擊、雙擊、滑動(dòng)、長(zhǎng)按等；

對(duì)象：發(fā)生變換的對(duì)象，例如按鈕、列表、文字等；

屬性：具體變換的屬性，例如位移、縮放、不透明度等；

參數(shù)：換化屬性的具體參數(shù)，例如不透明度值從0到1；

時(shí)長(zhǎng)：變換的起始時(shí)間點(diǎn)、持續(xù)時(shí)間；

曲線：變換的速率曲線，描述在固定的時(shí)長(zhǎng)范圍內(nèi)，速度是如何變化的；

以上圖的支付面板首次切換過程為例，我們的標(biāo)注文檔是這樣的：

第一步定義好頁面的起始和結(jié)束狀態(tài)，并標(biāo)明動(dòng)效元素

第二步則是將各元素的運(yùn)動(dòng)細(xì)節(jié)用具體參數(shù)描述清楚

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。 



作者：騰訊ISUX團(tuán)隊(duì)    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

通常我們理解圖標(biāo)設(shè)計(jì)的含義，是將某個(gè)概念轉(zhuǎn)換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。隨著扁平化設(shè)計(jì)風(fēng)格的普及，圖標(biāo)的風(fēng)格越來越簡(jiǎn)約，看似簡(jiǎn)單的圖形，實(shí)際要準(zhǔn)確的表達(dá)含義，也是需要注意很多細(xì)節(jié)的，在如今大同小異的圖標(biāo)中，如何讓你設(shè)計(jì)出的圖標(biāo)具有說服力也是一門學(xué)問，今天就給大家全面的剖析一下圖標(biāo)的知識(shí)，讓你做出的圖標(biāo)有理有據(jù)。

目錄

1、圖標(biāo)的定義及分類

2、圖標(biāo)的設(shè)計(jì)規(guī)范

3、圖標(biāo)的性格走向

4、圖標(biāo)的評(píng)判標(biāo)準(zhǔn)

5、總結(jié)

一、圖標(biāo)的定義及分類

1、圖標(biāo)的定義

圖標(biāo)是具有高度概括性的、用于視覺信息傳達(dá)的圖像。圖標(biāo)常常可以傳達(dá)出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內(nèi)容和信息。

在數(shù)字設(shè)計(jì)領(lǐng)域，圖標(biāo)作為網(wǎng)頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎(chǔ)設(shè)施，也是達(dá)成人機(jī)交互這一目標(biāo)的有效途徑。

2、圖標(biāo)類型（基于功能劃分）

2-1釋意性圖標(biāo)：

釋意性圖標(biāo)是用來解釋和闡明特定功能或者內(nèi)容類別的視覺標(biāo)記。它并不是一定被點(diǎn)擊可交互的UI元素，在很多時(shí)候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會(huì)借助這些圖標(biāo)來獲取信息。不過有時(shí)候圖標(biāo)表達(dá)的含義可能還不夠完整或者清晰，所以會(huì)將圖標(biāo)和文案搭配起來一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標(biāo)一共可以分為以下三類：

2-1-1純圖標(biāo)：

例如火球買手APP中的店家“特定標(biāo)簽”，以及圖文展示下的“觀看數(shù)量圖標(biāo)”與“收藏圖標(biāo)”，它們并不需要用文字去解釋，用戶也知道它表達(dá)的是什么。

2-1-2圖文結(jié)合：

例如造作APP中的“購(gòu)物車圖標(biāo)”與“收貨地址圖標(biāo)”，為了讓用戶能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會(huì)配有文字提示，這樣就能大大的降低誤讀的可能性。

2-1-3純圖標(biāo)（圖標(biāo)內(nèi)含文字）：

例如開眼APP中視頻封面左上角“開眼精選圖標(biāo)”，它把圖標(biāo)與重要文字結(jié)合在一起展示給用戶，看起來不僅十分具有個(gè)性，而且用戶對(duì)其理解性也非常強(qiáng)。

2-2交互性圖標(biāo)：

交互圖標(biāo)的最大意義在于可以引導(dǎo)用戶進(jìn)行交互行為，是在產(chǎn)品中不可或缺的組成部分。它們可以在用戶不同的操作手勢(shì)下幫助用戶執(zhí)行不同的交互過程，這種類型圖標(biāo)也是APP中最常見的，常見的交互性圖標(biāo)如：搜索、底部標(biāo)簽、返回、點(diǎn)贊、收藏、掃一掃等。

2-3裝飾性圖標(biāo)：

裝飾性圖標(biāo)僅僅是用來提升整個(gè)界面的視覺體驗(yàn)，它并不具備任何功能性。這類圖標(biāo)往往是為了迎合用戶的偏好與期望，通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個(gè)用戶體驗(yàn)更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車圖標(biāo)”。

3、圖標(biāo)類型（基于基礎(chǔ)樣式+表現(xiàn)手法）

圖標(biāo)基于基礎(chǔ)樣式（線、面、線面結(jié)合）+表現(xiàn)手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類型，每種類型的展示方式也都各有不同。

3-1線性圖標(biāo)（6種）

線性圖標(biāo)通過線來塑造輪廓，在界面中App的圖標(biāo)尺寸并不大，所以如果線過于復(fù)雜，在小面積中過多的線會(huì)對(duì)識(shí)別性產(chǎn)生較大的困擾。在圖標(biāo)設(shè)計(jì)中使用的線有粗細(xì)之分，常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2PX或者3PX，不同的線條粗細(xì)所帶來的視覺感受也不同，細(xì)線顯得精致，粗線視覺面積大，顯得厚重。

3-2面性圖標(biāo)（6種）

面性圖標(biāo)是通過面來塑造形體的圖標(biāo)，采用了剪影的設(shè)計(jì)形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計(jì)感的差別。

3-3線面結(jié)合圖標(biāo)（6種）

線面結(jié)合圖標(biāo)相較單一的線性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計(jì)的角度上說，由于元素的多樣化，設(shè)計(jì)更容易獲得好的效果。相反，如果運(yùn)用不當(dāng)會(huì)顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過度是關(guān)鍵。

3-4擬物化圖標(biāo)

這類圖標(biāo)的特點(diǎn)是通過細(xì)節(jié)和光影還原現(xiàn)實(shí)物品的造型和質(zhì)感，能給用戶極強(qiáng)的代入感，用戶可通過對(duì)現(xiàn)實(shí)事物的聯(lián)想，快速領(lǐng)會(huì)圖標(biāo)表達(dá)的意圖。但是隨著 ICON 的發(fā)展，擬物圖標(biāo)也帶來了一些問題，因?yàn)橛脩絷P(guān)注的核心永遠(yuǎn)都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對(duì)用戶獲取信息的一種干擾，所以現(xiàn)在擬物化的圖標(biāo)很少運(yùn)用在APP界面之內(nèi)。

3-5輕質(zhì)感圖標(biāo)

相較于擬物風(fēng)格不會(huì)有太多復(fù)雜的視覺元素，層次簡(jiǎn)單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)，這類圖標(biāo)具有一定的立體感，能給人輕盈、簡(jiǎn)潔、精致的感覺，在界面設(shè)計(jì)中，一般在面積比較大的區(qū)域我們會(huì)使用加入輕質(zhì)感的圖標(biāo)。

二、圖標(biāo)設(shè)計(jì)規(guī)范

合理的遵循圖標(biāo)規(guī)范可以有利于設(shè)計(jì)師之間合作使用，指導(dǎo)設(shè)計(jì)師如何規(guī)范的去設(shè)計(jì)圖標(biāo)，以確保企業(yè)所有產(chǎn)品圖標(biāo)風(fēng)格的一致性和可用性達(dá)到統(tǒng)一，同時(shí)也是為了后續(xù)產(chǎn)品更新迭代有可參考的地方。

1、圖標(biāo)尺寸

為了保證圖標(biāo)的尺寸大小一致性，我們往往會(huì)建立基礎(chǔ)的網(wǎng)格尺寸來進(jìn)行繪制圖標(biāo)，常用的網(wǎng)格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設(shè)計(jì)中也會(huì)存在特殊的尺寸，例如谷歌在臺(tái)式機(jī)上設(shè)計(jì)圖標(biāo)，當(dāng)鼠標(biāo)和鍵盤是主要輸入方法時(shí)，就會(huì)使用密集布局，基礎(chǔ)網(wǎng)格就會(huì)縮小到20。

下面就以常用的24x24為大家展示：

網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時(shí)將保留其所需的比例和周圍的空白區(qū)域，同時(shí)還能夠很好的平衡圖標(biāo)的視覺重心。

*在使用常規(guī)圖標(biāo)時(shí)避免一部分在出血位。

*在使用多個(gè)元素的圖標(biāo)時(shí)，避免圖標(biāo)擁擠我們可以讓其部分出現(xiàn)在出血位，確保它們之間有足夠的空間。

2、圖標(biāo)的keyline

keyline由圓形，正方形，矩形，正交，三角形和對(duì)角線組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺上的穩(wěn)定變得更加容易，并有助于在設(shè)計(jì)相似比例的圖標(biāo)時(shí)有共同的參考準(zhǔn)則。

在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域?yàn)?）：

當(dāng)把圖標(biāo)畫在網(wǎng)格上時(shí)可以很好的規(guī)范圖標(biāo)，讓它們從整體的視覺上看著統(tǒng)一規(guī)范。

3、像素

3-1像素統(tǒng)一

在設(shè)計(jì)一整套系統(tǒng)化的圖標(biāo)時(shí)，我們一定要注意圖標(biāo)的像素大小，要運(yùn)用相同的網(wǎng)格尺寸設(shè)計(jì)相同線條粗細(xì)的圖標(biāo)，包括曲線，角度以及內(nèi)部和外部筆劃。這樣圖標(biāo)看起來才更統(tǒng)一，也有利于后期圖標(biāo)的迭代更新。

當(dāng)然，描邊像素的粗細(xì)并不是絕對(duì)的，如果我們要做一些密集型的圖標(biāo)時(shí)，可以考慮適當(dāng)?shù)目s小線的像素大小。如下，我們?cè)O(shè)定的系統(tǒng)圖標(biāo)線條粗細(xì)為3px，當(dāng)你用3px作用于指紋圖標(biāo)上時(shí)就會(huì)顯得非常擁擠，并且在視覺上比其余圖標(biāo)更重，這時(shí)我們就可以把它的線條像素降級(jí)，設(shè)定為2px。

3-2避免小數(shù)位

我們?cè)谟檬噶抗ぞ呃L制圖標(biāo)時(shí)，要仔細(xì)看好圖標(biāo)的網(wǎng)格尺寸和圖標(biāo)結(jié)構(gòu)尺寸，避免產(chǎn)生小數(shù)位。

4、圖標(biāo)的曲率

曲率簡(jiǎn)單來講就是圖標(biāo)中帶有圓角的邊角度數(shù)，只要是帶有圓角的矩形就都會(huì)有一定的曲率。在圖標(biāo)中曲率的呈現(xiàn)方式有兩種：外曲、內(nèi)曲。

外曲與內(nèi)曲并不一定同時(shí)存在，在特定情況下內(nèi)部結(jié)構(gòu)可以是直角（無曲率）。如下圖：當(dāng)內(nèi)部結(jié)構(gòu)都是圓角時(shí)會(huì)發(fā)現(xiàn)整個(gè)圖標(biāo)稍顯臃腫，這時(shí)我們可以把部分內(nèi)部圓角直接變?yōu)橹苯牵ㄒ部梢愿淖兦蚀笮。?，改變后就?huì)發(fā)現(xiàn)圖標(biāo)的整體結(jié)構(gòu)會(huì)顯得更加協(xié)調(diào)。需要注意的是如果一個(gè)圖標(biāo)做了這樣的處理，在同等情況下的圖標(biāo)都要做一樣的處理，不然圖標(biāo)會(huì)顯得非常雜亂，不統(tǒng)一。

5、傾斜角度

根據(jù)像素的網(wǎng)格線來設(shè)置兩條對(duì)角線，會(huì)讓你的圖標(biāo)看起來更清晰。在傾斜的角度選擇上，不要出現(xiàn)7.8°、14.2°這樣的奇怪?jǐn)?shù)值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規(guī)律的角度方案），這樣會(huì)使得整體的圖形變化顯得更加規(guī)律，也能夠滿足不同圖形的角度需求。

6、斷點(diǎn)形態(tài)

在做很多圖標(biāo)時(shí)都會(huì)用斷點(diǎn)的缺口來打破“全包邊圖標(biāo)”的沉悶感，使圖標(biāo)具有透氣性，如果想給圖標(biāo)添加斷點(diǎn)，那么要保證斷點(diǎn)的形態(tài)保持一致。

7、圖標(biāo)間距

確保圖標(biāo)內(nèi)每個(gè)細(xì)節(jié)和元素都有足夠的空間，圖標(biāo)的相鄰元素之間的空間在整個(gè)圖標(biāo)中不應(yīng)太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。

8、透視

如果在做圖標(biāo)時(shí)牽涉到了透視需求，那么就一定要保證圖標(biāo)的透視角度一致。

9、視覺重心

非中心對(duì)稱圖形物理對(duì)齊時(shí)視覺上會(huì)有偏離感，多個(gè)不同形狀的圖標(biāo)視覺重心并不在一條水平線上，需要微調(diào)才能保證平衡感。

10、圖形整潔

在圖形的處理上，不要留有多余的節(jié)點(diǎn)，干掉多余的節(jié)點(diǎn)，保持圖形的整潔。

11、命名

ICON命名要求較為嚴(yán)格，涉及到我們切圖給開發(fā)，所以我們命名爭(zhēng)取做對(duì)，且需嚴(yán)格遵守規(guī)則，正確的命名原則：類型_位置_功能_狀態(tài)_大小

三、圖標(biāo)的性格走向

每個(gè)App應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，同樣圖標(biāo)性格也應(yīng)當(dāng)與產(chǎn)品氣質(zhì)保持一致。圖標(biāo)性格一共分為了4個(gè)走向：粗曠（粗直）、活潑（粗圓）、商務(wù)（細(xì)直）、精致（細(xì)圓）。

1、粗曠類圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為直角。

粗曠類圖標(biāo)讓人看起來非常飽滿、剛正，它更多適用于男性、潮流、有格調(diào)類型等產(chǎn)品中。例如VSCO，它的底部標(biāo)簽欄圖標(biāo)全部采用了粗線條的直角設(shè)計(jì)。

2、活潑類圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為圓角。

活潑類圖標(biāo)讓人看起來十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產(chǎn)品中。例如閑魚，不管是在LOGO字體的處理還是APP內(nèi)部的圖標(biāo)處理，都是采用了線條較粗的圓角設(shè)計(jì)。

3、商務(wù)類圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較細(xì)、拐角為直角。

商務(wù)類圖標(biāo)讓人看起來十分規(guī)矩、嚴(yán)謹(jǐn)、值得信賴，它更多適用于新聞、政府、商務(wù)、工具等產(chǎn)品中。例如工具類的思維導(dǎo)圖APP，它的可操作按鈕都是商務(wù)類的圖標(biāo)。因?yàn)檫@類圖標(biāo)的特性，所以目前我們很少在移動(dòng)端上看到它，它更多適用于PC端的后臺(tái)界面中。

4、精致類圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較細(xì)、拐角為圓角。

精致類圖標(biāo)讓人看起來非常干凈、柔和、顯得高級(jí)感，它更多適用于旅游、奢侈品、藝術(shù)、領(lǐng)域垂直等產(chǎn)品中。例如airbnb，在APP應(yīng)用中大部分都采用了精致類圖標(biāo)。

四、圖標(biāo)的評(píng)判標(biāo)準(zhǔn)

當(dāng)圖標(biāo)設(shè)計(jì)完后，我們應(yīng)該如何去評(píng)判一個(gè)圖標(biāo)的好壞？很多設(shè)計(jì)師并沒有完整的評(píng)判體系，其實(shí)我們可以從這五個(gè)維度對(duì)圖標(biāo)進(jìn)行評(píng)判：識(shí)別性、圖標(biāo)氣質(zhì)、協(xié)調(diào)性、一致性、品牌調(diào)性。

1、識(shí)別性

圖標(biāo)最主要的用途就是輔助用戶理解信息，特別是對(duì)于當(dāng)圖標(biāo)單獨(dú)存在時(shí)，一定不能讓用戶產(chǎn)生疑慮。要想圖標(biāo)達(dá)到高識(shí)別，我們可以從這2個(gè)方向入手：大眾認(rèn)知隱喻、真實(shí)世界映射。

1-1 大眾認(rèn)知隱喻

在互聯(lián)網(wǎng)普及的今天，許多界面的隱喻圖標(biāo)已被廣大用戶熟知認(rèn)可，對(duì)于這類隱喻圖標(biāo)用戶不用思考身體就已做出反應(yīng)，我們?cè)谠O(shè)計(jì)圖標(biāo)時(shí)可以從隱喻圖標(biāo)中添加修改部分元素，從而形成新的圖標(biāo)，這樣既能保證圖標(biāo)的識(shí)別性，也能做出差異化。

1-2 真實(shí)世界映射

選擇真實(shí)世界中的物品映射，能使人下意識(shí)對(duì)圖標(biāo)的作用有近似預(yù)期，降低學(xué)習(xí)成本，提高識(shí)別度。

2、圖標(biāo)氣質(zhì)

每個(gè)App應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，而我們所做的圖標(biāo)就是要跟隨產(chǎn)品的氣質(zhì)。例如當(dāng)你要做一款二次元產(chǎn)品，你的圖標(biāo)氣質(zhì)就應(yīng)該偏活潑、可愛、萌、青春，而不是剛硬、嚴(yán)謹(jǐn)、規(guī)矩。

3、一致性

一致性是圖標(biāo)的基礎(chǔ)，我們?cè)诶L制整套圖標(biāo)時(shí)要確保它們的基礎(chǔ)屬性全部一致，細(xì)節(jié)統(tǒng)一，圖標(biāo)內(nèi)容的統(tǒng)一在視覺上也更加和諧美觀。圖標(biāo)是否具有一致性，就要從以下七個(gè)方向去評(píng)判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。

3-1 尺寸大?。壕W(wǎng)格大小是否統(tǒng)一、是否遵守圖標(biāo)的keyline規(guī)則。

3-2 圖形角度：是否遵循設(shè)定的角度規(guī)范（15°的增量用于傾斜角度）

3-3 拐角（曲率）：拐角的曲率是否統(tǒng)一，如果圖形太多且復(fù)雜，那么我們可以根據(jù)圖標(biāo)的特性去設(shè)定曲率的規(guī)則，例如可以設(shè)定當(dāng)邊角像素在1-2px時(shí)內(nèi)外曲率為2px；當(dāng)邊角像素在3px時(shí)內(nèi)外曲為2px，內(nèi)曲為1px；當(dāng)邊角像素大于或等于4px時(shí)，外曲為2px，內(nèi)部則為直角。

3-4 描邊：描邊大小是否一致。

3-5 間距：是否遵守間距規(guī)范。

3-6 透視：透視是否一致，避免在同一套圖標(biāo)中出現(xiàn)正視圖/側(cè)視圖混雜的情況。

3-7顏色：在圖標(biāo)的配色上要保持一致的規(guī)律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協(xié)調(diào)，避免出現(xiàn)飽和度、明度反差過大的配色。

4、協(xié)調(diào)性

一致性代表的是圖標(biāo)的基礎(chǔ)，而協(xié)調(diào)性則代表圖標(biāo)的整體狀態(tài)，協(xié)調(diào)性的呈現(xiàn)狀態(tài)是驗(yàn)證一致性是否合理的標(biāo)準(zhǔn)，當(dāng)協(xié)調(diào)性存在問題時(shí)，我們就要反過來查看一致性存在的誤區(qū)并給予修改。在圖標(biāo)的協(xié)調(diào)性上我們主要審視這三點(diǎn)：視覺大小、飽滿度、透析感。

4-1 視覺大小

視覺大小對(duì)標(biāo)的是一致性的尺寸大小與描邊大小，當(dāng)你發(fā)現(xiàn)圖標(biāo)視覺大小不對(duì)等時(shí)，你就要回過去查看你的網(wǎng)格與keyline是否運(yùn)用正確，確保正確后再查看你的圖標(biāo)是否按照keyline的規(guī)范繪制以及描邊大小是否一致。（同樣尺寸下的圖標(biāo)，從光感上來看描邊粗的圖標(biāo)視覺偏大）

4-2 飽滿度

飽滿度對(duì)標(biāo)的一致性的間距，當(dāng)你發(fā)現(xiàn)圖標(biāo)不夠飽滿時(shí)，你就要去查看你設(shè)定的間距值是否偏大，是否合理。

4-3 透析感

透析感簡(jiǎn)單來說就是留白區(qū)域。透析感對(duì)標(biāo)的也是一致性的間距，當(dāng)元素的描邊過大時(shí)，我們就要合理的設(shè)定間距的最小值，不然整個(gè)圖標(biāo)就顯得非常臃腫。

5、品牌調(diào)性

品牌調(diào)性是我們經(jīng)常提到的緯度，我們打開很多APP都會(huì)發(fā)現(xiàn)他們的圖標(biāo)設(shè)計(jì)都非常普通，沒有任何特色，過于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯(lián)動(dòng)性。其實(shí)我們可以結(jié)合品牌調(diào)性，在圖標(biāo)上做更多的聯(lián)動(dòng)、創(chuàng)新。

5-1品牌顏色

色彩是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。

當(dāng)然品牌顏色除了可以直接用外，還可以在提取時(shí)適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時(shí)，使得整個(gè)圖標(biāo)更加精致、有活力。

5-2品牌LOGO

提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標(biāo)一般運(yùn)用在APP首頁標(biāo)簽。因?yàn)槭醉撌茿PP中最重要的頁面，也是進(jìn)入APP默認(rèn)的頁面，把首頁圖標(biāo)替換成品牌LOGO，能反復(fù)加強(qiáng)了用戶對(duì)App的logo印象，這樣不但使App內(nèi)外形成了視覺聯(lián)系，同時(shí)也二次傳遞了品牌形象。例如大眾點(diǎn)評(píng)，它的首頁標(biāo)簽就用了品牌LOGO。

5-3品牌元素

我們可以在品牌中提取它識(shí)別性較強(qiáng)的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標(biāo)。

品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內(nèi)容強(qiáng)相關(guān)的元素。例如QQ音樂，就把音符作為首頁圖標(biāo)。

5-4品牌名稱

如果你的品牌還不為大眾所熟知，那么為了強(qiáng)化用戶對(duì)品牌名稱的認(rèn)知，可以把品牌名稱直接放入標(biāo)簽欄中。例如MONO，就把它的名稱分為四個(gè)字母分別放在了4個(gè)標(biāo)簽內(nèi)，需要注意的是這類圖標(biāo)不能單獨(dú)出現(xiàn)，因?yàn)樗旧聿痪邆湟龑?dǎo)含義，必須配合文字一起出現(xiàn)，這樣才能讓用戶能易理解。

5-5品牌性格

圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會(huì)讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國(guó)元素，整體看起來有股濃濃的古韻之風(fēng)。

5-6吉祥物 

如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產(chǎn)品的圖標(biāo)中。例如盒馬，它就把盒馬的吉祥物做了風(fēng)格化的處理，放于APP的首頁標(biāo)簽。

五、總結(jié)

設(shè)計(jì)師對(duì)自己做出的所有設(shè)計(jì)都必須要有理論支撐，圖標(biāo)也不例外，一套優(yōu)秀的圖標(biāo)是設(shè)計(jì)師不斷沉淀的結(jié)果?？赐瓯疚恼潞?，如果大家想要去練習(xí)圖標(biāo)，建議找大廠的圖標(biāo)放在keyline里臨摹，真的會(huì)讓你收獲不少。

資料提?。?/strong>