經常看Dribbble和Behance的同學可能早就聽說過Tubik Studio 這個工作室，他們的UI設計案例和圖標設計一直以簡約傳神而著稱，色彩搭配上也相當的有一套。作為一個在UI設計領域深耕的工作室，Tubik Studio 在圖標設計上也非常的有經驗。今天的文章內容并不復雜，也許你看過之后就忘掉了，但是確實是經驗之談，仔細思考，你會發現要做到也并不簡單。希望能這篇文章能給你一點啟發~
眼睛可以讓我們在短短的一瞬間獲得大量的信息，更重要的是，這種信息獲取方式并不費勁——至少絕大多數的信息都是下意識獲得并吸收的。所以，在設計領域當中，視覺感知其實起到了相當重要的作用，不論是產品設計，還是解決用戶的問題。
今天的文章緣起于Quora 上的一個問題：“在UI界面中，人對于圖標的感知是否比文字更快？”作為在UI領域深耕的 Tubik Studio 曾在Quora 中對此作出回答，而今天的文章則將之前的答案更系統的整理出來。關于圖標設計、文字內容以及人的視覺感知之間的關系，其實并不是一眼看上去那么簡單。
對于人而言，視覺感知的確是大腦獲得信息最快的途徑之一。視覺感知對于生活和工作各方面的影響是如此之多，以至于在進行產品設計的時候完全無法忽視它的存在。這也是為什么現如今的界面設計中，圖標設計占據了如此之大的比例。如果你回溯數字設計的歷史的話，會發現圖標設計在過去很長的一段時間中，圖標設計幾乎一直都是GUI領域的核心之一。
在對視覺感知進行系統化的科學研究和理論分析之后，A. Santella 得出了這樣的結論：“通過大量的眼動追蹤研究之后，我們發現一些有趣的現象。這些現象表明，人們對于抽象概念甚至一些藝術化形象的理解并不差，它們并不是藝術家才有的神秘能力，而是幾乎每個人都有的視覺感知能力。雖然不并不是每個人都能畫出來，但是幾乎每個人都能在計算機的幫助下制作渲染出來。”絕大多數的人在視覺識別、感知、標記、數據化甚至將圖片高度抽象化上都有不俗的能力，可以說，人們在視覺能力范圍上寬廣得難以置信。而這一重要的事實對于設計師而言就非常重要了，在此基礎上設計師可以提出更具有易用性和適配性的解決方案。
如果設計師只關注圖標傳遞信息的速度的話，那么相比文字，圖標確實可以更快的被用戶感知到。絕大多數的用戶都是被視覺感知所驅動的，所以成熟的視覺感知機制是更有效的信息傳遞途徑，并且應當作為設計中最值得重視的方面：
除此之外，圖標和界面中的其他視覺元素讓信息可以更容易被不同國家、不同語言和不同文化背景的用戶所接受，可以說，從某種程度上，圖標提升了界面中信息的被理解性。對于有諸如閱讀障礙這樣的用戶而言，視覺化的界面也更容易理解。
圖標在界面許多地方都有應用，其中最普遍也是最典型的就是標簽欄中的圖標運用。標簽作為一種功能性的交互元素，所占據的空間是有限且固定的，這樣一來，簡明直觀的圖標就成了一個非常高效的解決方案了。上圖的概念設計是由設計師 Sergey Valiukh 所設計，簡約的線性圖標配合微交互讓這個底部菜單顯得直觀、清晰而又有趣。
接下來的這個天氣界面的設計案例則展示了圖標是如何展示呈現不同的視覺信息的。符號化的圖標設計清晰得傳遞出不同的天氣信息，在保持界面整潔、不占用太多空間的前提下，讓用戶輕松掌控一整周的天氣情況。
許多界面中，基礎的交互和內容信息需要用戶花費好幾秒來進行吸收和獲取，而圖形化以及圖標化的信息呈現能將這個過程縮短。但是，影響信息獲取的因素，并不只是文本和圖標的配比。
在Tubik Studio 所設計和參與的諸多設計項目的經驗基礎上，我們在創建界面的過程中，圖標本身并不是傳遞信息速度的唯一影響因素。的確，圖標以圖像的形式向用戶傳遞信息，但是如果信息傳遞的不夠準確，出現的雙關或者歧義，傳遞速度再快，體驗也不好。圖標傳遞出的信息被誤讀，這就沒法被定型為“識別”了，它只是很快被“關注”到而已。真正意義上的識別，不止是被快速看到，而且得被正確理解、正確操作才行。
諸如電話、電子郵件、搜索這類圖標的設計，已經為大家所熟知，如果在UI中使用這樣的圖標設計，傳遞信息肯定比文案快速準確得多。然而，如果你所使用的圖標形象不夠清晰明確的情況下，那么你需要對它進行充分的思考。如果和最終要傳達的信息不相符，那么最好替換掉，這個時候信息傳遞的速度并不重要。這就是為什么有的設計需要同時使用文字和圖標來傳遞信息，這個時候可能圖標對功能的“描述”不夠精準，需要文字來作為輔助。
在這個概念設計中，圖標和文案是相互搭配的。這個界面中，一個交互加入了多個高識別度的感知元素，通過動效、CTA元素以及文案讓用戶對與操作擁有更高更清晰的識別度。能夠快速識別圖標的用戶通常不用再去閱讀文字，而對于文字有較高感知度的用戶而言，文字的存在讓他們不用去猜圖標的含義（比如很少上網的老年人）。同時使用文字和圖標的確會降低用戶曲解圖標含義的機率。
另外一個常見的案例就側邊欄的設計，簡單的文本和簡單的線性圖標的搭配就可以傳遞出足夠清晰的概念。
這個博客APP的概念設計展示了圖標是如何作為一個多功能的視覺元素而存在的。首先，圖標作為博客的分類目錄不同條目的視覺識別形象而存在，同時，圖標中的圖案信息能夠傳遞出類別的相關信息，不同的色彩則成為了用戶分辨不同類別的重要視覺信號。所有的這一切讓用戶能夠更加清晰地識別信息，交互也更加明了，強化了整體的可用性和導航的有效度。
無論你最終決定使用圖標、文字還是說兩者都用，主要是取決于你的受眾和你的目標，通過分析需求和最終目的來進行合理的選取。
綜上所述，我們可以總結出界面中使用圖標的主要好處：
·提升用戶對信息和數據的感知速度
·通過視覺化的圖像來提升用戶對于各種元素的記憶性
·通過視覺引導提升導航的便捷度
·無需過長的文字說明，更加節省界面和屏幕空間
·支持文案和內容，以視覺的方式傳遞信息
·強化設計感，與界面樣式保持協調
很顯然，圖標不論如何設計，都是無法滿足所有用戶的需求，并且無法覆蓋到所有用戶的認知，但是在視覺設計上依然有一些普適而基礎的因素值得我們注意和思考：
·目標受眾（能力、年齡、文化背景、教育水平等）
·典型用戶的閱讀水平
·產品的使用環境
·產品在全球或者地區的推廣和普及程度
·所用圖標和圖形本身的識別度
·所用圖標和圖形讓人分心或者集中注意力的程度
上面所說的因素都和人們的認知與視覺感知息息相關，影響著視覺表達的質量和效率。對于設計師而言，讓用戶僅僅看到界面是不夠的，讓用戶能夠識別、理解界面才是核心，這樣他們才能真正與界面進行有效的交互。文案和圖標是相互扶持、互為支撐的，它們能夠協調一致地呈現信息才能給用戶帶來真正好的用戶體驗。
0
喜歡他，就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設計網（CNDESIGN）會員所發布展示的 “原創作品/文章” 版權歸原作者所有，任何商業用途均需聯系作者。如未經授權用作他處，作者將保留追究侵權者法律責任的權利。
Copyright ©2006-2019 CND設計網
