圖標在當今不論是物理世界還是數字世界中都廣泛存在且十分重要，在
交互界面中其重要性尤其值得強調。圖標是用戶與產品之間最簡單的交流形式之一，有助于提升可用性和直觀性，還能讓界面更加易于使用和理解，幫助用戶快速導航。很多時候，圖標有助于解決相當多復雜或抽象的概念。借由對圖標“進化“的概括梳理，不僅使我們看待圖標的設計有更深入地了解，同時也有助于更好地摸清未來圖標設計的發展方向。
箭頭，作為日常生活中最常見和常用的圖標，從城市生活的導航指向，到屏幕界面中的前進返回，到處都能見到各式各樣的箭頭圖標?？梢哉f幾乎每一個現代人都清楚箭頭圖標的含義，對這種無處不在的圖標習以為常。然而，正是這樣一個對我們來說司空見慣的圖標，卻很少有人知道它究竟是為何如此造型，又是如何一步步演進至今天的模樣的，就讓我們以這個有趣的問題為引子，來一同探尋圖標設計的進化歷程。
根據美國印刷史協會的研究，作為符號和圖標被使用的箭頭歷史只有短短不到四百年，隨著時間的推移，箭頭變得越來越簡化和抽象。而最初具有指向含義的“箭頭”，其實是一只腳印，以這種十分直觀的方式傳達了清晰的信息：“向這個方向前進?！蓖瑯?，在早期的教學插圖和標牌中可以看到手指的圖像，例如伸出的手指指向最近的城鎮方向，以及早期印刷文本和手稿中用于指向關鍵的段落。
這些均是十分具象的早期“箭頭”圖案，使用最直觀的方式表達了含義和作用，正如古代中國的甲骨文和埃及象形文字那樣直白。由此也不難看出，文字和圖標自古以來就有著千絲萬縷的聯系，時至今日依然如此。
之后箭頭圖標慢慢由具象走向象征性，首次使用是在18世紀的法國論文插圖中發現的，被描繪為一個帶有羽毛尾巴的弓箭箭矢。同期的德國也發現了地圖中使用類似圖案表示水流流向的例子。
隨后，箭頭變得更加抽象，到了19世紀中后期，箭頭的尾巴被省略，只留下了箭身和頭部的三角。對于瑞士字體設計大師Adrian Frutiger來說，這是箭頭最基本的特征：“當兩條斜線結合在一起并形成夾角，方向和運動感的表達隨之產生。”伴隨著工業革命，機器操作手冊中頻繁出現的箭頭圖標，被廣大民眾所接受。
自此，箭頭的抽象形態被確定，隨后便被廣泛應用于各種場景中。時至今日，箭頭圖標的用法和形式也越來越多樣，數學符號、商業標志，App界面中都有它的身影，其所被賦予的引申含義也越加豐富，漸漸地成為了我們今天所普遍熟知的箭頭圖標。
20世紀70年代紐約地鐵設計的新導視系統，這套以箭頭、字母、色彩構成的現代設計系統沿用至今，啟發了包括iOS頁面導航方式在內的許多經典設計（可以看到早期的導視也是使用具象的箭作為指向符號）。值得一提的是其中的箭頭細節，箭頭內側的斜線角度與外側并不是平行的，而是有著4° 的內縮，這種細節的處理正是從字體設計中借鑒而來，減弱筆畫交匯處的視覺重量感使其看起來是平行且勻稱的，類似的處理在今天的iOS圖標中仍然可以看到。
像是箭頭這樣經典的圖標設計還有許多，這里挑選了幾個最具有劃時代意義的設計，讓我們一起來回顧一下。
1964年東京奧運會，是奧運會第一次在亞洲國家舉辦，考慮到多國語言的信息傳達問題，設計了第一套運動項目的抽象圖標，來自各個國家的人們通過圖標即可辨別出不同的運動，在之后的1972年德國慕尼黑奧運會上，人物被進一步抽象，類似的人物抽象形象被復用在例如安全出口、洗手間等經典圖標上。
20世紀80年代，數字時代的圖標開始出現，作為GUI的關鍵組成，圖標的設計同樣是為了更加直觀地傳達信息，讓更多人可以輕易理解并接觸到個人電腦，消除傳統代碼界面造成的隔閡感與距離感，經典的Macintosh笑臉、Command、播放、USB等圖標陸續被發明。
經典Mac電腦開機時呈現的圖標，以及最新macOS中的訪達，通過把個人電腦擬人為一個笑臉，給用戶傳達了十分友好的第一印象，打破了人們對于電腦和機器先天地抵觸心理，讓技術的魅力被更多的人所感受。
蘋果電腦鍵盤上的Command修飾鍵最初只是一個Apple Logo，菜單中也會展示一系列以Apple Logo指代地快捷鍵組合，這樣在界面中濫用logo顯得十分不優雅，因此設計師從眾多抽象圖標中選擇了這個沒有明確含義地微妙圖標，在快捷鍵的描述上顯得十分貼切。據稱其源于北歐地區露營地的標識。
播放圖標在20世紀60年代中期首次出現在磁帶上，有時還有一個額外的三角形來表示快進或倒帶，三角形指向磁帶卷曲的方向。播放/暫停符號現在可以在任何能夠播放媒體的設備上找到，并普遍用于媒體的控制和表示。
USB圖標靈感來自于三叉戟。每個點的末端都被一個圓形、正方形和三角形所取代，旨在代表可以使用這種通用接口連接的許多不同的外圍設備。
從這些經典案例不難看出，圖標具備了文字所難以傳達的直觀性和親和力，不論在是物理世界還是數字世界中，圖標的設計都發揮了舉足輕重的作用。
今天的文字是從現實世界中對事物的抽象描述演變而來的，但我們仍然每天使用抽象的圖標來輔助進行溝通。對于數字環境中的用戶界面來說尤其如此。例如，眾所周知的“×”圖標代表關閉或刪除用戶在屏幕上看到的一部分內容，以及在搜索引擎或其他地方上看到了用作“搜索”圖標的放大鏡。
圖標以一種通用且簡單的方式傳達信息，無論文化或地理背景如何，每個人都可以理解。那么，怎樣的標志才算是好標志或壞標志呢？
我們需要更深入地研究科學才能更好地理解。符號科學的研究被稱為符號學。它涵蓋了從豎起大拇指到微笑，甚至表情符號的所有含義。這門科學的著名代表人物查爾斯·桑德斯·皮爾士提出了一個三角形模型，說明了符號之所以成為符號的原因（見下圖）。
這三個要素相互關聯，形成了理解或溝通中的基本結構。符號并非直接與其代表的對象相連，而是通過解釋者也就是使用符號的人來建立連接。這個模型強調了解釋和主觀性在符號學中的重要性。
如果我們以箭頭圖標為例，代表物是箭頭符號本身。它是一種視覺標志，通常用來指示方向或引導注意力。箭頭的形狀、方向和上下文決定了它如何被解釋。對象是箭頭符號所指向的事物。這可以是實際的物理方向，如“向北”、“返回上一級”等，或者可以是比喻意義上的方向，如指引下一步行動的方向。解釋者是觀察者對箭頭符號的理解或解讀。例如，當一個人看到一條指向右邊的箭頭時，他們可能會理解為需要向右轉，或者他們應該將注意力集中在右側。
所以當我們設計圖標時，需要著重考量這三者之間的關系。也可以理解為，如果在某個位置看到某個圖標，我們期望用戶如何理解并進行操作。
此外，蘋果電腦經典圖標的設計師Susan Kare也有自己一直堅持的設計原則：
因此，圖標的偉大之處在于可以跨越多種語言，成為一種人類通用的視覺表達。
圍繞著技術的演進，圖標的設計有了前所未有的進化，同字體設計產生了更多千絲萬縷的聯系。其中最具代表性的便是Apple和Google這兩家軟件巨頭所開發的SF Symbols和Material Symbol圖標系統，分別作為iOS和android的系統圖標應用，它們也有著各自的進化歷程。與此同時，圖標也不僅僅再是單一的固定的圖標，而是像字體一樣的一套圖標系統，包含可以進行自定義調節的風格、樣式、粗細、甚至可以不斷進行迭代和更新。完善易用的圖標系統與圖標本身的設計同樣至關重要。
作為用戶體驗十分優秀的Apple，其圖標系統必然具有眾多可圈可點之處。最初，SF Symbols提供的是單色圖標，這些圖標在界面中奠定了一致性，同時也給人一種熟悉感。在2021年，SF Symbols變得更加靈活多樣，提供了多種渲染模式：分層模式、調色版模式、多色模式。2022年引入了可變顏色，使得圖標能傳達不同的強度水平或是時間變化，讓圖標更加富有表現力。兼具功能性和視覺魅力。2023年，更進一步地增加了動畫屬性。為界面注入了更多動感和活力，圖標數量超過5000個。
SF Symbols使用iconfont技術來實現與系統字體的和諧搭配，支持粗細的無極調節，與文字的自動對齊排版，同時還支持同一個圖標的不同狀態變體，例如音量圖標的變化和用戶圖標的多種組合，猶如漢字的偏旁部首組合一樣靈活，在設計和開發實現時都非常高效便利。
在同一個字號下，擁有大中小三種圖標的預設尺寸，使得在不同尺寸的控件中，盡管字號都是17pt，但都可以調用合適的圖標，三種尺寸也并非單純的縮放，而是針對每個尺寸的粗細和內部空間單獨進行微調，從而實現每個尺寸的圖標視覺感受上都能和諧匹配文字內容。
Material Symbols作為谷歌開發設計的一套圖標系統，同樣具有許多優秀的特質。除了與SF Symbols同樣的可變粗細、尺寸視覺自適應等特性外，還具有SF Symbols所不具備的一些優勢。
圖標風格上，Material Symbols支持三種不同的描邊風格，Outlined、Rounded和Sharp，在線條轉折和頭尾的方圓處理上各有不同。支持針對不同粗細的精細調節，這是由于在淺色模式和深色模式下，圖標的粗細感受會有些許不同，而通過Grade這一特性，則可以在同樣的粗細參數下進一步微調圖標的視覺觀感，從而達到更加和諧統一的呈現。
以往絕大多數圖標都是單色形式，但是這并不能滿足所有場景的使用，例如一些特定的強調色，以及天氣狀況圖標等。SF Symbols在色彩上，圖標本身可以被劃分為多個層級，每個層級都支持單獨配置色彩參數，從而實現了一個圖標，多種色彩模式的效果，在不同的狀態可以通過色彩的變化進一步豐富圖標的表現力。有些情況下，圖標的色彩并不是固定的，也需要可以代表時間和過程的變化，例如Wi-Fi強度和信號等，這些圖標的微動在過往的開發流程中可能需要單獨的動畫來實現，而在SF Symbols中只需要對圖標進行預先設置，便可以支持這種動畫效果，而無需再輸出動畫資源。
在手機QQ中的圖標設計中，同樣遵循了上述的設計原則，具備簡潔現代的設計風格，與界面中的其他元素相得益彰，共同構成了Q語言的完整設計系統。
在群應用圖標的場景中，對于圖標做了更加豐富生動的表現處理。在默認模式中，對圖標進行基于QQ色彩體系的色相分層處理，既強化了不同圖標之間的差異識別，同時多層次的色彩豐富了圖標的視覺感受；簡潔模式的圖標則更傾向于系統圖標外圓內方的線性風格，同時強化了圖標比例和圖形輪廓，在簡化造型的基礎上保證了識別度。
在手Q的Tab圖標上，切換選中時加入了的生動的圖標動畫，通過品牌色的面性圖標強化了選中效果，恰到好處的微動畫不會過于搶眼，同時又為QQ注入了年輕活力的視覺感受。
在最新的SF Symbols 5版本中，引入了更加豐富的動畫效果，同樣也是通過預先將圖標設置圖層來實現預設的六種動畫（出現、消失、彈跳、縮放、閃爍、交替），不需要單獨的圖標動畫資源。最重要的是，這些圖標動畫在所有的尺寸、粗細、和色彩渲染模式下，都是通用的，這讓其可用性大大增加，避免了例如淺色深色模式下都需要單獨的動畫資源的問題。
動畫中有個細節，例如上圖第一行中間的haha圖標，動畫是分了多層進行的，層與層之間的遮擋關系和線條分隔并不會因為元素的縮放而變化，這是因為在SF Symbols的圖標動畫配置中，支持對布爾運算的圖層進行配置，通過多圖層的動畫實現了這種復雜的動畫效果，十分巧妙。
以上的關于圖標設計系統的內容受限于篇幅并沒有詳細介紹其中的實現原理與設計細節，感興趣的讀者可以到以下幾個官方的視頻鏈接中詳細了解，相信看完之后便會領會到圖標設計系統與先進的技術實現結合的魅力所在?？梢哉f在UI圖標系統中，已經不僅僅是圖標本身的設計，而是關聯到系統字體、技術實現、動態交互等多個領域的復雜系統，通過多方的共同協作，最終才能實現可以不斷迭代、使用便利的圖標工具箱。
伴隨著互聯網、個人電腦和手機的普及，以及例如奧運會這樣的全球盛事的舉辦，世界范圍內的文化交流和融合變得越來越常見和深入，圖標與文字一樣構成了不可或缺的溝通橋梁，在這樣的背景下，圖標的設計更加需要去適應這樣多元的環境，利用先進的技術進行視覺表現，使用AI去探索更多的可能性。
在SF Symbols中，一些涉及到書寫習慣的圖標會擁有幾個不同的語言版本，例如書本這個圖標，有的是右開本有的是左開本，這便是考慮到在一些國家和地區的文化習慣不同。以及不分圖標上的文字也擁有包括英語、漢語、阿拉伯語等等好幾個變體。系統調用這些圖標時便會根據用戶所設置的語言和地區，自動變化圖標的呈現，讓開發者無需去單獨適配，達到高效開發的同時也提升了多語言的用戶體驗。
在emoji中我們也可以看到，一些表情也擁有多個膚色版本，黃色為經典的默認樣式，其他則適配了從淺到深的五種膚色，讓所有人都可以擁有屬于自己的emoji膚色，這同樣也是出于對不同種族人們的尊重和平等。
性別的平等在當代也得到了廣泛的重視，如iOS系統通訊錄的圖標從早期的傾向于男性的頭像，到如今的中性表達；以及Twiter設計默認頭像時也著重優化了頭像的樣式，在肩部和頭部的形態上去除性別的傾向，從而實現可以以一種抽象的頭像圖標去指代所有人。
上文提到的奧運會運動項目圖標，某種程度上也見證著世界范圍內圖標設計與技術發展的進程，在2021年東京奧運會上首次出現的動態體育圖標，為傳統的平面圖標注入了動感和立體感，更加適用于當代的數字媒體傳播，之后的北京冬奧會也為運動項目加入了動態的呈現，并且還融入了中國篆刻的視覺語言，將傳統與現代巧妙地融合在了一起。
在數字世界中，更少不了圖標向著更加生動的表現上進化。從emoji到animoji和memoji，平面的表情圖標現在可以結合用戶的表情，實時地動態立體呈現。而最近發布的Vision Pro，將我們所熟悉的各種app圖標在空間中更加生動地還原出來，加入了分層的概念，讓圖標可以隨著人眼的目光變化，實現更加真實和靈動的感受，仿佛原先的數字世界中的各種app出現在了現實世界中。
或許在不遠的未來，圖標設計不再是只屬于設計師的工作，隨著技術的進步，越來越多的普通人也可以借助各種智能工具，體驗到圖標設計的趣味。比如谷歌所推出的Emoji Kitchen，可以讓用戶自由地組合Emoji，創作出自己想要的表情圖標。
以及AI技術的發展，也讓人們可以僅僅借助一段文字的描述，就能幾乎立刻得到由AI生成的效果絢麗的圖標。而AI技術才剛剛起步，現在甚至隔幾個月就會有一個顯著的進步和能力提升，可以預見在不久的將來，這項技術將極大的降低圖標設計的門檻，讓更多的人加入到設計與創作的隊伍中。
從腳印到箭頭，從手繪到生成，從單一的圖標到復雜的系統，圖標設計的進化也同樣是文明和技術的進化。數字技術的發展進一步地加速了這個過程，屏幕的分辨率也從像素馬賽克演進到了如今幾乎無法區分虛擬和現實，遠超人類自身進化的速度。但不論是在復雜的現實世界或是夢幻的數字世界，一個簡單清晰的箭頭圖標都將可以成為導航，為我們指引目標和方向。
作者：騰訊ISUX
鏈接：https://www.zcool.com.cn/article/ZMTYxNjgwMA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
