01.圖標是什么
要做好圖標，首先我們要知道圖標是什么？在一般認知里，圖標可以定義為一種圖形化的符號或標識，用于幫助我們理解某些復雜功能或操作，尤其在數字化領域里，可視化的圖形符號，更利于高效的展示信息和引導人機操作交互。也有人稱之為icon或eikan。
a
▍1.圖標的發(fā)展史
圖標的歷史可以上溯到人類文明發(fā)源伊始，最早的象形文字，巖洞壁畫等都可以算作圖標的一種，為我們后代研究人類文明產生了珍貴的歷史意義。但今天我們研究的圖標主要以計算機系統(tǒng)發(fā)明為分界線，看看這短短幾十年間，圖標是如何演化的。
● 80年代的初期圖標還是黑白單色
● 90年代慢慢多了些色彩，形狀也更豐富
● 到2000年后，隨著顯示技術的發(fā)展，圖標也越來越形象
● 圖為iOS1-8圖標變化
從最早的Xerox Sta系統(tǒng)到最新的Mac os10，再到現在人手一臺的移動智能機，每個階段都擁有其獨特的圖標風格，2010年已經到了智能移動時代，拿最知名的iOS系統(tǒng)每個階段升級，圖標的變化來看，也歷經了初期的擬物-扁平-微質感的好幾個階段。
圖標作為UI必不可少的部分，能夠使界面更加精致，今天也分享給大家一些大公司的設計規(guī)范，其中包括很多系統(tǒng)的圖標規(guī)范和定義，幫助大家更好地參考和學習。
w
02. 圖標的分類
圖標因其良好的辨識性和無障礙溝通特性，在各種場景下被廣泛應用，同樣，因使用場景的不同，圖標所代表的意義也不一樣。
▍1.應用圖標
● iOS14桌面應用圖標
a
應用圖標指的是我們設備界面上的應用入口，通常具有較強的品牌特性，可能與logo一致或與其核心功能一致， 如instagram 就是一個簡化的相機正視圖，亞馬遜則是一個購物車形象，國內也有不少產品直接使用了能夠代表產品的文字，需要注意的是，界面圖標必須遵循對應系統(tǒng)下的尺寸規(guī)范。
● 華為EMUI 10應用圖標
d
▍2.功能圖標
與應用圖標不同的是，它主要作為界面中的功能入口，一般為簡潔易辨識的符號，根據不同產品調性，圖標風格也可以多種多樣，并且不強制必須為標準形狀，異形圖標能讓界面更為生動，整體風格的發(fā)揮也有了更多空間。
d
▍3.輔助圖標
輔助性圖標通常存在于有較多長文字時，搭配作為輔助說明，在UI中，可能還具備一定情感化的作用，在提升用戶接收信息效率的同時安撫用戶情緒；所以整體可能需要具備更多細節(jié)，作為畫面補充的一部分。
● 如：缺省圖標
s
▍4.與logo的區(qū)別
雖然這兩者特性極為相似，都是圖形化的符號，但logo是為整體品牌服務的，具備其獨一無二的專利特性，甚至可以是IP形象或文字；兩者的關系可以理解為父子。
● 圖中的圖標就很好繼承了logo的特征和風格
● 但有的也只是普通的界面輔助，風格和樣式并不一致
a
03. 圖標的繪制
能夠繪制出高質量的圖標是每個UI設計師必備的能力，本次我們以功能圖標為例，為大家展示具體的幾個繪制步驟和要點，希望幫大家在細節(jié)上避開影響圖 標精致度的一些小細節(jié)。
d
▍第一步：建立圖標網格
功能圖標因形態(tài)結構各異，難免存在尺寸不一的情況，必須考慮其整體視覺的協(xié)調一致，最好的辦法就是建立圖標網格，也可以稱為圖標盒子，當圖標形態(tài)分別為長、方、圓時，有一個合理的比例限制。
● 將常見圖標形態(tài)約束在圖標盒子內
當然，網格不是絕對的，要學會靈活運用，當與個別圖標形態(tài)無法完美匹配時，也不必拘泥，一切以達到視覺和諧為首要。我通常會在圖標網格外圍預留一個安全區(qū)域，可以規(guī)避切圖出現不完整的情況。
a
▍第二步：具象功能
有了網格，第二步則需要我們根據功能，找到與之對應的實物形象；如筆記本是記錄，電話是通話，時鐘代表時間，日歷代表日期等等。
這些功能相對比較容易找到現實中的實物，如果是比較抽象的功能呢？就需要我們發(fā)散思維，找與之相近含義的事物。如隱私功能，隱私是沒有實物的，但是我們可以通過“隱私”這個詞延伸：不公開的、隱藏的、鎖起來的、被保護的，繼續(xù)根據這些詞延展：就可能是密碼、盾、鎖、遮眼等等。
時刻記住一點：用大眾都能理解的物體形象去表達。如果用戶看到某個圖標過于復雜，需要反復思考它代表的含義，也無法預測點擊后的結果，那這個圖標就失去了提效的作用。
d
▍第三步：簡化結構
有了功能的具體形象，下一步就是思考如何讓圖標變得更簡潔易辨識。
● 畢加索《公牛》
畢加索創(chuàng)作《公?！窌r，從初稿到最終成品歷經了11個版本，最后只用寥寥幾條線來勾勒，但我們依然能一眼認出牛的形態(tài)。繪制圖標也一樣，需要我們思考如何省略無用細節(jié)，化繁為簡，提取他們的主要特征。
f
▍第四步：善用布爾運算
有了簡化的圖標形象，我們接下去應該思考如何讓圖標變得更為規(guī)范耐看。
● 如桃心圖標，就是兩個簡單圓角矩形組合而成
● 桃心圖標，也可以做的更圓潤
● 不同組合下的布爾運算，圖標形態(tài)特征也會不一樣
這一步的訣竅就是盡可能使用基礎圖形去組合拼貼，這樣做出來的圖標，尤其在適配不同尺寸大小切圖時不易拉伸變形。
f
▍第五步：處理細節(jié)
統(tǒng)一性
● 風格：線性、面性統(tǒng)一
● 斷點細節(jié)一致：平角、圓角
● 圖標氣質一致：是圓潤還是尖銳硬朗
隨著功能界面的不斷復雜化，大家早已不滿足于同一產品或同個界面中單一的使用面性或線性圖標，而是搭配使用便于層級劃分，故而這里只考慮在同一層級下圖標的統(tǒng)一性。
視覺平衡
如圖，三角形置于中間位置時，視覺重量會偏向左邊，在這個基礎上，我們就需要做出適當調整，以達到視覺重量平衡。
一致的視角
當你想讓自己的圖標變得更加出彩而采用了區(qū)別于正視圖的結構，那也一定要確保至少在同等層級下，這些圖標視角是一致的。
a
▍第六步：做出差異化
融入品牌DNA
● 韓國購物App 11 street，就很好的融合了品牌logo的箭頭符號
功能圖標因簡潔通俗，比較容易出現市場同質化嚴重的現象，故而很多App選擇在圖標中融入品牌基因，不僅做出差異性，還能提升品牌調性。
跟隨趨勢創(chuàng)新
通過對圖標風格質感的創(chuàng)新表達，讓人眼前一亮。這種方式更多需要你了解當下的流行趨勢和技法，根據產品的風格調性，對圖標進行量身打造。
圖標微動效
隨著5G時代來臨，微動效也早就出現在了大眾視野，基于圖標的微動效表達，能讓用戶更快注意到某個功能并去點擊它，如果你的動效還恰好有趣美觀，更能讓用戶感到愉悅。比較常見的loading和tab切換都讓我們有了很充足的發(fā)揮空間。
d
▍第七步：完善圖標庫
通常一個產品的功能圖標會多達幾十甚至幾百個，如何保證這些圖標的統(tǒng)一性需要提前去規(guī)劃。繪制的最后一步，就是在完成一部分圖標后，及時排列比對，確保整體視覺效果的統(tǒng)一；有條件的可以生成圖標庫，便于后續(xù)的團隊協(xié)作。
● Apple發(fā)布的SF Symbols中圖標，就劃分了9種寬度和3個比例尺寸
有了圖標庫后，協(xié)作設計師做到共用功能時可以直接調用；極大提高自己和團隊的效率，并保持整體規(guī)范的一致。
a
04.最后
圖標繪制看似簡單，要做好卻并不容易；UI處處充滿細節(jié)，想要自己的界面更加精致，就不要忽略每一個可以提升的點。希望今天的這篇文章能夠幫到你。
最后給大家分享一些大公司的設計規(guī)范，其中包括很多系統(tǒng)的圖標規(guī)范和定義，幫助大家更好地參考和學習，需要的話可以點個“在看”，添加叮當貓回復“圖標”領取，已有叮當貓的無需重復添加。
s
作者：sky
轉載請注明：學UI網》研究了上百套圖標，總監(jiān)卻告訴我圖標要這樣畫！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( tweetduck.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務