交互設計中圖標設計歸納總結匯報人：某某某匯報時間：2025.X.X當我們決定要去AppStore、GooglePlay、小米商城這樣的應用市場下載某個APP應用時，首先映入眼簾的便是ICON，即應用圖標。一個APP應用圖標設計的美感與吸引力，決定了用戶對產品的第一映像。一個有吸引力的APP應用圖標，可以讓用戶愿意去了解你，下載你的APP。在交互的設計體系中，圖標ICON是最重要的組成部分之一，是任何交互界面中都不可或缺的視覺元素。了解圖標相關的概念，以及正確繪制的方法，是入門UI設計的必備條件。01圖標，是一種圖形化的標識，它有廣義和狹義兩種概念，廣義指的是所有現實中有明確指向含義的圖形符號，狹義主要指在計算機設備界面中的圖形符號，有非常大的覆蓋范圍。02對于UI設計師而言，我們主要針對的就是狹義的概念，它是UI界面視覺組成的關鍵元素之一。03在當下最常見的扁平化設計風格中，界面的實際視覺組成只有4種元素，圖片、文字、幾何圖形、圖標。為什么圖標有這么重要的地位第一就是，文字雖然也是一種圖形符號，但相對于圖標而言，文字實在太復雜，在識別效率上有先天的劣勢！再者，不同的語言，文字的長度也不同，如果換成阿拉伯語或者俄羅斯語，或許一行還裝不下所有文字。圖標可以以一種更高效的方式，將我們想要傳遞的信息進行濃縮，不僅易于識別，也能讓界面更簡潔，利于排版，比如下方案例。第二點，就是關于視覺的觀賞性上。有些頁面中，如果把圖標去掉了，也絲毫不會影響我們的操作效率，以及對內容的理解。但沒有圖標，缺少這些點綴，我們就會覺得這個頁面看起來總感覺太枯燥了，最好的例子就是應用的設置頁了一、工具圖標（功能性圖標）。這是我們在日常討論中提及最頻繁的圖標類型，即應用內有明確功能、提示含義的標識。風格1：線性風格線性圖標，即圖形是通過線條的描邊輪廓勾勒出來的。多數人對它樣式認識的第一反應應該是使用純色的閉合輪廓，比如上圖案例，線性圖標的創作空間看似不多，但實際上有非常多的調整空間。風格2：面性風格面性圖標，即使用對內容區域進行色彩填充的圖標樣式。同樣，在這類圖標中，也不是只能應用純色的方式進行填充，還有非常多的視覺表現類型。風格3：混合風格設計圖標類型的時候，也不一定非線性和面性不可，有一些熱衷創造和嘗試的設計師，還創作出了混合型的圖標，既有線性描邊的輪廓，又有色彩填充的區域。1.2裝飾圖標和工具圖標比起來，裝飾圖標的視覺性作用更多。對于一些比較復雜的應用來說，過分的簡約并不能彌補信息過多的信噪問題，我們要通過豐富視覺體驗的方法來增加內容的觀賞性，減少一屏內顯示內容的數量。國內的界面設計環境，會根據運營的設計需求進行特殊化處理，尤其在電商領域，首屏的圖標都會改成首頁風格的樣式，增加活動氛圍。扁平風格扁平風格的裝飾圖標，通常可以理解成是用扁平插畫的方式畫出來的圖標，除了繼承扁平的純色填充特性以外，也相對于普通圖標有更豐富的細節與趣味性。擬物風格擬物風格的圖標現在出現的頻率越來越高，集中在大型的運營活動中，通常這些活動會通過擬物的方式將頭部設計成有故事性的場景，所以自然頂部的相關圖標使用擬物的設計形式會更貼合。2.5D風格2.5D是一種偏卡通、像素畫風格的扁平設計類型，在一些非必要的設計環境中，使用2.5D會比較容易搭配主流的界面設計風格，有更強的趣味性和層次感。炫彩漸變這種圖標，就是通過一系列非常激進的漸變和撞色實現，通常還會使用彩色的陰影。使用這樣圖標的區域，通常都會呈現出一副五彩斑斕的景象，只有在內容非常豐富且用戶偏向年輕化的產品中可以使用，是一種非常難駕馭的設計風格。實物貼圖最后一種，就是采用了真實攝影物體的設計風格。雖然它不屬于完全依靠我們創作和繪制出來的，但想想還是放進來合適。因為這種圖標的出現頻率非常高，有必要再后面掌握它的做法。三、啟動圖標最后，就要說說啟動圖標了！啟動圖標的設計比前面兩種類型的圖標說起來更難，因為它實際上就是把“LOGO嵌套進系統圖標模版”的圖標。除了必要的規范掌握以外，啟動圖標的主體物設計就是LOGO的設計，已經超出了圖標繪制本身的知識點。所以，在后面我會針對這個問題講解一些比較套路易懂的設計方案供新手學習，這里我們先來了解一下它有哪幾種設計形式。文字形式適用了文字作為圖標主體物的類型，通常是這類應用本身的品牌LOGO就使用了文字，所以這里就把字體照搬過來。圖標形式對于一些偏工具，適合用簡單圖形傳達應用功能的啟動圖標，就會采取使用工具圖標的方式設計。圖形形式圖形形式看起來和圖標形式很接近，但實際上完全不屬于同一類型，之所以它不是圖標，是因為這類圖標的主體圖形是一種經過高度抽象化的標識，傳達的是品牌性，而不是圖形的含義。插畫形式對于一些比較純粹的應用，如讀本、漫畫、幼兒類應用，就熱衷于采用卡通形象作為圖標的主體進行設計。擬物形式雖然現在扁平化的設計占據主導地位，但依舊有很多應用的啟動圖標是通過擬物的方式設計的。因為對于這些應用來說，擬物設計所傳遞的信息往往更直觀和準確。3.1表意的準確性圖標的主要作用之一就是作為文字的替代品，具有明確的寓意。比如看見一個放大鏡，我們會當成那是搜索，看見鑰匙或者鎖，我們就會理解成是密碼，比如下面這些圖標，每一個指代的功能和寓意都是非常直白、清晰的。表達的寓意清晰，是工具圖標最基本的要求，否則它只會傳遞錯誤的信息，造成用戶的困惑。在常見的圖標類型里，如通知、設置、用戶、分享之類的圖標，對于任何手機用戶來說都沒有認知和選擇壓力。但表意準確麻煩的地方在于，一些非常規的寓意，極難用圖標表現出來，這才是我們使用工具圖標的首要麻煩。比如下方這些圖標，如果我不加上文字信息，大家能理解它們是什么嗎？那么，我們再把文字信息補充進去，是不是就會覺得圖形挺貼合內容的。除了知道每個工具圖標都要表意準確這樣“正確的廢話”以后，我們該看看如何通過合適的創意將圖標樣式確定出來。一般抽象的圖標，難點在于寓意信息是非實體的，所以我們很難直接構建對圖形樣式的聯想，所以首先我們得想辦法將抽象的內容“實體化”。也就是說，我們可以先把這個詞寫到紙上，然后把和這個抽象信息相關的所有實體物寫下來。可以挑選出某個合適的實物，以它作為原型開始繪制。如果對這些挑選出來的實物要以什么圖形表現還是沒概念，那就可以借助網上的圖標素材網站，比如iconfont、iconfinder等，在搜索框中輸入這些詞語，通過別人的設計收獲靈感。3.2圖標的一致性第二個規范，叫圖標的一致性。即一個或一套圖標中，應該保持一致的細節。首先看看下面的反面案例。在上面的案例中，不同圖標間有很大的割裂感，完全不像處于同一套設計體系之下，這就是缺乏一致性的表現。這也是新手在設計一整套圖標最大的難點，要讓所有圖標保持視覺細節上的一致。下面對工具圖標要保持視覺一致性有哪些細節進行詳細的說明。類型一致前面說過，工具圖標有線性的、填充的類型，在正常的情況中，同一套圖標應該在類型中保持相同，如果使用了線性圖標那么后續就不要設計填充以及混合的類型。風格一致每一套圖標都有自己的設計風格，不同風格在細節中都有不同的表現，需要讓這些風格特征保持高度的統一，看看下面這些案例。第一，為圖標添加缺口的設計風格，我們要保證這個缺口的大小是一致的，并且每一個圖標中有且只有一個缺口，而不是靠感覺隨意添加。第二，在設計一套偏圓潤可愛的設計風格中，外輪廓使用了較大的圓角，那么我們盡可能保證圓角的大小是一致的，而不是有的用4pt，有的用2pt或者直接使用直角。第三，采用了填充色偏移的設計風格中，首先要保證填充色的一致，并且偏移的距離和方向也要保持固定的規律，不能隨喜好任意制定。透視一致透視關系是在平面中對物體空間性質的表現方式，當我們應用了透視時，物體就有了一定的“立體感”。粗細一致在圖標中我們會應用到矩形線段或是描邊，我們要盡可能保證它們的粗細是一致的。比如，在線性的設計中，路徑的描邊尺寸要保持一致，不能這個圖標用2pt，那個圖標用1pt。在填充圖標中，我們會在一個矩形或是圓形中增加矩形的鏤空，比如下圖的幾個圖標，在這種情況下也要保證它們的粗細是一致的，而不是各不相同。大小一致大小一致，就是讓圖標的視覺大小保持一致，而不是它們字面上的長寬屬性保持一致。APPICON設計風格分類：中文字體英文、數字、特殊符號圖形色彩版式游戲作業：以線性圖標的設計方式繪制6個主題統一的功能性圖標例如：天氣APP（晴天、下雨、多云、陰、下雪、暴雨、閃電等）閱讀APP（書、書架、筆記、書城、排行、書單、聽書等）英語APP（單詞、句子、短語、文章、自習、背誦、閱讀等）記