視覺噪音什麼意思

圖示的定義

一說到圖示，我想您一定會覺得非常熟悉。圖示，也稱為icon或picto，是指有明確含義的圖形視覺語言。那麼當我們一提起圖示設計，您的腦中會想起哪個圖示來呢？有可能您想起的是微信APP由兩個白色氣泡組成的啟動圖示；或者是我們每天使用的APP中的那些返回、關閉等系統圖標；也可能是商場導視裡的衛生間圖示等。沒錯，圖示的形式有很多種，它可以應用在很多場景中，並且表現方式非常豐富：有線的、有面的、也有擬物的等等。圖示的歷史可以追溯到象形文字（Pictogram），我們的祖先在發明文字之前就使用圖示記錄一天的生活了。聽著是不是不可思議呢？從亙古時代的象形文字開始，我們的祖先就偏愛使用這種抽象的圖形來表達意思了。在平面設計領域的商標其實也是一種圖示；平面設計裡的視覺導視（例如衛生間的圖示）也有圖示的應用，所以圖示在我們的生活中應用非常廣泛。

生活中隨處可見的圖示

在計算機時代，從80年代的施樂公司介面中的單色圖示開始，圖示就開始出現在螢幕之中了，圖示較程式語言更容易被大眾理解。到了後來從iMac到iPhone引領的擬物圖示更是開啟了一個絢麗的圖示設計時代。擬物時代盛行也帶來了一些麻煩：擬物圖示的質感、光影會吸引走使用者的注意力，我們稱之為“視覺噪音”。於是UI設計師開始探索更新的表現形式來設計介面中的圖示。扁平圖示發展史上有過很多次嘗試，比如微軟引領的Metro風格中的圖示設計和Google引領的扁平設計風格中的長投影風格圖示，但由於它們表現形式太過於抽象、缺乏情感的傳遞，並沒有獲得使用者的垂青。而我們現在介面設計中的圖示設計是一種“輕擬物”或“微扁平”的風格：在面積比較小的區域我們使用扁平圖示或線形圖示；在面積比較大的區域我們會使用加入漸變甚至輕質感的圖示。

如今我們介面中的圖示可謂非常豐富了，如果根據Material Design對圖示的分類，UI設計中的圖示可以分為帶有品牌屬性和特性的產品圖示、有功能指示作用的系統圖標兩種圖示，下面我們將針對於這兩種圖示進行研究。

產品圖示

產品圖示是我們在設計介面的時候體現品牌調性和特性的圖示。透過產品圖示，使用者就可以大概感知這個產品主要是做什麼的。比如微信的產品圖示是兩個對話氣泡，暗示了這是一款社交APP；再比如ofo的產品圖示是字母ofo的組合，同時也是一輛腳踏車，這暗示了這款產品是共享單車的APP；再比如KEEP的字母“K”的圖示，像極了一個在抬腿做運動的人，暗示了這是一個運動APP。

同時有些產品也依靠自身已經在使用者心中產生的品牌來直接設計產品圖示，比如淘寶APP的產品圖示就是一個“淘”字；支付寶的產品圖示就是一個“支”字。優秀的產品圖示都會在我們心中打上一個烙印，當我們看到這些圖形、配色時，腦中會立即想起來它們的功能和特點。產品圖示除了在手機螢幕中作為啟動圖示，也會出現在閃屏、情感化設計、“關於我們”介面等場景中，所以也要有一定的靈活性，在設計上要以簡單、大膽、友好的方式傳達產品的核心理念和意圖。產品圖示很類似在企業識別系統（VI）裡的logo，需要讓使用者一眼看到它就能夠與腦中的產品相關聯。所以設計一個優秀的產品圖示對於任何產品來說都是非常重要的。

風格

產品圖示有不同的風格，這些風格有可能很擬物，也有可能很扁平；有可能很抽象，也可能很具象。透過不同的設計風格可以更加標新立異，從而被使用者記住。讓使用者記住我們的圖示真是一件非常重要的事兒，要知道，每個手機都像是一把瑞士軍刀，它有無數個功能，而我們的產品只是萬種功能中的一個。使用者不可能記住手機裡所有的APP都是什麼，所以能在第一時間取得好感和記憶非常重要，產品圖示設計得好看並且容易被人記住就成了非常重要的任務。產品圖示的主要風格有以下幾種：

文字風格

文字是最直白的資訊，而且不容易被曲解。所以很多國內的產品都會使用文字來作為自己的產品圖示。比如：支付寶、淘寶、今日頭條、OFO、愛奇藝、知乎、網易新聞、毛豆新車等。這麼做也有它的問題，比如文字給人美的感受不如圖形，因為文字需要閱讀而不是觀察。並且移動端裝置都會在啟動圖示之下加上一行輔助文字，如果圖示上的文字和下面的輔助文字完全重合，會顯得像介紹了兩遍自己一樣。如果您決意要使用文字作為產品圖示，且是中文的話，那麼一定要記得文字最好為1-2個，並且不應該是產品的全稱。如果是英文的話，最好是首字母而不是產品全稱。當然不管是中文還是英文都需要選擇合適氣質的字型和並做一定的變化。

摺紙風格

摺紙的效果會讓人感覺很立體，所以很多產品也選擇了摺紙效果（比較扁平的手法）來設計產品圖示。

Calendar：這個產品的產品圖示是一個正在翻頁的日曆，非常簡潔明瞭。

Snapseed：除了扁平的設計之外，使用了長投影的設計風格。這個長投影也是扁平化的設計。

Netflix：Netflix的產品圖示是該產品的首字母N，這個N用了一些陰影來表示立體感。

繪聲繪影：同樣是用了長投影和摺紙效果，顯得非常清新。

填充圖示風格

產品圖示使用填充圖示風格是非常合適的。填充圖示風格具有簡潔和識別性強的特點。這種ICON的可擴充套件性更高，比如在一些特殊節日時可以用手繪、拼貼等形式來做輔助圖形。所以很多公司都鍾愛填充圖示風格。

Lucking：這是一個線上咖啡外賣的產品。它的APP圖示使用了一個鹿回頭的造型。這個鹿造型簡潔，非常有識別性。

Tinder：這是一個國外社交APP，透過一個火的填充圖示讓人第一時間記住這個產品。

youtube：這是國外著名影片APP，它的產品圖示同樣使用了填充圖示風格，是一個有電視機隱喻的圓角矩形，並且中心是一個播放鍵，簡明扼要地說明了這個產品的功能。

Twitter：國外著名社交APP，它的icon同樣使用了填充圖示風格，非常簡潔好記。

線性風格

由於目前設計流行趨勢，很多產品圖示都會採用扁平的設計風格。扁平除了填充的圖示之外，還有一種非常流行的形式——線性風格。線性風格一定要注意不要太細，因為手機和電腦設計環境顯示尺寸不同，如果我們做得太細，那麼在手機上看會非常尖銳，顯得不太好點選。

Airbnb：Airbnb的背景是一個微漸變，線性風格是一個曲線組成的A，同時也是一個小蜜蜂。

LOFTCam：為了凸顯文藝產品調性，使用了偏細的線條，同時使用了兩種主題色。

NextDay：同樣非常文藝的產品，使用了比較抽象的手法。這個ICON是一個牛奶，突出了這個產品必須今天看，否則就如牛奶一樣會過期。

VUE：這是一個攝影產品，同樣應用了黑色的微漸變，前面是非常前衛的45度長短不同的線。

微漸變風格

微漸變也是非常常見的表現手法。在擬物被扁平替代以後，我們會發現無法表達空間上的Z軸。所以用輕微的漸變表現圖片的深度非常流行。我認為微漸變可能是眾多圖示設計風格中最有競爭力的一種。

卡通風格

卡通風格的產品圖示會讓使用者更有好感，所以我們可以為產品設計一個可愛的卡通角色。好多決策者會認為卡通是一種低齡的審美，其實是錯誤的。卡通可以說是一種通吃的風格，比如騰訊就是以一個企鵝作為品牌形象開始拓展自己的版圖。而卡通本身有不同的風格，比如擬物類的卡通、扁平類的卡通等，也會給人不同的感受。所以如果我們的產品要使用卡通作為產品圖示，最好以目標使用者群的喜好作為標尺。

設計流程

設計產品圖示前，首先我們需要找一些和產品氣質相符的圖片製作情緒板。透過情緒板我們可以感受到產品的調性，然後我們從中提取一些形狀和色彩作為我們產品圖示的主要造型。這裡我舉我的產品每日名畫的例子，每日名畫是一個美術方面的APP，所以我找了一些和美術相關的圖片。

圖示設計是UI設計中非常重要的一環，因為除了文字和圖片的排版之外，在扁平時代我們能夠傳遞給使用者情緒和設計感的通道就是頁面中的各種圖形和圖示了，如果做不好圖示，使用者就將在使用介面時失去樂趣。所以，我建議每位UI設計師都需要在平時做大量的圖示練習。在不同的圖示風格中，學會使用各式各樣的武器。