首頁

052024-12

一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編圖標(biāo)設(shè)計(jì)文章及欣賞

從1973年第一代圖形用戶界面的呱呱落地到今天百家爭鳴，圖形用戶界面竟然已經(jīng)走過了50年的發(fā)展歷程，更神奇的是，原來UI設(shè)計(jì)這個職業(yè)的起源也是因圖標(biāo)的起源而起，后來圖標(biāo)成了UI設(shè)計(jì)中最重要的視覺元素之一，接下來，我們一起走進(jìn)圖標(biāo)的世界，了解它神秘背后的故事。

一、圖標(biāo)的起源

二、圖標(biāo)設(shè)計(jì)的定義

三、圖標(biāo)的種類

四、圖標(biāo)設(shè)計(jì)8大原則

五、圖標(biāo)的6大作用

六、提升圖標(biāo)設(shè)計(jì)的4個小技巧

七、 5個圖標(biāo)網(wǎng)站推薦

八、圖標(biāo)的命名規(guī)范

一、圖標(biāo)的起源

在計(jì)算機(jī)發(fā)展的早期，用戶界面主要是基于命令行的，由字母和數(shù)字組成，操作復(fù)雜且對普通用戶不友好，用戶需要記住大量的命令和參數(shù)才能使用計(jì)算機(jī)系統(tǒng)。

隨著計(jì)算機(jī)技術(shù)的發(fā)展，為了使計(jì)算機(jī)更易于使用和理解，程序員開始開發(fā)圖形化的元素來代表各種操作和功能，圖標(biāo)概念由此誕生。最初的目的是幫助新手用戶能夠更方便地組織文件和執(zhí)行任務(wù)，而無需記住復(fù)雜的命令。

1.施樂公司的開創(chuàng)性工作

1973年，美國施樂公司推出了第一批真正意義上具有圖形用戶界面的個人電腦——Xerox Alto。雖然這款電腦僅生產(chǎn)了約 2000 臺，但它為后來的計(jì)算機(jī)圖形界面發(fā)展奠定了基礎(chǔ)。它的界面中已經(jīng)出現(xiàn)了一些簡單的圖標(biāo)，如垃圾桶、計(jì)算器、打印機(jī)、文件和文件夾等，這些圖標(biāo)成為了后來圖標(biāo)設(shè)計(jì)的雛形。

2.蘋果公司的推動

1979年，史蒂夫·喬布斯參觀了施樂公司的原型機(jī)后，深受啟發(fā)，決定開發(fā)自己的圖形界面計(jì)算機(jī)。1983 年，蘋果公司推出了Apple Lisa，這是蘋果首臺圖形界面計(jì)算機(jī)，其界面中的圖標(biāo)設(shè)計(jì)得到了進(jìn)一步的發(fā)展。

在這一時期，現(xiàn)代圖標(biāo)設(shè)計(jì)之母蘇珊·卡爾擔(dān)任蘋果的創(chuàng)意總監(jiān)，她設(shè)計(jì)的像素風(fēng)格圖標(biāo)簡潔、清晰、易于理解，具有很高的視覺平衡性，即使在今天看來也顯得活潑有趣。

3.微軟的跟進(jìn)與發(fā)展

1985年，微軟發(fā)布了 Windows 1.0操作系統(tǒng)，這是微軟在圖形用戶界面領(lǐng)域的重要嘗試。該系統(tǒng)中的圖標(biāo)設(shè)計(jì)也借鑒了蘋果的一些理念，但也有自己的特點(diǎn)。隨著 Windows 操作系統(tǒng)的不斷發(fā)展和普及，圖標(biāo)設(shè)計(jì)也逐漸成為了用戶界面設(shè)計(jì)中不可或缺的一部分。

二、圖標(biāo)設(shè)計(jì)的定義？

圖標(biāo)設(shè)計(jì)是一種設(shè)計(jì)活動，主要是創(chuàng)造出用于代表物體、動作、概念等各種元素的圖形符號。

這些圖形符號具有簡潔性，讓人能快速識別。比如手機(jī)桌面上的微信圖標(biāo)，用兩個對話氣泡的簡單圖案就代表了這個軟件，讓人一眼就能明白。圖標(biāo)設(shè)計(jì)在很多領(lǐng)域都有應(yīng)用，像軟件界面、網(wǎng)站、移動應(yīng)用等，能夠?yàn)橛脩籼峁┮曈X引導(dǎo)，方便用戶操作。

三、圖標(biāo)的種類

圖標(biāo)在提升產(chǎn)品氣質(zhì)上起著不可估量的地位，在界面中往往起著畫龍點(diǎn)睛的作用，無法想象在一個產(chǎn)品中，沒有圖標(biāo)，界面會顯得多么的無聊和乏味，但是圖標(biāo)也不能總用一種形式的圖標(biāo)，這樣也會百看讓人生厭，因此也就衍生了圖標(biāo)的多樣性，以下是我整理的常見圖標(biāo)類型：

1、從視覺表現(xiàn)上，有以下12大類圖標(biāo)

2、從功能上，有以下6大類圖標(biāo)

?工具圖標(biāo)

：

工具圖標(biāo)在B端項(xiàng)目中應(yīng)用很廣泛，幾乎每個組件中都會包含這類圖標(biāo)；比方說騰訊文檔上方的文檔編輯圖標(biāo)就是屬于這種類型，它的裝飾性很小，更多是功能的承載。

?裝飾圖標(biāo)

：

在一些軟件產(chǎn)品中，會重點(diǎn)強(qiáng)調(diào)品牌、情感化設(shè)計(jì)，大量啟用3D化的裝飾圖標(biāo)來提升界面的質(zhì)感。

比方說騰訊電腦管家下面的這個界面設(shè)計(jì)，它就運(yùn)用了大量具有裝飾性的圖標(biāo)來傳遞信息表達(dá)品牌，并且中央還采用騰訊電腦管家的IP形象作為切入點(diǎn)，萌萌的形象無形中拉近了與受眾之間的距離。

?啟動圖標(biāo)

在項(xiàng)目中，當(dāng)用戶想表達(dá)品牌時，經(jīng)常會把LOGO圖標(biāo)做成動態(tài)圖，來更好的傳遞品牌理念，比方說聯(lián)想電腦管家，在啟動頁時，就運(yùn)用了動態(tài)啟動圖標(biāo)，同時下面還附帶了一個slogan的文字動效，很好的向用戶傳遞了安全的理念。

? 進(jìn)程提示圖標(biāo)

在軟件界面中，經(jīng)常也需要進(jìn)程的提示，這時候圖標(biāo)就可以起到這樣的作用，比方說騰訊電腦管家在清理垃圾時，圖標(biāo)里面的風(fēng)扇就一直在轉(zhuǎn)，寓意當(dāng)前清理工作正在進(jìn)行中。

? 狀態(tài)提示圖標(biāo)

軟件在運(yùn)行過程中難免會出現(xiàn)bug或者內(nèi)容為空的時候，這時候狀態(tài)提示圖標(biāo)就尤為重要，可以大大減輕人們的焦慮情緒。

? 增加界面趣味性的圖標(biāo)

圖標(biāo)不僅在理解和使用上給人們提效了，而且有時添加動效的圖標(biāo)還能給人帶來絲絲驚喜和愉悅。

比方說聯(lián)想的這個動態(tài)加載圖標(biāo)，看著就很有趣，讓人忍不住多欣賞一下。

四、圖標(biāo)設(shè)計(jì)8大原則

雖然現(xiàn)在AI盛行，很多酷炫的效果可以用AI實(shí)現(xiàn)，但是一些讓圖標(biāo)看起來更加專業(yè)精致、耐看的秘密我們還是需要知道的，了解這些設(shè)計(jì)原則，我們可以事半功倍，當(dāng)AI生產(chǎn)有偏差時，我們自己可以優(yōu)化、修復(fù)和調(diào)整。

1、大小統(tǒng)一

圖標(biāo)大小統(tǒng)一，就是一組圖標(biāo)放置在一起，圖標(biāo)大小要看起來差不多，不能忽大忽小，比方說這組圖標(biāo)的第三個圖標(biāo)，電腦圖標(biāo)明顯過高，跟其他圖標(biāo)放在一起就顯得不是那么的協(xié)調(diào)美觀和統(tǒng)一。

在大小統(tǒng)一這方面，我們記得就是幾何圖形它們有視覺差，有的時候并不是說尺寸一樣，大小就一樣了，比方說下面這組圖形，左邊的這組它們高度一樣，可是看起來大小并不太一樣，明顯中間的三角形顯得??；右邊的這組，三角形比左右兩邊的都要高，可是它們放在一起看起來大小就是差不多的，這就是幾何圖形帶來的視覺差，就是我們在做圖的時候，要記得多去感受，設(shè)計(jì)中的美很多不是用1+1=2能解釋清楚的，它就是一種感受，放下心中的浮躁，我們還是能感受到它們之間的區(qū)別，這種美也沒那么玄乎，只要用心，一定可以做出大小一致的圖標(biāo)。

2、圓角統(tǒng)一

圓角統(tǒng)一，就是圖標(biāo)之間有相同造型，然后又都有圓角的，那么他們就要保持相同的圓角曲度，比方說下面這組圖標(biāo)，圖標(biāo)的外形都是正方形且它們都帶有圓角，可是它們的圓角曲度卻明顯不一樣，這樣就看起了不夠規(guī)范和專業(yè)。

3、風(fēng)格統(tǒng)一

界面中同樣功能的圖標(biāo)，樣式和風(fēng)格需要保持一致，比方說這組圖標(biāo)樣式，風(fēng)格就保持著高度的一致，都是用的玻璃質(zhì)感的磨砂材質(zhì)。

4、角度統(tǒng)一

這組扁平化圖標(biāo)，在右邊相似的角度都疊加了一個小色塊，增加了圖標(biāo)的層次感，相同的角度也增加了圖標(biāo)的一致性和系列感。

5、粗細(xì)統(tǒng)一

圖標(biāo)的粗細(xì)要統(tǒng)一，這樣圖標(biāo)就會看起來比較精致，比方說下面的這組圖標(biāo)，圖標(biāo)外框線都是用的3px，圖標(biāo)里面的線都是用的2px，圖標(biāo)的粗細(xì)都保持一樣的粗細(xì)規(guī)律，這樣的圖標(biāo)看著也是同樣的美觀和一致。

6、疏密統(tǒng)一

下面是一組類似于插畫風(fēng)格的圖標(biāo)，圖標(biāo)的風(fēng)格是布線比較密集飽滿，而三個圖標(biāo)都遵循了這樣的原則，看起來出奇的統(tǒng)一，所以它們看起來像是一組成套圖標(biāo)。

7、透視統(tǒng)一

當(dāng)設(shè)計(jì)的圖標(biāo)是立體時，要注意它們的透視要統(tǒng)一，就像下面的這組2.5D圖標(biāo)，它們的設(shè)計(jì)透視就保持著高度的一致。

8、易識別

圖標(biāo)的優(yōu)劣首先取決于其能否讓用戶一目了然地理解其代表的意義，這是很重要的圖標(biāo)設(shè)計(jì)原則。

下面的這組手機(jī)主題圖標(biāo)，識別性就非常的高，簡潔且好理解。

五、圖標(biāo)的6大作用

圖標(biāo)在界面設(shè)計(jì)中扮演著至關(guān)重要的角色，它們遍布于應(yīng)用程序的各個角落。無論是導(dǎo)航欄、工具欄還是標(biāo)簽欄，亦或是首頁、詳情頁、個人中心頁，功能圖標(biāo)都隨處可見。圖標(biāo)的主要作用在于傳達(dá)信息，相比文字，它們能更直接地傳遞概念，并且能夠?yàn)橛脩舻囊曈X體驗(yàn)增添樂趣。

1、提升界面的使用效率

功能圖標(biāo)常以簡潔的圖形呈現(xiàn)，它們便于用戶識別和記憶。這種設(shè)計(jì)讓用戶能夠迅速定位到所需的功能，無需耗費(fèi)時間閱讀文字說明或?yàn)g覽冗長的菜單選項(xiàng)，大大提升了界面的使用效率。

華為云的這個界面，文字信息很多，因?yàn)橛辛藞D標(biāo)的存在，人們尋找起來特別高效，能高效定位到想要的信息。

2、增加用戶的滿意度

圖標(biāo)不僅可以提升界面使用效率，還能提升用戶的體感和滿意度，精美的圖標(biāo)讓人看著都是賞心悅目的，就像我們在大街上看到一個美女，都忍不住多駐留一伙一樣。

華為云這組精美的圖標(biāo)動效就給了我很大的視覺享受，圖標(biāo)設(shè)計(jì)精致，配色舒適，還有動效，給足了用戶滿足感。

3、減少人們認(rèn)知的成本

圖標(biāo)很多的造型都來源于生活，來源于我們熟悉的事物，在界面中運(yùn)用我們熟悉的圖形會大大降低人們的認(rèn)知成本，也會讓更多人產(chǎn)生共鳴，它的傳達(dá)作用不受語言和國界的束縛，是一種高效的界面表達(dá)語言。

華為云的這組圖標(biāo)就是運(yùn)用了人們?nèi)粘Ｉ钪蟹浅Ｊ煜さ脑?，共鳴感很強(qiáng)，人們學(xué)習(xí)和理解的成本很低。

4.提升品牌形象

仔細(xì)觀察會發(fā)現(xiàn)，在生活中有很多的軟件產(chǎn)品，會把企業(yè)的LOGO融入到日常產(chǎn)品的圖標(biāo)設(shè)計(jì)中，大大提升了品牌的一個曝光度。

騰訊云就有這樣的小心思，它會把騰訊云LOGO融入到banner圖標(biāo)設(shè)計(jì)中，傳遞了信息，同時也加強(qiáng)了品牌的曝光。

5、圖標(biāo)可以增加界面的豐富度

有圖標(biāo)的界面，頁面看起來豐富度更高，層次感更強(qiáng)，信息表達(dá)上也會更加的清晰整潔。

360AI辦公這個界面之所以看起來這么豐富，很大原因是在于圖標(biāo)的應(yīng)用，界面中有大圖標(biāo)、小型面圖標(biāo)，還有線性小圖標(biāo)，有對比，整個頁面就看起來豐盈了不少。

6、減少界面的枯燥感

千篇一律的文字，難免會產(chǎn)生枯燥感，讓人不愿多駐留；圖標(biāo)多彩的配色以及Q萌的造型會讓人心生愉悅。

佐糖的這個界面，若不是有圖標(biāo)的潤色，光只有功能點(diǎn)和文字介紹，估計(jì)會乏味不少，但是有了多彩圖標(biāo)的加入，瞬間氛圍感都熱鬧了不少。

六、提升圖標(biāo)設(shè)計(jì)的4個小技巧

1、大量臨摹，刻意練習(xí)

任何一項(xiàng)技能的獲得，最開始都離不開臨摹，作為剛接觸UI設(shè)計(jì)的職場新人，可以先從臨摹入手，先臨摹簡單的，然后循序漸進(jìn)，臨摹難度大點(diǎn)的，這樣圖標(biāo)設(shè)計(jì)能力也會慢慢提升。

2、多積累好的樣本

想要繪制好看的圖標(biāo)，首先要見過好看的圖標(biāo)，所以我們?nèi)粘ＲB(yǎng)成多收集好圖標(biāo)好設(shè)計(jì)的習(xí)慣，這樣當(dāng)面臨新的需求設(shè)計(jì)時，也不至于手忙腳亂，不知如何下手。

3、學(xué)會分析

看到好看的圖標(biāo)設(shè)計(jì)時，我們要學(xué)會分析，這組圖標(biāo)好，它好在哪，哪里打動了你，你分析了這些，你自己在設(shè)計(jì)的時候也會不自覺的運(yùn)用到其中的智慧和思路，這樣我們就可以隨時原創(chuàng)出符合自己需求的圖標(biāo)設(shè)計(jì)來。

4、明確目標(biāo)與受眾

目標(biāo)受眾不同，他們對圖形的期望也會不一樣，比方說在設(shè)計(jì)兒童產(chǎn)品界面和B端產(chǎn)品界面時，所用的顏色和形狀都是有考究的。

兒童類產(chǎn)品的圖標(biāo)設(shè)計(jì)，形狀會比較圓潤，色彩也比較多彩；但是B端類產(chǎn)品的圖標(biāo)設(shè)計(jì)用色就會很克制，形狀也不會過于圓潤。

七、5個圖標(biāo)網(wǎng)站推薦

1、Iconfont

(https://www.iconfont.cn/)

iconfont是阿里巴巴的圖標(biāo)庫,應(yīng)該也是受眾最多的一個圖標(biāo)下載網(wǎng)站，給我們平時工作提效不少，造福了不少的設(shè)計(jì)師。

2、IconPark

(https://iconpark.oceanengine.com/)

IconPark是字節(jié)跳動旗下的一款圖標(biāo)下載網(wǎng)站，它可以在線把一個圖標(biāo)實(shí)現(xiàn)多種風(fēng)格的切換，線性、面線、線面結(jié)合，并且線的粗細(xì)大小可以調(diào)節(jié)，非常的方便。

3、Ikonate

(

https://ikonate.com/

)

Ikonate是一款可以在線編輯的圖標(biāo)網(wǎng)站，涵蓋了常用的一些圖標(biāo)，可以調(diào)節(jié)線條的粗細(xì)和大小，導(dǎo)出的格式是SVG。

4、Iconfinder

(https://www.iconfinder.com)

Iconfinder的優(yōu)點(diǎn)，我覺得是造型夠豐富，滿足你有時候無法腦補(bǔ)的痛點(diǎn)。

5、Iconduck

(https://iconduck.com/)

Iconduck的優(yōu)點(diǎn)是有273,858個免費(fèi)的圖標(biāo)庫和插畫庫供大家選擇，儲備夠豐富。

八、圖標(biāo)的命名規(guī)范

圖標(biāo)一般有四種狀態(tài)，正常normal (nor)、高亮highlight (hig)、選中selected (sel)、不可用disable (dis)四種狀態(tài)，一個好的命名習(xí)慣會給自己的合作搭檔帶來很好的體驗(yàn)，通常在寫界面的時候，前端都是用英文對元素進(jìn)行命名的，這里我列舉一下我經(jīng)常合作同事的一個命名規(guī)范，供大家參考：

模塊-類別-功能-狀態(tài)

例如：Nav_button_message_sel

總結(jié)：

在深入探索了圖標(biāo)設(shè)計(jì)的豐富世界之后，我相信大家未來能夠根據(jù)不同的場合挑選出恰當(dāng)?shù)膱D標(biāo)風(fēng)格和樣式。通過持續(xù)的總結(jié)和歸納，我對圖標(biāo)設(shè)計(jì)的理解也變得更加深刻。雖然這份總結(jié)可能還有待完善之處，請大家多多海涵，期待在下一篇文章中再次與大家相見。

作者：姝斐suphie
鏈接：https://www.zcool.com.cn/article/ZMTY0MDI2MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

評論(0) 瀏覽(35)

082024-11

優(yōu)化UI設(shè)計(jì)規(guī)范:海外項(xiàng)目與國內(nèi)產(chǎn)品設(shè)計(jì)規(guī)范及組件庫對比

藍(lán)藍(lán)設(shè)計(jì)的小編圖標(biāo)設(shè)計(jì)文章及欣賞

基于海外組件庫的核心設(shè)計(jì)原則和特性：交互與反饋，視覺層次與信息密度，簡潔與功能性。我們?yōu)椤秏yCommunity》項(xiàng)目的制定專屬規(guī)范，涵蓋按鈕，輸入框，卡片樣式，列表，圖標(biāo)及主題定制換膚等相關(guān)組件庫。顏色的價值在于傳達(dá)品牌和情感，并增強(qiáng)可讀性。
文字是信息傳遞的主要載體，標(biāo)準(zhǔn)化的文字設(shè)計(jì)有助于提升可讀性和一致性。
我們不僅制定了文字規(guī)范，還升級了字體規(guī)范，新增了客戶指定的字體，并加入了沙特當(dāng)?shù)氐陌⒗Z字體。

評論(0) 瀏覽(105)

252024-10

超全面陰影設(shè)計(jì)指南

藍(lán)藍(lán)小助手圖標(biāo)設(shè)計(jì)文章及欣賞

陰影設(shè)計(jì)在界面設(shè)計(jì)中扮演著至關(guān)重要的角色，它不僅能夠增強(qiáng)設(shè)計(jì)的立體感和層次感，還能有效地引導(dǎo)用戶的注意力，提升用戶體驗(yàn)。
陰影向左：
當(dāng)元素（如導(dǎo)航欄、抽屜組件或固定表格欄）位于屏幕右側(cè)時，向左的陰影能夠突出這些元素，并暗示它們是可交互或可擴(kuò)展的。
陰影向右：
對于位于屏幕左側(cè)的元素（如導(dǎo)航欄、抽屜組件或固定表格欄），向右的陰影能夠吸引用戶的注意力，并強(qiáng)調(diào)這些元素的存在和重要性。
陰影向下：
陰影向下通常用于組件內(nèi)部或組件本身，以營造立體感和層次感，這是界面設(shè)計(jì)中比較常規(guī)且有效的視覺處理方法。

評論(0) 瀏覽(128)

252024-10

UI 設(shè)計(jì)的 10 個細(xì)節(jié)

藍(lán)藍(lán)小助手圖標(biāo)設(shè)計(jì)文章及欣賞

俗話說：“細(xì)節(jié)決定成敗”，細(xì)節(jié)的把控至關(guān)重要，這也是設(shè)計(jì)師能力的代表。隨著項(xiàng)目經(jīng)驗(yàn)的積累和專業(yè)能力的成熟，我們對于設(shè)計(jì)原則、設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)經(jīng)驗(yàn)的沉淀也會越來越多，設(shè)計(jì)輸出也會因?yàn)檫@些細(xì)節(jié)而顯得更優(yōu)秀。

評論(0) 瀏覽(125)

242024-10

探究UI設(shè)計(jì)中形狀的創(chuàng)意與應(yīng)用

藍(lán)藍(lán)小助手圖標(biāo)設(shè)計(jì)文章及欣賞

在UI設(shè)計(jì)中，精美形狀設(shè)計(jì)的關(guān)鍵是深入理解用戶需求，注重細(xì)節(jié)，保持一致性，勇于創(chuàng)新，不斷提高技能水平。這樣才能創(chuàng)造符合用戶口味的界面，提升用戶體驗(yàn)。簡潔地說，好的形狀設(shè)計(jì)來源于用戶需求、細(xì)節(jié)、一致性、創(chuàng)新和自我提升。

評論(0) 瀏覽(109)

222024-10

圖標(biāo)設(shè)計(jì)進(jìn)化論

藍(lán)藍(lán)小助手圖標(biāo)設(shè)計(jì)文章及欣賞

從腳印到箭頭，從手繪到生成，從單一的圖標(biāo)到復(fù)雜的系統(tǒng)，圖標(biāo)設(shè)計(jì)的進(jìn)化也同樣是文明和技術(shù)的進(jìn)化。數(shù)字技術(shù)的發(fā)展進(jìn)一步地加速了這個過程，屏幕的分辨率也從像素馬賽克演進(jìn)到了如今幾乎無法區(qū)分虛擬和現(xiàn)實(shí)，遠(yuǎn)超人類自身進(jìn)化的速度。但不論是在復(fù)雜的現(xiàn)實(shí)世界或是夢幻的數(shù)字世界，一個簡單清晰的箭頭圖標(biāo)都將可以成為導(dǎo)航，為我們指引目標(biāo)和方向。

評論(0) 瀏覽(100)

212024-10

圖標(biāo)設(shè)計(jì)九大統(tǒng)一性

藍(lán)藍(lán)小助手圖標(biāo)設(shè)計(jì)文章及欣賞

圖標(biāo)設(shè)計(jì)九大統(tǒng)一性：1、大小統(tǒng)一 2、圓角統(tǒng)一 3、語言統(tǒng)一 4、粗細(xì)統(tǒng)一 5、疏密統(tǒng)一 6、間距統(tǒng)一
7、比例統(tǒng)一 8、正負(fù)形統(tǒng)一 9、角度統(tǒng)一

評論(0) 瀏覽(139)

122024-10

中世紀(jì)古典風(fēng)《Sirius Wars》游戲UI設(shè)計(jì)-虛擬項(xiàng)目

資深UI設(shè)計(jì)者

在中世紀(jì)的古老大陸上，有一個名為瑟蘭迪爾的王國。這里處處彌漫著古典的韻味，宏偉的城堡訴說著往昔的輝煌，寧靜的小鎮(zhèn)與廣袤的田野相映成趣。然而，當(dāng)那顆神秘而璀璨的天狼星在夜空中出現(xiàn)時，一場可怕的異變悄然降臨。

評論(0) 瀏覽(225)

212024-6

路由圖標(biāo)情感化設(shè)計(jì)

前端達(dá)人

情感化路由路標(biāo)設(shè)計(jì)，傳遞寄遞溫暖

作為面客的戰(zhàn)略級重點(diǎn)渠道，客戶端的查單詳情功能日均使用量達(dá)千萬級別。隨著公司業(yè)務(wù)的不斷增長，查單訴求也隨之增加。

結(jié)合功能體驗(yàn)、業(yè)務(wù)需求等方面的調(diào)研與了解，得出以上地圖路由可解決的四個主要痛點(diǎn)。通過軌跡稀釋與動態(tài)采樣、底層數(shù)據(jù)歸集、生動化視效、元素動態(tài)運(yùn)營等手段，提升快遞路由信息在地圖上傳達(dá)的透明度與豐富性，方便用戶自助查詢快遞位置等內(nèi)容，管理客戶預(yù)期，同時加強(qiáng)用戶對功能忠誠度、將客戶留存在順豐的平臺上。

確認(rèn)按照信息精度強(qiáng)化、情感共鳴設(shè)計(jì)、渠道視效優(yōu)化三個目標(biāo)方向來推動需求的實(shí)現(xiàn)，同步梳理需求優(yōu)先級、管理需求迭代，敏捷滿足功能訴求。

信息精度強(qiáng)化

1. 通過梳理線下現(xiàn)有收轉(zhuǎn)運(yùn)派等全流程操作場景，針對性處理、展示對應(yīng)運(yùn)輸工具元素，突顯順豐多樣場景、多式聯(lián)運(yùn)的運(yùn)輸優(yōu)勢。

2. 拉通多關(guān)聯(lián)系統(tǒng)順利完成數(shù)據(jù)流轉(zhuǎn)，納入包括順豐小哥/順豐大哥/同城騎士上報的快遞員位置、陸運(yùn)系統(tǒng)等上報的貨車位置，輔以里程數(shù)等高精度信息完成展示。

圖標(biāo)應(yīng)用延展

新年圖標(biāo)

造型：以新年元素老虎，兔子延展，直觀的反映新年氣息，瑞獅迎新。飛機(jī)掛上中國結(jié)和小兔子開飛機(jī)突出新春的喜慶氛圍。小哥派件圖標(biāo)給小哥戴上瑞獅/兔子帽子，增加年味，寓意小哥給大家送福了。
色彩：俯視插畫風(fēng)格配合高飽和色彩，活潑氛圍加上新春元素體現(xiàn)趣味性。
執(zhí)行難點(diǎn)：由于圖標(biāo)尺寸很小，需要顧及圖標(biāo)的精美豐富程度，但也不能畫得過于復(fù)雜繁瑣，在精簡與精美的中間做一個良好的平衡。

傳統(tǒng)節(jié)日圖標(biāo)

造型：由于勞動節(jié)是個嚴(yán)肅的節(jié)日，需要高舉勞動的旗幟，不分貧富貴賤，愿大家努力齊進(jìn)取。所以在貨車和飛機(jī)后面飄著鮮艷的紅旗，上面標(biāo)著“勞動光榮”字樣。小哥派件圖標(biāo)后面帶著一個麥穗滿滿的袋子，寓意共同努力就會得到豐收的成果。端午是“飛龍?jiān)谔?rdquo;吉祥日，龍和龍舟文化始終貫穿在端午節(jié)的傳承歷史中，所以我們以龍舟為載具，用卡通的形式簡化龍舟繁雜的造型，讓用戶一看就能產(chǎn)生共鳴。另外飛機(jī)及小哥的圖像中就加上粽子，清晰明了傳達(dá)出端午送安康的信息。
色彩：勞動節(jié)俯視插畫風(fēng)格配合溫暖的色彩，突出勞動節(jié)的光榮與奮斗的熱情。端午節(jié)以黃綠色為

藍(lán)藍(lán)設(shè)計(jì)(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

作者：SFUP_DESIGN
鏈接：https://www.zcool.com.cn/article/ZMTU3ODQ1Mg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

評論(0) 瀏覽(575)

192024-6

圖標(biāo)設(shè)計(jì)的進(jìn)化歷程，讀這一篇就好了！

ui設(shè)計(jì)分享達(dá)人

圖標(biāo)在當(dāng)今不論是物理世界還是數(shù)字世界中都廣泛存在且十分重要，在交互界面中其重要性尤其值得強(qiáng)調(diào)。圖標(biāo)是用戶與產(chǎn)品之間最簡單的交流形式之一，有助于提升可用性和直觀性，還能讓界面更加易于使用和理解，幫助用戶快速導(dǎo)航。很多時候，圖標(biāo)有助于解決相當(dāng)多復(fù)雜或抽象的概念。借由對圖標(biāo)“進(jìn)化“的概括梳理，不僅使我們看待圖標(biāo)的設(shè)計(jì)有更深入地了解，同時也有助于更好地摸清未來圖標(biāo)設(shè)計(jì)的發(fā)展方向。

一、早期的圖標(biāo)設(shè)計(jì)

1.1 引子：箭頭圖標(biāo)從何而來？

箭頭，作為日常生活中最常見和常用的圖標(biāo)，從城市生活的導(dǎo)航指向，到屏幕界面中的前進(jìn)返回，到處都能見到各式各樣的箭頭圖標(biāo)?？梢哉f幾乎每一個現(xiàn)代人都清楚箭頭圖標(biāo)的含義，對這種無處不在的圖標(biāo)習(xí)以為常。然而，正是這樣一個對我們來說司空見慣的圖標(biāo)，卻很少有人知道它究竟是為何如此造型，又是如何一步步演進(jìn)至今天的模樣的，就讓我們以這個有趣的問題為引子，來一同探尋圖標(biāo)設(shè)計(jì)的進(jìn)化歷程。

根據(jù)美國印刷史協(xié)會的研究，作為符號和圖標(biāo)被使用的箭頭歷史只有短短不到四百年，隨著時間的推移，箭頭變得越來越簡化和抽象。而最初具有指向含義的“箭頭”，其實(shí)是一只腳印，以這種十分直觀的方式傳達(dá)了清晰的信息：“向這個方向前進(jìn)。”同樣，在早期的教學(xué)插圖和標(biāo)牌中可以看到手指的圖像，例如伸出的手指指向最近的城鎮(zhèn)方向，以及早期印刷文本和手稿中用于指向關(guān)鍵的段落。

這些均是十分具象的早期“箭頭”圖案，使用最直觀的方式表達(dá)了含義和作用，正如古代中國的甲骨文和埃及象形文字那樣直白。由此也不難看出，文字和圖標(biāo)自古以來就有著千絲萬縷的聯(lián)系，時至今日依然如此。

之后箭頭圖標(biāo)慢慢由具象走向象征性，首次使用是在18世紀(jì)的法國論文插圖中發(fā)現(xiàn)的，被描繪為一個帶有羽毛尾巴的弓箭箭矢。同期的德國也發(fā)現(xiàn)了地圖中使用類似圖案表示水流流向的例子。

隨后，箭頭變得更加抽象，到了19世紀(jì)中后期，箭頭的尾巴被省略，只留下了箭身和頭部的三角。對于瑞士字體設(shè)計(jì)大師Adrian Frutiger來說，這是箭頭最基本的特征：“當(dāng)兩條斜線結(jié)合在一起并形成夾角，方向和運(yùn)動感的表達(dá)隨之產(chǎn)生。”伴隨著工業(yè)革命，機(jī)器操作手冊中頻繁出現(xiàn)的箭頭圖標(biāo)，被廣大民眾所接受。

自此，箭頭的抽象形態(tài)被確定，隨后便被廣泛應(yīng)用于各種場景中。時至今日，箭頭圖標(biāo)的用法和形式也越來越多樣，數(shù)學(xué)符號、商業(yè)標(biāo)志，App界面中都有它的身影，其所被賦予的引申含義也越加豐富，漸漸地成為了我們今天所普遍熟知的箭頭圖標(biāo)。

20世紀(jì)70年代紐約地鐵設(shè)計(jì)的新導(dǎo)視系統(tǒng)，這套以箭頭、字母、色彩構(gòu)成的現(xiàn)代設(shè)計(jì)系統(tǒng)沿用至今，啟發(fā)了包括iOS頁面導(dǎo)航方式在內(nèi)的許多經(jīng)典設(shè)計(jì)（可以看到早期的導(dǎo)視也是使用具象的箭作為指向符號）。值得一提的是其中的箭頭細(xì)節(jié)，箭頭內(nèi)側(cè)的斜線角度與外側(cè)并不是平行的，而是有著4° 的內(nèi)縮，這種細(xì)節(jié)的處理正是從字體設(shè)計(jì)中借鑒而來，減弱筆畫交匯處的視覺重量感使其看起來是平行且勻稱的，類似的處理在今天的iOS圖標(biāo)中仍然可以看到。

1.2 圖標(biāo)設(shè)計(jì)的經(jīng)典之作

像是箭頭這樣經(jīng)典的圖標(biāo)設(shè)計(jì)還有許多，這里挑選了幾個最具有劃時代意義的設(shè)計(jì)，讓我們一起來回顧一下。

1964年東京奧運(yùn)會，是奧運(yùn)會第一次在亞洲國家舉辦，考慮到多國語言的信息傳達(dá)問題，設(shè)計(jì)了第一套運(yùn)動項(xiàng)目的抽象圖標(biāo)，來自各個國家的人們通過圖標(biāo)即可辨別出不同的運(yùn)動，在之后的1972年德國慕尼黑奧運(yùn)會上，人物被進(jìn)一步抽象，類似的人物抽象形象被復(fù)用在例如安全出口、洗手間等經(jīng)典圖標(biāo)上。

20世紀(jì)80年代，數(shù)字時代的圖標(biāo)開始出現(xiàn)，作為GUI的關(guān)鍵組成，圖標(biāo)的設(shè)計(jì)同樣是為了更加直觀地傳達(dá)信息，讓更多人可以輕易理解并接觸到個人電腦，消除傳統(tǒng)代碼界面造成的隔閡感與距離感，經(jīng)典的Macintosh笑臉、Command、播放、USB等圖標(biāo)陸續(xù)被發(fā)明。

Happy Mac

經(jīng)典Mac電腦開機(jī)時呈現(xiàn)的圖標(biāo)，以及最新macOS中的訪達(dá)，通過把個人電腦擬人為一個笑臉，給用戶傳達(dá)了十分友好的第一印象，打破了人們對于電腦和機(jī)器先天地抵觸心理，讓技術(shù)的魅力被更多的人所感受。

Command

蘋果電腦鍵盤上的Command修飾鍵最初只是一個Apple Logo，菜單中也會展示一系列以Apple Logo指代地快捷鍵組合，這樣在界面中濫用logo顯得十分不優(yōu)雅，因此設(shè)計(jì)師從眾多抽象圖標(biāo)中選擇了這個沒有明確含義地微妙圖標(biāo)，在快捷鍵的描述上顯得十分貼切。據(jù)稱其源于北歐地區(qū)露營地的標(biāo)識。

播放

播放圖標(biāo)在20世紀(jì)60年代中期首次出現(xiàn)在磁帶上，有時還有一個額外的三角形來表示快進(jìn)或倒帶，三角形指向磁帶卷曲的方向。播放/暫停符號現(xiàn)在可以在任何能夠播放媒體的設(shè)備上找到，并普遍用于媒體的控制和表示。

USB

USB圖標(biāo)靈感來自于三叉戟。每個點(diǎn)的末端都被一個圓形、正方形和三角形所取代，旨在代表可以使用這種通用接口連接的許多不同的外圍設(shè)備。

從這些經(jīng)典案例不難看出，圖標(biāo)具備了文字所難以傳達(dá)的直觀性和親和力，不論在是物理世界還是數(shù)字世界中，圖標(biāo)的設(shè)計(jì)都發(fā)揮了舉足輕重的作用。

二、UI中的圖標(biāo)設(shè)計(jì)

今天的文字是從現(xiàn)實(shí)世界中對事物的抽象描述演變而來的，但我們?nèi)匀幻刻焓褂贸橄蟮膱D標(biāo)來輔助進(jìn)行溝通。對于數(shù)字環(huán)境中的用戶界面來說尤其如此。例如，眾所周知的“×”圖標(biāo)代表關(guān)閉或刪除用戶在屏幕上看到的一部分內(nèi)容，以及在搜索引擎或其他地方上看到了用作“搜索”圖標(biāo)的放大鏡。

2.1 什么是好的圖標(biāo)？

圖標(biāo)以一種通用且簡單的方式傳達(dá)信息，無論文化或地理背景如何，每個人都可以理解。那么，怎樣的標(biāo)志才算是好標(biāo)志或壞標(biāo)志呢？

我們需要更深入地研究科學(xué)才能更好地理解。符號科學(xué)的研究被稱為符號學(xué)。它涵蓋了從豎起大拇指到微笑，甚至表情符號的所有含義。這門科學(xué)的著名代表人物查爾斯·桑德斯·皮爾士提出了一個三角形模型，說明了符號之所以成為符號的原因（見下圖）。

● 表征物：符號的代表形式；

● 解釋者：觀察者心中對符號的解釋理解；

● 對象：符號所指的對象；

這三個要素相互關(guān)聯(lián)，形成了理解或溝通中的基本結(jié)構(gòu)。符號并非直接與其代表的對象相連，而是通過解釋者也就是使用符號的人來建立連接。這個模型強(qiáng)調(diào)了解釋和主觀性在符號學(xué)中的重要性。

如果我們以箭頭圖標(biāo)為例，代表物是箭頭符號本身。它是一種視覺標(biāo)志，通常用來指示方向或引導(dǎo)注意力。箭頭的形狀、方向和上下文決定了它如何被解釋。對象是箭頭符號所指向的事物。這可以是實(shí)際的物理方向，如“向北”、“返回上一級”等，或者可以是比喻意義上的方向，如指引下一步行動的方向。解釋者是觀察者對箭頭符號的理解或解讀。例如，當(dāng)一個人看到一條指向右邊的箭頭時，他們可能會理解為需要向右轉(zhuǎn)，或者他們應(yīng)該將注意力集中在右側(cè)。

所以當(dāng)我們設(shè)計(jì)圖標(biāo)時，需要著重考量這三者之間的關(guān)系。也可以理解為，如果在某個位置看到某個圖標(biāo)，我們期望用戶如何理解并進(jìn)行操作。

此外，蘋果電腦經(jīng)典圖標(biāo)的設(shè)計(jì)師Susan Kare也有自己一直堅(jiān)持的設(shè)計(jì)原則：

● 簡單、清晰和美觀

● 重視上下文和隱喻

● 易于理解、便于記憶

● 確保一致性和可讀性

● 人性化

因此，圖標(biāo)的偉大之處在于可以跨越多種語言，成為一種人類通用的視覺表達(dá)。

2.2 構(gòu)建數(shù)字圖標(biāo)設(shè)計(jì)系統(tǒng)

圍繞著技術(shù)的演進(jìn)，圖標(biāo)的設(shè)計(jì)有了前所未有的進(jìn)化，同字體設(shè)計(jì)產(chǎn)生了更多千絲萬縷的聯(lián)系。其中最具代表性的便是Apple和Google這兩家軟件巨頭所開發(fā)的SF Symbols和Material Symbol圖標(biāo)系統(tǒng)，分別作為iOS和android的系統(tǒng)圖標(biāo)應(yīng)用，它們也有著各自的進(jìn)化歷程。與此同時，圖標(biāo)也不僅僅再是單一的固定的圖標(biāo)，而是像字體一樣的一套圖標(biāo)系統(tǒng)，包含可以進(jìn)行自定義調(diào)節(jié)的風(fēng)格、樣式、粗細(xì)、甚至可以不斷進(jìn)行迭代和更新。完善易用的圖標(biāo)系統(tǒng)與圖標(biāo)本身的設(shè)計(jì)同樣至關(guān)重要。

形態(tài)與色彩

作為用戶體驗(yàn)十分優(yōu)秀的Apple，其圖標(biāo)系統(tǒng)必然具有眾多可圈可點(diǎn)之處。最初，SF Symbols提供的是單色圖標(biāo)，這些圖標(biāo)在界面中奠定了一致性，同時也給人一種熟悉感。在2021年，SF Symbols變得更加靈活多樣，提供了多種渲染模式：分層模式、調(diào)色版模式、多色模式。2022年引入了可變顏色，使得圖標(biāo)能傳達(dá)不同的強(qiáng)度水平或是時間變化，讓圖標(biāo)更加富有表現(xiàn)力。兼具功能性和視覺魅力。2023年，更進(jìn)一步地增加了動畫屬性。為界面注入了更多動感和活力，圖標(biāo)數(shù)量超過5000個。

SF Symbols使用iconfont技術(shù)來實(shí)現(xiàn)與系統(tǒng)字體的和諧搭配，支持粗細(xì)的無極調(diào)節(jié)，與文字的自動對齊排版，同時還支持同一個圖標(biāo)的不同狀態(tài)變體，例如音量圖標(biāo)的變化和用戶圖標(biāo)的多種組合，猶如漢字的偏旁部首組合一樣靈活，在設(shè)計(jì)和開發(fā)實(shí)現(xiàn)時都非常高效便利。

在同一個字號下，擁有大中小三種圖標(biāo)的預(yù)設(shè)尺寸，使得在不同尺寸的控件中，盡管字號都是17pt，但都可以調(diào)用合適的圖標(biāo)，三種尺寸也并非單純的縮放，而是針對每個尺寸的粗細(xì)和內(nèi)部空間單獨(dú)進(jìn)行微調(diào)，從而實(shí)現(xiàn)每個尺寸的圖標(biāo)視覺感受上都能和諧匹配文字內(nèi)容。

Material Symbols作為谷歌開發(fā)設(shè)計(jì)的一套圖標(biāo)系統(tǒng)，同樣具有許多優(yōu)秀的特質(zhì)。除了與SF Symbols同樣的可變粗細(xì)、尺寸視覺自適應(yīng)等特性外，還具有SF Symbols所不具備的一些優(yōu)勢。

圖標(biāo)風(fēng)格上，Material Symbols支持三種不同的描邊風(fēng)格，Outlined、Rounded和Sharp，在線條轉(zhuǎn)折和頭尾的方圓處理上各有不同。支持針對不同粗細(xì)的精細(xì)調(diào)節(jié)，這是由于在淺色模式和深色模式下，圖標(biāo)的粗細(xì)感受會有些許不同，而通過Grade這一特性，則可以在同樣的粗細(xì)參數(shù)下進(jìn)一步微調(diào)圖標(biāo)的視覺觀感，從而達(dá)到更加和諧統(tǒng)一的呈現(xiàn)。

以往絕大多數(shù)圖標(biāo)都是單色形式，但是這并不能滿足所有場景的使用，例如一些特定的強(qiáng)調(diào)色，以及天氣狀況圖標(biāo)等。SF Symbols在色彩上，圖標(biāo)本身可以被劃分為多個層級，每個層級都支持單獨(dú)配置色彩參數(shù)，從而實(shí)現(xiàn)了一個圖標(biāo)，多種色彩模式的效果，在不同的狀態(tài)可以通過色彩的變化進(jìn)一步豐富圖標(biāo)的表現(xiàn)力。有些情況下，圖標(biāo)的色彩并不是固定的，也需要可以代表時間和過程的變化，例如Wi-Fi強(qiáng)度和信號等，這些圖標(biāo)的微動在過往的開發(fā)流程中可能需要單獨(dú)的動畫來實(shí)現(xiàn)，而在SF Symbols中只需要對圖標(biāo)進(jìn)行預(yù)先設(shè)置，便可以支持這種動畫效果，而無需再輸出動畫資源。

在手機(jī)QQ中的圖標(biāo)設(shè)計(jì)中，同樣遵循了上述的設(shè)計(jì)原則，具備簡潔現(xiàn)代的設(shè)計(jì)風(fēng)格，與界面中的其他元素相得益彰，共同構(gòu)成了Q語言的完整設(shè)計(jì)系統(tǒng)。

在群應(yīng)用圖標(biāo)的場景中，對于圖標(biāo)做了更加豐富生動的表現(xiàn)處理。在默認(rèn)模式中，對圖標(biāo)進(jìn)行基于QQ色彩體系的色相分層處理，既強(qiáng)化了不同圖標(biāo)之間的差異識別，同時多層次的色彩豐富了圖標(biāo)的視覺感受；簡潔模式的圖標(biāo)則更傾向于系統(tǒng)圖標(biāo)外圓內(nèi)方的線性風(fēng)格，同時強(qiáng)化了圖標(biāo)比例和圖形輪廓，在簡化造型的基礎(chǔ)上保證了識別度。

動態(tài)與變化

在手Q的Tab圖標(biāo)上，切換選中時加入了的生動的圖標(biāo)動畫，通過品牌色的面性圖標(biāo)強(qiáng)化了選中效果，恰到好處的微動畫不會過于搶眼，同時又為QQ注入了年輕活力的視覺感受。

在最新的SF Symbols 5版本中，引入了更加豐富的動畫效果，同樣也是通過預(yù)先將圖標(biāo)設(shè)置圖層來實(shí)現(xiàn)預(yù)設(shè)的六種動畫（出現(xiàn)、消失、彈跳、縮放、閃爍、交替），不需要單獨(dú)的圖標(biāo)動畫資源。最重要的是，這些圖標(biāo)動畫在所有的尺寸、粗細(xì)、和色彩渲染模式下，都是通用的，這讓其可用性大大增加，避免了例如淺色深色模式下都需要單獨(dú)的動畫資源的問題。

動畫中有個細(xì)節(jié)，例如上圖第一行中間的haha圖標(biāo)，動畫是分了多層進(jìn)行的，層與層之間的遮擋關(guān)系和線條分隔并不會因?yàn)樵氐目s放而變化，這是因?yàn)樵赟F Symbols的圖標(biāo)動畫配置中，支持對布爾運(yùn)算的圖層進(jìn)行配置，通過多圖層的動畫實(shí)現(xiàn)了這種復(fù)雜的動畫效果，十分巧妙。

小結(jié)

以上的關(guān)于圖標(biāo)設(shè)計(jì)系統(tǒng)的內(nèi)容受限于篇幅并沒有詳細(xì)介紹其中的實(shí)現(xiàn)原理與設(shè)計(jì)細(xì)節(jié)，感興趣的讀者可以到以下幾個官方的視頻鏈接中詳細(xì)了解，相信看完之后便會領(lǐng)會到圖標(biāo)設(shè)計(jì)系統(tǒng)與先進(jìn)的技術(shù)實(shí)現(xiàn)結(jié)合的魅力所在。可以說在UI圖標(biāo)系統(tǒng)中，已經(jīng)不僅僅是圖標(biāo)本身的設(shè)計(jì)，而是關(guān)聯(lián)到系統(tǒng)字體、技術(shù)實(shí)現(xiàn)、動態(tài)交互等多個領(lǐng)域的復(fù)雜系統(tǒng)，通過多方的共同協(xié)作，最終才能實(shí)現(xiàn)可以不斷迭代、使用便利的圖標(biāo)工具箱。

三、圖標(biāo)設(shè)計(jì)的未來

伴隨著互聯(lián)網(wǎng)、個人電腦和手機(jī)的普及，以及例如奧運(yùn)會這樣的全球盛事的舉辦，世界范圍內(nèi)的文化交流和融合變得越來越常見和深入，圖標(biāo)與文字一樣構(gòu)成了不可或缺的溝通橋梁，在這樣的背景下，圖標(biāo)的設(shè)計(jì)更加需要去適應(yīng)這樣多元的環(huán)境，利用先進(jìn)的技術(shù)進(jìn)行視覺表現(xiàn)，使用AI去探索更多的可能性。

3.1 更多元的應(yīng)用

在SF Symbols中，一些涉及到書寫習(xí)慣的圖標(biāo)會擁有幾個不同的語言版本，例如書本這個圖標(biāo)，有的是右開本有的是左開本，這便是考慮到在一些國家和地區(qū)的文化習(xí)慣不同。以及不分圖標(biāo)上的文字也擁有包括英語、漢語、阿拉伯語等等好幾個變體。系統(tǒng)調(diào)用這些圖標(biāo)時便會根據(jù)用戶所設(shè)置的語言和地區(qū)，自動變化圖標(biāo)的呈現(xiàn)，讓開發(fā)者無需去單獨(dú)適配，達(dá)到高效開發(fā)的同時也提升了多語言的用戶體驗(yàn)。

在emoji中我們也可以看到，一些表情也擁有多個膚色版本，黃色為經(jīng)典的默認(rèn)樣式，其他則適配了從淺到深的五種膚色，讓所有人都可以擁有屬于自己的emoji膚色，這同樣也是出于對不同種族人們的尊重和平等。

性別的平等在當(dāng)代也得到了廣泛的重視，如iOS系統(tǒng)通訊錄的圖標(biāo)從早期的傾向于男性的頭像，到如今的中性表達(dá)；以及Twiter設(shè)計(jì)默認(rèn)頭像時也著重優(yōu)化了頭像的樣式，在肩部和頭部的形態(tài)上去除性別的傾向，從而實(shí)現(xiàn)可以以一種抽象的頭像圖標(biāo)去指代所有人。

3.2 更生動的表現(xiàn)

上文提到的奧運(yùn)會運(yùn)動項(xiàng)目圖標(biāo)，某種程度上也見證著世界范圍內(nèi)圖標(biāo)設(shè)計(jì)與技術(shù)發(fā)展的進(jìn)程，在2021年東京奧運(yùn)會上首次出現(xiàn)的動態(tài)體育圖標(biāo)，為傳統(tǒng)的平面圖標(biāo)注入了動感和立體感，更加適用于當(dāng)代的數(shù)字媒體傳播，之后的北京冬奧會也為運(yùn)動項(xiàng)目加入了動態(tài)的呈現(xiàn)，并且還融入了中國篆刻的視覺語言，將傳統(tǒng)與現(xiàn)代巧妙地融合在了一起。

在數(shù)字世界中，更少不了圖標(biāo)向著更加生動的表現(xiàn)上進(jìn)化。從emoji到animoji和memoji，平面的表情圖標(biāo)現(xiàn)在可以結(jié)合用戶的表情，實(shí)時地動態(tài)立體呈現(xiàn)。而最近發(fā)布的Vision Pro，將我們所熟悉的各種app圖標(biāo)在空間中更加生動地還原出來，加入了分層的概念，讓圖標(biāo)可以隨著人眼的目光變化，實(shí)現(xiàn)更加真實(shí)和靈動的感受，仿佛原先的數(shù)字世界中的各種app出現(xiàn)在了現(xiàn)實(shí)世界中。

3.3 更自由的表達(dá)

或許在不遠(yuǎn)的未來，圖標(biāo)設(shè)計(jì)不再是只屬于設(shè)計(jì)師的工作，隨著技術(shù)的進(jìn)步，越來越多的普通人也可以借助各種智能工具，體驗(yàn)到圖標(biāo)設(shè)計(jì)的趣味。比如谷歌所推出的Emoji Kitchen，可以讓用戶自由地組合Emoji，創(chuàng)作出自己想要的表情圖標(biāo)。

以及AI技術(shù)的發(fā)展，也讓人們可以僅僅借助一段文字的描述，就能幾乎立刻得到由AI生成的效果絢麗的圖標(biāo)。而AI技術(shù)才剛剛起步，現(xiàn)在甚至隔幾個月就會有一個顯著的進(jìn)步和能力提升，可以預(yù)見在不久的將來，這項(xiàng)技術(shù)將極大的降低圖標(biāo)設(shè)計(jì)的門檻，讓更多的人加入到設(shè)計(jì)與創(chuàng)作的隊(duì)伍中。

結(jié)語

參考資料

History of the Arrow - American Printing History Association

https://printinghistory.org/arrow/

A brief history of Iconography

https://pdtv.medium.com/a-brief-history-of-iconography-c20d8a0cc2c4

1970 New York City Transit Authority Graphics Standards Manual

https://standardsmanual.com/products/nyctacompactedition

1964到2020，從奧運(yùn)會體育標(biāo)識的更迭中捕捉設(shè)計(jì)原點(diǎn)

https://zhuanlan.zhihu.com/p/113008671

圖標(biāo)設(shè)計(jì)知往鑒今：致敬 Apple 初代設(shè)計(jì)師 Susan Kare - 少數(shù)派

https://sspai.com/post/82739

What’s new in SF Symbols 5 - WWDC23 - Videos - Apple Developer

https://developer.apple.com/videos/play/wwdc2023/10197/

Introducing Material Symbols - Material Design

https://material.io/blog/introducing-symbols

Rethinking our default profile photo

https://blog.twitter.com/en_us/topics/product/2017/rethinking-our-default-profile-photo

中國篆刻“動起來”了！這些冬奧體育圖標(biāo)不簡單_新聞_央視網(wǎng)(cctv.com)

http://m.news.cctv.com/2020/12/31/ARTIRAzLnmbbAzRcb0iEGr27201231.shtml

Design for spatial user interfaces - WWDC23 - Videos - Apple Developer

https://developer.apple.com/videos/play/wwdc2023/10076/

Google Emoji Kitchen

https://www.google.com/search?client=safari&rls=en&q=google+emoji+kitchen&ie=UTF-8&oe=UTF-8

AI Emojis

https://emoji.fly.dev

CandyIcons

https://www.candyicons.com

作者：騰訊ISUX
鏈接：https://www.zcool.com.cn/article/ZMTYxNjgwMA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

評論(0) 瀏覽(622)

1 2 3 4 5 6 7 ... 12 »

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn

首頁

一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)

優(yōu)化UI設(shè)計(jì)規(guī)范:海外項(xiàng)目與國內(nèi)產(chǎn)品設(shè)計(jì)規(guī)范及組件庫對比

超全面陰影設(shè)計(jì)指南

UI 設(shè)計(jì)的 10 個細(xì)節(jié)

探究UI設(shè)計(jì)中形狀的創(chuàng)意與應(yīng)用

圖標(biāo)設(shè)計(jì)進(jìn)化論

圖標(biāo)設(shè)計(jì)九大統(tǒng)一性

中世紀(jì)古典風(fēng)《Sirius Wars》游戲UI設(shè)計(jì)-虛擬項(xiàng)目

路由圖標(biāo)情感化設(shè)計(jì)

信息精度強(qiáng)化

圖標(biāo)設(shè)計(jì)的進(jìn)化歷程，讀這一篇就好了！

分類

日歷

鏈接

個人資料

存檔