2.6 " 新擬物 "風格圖標
蘋果在 WWDC20 搞了個大新聞:macOS 將與 iOS 統一步調,從X86平臺遷移至ARM 平臺,并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。
macOS Big Sur是第一個將 " 新擬物 " 設計投入大規模商用的操作系統,這可視為 " 新擬物 "在實用化道路上的首次勝利。值得一提的是,在 Big Sur 的 " 外觀 " 設置里,多了一項名為" 自適應強調色 "的選項。蘋果將主題色的指定權留給開發者,這是否暗示新一代 App 在光影上會有更豐富的效果?
" 新擬物 " 設計的精髓在于對光線的絕妙運用。它把光效拿捏在 " 扁平 " 與 " 擬物 " 之間,進而打造一種全新的視覺體驗。
不同于傳統的擬物," 新擬物 "雖然將符合物理規律的光影效果引入界面,但它所模擬的材質是自然界不存在的。換句話說," 新擬物 " 是將真實光線用于虛擬對象,而 " 擬物 " 是還原實際物品在特定光照下的效果;
由于整個設計界將不得不考慮新擬物風格,圍繞該風格的可能性將會有爆炸性的發展,并且這種新的數字空間設計理念如何能夠合理地適用于用戶界面設計和功能性將取得更大的突破。與以往一樣,第三方應用將比蘋果更大膽、更快速地推動這一風格——這也是我們將會真正開始解鎖新擬物優勢的時候。
產品應用圖標有不同的風格,這些風格有可能偏擬物,也有可能很扁平,有可能很抽象,也可能很具象。通過不同的設計風格可以更加標新立異,從而被用戶記住。因此能在第一時間贏得用戶的好感和記憶非常重要,將產品圖標設計的好看且容易被人記住就成了非常重要的任務。應用圖標的風格主要有以下幾種。
3.1 中文文字圖標
中文是我們的母語,每一個漢字都令人記憶深刻,文字也是最直白的信息,而且不容易被曲解,所以很多國內的產品都會使用文字作為自己的產品圖標。中文設計模式即字體設計,提取應用名稱中的一個或多個漢字,進行設計變形,變形后的字體圖形具有產品屬性的外貌特征。常見中文圖標又分為單字、多字和字加圖形的幾種類型。
3.1.1 單字
提取產品名稱中最具代表性的文字,通過對筆畫及整體骨架進行字體設計,以達到符合產品特性和視覺差異化的目的。其優點是可以直截了當的傳遞產品信息,識別性強。
3.1.2 多字
多字圖標設計要注意的是整體的協調性和可讀性,一般為2-3個字,最多兩行(四個字)排列。
其優點是更加直接的告訴用戶產品名稱,達到品牌推廣的目的,減輕用戶記憶成本。其缺點是如果圖標上的文字和下面的輔助文字完全一樣,會顯得重復啰嗦,像介紹了兩遍自己一樣。
3.1.3 字加圖形組合
文字加輔助圖形的組合,也是常見的產品圖標設計方法,相比純文字圖標,顯得更加豐富有獨特的產品的氣質和屬性。需要注意的是做好文字和輔助圖形間的平衡。
3.2 英文字母圖標
英文設計與中文設計的設計模式相似,通常是提取應用名稱的首字母融合產品的功能賣點或行業屬性進行創意加工,新的字母圖形依舊保持本身的識別性。
3.2.1 單字母
通常提取英文首字母進行設計,由于英文字母本身結構簡潔,稍加改動就很容易達到設計感于識別性兼備的產品圖標。需要注意的是英文字母本來就少,都用字母很容易創意雷同,難以形成差異化。
3.2.2 多字母
提取產品全稱或幾個單詞的首字母組合而成,形成獨有的產品簡稱,方便用戶記憶。
3.2.3 字母加圖形組合
字母加圖形組合的設計形式比較廣泛,圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進行創意加工,可以使應用圖標視覺表現更加飽滿。
3.3 數字圖標
直接用數字做應用圖標的相對較少,但是數字識別性強,易于傳播的特點。利用數字進行設計能給人親和力。難點是怎樣與品牌形成強關聯性。
3.4 特殊符號圖標
由于符號本身的含義會對產品屬性有一定限制,所以特殊符號在應用圖標的設計案例中相對較少。如“$”符號可代表與金錢有關聯性的產品,無法運用在與此屬性無關的產品上。不過也正是由于自身屬性強的特點,可以很好的詮釋關聯的產品屬性。
#FormatImgID_26#
除了中英文圖標,還有圖形類圖標比較常見。這種類型的設計模式的優點就是直觀醒目和簡潔大方,視覺沖擊力強。常見的有以下幾種:
3.5 幾何圖形
幾何圖形的設計模式給人簡約、現代、個性等視覺感受,從單個具象圖形到復雜的空間感營造,幾何圖形的表現形式非常豐富。不同的形狀給人的情感表達不同,如三角形給人傳達個性、穩定、現代、時尚等,添加圓角后又會更加親民、可愛。我們可以結合產品特征,合理的選擇適合的形狀圖形進行創意。此類型較考驗設計師的圖形創意能力。
3.6 單雙形/剪影
單雙形是指應用圖標只展示單個或兩個的剪影圖形。通常有兩種設計方式,在深色背板上使圖形反白,背景可以是單色也可以是漸變色;在淺色的背板上讓圖形填充顏色,圖形可以是單色也可以是漸變色。這種設計模式的優點是簡潔明確,易于用戶在眾多的應用圖標陣列中快速找到目標。
3.7 線形
線形的設計模式分為兩種設計方式,在深色的背板上讓圖標反白,背景可以是單色也可以是漸變色;在淺色的背板上讓圖標填充顏色,圖標可以是單色也可以是漸變色,或是其他視覺效果。纖細的線框圖形傳遞出簡潔輕快的氣質,適合于文藝、清新的應用,在界面設計時保持這種干凈明快的風格,才能與應用圖標設計表里如一。線性風格一定注意不可太細,如果做得太細,在手機上看會非常尖銳,顯得不易點擊。例如airbnb,它的背景是一個微漸變,線性風格曲線組成“A”,同時是一個小蜜蜂。
3.8 動物圖形/剪影
動物作為圖標設計元素是比較常見的方式之一,通過提取動物整體形象或者局部特征部位作為設計元素,背景填充單色或漸變色,簡潔明了。動物給人的印象比較可愛,有助于加深用戶對產品的印象。常見的表現形式有剪影、線性描邊風格、面性風格等。
3.9 卡通形象
卡通風格的產品圖標會讓用戶更有好感,一個可愛的卡通形象有助于加深用戶對產品的印象。很多決策者會認為卡通是一種低齡的審美,這種想法其實是錯誤的?ㄍǹ梢哉f是一種各年齡層都能接受的風格,如騰訊就是以一個企鵝作為品牌形象開始拓展自己的版圖。
3.10 正負形
以正形為底突出負形特征,以負形表達產品屬性,傳遞產品信息。例如NPR One,圖標中的負形圖形是對話氣泡,告訴我們這是一個媒體或社交的應用,而正形圖形強調產品氣質。
3.11 白色漸變
白色漸變的設計模式與透明白色相似,都是通過白色不透明度來構建出圖形的立體控件感,它比單純的剪影圖形更加具有質感,這種質感帶給了我們視覺上的享受。例如印象筆記·圈點,它是一只白色的鵝毛形象,垂直的線型漸變使鵝毛富有了生命力一般,顯得更加輕柔。
3.12 彩色漸變
色彩比任何圖形都更能抓住用戶的注意力,同時色彩更加具有情緒,能傳遞出應用的產品氣質。比起白色漸變圖形,彩色漸變圖形的色彩表現更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比,營造空間感。應用圖標的背景和圖形的色彩要拉開對比,一般為白色或淺色背景。
3.13 無
無,即沒有設計。除了背板什么也沒有。雖然這類設計模式比較獨特,但我們并不鼓勵,因為用戶很難從一個顏色上得到有用的信息。例如“黃油相機”的圖標設計成一塊黃油的樣子已深入人心了。
應用圖標尺寸規格