這篇文章來自優(yōu)設網呜叫，主要是最近的工作中經常用到圖標，但是設計給到的圖標放到頁面中總是有點不協(xié)調殿衰，所以看到這篇文章想要收藏分享一下朱庆。
作者寫的還是很細致的，喜歡的可以關注他闷祥。鏈接地址在下面娱颊。
編者按：圖標類型千變萬化，實際上萬變不離「線性凯砍、面性箱硕、線面結合」3個方面， 再結合 「透明度悟衩、漸變剧罩、顏色疊加、質感座泳、多維空間」等表達方式設計而成惠昔。本文將近 6000 字，一篇就可以了解全部設計風格挑势！
圖標是 UI 設計中極為重要的一個環(huán)節(jié)镇防，我們在做每個界面的設計幾乎都會涉及到圖標的表達，出色的圖標設計可以讓界面表達更加精致潮饱、有趣来氧。
圖標的設計往往也體現著設計師的基本功，因此除了日常多畫提升對圖標造型的把控力外香拉，我們也更需要了解和學習圖標設計的趨勢類型啦扬，從而幫助我們提高在設計中的效率。
基于自我學習的目的凫碌，平時在瀏覽一些設計網站時也會做相對應的收集扑毡。因此本文主要對于圖標設計的 「類型、風格」 進行了整理证鸥，以及自己對于每種圖標類型的思考僚楞。
圖標的類型劃分
設計網站上的圖標可以說是多種多樣，不同類型的圖標都有著獨特的魅力枉层。例如泉褐，線性圖標簡潔輕量、面性圖標厚重直接鸟蜡，當然同一種類型的圖標也具有很多不同的表現形式膜赃。
因此基于本人對圖標的理解，大致劃分為三類：線性揉忘、面性跳座、線面結合端铛。結合三種基礎類型的表達方式可以創(chuàng)造出各式各樣的表現形式。
線性圖標
使用輕量的線條勾勒的圖標疲眷，整體感受也趨向于精致禾蚕、細致而具有銳度感。不同的線條表現具有不同的視覺感受狂丝，細線輕量换淆、直線硬朗、曲線柔美几颜。
1. 線型圖標基礎分析及想法
粗細對比
粗細不同倍试，圖標的力度和重量感就會有差異。粗線的圖標蛋哭，視覺關注力來說會更加突出县习，但較于細線的圖標也會顯得粗壯、厚重谆趾。細線的圖標躁愿，精致、透氣棺妓、秀美攘已。
但在設計時需要依據 「整體的 UI 風格」 來決定線的粗細炮赦，而并非單純的考慮圖標的關注度怜跑，反而更需要考慮圖標與界面整體的平衡感。
柔度對比
直角與圓角決定了外形的感知和風格的走向吠勘，如下圖對比中看出性芬，圓角越大圖形越趨向于可愛柔美（如下右圖），圓角越小則越直接剧防、硬朗和陽剛（如下左圖）植锉。因此剛或柔或中間值完全取決于早期對于整體風格的定調。
繁簡對比
除了輕量化和簡潔之外峭拘，圖標的識別性也是極為重要俊庇。如下左圖，「過度簡潔」 導致圖標失去該有的識別度而出現歧義鸡挠，而下右圖的元素疊加使得圖標稍顯復雜辉饱。在繁與簡的平衡中，應該保持在不影響圖標識別度的情況下拣展，最大限度的提升圖標的簡潔程度彭沼。
特征的識別度
除了簡潔程度，也需要考慮圖標該有的特征备埃。例如下圖 「評論」 圖標的案例姓惑，當我把圖標中的「三個點」 去掉時褐奴，圖標依舊具有 「對話/評論」 的表意，而當我把下面的 「箭頭」 去掉保留 「三個點」 時于毙，則會出現歧義敦冬，它可以被表意為 「更多」 的意思，因此在設計圖標時需要對于表意做精準把握唯沮，避免歧義出現匪补。
保持圖標的特征美感
如下面的 「心形」 圖標，下左圖是我們具有普識性的圖標烂翰，與圓形組合之后依然保持著原有的形態(tài)美感夯缺。但我們不時也會看到第三種設計，整體外形雖然保持著愛心甘耿，但為了與整體風格「一致」 強行對外輪廓進行切割踊兜，與原圖形在美感上則稍微有些出入，這也是我們需要思考的關鍵點佳恬。
組合型比例
組合型的比例會影響到圖標的精致程度捏境，準確的 「比例值」 能讓整體的造型趨向平衡，更具有美感毁葱。如下圖案例嘗試了兩組不同比例的效果垫言，這里以圖標窄邊作為 「基準值」 進行嘗試。當內形為外形的 1 : 2 時（下圖2）倾剿，圖標的整體視覺效果較為平衡筷频；當大于 1 : 2 并接近 4 : 3 時，圖標內部結構會顯得過于飽滿前痘。而小于 1 : 2 并接近 4 : 1 時（下圖3）則會產生稀疏不緊湊的效果凛捏。（這里的比例只是案例需要，實際設計以最終的視覺感知為準）
2. 線性類型拓展
基礎的理論芹缔，結合延展的應用坯癣，可以迸發(fā)出更多的創(chuàng)意想法。線形圖標也并非只有一種設計形態(tài)最欠。通過以下案例示罗，可以看看線型圖標設計類型的多樣性。
極簡風格
整體風格極為簡約芝硬，沒有多余的線條蚜点，通過線條還原圖形的本質，外形 「簡單」 卻具有很強的識別性吵取，在視覺感知上輕松禽额、干凈。
極簡的風格圖標在于對圖形的把控，多一筆可能顯得復雜脯倒，少一筆可能影響識別程度实辑。以上圖為例，圖標的組合元素保持在 2 個左右藻丢，整體較為干凈剪撬。
實際應用：Instagram、Airbnb悠反、Facebook残黑、Twitter
雙色
相較于 「純色的圖標」 更具表現力，細節(jié)上也會更加豐富斋否，形態(tài)感知上多了一層變化梨水。結合顏色的疊加、對比茵臭、互補提升了圖標的層次感和豐富度疫诽。
同色系：同為冷色系、暖色系或同一色系的表達形式旦委。如下圖案例奇徒，以暗色為主色，亮色點綴提亮缨硝，使得圖標具有一種高光提亮的感覺摩钙。
另一組案例是亮色主色結合暗色，整體圖標效果還算可以查辩，但較亮的顏色沒有應用在圖標的關鍵特征上胖笛，使得圖標第一眼的感知稍有減弱。
對比互補色：顏色跨度更大宜肉，層次更加分明匀钧。如下圖案例，紅色與藍色的撞色之后相比單色的圖標更加出彩和具有記憶點谬返。
實際案例：騰訊動漫我的頁面
透明度變化
本質上與上面一種為一個類型的設計，通過透明度的疊加和變化日杈，提升圖標的層次感和空間感遣铝，降低圖標的壓迫性。
實際案例：愛奇藝9宮格圖標
漸變層次疊加
漸變帶出了圖標的質感莉擒，結合「不同深度」或「不同飽和度」的變化辅愿，讓圖標更具有細節(jié)和層次棒口。
黑白+品牌色
黑白色作為主色調，結合品牌色作為點綴色。與常規(guī)的黑白圖標相比耘戚，既產生了變化谒麦，同時兼顧了品牌色的透出。
實際案例：大眾點評攻略頁面圖標
線性漸變
結合漸變的顏色，豐富了整個圖標的視覺表達壮莹，并提升了圖標的視覺沖擊力和設計感。案例結合黑白背景作為嘗試姻檀，白底：粗線比細線的視覺效果相對較好命满，漸變也能較為清晰地被表達；黑底：細線比粗線的視覺效果顯示得更加精致和具有銳度感绣版。
實際案例：網易考拉胶台、NAVER
一筆成形
此類圖標在視覺表達上具有較高的線性流暢度和設計感，關注點在于整組圖標的 「開口起始點」 設定上需保持一致杂抽。例如诈唬，「從左到右」或「從右到左」形成一體化的連貫線條，開口起始點不一致會影響整組圖標的一致性缩麸，應用在頁面時也會顯得雜亂讯榕。
斷點圖標
與上一種較為類似，但沒有連貫度的要求匙睹。在線形圖標基礎上面愚屁，尋找一個缺口來打破 「全包邊圖標」 的沉悶感，使得圖標具有透氣性和線條的變化痕檬。缺口的位置盡量保持統(tǒng)一的方向及大小霎槐，另外需要控制開口個數避免過多導致圖標外形過于零碎。
實際案例：騰訊體育梦谜、京東
面性圖標
面性圖標比線性圖標更能表達出圖標的力量感和重量感丘跌，比線性圖標會更加容易吸引用戶目光。在識別度上唁桩，面性圖標更加依賴于外輪廓的清晰度闭树，因此在設計時對于外形的打磨是重中之重，清晰的外輪廓可以幫助提高識別度荒澡。
1. 面型圖標基礎分析及想法
輪廓對比
輪廓的差異會體現出不同的氣質报辱，如下圖的左邊和右邊的區(qū)別，一個氣質較為直接硬朗单山，另一個則較為柔美可愛碍现。流暢的外形可以讓面形圖標的整體更加簡潔、規(guī)整米奸，如下圖中間的圖標在輪廓的處理上則顯得比較碎昼接，整體外輪廓造型的連貫度有所欠缺。
鏤空對比
適當的鏤空除了補充了圖形的識別度之外悴晰，還提升了面性圖標的設計細節(jié)慢睡。另外需要控制好鏤空部分與整體的外形比例，過小或過大都可能影響圖標的平衡感。如下圖的中間和右邊漂辐，鏤空過小對圖標的辨識度并沒有多大作用泪喊，沒有鏤空則少了一些透氣感。
形體對比
形態(tài)上的差異也會具有不一樣的視覺感知者吁。以「星」和「心」為案例窘俺，單獨形體與組合之后的形體相比視覺感知更直觀些，而組合形的圖標相對會精致一些复凳，多了一些層次瘤泪。在日常設計中的經驗是：越小的圖標形體應該越簡單，因此建議單體出現較好育八；若圖標的尺寸足夠大時可采用組合型的設計对途，補充圖標的細節(jié)。
繁簡對比
設計面性圖標時髓棋，對于多余細節(jié)的管理也很重要实檀。隨著細節(jié)的增加，塊面切割過多按声，會使得整體圖標變得過于零碎（如下右圖）膳犹。保持簡約的設計提高圖標的識別度，在關鍵的特征細節(jié)上做補充（如下中間圖的相機閃光燈）签则。
2. 面性圖標類型拓展
面性圖標在設計時也可以結合各種不同的表達方式须床，來提升圖標的質感和創(chuàng)意，而非只是簡單的填充顏色渐裂。
單色面+點綴色
整體的外形使用統(tǒng)一的顏色豺旬，結合圖標的屬性感知使用不同的顏色進行點綴，通過點綴色提亮了圖標的視覺效果柒凉，達到既統(tǒng)一又具有差異化族阅。
多彩雙色
通過對比色、鄰近色的搭配來營造整體的圖標氛圍膝捞，提升了圖標的層次和豐富度坦刀，雙色的表達也增添了圖形的趣味性。在日常使用的 APP 中極為常見绑警，簡單且容易出效果求泰。
微質感漸變
微弱的漸變提升了圖標的質感。漸變的方向會影響整體圖標的視覺效果计盒，因此可以根據不同設計的需要進行調整。如下圖案例：
實際案例：全民K歌
透明度/灰度變化
透明度/灰度的變化芽丹，讓原來單色的圖標變得更加具有層次感和空間感北启，設計細節(jié)更加豐富，降低了單色面性圖標的厚重感。
實際案例：企鵝FM我的頁面
透明度變化+漸變
漸變的設計提升了面性圖標的質感咕村，從顏色上具有一定的豐富度场钉。在漸變的基礎上對組合型做透明度差異化，使得圖標具有了層次感懈涛。
透明疊加的圖標+漸變的背景
此類圖標常常被應用在 UI 界面中的列表或者頂部入口的位置逛万。
實際案例：全民K歌點歌頁面
顏色疊加穿透
圖標透明疊加之后產生了交錯的負形，疊加出第三個面批钠。雖然整體設計依然保持著扁平化宇植，但卻多了一份層次感，并且增加了圖標的細節(jié)埋心。
實際案例：百度網盤
漸變層次疊加
整體的效果與透明度變化的圖標較為接近指郁，通過漸變的深淺變化，使得形狀的銜接處出現了明暗對比拷呆，因此圖標也具有了厚度感和層次感闲坎。
實際案例：NAVER、掌上生活
高斯模糊
此類圖標基本沒有在 APP 中看到茬斧，與「透明度變化」或「顏色疊加」相比都更具層次感和空間感腰懂，同時圖標也具有較強的設計感。
線面結合
結合了線性和面性的優(yōu)點项秉，既保持了面性的重量感绣溜，同時具有線性的精致、細膩伙狐。因此在設計時可以根據圖標具體想要表達的感覺對線面比例進行把控涮毫，不同比例可以呈現出不同的視覺感知。
1. 線面結合圖標的基礎分析及想法
線面比例
線面比例的差異贷屎，圖形呈現出來的張力也會有不同的感受罢防。基于中間填充的圖標形態(tài)嘗試了三種不同的比例唉侄，從下圖中可以看出咒吐，當填充與外形窄邊比為 1 : 3 時（左圖）圖標呈現往內收的感覺；填充與外形窄邊比為 1 : 2 時（中間）圖標整體較為平衡属划；當填充與外形窄邊比為 2 : 3（大于1:2）時（右圖）整體具有外擴趨勢恬叹。
組合形式
線面可以通過不同的組合形式進行繪制⊥校基于不同的組合形態(tài)可以設計出多種多樣的線面圖標绽昼，不同的組合形式會體現出不同的設計風格，因此在設計時盡量多發(fā)散思考须蜗，尋找出適合你的組合方式硅确。
繁簡對比
線面結合本身就由兩種形式組合目溉，因此在設計的時候更需要對整體造型進行把控，單體（線和面）造型必須保持較高的簡潔程度菱农，這樣最終組合形成的圖標才不會過于復雜（左圖）缭付，若本身形態(tài)過于復雜，則會降低圖標的辨識度和視覺美觀度循未。
2. 線面結合圖標類型拓展
線面結合的圖標集合了線性和面性的優(yōu)點陷猫，在設計方式上也繼承了兩者的優(yōu)點。設計方式也是基于以上兩種的結合的妖，因此可以結合出更多設計的可能性绣檬。
黑白線+面性品牌色
與「線性+品牌色」的做法較為接近，統(tǒng)一的線性顏色疊加品牌色的透出羔味。
實際案例：好好住河咽、soul
線面雙色
基于線面的基礎上，在線和面的顏色上做差異赋元。具體做法與線性或面性的雙色接近忘蟹。
線面結合-陰陽
線和面的結合按 50% 的比例進行設計，依據上下搁凸、左右媚值、居中等基礎方式的結構化設計，整體圖標的視覺效果較為跳躍护糖，非常規(guī)褥芒。
線面雙色+錯位
在雙色圖標的基礎上，線和面按照統(tǒng)一的 「百分比」 進行縮放嫡良，并進行透視和位移的設計锰扶，整體呈現出來的是一種交錯疊加的視覺效果，相比普通的線面雙色更加豐富寝受。
實際案例：閑魚底部tab坷牛、臉球底部tab
線面錯位+漸變
基于上一種風格，對面或者線的顏色進行漸變設計很澄，豐富了圖標的質感和顏色更加細膩京闰。
線面透明度變化
與「線面透明度變化」的設計方式大致一樣。如下圖案例甩苛，「弱線強面」的第一識別度較弱蹂楣，而「弱面強線」 的外形識別度較高，也更符合圖標的表達讯蒲。
實際案例：新浪微博痊土、騰訊新聞
基于三種基礎的類型表達，可以拓展出多種多樣的設計形式墨林。除了以上的案例之外施戴，還收集了一些其他的設計反浓。
線面結合 – 插畫
整體比較偏向插圖的感覺萌丈，細節(jié)和元素較多赞哗，常見于一些 APP 的空白頁設計。
線面結合?– 卡通插畫
整體感覺比較可愛辆雾、卡通肪笋、二次元，常見于一些二次元或漫畫類的 APP度迂。
面性?– 漸變強質感
整體風格的光影質感會比較強烈藤乙，常在一些活動運營或小游戲的界面出現。
面性 – 扁平寫實
整體感覺比較扁平惭墓，細節(jié)的豐富度與現實感知接近坛梁。
線面+漸變插畫
整體風格比較偏向絢麗多彩的顏色風格，質感和細節(jié)較為豐富腊凶。
寫實風格
3D質感圖標
由于 C4D 的制作成本相對較高划咐，目前較少在常規(guī)的 APP 中看到。但 3D 作為一個主流的設計趨勢钧萍，在時間和能力允許的情況下需要多做這方面的嘗試褐缠。
等距的線面結合
等距的設計，讓原本線面的圖標豐富了層次风瘦，并具有立體透視的感覺队魏。
除了以上這些之外，我們在實際場景中也會發(fā)現一些較為特別的圖標設計万搔。
Facebook 更多頁面的列表圖標
整體風格偏向插畫風+漸變質感胡桨。由于更多的頁面為純列表的設計，因此整個頁面在圖標的設計上做了很大膽的嘗試瞬雹，與常規(guī)的單色圖標相比更具有吸引力昧谊。為了區(qū)別不同的業(yè)務，系統(tǒng)性質的功能圖標做了色調的區(qū)分挖炬。
APP Store 游戲和新APP界面下的類別列表圖標
整體為具象化扁平風格的設計表達揽浙，圖標的顏色還原了最基本的現實感知。
iOS 系統(tǒng)辦公類軟件的起始頁面圖標
整體風格比較偏商務簡約意敛，具象的圖形表達+輕微的漸變質感馅巷。
QQ手機版中延展的功能圖標
整體風格偏向輕寫實+微弱漸變。每個圖標都具有豐富的細節(jié)表達草姻，色調方面基于業(yè)務屬性結合品牌色進行了區(qū)分钓猬，整體既統(tǒng)一又具有差異化。
大眾點評頂部入口的圖標
整體風格偏向寫實+強漸變+炫光感撩独，每個圖標都具有豐富的細節(jié)表達敞曹。
旅法師營地
游戲账月、二次元類的 APP，因此在圖標的設計上也偏向細節(jié)較為豐富的插畫風格澳迫。
嗶哩嗶哩動漫
圖標風格偏向卡通插畫局齿，選中態(tài)與默認態(tài)的設計較為巧妙。
總結
本文的重點在于透過這些設計類型或者技法的了解橄登，幫助我們在日常設計中提升輸出效率抓歼。圖標雖然作為 UI 設計的基礎，卻有很深的學問拢锹，精致的圖標更是可以起到點睛的作用谣妻，提升界面的質感和氛圍。
圖標的種類遠遠不止本文所提到的這些內容卒稳，但是萬變不離其宗蹋半，都是「線性、面性充坑、線面結合」 再結合 「透明度减江、漸變、顏色疊加匪傍、質感您市、多維空間」等等的表達方式而設計出來的。
我們除了需要掌握這些內容之外役衡，還需要提升圖標設計的造型能力茵休，更需要日積月累的練習和思考，從量到質的變化手蝎。
歡迎關注作者的微信公眾號：「IDfor」
非特殊說明榕莺，本文版權歸原作者所有，轉載請注明出處
