B端產(chǎn)品經(jīng)理的能力模型與學習提升
編輯導語：各大APP的圖標都各有特點，圖標的設計也是一門學問。在這篇文章中，作者全面解析了各類APP圖標設計背后的用意，一起學習一下吧。
如果說一個人的臉面、衣著打扮是給陌生人的第一印象，那么APP的應用圖標風格與氣質(zhì)就是留給新用戶的第一印象，關系著用戶是否對這個APP感興趣、是否會打開應用介紹、是否會點擊下載按鈕起著決定性的作用。
一個好的應用圖標有著無限可能，無形中對用戶產(chǎn)生強大的吸引力，并有一種想要了解的沖動，況且圖形本身就能讓人充分發(fā)揮想象力，這就是為什么不管在哪個應用市場第一眼看到的是應用圖標，而非應用名稱。
在一部手機就能解決很多問題的互聯(lián)網(wǎng)時代，相信每個人都有下載幾十上百個APP，琳瑯滿目的列表，應用圖標是否能在第一時間抓住用戶眼球（目標明確或鐵粉除外）非常重要，一個視覺傳達清晰且有吸引力的圖標能提升用戶點擊率，即便用戶只使用過一次，相對來說，印象也會更深刻。
本文根據(jù)筆者對大量應用圖標的分析、結合設計準則進行總結，希望能幫助大家在設計過程中規(guī)避掉一些常見的問題，歡迎一起探討、取長補短、共同進步。
應用圖標代表產(chǎn)品的外在形象，設計的精美與否決定著用戶的第一印象，是否產(chǎn)生打開的欲望跟當前圖標的視覺所傳達的內(nèi)涵有最直接的關系。應用圖標雖然不同于設計LOGO，表現(xiàn)方式也千變?nèi)f化，但必定有自身的設計準則要去遵守，利用設計的手段將視覺傳播的價值最大化。
首先，應用圖標需要盡量簡約。過于復雜的圖標會增加用戶的理解成本、甚至誤導用戶，但如果過于追求簡約，缺乏細節(jié)、個性化以及必要的隱喻信息，也會因過于單調(diào)，造成表意不明確等問題。
簡約并非簡單，設計師需要通過專業(yè)的知識進行合理的簡化，以提升應用圖標的設計品質(zhì)，方便用戶在不同場景中都能清晰的辨認。其次，需表意明確、易于理解。
應用圖標代表的是產(chǎn)品的行業(yè)屬性、功能作用或與眾不同的優(yōu)勢，要讓用戶第一眼就能識別出所代表的含義，貼近用戶的心理預期。
簡約易識別是應用圖標必備的基礎屬性之一，這也是為什么大部分產(chǎn)品都將logo作為應用圖標主視覺的原因，因為logo設計考慮到了方方面面以及后續(xù)延展的問題，即便有些logo較為復雜，也會通過提取局部元素、吉祥物、主體色等方式來強化應用圖標屬性，給用戶形成獨特的記憶，以提升應用的下載量和使用率。
應用圖標應該與產(chǎn)品的屬性、品牌有極強的關聯(lián)性，通過品牌延展賦予產(chǎn)品更強的生命力，讓用戶從接觸應用圖標的第一眼開始、再到后面的使用，整個過程始終都能保持清晰且統(tǒng)一的品牌認知，通過和諧統(tǒng)一的視覺效果，帶來更好的用戶體驗。
應用圖標需要與品牌之間必須保持高度的一致，著重從以下幾點體現(xiàn)：
1）LOGO
毫無疑問，用品牌logo作為主體圖形是最佳選擇，結合品牌色搭配使用，能將產(chǎn)品核心理念、品牌形象的傳播效果達到極致，在APP應用市場中，大家會發(fā)現(xiàn)大多數(shù)產(chǎn)品都在使用logo作為應用圖標的主視覺圖形。
2）品牌色
品牌色即主體色，將貫穿APP所有頁面的元素組件。眾所周知，每種顏色都有其特定的含義，能傳遞給用戶不同的心理感受。用主體色作為應用圖標的背景色，可以烘托出產(chǎn)品的情感氛圍，并與進入應用后的主體色遙相呼應，以最小的視覺跳躍性將前后關聯(lián)，強化用戶對產(chǎn)品的記憶感知。
3）IP/吉祥物
吉祥物屬于品牌logo延展的一部分， 也是產(chǎn)品的靈魂。當logo較為復雜時，因移動設備應用圖標位置空間有限，logo細節(jié)無法在短時間被用戶捕捉，不宜展示時，使用IP/吉祥物或其局部元素代替也是不錯的選擇。
4）產(chǎn)品名稱
如果說logo是產(chǎn)品的臉面，通過暗示和隱喻給用戶無限遐想并讓用戶記住它的樣子，那么名稱的出現(xiàn)就相當于產(chǎn)品主動進行了自我介紹，并讓用戶知道如何稱呼它。
將產(chǎn)品名稱作為應用圖標需謹慎使用：首先，文字傳達的信息量有限：其次，用戶對于圖形的理解效率要優(yōu)于文字；再者，應用圖標都會有對應的產(chǎn)品名稱展示（應用市場在右、桌面在下方），多少有些信息重復。
所以大家見到的應用圖標主體是產(chǎn)品名稱的不外乎兩種情況，一種是產(chǎn)品本身將名稱設計成字體logo，例如美團、懶飯；另一種是將產(chǎn)品名稱作為logo的輔助信息提示，例如繽紛生活。
以上是應用圖標與品牌屬性關聯(lián)最常見的四種方式，在設計中可靈活搭配，使用兩種及以上的方式組合，能將品牌傳播的途徑發(fā)揮到最大值。
筆者上小學時，曾經(jīng)在一次彩鉛繪畫作業(yè)中得到了老師的真心夸贊，但內(nèi)心卻備受打擊。老師對著我畫的桃子說“這西紅柿畫的太像了”。
舉這個例子似乎并不恰當，但結果是驚人的相似，筆者想要陳述的一個觀點是，不要讓你辛苦做出的設計成為別人的嫁衣，讓用戶誤以為這是其他企業(yè)的“某某某…”產(chǎn)品。
目前，應用市場中的APP數(shù)量巨大，且還處于增長的趨勢，同行業(yè)的圖標設計同質(zhì)化相當嚴重。想要讓自身產(chǎn)品應用圖標脫穎而出，就有必要在設計之前做好競品分析，借鑒競品的優(yōu)點，在突出自身產(chǎn)品核心特征、屬性的基礎上，還要用不同的表現(xiàn)手法突出其差異性，給用戶留下獨特的印象，避免同質(zhì)化。
應用圖標在設計完成之后（測試小組）、上線后（用戶反饋）進行可用性測試，主要針對圖標對用戶的吸引力、識別度等問題作進一步優(yōu)化，以確保圖標在不同場景中都能被用戶清晰識別并提升印象。
雖然可用性測試存在設計之后，但這一環(huán)節(jié)至關重要，它決定著產(chǎn)品的下載量以及使用率。
單色圖標通常以品牌色作為背景色、logo以反白的形式呈現(xiàn)，既能突出品牌色、還能用于烘托主體圖形，不過這種方式僅適合色值單一的logo，多色值可能會與背景色產(chǎn)生融合或色彩反差太大影響視覺傳達效果。另外，如果logo視覺重量較大，也可使用白色背景+原品牌色logo，這樣會更直觀。
單色應用圖標雖然色彩比較單一、表現(xiàn)形式也受到局限，但視覺清晰、簡潔且識別性強，如果能運用其他設計手法豐富圖標細節(jié)就再好不過了。
多色圖標使用了兩種及以上的顏色，更多是直接使原多色彩的logo圖形+白色背景，無需任何加工，控制好尺寸規(guī)范就行。如果是運營推廣所需，如春節(jié)、618、雙11等活動，會對應用圖標加以其他色彩烘托、點綴元素或標簽等，色彩就會更多，但一般都具有時效性，活動過期即圖標復原。
多色圖標的細節(jié)、層次更加豐富，設計時確保各色彩搭配協(xié)調(diào)，一旦因色彩過多造成視覺混亂，就得不償失了。
無論是單色還是多色，添加漸變會讓應用圖標更加細膩、耐看。漸變的表現(xiàn)手法應用廣泛，簡單的漸變能讓圖標細節(jié)豐富，同時也具備空間感和微立體感。
設計漸變色圖標需注意圖形銜接處的對比度，花里胡哨的漸變色會拉低品質(zhì)感，要確保色彩的和諧，讓圖標視覺清晰且容易識別。
單色、多色或是漸變都可通過調(diào)整不透明度、圖層疊加的方式來豐富應用圖標細節(jié)，相比純粹的漸變，立體感和空間感更強。使用顏色疊加需注意色彩對比及明暗關系，否則會衍生出臟亂的顏色。
環(huán)形構圖為主，由多個元素復制并以統(tǒng)一的中心點、旋轉(zhuǎn)角度，旋轉(zhuǎn)衍生出一個主體圖形。這種應用圖標的設計構圖飽滿、色彩豐富，能給用戶傳遞出輕松愉快的視覺體驗。
需要注意的是，由于顏色較多，至少在三種顏色及以上，否則無法構成色環(huán)類的主體圖形（錯覺）。如果沒有超強的配色功底，最好按照色環(huán)的順序依次取色，即便沒有太大的優(yōu)勢，但至少不會出錯。
一個好的應用圖標應該是多元素、多信息結合運用，才能達到更好的效果。雖然大部分主體圖形使用了logo，但并不影響設計師們對其進行拆解，提取局部元素、色彩、名稱等信息進行二次創(chuàng)作，從原則上來說，是一次線上logo的設計。
應用圖標種類繁多，切不可盲目跟風，需經(jīng)過認真的分析、研究，找到最適合自身產(chǎn)品的才是最重要的，且每種類型并非獨立，在條件允許的情況下還能跨類型靈活搭配、相互組合。
1）單中文字體
僅次于圖形logo的表現(xiàn)方式，通常會在產(chǎn)品名稱中提取一個具有代表性的文字對筆畫、結構等進行再設計?；趪宋幕膬?yōu)勢以及對漢字的敏感度，既能降低用戶對應用圖標的認知成本、還能根據(jù)產(chǎn)品特性設計出差異化的視覺效果。
不過因為文字筆畫的原因，單個文字提取難度較大，避免信息傳遞有誤或影響識別度，建議選擇筆畫較少且具有特性/代表性的文字，若達不到條件，最好選擇其他表現(xiàn)方式。
2）多中文字體
使用兩個及以上漢字，大多直接將產(chǎn)品名稱用在圖當中，對用戶來說更容易記憶，有利于品牌推廣。相比單字體，設計感會受到一定的局限，不宜做過于夸張的表現(xiàn)方式，因文字較多，設計時一定要注意文字的協(xié)調(diào)與可讀性。
多文字圖標建議將字數(shù)控制在2~6個范圍內(nèi)，3字以內(nèi)一行顯示，超過3字即兩行顯示且最多不超過兩行，否則會影響圖標的識別效果。
3）中文、圖形組合
適當添加帶有產(chǎn)品特性的輔助圖形，用引導或指向性的方式對文字進行強調(diào)，圖標細節(jié)會更豐富，可以突出產(chǎn)品想要傳達的信息、以及不同的氣質(zhì)，還能增加圖標的形式感和趣味性。注意添加的圖形不要過于復雜，不然會讓信息混亂，適得其反。
4）中文圖形化
根據(jù)單個字體筆畫的特點進行巧妙的變形或延展，會讓你的應用圖標更具設計感、品質(zhì)好。這種方式對設計功底的要求較高，需要確保字體的識別度，切勿霸王硬上弓，如果是為了設計而設計，就違背的信息傳播的初衷。
5）中文、IP形象組合
由產(chǎn)品名稱和IP形象組合而成，這種方式能通過品牌IP不同的視覺形象帶給用戶情感化的體驗，讓產(chǎn)品更具親和力，拉近與用戶之間的關系。例如，IP的喜、怒、哀、樂表情變化分別對應用戶不同的心理感受，以加深用戶對產(chǎn)品的印象及品牌認知。
1）單英文字體
單英文字體通常是提取產(chǎn)品名稱拼音首字母或英文首字母進行創(chuàng)意設計，跟中文字體相比，基于字母本身線條的簡潔及流暢性，再結合產(chǎn)品特點，很容易設計出兼具美感、高識別度的應用圖標。
需要明確一點，不管如何創(chuàng)意，也僅局限于在26個英文字母中選擇，如果想設計出差異化的應用圖標，對設計師來說，是一個很大的挑戰(zhàn)。
2）多英文字體
跟多中文不同，中文產(chǎn)品名稱在移動端基本不會超出6個字，而全拼音或英文名則多達十幾位甚至更多，為了用戶能更好容易識別、記憶，依然是提取不同拼音或單詞的首字母（中文全稱）進行設計。
多英文的應用圖標很很容易形成獨有的產(chǎn)品簡稱，更利于用戶記憶，但字母一定不要過多，如果無法刪減，那就只突出特定的2~4個字母。
3）其他類型
字母與圖形、IP形象組合以及字母圖形化，其表現(xiàn)方式、設計原則與中文字體圖標類似，這里不做過多闡述。
1）數(shù)字設計
人們對于數(shù)字來說是非常敏感的，不存在文化差異或認知誤區(qū)，基于數(shù)字便于記憶且容易識別的特點，將數(shù)字圖形化后應用到圖標當中，會讓產(chǎn)品具有親和力，有利于品牌傳播。單純的數(shù)字過于簡單，需增加一些細節(jié)，豐富圖標層次，讓其具備獨特的記憶點，不然會顯得單調(diào)。
2）符號設計
每個符號都有特定的含義，因此，在選擇符號作為應用圖標之前，首先需要了解清楚該符號是否能體現(xiàn)出產(chǎn)品屬性以及想要表達的意思，例如“¥”適合攢錢、理財相關的應用，而“+-×÷”則適合用于計算器或數(shù)學相關的應用；其次，符號跟數(shù)字一樣，都比較簡單，需經(jīng)過二次創(chuàng)作后才會使用。
1）線性圖形
線性風格的應用圖標能給人一種簡潔輕快的感覺，設計師通過提取產(chǎn)品的品牌信息、功能服務等進行創(chuàng)意設計，將得到的關鍵詞以一條或多條線段組成高度抽象的圖形來達到信息傳播的目的。
通常以反白的形式出現(xiàn)，背景可以是單色、漸變色或加以輔助圖形點綴。
線性圖形非常適合文藝類簡約風格的應用，通過不同的線條帶給用戶不同的心理感受，例如直線代表大方、專業(yè)、正直；斜線代表張力、速度；曲線代表流暢、飄逸及柔軟等。
設計時，切記圖形不能過于復雜，否則會影響其辨識度，增加用戶的認知成本，也不利于品牌推廣。
2）面性圖形
也可稱之為剪影圖形，根據(jù)產(chǎn)品屬性，將日常生活中被大眾所熟知的動物、植物、食品、工具、玩具…等事物進行簡化，通過刻畫事物的造型輪廓來形成獨立的剪影圖形。
高識別度的剪影圖形會讓整體看起來非常醒目，提高信息傳播的效率，只要控制好造型，即便把圖標縮到很小也能清晰辨認。
因現(xiàn)實世界中事務的復雜性，被提煉出的圖形如果細節(jié)過多會顯的復雜且不夠干練、細節(jié)過少則難以辨認，所以需要對圖形進行創(chuàng)意加工，最終以確保應用圖標的功能和美感兼具。
3）幾何圖形
幾何圖形在應用圖標中使用的很廣泛，可以是線性或面性，表現(xiàn)形式也非常豐富，利用幾何圖形通過單獨、組合、布爾運算等方式形成簡單且個性化的創(chuàng)意圖形，帶給用戶簡約、現(xiàn)代、空間、熱鬧等不同的心理感受。
幾何圖形構圖簡潔，設計形式豐富多樣，想設計出具備設計感和差異化的應用圖標，很考驗設計師的創(chuàng)意能力。
對純色剪影圖形增加太多細節(jié)，無疑是將其“大卸八塊”，變成一堆零件，但通過多色、漸變、圖層樣式等表現(xiàn)手法設計成卡通形象，就完全不一樣了。
卡通形象能體現(xiàn)出產(chǎn)品的生命力、親和力，以及直觀且易于理解和記憶的特質(zhì)，對品牌形象的塑造、傳播起到了很好作用。
在畫卡通形象時，需要注意產(chǎn)品主用戶群體的年齡段，切勿一開始就把活潑可愛作為卡通形象的代名詞，避免絕對低齡化的表達，同時需要設計師有一定的繪畫功底。
利用人體的局部元素，如眼睛、嘴巴、手足、頭部等，再結合常見的表情動作進行圖形化設計，相當于給原本冷冰冰的圖形賦予了生命力，傳達出不一樣的情感，而且用戶原本就對人體元素敏感度更高，更容易打動用戶并形成較強的記憶。
擬人化的應用圖標會顯得親民，便于拉近與用戶之間的關系，適度在抽象的圖形上加入情感化（動作/表情）表達，能生動、形象的體現(xiàn)出產(chǎn)品獨有的特性。
如果想要較強的視覺沖擊力，建議元素不要過多，最好是對某個單一的元素作放大或特寫處理，讓用戶看到更多的細節(jié)，也可用夸張、比喻、襯托等表現(xiàn)手法強化特點。
擬物化圖標使用的比較少，它更偏向于某種行業(yè)類型，例如工具、游戲類型的應用，通過超接近于現(xiàn)實世界中的物體造型，基本不需要用戶思考，一眼就能理解，但也正因為這種特性，信息量的傳播受到很大局限，僅適合單一且大眾化的信息傳達。
在如今，想同時融入行業(yè)、屬性、品牌等多元化內(nèi)容的信息化時代，顯然不太實用了。
應用圖標背景通常以單色、漸變色居多，除此之外，還可以添加與主體圖形相呼應的輔助圖形背景，以豐富圖標的視覺層次。圖形背景一定是為襯托或突出主體圖形的輔助存在，切勿過分表達，以免喧賓奪主。
當主體圖形的結構、色彩不是很復雜，且產(chǎn)品面對的是年輕化用戶群體時，可通過色彩拼接、晶格化或多種鮮明的色彩漸變等方式設計出炫彩效果，色彩表現(xiàn)豐富的應用圖標，能帶給用戶更強的視覺沖擊力。色彩可多但不可亂，需要把控好色彩之間的對比關系。
常見于在特定的節(jié)日中，例如618、雙11、雙12及傳統(tǒng)節(jié)日等，產(chǎn)品會存在促銷、打折活動，為了更早的讓用戶知道，會在應用圖標的某個區(qū)域以標簽的方式出現(xiàn)，起到引導用戶的作用。
不過這種表現(xiàn)方式具有時效性，活動截止即圖標樣式復原。
通過配色或節(jié)日相關的元素點綴，營造出一種感同身受的節(jié)日氛圍。例如：春節(jié)期間，部分應用圖標背景會調(diào)整為紅色，并使用燈籠、煙花、文案等元素點綴，制造出普天同慶、與用戶同樂的喜慶感，或者在高考期間鼓勵學生，少了套路、多了真誠，給用戶留下較深的印象。
通過元素的大小、長短、虛實、稀疏、方向以及不同的色彩、明暗關系等方式進行對比，形成強烈的反差效果，同時兼具張力和美感，這也是應用圖標設計中很常見的技法表現(xiàn)之一。
對稱在自然界中隨處可見，在互聯(lián)網(wǎng)設計中也是如此，應用圖標中的主體圖形以對稱的方式呈現(xiàn)，能給用戶平衡、和諧的感覺，也讓圖標更具有觀賞性。
將應用圖標中的主體圖形分割，賦予不同的顏色、樣式等，明確層級劃分，可提升圖標的美感。例如：將色塊分割成不同的比例、形狀，就能組合成一個完整的熊貓圖形（百度搜“熊貓剪影”圖片）。
如果適合使用0.168黃金比例分割就再好不過了，這是被公認為最具美感的比例。
將相同或相近的圖形以某種規(guī)律連續(xù)性的排列，相比單調(diào)的圖形，會更加飽滿。重復性的表現(xiàn)手法以大小、色彩、位置、形狀等作為出發(fā)點進行有序的排列，最終形成一種規(guī)律、整齊的節(jié)奏和藝術感。
需要注意的是基礎圖形不能過于復雜，一定是有規(guī)律的重復，否則會讓圖形變的混亂，無法形成整體。
在保證識別度清晰的前提下，將兩個或以上的元素相互重疊、交叉在一起，能形成前后左右的層級關系，制造空間感，同時也能將多個圖形關聯(lián)在一起，避免圖標元素零散或單調(diào)，讓整體性更強，豐富用戶視覺感知。
正負形也是常見的表現(xiàn)手法之一，利用正圖為底，通過減去底層挖空的方式突出（錯覺）負形，將產(chǎn)品特征、屬性及服務多途徑的傳達給用戶，可謂是“一石二鳥”。
正負形圖標能將信息傳播最大化，且設計感十足，好的正負形圖標能給用戶形成獨特的記憶點，但設計時需要注意正、負銜接的順暢度，否則無法清晰的傳播信息。
通過產(chǎn)品屬性、功能或特點進行思維發(fā)散，例如：夏天，我們會想到空調(diào)、海灘、冰淇淋、比基尼、裙子（女性）、夜空等一系列相關聯(lián)的事和物，搜集起來并做好整理歸類，確定大致的設計方向。
確定了大致的設計方向，就去找同行業(yè)、同類型或相似的應用圖標分析其形狀、配色、組合類型等，取長補短，這也是避免同質(zhì)化非常重要的一個環(huán)節(jié)，幫助自己在后續(xù)設計出具備差異化的應用圖標做鋪墊。
可以從產(chǎn)品名稱或功能屬性方面找出產(chǎn)品最想傳達的核心信息，并提煉出關鍵詞。切記，關鍵詞不可脫離帶水、表意不明確，一定要夠精煉、能表達出核心內(nèi)容。關鍵詞在精不在多，如果太多，需要通過層層遞進，篩選出“一主三輔”，要知道這關系著后續(xù)應用圖標傳達信息的精準度。
將上一步得到的關鍵詞轉(zhuǎn)化成抽象圖形，進行視覺化提煉，這時應用圖標的雛形已經(jīng)形成，再結合前面所提到的圖形分類、表現(xiàn)手法以及注意事項等，進入圖標繪制流程。關于圖標設計規(guī)范及原則，在之前的《圖標篇 | 圖標設計必備的基礎知識！》文章中有詳細說明，這里不做闡述。
基本圖形繪制完成后，通過添加點綴、輔助圖形、背景處理等方式豐富圖標細節(jié)，進行精細化處理，使其更精致，具備高識別度及品質(zhì)感。
分別通過移動端應用商店列表、應用詳情、設置中應用列表、桌面以及WEB商店等，對不同位置的大小、不同的桌面背景進行虛擬測試，以確保在不同場景中都能被用戶高度識別，如果這些問題等著被用戶發(fā)現(xiàn)，很可能給產(chǎn)品帶來不利的影響。
需要對iOS和Android系統(tǒng)各輸出一套圖標，iOS只需一個1024px的切圖便能適配所有，且無需設定圓角。Android則需要多套切圖規(guī)范，如512px、198px、144px、96px、72px、48px，圓角半徑以512px為基準設定為90px（參考值）。
這些固定的尺寸規(guī)范并不在技術能力范疇，如果實在不清楚，需要用時就“百度一下”一大把，或直接找開發(fā)人員拿尺寸都不是難事。
首先，筆者要感謝耐心看到這里的小伙伴，希望總結的內(nèi)容能幫到大家，在前期設計中作為資料參考，避免出現(xiàn)常見的問題，防止進入誤區(qū)。
其次，要想設計出優(yōu)秀的應用圖標僅看上述內(nèi)容是遠遠不夠的，少不了平時的多看、多練、多思考，需日積月累，逐漸提升自己的視覺審美、造型提煉、執(zhí)行效率等多方面設計能力。
應用圖標的總結分享就到這里了，對你有幫助的話就給筆者點個贊吧，如果有不同意見，歡迎在評論區(qū)交流或指正，以便查漏補缺，共同進步。
大漠飛鷹；公眾號：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘，利用設計的手段為受眾用戶帶來更好的體驗，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于 CC0 協(xié)議
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
扁平化設計這一趨勢已經(jīng)流行了挺長時間，而現(xiàn)在，設計風向似乎要有所轉(zhuǎn)變了，這或許可以從一些設計案例中透露出來。這篇文章里，作者就從案例出發(fā)，展示了設計趨勢的演變，一起來看看吧。
設計趨勢來來去去，但一個普遍的趨勢已經(jīng)流行了很長時間，那就是扁平化設計，現(xiàn)在也幾乎是無處不在，UI中的按鈕，Logo，圖形設計等等。
最近感覺設計風向有點變啊，我碰到幾個例子感覺挺有意思的，似乎是印證了這波轉(zhuǎn)變。
在這篇文章里，我主要聚焦在UI設計領域，看看設計趨勢在這方面都經(jīng)歷了哪些變化。
2013 年蘋果推出 iOS 7 后，扁平化設計火得一塌糊涂，界面設計方向一夜之間發(fā)生了轉(zhuǎn)變。雖然蘋果也是借鑒了其他制造商已經(jīng)應用的元素，但其作為行業(yè)風向標的影響力依然無人能及。
從擬物到扁平，iOS 7 帶來了革命性的設計語言飛躍，顛覆了之前 iOS 的視覺風格。蒂姆·庫克將其稱為 “iPhone 以來 iOS 最大的變革”。
看上圖就一目了然（iOS 6 左，iOS 7 右），iOS 7 砍掉了許多元素的 3D 效果，整體扁平了很多。其實改成這樣是有道理的，畢竟擬物設計當初是為了讓用戶更快上手新界面，現(xiàn)在大家都習慣了，設計語言也需要更新迭代了。
十年過去了，絕大部分現(xiàn)代界面設計依然在用這種設計語言。然而，隨著設計逐漸追求更多復雜性和立體感（是的，又是3D，回到擬物設計），一些方面也開始出現(xiàn)變化。讓我們來看看幾個近期的例子。
值得說的是，盡管蘋果公司在引領扁平化設計趨勢方面發(fā)揮了重要作用，但其實靈感還是來自Windows Mobile 和 Android 等產(chǎn)品。Windows Mobile 才是先在主流制造商中第一個用扁平化設計的大廠。
對這段歷史感興趣的可以看看這篇10年前寫的文章：https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences
先一起看看最近的一個大廠設計改版案例，Reddit最近刷新了它的Logo。你能從上面的圖中看到，相比于舊版，新的設計有了一些3D風格化。
一直以來，扁平化logo是主流，但隨著像Pentagram這樣的設計大廠都開始探索3D化設計風格，預示著扁平化的時代就快要過去了。
現(xiàn)代的品牌logo設計大多是扁平的，因為這樣既清晰易讀又方便調(diào)整大小。真想看看其他公司接下來會怎么玩品牌設計。
回到2020年，在那年的11月，蘋果刷新了它們的MacOS圖標風格。我個人認為，這是在細節(jié)設計上搭配更多3D效果這股趨勢的源頭，我在網(wǎng)上看到了很多這樣的討論。
從 Big Sur 開始，蘋果就在圖標上下功夫，給原生應用圖標加料，讓它們看起來不那么乏味。你看上面那些，陰影也深了，漸變也多了，整個圖標更有立體感。
一看蘋果都整 3D 了，不少第三方應用開發(fā)商也坐不住了，紛紛改起了自家圖標，看起來更立體了。
蘋果在界面設計上向來引領潮流，這次的新趨勢，又不知道多少公司和個人會跟著玩。
Airbnb在最近的夏冬主題設計更新里，玩了不少 3D 和復雜設計。就拿它們新出的“游客護照”來說吧，圖標就跟真“書”似的，點開交互還有翻書動畫，賊逼真。
游客護照打開后，頂部卡片加了陰影，看著更有立體感，一點都不扁了。
Airbnb 在其他地方也玩兒 3D 了，比如“最受歡迎”那個地方，評分都立體起來了，還有那個改版后的“選月份”的按鈕，做得跟真表盤似的。
最后，他們冬天的新版本里，插畫也搞起了等角投影風格，給你們看下面他們那個新版本宣傳片就知道了。
Shopify 對深受好評的設計系統(tǒng) Polaris 進行了重大更新，換了套新花樣！以前那些扁平的按鈕，現(xiàn)在縮小了，還更帶感了，按著賊舒服。
這次重設計也不是瞎改，當初設計團隊說扁平化做能讓界面干凈，理解簡單，用著還效率高?？蓵r間一長，商家們就不樂意了，說這界面整得“沒勁”、“乏味”還“單調(diào)”。
改設計主要是為了把軟件界面打造成 “專業(yè)工具”，更加高大上。改動之后，按鈕在點擊時更爽了一些，就像商家們平時在用的物理按鍵一般。
探索的2種不同設計風格
上面這些案例展示了現(xiàn)代設計趨勢的演變，從扁平化設計向更加注重細節(jié)的方向過渡。
扁平化設計固然擁有清晰高效等優(yōu)點，但現(xiàn)代設計更傾向于展現(xiàn)層次和深度。設計師和開發(fā)者應當密切關注這一趨勢，并做好準備將相關元素融入自身系統(tǒng)，尤其是在大型品牌和產(chǎn)品中逐漸成為趨勢的情況下。
設計趨勢真是一個輪回。
原文作者：Chan Karunaratne（本文翻譯已獲得作者的正式授權）
譯者：彩云Sky，人人都是產(chǎn)品經(jīng)理專欄作家，騰訊高級視覺設計師。
本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在做產(chǎn)品設計的時候，UI界面更多是由設計師完成，產(chǎn)品僅是提供界面元素和布置，其他的由設計師發(fā)揮。但如果產(chǎn)品能了解更多設計相關的知識，在和設計師探討、分析時會更有針對性，也會讓產(chǎn)品的工作顯得更為專業(yè)。
在當今數(shù)字化時代，我們與各種移動應用、網(wǎng)頁和軟件界面打交道，圖標就像是這些界面的明星。它們小巧玲瓏、獨具特色，扮演著連接用戶與界面的重要角色。本文將帶您深入了解UI圖標的定義、作用以及在用戶界面中的重要性。
A. UI圖標的定義
UI圖標是指用簡潔明了的小型圖形符號來表示特定功能、操作或信息的設計元素。圖標通過簡單的形狀和圖像，向用戶傳遞信息和功能，并在界面中起到重要的導航和標識作用。
B. UI圖標的作用
C. UI圖標在用戶界面中的重要性
UI圖標在用戶界面設計中扮演著不可或缺的角色，其重要性體現(xiàn)在以下幾個方面：
UI圖標設計是用戶界面的重要組成部分，它們不僅可以幫助用戶更快地理解和使用應用程序或網(wǎng)站，還可以增強整體視覺效果。為了設計出高質(zhì)量的UI圖標，設計師需要遵循一些基本原則和要素。
A. 獨特性和可識別性
設計具有獨特特征的圖標 UI圖標應該具有獨特的特征，使其能夠與其他圖標區(qū)分開來。設計師可以通過使用不同的形狀、顏色和風格來實現(xiàn)這一目標。同時，圖標的形狀和顏色也應該與應用程序或網(wǎng)站的主題和品牌形象相一致，以幫助用戶更快地識別和理解圖標的功能和意義。
避免與其他圖標混淆 為了避免UI圖標與其他圖標混淆，設計師應該確保圖標的形狀、顏色和風格與其他圖標有足夠的區(qū)別。如果圖標的形狀和顏色與其他圖標過于相似，用戶可能會難以區(qū)分它們的功能和意義，從而影響用戶的使用體驗。
B. 簡潔性和清晰性
追求簡潔的圖標設計 簡潔的圖標設計可以幫助用戶更快地理解和使用圖標。設計師應該盡可能地簡化圖標的形狀和顏色，避免使用過多的細節(jié)和復雜的形狀。簡潔的圖標設計還可以幫助應用程序或網(wǎng)站的整體視覺效果更加統(tǒng)一和和諧。
避免過度復雜化的細節(jié) 過度復雜化的細節(jié)可能會使圖標變得過于復雜和難以理解。設計師應該避免使用過多的細節(jié)和復雜的形狀，以確保圖標的簡潔性和清晰性。同時，設計師也應該確保圖標的形狀和顏色足夠明確，以便用戶能夠輕松地識別和理解圖標的功能和意義。
C. 一致性和統(tǒng)一性
維護整個UI界面的一致性風格 UI圖標應該與整個UI界面的風格保持一致。設計師應該確保圖標的形狀、顏色和風格與應用程序或網(wǎng)站的主題和品牌形象相一致。這樣可以幫助用戶更快地識別和理解圖標的功能和意義，同時也可以增強應用程序或網(wǎng)站的整體視覺效果。
使用相似的線條、顏色和風格 為了實現(xiàn)一致性和統(tǒng)一性，設計師應該使用相似的線條、顏色和風格來設計圖標。這樣可以使圖標與整個UI界面的風格保持一致，同時也可以使圖標的形狀和顏色更加和諧統(tǒng)一。
D. 可視化傳達
明確圖標所代表的含義和功能 為了確保用戶能夠輕松地理解和使用圖標，設計師應該確保圖標的形狀和顏色能夠明確地傳達
使用適當?shù)男螤?、符號和顏色傳達信息 為了確保圖標能夠明確地傳達信息，設計師應該使用適當?shù)男螤睢⒎柡皖伾?/p>
例如，一個圖標可能需要使用一個圓形作為基本形狀，同時使用一個代表性的符號來表示它的功能和意義。
同時，設計師也應該確保圖標的形狀和顏色與應用程序或網(wǎng)站的主題和品牌形象相一致，以幫助用戶更快地識別和理解圖標的功能和意義。
E. 可縮放性和適應性
使用矢量圖形實現(xiàn)圖標的可縮放性 為了確保圖標在不同屏幕和設備上的可用性，設計師應該使用矢量圖形來實現(xiàn)圖標的可縮放性。
矢量圖形是一種基于數(shù)學公式的圖形，它們可以在不失真的情況下進行任意大小的縮放。
這意味著：即使圖標被放大或縮小，它們的形狀和顏色也不會發(fā)生變化。
確保在不同屏幕和設備上的可用性 為了確保圖標在不同屏幕和設備上的可用性，設計師應該考慮圖標在不同分辨率和屏幕尺寸下的表現(xiàn)。
例如，設計師應該確保圖標的大小和形狀適合不同屏幕和設備的顯示。
同時，設計師也應該確保圖標的顏色在不同的屏幕和設備上都能夠保持一致，以幫助用戶更快地識別和理解圖標的功能和意義。
UI圖標設計需要遵循一定的流程和技巧，以確保圖標的高質(zhì)量和可用性。
以下是一些常用的設計流程和技巧：
A. 需求分析和功能定義
在開始設計之前，設計師需要了解UI圖標的使用場景和目的。這可以幫助設計師確定圖標所代表的含義和功能，以確保圖標的準確性和可用性。
B. 創(chuàng)意和草圖階段
在進行創(chuàng)意和草圖階段，設計師應該進行創(chuàng)意思維和頭腦風暴，以產(chǎn)生出多種不同的設計方案。同時，設計師也應該從簡單的草圖開始構思圖標設計，以確保圖標的可行性和可實現(xiàn)性。
C. 細化和完善設計
在細化和完善設計階段，設計師應該使用矢量工具進行圖標設計，并重點關注細節(jié)和清晰度的提升。這可以幫助設計師創(chuàng)建出具有獨特特征的圖標，并確保圖標的可縮放性和適應性。
D. 反饋和優(yōu)化
在反饋和優(yōu)化階段，設計師應該向用戶和團隊收集反饋，并根據(jù)反饋進行圖標的優(yōu)化和調(diào)整。這可以幫助設計師確保圖標的準確性和可用性，并根據(jù)用戶的需求和期望進行調(diào)整和優(yōu)化。
UI圖標設計是一個重要的設計領域，它可以幫助用戶更快地理解和使用應用程序或網(wǎng)站。以下是一些成功的UI圖標設計案例和分析。
A. 探索成功的UI圖標設計案例
成功的UI圖標設計案例可以幫助設計師了解和學習一些設計最佳實踐和技巧。成功的圖標有很多以下只列舉兩個圖標設計案例：
B. 分析圖標設計背后的原理和決策
成功的UI圖標設計案例背后都有一些共同的原理和決策。
以下是一些分析圖標設計背后的原理和決策的方法：
A. 總結UI圖標設計的重要性和原則
UI圖標在用戶界面中扮演著重要的角色，它們不僅能夠傳達信息和功能，還能夠增強用戶體驗和界面的美感。以下是一些重要的UI圖標設計原則：
B. 鼓勵設計師繼續(xù)探索和發(fā)展圖標設計技能
圖標設計是一個不斷發(fā)展和演進的領域。鼓勵設計師們繼續(xù)學習、實踐和探索，通過不斷嘗試新的技術和方法，提升自己的設計能力。以下是一些建議：
UI圖標設計在用戶界面中起著重要的作用。通過掌握設計原則和實踐技巧，繼續(xù)學習和發(fā)展設計技能，我們將能夠創(chuàng)造出令人印象深刻的UI圖標作品，提升用戶體驗和界面美感。不斷探索和挑戰(zhàn)自己，成為一名卓越的圖標設計師！
本文由 @Esc 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
對于 UI 設計師來說，圖標設計的能力至關重要，也是提升感官體驗的重要方向。對于一些初入行業(yè)的設計師，習慣下載圖標素材應付項目需求，失去了動手能力培養(yǎng)的機會。甚至一些多年工作經(jīng)驗的老司機，依然還擺脫不了使用素材的習慣，稍微復雜一點的技法就會難以駕馭。
1. 切勿過度素材化
對于初入職場的設計師來說，偶爾運用素材可以理解，但是一定要學會拆解和分析，掌握還原設計的技巧和能力。
過度依賴素材容易導致思維固化，不愿意去創(chuàng)造，失去創(chuàng)新設計的能力；也容易導致眼高手低，有想法卻實現(xiàn)不出來，極容易萌生放棄的念頭；素材拼貼形式完成的設計，在規(guī)范性和細節(jié)性上面也是大打折扣的，導致設計作品不夠精細化和規(guī)范性。
2. 刻意練習強化
我們需要通過刻意練習來提升圖標設計的能力，根據(jù)一萬小時定律，技法層面的提升都是通過反復磨練達到的。
3. 擺脫素材才能規(guī)范化
圖標設計從素材習慣過度到設計動手其實很容易，但是從會畫到畫好之間看似簡單卻很難掌握。擺脫素材是圖標設計規(guī)范化的關鍵，然后再統(tǒng)一風格和細節(jié)規(guī)范，掌握數(shù)字化關系也是需要我們反復研究的課題。
比如以這個天氣圖標來舉例，相信很多同學都能畫出來，但是有沒有把控里面的數(shù)字關系就難說了。通過以下示意圖我們可以看出來，大圓和小圓之間的比例關系是 4:3，而間距的關系也與圓形的大小有著數(shù)字關系。這些數(shù)字關系可以使得圖標設計更加精細化，也能引導我們?nèi)ヌ剿髟O計背后量化的標準和關系。
4. 質(zhì)感的層層強化
當我們繪制完圖標的造型之后，運用合適的風格進行質(zhì)感強化也是尤為重要的。這里我先運用其中的一個風格來完成，選擇了磨砂玻璃質(zhì)感的效果。為了質(zhì)感和層級關系更加明顯，這里單獨對局部進行了光影強化和邊界處理，看看以下步驟拆解圖感受一下。
備注：運用的軟件功能是背景模糊，Sketch 或者 Figma 等軟件皆可實現(xiàn)。
5. 延展界面場景
為了進一步強化圖標練習，延展了一個簡單的界面場景，一個由宮格布局組合成的界面設計。為了填充所需的內(nèi)容，先把之前的一些圖標作品放進去占個位置。雖然都是質(zhì)感一類的圖標，但是由于透視、配色、風格和細節(jié)規(guī)范等不一致，整體還是存在一定的排斥感。
6. 根據(jù)界面環(huán)境重新調(diào)整
由于界面設計屬于深色主題，之前練習的天氣圖標放入場景中顯得過于突出，而且玻璃質(zhì)感的通透性沒有得到很好的發(fā)揮。于是根據(jù)界面環(huán)境對天氣圖標進行了重新調(diào)整，以深色關系調(diào)整了云朵部分，針對太陽的配色和尺寸比例也進行了調(diào)整，如以下效果圖。
7. 延續(xù)風格補全設計
以調(diào)整后的天氣圖標作為風格規(guī)范，延續(xù)了其它業(yè)務場景的圖標設計，在透視關系、細節(jié)規(guī)范、配色比例和光影效果等方面進行了直接延續(xù)。在光影方向上面選擇了縱向區(qū)分，左邊三個選擇左上角打光，右邊三個選擇右上角打光。（當然也可以統(tǒng)一一個方向設置光影）
8. 統(tǒng)一性還是差異化
完成的整體設計視覺風格雖然比較統(tǒng)一，但是也有一些問題存在。圖標之間缺少差異化，過度統(tǒng)一容易視覺疲勞，于是在統(tǒng)一性和差異化上面開始糾結了。
為了既保障圖標設計表達的統(tǒng)一性，又能形成視覺感的差異化，做出了調(diào)整配色關系的決定。根據(jù)天氣圖標的配色關系延續(xù)出了其它色系，看看最終的效果如何。
你喜歡哪一版？
關于統(tǒng)一性和差異化因人而異，在朋友圈征集意見也是各有差異，那么你會喜歡哪一版呢？歡迎留言區(qū)一起互動交流。
原創(chuàng)能力的提升，就是創(chuàng)建一個場景給自己出題再反復驗證自己的過程。而訓練和真實項目不同的是，真實項目往往操心的事情太多，時間還少，會造成很多思想上的負擔，所以兩者都有提升但類型不同。
只有認識到圖標的重要性，并有自我驅(qū)動力去制定訓練的計劃，才能真正提升這部分能力。而它的附帶價值遠遠不止畫好圖標……
APP 圖標設計從創(chuàng)意構思到視覺呈現(xiàn)是一個系統(tǒng)而細致的過程，需要設計師充分理解應用的內(nèi)涵與目標受眾，挖掘獨特的創(chuàng)意元素，并運用精湛的設計技巧將其轉(zhuǎn)化為具有強大視覺吸引力和品牌傳達力的圖標作品。只有這樣，才能在競爭激烈的移動應用市場中，讓我們的 APP 圖標成為吸引用戶的第一道亮麗風景線，為應用的成功推廣和用戶留存奠定堅實的基礎。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
基于海外組件庫的核心設計原則和特性：交互與反饋，視覺層次與信息密度，簡潔與功能性。我們?yōu)椤秏yCommunity》項目的制定專屬規(guī)范，涵蓋按鈕，輸入框，卡片樣式，列表，圖標及主題定制換膚等相關組件庫。顏色的價值在于傳達品牌和情感，并增強可讀性。
文字是信息傳遞的主要載體，標準化的文字設計有助于提升可讀性和一致性。
我們不僅制定了文字規(guī)范，還升級了字體規(guī)范，新增了客戶指定的字體，并加入了沙特當?shù)氐陌⒗Z字體。
藍藍設計的小編 http://www.cqzjtgb.com