2.6 " 新擬物 "風(fēng)格圖標

蘋果在 WWDC20 搞了個大新聞：macOS 將與 iOS 統(tǒng)一步調(diào)，從X86平臺遷移至ARM 平臺，并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。

macOS Big Sur是第一個將 " 新擬物 " 設(shè)計投入大規(guī)模商用的操作系統(tǒng)，這可視為 " 新擬物 "在實用化道路上的首次勝利。值得一提的是，在 Big Sur 的 " 外觀 " 設(shè)置里，多了一項名為" 自適應(yīng)強調(diào)色 "的選項。蘋果將主題色的指定權(quán)留給開發(fā)者，這是否暗示新一代 App 在光影上會有更豐富的效果?

" 新擬物 " 設(shè)計的精髓在于對光線的絕妙運用。它把光效拿捏在 " 扁平 " 與 " 擬物 " 之間，進而打造一種全新的視覺體驗。

不同于傳統(tǒng)的擬物，" 新擬物 "雖然將符合物理規(guī)律的光影效果引入界面，但它所模擬的材質(zhì)是自然界不存在的。換句話說，" 新擬物 " 是將真實光線用于虛擬對象，而 " 擬物 " 是還原實際物品在特定光照下的效果;

由于整個設(shè)計界將不得不考慮新擬物風(fēng)格，圍繞該風(fēng)格的可能性將會有爆炸性的發(fā)展，并且這種新的數(shù)字空間設(shè)計理念如何能夠合理地適用于用戶界面設(shè)計和功能性將取得更大的突破。與以往一樣，第三方應(yīng)用將比蘋果更大膽、更快速地推動這一風(fēng)格——這也是我們將會真正開始解鎖新擬物優(yōu)勢的時候。

產(chǎn)品應(yīng)用圖標有不同的風(fēng)格，這些風(fēng)格有可能偏擬物，也有可能很扁平，有可能很抽象，也可能很具象。通過不同的設(shè)計風(fēng)格可以更加標新立異，從而被用戶記住。因此能在第一時間贏得用戶的好感和記憶非常重要，將產(chǎn)品圖標設(shè)計的好看且容易被人記住就成了非常重要的任務(wù)。應(yīng)用圖標的風(fēng)格主要有以下幾種。

3.1 中文文字圖標

中文是我們的母語，每一個漢字都令人記憶深刻，文字也是最直白的信息，而且不容易被曲解，所以很多國內(nèi)的產(chǎn)品都會使用文字作為自己的產(chǎn)品圖標。中文設(shè)計模式即字體設(shè)計，提取應(yīng)用名稱中的一個或多個漢字，進行設(shè)計變形，變形后的字體圖形具有產(chǎn)品屬性的外貌特征。常見中文圖標又分為單字、多字和字加圖形的幾種類型。

3.1.1 單字

提取產(chǎn)品名稱中最具代表性的文字，通過對筆畫及整體骨架進行字體設(shè)計，以達到符合產(chǎn)品特性和視覺差異化的目的。其優(yōu)點是可以直截了當?shù)膫鬟f產(chǎn)品信息，識別性強。

3.1.2 多字

多字圖標設(shè)計要注意的是整體的協(xié)調(diào)性和可讀性，一般為2-3個字，最多兩行(四個字)排列。

其優(yōu)點是更加直接的告訴用戶產(chǎn)品名稱，達到品牌推廣的目的，減輕用戶記憶成本。其缺點是如果圖標上的文字和下面的輔助文字完全一樣，會顯得重復(fù)啰嗦，像介紹了兩遍自己一樣。

3.1.3 字加圖形組合

文字加輔助圖形的組合，也是常見的產(chǎn)品圖標設(shè)計方法，相比純文字圖標，顯得更加豐富有獨特的產(chǎn)品的氣質(zhì)和屬性。需要注意的是做好文字和輔助圖形間的平衡。

3.2 英文字母圖標

英文設(shè)計與中文設(shè)計的設(shè)計模式相似，通常是提取應(yīng)用名稱的首字母融合產(chǎn)品的功能賣點或行業(yè)屬性進行創(chuàng)意加工，新的字母圖形依舊保持本身的識別性。

3.2.1 單字母

通常提取英文首字母進行設(shè)計，由于英文字母本身結(jié)構(gòu)簡潔，稍加改動就很容易達到設(shè)計感于識別性兼?zhèn)涞漠a(chǎn)品圖標。需要注意的是英文字母本來就少，都用字母很容易創(chuàng)意雷同，難以形成差異化。

3.2.2 多字母

提取產(chǎn)品全稱或幾個單詞的首字母組合而成，形成獨有的產(chǎn)品簡稱，方便用戶記憶。

3.2.3 字母加圖形組合

字母加圖形組合的設(shè)計形式比較廣泛，圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進行創(chuàng)意加工，可以使應(yīng)用圖標視覺表現(xiàn)更加飽滿。

3.3 數(shù)字圖標

直接用數(shù)字做應(yīng)用圖標的相對較少，但是數(shù)字識別性強，易于傳播的特點。利用數(shù)字進行設(shè)計能給人親和力。難點是怎樣與品牌形成強關(guān)聯(lián)性。

3.4 特殊符號圖標

由于符號本身的含義會對產(chǎn)品屬性有一定限制，所以特殊符號在應(yīng)用圖標的設(shè)計案例中相對較少。如“$”符號可代表與金錢有關(guān)聯(lián)性的產(chǎn)品，無法運用在與此屬性無關(guān)的產(chǎn)品上。不過也正是由于自身屬性強的特點，可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性。

#FormatImgID_26#

除了中英文圖標，還有圖形類圖標比較常見。這種類型的設(shè)計模式的優(yōu)點就是直觀醒目和簡潔大方，視覺沖擊力強。常見的有以下幾種：

3.5 幾何圖形

幾何圖形的設(shè)計模式給人簡約、現(xiàn)代、個性等視覺感受，從單個具象圖形到復(fù)雜的空間感營造，幾何圖形的表現(xiàn)形式非常豐富。不同的形狀給人的情感表達不同，如三角形給人傳達個性、穩(wěn)定、現(xiàn)代、時尚等，添加圓角后又會更加親民、可愛。我們可以結(jié)合產(chǎn)品特征，合理的選擇適合的形狀圖形進行創(chuàng)意。此類型較考驗設(shè)計師的圖形創(chuàng)意能力。

3.6 單雙形/剪影

單雙形是指應(yīng)用圖標只展示單個或兩個的剪影圖形。通常有兩種設(shè)計方式，在深色背板上使圖形反白，背景可以是單色也可以是漸變色;在淺色的背板上讓圖形填充顏色，圖形可以是單色也可以是漸變色。這種設(shè)計模式的優(yōu)點是簡潔明確，易于用戶在眾多的應(yīng)用圖標陣列中快速找到目標。

3.7 線形

線形的設(shè)計模式分為兩種設(shè)計方式，在深色的背板上讓圖標反白，背景可以是單色也可以是漸變色;在淺色的背板上讓圖標填充顏色，圖標可以是單色也可以是漸變色，或是其他視覺效果。纖細的線框圖形傳遞出簡潔輕快的氣質(zhì)，適合于文藝、清新的應(yīng)用，在界面設(shè)計時保持這種干凈明快的風(fēng)格，才能與應(yīng)用圖標設(shè)計表里如一。線性風(fēng)格一定注意不可太細，如果做得太細，在手機上看會非常尖銳，顯得不易點擊。例如airbnb，它的背景是一個微漸變，線性風(fēng)格曲線組成“A”，同時是一個小蜜蜂。

3.8 動物圖形/剪影

動物作為圖標設(shè)計元素是比較常見的方式之一，通過提取動物整體形象或者局部特征部位作為設(shè)計元素，背景填充單色或漸變色，簡潔明了。動物給人的印象比較可愛，有助于加深用戶對產(chǎn)品的印象。常見的表現(xiàn)形式有剪影、線性描邊風(fēng)格、面性風(fēng)格等。

3.9 卡通形象

卡通風(fēng)格的產(chǎn)品圖標會讓用戶更有好感，一個可愛的卡通形象有助于加深用戶對產(chǎn)品的印象。很多決策者會認為卡通是一種低齡的審美，這種想法其實是錯誤的。卡通可以說是一種各年齡層都能接受的風(fēng)格，如騰訊就是以一個企鵝作為品牌形象開始拓展自己的版圖。

3.10 正負形

以正形為底突出負形特征，以負形表達產(chǎn)品屬性，傳遞產(chǎn)品信息。例如NPR One，圖標中的負形圖形是對話氣泡，告訴我們這是一個媒體或社交的應(yīng)用，而正形圖形強調(diào)產(chǎn)品氣質(zhì)。

3.11 白色漸變

白色漸變的設(shè)計模式與透明白色相似，都是通過白色不透明度來構(gòu)建出圖形的立體控件感，它比單純的剪影圖形更加具有質(zhì)感，這種質(zhì)感帶給了我們視覺上的享受。例如印象筆記·圈點，它是一只白色的鵝毛形象，垂直的線型漸變使鵝毛富有了生命力一般，顯得更加輕柔。

3.12 彩色漸變

色彩比任何圖形都更能抓住用戶的注意力，同時色彩更加具有情緒，能傳遞出應(yīng)用的產(chǎn)品氣質(zhì)。比起白色漸變圖形，彩色漸變圖形的色彩表現(xiàn)更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比，營造空間感。應(yīng)用圖標的背景和圖形的色彩要拉開對比，一般為白色或淺色背景。

3.13 無

無，即沒有設(shè)計。除了背板什么也沒有。雖然這類設(shè)計模式比較獨特，但我們并不鼓勵，因為用戶很難從一個顏色上得到有用的信息。例如“黃油相機”的圖標設(shè)計成一塊黃油的樣子已深入人心了。

應(yīng)用圖標尺寸規(guī)格