今天和大家聊聊顏色系統(tǒng)，在做一套新產(chǎn)品的色彩體系時(shí)，大家常常需要解決一個(gè)問(wèn)題，那就是顏色梯度，也就是色卡制作。如何從品牌色開(kāi)始建立一套科學(xué)的調(diào)色板？這篇文章嘗試解決這個(gè)問(wèn)題。
無(wú)論你是一位需要從 0-1 制定色彩系統(tǒng)的品牌設(shè)計(jì)師，還是在一個(gè)已有設(shè)計(jì)系統(tǒng)的產(chǎn)品設(shè)計(jì)師，都需要掌握如何更加專(zhuān)業(yè)的創(chuàng)建設(shè)計(jì)系統(tǒng)中的顏色梯度。
我們?cè)谄匠５?UI 設(shè)計(jì)工作中，經(jīng)常需要通過(guò) AE 來(lái)做一些小動(dòng)效，比如生長(zhǎng)、毛玻璃等效果，這樣有利于刺激用戶(hù)去點(diǎn)擊，增強(qiáng)趣味感，從而提升轉(zhuǎn)化，助力業(yè)務(wù)達(dá)成等目標(biāo)。其中有一些動(dòng)效技巧經(jīng)常能用到，也是我經(jīng)常反復(fù)去查看的知識(shí)點(diǎn)，在此整理了一波分享給大家，希望能幫助大家在工作中更加得心應(yīng)手。
作者：許波bobobo來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
我們?cè)谠O(shè)定界面風(fēng)格的時(shí)候，少不了顏色的配比，但顏色一定是講究平衡的，其中一個(gè)最重要的平衡就是明暗的平衡，如果你的界面全屏都是很亮的顏色，那就會(huì)導(dǎo)致非常的刺眼，比如像瑞文同學(xué)的這個(gè)顏色設(shè)定：
就是過(guò)于明亮了，其實(shí)當(dāng)我們的顏色過(guò)于明亮?xí)r，最常用的一種方式就是，直接用黑色去壓住亮色，像下面這組圖標(biāo)的做法一樣，減少亮部顏色，直接增加黑色：
這樣就不會(huì)那么刺眼了，當(dāng)我們明白了底層原理之后，再去優(yōu)化配色，我們看前后的變化：
這樣就會(huì)比之前舒服很多，當(dāng)然，也可以試試頭圖變成黑色，按鈕變成綠色，把重色面積繼續(xù)加大，但不管哪一種，都會(huì)比之前全是亮色要好很多！
小A同學(xué)是一個(gè)非常有潛力的同學(xué)，但是最開(kāi)始交上來(lái)的吉祥物作業(yè)，也不是很理想，效果如下：
話(huà)不多說(shuō)，我們就改動(dòng)一個(gè)點(diǎn)，五官緊湊，看看前后效果對(duì)比：
可愛(ài)的程度完全不在一個(gè)檔次，我們?cè)倏纯葱同學(xué)后面的延展效果：
比之前強(qiáng)了很多很多倍，就是因?yàn)橐粋€(gè)五官緊湊。
我們?cè)谧鼍毩?xí)的時(shí)候，很重要的一個(gè)鍛煉點(diǎn)就是視覺(jué)敏銳度，能夠敏銳的發(fā)現(xiàn)哪里不舒服，這個(gè)真的很重要。
而視覺(jué)敏銳度里面就有一個(gè)維度是顏色，比如我們?cè)诳聪旅嬉欢堤峭瑢W(xué)做的質(zhì)感圖標(biāo)作業(yè)：
我們應(yīng)該快速的看出，第一個(gè)圖標(biāo)顏色不是很和諧，沒(méi)有后面兩個(gè)那么舒服，主要是那個(gè)藍(lán)色有點(diǎn)臟，我們看優(yōu)化后的三個(gè)圖標(biāo)：
就比之前要統(tǒng)一舒服很多。
當(dāng)我們的練習(xí)達(dá)到一定量時(shí)，敏銳度自然就會(huì)提高很多，所以一定要多去練習(xí)，把敏銳度這一塊提高上來(lái)。
這是潘子同學(xué)的疑惑點(diǎn)：
他感覺(jué)綠色好難啊，第一次交上來(lái)的作業(yè)如下：
先不說(shuō)造型問(wèn)題，就光說(shuō)顏色，就有點(diǎn)單薄，也有點(diǎn)太亮了，還有就是顏色比較正。
其實(shí)我們?cè)谂渚G色的時(shí)候，只要把綠色加一點(diǎn)藍(lán)色，或者加一點(diǎn)黃色就會(huì)讓顏色好看很多。
后來(lái)潘子同學(xué)把顏色進(jìn)行了優(yōu)化：
這樣就比之前還要多了。
還有包括檸檬同學(xué)用的綠色:
也是比較好看的。
這回再用綠色的時(shí)候，大家清楚怎么好看了吧！
動(dòng)效是用戶(hù)體驗(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ì)師們喜愛(ài)，不論是UI、運(yùn)營(yíng)還是多媒體類(lèi)型的設(shè)計(jì)都能滿(mǎn)足，無(wú)疑是目前最具有普適性的動(dòng)效軟件。本文從AE的插件、操作以及落地三個(gè)方面，為大家整理了一波實(shí)用技巧，希望能幫助大家在工作中更加得心應(yīng)手。
工欲善其事必先利其器，不論是AE還是其他軟件，好的插件都能配合軟件本身達(dá)到事半功倍的效果。這里介紹十款A(yù)E上不容錯(cuò)過(guò)的精品插件。
AE與PS有很好的兼容性，PS的圖層以及各種樣式都能無(wú)偏差的導(dǎo)入到AE，但同樣是Adobe家族的AI，要導(dǎo)入AE卻特別麻煩，更不用說(shuō)沒(méi)有血緣的Sketch了。偏偏AI和Sketch卻經(jīng)常需要和AE打交道，這時(shí)候以下兩款插件便應(yīng)運(yùn)而生。
Overlord不僅可以實(shí)現(xiàn)AI導(dǎo)入AE，還能隨時(shí)從AE導(dǎo)回AI修改，這對(duì)本身不適合用于繪制圖形的AE來(lái)說(shuō)，無(wú)疑是補(bǔ)上了一個(gè)短板。
最新的Overlord支持路徑、形狀、參數(shù)圖形、剪切關(guān)系、文本、甚至大部分的漸變參數(shù)都能無(wú)偏差互導(dǎo)，并且可以設(shè)置導(dǎo)成子圖層還是獨(dú)立圖層，可以說(shuō)是非常方便了。
官網(wǎng)鏈接：https://www.battleaxe.co/overlord
如果說(shuō)Overlord是AI和AE之間的一座橋梁，那AEUX就是Sketch和AE之間的一座橋梁。導(dǎo)入前在Sketch里將圖層整理好，導(dǎo)入AE后圖層關(guān)系也是一目了然。
官網(wǎng)鏈接：https://aeux.io/
如果說(shuō)AE只能裝一款插件，那必然是Motion Tools了，它將很多常用操作整合到一個(gè)面板上，并且可以跳過(guò)繁瑣的常規(guī)操作。包括快速調(diào)整曲線(xiàn)、定位圖層錨點(diǎn)、克隆關(guān)鍵幀、制作回彈效果、錯(cuò)位圖層序列、生成多圖層空對(duì)象等。這里演示幾個(gè)常用功能。
快速調(diào)整速度緩動(dòng)曲線(xiàn)：
不用再通過(guò)輸入表達(dá)式，做出操控便捷又靈活的回彈效果：
錨點(diǎn)是元素變換時(shí)的基準(zhǔn)點(diǎn)，更改錨點(diǎn)也是高頻操作。Motion Tools不僅可以快速修改圖層錨點(diǎn)，并且支持多圖層批量操作：
官網(wǎng)鏈接：https://motiondesign.school/products/motion-tools/
新轉(zhuǎn)成的預(yù)合成尺寸總是占滿(mǎn)畫(huà)布，不方便做動(dòng)畫(huà)且干擾其他圖層選擇。手動(dòng)調(diào)節(jié)的話(huà)會(huì)影響元素的位置、位移等屬性，Auto Crop很好地解決了這個(gè)問(wèn)題，能夠?qū)㈩A(yù)合成裁切至適合當(dāng)前元素的尺寸。
官網(wǎng)鏈接：https://aescripts.com/auto-crop
Auto Sway能夠很便捷的制作頭發(fā)或者服裝飄動(dòng)的效果，在日常運(yùn)營(yíng)設(shè)計(jì)中，讓你的人物快速變得生動(dòng)靈活起來(lái)。
官網(wǎng)鏈接：https://aescripts.com/autosway
AE自身帶有粒子效果器，點(diǎn)擊“效果 → 模擬 → CC Particle World ”就是。但更強(qiáng)大更為人所熟知的卻是這款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。
很多運(yùn)營(yíng)或游戲頁(yè)面中的氛圍元素，例如落花、飄雪、灰燼、火花、彩帶等，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
Bodymovin能夠?qū)E中矢量圖形做成的動(dòng)效導(dǎo)成json文件，變成一串純粹的代碼，再被Lottie渲染還原出來(lái)。這就讓“尺寸”和“幀率”擺脫了以往體積的束縛，導(dǎo)出的即使是又高清又流暢的大圖，也可以保持很小的體積。
QQ最新的Q彈超清表情，就是用Lottie實(shí)現(xiàn)的，大家可以在手機(jī)QQ上親自體驗(yàn)這種爽滑Q彈的感覺(jué)哦。
官網(wǎng)鏈接：https://aescripts.com/bodymovin/
PAG（Portable Animated Graphics ）是一套完整的動(dòng)畫(huà)工作流，在動(dòng)畫(huà)導(dǎo)出與渲染方面和Lottie相似，但更進(jìn)一步的是，PAG還引入了視頻序列幀結(jié)合矢量的混合導(dǎo)出能力，這就保證了PAG能支持AE的所有特性和效果。
另外PAG還提供完善的桌面預(yù)覽工具、性能監(jiān)測(cè)可視化、運(yùn)行時(shí)可編輯等特點(diǎn)，能很好的打通設(shè)計(jì)與開(kāi)發(fā)之間，從創(chuàng)作到素材交付上線(xiàn)的流程。
官網(wǎng)鏈接：https://pag.io/
Gif格式因?yàn)椴恢С职胪该鲄^(qū)域且容易有鋸齒，如今的實(shí)際開(kāi)發(fā)中已經(jīng)有了Apng、Lottie等很多更好的替代方案，但在網(wǎng)頁(yè)瀏覽、文檔編輯等許多場(chǎng)景，還是需要使用Gif來(lái)演示動(dòng)效或者作為封面縮略圖。AE從2014版本后就不支持Gif導(dǎo)出了，而Gifgun就是一款能很好地導(dǎo)出Gif格式的插件。
Gifgun導(dǎo)出的格式小巧清晰，本文所有動(dòng)圖就是用這款插件導(dǎo)出，真香。
官網(wǎng)鏈接：https://aescripts.com/gifgun/
AE本身不支持直接導(dǎo)出MP4，很多時(shí)候只能先導(dǎo)出體積龐大的MOV格式，再通過(guò)第三方軟件轉(zhuǎn)成MP4，操作繁瑣不說(shuō)，還損失畫(huà)質(zhì)。
Adobe自家的多媒體編碼軟件Media Encoder，也可以完美導(dǎo)出MP4格式，不過(guò)這款軟件本身體積較大，每次打開(kāi)都要運(yùn)行很久。
這里推薦使用更實(shí)用的MP4導(dǎo)出軟件 — Aftercodecs。安裝后在輸出模塊設(shè)置里，就能找到對(duì)應(yīng)的導(dǎo)出項(xiàng)了，并且導(dǎo)出的MP4也是小巧高清的。
官網(wǎng)鏈接：https://aescripts.com/aftercodecs/
小技巧這部分，整理了AE高頻操作經(jīng)常會(huì)遇見(jiàn)的一些問(wèn)題，以及對(duì)應(yīng)比較高效的解決方案。
當(dāng)我們想調(diào)整的元素已經(jīng)打上過(guò)關(guān)鍵幀，這時(shí)直接調(diào)整元素的位置或縮放屬性，就會(huì)影響到原本的效果，使用空對(duì)象就可以解決這一問(wèn)題。
關(guān)鍵幀比較多時(shí)，按住 “ Option ” 鍵，用鼠標(biāo)拖動(dòng)最末尾的關(guān)鍵幀，可以對(duì)所選關(guān)鍵幀進(jìn)行整體等比拉伸，并且支持多圖層同時(shí)操作。
新建形狀層的定位錨點(diǎn)總是不對(duì)齊圖層的中心，這在做一些帶縮放或旋轉(zhuǎn)屬性的動(dòng)畫(huà)時(shí)就特別不方便，按住“Command”雙擊“平移錨點(diǎn)工具”，即可使圖層錨點(diǎn)快速對(duì)位到圖層中心。
還有更直接的方法，就是在“首選項(xiàng)”里將“在新形狀圖層上居中放置錨點(diǎn)”打上勾，以后新建的形狀層錨點(diǎn)都會(huì)自動(dòng)對(duì)齊圖層中心啦。
AE的很多插件和表達(dá)式對(duì)中文版本不兼容，包括很多教程也都是國(guó)外案例，所以其實(shí)直接用英文版的AE是最好的。但是難免也有跟我一樣看見(jiàn)英文界面就抓瞎的同學(xué)，平時(shí)還是習(xí)慣用中文版，有需要時(shí)才換成英文版。這里介紹一種AE快速切換中英文的方法，對(duì)2018以上的版本都適用。
以macOS系統(tǒng)為例，在以下路徑找到：
前往 \ 電腦 \ Macintosh HD \ 資源庫(kù) \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml
將“application.xml”這個(gè)文件用“文本編輯”打開(kāi)，然后按“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è)文件用“記事本”打開(kāi)，同樣的查找“zh_CN”后替換“en_US”就好。
之后可以將“application.xml”文件分別存一份“zh_CN”中文和“en_US”英文的版本，下回再要切換時(shí)，直接將對(duì)應(yīng)的“application.xml”文件復(fù)制到原路徑替換即可。
新置入一段想要循環(huán)的視頻素材時(shí)，很多人習(xí)慣將素材復(fù)制多次，或者通過(guò)時(shí)間重映射打上關(guān)鍵幀后在添加循環(huán)表達(dá)式。其實(shí)并不需要這么麻煩，在項(xiàng)目窗口右鍵對(duì)應(yīng)的素材，選擇“解釋素材 → 主要”，在彈出窗口直接就可以設(shè)置素材循環(huán)次數(shù)。
雖然AE的全部快捷鍵可以寫(xiě)滿(mǎn)長(zhǎng)長(zhǎng)一串列表，但在精不在多。實(shí)際使用時(shí)，其實(shí)只要記住一些常用的關(guān)鍵快捷鍵，就已經(jīng)可以效率翻倍，享受“鍵步如飛”的感覺(jué)了。
以最常用的“添加關(guān)鍵幀”為例，在不使用快捷鍵的前提下，想要給對(duì)象添加一個(gè)“位置”關(guān)鍵幀，需要至少3個(gè)步驟：
而使用快捷鍵 “ Option+Shift+P ”，一步即可完成，并且不會(huì)展開(kāi)不相關(guān)的屬性：
這對(duì)于一個(gè)工程里需要用到成百上千次的k幀操作來(lái)說(shuō)，著實(shí)可以省下不少時(shí)間，可以說(shuō)是不得不用的一個(gè)快捷操作。
秉持在精不在多的原則，整理出以下一些高效又常用的快捷鍵，親測(cè)好用哦！
因?yàn)樽髡呤荕acOS系統(tǒng)，所以下文中提到的 Option 可以對(duì)應(yīng) Windows 的 Alt ； Command 對(duì)應(yīng) Windows 的 Control 。
五大基礎(chǔ)變換屬性
在對(duì)應(yīng)圖層使用這五個(gè)快捷鍵，即可快速展開(kāi)或收起對(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í)間指針操作
定位到上一可見(jiàn)關(guān)鍵幀：J
定位到下一可見(jiàn)關(guān)鍵幀：K
定位到圖層入點(diǎn)：I
定位到圖層出點(diǎn)：O
設(shè)置當(dāng)前為工作區(qū)開(kāi)始：B
設(shè)置當(dāng)前為工作區(qū)結(jié)束： N
圖層操作
將圖層拆分 ：Shift + Command + D
裁去時(shí)間線(xiàn)左側(cè)圖層：Option + [
裁去時(shí)間線(xiàn)右側(cè)圖層：Option + ]
設(shè)置當(dāng)前為入點(diǎn)： [
設(shè)置當(dāng)前為出點(diǎn)： ]
復(fù)制圖層：Command + D
其他常用操作
展開(kāi)/收起帶關(guān)鍵幀的屬性：U
展開(kāi)/收起所有屬性：UU
展開(kāi)/收起遮罩屬性：M
展開(kāi)/收起音頻屬性：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
設(shè)計(jì)再好的動(dòng)效如果不能實(shí)際落地，那一切也只是徒勞，所以動(dòng)效輸出在對(duì)接開(kāi)發(fā)時(shí)非常關(guān)鍵。按照輸出和實(shí)現(xiàn)的方式不同，我們可以將動(dòng)效分為兩種類(lèi)型，一種是播放型動(dòng)效，一種是交互型動(dòng)效。
播放型動(dòng)效是指在輸出時(shí)效果就已經(jīng)固定的動(dòng)效，滿(mǎn)足觸發(fā)條件后播放出來(lái)，過(guò)程中并不會(huì)有影響效果的元素。
例如常見(jiàn)的APP底部導(dǎo)航點(diǎn)擊效果，icon動(dòng)效在用戶(hù)點(diǎn)擊時(shí)觸發(fā)播放，這個(gè)效果在輸出時(shí)就是固定的，不受任何其他因素影響，可以由設(shè)計(jì)師直接導(dǎo)出。
播放型動(dòng)效有以下幾種比較常見(jiàn)的輸出格式：
Gif、Apng、Webp本質(zhì)上都是將位圖進(jìn)行壓縮和轉(zhuǎn)換，而Lottie則是基于代碼層面的動(dòng)畫(huà)渲染，PAG則結(jié)合了兩者的特性。目前一般使用Apng、Lottie、和PAG就已經(jīng)可以覆蓋大部分的輸出場(chǎng)景，是可以?xún)?yōu)先考慮的動(dòng)圖格式。
交互型動(dòng)效是指變換內(nèi)容跟我們的交互操作相關(guān)聯(lián)的動(dòng)效，并且包含無(wú)法由設(shè)計(jì)師直接導(dǎo)出的元素，比如用戶(hù)的頭像、名稱(chēng)等。
比如這個(gè)支付面板切換的效果，變換的元素中包含了用戶(hù)的余額和綁卡信息，這些信息是無(wú)法由設(shè)計(jì)師輸出的。
這種動(dòng)效需要開(kāi)發(fā)在代碼側(cè)還原。如果只是輸出視頻demo，開(kāi)發(fā)同學(xué)很難將其中的細(xì)節(jié)（例如時(shí)間出入點(diǎn)、曲線(xiàn)速率等）還原出來(lái)。這就需要設(shè)計(jì)師有一份清晰的標(biāo)注文檔，將動(dòng)效的細(xì)節(jié)參數(shù)跟開(kāi)發(fā)更好的明確下來(lái)。
一份規(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í)間；
曲線(xiàn)：變換的速率曲線(xiàn)，描述在固定的時(shí)長(zhǎng)范圍內(nèi)，速度是如何變化的；
以上圖的支付面板首次切換過(guò)程為例，我們的標(biāo)注文檔是這樣的：
第一步定義好頁(yè)面的起始和結(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ì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊(duì) 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
通常我們理解圖標(biāo)設(shè)計(jì)的含義，是將某個(gè)概念轉(zhuǎn)換成清晰易讀的圖形，從而降低用戶(hù)的理解成本，提升界面的美觀度。隨著扁平化設(shè)計(jì)風(fēng)格的普及，圖標(biāo)的風(fēng)格越來(lái)越簡(jiǎn)約，看似簡(jiǎn)單的圖形，實(shí)際要準(zhǔn)確的表達(dá)含義，也是需要注意很多細(xì)節(jié)的，在如今大同小異的圖標(biāo)中，如何讓你設(shè)計(jì)出的圖標(biāo)具有說(shuō)服力也是一門(mén)學(xué)問(wèn)，今天就給大家全面的剖析一下圖標(biāo)的知識(shí)，讓你做出的圖標(biāo)有理有據(jù)。
1、圖標(biāo)的定義及分類(lèi)
2、圖標(biāo)的設(shè)計(jì)規(guī)范
3、圖標(biāo)的性格走向
4、圖標(biāo)的評(píng)判標(biāo)準(zhǔn)
5、總結(jié)
圖標(biāo)是具有高度概括性的、用于視覺(jué)信息傳達(dá)的圖像。圖標(biāo)常?？梢詡鬟_(dá)出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內(nèi)容和信息。
在數(shù)字設(shè)計(jì)領(lǐng)域，圖標(biāo)作為網(wǎng)頁(yè)或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎(chǔ)設(shè)施，也是達(dá)成人機(jī)交互這一目標(biāo)的有效途徑。
釋意性圖標(biāo)是用來(lái)解釋和闡明特定功能或者內(nèi)容類(lèi)別的視覺(jué)標(biāo)記。它并不是一定被點(diǎn)擊可交互的UI元素，在很多時(shí)候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶(hù)會(huì)借助這些圖標(biāo)來(lái)獲取信息。不過(guò)有時(shí)候圖標(biāo)表達(dá)的含義可能還不夠完整或者清晰，所以會(huì)將圖標(biāo)和文案搭配起來(lái)一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標(biāo)一共可以分為以下三類(lèi)：
2-1-1純圖標(biāo)：
例如火球買(mǎi)手APP中的店家“特定標(biāo)簽”，以及圖文展示下的“觀看數(shù)量圖標(biāo)”與“收藏圖標(biāo)”，它們并不需要用文字去解釋?zhuān)脩?hù)也知道它表達(dá)的是什么。
2-1-2圖文結(jié)合：
例如造作APP中的“購(gòu)物車(chē)圖標(biāo)”與“收貨地址圖標(biāo)”，為了讓用戶(hù)能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會(huì)配有文字提示，這樣就能大大的降低誤讀的可能性。
2-1-3純圖標(biāo)（圖標(biāo)內(nèi)含文字）：
例如開(kāi)眼APP中視頻封面左上角“開(kāi)眼精選圖標(biāo)”，它把圖標(biāo)與重要文字結(jié)合在一起展示給用戶(hù)，看起來(lái)不僅十分具有個(gè)性，而且用戶(hù)對(duì)其理解性也非常強(qiáng)。
交互圖標(biāo)的最大意義在于可以引導(dǎo)用戶(hù)進(jìn)行交互行為，是在產(chǎn)品中不可或缺的組成部分。它們可以在用戶(hù)不同的操作手勢(shì)下幫助用戶(hù)執(zhí)行不同的交互過(guò)程，這種類(lèi)型圖標(biāo)也是APP中最常見(jiàn)的，常見(jiàn)的交互性圖標(biāo)如：搜索、底部標(biāo)簽、返回、點(diǎn)贊、收藏、掃一掃等。
裝飾性圖標(biāo)僅僅是用來(lái)提升整個(gè)界面的視覺(jué)體驗(yàn)，它并不具備任何功能性。這類(lèi)圖標(biāo)往往是為了迎合用戶(hù)的偏好與期望，通過(guò)豐富視覺(jué)體驗(yàn)的方法來(lái)增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶(hù)，還可以讓整個(gè)用戶(hù)體驗(yàn)更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車(chē)圖標(biāo)”。
圖標(biāo)基于基礎(chǔ)樣式（線(xiàn)、面、線(xiàn)面結(jié)合）+表現(xiàn)手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類(lèi)型，每種類(lèi)型的展示方式也都各有不同。
線(xiàn)性圖標(biāo)通過(guò)線(xiàn)來(lái)塑造輪廓，在界面中App的圖標(biāo)尺寸并不大，所以如果線(xiàn)過(guò)于復(fù)雜，在小面積中過(guò)多的線(xiàn)會(huì)對(duì)識(shí)別性產(chǎn)生較大的困擾。在圖標(biāo)設(shè)計(jì)中使用的線(xiàn)有粗細(xì)之分，常用的App圖標(biāo)設(shè)計(jì)線(xiàn)的粗細(xì)一般有2PX或者3PX，不同的線(xiàn)條粗細(xì)所帶來(lái)的視覺(jué)感受也不同，細(xì)線(xiàn)顯得精致，粗線(xiàn)視覺(jué)面積大，顯得厚重。
面性圖標(biāo)是通過(guò)面來(lái)塑造形體的圖標(biāo)，采用了剪影的設(shè)計(jì)形式，通過(guò)線(xiàn)或者面去切割基礎(chǔ)輪廓面，通過(guò)分型來(lái)塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計(jì)感的差別。
線(xiàn)面結(jié)合圖標(biāo)相較單一的線(xiàn)性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計(jì)的角度上說(shuō)，由于元素的多樣化，設(shè)計(jì)更容易獲得好的效果。相反，如果運(yùn)用不當(dāng)會(huì)顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過(guò)度是關(guān)鍵。
這類(lèi)圖標(biāo)的特點(diǎn)是通過(guò)細(xì)節(jié)和光影還原現(xiàn)實(shí)物品的造型和質(zhì)感，能給用戶(hù)極強(qiáng)的代入感，用戶(hù)可通過(guò)對(duì)現(xiàn)實(shí)事物的聯(lián)想，快速領(lǐng)會(huì)圖標(biāo)表達(dá)的意圖。但是隨著 ICON 的發(fā)展，擬物圖標(biāo)也帶來(lái)了一些問(wèn)題，因?yàn)橛脩?hù)關(guān)注的核心永遠(yuǎn)都是信息本身，華麗的視覺(jué)元素或許在用戶(hù)使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對(duì)用戶(hù)獲取信息的一種干擾，所以現(xiàn)在擬物化的圖標(biāo)很少運(yùn)用在APP界面之內(nèi)。
相較于擬物風(fēng)格不會(huì)有太多復(fù)雜的視覺(jué)元素，層次簡(jiǎn)單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)，這類(lèi)圖標(biāo)具有一定的立體感，能給人輕盈、簡(jiǎn)潔、精致的感覺(jué)，在界面設(shè)計(jì)中，一般在面積比較大的區(qū)域我們會(huì)使用加入輕質(zhì)感的圖標(biāo)。
合理的遵循圖標(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)品更新迭代有可參考的地方。
為了保證圖標(biāo)的尺寸大小一致性，我們往往會(huì)建立基礎(chǔ)的網(wǎng)格尺寸來(lái)進(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)和鍵盤(pán)是主要輸入方法時(shí)，就會(huì)使用密集布局，基礎(chǔ)網(wǎng)格就會(huì)縮小到20。
下面就以常用的24x24為大家展示：
網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時(shí)將保留其所需的比例和周?chē)目瞻讌^(qū)域，同時(shí)還能夠很好的平衡圖標(biāo)的視覺(jué)重心。
*在使用常規(guī)圖標(biāo)時(shí)避免一部分在出血位。
*在使用多個(gè)元素的圖標(biāo)時(shí)，避免圖標(biāo)擁擠我們可以讓其部分出現(xiàn)在出血位，確保它們之間有足夠的空間。
keyline由圓形，正方形，矩形，正交，三角形和對(duì)角線(xiàn)組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺(jué)上的穩(wěn)定變得更加容易，并有助于在設(shè)計(jì)相似比例的圖標(biāo)時(shí)有共同的參考準(zhǔn)則。
在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域?yàn)?）：
當(dāng)把圖標(biāo)畫(huà)在網(wǎng)格上時(shí)可以很好的規(guī)范圖標(biāo)，讓它們從整體的視覺(jué)上看著統(tǒng)一規(guī)范。
在設(shè)計(jì)一整套系統(tǒng)化的圖標(biāo)時(shí)，我們一定要注意圖標(biāo)的像素大小，要運(yùn)用相同的網(wǎng)格尺寸設(shè)計(jì)相同線(xiàn)條粗細(xì)的圖標(biāo)，包括曲線(xiàn)，角度以及內(nèi)部和外部筆劃。這樣圖標(biāo)看起來(lái)才更統(tǒng)一，也有利于后期圖標(biāo)的迭代更新。
當(dāng)然，描邊像素的粗細(xì)并不是絕對(duì)的，如果我們要做一些密集型的圖標(biāo)時(shí)，可以考慮適當(dāng)?shù)目s小線(xiàn)的像素大小。如下，我們?cè)O(shè)定的系統(tǒng)圖標(biāo)線(xiàn)條粗細(xì)為3px，當(dāng)你用3px作用于指紋圖標(biāo)上時(shí)就會(huì)顯得非常擁擠，并且在視覺(jué)上比其余圖標(biāo)更重，這時(shí)我們就可以把它的線(xiàn)條像素降級(jí)，設(shè)定為2px。
我們?cè)谟檬噶抗ぞ呃L制圖標(biāo)時(shí)，要仔細(xì)看好圖標(biāo)的網(wǎng)格尺寸和圖標(biāo)結(jié)構(gòu)尺寸，避免產(chǎn)生小數(shù)位。
曲率簡(jiǎn)單來(lái)講就是圖標(biāo)中帶有圓角的邊角度數(shù)，只要是帶有圓角的矩形就都會(huì)有一定的曲率。在圖標(biāo)中曲率的呈現(xiàn)方式有兩種：外曲、內(nèi)曲。
外曲與內(nèi)曲并不一定同時(shí)存在，在特定情況下內(nèi)部結(jié)構(gòu)可以是直角（無(wú)曲率）。如下圖：當(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)一。
根據(jù)像素的網(wǎng)格線(xiàn)來(lái)設(shè)置兩條對(duì)角線(xiàn)，會(huì)讓你的圖標(biāo)看起來(lái)更清晰。在傾斜的角度選擇上，不要出現(xiàn)7.8°、14.2°這樣的奇怪?jǐn)?shù)值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規(guī)律的角度方案），這樣會(huì)使得整體的圖形變化顯得更加規(guī)律，也能夠滿(mǎn)足不同圖形的角度需求。
在做很多圖標(biāo)時(shí)都會(huì)用斷點(diǎn)的缺口來(lái)打破“全包邊圖標(biāo)”的沉悶感，使圖標(biāo)具有透氣性，如果想給圖標(biāo)添加斷點(diǎn)，那么要保證斷點(diǎn)的形態(tài)保持一致。
確保圖標(biāo)內(nèi)每個(gè)細(xì)節(jié)和元素都有足夠的空間，圖標(biāo)的相鄰元素之間的空間在整個(gè)圖標(biāo)中不應(yīng)太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。
如果在做圖標(biāo)時(shí)牽涉到了透視需求，那么就一定要保證圖標(biāo)的透視角度一致。
非中心對(duì)稱(chēng)圖形物理對(duì)齊時(shí)視覺(jué)上會(huì)有偏離感，多個(gè)不同形狀的圖標(biāo)視覺(jué)重心并不在一條水平線(xiàn)上，需要微調(diào)才能保證平衡感。
在圖形的處理上，不要留有多余的節(jié)點(diǎn)，干掉多余的節(jié)點(diǎn)，保持圖形的整潔。
ICON命名要求較為嚴(yán)格，涉及到我們切圖給開(kāi)發(fā)，所以我們命名爭(zhēng)取做對(duì)，且需嚴(yán)格遵守規(guī)則，正確的命名原則：類(lèi)型_位置_功能_狀態(tài)_大小
每個(gè)App應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，同樣圖標(biāo)性格也應(yīng)當(dāng)與產(chǎn)品氣質(zhì)保持一致。圖標(biāo)性格一共分為了4個(gè)走向：粗曠（粗直）、活潑（粗圓）、商務(wù)（細(xì)直）、精致（細(xì)圓）。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線(xiàn)條較粗（或面性圖標(biāo)、線(xiàn)面結(jié)合圖標(biāo)）、拐角為直角。
粗曠類(lèi)圖標(biāo)讓人看起來(lái)非常飽滿(mǎn)、剛正，它更多適用于男性、潮流、有格調(diào)類(lèi)型等產(chǎn)品中。例如VSCO，它的底部標(biāo)簽欄圖標(biāo)全部采用了粗線(xiàn)條的直角設(shè)計(jì)。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線(xiàn)條較粗（或面性圖標(biāo)、線(xiàn)面結(jié)合圖標(biāo)）、拐角為圓角。
活潑類(lèi)圖標(biāo)讓人看起來(lái)十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂(lè)、直播、美食等產(chǎn)品中。例如閑魚(yú)，不管是在LOGO字體的處理還是APP內(nèi)部的圖標(biāo)處理，都是采用了線(xiàn)條較粗的圓角設(shè)計(jì)。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線(xiàn)條較細(xì)、拐角為直角。
商務(wù)類(lèi)圖標(biāo)讓人看起來(lái)十分規(guī)矩、嚴(yán)謹(jǐn)、值得信賴(lài)，它更多適用于新聞、政府、商務(wù)、工具等產(chǎn)品中。例如工具類(lèi)的思維導(dǎo)圖APP，它的可操作按鈕都是商務(wù)類(lèi)的圖標(biāo)。因?yàn)檫@類(lèi)圖標(biāo)的特性，所以目前我們很少在移動(dòng)端上看到它，它更多適用于PC端的后臺(tái)界面中。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線(xiàn)條較細(xì)、拐角為圓角。
精致類(lèi)圖標(biāo)讓人看起來(lái)非常干凈、柔和、顯得高級(jí)感，它更多適用于旅游、奢侈品、藝術(shù)、領(lǐng)域垂直等產(chǎn)品中。例如airbnb，在APP應(yīng)用中大部分都采用了精致類(lèi)圖標(biāo)。
當(dāng)圖標(biāo)設(shè)計(jì)完后，我們應(yīng)該如何去評(píng)判一個(gè)圖標(biāo)的好壞？很多設(shè)計(jì)師并沒(méi)有完整的評(píng)判體系，其實(shí)我們可以從這五個(gè)維度對(duì)圖標(biāo)進(jìn)行評(píng)判：識(shí)別性、圖標(biāo)氣質(zhì)、協(xié)調(diào)性、一致性、品牌調(diào)性。
圖標(biāo)最主要的用途就是輔助用戶(hù)理解信息，特別是對(duì)于當(dāng)圖標(biāo)單獨(dú)存在時(shí)，一定不能讓用戶(hù)產(chǎn)生疑慮。要想圖標(biāo)達(dá)到高識(shí)別，我們可以從這2個(gè)方向入手：大眾認(rèn)知隱喻、真實(shí)世界映射。
在互聯(lián)網(wǎng)普及的今天，許多界面的隱喻圖標(biāo)已被廣大用戶(hù)熟知認(rèn)可，對(duì)于這類(lèi)隱喻圖標(biāo)用戶(hù)不用思考身體就已做出反應(yīng)，我們?cè)谠O(shè)計(jì)圖標(biāo)時(shí)可以從隱喻圖標(biāo)中添加修改部分元素，從而形成新的圖標(biāo)，這樣既能保證圖標(biāo)的識(shí)別性，也能做出差異化。
選擇真實(shí)世界中的物品映射，能使人下意識(shí)對(duì)圖標(biāo)的作用有近似預(yù)期，降低學(xué)習(xí)成本，提高識(shí)別度。
每個(gè)App應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，而我們所做的圖標(biāo)就是要跟隨產(chǎn)品的氣質(zhì)。例如當(dāng)你要做一款二次元產(chǎn)品，你的圖標(biāo)氣質(zhì)就應(yīng)該偏活潑、可愛(ài)、萌、青春，而不是剛硬、嚴(yán)謹(jǐn)、規(guī)矩。
一致性是圖標(biāo)的基礎(chǔ)，我們?cè)诶L制整套圖標(biāo)時(shí)要確保它們的基礎(chǔ)屬性全部一致，細(xì)節(jié)統(tǒng)一，圖標(biāo)內(nèi)容的統(tǒng)一在視覺(jué)上也更加和諧美觀。圖標(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ī)律，采用相同的顏色是比較常見(jiàn)的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協(xié)調(diào)，避免出現(xiàn)飽和度、明度反差過(guò)大的配色。
一致性代表的是圖標(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)性存在問(wèn)題時(shí)，我們就要反過(guò)來(lái)查看一致性存在的誤區(qū)并給予修改。在圖標(biāo)的協(xié)調(diào)性上我們主要審視這三點(diǎn)：視覺(jué)大小、飽滿(mǎn)度、透析感。
視覺(jué)大小對(duì)標(biāo)的是一致性的尺寸大小與描邊大小，當(dāng)你發(fā)現(xiàn)圖標(biāo)視覺(jué)大小不對(duì)等時(shí)，你就要回過(guò)去查看你的網(wǎng)格與keyline是否運(yùn)用正確，確保正確后再查看你的圖標(biāo)是否按照keyline的規(guī)范繪制以及描邊大小是否一致。（同樣尺寸下的圖標(biāo)，從光感上來(lái)看描邊粗的圖標(biāo)視覺(jué)偏大）
飽滿(mǎn)度對(duì)標(biāo)的一致性的間距，當(dāng)你發(fā)現(xiàn)圖標(biāo)不夠飽滿(mǎn)時(shí)，你就要去查看你設(shè)定的間距值是否偏大，是否合理。
透析感簡(jiǎn)單來(lái)說(shuō)就是留白區(qū)域。透析感對(duì)標(biāo)的也是一致性的間距，當(dāng)元素的描邊過(guò)大時(shí)，我們就要合理的設(shè)定間距的最小值，不然整個(gè)圖標(biāo)就顯得非常臃腫。
品牌調(diào)性是我們經(jīng)常提到的緯度，我們打開(kāi)很多APP都會(huì)發(fā)現(xiàn)他們的圖標(biāo)設(shè)計(jì)都非常普通，沒(méi)有任何特色，過(guò)于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯(lián)動(dòng)性。其實(shí)我們可以結(jié)合品牌調(diào)性，在圖標(biāo)上做更多的聯(lián)動(dòng)、創(chuàng)新。
色彩是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺(jué)元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。
當(dāng)然品牌顏色除了可以直接用外，還可以在提取時(shí)適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車(chē)帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時(shí)，使得整個(gè)圖標(biāo)更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來(lái)的圖標(biāo)一般運(yùn)用在APP首頁(yè)標(biāo)簽。因?yàn)槭醉?yè)是APP中最重要的頁(yè)面，也是進(jìn)入APP默認(rèn)的頁(yè)面，把首頁(yè)圖標(biāo)替換成品牌LOGO，能反復(fù)加強(qiáng)了用戶(hù)對(duì)App的logo印象，這樣不但使App內(nèi)外形成了視覺(jué)聯(lián)系，同時(shí)也二次傳遞了品牌形象。例如大眾點(diǎn)評(píng)，它的首頁(yè)標(biāo)簽就用了品牌LOGO。
我們可以在品牌中提取它識(shí)別性較強(qiáng)的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁(yè)圖標(biāo)。
品牌提取的元素并不只是所見(jiàn)到的品牌視覺(jué)形象，還可以提取與品牌內(nèi)容強(qiáng)相關(guān)的元素。例如QQ音樂(lè)，就把音符作為首頁(yè)圖標(biāo)。
如果你的品牌還不為大眾所熟知，那么為了強(qiáng)化用戶(hù)對(duì)品牌名稱(chēng)的認(rèn)知，可以把品牌名稱(chēng)直接放入標(biāo)簽欄中。例如MONO，就把它的名稱(chēng)分為四個(gè)字母分別放在了4個(gè)標(biāo)簽內(nèi)，需要注意的是這類(lèi)圖標(biāo)不能單獨(dú)出現(xiàn)，因?yàn)樗旧聿痪邆湟龑?dǎo)含義，必須配合文字一起出現(xiàn)，這樣才能讓用戶(hù)能易理解。
圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會(huì)讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國(guó)元素，整體看起來(lái)有股濃濃的古韻之風(fēng)。
如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產(chǎn)品的圖標(biāo)中。例如盒馬，它就把盒馬的吉祥物做了風(fēng)格化的處理，放于APP的首頁(yè)標(biāo)簽。
設(shè)計(jì)師對(duì)自己做出的所有設(shè)計(jì)都必須要有理論支撐，圖標(biāo)也不例外，一套優(yōu)秀的圖標(biāo)是設(shè)計(jì)師不斷沉淀的結(jié)果。看完本文章后，如果大家想要去練習(xí)圖標(biāo)，建議找大廠的圖標(biāo)放在keyline里臨摹，真的會(huì)讓你收獲不少。
資料提?。?/strong>
最后給大家整理了一些資料，包含30個(gè)輕質(zhì)感圖標(biāo)（臨摹參考）、Ant Design的sketch插件、IBM的圖標(biāo)、keyline矢量文件（AI與Sketch）。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系
作者：黑獅力 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
————— 目錄大綱 —————
大家好，我是 Clippp。今天為大家分享的是「菜單導(dǎo)航」。一個(gè)簡(jiǎn)單的漢堡菜單就可以包括多種不同的樣式，可能有的樣式甚至沒(méi)有官方的名稱(chēng)，但因?yàn)闃邮降牟町愒诠δ苌线@些菜單也會(huì)出現(xiàn)差異性。
我們可以通過(guò)分析這些樣式，來(lái)思考不同的樣式代表著怎樣的設(shè)計(jì)含義和設(shè)計(jì)目的，不能因?yàn)楹?jiǎn)單常見(jiàn)而忽視了功能的內(nèi)核。
關(guān)鍵詞：橫條、多個(gè)菜單選項(xiàng)
這個(gè)圖標(biāo)的樣式簡(jiǎn)潔易懂，通常位于網(wǎng)頁(yè)和 App 的上下角，用來(lái)告知用戶(hù)這個(gè)按鈕之外還有更多內(nèi)容可以探索。
當(dāng)產(chǎn)品有多個(gè)菜單選項(xiàng)時(shí)，考慮使用漢堡圖標(biāo)來(lái)顯示，但盡可能避免在桌面視圖中使用。
關(guān)鍵詞：垂直、內(nèi)嵌菜單
通常位于屏幕或窗口的右上角或頂部，是用于打開(kāi)帶有附加選項(xiàng)的圖標(biāo)，打開(kāi)的內(nèi)容往往是一個(gè)較小的內(nèi)嵌菜單而不是整個(gè)全新的頁(yè)面。
關(guān)鍵詞：水平、內(nèi)嵌菜單、web
水平三點(diǎn)式菜單同樣常位于屏幕或窗口的右上角，用于打開(kāi)菜單或顯示相關(guān)項(xiàng)的操作。
因?yàn)閳D標(biāo)樣式是水平的，所以更容易在 web 上或者在表格等水平方向中使用。
關(guān)鍵詞：子分類(lèi)、子功能
九宮格菜單通常用于打開(kāi)同一產(chǎn)品中包含不同子產(chǎn)品或子功能，可以在它們之間快速切換，此圖標(biāo)常位于產(chǎn)品主頁(yè)的右上角。
關(guān)鍵詞：過(guò)濾、排序
過(guò)濾式菜單由三行不同長(zhǎng)度的線(xiàn)段水平疊放而成，是最廣泛使用的過(guò)濾符號(hào)?？梢詫⑦^(guò)濾式菜單與“排序方式”選項(xiàng)結(jié)合使用，或者與全局過(guò)濾器結(jié)合使用。
關(guān)鍵詞：樣式特殊、時(shí)尚感更強(qiáng)
作為漢堡圖標(biāo)的替代品，與顯示列表菜單的目的相同嗎，但是這些樣式我們平常見(jiàn)的可能會(huì)比較少，更常用在充滿(mǎn)現(xiàn)代感、時(shí)尚感和藝術(shù)感的網(wǎng)站上。
不同的樣式可能代表著截然不同的設(shè)計(jì)目的，常思考這些小而精的細(xì)節(jié)，是保證產(chǎn)品體驗(yàn)提升的關(guān)鍵。
慢來(lái)比較快，如覺(jué)得有幫助，請(qǐng)點(diǎn)個(gè)贊，謝謝！
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
金剛區(qū)是什么，想必大家都有所了解。
沒(méi)有的話(huà)看這張圖就懂了：
圖片來(lái)源：淘寶首頁(yè)
我在微信上搜了一下，發(fā)現(xiàn)大部分討論金剛區(qū)設(shè)計(jì)的文章，都是在講怎么畫(huà)圖標(biāo)。
但是我自己在使用各大 APP 的過(guò)程中，發(fā)現(xiàn)很多金剛區(qū)并不是那么好用，而且這跟圖標(biāo)好不好看無(wú)關(guān)。
金剛區(qū)設(shè)計(jì)不好，會(huì)對(duì)我的使用造成直接影響：
我今天就來(lái)總結(jié)一下，對(duì)于金剛區(qū)設(shè)計(jì)的交互/體驗(yàn)思考：
金剛區(qū)里有多少項(xiàng)比較合適？
這其實(shí)是米勒法則（Miller’s Role）的典型運(yùn)用了。
如果你還不太了解米勒法則，看看下面這張圖里的詞語(yǔ)：
現(xiàn)在，半分鐘回憶一下，你記住了多少個(gè)？
……
大部分人能記住 5~9 個(gè)。
米勒的研究發(fā)現(xiàn)，普通人的工作記憶（Working Memory）只有 7±2 個(gè)信息塊。
如果給的信息超出了這個(gè)數(shù)字，大部分人也只能記住這么多。
所以說(shuō)，金剛區(qū)里的圖標(biāo)數(shù)量，最好也維持在這個(gè)數(shù)，否則就是對(duì)用戶(hù)的記憶能力要求過(guò)高了。
通常來(lái)，4 個(gè)圖標(biāo)很輕松，說(shuō) 6 個(gè)圖標(biāo)是比較理想的，8~9 個(gè)就有點(diǎn)吃力了，10 個(gè)就超綱了。
例如支付寶這個(gè)就過(guò)分了，好在這只是工具類(lèi)產(chǎn)品，復(fù)雜一點(diǎn)也沒(méi)辦法：
人們?cè)诳撮喿x文字時(shí)，視線(xiàn)軌跡是之字形：
人們?cè)陂喿x表格時(shí)，視線(xiàn)軌跡是除草機(jī)形：
上圖來(lái)源：這樣設(shè)計(jì)表格，看著真難受！
雖然金剛區(qū)的眼動(dòng)圖我沒(méi)有，但第一步肯定是從左上角開(kāi)始往右掃。
所以，用戶(hù)最有可能使用的圖標(biāo)，應(yīng)該從左到右排在最上面一行，最不常用的可以排在右下角。
例如美團(tuán)外賣(mài)這個(gè)設(shè)計(jì)，看著就挺合理。不但把重要內(nèi)容放在第一行，而且還做了很大的視覺(jué)區(qū)分：
不過(guò)一些不愁流量的 APP 會(huì)選擇把黃金位置用做商業(yè)宣傳，難免損失點(diǎn)易用性。
1. 仿真圖標(biāo)
如果追求質(zhì)感，多半會(huì)使用物品本身的顏色，例如每日優(yōu)鮮這個(gè)：
這種圖標(biāo)就沒(méi)什么顏色好討論了，注意一下整體和諧就好。
2. 數(shù)量較少
如果圖標(biāo)數(shù)量不多可以使用一個(gè)顏色，那么顏色上，同樣沒(méi)什么好討論的。
例如 QQ 音樂(lè)：
3. 數(shù)量適中
如果圖標(biāo)數(shù)量在 7 個(gè)左右或以?xún)?nèi)，那么可以每種顏色的圖標(biāo)都來(lái)一個(gè)，這樣用戶(hù)也能記住大概什么顏色代表什么。
例如京東這樣：
4. 數(shù)量很多
圖標(biāo)數(shù)量遠(yuǎn)超過(guò) 7 時(shí)，就不可能每種顏色來(lái)一個(gè)了，否則顏色都不夠用了。
如果還是想要?jiǎng)澐诸伾?，可以將?lèi)型作為依據(jù)，這樣用戶(hù)在尋找圖標(biāo)時(shí)會(huì)比較有方向。
當(dāng)然，其實(shí)也可以簡(jiǎn)單點(diǎn)，干脆都一個(gè)顏色，例如聯(lián)通手機(jī)營(yíng)業(yè)廳：
1. 底框
一些產(chǎn)品為了統(tǒng)一感，會(huì)用圓圈或者圓角矩形，把所有圖標(biāo)都框起來(lái)。
這樣視覺(jué)上是好處理了，但交互上很不推薦，因?yàn)闀?huì)大大降低圖標(biāo)的識(shí)別度，乍眼一看都長(zhǎng)一樣。
這種底框在主流產(chǎn)品里已經(jīng)很少見(jiàn)了，不過(guò)這么做的設(shè)計(jì)師還是不少：
這種圖標(biāo)數(shù)量少，有顏色區(qū)分還好，如果數(shù)量多又一個(gè)顏色，那就很難辨認(rèn)了。
縱觀常見(jiàn)的金剛區(qū)圖標(biāo)，通常不外乎四種樣式：線(xiàn)條、形狀、2D、3D、仿真。
聯(lián)通手機(jī)營(yíng)業(yè)廳
QQ 音樂(lè)
京東
美團(tuán)外賣(mài)
每日優(yōu)鮮
任何樣式都能讓用戶(hù)識(shí)別和記憶，但是不同的樣式給人的感官不同。
真實(shí)性越高的視覺(jué)樣式，就越容易給人高級(jí)的感覺(jué)；相反真實(shí)性越低的視覺(jué)樣式，越容易給人簡(jiǎn)單邊界的感覺(jué)。
我發(fā)現(xiàn)做設(shè)計(jì)時(shí)，從不同的角度會(huì)帶來(lái)截然不同的思考。
今天這篇分析，算是一個(gè)以交互體驗(yàn)為主，融合了一些視覺(jué)角度，希望帶給大家一些靈感~
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
圖標(biāo)定制設(shè)計(jì)之一：6大章節(jié)！圖標(biāo)設(shè)計(jì)基礎(chǔ)知識(shí)全方位入門(mén)指南
圖標(biāo)定制設(shè)計(jì)之二：超全總結(jié)！金剛區(qū)圖標(biāo)設(shè)計(jì)的 10 大風(fēng)格
圖標(biāo)定制設(shè)計(jì)之三：想讓圖標(biāo)更精致？先掌握這11個(gè)容易忽略的設(shè)計(jì)細(xì)節(jié)！
圖標(biāo)定制設(shè)計(jì)之四：學(xué)會(huì)SVG圖標(biāo)的高級(jí)用法，界面適配效率翻一倍！
圖標(biāo)定制設(shè)計(jì)之五：研究微軟 Fluent 圖標(biāo)規(guī)范后，我總結(jié)了這9個(gè)知識(shí)點(diǎn)！
圖標(biāo)定制設(shè)計(jì)之六：為什么別人的圖標(biāo)設(shè)計(jì)又快又好？來(lái)看騰訊高手總結(jié)的知識(shí)點(diǎn)！
圖標(biāo)定制設(shè)計(jì)之七：客戶(hù)說(shuō)B端圖標(biāo)太普通沒(méi)新意，該怎么解決？
圖標(biāo)定制設(shè)計(jì)之八：從6個(gè)方面幫你快速掌握?qǐng)D標(biāo)設(shè)計(jì)規(guī)范
圖標(biāo)定制設(shè)計(jì)之九：不止畫(huà)圖標(biāo)！5 個(gè)金剛區(qū)的交互設(shè)計(jì)思考
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn