做好圖標設計是一個入門級 UI 設計師的必備技能之一，圖標是界面中非常重要的組成部分，在實際的工作中，即便是一些工作多年且有一定經驗的設計師，也很難保證自己設計的圖標有多么完美。不同位置的圖標在界面中所起到的作用不同、風格也不同、其設計思路更是有所區別，例如金剛區、分類、標簽欄、服務工具等。
用圖標準確的表達出實際含義，僅僅學其「形」是不夠的，需要對圖標有較為全面、系統的認識，了解圖標的相關概念、正確的繪制方法及處理好一系列的細節，本篇文章將介紹圖標設計的具體方法及要點，幫你規避掉一些常見的問題，讓圖標設計有理有據。
本期大綱
1. 什么是圖標？
圖標是一種具有高度概括性的圖形化標識，在界面中與文案相互支撐、搭配使用，隱晦或直白的表達內容的具體含義、屬性特征、形象氣質等豐富的視覺信息。
從概念上來講，圖標可分為廣義、狹義兩種，廣義指的是現實世界中的圖形符號、且有明確指向的含義，而狹義的圖標指的設備界面中的符號，這些設備泛指承載互聯網產品的載體，如手機、電腦、iPad…等。在 UI 設計中主要具是針對狹義的概念。
圖標設計是一門學問，在我們的認知中，通常將圖標理解為某個概念的抽象圖形，通過設計清晰易懂的圖形傳達出比文字更高效率的信息，同時提升界面的美觀程度。想要將圖標設計的更加出色，則需要頻繁練習、不斷試錯、持續探究并嘗試新的風格，所以很值得我們花費大量的時間去鉆研練習。
2. 圖標的基本特征
一個界面是由文字、圖標、幾何圖形、圖片（音頻、視頻）組成，從 UI 設計師的角度，相對來說，其他三種元素大多運用到的是排版技巧，而圖標則是需要繪制、創作的元素，在沒有圖標的情況下，純文字也可以代替，可為什么貴還要費力費時的設計圖標呢？原因主要有兩點：
首先，圖標作為一種圖形符號的存在，跟文字的復雜程度相比，在識別效率上有著先天的優勢，因文字需根據語種、長短的不同，所占用的界面空間資源就不同，在文字較多的情況下，大大減低了用戶瀏覽速度及信息傳達的效率，固圖標將文字信息進行了濃縮。好的圖標不僅易于識別、效率更高，且讓界面更加簡潔，所以我們常見的圖文結合界面，絕大多數都是圖標在上、文字在下，或者圖標在左、文字在右，這些設計足以說明圖標視覺傳達的優先級高于文字。
其次，不同風格、樣式的圖標能讓界面看起來更美觀，提高用戶的視覺舒適度。設想一下，如果界面沒有任何圖標的點綴，即便用戶也能使用，但看多來多少都有些枯燥無味，全部用文字來理解內容還容易引起視覺疲勞。
扁平風格圖標主要是由形狀的描邊、填充進行各種組合搭配來表達不同的含義，并通過不同的色彩體現出不同的視覺效果，最常見配色有以下幾種：
單色：簡潔、清晰視覺效果，常見于基礎功能圖標。例如：B端功能入口，移動端個人中心、二/三級頁面的工具欄等，也有很多app的金剛區利用底色塊襯托反白的圖標。
雙色：是很常見的功能性圖標，至少由兩個以上的元素組成，在單色的基礎上加以色彩點綴，讓本身就不是很突出的元素不再單調，如果融入品牌色，能提升整個界面品牌調性，適用場景跟單色圖標相比則范圍更廣。
多色：至少由三種或以上的形狀、顏色組合而成，常用于金剛區、產品分類列表、定制化菜單等。
漸變：漸變色的圖標顯得較年輕化，可以是單元素的漸變或多元素的漸變組合，能映射出一種活潑、熱烈的氛圍。例如：視頻、直播等娛樂類型的APP，或車載UI等。
不透明度：調整圖標中某個元素的不透明度，可在不變換色系的情況下豐富配色細節，還能與底色融合的更加細膩，解決多色漸變視覺跳躍的問題。
另外，在 UI 界面中，扁平化風格圖標使用最多的當屬線性、面性、線面結合這三種類型。
線性
線性圖標主要是通過線條描邊勾勒出來的圖形，在界面中的尺寸普遍偏小，其線條不能過于復雜，否則將會影響辨識度，看似不多的簡單線條搭配不同的色彩，則有很大的調整空間。
面性
面性圖標主要通過剪影的形式來制作抽象的形體，相比線性圖標則面積更大、視覺層級更高且更有體積感。通過不同色彩填充、切割手法塑造不同的設計感，以達到多種視覺表現的效果。
線面結合
線面結合的圖標既有線段或輪廓、又有填充的色塊，相比純線/面性單一樣式的圖標則細節更加豐富，如果把控到位，會有更好的視覺效果及信息傳達的效率，也不失趣味性。
擬物風格的圖標主要通過細節和光影、根據現實世界中的物品塑形打造出圖形立體效果，非?？简炘O計師的造型繪制、技法表現能力。這種風格的圖標有著極強的代入感，能讓用戶快速領會圖標所傳達出的意圖及氣質。
因為擬物化圖標信息元素的高復雜度及突出的視覺效果非常搶眼，在頁面中頻繁出現會成為干擾其他信息的存在，游戲類應用中使用的非常普遍（不過多贅述）。在其他類型的應用中，大部分出現在營銷類型的界面，例如專題頁、成就榜、會員中心等。
跟擬物化圖標相比，輕質感就不會有太多復雜的元素，主要通過各種色彩漸變、發光、投影等圖層樣式體現出非常柔和的立體感，整體風格偏年輕化，給人輕盈、簡潔及精致的感覺。在設計過程中，請使用干凈且和諧的配色，主要使用在界面較大區域的位置。
不僅僅是頁面背景有毛玻璃風格，圖標的毛玻璃風格也很出彩，主要通過背景模糊、疊加、剪切圖層來實現（網上很多教程）。輕量漸變搭配毛玻璃的朦朧感，可以體現出圖標的質感與神秘感。
除上述這幾種風格的圖標之外，還有例如 2.5D、3D、像素風、新擬態…等，但在 UI 設計中并不常用，就不一一舉例說明了。
1. 性格走向（描邊/拐角）
力量型：粗線條、直角拐點，給人一種力量、狂野的感覺，常用于體育、健身、機械類型的產品；
可愛型：粗線條、圓角設計，看起來活潑可愛，給人舒適、飽滿的感覺，在兒童、教育類產品中很常見；
嚴謹型：細線條、直角拐點，看起來工整、嚴謹，中規中矩，適合政府、法律類型的產品；
精致型：細線條、圓潤的拐角，柔和、干凈、纖細且精致的感覺，很適合極簡風格的設計，在藝術、金融、珠寶等奢華類產品中比較常見。
2. 動態效果
如果想要突出金剛區、工具列表中的某個功能入口，將圖標設計成動態效果，既能保持整體圖標風格的統一、又能單獨突出功能的重要性，起到強調的作用，用來吸引用戶的注意力，引導用戶操作，提升其點擊率。切記動效圖標不能過多，當什么都突出了等于什么都沒有突出。
其次，在年輕化、娛樂類型的產品 Tab 欄中的圖標切換時，加入動態效果，可起到畫龍點睛的作用，還能通過動效表達出不同的情緒，降低切換時的枯燥感，好的 Tab 動效能傳達出整個產品的氣質。
最后，如果有類似運營或短期內的活動，需要吸引用戶注意但又不適合固定在界面中的某個位置，這時可以設計一個動態圖標懸浮在設備某個位置（注意用戶體驗及交互原則），既不過多的占用頁面資源，還能同時顯示在多個界面，一舉多得。
動效圖標：@墨染 ART 授權
遵循圖標設計規范有利于設計師之間的合作及接下來的設計，以及產品整體圖標風格的統一性，起到約束的作用，即便在更換設計師的情況下，也不至于出現較大的問題。在制定合理的設計規范前需要先了解圖標到底有哪些規范，應從哪些方面入手，以便接下來的圖標設計順利進行。
為了保持圖標元素的平衡，尺寸大小需要保持一致，通常我們會建立基礎網格尺寸進行圖標的繪制，常見的網格尺寸有 16、24、36、48、64、128、512、1024，這些網格尺寸并非固定，也會根據設計中的特殊尺寸而變化。
一個圖標系統包括網格尺寸和圖標元素兩部分，設定好網格尺寸后，就需要用 keyline 來約束圖標形狀的長、寬比例了。最終設計的圖標大小并不是跟隨網格尺寸，而是根據不同的形狀占比受制于圖標 keyline，最終形成統一的視覺大小。
從上圖中可以看出，相同尺寸的圖標在真實的視覺中相差很大，這就好比一個 100 像素的圓形、跟 100 像素的方形相比，站在邏輯角度，大小是相同的，但在視覺上，一定是方形顯得更大。所以我們常說的圖標大小相同，并非真實尺寸，而是視覺感受。
為保持圖標視覺上的一致性和平衡感，需要先繪制 keyline 用來指導、規范圖標設計。keyline 由圓形、正方形、長方形-橫、長方形-豎、三角形和對角線組成，網格的大小需保持 4 的倍數，便于不同尺寸的圖標都能適配，可使用 24*24px 的網格尺寸為基準，其他尺寸的圖標可通過增加倍數以此類推，如 48*48px、72*72px……
下圖是以 24px 尺寸的網格參考基準示例（出血為 2px）：
根據產品屬性及目標用戶并結合應用場景，找到最符合自身產品性格、氣質的圖標設計風格，例如健身應用屬力量、粗獷類型，圓角、曲線適合女性產品等，在前面的「性格與氣質」中有舉例說明。
經過圖標風格的確定，圖標細節便是接下來繪制過程的核心部分，對線性圖標來說，注重的是線條的粗心，而面性圖標則注重各小圖形之間的距離，所以在繪制時，需要保持線條、間距的統一，方便后期的圖標更新迭代。
線性描邊粗細
我們以 iOS@2x 為基準（避免@1x 的 3px 描邊變成 1.5px，小數點），可適配最 2px、3px、4px 最常用的描邊粗細，4px 視覺較重，用于優先級較高區域的功能性圖標，2px 看起來會顯得更加精致，在設計中，還需根據產品的行業屬性及調性來確定描邊的粗細，并統一起來。
面性正負形間距
面性圖標需要確保每個單獨的形狀之間有足夠的間距，以 24px 大小的形狀為例，其間距不能小于 1px，以此類推，雖然未規定上限，但間距也不宜太大，否則無法相互組合關聯，以實際視覺的舒適度為準。
根據行業類型及風格進行創意設計，如線性統一斷點、融入品牌基因、單個元素傾斜、節日氛圍烘托、修飾元素等，為圖標塑造靈魂或傳遞更多信息而進行的二次創作。
1. 識別性
圖標存在的意義，主要是為了快速傳遞信息，不能讓其成了無用的裝飾品。隨著互聯網的普及、時間的積累，人們對一些線上圖標信息的隱喻已根深蒂固，早就形成了慣性思維，所以我們設計的圖標必須要符合用戶的認知，能讓用戶快速理解，即便出現個別特殊情況，也要用文字清楚的標注說明，否則一旦讓用戶產生疑惑，圖標就起了負面作用，在很大程度上影響使用體驗。符合認知的圖標能讓用戶下意識的理解且接近心理預期，減少學習成本，提升使用效率。
2. 簡潔美觀
圖標是將現實世界中的事件/事務用抽象的圖形表現出來，如果過于追求完美而設計的太復雜，還不如直接上圖片來的快，所以不能過于展現真實物品的細節，最終設計出正確而不失真的圖標尤為重要，這樣既能用于傳遞信息，又便于用戶快速且清晰感知。
3. 視覺對齊
為確保視覺平衡，異形元素在使用系統自動對齊后，會有一定的偏差，需手動微調進行視覺對齊。
4. 保持一致
針對大型項目，要想整個家族的圖標更加和諧，保持相同的樣式及設計原則著實不易，尤其是在多人完成設計的情況下，事先有一個清晰的設計原則和規范是必不可少的。圖標都有著對應的視覺重量，例如描邊粗細、填充模式、繁簡程度等屬性，需要做的就是控制好這些關鍵因素，讓整體看起來視覺重量相同且能相互關聯組合到一起，保持所有圖標的一致性。
5. 最小間隙
單個圖標的各元素之間要有呼吸感，需要適當的留白，如果描邊過大，整個條看起來感覺像糊成一團或臃腫不堪，如果存在類似問題，可通過減小描邊值或降低圖標的復雜程度來解決。
6. 使用 2 的倍數
以偶數為單位的設計便于數據的計算（2 的倍數），例如正負形間距、描邊值等，在 iOS@2x 設計下，@1x 也不會出現小數點。在移動端設計中，最小的圖標為 24px，可被 2、3、4、6、8、12 整除，也是可以被整除最多的數值，因此，可靈活的等比縮放。
7. 延展性
即便做好了前面的一切，圖標設計工作也并未完成，需要做的是持續測試圖標的可用性，做好后續的完善與優化，沒有最好、只有更好，以確保上線后的效果和后續的迭代。
阿里巴巴矢量圖標庫： https://www.iconfont.cn/ ，90%以上常見的矢量圖標下載；
飛書官方圖標庫： https://iconpark.oceanengine.com/official ，海量資源可在線修改，調整描邊、填充、單/雙/多色、端點后下載 SVG 格式圖標。
雖然上述圖標資源基本能滿足我們的日常設計所需，但僅僅只能是作為參考而已，一味的圖方便、投機取巧只會毀了自己的動手、創新能力。
圖標設計是一個非常龐大的版塊，且有很多個分支，例如：金剛區、標簽欄、應用圖標…等，每個分支都有自己的一套設計法則，我們需要在不斷的學習與創新中獲得更多經驗。一篇文章不足以道出圖標設計的精髓，但可以在不斷沉淀、相互探討、持續的學習中一起進步。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
金剛區作為產品功能架構重要的組成部分，是設計師重點發揮的區域，也是風格切換最為活躍的。而金剛區圖標是最重要的表現對象，設計師在圖標設計上面耗費心力，出現了豐富多樣的視覺表現風格。
體驗了眾多產品之后，黑馬哥為大家精選了金剛區圖標設計最突出的 10 個風格，通過這些案例帶給大家感官體驗層面的更多靈感啟發。
晶白風格是通過白色質感來實現的，通過對圖標元素進行透明度變化、投影、內陰影、外發光等進行設計，使得更有層次感。
相較于扁平化的圖標設計來說，晶白風格更有層次感和質感，作為金剛區圖標設計運用非常普遍。除了通過白色不透明度漸變來實現以外，也會隨著背景或者環境色的變化融入色彩渲染，呈現出更豐富的設計細節。
晶白風格圖標就是通過兩端白色漸變，配合兩端顏色不透明度來進行深淺控制，也可以通過內陰影和外發光等來增強質感。眾多設計軟件都可以實現，靈活性非常高。
磨砂玻璃質感的設計表現是近些年較為流行的設計趨勢，被廣泛運用到視覺設計的眾多領域。在 UI 場景中作為視覺感強化被普遍應用，其中在圖標設計上的表現尤為突出，呈現出了眾多的優秀案例。
金剛區作為產品架構中的重要組成部分，也是更新較為活躍的部分，對于視覺感的要求非常重要。磨砂玻璃質感的圖標很多產品都會階段性使用，也是因為這一類風格具有典型的特點和視覺張力，能夠形成比較大的視覺差異，帶給用戶不錯的感官體驗。
磨砂玻璃質感圖標可以通過 Sketch、Figma 等軟件的背景模糊功能實現；如果是 PS 和 AI 等沒有背景模糊功能的軟件，則可以通過模糊度結合剪切蒙版來實現。實現的方法很多，大家可以多多嘗試，這是一類比較容易掌握的圖標風格。
圖標設計從寫實到扁平，再到微質感，都在不同的時期進行改變，通過風格的優化避免用戶的視覺疲勞。寫實類圖標視覺疲勞度較大，在年輕化的趨勢中顯得過于繁瑣，而介于寫實和扁平之間的微質感被深入探索。
微質感的深入可以使得圖標風格突出，質感和層次感強化了圖標的立體空間感，在整個界面中可以形成視覺差異。可以體現出模塊的重要性，也是圖標設計感體現的一種方向。
通過漸變色、不透明度漸變、投影、內陰影等形成層次變化和光影效果，多圖層刻畫來強化圖標質感和層次感。
2.5D 也稱之為偽三維，在前兩年非常流行，作為插畫風格延伸出來的，當時 2.5D 插畫被普遍運用到眾多領域。把一個獨立元素作為原子，通過原子的數量分布形成 2.5D 場景。
將 2.5D 風格結合到圖標設計中，可以使得圖標更容易形成立體感，設計師不會受制于透視基礎的薄弱。無論是 C 端還是 B 端場景中的金剛區圖標都比較適合，很容易基于簡單的立體造型上設計出豐富的變化。比如結合玻璃質感、微動效或者其他設計趨勢均可，設計的駕馭度很高。
2.5D 風格的圖標很容易掌握，只要繪制好基礎原子部分，就可以演變形成各式各樣的 2.5D 造型?？梢酝ㄟ^ AI 軟件的 3D 功能輕松繪制，大部分場景都是基于立方體、圓柱體等基礎造型進行變形。
三維類的圖標設計相較于 2.5D 風格來說，空間感和透視角度更加深入，光影的變化更加豐富。圖標設計中的三維立體感強化，對于設計師的要求更高，掌握一個三維軟件需要一定的學習成本。
隨著 C4D 等三維軟件的走熱，掀起了一股學習熱潮，被運用到金剛區圖標設計中，帶來的視覺效果也是非常不錯的。較強的空間立體感和光影效果，在界面中的視覺呈現尤為突出，也能帶給用戶更好的感官體驗。
隨著用戶對于感官體驗的升級，風格特征的差異化體驗至關重要，而插畫風格的融入可以提升圖標設計的特征感。
插畫風格運用到圖標設計中，需要做簡化處理，可以是插畫的局部元素或者簡化后的小場景插畫。風格多樣的插畫風格也會延續到圖標中，不僅可以使得圖標具備差異化的視覺效果，也能烘托出整體設計的質量。
通常矢量風格的插畫類圖標比較常用，由于圖標占比限制，不合適表現特別繁瑣的插畫風格?？梢允俏鼍暗牟瀹嫳憩F，或者是局部元素的插畫表達，這一類圖標風格將會在未來被廣泛運用，以此來提高圖標設計的視覺差異化表達。
立足于品牌做設計，這是設計師需要深入探索的方向，而金剛區圖標設計亦是如此。品牌基因融入到圖標設計中，可以輔助突出產品的品牌感，也能形成設計表達的差異化。
品牌基因化的圖標設計具備一定的特征性，也是視覺差異化的一種形式。通常的做法有將品牌色全部融入圖標中，或者品牌色作為圖標配色點綴；也可以提取品牌 LOGO 輔助圖形形成基因圖形，融入到圖標造型設計中；也有結合吉祥物來突出品牌感的，融入吉祥物造型、局部圖形、輪廓圖形等；如果圖形角度無法提煉，也有提取品牌文化、服務特征、用戶群體特征、行業特征等，從中提煉關聯性的圖形融入圖標設計中，以此來強化品牌感。
品牌作為設計的思考起點，不僅可以輸出差異化的設計作品，也能串聯起整個項目設計的規范。
如果覺得質感一類圖標表現力比較繁瑣，但是又不想只是簡單的線性或者面性圖標，造型疊加和配色疊加形成的圖標風格算是介于兩者之間的存在。
通過圖形之間疊加豐富圖標造型，疊加部分配色的調節豐富圖標色彩搭配，形成的圖標風格比較年輕化。視覺效果也是深受年輕用戶的喜歡，帶來不錯的感官體驗。
這一類風格的圖標可以通過布爾運算設計圖形部分，顏色的疊加效果可以通過圖層樣式實現，也有一些是圖形分割之后進行分別著色的。通常疊加部分的顏色會往更深的方向延伸，大家可以嘗試不同的形式去進行配色，選擇符合主題的圖標配色效果。
微動效運用到圖標設計中尤為普及，特別是在金剛區模塊，可以作為突出功能的強化。動效圖標已經成為一種獨特的表現力，相較于靜態來說更有吸引力，也能帶給用戶更加趣味性的感官體驗。
在金剛區模塊中，動效圖標通常是用于區別特殊功能，或者需要重點突出的服務或者主題活動等。不改變整體圖標的風格，只是動態和靜態的區分，需要個別做動效，形成表現力的差異才能達到重點突出的目的。
作為設計師來說，動效也是需要掌握的基礎技能，可以提高我們的設計表現力，也能將交互動作表達得更清楚。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
大家好，這里是設計夾，今天為大家分享的是「圖標設計細節」。圖標在頁面中的尺寸很小，卻包含著很多細節。作為通用的視覺化語言，把握住其中的設計細節至關重要。
這次總結一下圖標設計的屬性以及在圖標設計中，很重要但容易被忽略的知識點。
在 UI 設計中，圖標主要有兩大類：一類是 APP 啟動圖標，每個 APP 獨一份；另一類是系統 icon，搭配文字，方便用戶快速理解信息，也是這篇文章重點講解的內容。
常見的圖標風格有線性、面性、彩色、寫實、3D 等，圖標的選用因頁面的設計風格、圖標的位置等原因會有所差異，主要的作用是反饋動作和吸引用戶更多注意力。
Tips: 現在字節、百度新推出的一些年輕化產品中，有很多精致的 3D 寫實圖標，極具個性，很好地迎合了年輕用戶的喜好。在扁平風格流行的當下，這樣的嘗試也是一種突破。
簡單的線性圖標重量輕，看起來更簡約，不會給頁面帶來太大的視覺負擔。比如當頁面中已經有很豐富的圖片和內容，那么更適合選用簡約的、重量輕的線性/面形圖標，防止頁面過于雜亂。
相反，如果當前的頁面中只有文字，信息量很少，那么更適合利用重量大的彩色甚至 3D 圖標來增加頁面的豐富性，讓頁面看起來更有設計感，給用戶帶來視覺上的愉悅，簡約而不簡單。
構成圖標的元素包括描邊的粗細、端點的方圓、圓角的大小、色彩的輕重等，表達式規則是統一的，以便只給觀看者識別圖標所需的最小更改。
圖標的外形有圓形、方形、三角形甚至不規則形狀的，所以我們很難將不同形狀的圖標尺寸完全統一。
這個時候網格就起到很關鍵的作用，有了網格相當于提前將圖標限定范圍，在網格范圍內根據圖標的重量和重心靈活調整大小，這樣會讓不同形狀的圖標看起來更統一。
由于設計軟件的局限性，雖然有些圖形已經居中對齊，但有時候還需要進行視覺校正。
最典型的圖標案例是“播放”圖標，利用設計軟件對齊中間的三角形后，會發現三角形的位置看起來偏左。
利用軟件對齊后，我們還需要再用眼睛確認一遍，我們可以將三角形向右移動，保證三角形的重心與圓形的重心一致，這樣整個播放圖標看起來會更舒服。
設計圖標時，我們的第一反應是不帶透視的二維圖形。因為我們觀看手機的視角都是平視，所以大多數的圖標都沒有透視，看起來會更簡潔。
帶透視的圖標會給用戶營造一種空間感，可能會感到認知失調。雖然這種帶透視的圖標能引發用戶關注，但不建議這么設計。
圖標比例通常使用 8 的倍數作為基準，例如 8px、16px、24px 和 32px，以便在各種環境中進行流暢地切換。除此之外，在移動端等屏幕尺寸較小的頁面中，還會使用 4px 的倍數，來實現多功能性。
圖標的設計要使用用戶能夠快速理解的且最簡潔的元素。圖標的尺寸通常很小，要盡可能做到對用戶友好，可以使用一些簡單的隱喻設計，但含義不能過于復雜。
一個圖形能說明的問題，沒必要再添加多余的圖形。復雜的圖標可能需要花費用戶很長時間才能理解它們的含義，這樣反而會影響用戶的操作。
這一點和剛才說到的圖標清晰道理一樣。圖標最重要的目標是快速傳遞信息，特別是對于尺寸很小的系統圖標，最好只保留最基本的內容，移除多余的裝飾元素。
這里說得一致性，并不是指一個產品中所有頁面都只能使用一種圖標風格。一個產品有很多頁面，線性、面性等多種圖標風格可以一起使用。
但在同一個頁面場景中，執行相同功能的圖標應該保持相同的樣式。
面對不同的操作系統，例如 iOS 和 Android，同一功能對應的圖標也會有差異。針對不同的系統，我們可以選用大多數用戶熟悉的圖標，這樣用戶能更快地理解圖標的含義
以上就是常用卻容易忽略的圖標設計細節，希望通過這些內容能幫助你對圖標設計有更深的認識。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
1. 理論表述
任意一點移動到目標中心位置所需要的時間，與目標距離正相關，與目標大小負相關。
2. 研究背景
1954 年，Paul Morris Fitts 根據信息類比提出一個假設，該假設能夠量化「移動到目標選擇任務」這個操作的難度「1」。雖然該假設還未涉及到人機交互中的具體參數，卻給了后來的交互研究人員極大的啟發。
我們現在經?？吹降?Shannon 公式（即上面那個公式）是由約克大學教授 Scott Mackenzie 在 1992 年提出的一個菲茨公式的變體「2」，該變體被廣泛地應用于需要指針操作的人機交互系統當中。作為交互設計和 UI 設計的理論基礎，它更簡潔明了地闡述了時間 T 和目標距離 D 以及目標大小 W 之間的函數關系：因為以 2 為底的指數函數是遞增函數，所以，T 與 D 正相關（D 越大 T 越大），而與 W 負相關（W 越大 T 越?。?。
人們做出一個移動指針的操作通常需要兩步：
菲茨定律所包含的兩點內容：
綜合兩者來看，菲茨定律中的 D 在第一步中起更為明顯的作用，而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示，主要也是從這兩方面入手。
案例1：系統右鍵菜單，微信彈出菜單
最典型的例子就是菜單，無論是 PC/Mac 中的右鍵菜單還是微信聊天頁里面的加號鍵都遵循著這一原則。作為用戶，點擊這類按鈕之后一定會有后續的任務和操作，所以這些任務都被安排在了距離所點擊區域更近的菜單中。
案例2：夸克和 Safari 的 url 輸入框位置比較
另外一個例子是瀏覽器的搜索欄輸入框，現在已經有一些瀏覽器（比如簡單搜索、夸克）會將輸入框以及一些其他更常用操作置于底部，這是因為我們正常握持手機時，大拇指離底部更近，所以需要進行點擊操作的話底部的輸入框操作起來更方便，也更快。
這一點在現今的 APP 中做得已經非常到位了。
案例3：哈羅出行
作為哈羅單車租用操作的入口，頁面中的「開鎖」按鈕做得足夠大，用戶可以輕易快速地點擊到這個使用頻率最大的按鈕。登錄（也就是開始）按鈕也是一樣的道理。
還有一個比較特殊的就是對于邊角的利用，無論是在 Windows 還是在 MacOS 中，邊角總是有一些比較重要的操作，比如 Windows 的「開始菜單」（在左下角），MacOS 的 Dock 欄（在底部）以及頂部狀態欄，包括 Mac 特有的觸發角。
案例4：MacOS 觸發角設置
為什么微軟和蘋果不約而同地選擇了在屏幕最邊角放置這些權重相當之高的組件或者操作呢？在硬件設備中邊角是一個極其特殊的存在，由于指針再怎么移動都不可能超越屏幕邊界，只能停留在邊界上，所以邊界對于用戶的操作來說是「無限可觸發」的，這有什么意義呢？這意味著對于隱性存在的目標來說，W 趨于無限大。
既然 W 趨于無限大，根據公式時間 T 就趨于常量 a。
結論就是無論指針距離目標物多遠，所需要花費的時間都已經達到了理論的最小值，輕松且高效。而在移動 APP 中同樣有邊角的應用，比如最近拿了 Google Play 設計大獎的 Drops。
案例5：Drops
創新的交互將屏幕底邊充分的利用了起來，只要將單詞移到底部，就代表用戶已經記住這個單詞了。注意整個底部都是可以觸發的，而不僅僅是腦袋那個圓形區域。本來「移動」這個操作對于「按鈕」來說更加繁瑣，但是在 Drop 的應用場景下這樣的移動反而沒有覺得麻煩，滑起來相當帶勁。
菲茨定律給我們的啟示通常都是正向的，都是以縮短用戶的操作時間為主要目標，但也有一些場景需要反其道而行之。比如如果遇到需要用戶謹慎的操作時，可以逆向運用菲茨定律，增加操作的復雜度。
案例6：iPhone 關機和微信刪除聊天窗
iPhone 的滑動關機延長了用戶關機操作的時間，以提醒用戶此操作為不可逆，需要謹慎操作。微信也是同理，甚至還縮小了刪除按鈕的大小，以達到警示的目的。
另一個典型就是彈出窗口的關閉按鈕。
案例7：Luckin Coffee 的彈出窗
彈出窗口里一般都包含了開發商的推廣、廣告、運營活動等等，所以開發商會希望用戶花盡量多的時間去注意到它們的內容，這時候雞賊的開發商會把關閉按鈕做得又小又遠（遠離視覺中心），讓用戶花更多的時間去尋找和點擊它們，效果拔群。
注意點1：D 不能過分短
過分短的間距不僅無法提升操作效率，反而會造成視覺壓力從而降低用戶體驗。
反面案例1：唯物魔改版
按照菲茨定律魔改的唯物登錄頁面，理應操作得更迅捷方便，然而實際上除了視覺上造成額外的擁擠感、破壞畫面負空間構成之外，我嘗試著點了一下覺得十分逼仄擠手，所以過度縮減按鈕間的間距并不合理。
注意點2：W 不能過分大
大尺寸的點擊目標確實能夠有效地降低用戶操作成本，但是過分大的目標也會很直接地破壞畫面的平衡，浪費屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關系，當按鈕已經足夠大時，再增大就沒有什么體驗上的提升了，如下圖所示。
反面案例2：KEEP 魔改版
與唯物類似，當按鈕大到一定程度之后，會對畫面造成恐怖的破壞效果。
參考資料
