乾貨 | UI設計初學者必須要懂的圖示設計知識
如今的使用者介面中，圖示絕對是不可或缺的元素。雖然絕大多數的圖示都很小，甚至不被人注意到，但是它們幫助設計和使用者解決了許多問題。
圖示是可用性和導航的關鍵，使用者能夠感知到圖示的功用，但是隻有設計師才會明白，想要讓圖示簡約、可用還富有表現力，要耗費多少時間和精力。
喬布斯曾經說過：“細節至關重要，花費時間仔細打磨是值得的。”圖示是現如今UI介面中可用性和導航體系的核心元件。
所以，今天的文章，我們來仔細歸納一下常見的圖示型別和它們在UI中的使用。
圖示的定義
一般而言，圖示是具有高度概括性的、用於視覺資訊傳達的小尺寸影象。圖示常常可以傳達出豐富的資訊，並且常常和詞彙、文字搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特徵、內容和資訊。
在數字設計領域，圖示作為網頁或者UI介面中的象形圖和表意文字而存在，是確保介面可用性的基礎設施，也是達成人機互動這一目標的有效途徑。
圖示的表意功能，使得它可以有效地替代文字來使用。有研究表明，使用高度可識別的、清晰的圖示，對於介面導航的可用性有極大的提升，對於人類而言，視覺資訊的處理速度比起文字要快太多。不過，從另一方面來看，圖示需要傳遞出相對清晰的概念才行，任何輕微的誤讀都會對整體體驗造成極大的傷害，所以，圖示的選取要慎之又慎，經過仔細的測試，才能達成良好的平衡，並且為目標受眾所接受。圖示使用的歷史正如同我們所知道的，圖示、標識都不是介面設計師所創造的概念，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當中。早期用來傳達資訊的圖示演變為系統的文字，而在地圖、圖書、壁畫和建築等各種各樣的地方，還存在著用來代表和傳達特定概念的圖示和標識。
隨著技術的發展，計算機誕生了，而顯示器的出現，也為圖形化介面的誕生，鋪平了道路。20世紀70年代，施樂在位於帕羅奧托的研究所當中，誕生了最早的擁有圖形化介面的電腦，著名的 Xerox Alto。這款昂貴的概念機最終並沒有走進大眾的視野，但是它的後續機型施樂之星在1981年問世，並且成為了計算機史上的重要里程碑。而Xerox Alto 對於喬布斯和比爾蓋茨的啟發，更是引發了計算機歷史上最著名的一場戰爭：蘋果VS微軟，Windows 對抗 Macintosh。當然這都是後話。Xerox Alto 中引入了大量的圖示設計，其中資料夾和垃圾箱的圖示設計，從當時一直延續到現在，成為圖示設計中最廣為人知和普遍接受的設計概念。
來自蘋果的Macintosh系統在圖形化介面發展史上是無法繞過的里程碑。1991年，蘋果藉由Macintosh，首次釋出了彩色的圖示設計。圖示所能容納的資訊量比起上一個黑白介面的時代更大，全新的樣式使得它在資訊傳達的功能性上有了明顯的提升。在此之後，越來越多的圖示開始藉由靈活而強大的數字技術而誕生，並且基於不同的需求而演化出不同的分支和風格。許多作業系統和工具開始預製一些成體系的圖示，誕生基於種種需求，越來越多的自制的、重設計的圖示，逐步進入了我們的視野。圖示型別很多，我們可以用不同的方式來劃分它們。基於功能來劃分圖示型別
解釋性圖示
這些圖示是旨在闡明資訊的圖示型別。它們是用來解釋和闡明特定功能或者內容類別的視覺標記。
在某些情況下，它們並不是直接可互動的UI元素，在很多時候也會有輔助解釋其含義的文案。
同時，它們還常常會作為行為召喚的文字的視覺輔助元素而存在，以提高資訊的可識別性。很多時候使用者會藉助這些解釋性圖示來獲取資訊，而不是相搭配的文字。
不過，有的時候圖標表達的含義可能還不夠完整或者清晰，最好是將圖示和文案搭配起來使用，降低誤讀的可能性。
互動圖示這種圖示在UI中不止是展示的作用，它們還會參與到使用者互動當中來，是導航系統不可或缺的組成部分。它們可以被點選，並且隨之響應，幫助使用者執行特定的操作，觸發相應的功能。
裝飾和娛樂用圖示這種圖示通常是用來提升整個介面的美感和視覺體驗，並不具備明顯的功能性。但是，它們同樣是重要的。這類圖示迎合了目標受眾的偏好與期望，具備有特定的風格的外觀，並且提升了整個設計的可靠性和可信度。更準確地說，這些裝飾性的圖示不僅可以吸引並留住使用者，並且可以讓整個使用者體驗更加積極。裝飾性圖示通常呈現出季節性和週期性的特徵。
應用圖示應用圖示是不同數字產品在各個作業系統平臺上的入口和品牌展示用的標識，它是這個數字產品的身份象徵。在絕大多數的情況下，它會將這個品牌的LOGO和品牌用色融入到圖示設計當中來。也有的圖示會採用吉祥物和企業視覺識別色的組合。真正優秀的應用圖示設計，其實是結合市場調研和品牌設計的組合，它的目標在於創造一個不會讓使用者能夠在螢幕上快速找到的醒目設計。
FaviconFavicon 有時候也被成為 URL 圖示，它是網頁在網頁的標籤中顯示的識別性小圖示，它同樣代表著網頁，是使用者在網頁和瀏覽器當中快速定位的視覺識別標識。Favicon 同樣是身份識別用的圖示，並且在網頁的宣傳和推廣以及視覺識別上都有重要的意義。基於視覺特徵來劃分的圖示型別字元圖示“Glyph”一詞是源自於排版領域，現在已經隨著數字設計而逐步在數字設計領域紮根了，它源自於希臘語，含義為“雕刻”。最初，它值得是讀者和作家約定俗成的符號、字符合集中所包含的各種圖形。在排版領域當中，符號圖示通常是包含特定的含義、特定功能、可表意也可書寫的類文字系統，它可以是字母，也可以是圖形，有的時候甚至是兩者的組合。下面是一套古老的凱爾特字元系統：
在現代的數字設計當中，字元圖示在古老的字元系統上有了新的發展。現在的字元圖示同樣包含了字母、數字和圖形，它們中所涵蓋的內容更加豐富。這樣一來，現在提及字元圖示，我們通常不會將它們視為文字，而是圖示。下面是Material Design 的字元圖示集：
字元圖示使用簡化和通用的圖形，當用戶在使用它們的時候，它們擁有足夠的識別度和靈活的適用場景。
扁平和半扁平圖示扁平化的圖示設計比起字元圖示就要複雜得多，其中增加了色彩和其他元素的填充，比起近乎由輪廓和筆畫構成的字元圖示，明顯要高一個維度。然而和前者一樣，扁平的圖示同樣專注於清晰而直觀的視覺資訊傳達，為使用者提供一目瞭然的視覺內容。扁平化的圖示設計最突出的功能也就在此，在二位的平面上，不借助複雜的紋理和陰影來明瞭地、視覺化地傳達資訊，和擬物化圖示正好相對。
擬物化圖示就如同上文所說，擬物化圖示是扁平化圖示的對立面，正如同當初擬物化圖示設計師常說的，它就是“抄現實”，儘量將現實世界中的形狀、紋理、光影都融入到整個圖示的設計，擬真是它的特點。擬物化圖示這一設計趨勢幾乎是跟隨著Macintosh 的誕生和進化一步一步走過來，走到極致，然後從UI設計領域開始，被扁平化設計所替代。不過，擬物化圖示現在依然廣泛地運用在不同領域，尤其是遊戲設計和遊戲類產品的圖示設計當中。SVG 圖示SVG圖示，其中的SVG 是 Scalable Vector Graphics 的縮寫，它是基於 XML 的2D向量圖示技術，它的技術標準被 W3C 所推行，並且得到所有的主流瀏覽器的支援。SVG 圖示現在越來越受歡迎，它很大程度上降低了跨平臺、跨螢幕設計的時候圖示顯示上的相容性問題。基於影象隱喻來劃分的圖示型別著名的可用性研究專家 Jackob Nielsen 曾經在 NNGroup 的文章中披露了這種圖示型別劃分的標準。圖示基於其中所反映出來的隱喻，可以劃分為三個主要型別。相似圖示，它是將現實世界中的物理實體給符號化，這種設計最典型的就是用於搜尋的放大鏡圖示，購物車圖示，郵件圖示等。參考性圖示，它是使用類比物件的方式來設計的圖示，比如壓縮和解壓類的工具圖示，常常會使用包、拉鍊這樣的意象來傳遞出概念。隨意式圖示，這類圖示的設計和其功能/含義並沒有關聯，它們本身並不傳遞出功能性的含義，依靠的是使用者長時間的檢視、使用，逐步習慣來熟悉其中的含義。現在許多介面當中的“儲存”按鈕採用的是軟盤的圖示，但是軟盤實際上早已退出歷史舞臺，許多使用者甚至都不知道軟盤的存在，但是使用者會在長時間的使用過程中瞭解它的功能，並且在大腦中形成這樣的概念迴路。
有效的圖示設計在之前的文章中，我們總結過高效的圖示設計應該具備的特徵，在此我們快速回顧一下：清晰：圖示的意義應該是可理解的，可供受眾吸收的有意義：傳遞出有意義的資訊 可識別：圖示中所包含的視覺符號應該能夠被正確地識別和呈現 簡單：圖示中僅僅包含必要的元素，便於被快速的感知，不會讓使用者感到費勁 吸引人：圖示設計要比其他的視覺元素更突出，直覺而引人矚目 靈活可拓展：圖示應該可縮放，並且不論大小都能被人所理解，完整而易讀 不冒犯人：它應該沒有隱含意義，也不會有被誤讀的可能 一致：圖示應該和應用保持一致的風格希望以上內容對你學習UI設計有所幫助，覺得可以請轉發支援，將一如既往的為大家分享更多UI設計乾貨文章。喜歡可關注VX公眾號：UI設計小琪