圖標在UI設計體系中，是重要......
（此處省略1000字）
直接上圖！
上圖是我以前繪制的一套圖標作品，
感興趣的話就一起來了解一下我平時是怎么創(chuàng)作一套圖標的吧~
1、搜集+臨摹+原創(chuàng)
積累素材是設計師必備的“基本功”，同時也是“職業(yè)病”。
平時我會有意識的在速寫本上繪制一些簡易的圖標，如果在一些APP中看到比較好的圖標，我也會臨摹下來。
下面給大家隨機展示一些我平時繪制的圖標。
除了繪制圖標以外，我平時也喜歡繪制一些其他的圖案。
2、反復打磨
將繪制好的圖標利用電腦矢量化后打印出來，根據(jù)打印稿用筆標記出不合理的地方，比如：線條太粗了，重心不穩(wěn).......對不合理的地方進行反復修改，再次打印，再修改，循環(huán)多次后直到得到自己滿意的效果，最后定稿。
下面這幅手繪圖就是文章一開始給大家展示的圖標成品的手繪最終稿了。
需要強調(diào)的是，這一次圖標的繪制，有一個特殊的地方，其中一個圖標是有實物的。（左：實物圖；右：對應圖標）
3、圖標插件化
最后，將圖標上傳阿里的iconfont網(wǎng)站，制作成字體圖標。
然后將字體圖標做成插件（我演示的是ps插件，也可以做成其它xd/sketch/figma插件）
制作過程就是給每個圖標賦予關鍵字，然后利用正則表達式，可以方便的搜索所有圖標。
不過這個步驟我就不詳細解釋了，因為
轉自：站酷
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
在經(jīng)歷了一個不太理想的新十年開局后，年輕人們迫切需要重塑品牌。幸運的是，以下2021年的標志設計趨勢完全可以勝任這項任務。
觀察來自世界各地的logo設計作品，他們的預測代表了設計環(huán)境的變化。雖然去年的趨勢集中在通過新技術進行革新，但2021年標志趨勢中的一個共同主題似乎是限制條件下的創(chuàng)新。過去的一年可能在很多方面限制了世界，但是2021年的標志設計師們還都在繼續(xù)努力著。
彩色玻璃
透視圖
簡單幾何
發(fā)散字母
真實寫真
原始對稱
古怪的人物
現(xiàn)代象征主義
靜態(tài)運動
類似配色方案
標志設計作為一項相對現(xiàn)代的發(fā)明，往往在過去的技術和局限中尋求靈感。在2021年，許多標志設計師在過去時代的彩色玻璃窗中找到了啟發(fā)。
當應用到現(xiàn)代設計中時，將圖像分割成純色碎片，給普通概念增添了一點抽象感。彩色玻璃也與神圣聯(lián)系在一起，因為它起源于中世紀教堂。這可能不是巧合，這種標志趨勢經(jīng)常與美麗的自然景觀結合使用。在一年的大部分時間被困在室內(nèi)之后，我們可以期待我們脆弱的生態(tài)系統(tǒng)將在2021年的彩色玻璃標志設計中得到尊重。
正如標志設計師林登·萊德（Lindon Leader）曾經(jīng)說過的那樣，偉大的設計源自簡潔和清晰。這兩個優(yōu)點使標志設計能夠有效地向觀眾傳達品牌的復雜身份。這就是為什么許多過去的標志潮流都集中在極簡主義和平面設計上。
雖然2021年的logo設計師們決不會放棄這種方法，但他們正尋找在過度簡化中失去的一些魔力。一個流行的標志設計趨勢是融入微妙的視角。使用基本的繪畫技巧，如線性透視，曲率或縮短，設計師能夠創(chuàng)造深度的錯覺，而不會使設計復雜化。
其效果是，標志給人的感覺很突出，品牌從頁面上一躍而下，而半平面的設計技術，一直以來都是為設計師服務的，但至今仍然完好無損。
形狀是構成意象的基石。但是，盡管三角形、正方形和圓形等原始形狀一旦打下基礎，往往就會被淘汰，但它們純粹的簡單卻有力量。
2021年的設計師們正利用這種力量，用簡單的線條和形狀制作出標志。這種對形狀極簡主義的嚴格遵守給了這些標志一種刻意克制的氣氛，允許他們在其他地方自由發(fā)揮，比如在豐富的顏色飽和度上。
這種方法的另一個特點是，簡單的分層可以產(chǎn)生一種結構和深度的錯覺，這符合我們前面提到的透視圖趨勢。通過純粹的造型語言，設計師能夠創(chuàng)造出易于解析、令人難忘、色彩鮮艷的logo。
基于字體的文字標記標識有著直截了當?shù)拿?，無論好壞。雖然他們使品牌名稱成為整個標志的焦點，因此更令人難忘，但他們沒有留下太多的空間，為創(chuàng)意鋪路。但是2021年的標志設計師們正在一個字母一個字母地改變這種印象。
具體來說，我們看到越來越多的單詞標記中的一個字母被夸大了。這可以是一個顏色突出的小寫的“i”，或作為一個突出的筷子形成一個大寫的“H”。這個不同的字母不僅創(chuàng)造了一個吸引眼球的興趣點，它給予品牌最好的選擇：一個傳統(tǒng)的，基于類型的標志，也不怕打破規(guī)則。
人們憑直覺尋找其他面孔，這是一個有據(jù)可查的事實，這就是為什么肖像畫有助于在設計中建立情感聯(lián)系。這些面孔越真實，越容易辨認，聯(lián)系就越深。
因此，2021年更多的標志設計師開始轉向反映不同種族、文化、性別、年齡段等的肖像畫。與媒體過于擁擠的同質表現(xiàn)不同，這種方式創(chuàng)造了真實的印象，有助于人們在瞬間與品牌建立聯(lián)系。這些標志可以從簡單的，平面的人物肖像到詳細的說明性技術。
歸根結底，設計師們厭倦了那些讓人感覺不親切的形象。歸根結底，無論一個標志是在講述品牌背后的人還是品牌服務的人的故事，人都是關鍵。
平衡是標志設計的基本原則之一，而對稱也許是其最極端的表現(xiàn)。對稱的標志從中間分開時，兩邊是相同的。
雖然相同性和可預測性似乎是冗余的同義詞，但對稱設計完全是關于強度的。它們讓我們想起了建筑，無論多么高大復雜，它們的設計都是為了站穩(wěn)腳跟，它們通過完美的對稱平衡來實現(xiàn)這一點。
這種原始的對稱性允許標志包含線條藝術，感覺既不可能復雜又完美有序。但即使對稱在幾何設計中很常見，我們也看到這種趨勢在手繪徽標中找到了歸宿。無論是設計師追求的完美還是實力，有一點是肯定的：2021年的標志建筑是為了經(jīng)得起時間的考驗而建造的。
雖然logo設計師在真實人物的表現(xiàn)上處于領先地位，但2021年的其他許多人則通過漫畫和夸張的幽默來對比這一點。我們正在看到越來越多的以插圖為主要內(nèi)容的logo呈現(xiàn)出詼諧，甚至古怪的概念，從玩老鼠的醫(yī)生到華麗的甜甜圈花花公子。
從事舒適或娛樂的企業(yè)希望能讓他們的觀眾放松，而設計師們則用散發(fā)著博愛氣息的logo來回應。最終，這些異想天開的設計讓顧客覺得他們找到了朋友而不是品牌。
邏各斯的根源一直是古老的象征，從升起的鳳凰到不朽的女神，再到無所不能的眼睛。就像古代的象形文字一樣，它也是一個標志的目的，通過簡化的圖形來傳達信息。
通常，logo尋求創(chuàng)造他們自己獨特的符號語言，但在2021年，設計師們正在疏導古代符號的力量。其效果是將人們普遍理解的、經(jīng)典的美德與奮斗品牌的愿景聯(lián)系起來。開始一個新的企業(yè)是一個信仰的飛躍，這些象征性的標志承載著一個啟示的承諾。
這意味著運動跟蹤器、流體形狀、飛濺粒子和動作線的增加。對于那些希望創(chuàng)新的企業(yè)，比如科技品牌，這是一個標志潮流，肯定會引起轟動。它提醒顧客品牌不僅僅是一種產(chǎn)品或服務：它是一種活的東西。
隨著每年的標志設計潮流，我們常常期望找到令人眼花繚亂、革命性和顛覆性的技術。另一方面，相似的配色方案是學生設計師在第一年的色彩理論學習的內(nèi)容。這基本上意味著在色輪上對彼此相鄰的顏色進行配對，其結果是創(chuàng)造和諧的科學方法（代替對立顏色的對比）。
雖然類似的配色方案并不一定是新的，但它們在標志設計中日益流行可能表明了對對比度的排斥。色彩是設計師用來影響觀眾情緒的最重要的工具之一。
2021年的標志設計趨勢是重塑這個新的十年的一個機會。從透視技法到簡單造型再到對稱性，從極簡主義到古典主義的復興，我們未來的理性似乎在追求一種純粹。
文章來源：站酷 作者：Brain斌
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
設計規(guī)范是一個老生常談的話題了，網(wǎng)上相關的文章也非常多，但我相信有很多設計師對設計規(guī)范的理解還是比較模糊，認為設計規(guī)范指的就是字體，顏色，控件規(guī)范那些，這種理解其實是比較狹隘的。
于我而言，設計規(guī)范用一句話總結就是：設計規(guī)范是針對特定產(chǎn)品所制定出來的一整套產(chǎn)品標準，包括流程標準，技術標準，設計規(guī)則等等。通過這套標準，能減少錯誤發(fā)生率并提高設計質量和輸出穩(wěn)定性。
舉個例子，我在做QQ的3D厘米秀項目的時候，一開始合作方提交的設計資源正確率很低，風格也各不相同。然后為了解決這個問題，我在項目中定義了流程標準，資源標準，cp合作標準等等。通過這些規(guī)范讓多個不同設計團隊能合作到一起，提升了整體協(xié)作的效率和質量，這些標準就成了設計規(guī)范的一部分。
可以說，每個項目因合作方式，人員習慣，落地形式的不同，所形成的規(guī)范是有區(qū)別的。所以，設計規(guī)范更應該是針對項目來說的，除非是問你Android或iOS這種已經(jīng)廣泛適用的平臺級規(guī)范。不然是很難有標準答案的，回答更應該是一種思路的描述，比如你會如何定義一套規(guī)范、解決了哪些問題以及如何驗證這套規(guī)范真的助力了產(chǎn)品的體驗提升。
1. 遵守用戶習慣，減少認知成本
Don’t make me think。大家都知道，好用得產(chǎn)品都是盡可能的減少用戶思考，不斷去貼近用戶的使用習慣。比如在iOS系統(tǒng)里想返回上一個頁面時，你會熟悉的去左上角找返回操作，但如果把返回操作放在右上角就會很不習慣；再比如對國內(nèi)用戶來說，他們習慣正確按鈕用綠色，錯誤按鈕用紅色，如果你非要反過來制造所謂的差異化，用戶就會感到困惑，誤操作的概率也可能會大量增加。
2. 統(tǒng)一品牌性格
品牌性格不論是大到公司層面，還是小到具體某一個產(chǎn)品，都需要有一套品牌識別體系來約束，只有統(tǒng)一得視覺印象才能更好的讓用戶記住。那這些品牌識別體系其實也是設計規(guī)范的一部分，在具體執(zhí)行中，可以根據(jù)一些品牌核心概念規(guī)范快速做一些風格決策。
比如騰訊QQ的品牌影像風格關鍵詞是青春、互動，敘事和干凈，那么在選擇畫面配色的時候就可以根據(jù)關鍵詞指導畫面的選擇，使得整體的畫風得到統(tǒng)一。
3. 降低新人學習成本
這里所說的新人不單純指剛入職場的設計新人，也包括剛參與到一個新項目的設計老手，設計規(guī)范是能夠以的溝通成本實現(xiàn)快速上手。有成熟的控件資源和標桿的設計參考，就算是之前完全沒做過的設計師也能搭建出一個還不錯的頁面。
4. 提高開發(fā)效率
有了好的設計規(guī)范，開發(fā)就能把一些常用的樣式進行封裝，在需要復用的場景中直接調(diào)用。這樣做，一方面可以通過調(diào)用的方式減少樣式代碼的復制使用，提升效率的同時降低軟件包體積，另一方面也可以減少不必要的工作量，方便后期維護。
5. 保證設計的一致性
有設計規(guī)范的約束，能讓團隊在一個既定的框架內(nèi)做設計，統(tǒng)一大家的輸出質量，從而保證設計的一致性。
設計規(guī)范的學習肯定不是靠死記硬背，而是要講究方法，從我自身的經(jīng)驗來說，我覺得大致可以有以下2個步驟：
在新手期，多去看一些大廠的設計規(guī)范，先建立認知，不要求全部記住。把這些規(guī)范當成字典，先大致了解一遍，等真正做的時候拿不準再去查閱就好了。這里推薦幾個必看的大廠設計規(guī)范官網(wǎng)，建議收藏。
其實網(wǎng)上很多設計規(guī)范，原理之類的文章，源頭都來自于這些大廠規(guī)范，想獲得一手信息，最好是自己去這些網(wǎng)站多看看。
這也就是我為什么不寫具體規(guī)范數(shù)值的原因，因為網(wǎng)上的資料實在是太多太詳細了，寫一些重復的知識實在是沒多少價值。學知識的路上一定不要什么都等別人喂給自己，需要更多的主動性，這樣才能提升自己的學習能力和解決問題的能力。
針對自己要做的模塊，有針對性的找市面上大廠的應用作為參考，直接截圖標注，自己總結規(guī)律印象會更加深刻。
我開始做UI的時候就這樣學習的，不知道字體該用多大，間距用多大，顏色怎么用，就直接去找相類似的界面截圖參考，量它們的尺寸，吸它們的顏色，然后就這樣一步步的把規(guī)范經(jīng)驗積累起來了。
比如從QQ的動態(tài)tab頁面中，我們可以借鑒到很多信息，比如列表的高度，列表左側的圖標尺寸和圓角，間隔線高度和配色，右側的箭頭大小和配色，列表文字的字號和配色，用戶頭像大小和結合的樣式，圖標與文字的間距等等。這些借鑒并非是抄襲，要你做的跟這個界面一模一樣，只是參考這里面的某幾個屬性然后結合自己的產(chǎn)品綜合運用，減少出錯。
發(fā)現(xiàn)了嗎？一個優(yōu)秀的界面設計，上面的任何信息其實都可以拿來參考，就看你會不會用了。
需要強調(diào)的是，這些參考來的標準，并非是標準答案，還是要根據(jù)自己的實際項目需要做調(diào)整，只是至少知道一個范圍，在這個范圍內(nèi)不大會犯錯。
這就像剛開始做設計時一樣，去參考這些規(guī)范相當于做臨摹的練習，這種臨摹是需要的，臨摹的過程中不斷加入自己的思考，然后通過總結，變成自己的知識體系。
隨著對設計規(guī)范理解的加深，自身設計能力的不斷提高，就要開始從設計規(guī)范的使用者轉變?yōu)橐?guī)范的制定者了。如何制定針對項目的設計規(guī)范呢？我的經(jīng)驗是在項目過程中把做的好的和踩坑后的正確解法進行總結，并形成文字，積累多了就形成了規(guī)范。要把每一次遇到的問題都當成是一次改進流程和規(guī)范的機會。
我自己是有隨時記錄的習慣，項目中一旦發(fā)現(xiàn)問題就會趕緊把它記錄下來。有時候甚至還蠻期待出現(xiàn)問題的，因為出了問題才能找到優(yōu)化的機會，自己也能從中找到解決問題的成就感。
曾經(jīng)在QQ的3D厘米秀項目中遇到過非常多的坑，然后從填坑的過程中慢慢總結出各種設計規(guī)范，去幫助項目減少錯誤率，提升設計質量。從最終的產(chǎn)出和結果來看，自身的進步是可觀的，對產(chǎn)品的幫助也比較大，所以很值得去做。
剛掌握設計規(guī)范的時候，干活是特別舒服的一件事，因為做需求可以很快，好像拼拼組件就能完成。但稍微做久一點時間，又會覺得好像沒啥進步，天天拼組件，擔心影響設計的創(chuàng)意性，真是挺矛盾的。
其實，規(guī)范也是要在遵守和引領用戶習慣中不斷迭代的。既要保持大的設計規(guī)范框架不變化，又要在設計的過程中給用戶制造驚喜。比如，整個UI的配色和字體需要保持統(tǒng)一，但在一些圖形，動效上可以做出亮點，讓用戶在整個使用體驗中既是沉浸的又能有些小驚喜。規(guī)范的打破與重建一定是需要一個動態(tài)平衡的過程。
設計規(guī)范絕對不需要死記硬背，而是要充分理解并靈活使用，才能發(fā)揮它的價值。隨著UI行業(yè)的不斷成熟，設計工具的簡單化，各種組件化資源和思維越來越普及，可以預見的是未來一般的UI界面會高度組件化，設計師單純在界面上花費的時間可能會越來越少。
這從行業(yè)的發(fā)展來說，減少了很多體力勞動，讓設計和開發(fā)有更多的時間去打磨產(chǎn)品細節(jié)，肯定是好事。但對設計師自身來說，省下了以前那種常規(guī)設計需求的時間后還能做些什么，設計師的價值又在哪？值得每個設計師去思考。
轉自：優(yōu)設網(wǎng)
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
編輯導讀：作為一個設計師，有時候在工作中會過度重視美感和創(chuàng)意，辨識度是有了，但是缺失了品牌感。沒有了品牌感，這個圖標就可以放在任意一個產(chǎn)品上使用，無法與品牌產(chǎn)生強聯(lián)系。那么，如何設計一個有品牌感的圖標呢？本文將從三個方面展開分析，希望對你有幫助。
我們在畫圖標的時候，往往會忽略掉一個重要的問題：缺失品牌感。也就是說，這個圖標和我們的實際品牌、業(yè)務并沒有什么聯(lián)系，它僅僅滿足了可辨識這個溫飽需求。
圖標缺失品牌感，就會導致同質化的問題，這些圖標放在任意一個產(chǎn)品上都可以通用。
對于產(chǎn)品，記憶點的缺失導致用戶看完后對于我們的業(yè)務、品牌不會產(chǎn)生任何深刻的印象。對于我們設計師，圖標和業(yè)務的斷層則很容易讓我們陷入反復改稿的被動局面，并且設計話語權也越來越小。
那么，有沒有什么系統(tǒng)、易于理解的方法來讓我們的圖標具備品牌感？
當然有。
接下來的這個圖標三步品牌化是我一直在用的辦法，而且屢試不爽，基本用了這個方法，需求方基本一稿過～
文章案例選用了對接京東物流的國際物流項目。當時有一個著陸頁的需求，需要在首屏下的優(yōu)勢板塊中繪制六個圖標，分別對應平臺的六大優(yōu)勢。接下來，我將詳細講解如何運用這個圖標三步品牌化方法繪制與品牌息息相關的圖標。
品牌符號從廣義上來講也就是形狀。
比如天貓最近的雙十一購物節(jié)，便是用一個貓頭來作為這次大促的品牌符號，通過每年固定時間節(jié)點的品牌形象建立心智。
再比如之前大熱的騰訊綜藝《演員請就位》，它的品牌符號就是不同矩形色塊的疊加組合形態(tài)。
通過承載的不同信息可以擴展為不同的類型，比如下面的固態(tài)層、圖片層和文字層就分別承載了內(nèi)容、圖片和文字。
Google在18年于material design中新增了一整塊章節(jié)來闡述圖形語言。
google原話是：形狀可以引導注意力，讓用戶易于識別組件，識別狀態(tài)和品牌語言傳達。
也就是說，形狀并非我們以往認知中的作用，品牌同樣可以借助形狀來加強效應。
最典型的就是谷歌自家出品的google play。你可以看到google play被提煉出的三角形符號被作為外輪廓延展到來所有相關的業(yè)務icon，顯著加強了品牌記憶點。
再比如國內(nèi)的螞蟻財富，便是通過提煉logo中的箭頭符號，將其延展到三個優(yōu)勢圖標當中，一樣得傳達了螞蟻財富的品牌表達。
所以，基于業(yè)務目標以及行業(yè)特征，我們將倒三角這個符號作為我們這次項目的品牌符號。
至于為什么選擇這個形狀，主要考慮到了穩(wěn)定性（三角形自身的穩(wěn)定性、象征專線的穩(wěn)定可靠）、保障性（倒三角常被用于保障承諾類的徽章標志）、隱喻物流（由飛機和定位的圖標變形而來）和三者的戰(zhàn)略合作（開鑼、中國制造網(wǎng)和京東）。
第二步相對而言就比較簡單了，不過考慮到顏色在各個場景及狀態(tài)到通用性，這里需要基于原本的品牌色額外不同明度的顏色。
這里我簡單擴展出淡色和深色，為了避免頁面過冷加入了暖色作為點綴色以提升溫度。
將圖標與業(yè)務緊密結合，能夠與其他競品拉開差異化，這是個相對簡單但是很容易出效果的品牌化的方法。
具體的操作辦法就是：首先根據(jù)所給文案腦爆出圖標所對應的關鍵詞，然后根據(jù)所在行業(yè)的特征篩選關鍵詞，或者進行二次聯(lián)想及轉化。
下面我通過此項目中的三個圖標案例來簡單講述下設計過程，僅為大家提供下思路：
運營所給文案如下：
這段文案意思就是，由于我們平臺和清關行合作，因此讓我們的業(yè)務更具有保障性，貨物可以按時送到客戶手中。
這里我一開始腦爆出了雨傘、鎖和盾牌這三個形象，并且傳統(tǒng)得用了盾牌符號傳達保障性。
這種任何行業(yè)平臺都可通用的形象，并不能關聯(lián)我們這個物流類的平臺。
后面聯(lián)想到到我們跨境、外貿(mào)的行業(yè)特征，將“雨傘”這個形象變形轉化為降落傘，來代替盾牌符號。
一來，降落傘外形似傘，相當于是貨物的保護傘一樣體現(xiàn)”保障“的感受， 另外，這種”空運“式的表達也額外傳遞出按時遞交的概念，很好得體現(xiàn)出典型的”跨境物流“的行業(yè)特征。
運營所給文案如下：
同樣，一開始我著眼于”跟蹤“”實時“”軌跡“這些關鍵詞，腦暴出定位、雷達之類的事物。
但是結合我們行業(yè)特征的話，其實有空間去更貼切到業(yè)務本身。
我們平臺的業(yè)務線包含了兩個站點——美國（主站）和馬來西亞。供應商發(fā)貨后，貨物的軌跡必然是反映在世界地圖中，從起點至終點得分布。
因此我用了地球儀映射全球，以定位來映射包裹收貨地，以延展到定位icon中的虛線映射軌跡。這樣產(chǎn)出的圖標，不僅僅是指代了文案意思，同時表達出對應的行業(yè)特征，和業(yè)務緊密貼合。
文案如下：
一開始，我傳統(tǒng)得想到了一個時鐘圖標來代表。但是仔細想想，這個時鐘圖標僅能代表”時效“的特征，而不能傳達”快“的感受。如何更好得傳達“快”？
發(fā)散思維，我聯(lián)想到交通運輸工具，飛機、輪船、火箭等等，最終我選取了飛機這類跨境物流專線主要使用的運輸工具，它所帶來的快捷相比輪船更加深入人心，又不像火箭那樣脫離現(xiàn)實。
當然并非所有的圖標一定需要去結合行業(yè)特征，其余的三個圖標暫未想到更適合的元素，所以依然選用了常見的形象來傳達概念。我們不需要完全硬坳這個方法，但是身為設計師，我們依然需要掌控我們的項目，充分發(fā)揮自己的創(chuàng)造力來賦予產(chǎn)品更多的power。
最后，我為所有圖標加入了非線性動畫。一方面為著陸頁注入了活力，增加用戶愉悅度，另一方面通過動態(tài)的表達引導用戶更好理解平臺優(yōu)勢，比如地球儀通過加入軌跡的修剪動畫以及定位的彈跳動畫，來更生動得傳達物流軌跡全程跟蹤的這個概念。相比原本的靜態(tài)圖標是不是更好理解了？
更重要的是，動畫的加入也貼合了我們物流行業(yè)“運動”的特征~
篇幅原因，動畫的制作今天先略過，后面可能另抽時間單獨出個教程出來。當然，動力來自于你們的在看或轉發(fā)啊～～（手動斜眼）
我們每次接手一個需求時，都要想想，這個設計可以在哪些地方和我們的業(yè)務、品牌進行關聯(lián)？而不是每次都好像在做一個完全獨立于業(yè)務外的項目，這很容易讓你陷入反復改稿的被動局面，而且話語權也越來越小。
總之，品牌思維是需要設計師格外關注的！
最后，我們再來回顧一下這個圖標三步品牌化這個方法！
第一步，融入品牌符號；第二步，注入品牌顏色；第三步，結合行業(yè)特征。
但愿今日份的分享對你有所幫助！
文章來源：人人都是產(chǎn)品經(jīng)理 作者：Andrewchen
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
圖標是UI設計中除了文字之外最不可或缺的視覺元素，在設計中看似只占一個很小的區(qū)域，但是它卻是考驗設計師基本功的重要標準，了解圖標相關的概念，以及正確繪制的方法，是入門 UI設計的必備條件。
本文將對圖標進行系統(tǒng)的介紹，篇幅所限，本文只針對圖標設計中最重要的設計概念和設計思路為主。大家如果對圖標的其他方面感興趣，歡迎給留言，后續(xù)出相關系列內(nèi)容。過程中也有針對幾種典型的圖標進行實操代練。想要把圖標設計的更好，這就需要我們在平時勤加練習外，還要進行深度的思考，希望我的這篇梳理可以給大家?guī)韼椭?
圖標，也稱為icon或Picoto，是計算機世界對現(xiàn)實世界的隱喻和概括，代表軟件產(chǎn)品中的功能及操作。
圖標做為國際通用性語言，生活中隨處可見，例如商場導視中收銀臺圖標、出口圖標、衛(wèi)生間圖標等，又或者是日常手機里使用的那些App圖標，如微信、電話、短信等。的確，圖標的形式有很多種，它可以應用在很多場景中，并且表現(xiàn)方式非常豐富，有線的、有面的、還有擬物的等。
粗淺劃分的話，UI設計中常見的圖標大致分為兩大類，第一類我們稱之為「標志性圖標」，比如手機中應用啟動圖標；第二類我們稱之為「功能性圖標」，這類圖標經(jīng)常出現(xiàn)于 App 或網(wǎng)站中，用于功能性指示引導或操作。
2. 圖標的重要性
對于UI設計而言，圖標可以說是整個產(chǎn)品的點睛之筆，它甚至可以直接影響著一款產(chǎn)品的形象和氣質。在不少 UI 界面中，圖標幾乎是這個頁面的核心支撐體，它直接影響著產(chǎn)品的視覺體驗和產(chǎn)品調(diào)性。它有以下幾點好處：
3. 起源
圖標的發(fā)展歷程其實有些類似中文、英文等語言的發(fā)展，大體也分為兩個階段：
實物 → 符號；符號 → 新符號
來看一個小例子：
左邊這個東西叫軟盤，可能很多小伙伴沒見過（事實上我也沒有），「保存」圖標就是將「軟盤」符號化之后形成的圖形，「軟盤」是「保存」圖標的實體。但隨著時間的推移，人們逐漸將長期接觸的符號本身作為一種新的實體，在大家的眼里，它不再是一個具象事物的抽象符號，而是直接當成一個實體來使用，甚至這個符號的實體已經(jīng)淡出歷史，但人們還在習慣性使用這個符號。
如你所知，圖標、標識都不是界面設計師所創(chuàng)造的概念，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當中，早期用來傳達信息的圖標演變?yōu)橄到y(tǒng)的文字，而在地圖、圖書、壁畫和建筑等各種各樣的地方，還存在著用來代表和傳達特定概念的圖標和標識。
隨著技術的發(fā)展，計算機誕生了，而顯示器的出現(xiàn)，也為圖形化界面的誕生，鋪平了道路。20世紀70年代，施樂在位于帕羅奧托的研究所當中，誕生了最早的擁有圖形化界面的電腦，著名的「 Xerox Alto」。這款昂貴的概念機最終并沒有走進大眾的視野，但是它的后續(xù)機型施樂之星在1981年問世，并且成為了計算機史上的重要里程碑，而 Xerox Alto 對于喬布斯和比爾蓋茨的啟發(fā)，更是引發(fā)了計算機歷史上最著名的一場戰(zhàn)爭：蘋果VS微軟，Windows 對抗 Macintosh。當然這都是后話。
4. 擬物圖標
80年代，想做的具象（擬物），卻因為像素和機能的限制無法實現(xiàn)，所以對好的標準是越具象越好 。到了1995年計算機顯卡的顯示能力得到革命性的改變，Photoshop 5.0的發(fā)布，恰好讓憋屈了這么多年的圖形和UI設計師們巴不得立馬上天（終于可以施展拳腳了）。從win95開始，到osx/win7的這十來年正是UI擬物化發(fā)展壯大并大行其道的階段。同時也是顯示技術飛速發(fā)展的十年，從640×480，到800×600，到1024×768，到1920×1080 / 1920×1200，再到4k，再到retina屏，平面顯示技術能達到的水準基本已經(jīng)是人眼能感受到的。
當人們對計算機尚不熟悉的時候，用戶的需求是“弄懂這玩意到底是干嘛的”，是用戶體驗的核心。擬物化的圖標和界面會給予用戶具象化的引導，比如回收站，音樂，電腦，文件夾的圖標，用戶可以直接聯(lián)想到現(xiàn)實中的物品并更快的理解這些程序或者文件的作用。包括立體的按鈕引導用戶點擊，用戶都可以通過聯(lián)想，更快的理解操作/互動的方式。這樣可以降低用戶的學習成本，縮短學習周期，讓用戶更快的適應計算機的使用，弄懂這玩意到底是干嘛的。
來自蘋果的Macintosh系統(tǒng)在圖形化界面發(fā)展史上是無法繞過的里程碑。1991年，蘋果借由Macintosh，首次發(fā)布了彩色的圖標設計。圖標所能容納的信息量比起上一個黑白界面的時代更大，全新的樣式使得它在信息傳達的功能性上有了明顯的提升。
但是隨著 ICON 的發(fā)展，擬物圖標也帶來了一些問題，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾。如今人們對各種常規(guī)交互模式人們也早已了然于胸，用戶的需求也從“弄懂這玩意這么用”變成了“快捷更舒心的使用”。用戶用的方便變成了用戶體驗的重心。
再者，大家都熟悉的事物其實非常有限，而 APP 的創(chuàng)新卻在不斷進行，很多創(chuàng)新的產(chǎn)品本身在現(xiàn)實世界就沒有參照物，所以也決定了擬物圖標必然會被扁平化取代。
5. 扁平化
從iMac到iPhone引領的擬物圖標更是開啟了一個絢麗的圖標設計時代。擬物時代盛行也帶來了一些麻煩——擬物圖標的質感、光影會分散用戶的注意力，形成「視覺噪聲」。于是UI設計師開始探索更新的表現(xiàn)形式來設計界面中的圖標。如微軟引領的Metro風格圖標設計和Google引領的長投影風格的圖標設計。 不管你喜歡與否，當年的微軟讓 Metro 和扁平化賺足了眼球，甚至讓人一看到扁平化就想到Metro。
區(qū)別于擬物化更加接近于真實的實物，扁平化則是簡化真實的物體，轉而通過抽象、簡化、符號化的設計元素來表現(xiàn)。
2013年，蘋果推出了iOS7 開啟了擬物向扁平轉變的風潮。在iOS7中對整個界面的圖標、按鈕、字體、信息層級等各方面都進行扁平化設計。蘋果的這一系列動作打破了人們對扁平化風格的芥蒂，并最終推動了整個移動端扁平化設計的進程。
那么，蘋果公司在堅持了多年的擬物化設計風格之后，曾經(jīng)作為該風格的引領者和受益者，為何會突然轉向，熱情地擁抱起扁平化設計來了呢？難道是因為我們視覺疲勞了嗎？答案很簡單，
總之，扁平化這種二維設計已經(jīng)成為一種更加流行的設計風格。所有元素的邊界都很干凈利落，較多使用色塊和符號化的圖形以及無襯線修飾的字體，界面更加整齊簡潔。使用這種設計風格的優(yōu)點是可以更加簡單直接的將信息和事物的工作方式展示出來，將一切干擾信息弱化，減少認知障礙的產(chǎn)生。
雖然扁平化的優(yōu)點有很多，也適合當下技術發(fā)展需要的，但是缺點也是顯而易見的。譬如表現(xiàn)形式太過于抽象、缺乏情感的傳遞，而事實上發(fā)展到今天的扁平化設計確實也在不斷的優(yōu)化自己~使得自己更加的適應時代的發(fā)展。另外還有一個點就是所謂的 “審美疲勞”。當你一直看著簡單的東西，久而久之就會越來越煩，你就會越來越想要看那些豐富多彩的東西。反之亦然。這也表明 UI 新的趨勢再一部向“突出內(nèi)容”的本質靠攏，即“認知簡約”。也許當滿世界都是扁平化后，擬物化的設計卻又變得更顯眼了呢？最近流行的“新擬物”風格就是最好的證明。
6. 微扁平、輕擬物
由于扁平風格表現(xiàn)形式單一，同質化嚴重，缺乏個性，圖標慢慢開始發(fā)展到微扁平輕擬物的方向。相較于擬物風格不會有太多復雜的視覺元素，與扁平風格又有了更豐富的情感內(nèi)容，所以現(xiàn)在界面中，在面積比較小的區(qū)域我們使用扁平圖標或線形圖標；在面積比較大的區(qū)域我們會使用加入漸變甚至輕質感的圖標。
7.「新擬物」風格圖標
蘋果在 WWDC2020 搞了個大新聞：macOS 將與 iOS 統(tǒng)一步調(diào)，從X86 平臺遷移至ARM 平臺，并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。
macOS Big Sur是第一個將「新擬物」設計投入大規(guī)模商用的操作系統(tǒng)，這可視為「新擬物」在實用化道路上的首次勝利。值得一提的是，在 Big Sur 的 ” 外觀 ” 設置里，多了一項名為” 自適應強調(diào)色 “的選項。蘋果將主題色的指定權留給開發(fā)者，這是否暗示新一代 App 在光影上會有更豐富的效果？
「新擬物」設計的精髓在于對光線的絕妙運用。它把光效拿捏在 ” 扁平 ” 與 ” 擬物 ” 之間，進而打造一種全新的視覺體驗。
不同于傳統(tǒng)的擬物，「新擬物」雖然將符合物理規(guī)律的光影效果引入界面，但它所模擬的材質是自然界不存在的。換句話說，「新擬物」是將真實光線用于虛擬對象，而 ” 擬物 ” 是還原實際物品在特定光照下的效果；
由于整個設計界將不得不考慮新擬物風格，圍繞該風格的可能性將會有爆炸性的發(fā)展，并且這種新的數(shù)字空間設計理念如何能夠合理地適用于用戶界面設計和功能性將取得更大的突破。與以往一樣，第三方應用將比蘋果更大膽、更快速地推動這一風格——這也是我們將會真正開始解鎖新擬物優(yōu)勢的時候。
產(chǎn)品應用圖標（也叫啟動圖標），是指產(chǎn)品「品牌標識」中獨立的圖形，也是產(chǎn)品品牌的核心組成元素。作為產(chǎn)品所有視覺通信中必不可少的元素，其使用率非常高，所以該獨立圖形在設計中應做到最簡化。
一個小問題：為什么iOS系統(tǒng)中圖標形狀是統(tǒng)一的圓角矩形？
蘋果官方給出的解釋是在空間有限的的區(qū)域，太多形狀顯得雜亂，如果形狀不規(guī)則，就無法控制統(tǒng)一間距，設計師水平也不一樣，這樣統(tǒng)一規(guī)范能保證標準。推薦一個iOS啟動圖標資源網(wǎng)站，設計時可以找找靈感。
△ iOSIcon gallery
而安卓應用圖標就沒那么規(guī)范，處于百花齊放的狀態(tài)，各家廠商都在設計獨屬于自己的視覺語言。大家都不一樣，也就導致沒有個性之美。
安卓應用圖標設計規(guī)范網(wǎng)站
應用圖標的類型
應用圖標有不同的風格，這些風格有可能偏擬物，也有可能很扁平，有可能很抽象，也可能很具象。通過不同的設計風格可以更加標新立異，從而被用戶記住。因此能在第一時間贏得用戶的好感和記憶非常重要，將產(chǎn)品圖標設計的好看且容易被人記住就成了非常重要的任務。應用圖標的風格主要有以下幾種。
中文是我們的母語，每一個漢字都令人記憶深刻，文字也是最直白的信息，而且不容易被曲解，所以很多國內(nèi)的產(chǎn)品都會使用文字作為自己的產(chǎn)品圖標。中文設計模式即字體設計，提取應用名稱中的一個或多個漢字，進行設計變形，變形后的字體圖形具有產(chǎn)品屬性的外貌特征。常見中文圖標又分為單字、多字和字加圖形的幾種類型。
單字
提取產(chǎn)品名稱中最具代表性的文字，通過對筆畫及整體骨架進行字體設計，以達到符合產(chǎn)品特性和視覺差異化的目的。其優(yōu)點是可以直截了當?shù)膫鬟f產(chǎn)品信息，識別性強。
多字
多字圖標設計要注意的是整體的協(xié)調(diào)性和可讀性，一般為2-3個字，最多兩行（四個字）排列。
其優(yōu)點是更加直接的告訴用戶產(chǎn)品名稱，達到品牌推廣的目的，減輕用戶記憶成本。其缺點是如果圖標上的文字和下面的輔助文字完全一樣，會顯得重復啰嗦，像介紹了兩遍自己一樣。
字加圖形組合
文字加輔助圖形的組合，也是常見的產(chǎn)品圖標設計方法，相比純文字圖標，顯得更加豐富有獨特的產(chǎn)品的氣質和屬性。需要注意的是做好文字和輔助圖形間的平衡。
英文設計與中文設計的設計模式相似，通常是提取應用名稱的首字母融合產(chǎn)品的功能賣點或行業(yè)屬性進行創(chuàng)意加工，新的字母圖形依舊保持本身的識別性。
單字母
通常提取英文首字母進行設計，由于英文字母本身結構簡潔，稍加改動就很容易達到設計感于識別性兼?zhèn)涞漠a(chǎn)品圖標。需要注意的是英文字母本來就少，都用字母很容易創(chuàng)意雷同，難以形成差異化。
多字母
提取產(chǎn)品全稱或幾個單詞的首字母組合而成，形成獨有的產(chǎn)品簡稱，方便用戶記憶。
字母加圖形組合
字母加圖形組合的設計形式比較廣泛，圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進行創(chuàng)意加工，可以使應用圖標視覺表現(xiàn)更加飽滿。
直接用數(shù)字做應用圖標的相對較少，但是數(shù)字識別性強，易于傳播的特點。利用數(shù)字進行設計能給人親和力。難點是怎樣與品牌形成強關聯(lián)性。
由于符號本身的含義會對產(chǎn)品屬性有一定限制，所以特殊符號在應用圖標的設計案例中相對較少。如“$”符號可代表與金錢有關聯(lián)性的產(chǎn)品，無法運用在與此屬性無關的產(chǎn)品上。不過也正是由于自身屬性強的特點，可以很好的詮釋關聯(lián)的產(chǎn)品屬性。
除了中英文圖標，還有圖形類圖標比較常見。這種類型的設計模式的優(yōu)點就是直觀醒目和簡潔大方，視覺沖擊力強。常見的有以下幾種：
幾何圖形的設計模式給人簡約、現(xiàn)代、個性等視覺感受，從單個具象圖形到復雜的空間感營造，幾何圖形的表現(xiàn)形式非常豐富。不同的形狀給人的情感表達不同，如三角形給人傳達個性、穩(wěn)定、現(xiàn)代、時尚等，添加圓角后又會更加親民、可愛。我們可以結合產(chǎn)品特征，合理的選擇適合的形狀圖形進行創(chuàng)意。此類型較考驗設計師的圖形創(chuàng)意能力。
單雙形是指應用圖標只展示單個或兩個的剪影圖形。通常有兩種設計方式，在深色背板上使圖形反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖形填充顏色，圖形可以是單色也可以是漸變色。這種設計模式的優(yōu)點是簡潔明確，易于用戶在眾多的應用圖標陣列中快速找到目標。
線形的設計模式分為兩種設計方式，在深色的背板上讓圖標反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖標填充顏色，圖標可以是單色也可以是漸變色，或是其他視覺效果。纖細的線框圖形傳遞出簡潔輕快的氣質，適合于文藝、清新的應用，在界面設計時保持這種干凈明快的風格，才能與應用圖標設計表里如一。線性風格一定注意不可太細，如果做得太細，在手機上看會非常尖銳，顯得不易點擊。例如airbnb，它的背景是一個微漸變，線性風格曲線組成“A”，同時是一個小蜜蜂。
動物作為圖標設計元素是比較常見的方式之一，通過提取動物整體形象或者局部特征部位作為設計元素，背景填充單色或漸變色，簡潔明了。動物給人的印象比較可愛，有助于加深用戶對產(chǎn)品的印象。常見的表現(xiàn)形式有剪影、線性描邊風格、面性風格等。
卡通風格的產(chǎn)品圖標會讓用戶更有好感，一個可愛的卡通形象有助于加深用戶對產(chǎn)品的印象。很多決策者會認為卡通是一種低齡的審美，這種想法其實是錯誤的。卡通可以說是一種各年齡層都能接受的風格，例如Bear，它的卡通形象是一頭潔白的北極熊，簡潔的形象設計與產(chǎn)品的閱讀體驗一致。
以正形為底突出負形特征，以負形表達產(chǎn)品屬性，傳遞產(chǎn)品信息。例如NPR One，圖標中的負形圖形是對話氣泡，告訴我們這是一個媒體或社交的應用，而正形圖形強調(diào)產(chǎn)品氣質。
白色漸變的設計模式與透明白色相似，都是通過白色不透明度來構建出圖形的立體控件感，它比單純的剪影圖形更加具有質感，這種質感帶給了我們視覺上的享受。例如印象筆記·圈點，它是一只白色的鵝毛形象，垂直的線型漸變使鵝毛富有了生命力一般，顯得更加輕柔。
色彩比任何圖形都更能抓住用戶的注意力，同時色彩更加具有情緒，能傳遞出應用的產(chǎn)品氣質。比起白色漸變圖形，彩色漸變圖形的色彩表現(xiàn)更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比，營造空間感。應用圖標的背景和圖形的色彩要拉開對比，一般為白色或淺色背景。
無，即沒有設計。除了背板什么也沒有。雖然這類設計模式比較獨特，但我們并不鼓勵，因為用戶很難從一個顏色上得到有用的信息。例如“黃油相機”的圖標設計成一塊黃油的樣子已深入人心了。
打開率是一款移動應用的重要數(shù)據(jù)，應用只有被打開才有它的運營價值。在我們手機里安裝了許許多多的應用，除了一些我們每天必須使用的應用如微信，其他大多數(shù)的應用在沒有使用場景時很難想到去打開他們。因此，這些應用如何在手機屏幕上吸引用戶的注意，鼓勵用戶打開顯得非常重要。于是在應用圖標上做文章就顯得很有必要，常見的設計手法有：
在設計模板還沒有如今這么發(fā)達時，設計師需要設計啟動圖標（1024x1024px）之后按照程序員的要求切出幾十個不同尺寸的圖標。比如，在手機中@3x情況下桌面圖標尺寸為180x180px，在@2x情況下為120x120px；在應用商店圖標需要使用的尺寸是1024x1024px；這個工作太煩人了，好在現(xiàn)在我們只需要專注在啟動圖標設計本身上了。在蘋果給我們的這套資源中，有 Template-AppIcons-iOS 這個文件。打開這個文件，用我們自己設計的啟動圖標替換掉智能對象里的內(nèi)容，你會發(fā)現(xiàn)所有尺寸的圖標都變成了我們的圖標。iOS的圓角圖標并不是標準的圓角矩形，而是某種連續(xù)曲線。
我們把兩個圓角曲線放大重疊后進行對比，其中灰色線框為標準圓角矩形繪制的圓角，紅色為iOS平滑圓角，它與圓角矩形擁有相同的對角線錨點，區(qū)別在于其曲線稍微向中心收緊。
事實上，我們很難在Retina屏幕上區(qū)分這么細微的差別，因此設計師在繪制iOS應用圖標時不必過分糾結它的圓角，直接繪制成直角矩形交給開發(fā)同學即可，如果應用圖標需用于展示，可以繪制120*120px圓角矩形、27px圓角半徑代替。
安卓應用圖標同樣需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六種。設計師提供給程序員的同樣是直角矩形，然后程序員通過代碼進行切割使其變成圓角圖標。
在我之前的設計作品中，有個“影記”的攝影社區(qū)APP，本篇我們就以此為產(chǎn)品案例拋磚引玉來學習一個iOS應用圖標的繪制過程。
尋找隱喻
隱喻是在彼類事物的暗示之下感知、體驗、想象、理解、談論此類事物的心理行為、語言行為和文化行為，即人們看到某樣東西或聽到某件事情能夠馬上在大腦中形成聯(lián)想。例如說到攝影，馬上就能想到相機、快門、閃光燈、暗房等。然后通過這些聯(lián)想詞，去找一些氣質相符的圖片制作情緒版，通過情緒版可以感受到產(chǎn)品的調(diào)性，然后從中提取一些形狀和色彩作為產(chǎn)品圖標的主要造型。
競品分析
應用市場各類產(chǎn)品不勝其數(shù)，在同類應用中存在大量相似的應用圖標設計，如何保持應用圖標的唯一識別性非常重要。唯一識別性不單單指圖形與其他應用有所差異，避免創(chuàng)意撞車，讓用戶在腦中形成思維模式，它還指圖形表意是否清晰，是否符合用戶的心里預期。
提取關鍵詞
根據(jù)收集的圖片，創(chuàng)建情緒版，結合自己的產(chǎn)品提取關鍵詞，然后就知道在接下來的設計中應該突出什么。我們從“影記”中可提取首字母“Y”，相機中的“快門”“信號燈”“開關機”，并依次將關鍵詞描繪成下列圖形。
抽象圖形
確立了首字母“Y”、“快門/開關機”和“信號燈”作為應用圖標的主圖形，接下來將繪制好的3個圖形相結合，即完成初步設想。
圖標柵格線
使用iOS應用圖標柵格線作為設計依據(jù)有助于建立和諧的圖標繪制比例，并與iOS系統(tǒng)保持統(tǒng)一，下圖為iOS系統(tǒng)天氣應用使用了圖標柵格線。將圖形放置在圖標柵格上調(diào)整大小并注意圖形與其比例協(xié)調(diào)。
豐富細節(jié)
通過上面圖形組合已基本完成應用圖標的設計，接下來我們還應從顏色、質感、背板等著手豐富圖形的細節(jié)，建立起應用的產(chǎn)品氣質?！坝坝洝弊鳛閿z影師分享佳作平臺，攝影師們用的器材顏色大多以黑色為主，因此酷酷的黑色更適合作為應用的主色。白色的信號燈過于普通，使用相機本身發(fā)出的橘紅色燈光作為信號燈的顏色，使其更加具有動感和活力。整體像「消息氣泡」的造型暗示可以在這里進行攝影交流。
多場景測試
將應用圖標設計稿交付開發(fā)提交至App Store上架，正確的圖標設計稿應是直角矩形，iOS會自動應用一個圓角遮罩將圖標的4個角遮住，假如圖標設計稿自帶圓角，就有可能露出圖標透明區(qū)域。
△ 注：上圖非實際大小，僅表明不同分辨率下的比例關系
此外，應用圖標還會以不同的分辨率出現(xiàn)在不同場景中，例如在iPhone 8plus上需@3x(120px)的圖，而在iPhone7的設置頁需要58px的圖，就需要將120px的圖縮小。將大圖縮小成小圖時，一些細節(jié)就會丟失，使畫面變得模糊，因此設計師應對小尺寸圖標進行細微調(diào)整，去除不必要的裝飾元素，以確保應用圖標在小分辨率應用場景下也能保持清晰的識別度。
除了產(chǎn)品圖標，還有一種圖標被稱為功能（或系統(tǒng)）圖標，功能圖標指的是擔負一定功能和含義的圖形，一般來說需要像文字一般地被人迅速理解，所以表達方式上不適合特別復雜，如微信底部四個系統(tǒng)圖標就使用了比較簡潔的線性風格。
功能圖標在UI設計中占據(jù)非常重要的作用，幾乎存在于每一個應用界面中，無論是在導航欄、工具欄或標簽欄，還是在首頁、詳情頁或個人中心頁，都隨處可見功能圖標的身影。功能圖標具有明確的表意功能，其作用在于替代文字或輔助文字來指引用戶進行快速導航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習慣，有助于用戶形成記憶思維，提高應用的易用性。同時設計精致、風格統(tǒng)一的功能圖標提升了產(chǎn)品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來了良好一致的使用體驗。
圖標是良好設計系統(tǒng)的基本組成部分，對營銷材料非常有幫助。他們是插畫內(nèi)容的基礎構建塊，但他們也具有很高的技術性。因此科學嚴謹?shù)脑O計規(guī)范能幫助我們設計精致、風格統(tǒng)一的圖標。
一致性是設計圖標的關鍵，在繪制時，一定要確保所有的圖標都相同大小。在UI界面設計中，網(wǎng)格的大小必須要是4或12的倍數(shù)（安卓是8的倍數(shù)，iOS是4的是倍數(shù)）。@2x下作圖要保證是4的倍數(shù)，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數(shù)了，這個數(shù)值可以整除2、3、4，適配@1x和@2x的屏幕，界面中通常使用的圖標尺寸24*24px、48*48px。這里建議用48px做為常規(guī)圖標設計尺寸。
通常我們只需要選擇一個通用的尺寸來繪制，然后讓開發(fā)人員根據(jù)倍數(shù)調(diào)整可能需要的尺寸即可，這樣就不用一遍又一遍的去繪制不同大小的相同圖標了。
不過當我們的圖標涉及一些復雜的細節(jié)時，還是需要根據(jù)尺寸大小單獨繪制。比如我們的系統(tǒng)圖標可能是24px，但是營銷圖標是80px，兩者的使用差別會很大，那么我們就需要為那些較大的尺寸添加一些細節(jié)。
知識點：
這里建議從最大的尺寸開始，然后依次繪制小一點的。因為刪除和簡化細節(jié)要比添加容易得多，也能的保留圖標原始狀態(tài)。
圖標繪制基于48x48px畫布繪制的線性圖標，線寬默認為4px，不同場景縮放比例使用：
如果你要繪制描邊圖標，那么需要保證所有的筆畫都是相同的粗細，并且筆畫之間的間距不要比筆畫本身更細。
圖標網(wǎng)格為圖形元素的一致但靈活的定位建立了明確的規(guī)則，keyline是網(wǎng)格的基礎-。通過使用這些核心形狀作為知道，你可以跨系統(tǒng)保持一致的視覺比例。
圖標柵格用于圖標元素繪制的參考并幫助建立清晰的內(nèi)容輪廓邊界，關鍵線有助于促進圖標統(tǒng)一性，簡化設計過程中比例調(diào)整成本，繪制小圖形需要參照小正方形的keyline。
直角拐角：當基礎圖形為滿容器正方形時，建議使用3X圓角，當基礎圖形為滿高（寬）矩形時，建議使用2X圓角。當基礎圖形為較?。ㄐ∮?/2寬高）矩形時，建議使用1X圓角。
非直角拐角：根據(jù)圖標場景，通常情況下無論角度，默認均為1X圓角；特殊弧度的曲線“拐角”情況除外，根據(jù)圖標設計需要單獨考慮。
封閉區(qū)域，有閉合曲線構成的為封閉區(qū)域，可以進行獨立顏色填充；
非封閉區(qū)域，由非閉合曲線構成的非封閉區(qū)域，原則上是不能進行獨立的顏色填充；
封閉區(qū)域為曲線形狀且有相交線段時，原則上是不能進行獨立的顏色填充；
當線段與曲線相交或者與直線非垂直相交時，線段末端用圓頭端點；
當線段與直線垂直相交時，線段末端用方頭端點；
當圓點的直徑與線寬一樣時，圓點用圖形繪制，不用線段；
當圓形和方形在小于16px時建議用圖形繪制，不要用線；
傾斜角度
根據(jù)像素的網(wǎng)格線來設置一條線的起點和終點，會讓你的圖標看起來更清晰。圖標中的傾斜角度應為45的倍數(shù)，保持與keyline中的對角線或十字垂直相交線保持平行關系，若是矩形外框，傾斜角度也可以與矩形的對角線或十字垂直相交線保持平行關系。應避免用13.7°，81°等這些奇怪的數(shù)值。
線段和端點
為保證風格的整體一致性，圖標所有線段端點默認均應為與線段同寬的圓角端點，通常情況下線段端點和可編輯節(jié)點坐標以整數(shù)坐標為佳。默認基于48px畫布繪制的線性圖標，線寬默認為4px，無論直線和曲線在任何時候線寬都應均保持一致。
圖標斷口與間距
內(nèi)部結構與外框的間距不得不小于線寬，內(nèi)部元素之間的間距不得不小于線寬的1/2px。
外形框的端口尺寸關系：4px、8px、12px，建議尺寸為4的倍數(shù)。
圖標風格變換
圖標在特定規(guī)律下允許不同風格之間的變換，分別為線性風格（默認）、填充風格、混合風格、多色混合風格。
單雙像素描邊
如果為圖標設置1像素的邊框，邊框應該使用外部或內(nèi)部的描邊樣式，但是不建議居中描邊樣式，居中描邊的1px邊框，雖然在放大它們的時候，它們看起來很清晰。但在100%比例大小顯示的時候，它們會模糊。雙數(shù)用居中描邊，單數(shù)用外描邊，所有錨點要與網(wǎng)格對齊不能出現(xiàn)偏移。
線段閉合
所有線段結合處應為閉合狀態(tài)，避免錯位出現(xiàn)。
統(tǒng)一透視
如果圖標有透視需求的話，就要統(tǒng)一透視角度，例如圖標透視方向朝左，那就統(tǒng)一所有圖標的透視角度都朝左邊。
除了像素柵格，還有視覺柵格。視覺柵格可以幫助我們找出圖標的中心在哪里，以及人眼能感知到它有多大。圓形和弧形物體看起來會比正方形更小。因此我們應該在繪制圖標時設定一個固定大小的容器，這樣它們在導出時就都是相同的尺寸了。添加內(nèi)邊距可以讓圖標在視覺上看起來更加平衡，避免以后開發(fā)時還需要重新調(diào)整。
繪制圖標不光要滿足物理上大小統(tǒng)一，還要實現(xiàn)視覺上大小統(tǒng)一。設計師要懂得調(diào)節(jié)圖標大小以避開視覺上的覺錯。
UI界面的圖標通?？梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。 如果把它們做成高斯模糊效果，你就會發(fā)現(xiàn)它們具有相同的視覺重量，因為它們變成或多或少相同的斑點效果。
根據(jù)圖標形狀，將它們放在相應的框架中。你就會發(fā)現(xiàn)，方形圖標比三角形或細長圖標更緊湊。
清晰是圖標的基本要素，在sketch中，參數(shù)不要有小數(shù)點，讓圖標占滿像素網(wǎng)格。因為計算機不能識別小數(shù)點，導出圖標時計算機會把不能識別參數(shù)的部分拉伸填滿像素網(wǎng)格，導致圖標出現(xiàn)虛邊。
通常從一套圖標中最復雜的那個開始，因為它會幫助我們定義相同的視覺重量，讓所有的圖標視覺重量保持一致。因為當圖標具有不同的細節(jié)層次時，更復雜的圖標會吸引用戶更多的注意力，而且視覺上看上去更重。
默認顏色：如果是功能圖標，那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復雜，不利于和其他設計師協(xié)作。而對于營銷圖標，出于品牌宣傳的目的，你可能會想要使用兩種顏色，個人認為圖標最好是單一顏色的，3種或3種以上顏色的東西都是插圖，而不是圖標。
選擇狀態(tài)顏色：未選擇圖標顏色為#000000，透明度為87%；未激活圖標顏色為#000000，透明度為54%；禁用圖標顏色為#000000，透明度為38%。
功能圖標在UI設計中占據(jù)非常重要的作用，幾乎存在于每一個應用界面中，無論是在導航欄、工具欄或標簽欄，還是在首頁、詳情頁、或個人中心頁，都隨處可見功能圖標的身影。功能圖標具有明確的表意功能，起作用在于替代文字或輔助文字來指引用戶進行快速導航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習慣，有助于用戶形成記憶思維，提高應用的易用性。同時，設計精美、風格統(tǒng)一的功能圖標提升了產(chǎn)品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來良好一致的使用體驗。
常見的功能性圖標風格大致有三種：線性圖標、面形圖標和扁平化圖標。但其實我們可以將「扁平化圖標」可以看作是「線性圖標」和「面型圖標」的一種組合形式，所以歸根到底，基礎的圖標風格有兩大類：「線性圖標」和「面型圖標」；
線性圖標
線性圖標是通過線條來表現(xiàn)物體的輪廓，它比面形圖標更能塑造優(yōu)美的外觀，且作為貫穿圖標繪制的線條本身就是一種設計語言，因此繪制整套線性圖標會更加統(tǒng)一，具有整體感。例如twitter和微信底部的tab圖標等。在一個場景下的幾個同等重要的圖標，如果線條粗細不一致，會給人一種權重上存在差異的感覺。所以，在繪制線型圖標時，通常會使用統(tǒng)一粗細的線條。
線性圖標具有辨識度高，清晰，簡約易識別等優(yōu)點，線性圖標不會對頁面造成太多的視覺干擾。缺點是：線性圖標的創(chuàng)作空間較少，太復雜的線性圖標對識別性產(chǎn)生較大的困擾。
常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細 ICON 所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。圓角粗線條的 ICON 顯得飽滿而可愛，個別 App 的底部標簽欄圖標采用粗線條設計，但粗線條的 ICON 圖形較為極簡才適用。
線性圖標根據(jù)樣式還可以分為：雙色線性圖標、線面填充圖標、線性漸變圖標。
線性圖標使用場景
在iOS所有原生應用的導航欄和工具欄都采用了2px線框的圖標設計，很多APP產(chǎn)品的標簽欄都選擇用線性風格的圖標設計。無疑，線性圖標可以減少視覺干擾，讓用戶集中在產(chǎn)品核心功能上，同時輕量化的視覺語言也與扁平化的設計風格更為融合。它比面形圖標更能塑造優(yōu)美的外觀，且線條本身就是一種設計語言，因此繪制整套線性圖標會更加統(tǒng)一，具有整體感。
通常，在UI設計中，線性圖標很少和背板同時存在，因為線條的圖形視覺表現(xiàn)力較弱，容易埋沒在背景色中，但也不是必須的，如果掌握好一定的規(guī)則，一些簡單的線性圖標和背板的組合也會很協(xié)調(diào)。
面形圖標
面形圖標是以面為主要表現(xiàn)形式的圖標，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。在「微信」底部標簽欄中，未選中的圖標是線性圖標，而選中的圖標則是面形圖標，同時顏色會變成微信的品牌綠色再次暗示用戶選中狀態(tài)。面形圖標占用的面積要比線性圖標多，所以更加顯眼。實際上，蘋果在新的設計規(guī)范中也建議開發(fā)者在APP底部標簽欄中全部使用面形圖標，是否處于點擊態(tài)通過改變填充圖標的顏色進行區(qū)別。這是因為填充圖標看上去像可點擊的。
面形圖標具有表意能力強，細節(jié)豐富，情緒感強，視覺突出，創(chuàng)作空間大等優(yōu)點。面性圖標可以讓用戶迅速定位圖標位置，預知點擊后的狀態(tài)。但是面性圖標在頁面中不可過多出現(xiàn)，否則會造成頁面臃腫，難分主次，用戶視覺疲勞。
面性圖標根據(jù)不同的配色樣式可以分為：單色飽和度填充圖標，純色漸變圖標和多色漸變圖標。
基于最基本的「線性圖標」和「面型圖標」，通過不同的形態(tài)和風格的組合，再結合豐富的 表現(xiàn)手法，就可以設計出形形色色的圖標風格了。比如：不同粗細線條線性圖標的組合，或者面面組合，或者線面組合。大家在設計圖標的時候，需要根據(jù)自己的產(chǎn)品特征、受眾和使用場景，去選擇適合自己的表現(xiàn)形式。
面形圖標使用場景
面形圖標具有廣泛適用性，通常在運動、時尚類應用的標簽欄出現(xiàn)。由于面形圖標的視覺占比最大化，具有強烈的視覺表現(xiàn)力。
功能入口的面形圖標通常分為反白和正形兩種類型。反白即在彩色背板上顯示白色的圖標，正形即圖標直接填充色彩且無背板。在帶有背板的圖標設計時要注意圖標與背板的尺寸比例，雖沒有嚴格的繪制標準，但從整體視覺效果上考慮，圖標尺寸最好不低于背板直徑但1/2，最大不超過背板直徑的0.618(黃金比例)，同時還要考慮所有圖標的視差一致。
扁平化圖標實際上是線性圖標和面形圖標的一種組合形式，這種類似插畫感覺的圖形一開始多用于引導頁、空狀態(tài)也的情感化設計，后來逐漸在標簽欄、首頁主要功能入口也出現(xiàn)了扁平化圖標的身影。精致的扁平化圖標令人賞心悅目，拉近了與用戶之間的距離，從而建立起良好的用戶印象。
品類區(qū)圖標的衛(wèi)視通常是位于搜索框、banner之下（也俗稱“金剛區(qū)”），而且品類區(qū)區(qū)域通常會占屏幕22%-25%不等，且位于屏幕頭部，從用戶閱讀屏幕內(nèi)容的視覺流來說位置至關重要，而且是聚合各類子版塊的入口，為各個子版塊分發(fā)內(nèi)容引導流量。所以其重要性不言而喻，產(chǎn)品要讓用戶通過不同類型展示方式的組件找到相應的功能，而圖標具備精煉高度概括內(nèi)容的特性，識別度也大于文字，所以「金剛區(qū)」的圖標設計通常以圖標+說明文字為主。
常見的設計手法有：圓形底板+45度漸變+白色面形+微投影；45度漸變+扁平圖標+微投影；簡單線性；45度漸變+不透明度+面形圖標。
文字圖標是指用文字直接表示特定含義的圖標符號。由于文字本身就是一種演化而來的符號，英文的首字母或者詞語關鍵字本身也具備很強的信息濃縮性，因此在某些場景下，采用文字或字符作為圖標，是一種很不錯的表現(xiàn)手法。
比如「提示」圖標，使用一個圓圈包裹一個英文字母「i」，意為 information，表示「注釋信息」的含義；比如停車場直接使用「Parking」中的首字母 「P」，這些都是比較約定俗稱的使用方式。還有一些場景，很難用象形或者表意的方式進行表達，那么就很適合使用文字符號，例如京東/天貓某些商品具備「正品保證」的標識，這個概念太抽象了，很難用象形去概括，創(chuàng)造新的表意符號又很難被大眾接受，這時「正」字就很適合作為這個場景特定的圖標符號，作為針對中國用戶群體的產(chǎn)品圖標，簡單粗暴且有效。
知識點：
如果可能的話，盡量避免在圖標中使用文字。因為圖標應該是全球性的。如果你確實需要文字圖標(例如貨幣符號等等)，那么請你自己繪制，而不是直接使用字體。
這幾年動效設計的熱度穩(wěn)定增長，只有靜態(tài)排版的時代正在過去。動效的出現(xiàn)，也讓圖標擁有了更多的可能性。動態(tài)圖標可以讓你的app或網(wǎng)站生動有趣，在我們所常見的各種數(shù)字產(chǎn)品當中，UI組件和各色元素都已經(jīng)動畫化了。
運動中的物體比靜態(tài)的物體更能快速引起人們的注意，在UI設計中嘗試添加一些動畫及動畫圖標，不僅能在視覺上快速吸引用戶，還能使產(chǎn)品更具交互性，提升產(chǎn)品的趣味性。分享幾個動態(tài)圖標資源網(wǎng)站：
useAnimations：支持所有設備、網(wǎng)站、Android和iOS，可以免費用于個人和商業(yè)用途。
Lordicon：每一個圖標都提供線性輪廓和面形剪影兩種風格樣式，并且圖標是基于Lottie動畫引擎的矢量動畫圖標，大小完全可擴展，兼容所有主流瀏覽器。
Icons8 Animated icons 2.0：提供的動態(tài)圖標格式包括 Lottie 適用的 JSON、GIF 和 After Effects 格式，透過網(wǎng)頁可以搜尋、預覽動態(tài)圖標效果。
△ https://icons8.com/animated-icons
Feather：設計師Cole Bemis制作的一個開源圖標庫，可自行調(diào)節(jié)圖標大小和線條粗細。
科學和的命名規(guī)則能夠幫助我們快速定位到自己制作的圖標，并且?guī)椭_發(fā)縮短命名時間，加強團隊寫作效率。切圖可按照“業(yè)務_類型_功能_大小_狀態(tài)”的格式進行命名。
切圖命名的格式建議為全英文，可在切圖之前對圖層進行命名，常用切圖命名對照表如下所示。
圖標的繪制方式主要有兩種：布爾運算 和 貝塞爾曲線。
布爾運算
布爾指的是喬治·布爾，19世紀的一位數(shù)學家，為了紀念布爾在符號邏輯運算中的杰出貢獻，所以將這種運算稱為布爾運算。
布爾運算聽起來比較難，但其實非常簡單，布爾運算采用的數(shù)字邏輯推演法，主要有數(shù)字邏輯的聯(lián)合、相交、相減。設計師在使用軟件過程中引用了這種邏輯運算方法，對應到設計軟件中，就有：合并形狀、減去頂層形狀、與形狀區(qū)域交叉、排除重疊形狀。例如兩個圓形相減可以得到一個月亮的造型，這就是布爾運算。
基本上通過布爾運算，我們能繪制出常見的大部分圖標了，但有時我們需要針對某些線條進行單獨的調(diào)整，又或者我們需要打造一套手繪風的矢量圖標，這個時候就需要用到貝塞爾曲線了。
貝塞爾曲線
貝塞爾曲線適用于二維圖形繪制的數(shù)學曲線。1962年法國工程師皮埃爾·貝塞爾（Pierre Bézier）所發(fā)表。他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線是繪制矢量圖形時的重要工具，使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的。
貝塞爾曲線包括：節(jié)點、控制點、控制線、曲線這幾個基本概念。
矢量圖形便是由這幾個基本概念構成的。圖形由基礎節(jié)點作為支撐構成，控制點和節(jié)點之間的線段稱為控制線，控制線就像皮筋一樣，調(diào)整控制點的位置，可以改變曲線的形狀，就像被皮筋（控制線）拉扯一樣。
節(jié)點包括 4 種基礎屬性類型，一種是沒有控制點和控制線的「直線節(jié)點」；另一種是「鏡像關聯(lián)節(jié)點」，這種節(jié)點控制其中一側的控制點，另一側的控制點會發(fā)生鏡像變化，適合繪制對稱結構的曲線；再有一種是「無關聯(lián)節(jié)點」，即節(jié)點兩側的控制點可以各自自由控制它們那一側的曲線而不互相影響；最后一種是「不對稱關聯(lián)節(jié)點」，這種類型下，節(jié)點兩側的控制點和節(jié)點會永遠保持在同一條直線上，但是卻不會對稱控制線的長度。
知識點：
在 Sketch 中，我們可以在選中節(jié)點后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當前節(jié)點的類型，加快繪制效率。
鋼筆工具
繪制自由貝塞爾曲線常用的工具便是鋼筆工具，鋼筆工具也是所有矢量軟件的核心工具。它的使用對于新手可能稍微薇有點復雜，但是一但上手，會非常方便。The Bézier Game 這個是一個非常不錯的練習鋼筆工具的網(wǎng)站，以游戲的形式練習鋼筆工具，通關的時候你對鋼筆工具就已經(jīng)輕車熟路了。
繪制實戰(zhàn)
這里選擇了幾個比較典型的圖標，簡單演示下繪制方法和各自的繪制思路：
面性
眼睛：布爾運算相交 / 相減 / 合并形狀
繪制一個正圓，然后復制這個正圓形，通過布爾運算「與形狀區(qū)域相交」得到眼睛外輪廓，再繪制兩個圓通過「相減」與合并形狀得到眼睛造型。
位置定位：旋轉 / 相減
這個圖標由兩個大小圓形相減，得到環(huán)形，再繪制一個和大圓半徑相等的正方形，和圓環(huán)左、下對齊，最后逆時針旋轉45度完成。
WIFI：相加 / 相減 / 旋轉
繪制多個圓通過布爾運算的相加減得出三個圓圈嵌套“靶子造型，再繪制一個正三角形，和靶子圖形相交得到Wi-Fi圖標。
齒輪：旋轉 / 相減
通過兩個圖形的布爾運算得到環(huán)形，然后繪制一個梯形，復制一個鏡像，將其對齊環(huán)形兩端，復制梯形編組并旋轉復制三次（45度），最后合并全部形狀完成。
鈴鐺：相加 / 相減
由3個矩形組成鈴鐺主體，鈴鐺頂部圓頂結構通過設置全圓角所得，鈴鐺底部的半圓使用圓形和矩形進行布爾運算，完成。
線性
放大鏡：旋轉 / 相加
繪制一個正圓和一條線，用對齊工具將其居中對齊，編組后逆時針旋轉45度即可。
時鐘：鋼筆 / 剪刀工具
繪制一個正圓和一個矩形，使圓形的左下角對齊圓形中心，用鋼筆工具在矩形左邊和下邊增加兩個錨點，再用剪刀工具減去多余的線條即可。
雨傘：相減 / 剪刀工具
繪制一個正圓，再繪制一個矩形與其相減得到傘頂，然后繪制一個矩形，通過剪刀工具減去多余部分，得到傘架，傘把手圓角化處理，完成。
相機：合并
繪制一個矩形和一個梯形，通過合并得到相機主體，再繪制一個正圓完成相機鏡頭部分，完成。
愛心：相加 / 旋轉
繪制兩個正圓和一個直徑與圓形等寬的正方形，然后逆時針旋轉45度所得。
無規(guī)矩不成方圓，規(guī)矩的出現(xiàn)可以讓一切雜亂的東西變得合理，統(tǒng)一起來。在設計上也是如此，規(guī)范具有統(tǒng)一輸出，指引細節(jié)、便于查看的好處，規(guī)范就是一組圖標中的規(guī)矩，所有圖標的繪制都按照規(guī)矩來，最終的成品就會顯得井然有序。
小小的圖標是由很多圖形元素組成的，在這些圖標中，元素的一致性是建立一個共同視覺于洋的關鍵。熟悉這些元素可以更容易地理解每個圖標和他們之間細微的差異，也將幫助我們學會圖標設計的底層結構，依次是筆畫末端、圓角、留白、筆觸、內(nèi)部角、禁繪區(qū)。
在制定規(guī)范時，我們通常先繪制出一個符合業(yè)務風格的圖標，然后根據(jù)這一個圖標定制后續(xù)的圖標規(guī)范，依次按照上述圖標元素進行規(guī)范。如果是漸變填充圖標還要規(guī)定它的漸變角度，光影角度等。在一組中的圖標需要在這些圖形屬性中進行統(tǒng)一，這樣的圖標雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。
制定規(guī)范的三個過程：
△ 圖標設計規(guī)范
設計中，我們應該是用「線性圖標」還是「面性圖標」呢？
其實二者沒有太明顯的選擇優(yōu)劣，很多場景下已經(jīng)越來越模糊，但總的來說，還是有一些法則可以作為參考：
常用的手法：在App的底部導航欄，選中狀態(tài)使用面型圖標，而非選中狀態(tài)使用線性圖標；
16px左右的小圖標慎用線性圖標，線性圖標在16px下，可排布像素的區(qū)域較小，這個時候線性圖標不容易設計；
面型圖標比起線性圖標，除裝飾性外具備更強的視覺信息層次感，更具引導性，比如金剛區(qū)功能圖標、IOS設置界面，使用面型圖標；
車載等系統(tǒng)界面，更適合用面型圖標，面型圖標的視覺面積較大，短時間內(nèi)更加容易識別；
線性圖標看起來通常會更加細膩精致，適合比較精致簡潔的設計或者女性化產(chǎn)品設計；
文件格式是導出圖標的關鍵。不同的人需要的文件格式也不同，如果你為外部合伙人提供圖標，那么可能會提供1x、2x和3x.的png文件，以適應多種設備。而對于開發(fā)和其他設計人員，則通常需要導出.svg文件，這些文件可以在設計程序中編輯，并且可以通過代碼在應用程序或瀏覽器中繪制。導出的svg可以用sketch的官方插件「sketch-SVGO」進行代碼優(yōu)化，壓縮svg的體積，精簡svg代碼。
△ sketch-SVGO 插件官方下載頁
svg格式僅支持居中描邊的圖標，并且不支持投影，因此對于復雜豐富的圖標還是切img圖為好。
完成圖標后需要進行視覺檢視，避免任何多余的線條或形狀，保證盡可能整潔。檢查所有線條是否都在標準框架內(nèi)，讓其他人幫忙來檢查你的圖標是否整潔是非常有必要的。對圖標精心設計評審，合格后再加入資源庫，這樣避免多人同時修改而造成混亂，同時提升團隊協(xié)作效率。推薦一個免費的圖標管理工具：Nucleo，團隊協(xié)作需要付費。
△ 圖標資源管理工具：Nucleo
我們了解了 icon 的基本知識，那么如何設計一個好的 icon 呢？怎樣評判我們的 icon 是否合適，是否貼合整個產(chǎn)品呢？我們需要了解什么才是一個好的 icon 。
我們可以從以下五個方面來檢驗，分別是：識別性，規(guī)范性、統(tǒng)一性、呼吸感與品牌感。
1. 識別性
圖標就是幫助用戶理解信息，所以識別性（也可以說是可訪問性）是一個圖標最重要的一項，尤其在沒有文字說明的情況下，一定不能讓用戶產(chǎn)生疑惑。我們檢測圖標的可讀性通常要將圖標的背景色底板在黑色和白色之間進行切換對比，不論是黑色還是白色的背景都可以看清圖標的全部細節(jié)，還需要確保圖標中的每一種顏色都是可見的。
圖標識別性可以分為兩類，分別是含義識別和視覺識別。
靈活的設計思路，在保證識別度的前提下靈活發(fā)揮，嘗試各種不同風格的表現(xiàn)形式。
當然，腦洞也不要太大，失去了原本的含義，造成誤解。
2. 規(guī)范性
規(guī)范性也是做好一個圖標的基礎，我們要保證圖標在視覺大小的一致性，圖標飽滿度、遵循同一種規(guī)律，細節(jié)統(tǒng)一性。
視覺大小的一致性：在相同尺寸的基礎上分析形狀間的視覺差異，來審視視覺上是否統(tǒng)一，如一樣尺寸大小的圓和方形的視覺大小就不一致，那么我們可以規(guī)定它的最大尺寸，進而在尺寸規(guī)范中適當調(diào)整，使得視覺大小達到統(tǒng)一；
3. 統(tǒng)一性
在繪制多個類型相同的圖標時，我們需要注意這一套圖標合集需要在視覺上保持統(tǒng)一性。在一整套產(chǎn)品中，會有很多種圖標，但是圖標的功能不一樣，所表達的內(nèi)容也不同。這時，圖標一致性的意義就體現(xiàn)出來了，根據(jù)格式塔原理中的相似性原則：人們會將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結構級別的元素，則應在視覺上保持統(tǒng)一匹配。
圖標內(nèi)容的統(tǒng)一會讓用戶明白相似的圖標所代表的的功能也相同，而且在視覺上也更加和諧美觀。因此我們在繪標后還需檢查線條的粗細比重，邊角的大小，配色方案，細節(jié)層次和設計元素在整個合集中是否是不變且一致的。
圖標的統(tǒng)一性可以從：線條粗細、設計語言、復雜程度、顏色規(guī)范四個大的方向去著手。
線條粗細：相同功能類型的圖標線寬粗細統(tǒng)一，有背板的圖標線條不易過細；
設計語言：可拆分為透明度（拉開層次）、圓角（圓角還是直角）、斷線開口（開口位置）、設計特征四個緯度去規(guī)范；
復雜程度：如果不能簡化圖標，就保持同一組圖標的墨水重量一致，簡化太復雜的圖標，增強辨識度；
顏色規(guī)范：對于線面結合的扁平圖標建議最多用兩種顏色，活動入口圖標如果需要的色彩數(shù)量多，那就需要保持敏感，從一種色彩的周圍小幅度提取另一種色彩或多種色彩，調(diào)整其色相、飽和度、明度就能搭配出許多和諧的顏色。
4. 呼吸感
呼吸感的意思就是適當留白。不管是圖標還是界面，適當?shù)牧舭卓梢酝怀鲋黧w內(nèi)容，讓內(nèi)容具備易看性。在圖標的繪制過程中，我們應該注意圖標元素之間的間距不宜過近，元素也不宜過多。圖標是一個物體的簡略縮影，目的是為了表達內(nèi)容，讓用戶快速理解，太過復雜的細節(jié)會影響圖標的識別速度。因此在圖標的繪制過程中應該刪除所有無法傳達圖標意義的元素，避免使圖標變得太過復雜難以識別。
5. 品牌感
品牌感就是我們上面談到的要與品牌理念相符，傳達給用戶的感受一致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設計的角度去理解，尋找自己產(chǎn)品獨特的品牌氣質，挑選合適的技法。然后把這些元素具象化，融入在界面設計中。
那么，該如何提升品牌感，打造屬于自己App的獨特風格呢？品牌基因為我們提供了一些線索，這是近年來非常流行的一種趨勢。
我們都知道圖標在APP設計中的重要性，但是打開許多APP你會發(fā)現(xiàn)他們的圖標設計都非常普通，似乎是在圖標網(wǎng)站上下載的素材。雖然一些優(yōu)秀的設計師在進行圖標設計師加入一些諸如圓角、斷線等設計語言，但是仍逃脫不了與其他APP設計雷同、毫無個性的通病，使得UI看上去普通、不精致，缺少產(chǎn)品氣質。
那么，該如何打造屬于自己APP的獨特風格呢？品牌基因為我們提供了一些線索。它是由平面設計中的VIS（視覺識別系統(tǒng)）引入的一種設計策略，通過對品牌形象進行延生設計形成一套完整的視覺符號。每一個APP都有其品牌形象，代表了與眾不同的氣質。接下來，我們就來學習如何利用品牌基因進行圖標設計。
1. 提取品牌圖形
通常一個App的第一個tab是首頁，是用戶進入App后看到的第一個頁面，最常見的圖標設計是一個小房子的圖形。首頁是App中最重要的頁面，承載了整個產(chǎn)品的核心功能，是用戶瀏覽最多的地方，因此使用一個讓人印象深刻的品牌圖形作為“首頁”圖標是必要的，不但使App內(nèi)外形成了視覺聯(lián)系，同時也二次傳遞了品牌形象，加強了用戶對App的良好印象。例如網(wǎng)易云音樂的首頁標簽就直接使用了它的品牌圖形，其優(yōu)點不言而喻。
但是請注意，這種設計策略并不適合于所有的App，當?shù)谝粋€tab被賦予特定功能，就不可使用品牌圖形，否則用戶會難以理解。例如微信第一個tab是聊天列表，此時使用氣泡就比品牌圖形更加合適。
還有另外一種情況。通常一個App的最后一個tab是個人中心，即“我的”。如果App的品牌圖形是動物圖形，也可以使用其整體或局部圖形來作為「個人中心」的入口圖標。
2. 提取品牌色彩
色彩也是圖標設計中重要的構成元素之一，合理協(xié)調(diào)的色彩搭配讓用戶在瀏覽頁面時感覺舒服。從品牌形象中提取色彩作為圖標設計的依據(jù)，可以給用戶帶來由內(nèi)而外一致的視覺體驗。在設計時提取品牌色彩可適當調(diào)整色彩的飽和度，明度，既可以將圖形整體填充色彩（例如微信），也可以局部填充色彩，還可以填充為圖標背景色，使圖標之間形成色彩上的關聯(lián)。直播應用Bigo Live的品牌色是青藍色，在標簽欄的圖標設計上（選中態(tài)）將圖形局部元素填充青藍漸變色，活潑清爽的搭配帶給用戶輕快的感覺，與整體品牌調(diào)性高度一致。
3. 提取設計語言
在VI設計中通常提取輔助圖形作為設計元素，這在圖標設計中同樣適用，當所有的圖標都具備了相同的設計元素，他們就構成了一套完整的視覺符號。例如飛豬的品牌圖形就很特別，豬的頭部輪廓是由大寫字母F演變成的翅膀造型，因此可以看到“我的”小人圖標的也使用了類似的輪廓，這樣他們就形成了某種視覺聯(lián)系。
4. 提取產(chǎn)品氣質
品牌形象決定了產(chǎn)品的氣質，而產(chǎn)品的氣質決定了吸引什么樣的用戶。就如當我們第一次看到一個人的時候，往往會根據(jù)他的外貌形象特征，產(chǎn)生一個大致的印象，這就是一個人的氣質。APP也同樣，例如傳遞傳統(tǒng)手工藝人社交的「東家」，其產(chǎn)品流淌著古樸、溫潤、精致的人文氣息，它將宋體漢字的筆畫進行拆解組合，創(chuàng)造出具有東方韻味且極具形式感的圖標設計。
5. 拆分品牌名稱
App標簽欄圖標最常見的形式是圖形加文字的組合，由于文字本身就能傳達最直接的含義，因此圖形的識別性并不那么重要了，我們就可以在其視覺表現(xiàn)形式上賦予更多創(chuàng)意和個性。MONO是一款閱讀類App，它的標簽欄圖標直接將品牌名稱中的4個字母拆分成4個圖形。雖然每個字母與其對應的功能模塊本身并沒有直接聯(lián)系，但加上標簽文字的輔助也不會造成閱讀困難，而且產(chǎn)品本身的用戶人群就是比較能接受新鮮事物的年輕人，因此這樣的創(chuàng)意反而給App設計加分了。
6. 展開形象聯(lián)想
我們?nèi)粘Ｊ褂玫谋姸郃pp大多數(shù)都有著相同的功能模塊：首頁、發(fā)現(xiàn)、動態(tài)、我的等，因此也就出現(xiàn)了很多雷同的圖標設計。比如“首頁”是尖頂房子，“發(fā)現(xiàn)”是眼睛，“動態(tài)”是氣泡，如果有差別也只是設計風格的差異，有的直角有的圓角，有的線性有的面形。這樣的設計沒有品牌歸屬感，試一下將這些圖標單獨拿出來就無法判斷它是誰，它從哪兒來？
優(yōu)秀的設計師不僅要具備將圖標繪制精美的能力，還要具備豐富的設計想象力，不拘泥于設計規(guī)范的條條框框，有時候打破規(guī)則才能設計出優(yōu)秀的圖標。“首頁”除了小房子我們還可以想到什么？馬蜂窩的做法就很巧妙，“首頁”圖標是“蜂巢”，而蜂巢是馬蜂的房子，這樣的設計與品牌形象緊密相連，簡直完美！不過的改版好像已經(jīng)改沒了。
知識點：
總之，要想在繪制整套圖標時建立統(tǒng)一風格，就要從外觀和顏色上確立主風格，在局部尋求個性特征，將兩者結合，并融合產(chǎn)品屬性和符合用戶定位，先在腦海中構思出清晰的概念，然后在稿紙上繪制草圖，最后確立一個最佳方案上機完成，只有不斷地思考和打磨才能創(chuàng)作出最佳的設計方案。
圖標設計是UI設計中非常重要的環(huán)節(jié)，在尺寸有限的界面上，小小的 icon 可以更加簡單的表達含義，傳遞給用戶正確和友好的指引。建議每位UI設計師在平時做大量的練習嘗試各種不同的風格，以滿足不同的業(yè)務需求。另外，關于如何繪制keyline線，還有的iphone12樣機，有需要的同學可以出門右轉私信我。
圖標概述及發(fā)展歷程
1. 圖標的定義
應用圖標的類型及作用
1. 中文文字圖標
2. 英文字母圖標
3. 數(shù)字圖標
4. 特殊符號圖標
5. 幾何圖形
6. 單雙形/剪影
7. 線形
8. 動物圖形/剪影
9. 卡通形象
10. 正負形
11. 白色漸變
12. 彩色漸變
13. 無
14. 應用圖標的作用
應用圖標繪制方法及流程
1. iOS應用圖標
2. 安卓應用圖標
3. iOS應用圖標設計流程
功能圖標的設計規(guī)范
1. 圖標的規(guī)范
2. 圖標尺寸
3. 圖標的keyline
4. 圖標關鍵圖形
5. 圖標的拐角
6. 圖標區(qū)域 封閉和非封閉
7. 圖標繪制規(guī)則
8. 視覺柵格
9. 視覺重量
10. 圖標繪制細節(jié)
11. 圖標的顏色
12. 功能圖標的風格
13. 扁平圖標的使用場景
14. 品類區(qū)圖標
15. 文字圖標
16. 動態(tài)圖標
17. 圖標命名規(guī)則
如何繪制功能圖標
1. 圖標繪制方法
2. 制定規(guī)范
3. 線性or面性
4. 圖標導出
5. 圖標管理和交付
圖標設計的評判標準
圖標的品牌感
寫在最后
文章來源：優(yōu)設 作者：印跡時光
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
輕擬物本身也是擬物，所以它的核心基礎和擬物設計師一致的，只是省略了更多復雜的細節(jié)。而對于整個擬物的體系來講，最重要的東西實際上只有2個，形體、光影。
1. 形體表現(xiàn)
形體的表現(xiàn)，就是對圖形外輪廓的樣式的呈現(xiàn)。在過去我們寫的圖標分享中，有寫過面性圖標進階的設計中，可以包含更多的細節(jié)、內(nèi)部元素，而不是僅僅只有外輪廓。
輕擬物的形體設計就要處于進階面性圖標或者更難的水平之上，即你要把這個圖形的內(nèi)容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。
比如大眾點評的快速入口圖標，雖然看起來很復雜，但是那是配色上的復雜，而不是形體輪廓上的具象化。
換句話說，擬物插畫的圖形基底，類似扁平插畫風格圖標，不能表現(xiàn)得太抽象，也不能增加過多的細節(jié)，需要一種恰到好處的平衡（玄學），這就非?？简炘O計師的判斷和經(jīng)驗了。
并且，在描繪輪廓的時候，新手盡可能的采取正視圖來進行繪制，而不要通過俯視圖、側視圖、斜視圖等方法來呈現(xiàn)圖形的多個面，這樣難度會大幅度上升，比如下面這種情況。
2. 光影表現(xiàn)
除了形體外，光影就是整個擬物的靈魂了。
當一個完整的圖形完成填充色時，它是扁平圖案，如果完成光影呈現(xiàn)的時候，它就是三維空間的立體圖形，比如下面這個圓的案例：
在擬物的設計中，我們對光影的定義是至關重要的，所以首先就是針對該圖形確定光源的方向，是上方、前方、左上還右上，這對后續(xù)的設計有一連串的影響。
如果對光影沒有正確的解釋，那么在制作細節(jié)的漸變角度、投影的使用上，就會產(chǎn)生錯誤的設計，造成光影視覺沖突和矛盾。
在創(chuàng)建了光源以后，物體受到光線的影響就會產(chǎn)生明暗面和投影，可以簡單劃分成4個部分，高光、亮部、暗部、投影。
這和我們學習的素描有一定的差異，美術中對光影的表現(xiàn)還會包含明暗交界、反光面，這對于輕擬物的來說負擔太重，所以我們要去掉它們，接下來重點講講高光和暗部。
高光是物體作為受光物對光源的直接反映，比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現(xiàn)，再或者一拳超人中男主光頭上長期存在的高光配飾（多數(shù)動畫的光頭角色都有）……
高光可以非常有效的增加畫面的層次和對比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現(xiàn)物體結構和弧度增加的示意，因為不在受光面，所以顏色會變暗。在實際操作過程中，我們可以通過漸變的方式開控制明暗的表達，但盡量不要直接手動設置一個漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個特性以后，下面，我們就通過一個實例來講解一下輕擬物設計的過程吧。
作為輕擬物的演示，直接畫個圖標講一遍怎么操作是沒什么用的，我們要從實際場景出發(fā)，用它來解決一些真實的問題。比如看看下面的 KFC 官方 APP 首頁：
總結它的問題，不難發(fā)現(xiàn)首頁頂部業(yè)務功能太多了，頂部圖標就包含30個（加滑動的），雖然每個模塊圖標單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級和對比性。
我們要做的，就是通過輕擬物的方式，調(diào)整快速入口最大的三個圖標，凸顯它們的重要性以及和其它圖標的視覺差異性。先從第一個圖標開始，講解一下如何完成輕擬物化設計的升級。
第一步：確認輪廓造型
第一個操作，即確定圖標本身的輪廓。根據(jù)原有圖標的樣式我做了一些改動，包括加粗車頭，減少高度，增加車燈等。并對每一個模塊進行純色的填充，定義它們的色彩和做出區(qū)分。
形體的重要性在于要對圖形本身有比較合理的呈現(xiàn)，不要讓比例失調(diào)和圖不達意。
第二步：完善圖形細節(jié)
這一步，就要在原有基礎上，進行下一步的深入。包括對一些細節(jié)交代得更清楚一點，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎的暗部表現(xiàn)
在這里，我們就要開始為圖標增加高光了，高光從右上角打下來，那么有疊加關系的元素就會產(chǎn)生一個向下的投影。并且反向暗部的表現(xiàn)，讓整體的立體感稍強。
這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創(chuàng)建一個圖層，然后添加深色的透明度漸變，就可以表現(xiàn)出對暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫面中來，將整個圖標的質感進行拉升。
通過上面的演示，我們可以將整個擬物設計流程精簡成：
然后，通過這樣的步驟，再來完成后續(xù)的兩個圖形，拆解完的效果如下。
然后，再用這三個修改后圖標套用進原來的頁面，并做出對應的修改，再來看看前后對比：
通過這個對比，我們就可以看出在這個復雜的首頁頭部中，輕擬物風格可以從一眾平面中被凸顯出來，且不會顯得太突兀和復雜。
而這就是輕擬物在項目設計中的實際作用，當畫面元素已經(jīng)開始超負荷，且容易導致同質化的審美疲勞和主次不清時，就是輕擬物登場的時候了。
最后的總結，學習輕擬物就是增加我們完成界面視覺輸出的可能性，為視覺創(chuàng)意增加一些儲備彈藥，以應對越來越復雜的互聯(lián)網(wǎng)產(chǎn)品和職業(yè)要求。
我們只在這篇羅列了制作的順序和思路，并沒有把軟件的操作完全放出來，一方面是因為時間上來不及，另一方面是希望大家不會被軟件的使用框住。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來。
文章來源：站酷 作者：超人的電話亭
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
如果要設計產(chǎn)品或開發(fā)界面，我們通常會需要風格相同的圖標，若無法自行繪制或不希望付費購買也有很多替代方案，本文要推薦的「Basicons」是一款基礎、簡單的圖標設計，可用于產(chǎn)品開發(fā)設計，這套圖標一共收錄186種圖案，同時提供.svg向量圖格式可一次打包下載，利用Basicons界面快速預覽圖標，也能切換不同尺寸下的呈現(xiàn)樣式，包括12px、16px、24px和32px四種大小和1px、1.5px和2px筆觸粗細，可以快速下載圖標圖案或取得源碼。
Basicons也有一個內(nèi)嵌（Embed）語法產(chǎn)生器，能產(chǎn)生帶入圖標圖案的JavaScript語法和HTML程式碼，如果要獲得更好的效能，建議直接從網(wǎng)站一次下載所有圖標，再依照需求使用即可。這套圖標集以MIT授權方式釋出。（即可以免費使用、修改、出售，附上協(xié)議即可）
網(wǎng)站鏈接：https://basicons.xyz/
使用教學
STEP 1
開啟Basicons 從首頁就能預覽完整圖標圖案，這套圖標特色是以非常精簡、干凈的線條繪制而成的圖形，每個圖案下方會有名稱，應該能夠很快速聯(lián)想到圖標代表的意思（否則就失去圖標的意義…），可以稍微預覽一下看看自己需要的圖案有沒有列在上面，依照說明，Basicons 每周都會更新加入新的圖案。
STEP 2
從右側的「Customize」自訂選項可以調(diào)整圖標尺寸、線條粗細，調(diào)整后會直接呈現(xiàn)于左側。
STEP 3
點選要下載的圖標后再按下右側的「Download」就能下載.svg圖標格式（或是從上方點選Download All將所有186個圖標完整下載），如果想直接取用SVG原始碼的話可點選「Copy SVG」復制程式碼。
除此之外，Basicons 還有提供直接嵌入的JavaScript 鏈結和原始碼。
文章來源：優(yōu)設 作者：Pseric
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
一直有很多朋友會問一些關于移動端實現(xiàn)動效的方法，平時也會給大家做一些解答，但是可能沒有那么系統(tǒng)性，這次抽點時間總結歸納下這方面的內(nèi)容，跟大家分享下我日常設計中是如何完成動畫實現(xiàn)的。
設計輸出的方式大概可以分為位圖和矢量兩種，與常規(guī)的圖片輸出并無太大的差異。位圖方式：PNG序列幀、APNG、GIF；矢量方式：Lottie、SVG動畫。
當然除了以設計提供的方式之外，還可以設計完成好demo，開發(fā)通過代碼進行實現(xiàn)例如：javascript直接實現(xiàn)、SVG（可伸縮矢量圖形）、CSS3 transition、CSS3 animation、Canvas動畫、requestAnimationFrame由于超出個人能力范疇就不展開講了。
實現(xiàn)動畫，首先還是得了解有哪些工具可以制作及合成相關的動效，我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等軟件。另外最近準備學習一個新的專門制作svg動畫的軟件-KeyShape。
接下來講解下各個軟件輸出對應格式的方法，實際上操作并不會太難，動效本身更重要的還是在于創(chuàng)意本身，因此當你把握了這些方式之后可以考慮進行創(chuàng)意設計。
由于GIF文件多種工具都可以輸出，這里就不再作詳細說明
1. PNG序列
具體如下視頻
2. APNG
如上導出到PNG序列幀，拖拽到iSparta軟件中，合成即可。合成時可以選擇幀率、循環(huán)次數(shù)（0為無限循環(huán)）、導出質量等。如下視頻
3. Lottie
更多Lottie相關可以前往https://lottiefiles.com/學習，里面有豐富等Lottie動畫效果和一些插件下載，去研究下吧
4. SVG動畫
建議大家自己下載軟件后嘗試
5. 格式大小比
通過試驗幾種格式的大小大概是排序依次為：PNG序列>APNG>GIF(質量較差)>Lottie / SVG，json文件和SVG動畫文件比較接近，因此可以根據(jù)實際考慮決定即可，GIF雖然可以壓縮到比較小，但是本身圖片質量也較差，因此建議慎重考慮。
動效在UI設計中的應用場景很多，這里梳理了一下，之前我在項目中嘗試過的動效，給大家分享下一些案例，希望可以對大家有所啟發(fā)。
學習用什么工具導出什么格式的文件只是第一步，更重要的還是如何制造出一個有創(chuàng)意的動效，因此不要過于強調(diào)工具，更多應該培養(yǎng)自己思考設計的習慣。
文章來源：優(yōu)設 作者：ID設計站
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
按鈕在界面設計中，屬于最基礎的元素部分組成，按鈕設計的精致，整個頁面的品質也會上升不少的檔次。今天給大家分享這篇文章，主要講解在設計按鈕時我們應該考慮哪些因素，包括視覺上，有哪些萬能的方法及公式，能夠正確的制定按鈕的設計標準，來提升整個設計的系統(tǒng)性。
在設計按鈕之前，需要先理解按鈕起到的代表含義。什么地方該加按鈕，什么地方不加按鈕，在系統(tǒng)化設計思路中需要非常有講究。通常按鈕在頁面，主要起到以下三點作用：
1. 某一類型的功能操作
這種比較常見，如一些控件形態(tài)的按鈕，比如加減、折疊、展開，下拉等。這類按鈕會起到一些功能形態(tài)的作用，常用于交互場景。所以在這類按鈕設計中，應當弱化按鈕形式，重點強調(diào)功能，突出主體信息。
2. 下一步的明確指引
當頁面內(nèi)容信息過多后，用戶容易失去信息焦點，從而忘記下一步操作。信息種類越多，用戶權衡的時間就會越久，用戶選擇罷手及跳出的幾率也會越大。所以這個時候，在合適的地方增添按鈕，能夠很好的引導用戶進行下一步操作，提升整體操作的成功率。其次從體驗層面，也一定程度能起到頁面動線的引導作用，比如下方的一組卡片，在增添了按鈕后行動點很明確，非常有點擊欲望~
3. 固定習慣，明確心理預期
當用戶知悉某個按鈕能指向某個操作，或者獲取某類信息后，長期以往用戶就會形成使用這個按鈕的習慣，這樣對提升復訪及固定心智是非常有效果。
所以如果你認為你負責的產(chǎn)品或者是內(nèi)容，能持續(xù)為用戶帶來價值，那么在頁面的關鍵節(jié)點，不如將按鈕設計的更醒目。這樣用戶下次再看到這個按鈕時，固定習慣會引導他持續(xù)的點擊。
這里我不以按鈕的長相來區(qū)分按鈕的類型，如漢堡按鈕或者別的什么的，意義不大。我主要還是想通過以按鈕的功能區(qū)分，來劃分類型，這樣大家理解起來更為清晰。
1. 功能性質按鈕
這類按鈕見到的最多，我們常用的APP里，大量都充斥了這類按鈕，這類按鈕會起到重點的功能交互，幫助用戶得到TA想要的信息。其次樣式上面，其實圓形的點擊欲，會更強一些，看起來也更利于點擊。而方型的按鈕，則顯得更為正式、嚴謹。
公式：如果是圓形按鈕，圓角的半徑=高度的50%比較合適，而如果是方按鈕，邊角的小圓角半徑控制在15%以下比較合適，我個人喜好用10%。
2. 聚焦大按鈕
這類按鈕通常見于一些核心頁面的強指引，比如登錄、注冊、提交表單、或者是保存，等對頁面全局進行操作的一些按鈕。需要注意的是，這類按鈕只適合對頁面全局進行操作，而且頁面中大按鈕的數(shù)量不宜超過2個，信息盡量需要保持聚焦。
公式：基于@2x，這類大按鈕的高度≥72px是比較合適的，通常的尺寸有 80px、88px、96px，大家可以根據(jù)產(chǎn)品面向的人群來定高度，如果頁面面向的人群較為廣泛，我建議采用 88px 或者是 96px 的這種大號版本，畢竟操作起來更為方便。
3. 吸底按鈕
這類按鈕的優(yōu)先級，在整個頁面屬于最高，頁面的所有信息，都將聚焦在這個按鈕中。由于按鈕是吸底的，所以會一直浮在頁面上，不受頁面篇幅影響控制。
需要注意的是，吸底按鈕一定是頁面最重要的功能，或者是整個頁面的下一步指引，比如淘寶的立即購買，或者是餓了么、美團的立即下單，又或者是常見的充值界面。
公式：基于@2x，吸底的高度≥80px是比較合適，常見的尺寸有88px、100px、112px ，按鈕的大小可以根據(jù)內(nèi)容來定，建議高度保持在72px以上比較合適。這里需要注意的是，吸底的按鈕，需要產(chǎn)出兩套設計稿，一套為常規(guī)稿，一套為iPhoneX的適配稿。iPhoneX底部控件的區(qū)域高度為68px，所以iPhoneX設計稿的吸底高度=常規(guī)設計稿吸底高度+68px
另外在設計按鈕的時候，也別忘了補充按鈕的多個狀態(tài)的設計稿。常見的狀態(tài)，有以下四種：
1. Normal-正常態(tài)
這個為按鈕的正常顯示態(tài)，就是正常頁面中的顯示效果。
2. Hover-懸浮態(tài)
這個為按鈕的懸浮態(tài)，一般只會出現(xiàn)在使用鼠標的時候。當鼠標指針停留在按鈕時，按鈕發(fā)出的特殊反饋，則為懸浮態(tài)。這類形式在移動端交互中無作用，所以移動界面設計中不需要考慮這個狀態(tài)。
公式：正常情況 Hover 態(tài)增加 10% 黑色就可以，原理如下
3. Pressed-點擊態(tài)
這個為按鈕的按壓態(tài)，就是按鈕在被點擊或者是按壓后的效果。
公式：在APP設計中，點擊后的效果我們設一個標準值讓開發(fā)實現(xiàn)就好了。常用的值有按鈕減少20%的透明度，或者增添20%的暗度，這兩個都可以。通常我建議在亮色上的按鈕，使用暗度疊加（增添20%的黑色），在暗色上的按鈕，則使用透明度減少（透明度改為80%），實現(xiàn)效果原理參考 Hover 態(tài)那張配圖
4. Disable-禁用態(tài)
當信息未填充完整，或者是某類條件未到，按鈕會出現(xiàn)不可點擊的狀態(tài)，處于禁用形式，這個時候，按鈕就會呈現(xiàn)禁用態(tài)。這個禁用態(tài)無論是web還是app，很多場景都會用到，所以建議設定一套標準的設計規(guī)范，避免重復定義這個效果。
公式：禁用態(tài)尺寸及大小不變，僅使用色值做區(qū)分。建議使用灰色或者是不透明色，常用的禁用色有#CCC或者#999，需要盡可能把樣式做弱，避免用戶做無效的點擊。
在目前移動互聯(lián)網(wǎng)設計中，雖然按鈕的種類很多，但風格變的逐漸統(tǒng)一，更多都是色值及細節(jié)上的差異。從大的風格來看，按鈕還是分為這這幾種類型：扁平化、輕擬物、重擬物及游戲按鈕。
1. 扁平化按鈕
這類按鈕我們設計用的最多，信息簡潔，操作方便，形式追隨功能。這里也給大家分享一下我在設計扁平化按鈕的一些經(jīng)驗，比如高度寬度，以及陰影的色值。
公式：按鈕高度，這個通常是文字字號的2.4倍然后取4的倍數(shù)整數(shù)，比如字號是24，那么按鈕的高度=57.6，離4倍數(shù)最近的是56，所以高度=56，圓角=10%的高度，取整后是6px。
另外如果覺得不合適，也可以單位往8遞增或者是遞減即可，例如 56、64、72、80、88 px
按鈕寬度：如果不是那種全局按鈕，通常按鈕的寬度=最多容納字數(shù)的寬度+按鈕高度，就好啦。還是以上面那個例子為例，按鈕高度=56，文字寬度=96，那么按鈕的寬度=56+96=152
2. 輕擬物按鈕
這類按鈕近幾年變的非常流行，甚至QQ、淘寶，都開始大面積使用，因為這類按鈕在保持信息簡潔的同時，仍然有較強的點擊欲，視覺上面也能夠增添頁面的品質感。
公式：漸變方向，建議采用水平漸變，重色在右側，輕色在左側更為合適。陰影色值我之前就寫過，不知道大家還記得么，陰影顏色=按鈕顏色的 Alpha50%，x=0，y=按鈕高度的20%，模糊值=按鈕高度的50%，擴展=按鈕高度的 -15%，高級又簡單，完美！
如果覺得這個彌散陰影太大的同學，也可以自己手動簡單調(diào)整下，不礙事。（這個公式僅適用于Sketch，用PS的同學，也可以按照這個邏輯自行研究一下）
另外說一句，實際上這個陰影公式并沒有什么很多的依據(jù)，大多數(shù)都是我個人原創(chuàng)總結出來的，簡單好用。比如下面的這些按鈕的樣式，用了公式后的效果大家可以自行感受~
3. 重擬物及游戲按鈕
在一些營銷頁面中，按鈕的樣式通常需要做的比較游戲化。游戲化的按鈕，大部分會采取游戲場景中的元素，再采用擬物的手法，來進行打造。
通常游戲化的按鈕，需要重點幾個部分組成，學過素描的同學應該會知道，立體的物體，通常會有幾大特征，分別為高光，亮部，暗部，投影及反光。那么如果我們需要繪制一個在營銷或者游戲場景中使用的按鈕，只需要保證這個按鈕有高光，亮部，暗部，投影及反光的這些特征，然后飽滿一點就，立馬就可以出效果啦。
當然，我舉的這幾個例子都是最基礎版本，如果你想做的更豐富一些，那也是沒問題的，這個可以case by case 來定。
這個沒有太多的公式可以總結，更多的是看設計師的基礎美術水平啦~~
在寫這篇文章的時候，突然刷到了一套新擬態(tài)的控件設計風格，有種眼前一亮的感覺。雖然這套設計視覺上很有層次很好看，不過感覺短時間之內(nèi)，比較難大面積推廣，因為開發(fā)實現(xiàn)起來還是會比較耗費成本。
我把源文件保存下來了，對這個感興趣或者好奇這種效果如何實現(xiàn)的同學，可以下載源文件研究~~ sketch、psd、Figma 格式都有。
文章來源：優(yōu)設 作者：UX小學
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
還記得2019年4月上映的復仇者聯(lián)盟4么，漫威電影宇宙的第三階段結束了，電影很精彩，但最令人震撼的是先導版的電影海報！就是那個「五彩斑斕」的黑～
從設計上看，海報的設計師是把光運用到極限了，通過逆光和環(huán)境塑造出了酷+神秘的視覺感受。光是一切視覺表現(xiàn)的基礎，是構圖和傳遞調(diào)性的關鍵，也是視覺表現(xiàn)重要的組成部分。所以今天就和大家聊聊啥樣的光是一個牛X的光以及如何塑造一個合格的光影？
常見形式1-聚光
△ 圖片來源：小米米家臺燈1S
聚光是最常見光，也是在設計中用到最多的光，通常在塑造一個物體的時候就會用的到。
因為聚光的原因，場景更像個舞臺，凸顯「主角」的存在。具體的原理可以根據(jù)下圖去理解。
常見形式2-自然光
自然光其實就是陽光，理論上講其實光源是太陽也是聚光，但由于光源太過于龐大，無法真正的聚焦，所以就把這種光當成一種泛光源就好。在產(chǎn)品設計中也會經(jīng)常看到類似的光源出現(xiàn)，比如行為召喚按鈕：
因為不需要強有力的表現(xiàn)和氛圍的營造，所以通常產(chǎn)品設計中更需要自然光來作為核心光源，通過泛光源去統(tǒng)一控制產(chǎn)品的光影體系就好（發(fā)布的 Mac OS – big Sur 的整體光源同樣是自然光，下文會講到）。
常見形式3-逆光
坦誠的講逆光也是聚光的一種，只不過由于角度特殊，呈現(xiàn)的視覺效果也非常不一樣，所以就單獨把逆光拿出來說一說。當畫面需要逆光來營造氛圍的時候，只需要在固有色上加上黑色蒙板和邊緣的高光就可以大概塑造出一個處于逆光的物體了。
小米是典型的逆光氛圍營造高手，但萬變不離其宗，依舊可以從海報里看到相同的方法。
△ 圖片來源：小米傳播物料
通?，F(xiàn)實中的光源并非那么理想，光線的復雜超出肉眼所見。所以我們在繪制的過程需要注意到，可以適當?shù)某橄?。舉個例子，自然光是普照的，所以我們抽象為四個小光源平均分布，依次打到物體上：
在他們疊加的部分可以清晰的看到，1是最重的，2其次，3再次。按照這個辦法就可以獲得光影的層級關系，在繪制輕擬態(tài)的圖標或者運營活動中更加細膩。
△ 圖片來源：09UI設計工作室-陌陌直播禮物設計
所有的光影其實都是幫助主體塑造體積感，一個合格的立體圖形必須具備：高光/過度色/明暗交界線和反光這四個基本屬性。
然后需要一點超現(xiàn)實主義的手法，把太陽光過濾下，從「赤橙黃綠青藍紫」的色調(diào)里提取跟主體和諧的顏色（通常是補色），營造出介于真實與玄幻之間的美妙效果hiahia～
然后再在投影上加一點點色彩傾向，一個完美的黑八就出現(xiàn)啦～按照這種方法，你可以試著去嘗試更多的物體/場景。（下圖是筆者作品「插著紅旗的地球」hiahia）
影響主體的除了光影之外就是材質了，近年來的三大巨頭apple/Microsoft/Google的設計都在材質上下足了功夫，蘋果的毛玻璃，微軟的亞克力和谷歌的「紙」。
從趨勢上看，材質的引入對產(chǎn)品中拉開層級關系上有巨大意義，以往的設計僅僅是通過光影和焦距來拉開關系，這兩個維度在少量的疊加界面中還能有效果，但到了復雜的多窗口互壓互疊里就不是那么奏效了，所以鐵子們要善于運用材質區(qū)分產(chǎn)品顯示的優(yōu)先級。
△ 圖片來源：Eric Hoffman – Big Sur Mac Icons
△ 圖片來源：JIAJIE – WeSing Live gift
圖標好壞除了造型之外最重要的就是質感了，通常圖標也就是4種形式（如下圖），類似蘋果的系統(tǒng)圖標和抖音直播間禮物的圖標都是最后一種形式。
但如果僅僅是這樣就太水了，既然都說了是干貨預警，那就要拿出哥們看家的本領～此圖是大家關注公號后就會收到的推圖，主體就是一個POI的圖標加上微信的對話框和代表干貨的小星星營造出的氛圍。
刨析下這個圖，三個發(fā)光體和底下的投影，通過上文的講解依次繪制完成～
之后就到了amazing的時刻了，打開photoshop找到「濾鏡-模糊畫廊-場景模糊」設置幾個key-point，調(diào)試模糊值和透明度/亮度，最終完成對光影的塑造。
空氣中的灰塵相信大家都不陌生，這種情況多數(shù)是一束光影從窗戶里射入后，在光的折射下把平時看不到的灰塵統(tǒng)統(tǒng)照了個遍。
如果你是mac用戶一定熟知keynote里的動畫效果「轟然墜落」，這個效果是在模擬物體振動后彈開周圍灰塵，非常震撼。在PPT的設計中你也可以同樣借助光和霧來營造你想要的效果，下圖是我在做工作總結的時候為了凸顯Q4工作采用的辦法。
光影輕擬物在產(chǎn)品設計中的應用面還是很廣的，比如：圖標、數(shù)據(jù)可視化、插圖等等。而在大量扁平設計時代適量使用會顯得很出彩，當然再好的教程也比不上大家多動手試試練練，所以鐵汁們行動起來咯~
文章來源：優(yōu)設 作者：Nana的設計錦囊
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
藍藍設計的小編 http://sillybuy.com