Ui設計 I APP圖標跟品牌logo一樣嗎？

App圖標是產品的一個視覺錨點，可以把它想成是整個品牌系統的一部分，不單需要好看

、與眾不同，而且還要傳達出APP的核心本質。

APP圖標不是logo。雖然兩者都有品牌相關的性質，但他們所受的限制不一樣。

logo是品牌可縮放的矢量圖形，常用在信紙抬頭、廣告等地方。

圖標一般是柵格化的圖形，為了在正方形畫布中美觀而定製設計的，需要滿足一系列具體的尺寸和具體的使用場景。兩者的設計方法、工具、任務和評價標準都是不同的。

實際上，APP圖標就是一系列不同尺寸的PNG文件，小至29 x 29像素，大至1024 x 1024像素，應用在不同操作系統的不同場景中，包括蘋果App Store、谷歌應用商店、APP的設置面板、搜索結果和主屏幕。

延展性

APP圖標最重要的一點是延展性。因為圖標必須在一個平台上多個地方（甚至在視網膜屏）以不同的尺寸出現，所以你的設計必須兼顧清晰度和獨特性。

試圖填滿畫布空間的、過於複雜的圖標往往成為可延展性差勁的犧牲品。

· 在1024 x1024像素的畫布中進行設計可能是個坑。切記確保你會在移動設備中測試看看不同場景下和不同尺寸的圖標的樣子

· 擁抱簡潔，聚焦單個對象，最好是一個獨特的形狀，或者在縮放時仍舊保留輪廓和質量的元素

· 確保在不同背景的襯托中，APP圖標看起來都不錯

辨識度

APP圖標就像一首歌，而一個優秀的圖標設計，能確保APP圖標在應用市場浩如煙海的APP中或者你的主屏幕中被用戶輕而易舉地辨認出來。

就像一首歌的歌詞需要引起聽眾的共鳴，APP圖標的形狀、顏色和理念都需要並在功能層面和情感層面產生聯想和連接。

· 平平無奇、過於複雜的圖標是辨識度的敵人。試下把細節一點點地拿掉，直到圖標的概念開始變差。你覺得這是否提高了辨識度？

· 試下幾種不同的設計，然後把他們一字排開，看看哪個最吸引你眼球

· 解構一下你最喜歡的APP圖標，想一想為什麼你會喜歡？它們用了什麼辦法來獨樹一幟？

連貫性

APP圖標與APP內的連貫性對於增強你的視覺描述非常重要

的確值得提醒大家，保持APP圖標互動體驗和APP本身的互動體驗的連貫性是重要的。好的APP圖標設計能夠把「這個APP是用來幹什麼」直接表達出來，而兩者的連貫性能夠帶來令用戶難忘的邂逅體驗。

· 在用戶腦海中塑造一種流暢、統一的形象，能夠提高產品的滿意度、留存率和病毒式傳播機會。

· 一種確保連貫性的辦法是讓APP界面和圖標的配色保持一致，並且使用類似的、一貫的設計語言、比如綠色的界面和綠色的APP圖標

· 另外一種加強APP與圖標之間聯繫的辦法是將APP功能相關的符號作為APP圖標，雖然這並不非時時都可行

獨特性

應用市場中「效率」這個分類完美地告訴了我們什麼叫沒有設計的獨特性

· 獨特性是設計中一個棘手的部分，因為它不單依賴於你的技能，而且也視乎別人在處理類似任務時，會作出什麼選擇。

· 看看人家在你所處的類別中是如何設計的，然後「劍走偏鋒」。而且要經常上應用市場研究一下。這個世界不需要再多一個打勾的圖標了。

· 如果你要用把單一的標註符號放在單色背景作為APP圖標，那麼要作出獨特性可是比較棘手的。這需要嘗試不同的顏色、組合，並且挑戰自我絞盡腦汁找到新奇、聰明的隱喻方式

· 顏色是經常被忽視但又極佳的概念定位工具

看了這麼多，當我們自己要設計一個app圖標的話，要怎麼進行呢？先跟大家聊聊「格式塔心理學」，這是我們形態，字體等省略的理論基礎。

? 格式塔心理學(gestalt psychology)，又叫完形心理學，是西方現代心理學的主要學派之一，誕生於德國，後來在美國得到進一步發展。該學派既反對美國構造主義心理學的元素主義，也反對行為主義心理學的刺激-反應公式，

? 主張研究直接經驗(即意識)和行為，

? 強調經驗和行為的整體性，

? 認為整體不等於並且大於部分之和，

? 主張以整體的動力結構觀來研究心理現象。

什麼意思呢？簡單說幾點

? 每一個人，包括兒童和未開化的人，都是依照組織律經驗到有意義的知覺場的。

? 相近（Proximity）。 距離相近的各部分趨於組成整體。

? 相似（Similarity）。 在某一方面相似的各部分趨於組成整體。

? 封閉（Closure）。 彼此相屬、構成封閉實體的各部分趨於組成整體。

? 簡單（Simplicity）。 具有對稱、規則、平滑的簡單圖形特徵的各部分趨於組成整體。

以上這些組織規律即是所謂的「完形法則」（Law of Organization），是心理學家在認知領域中的研究成果。格式塔在德語中就是「整體、形狀」的意思，因此，格式塔理論，也被稱作為「完形理論」。

舉個例子：

唯一兩個字給人一種很單純的感覺，因此，在設計的過程中我去除了一些比較繁瑣的筆畫結構，讓筆畫更簡單。中國有「一生二，二生三，三生萬物」之說，我們通過視覺自動補償缺失筆畫來達到這一效果，增加了文字內涵。

選擇不同的字體，設計出來的字體也是不一樣的。

我們可以在電腦上打出「唯一」兩個字，觀察一下筆畫結構，我們可以發現字體中以橫畫與豎畫為主。

我們將「唯」字中傾斜的兩筆擺正，使筆畫更統一。

用矩形工具將字體骨架搭建好，筆畫更為單純。

將筆畫加粗，並降低字體重心，使其在視覺上給人一種安定感。

一般來說，筆畫密集的地方要調細，筆畫疏的地方要加粗，上圖時進行調整後的筆畫，分別用數字和字母來代表對應的筆畫，仔細觀察你會發現其中的差異。接下來我們嘗試幾種方式來省略字體筆畫，第一個結構很亂，節奏掌握的不到位；第二個整體不錯，那一點起到了「暗示」的作用，讓視覺自動將筆畫補全；第三個沒有暗示的筆畫，看不出是「唯「字；第四個和第三個類似，看不出是圖形還是文字，筆畫省略太過頭。

利用輔助線對字體進行進一步規範，合理安排字體間距，使其更整體。

字體完成，規範後的字體比原來更耐看了。

通過對比，我們選擇了第二個進行優化。將筆畫粗細的分配重新調整，使筆畫在視覺上粗細一致,並且字體灰度更為平均。

一般來說，筆畫密集的地方要調細，筆畫疏的地方要加粗，上圖時進行調整後的筆畫，分別用數字和字母來代表對應的筆畫，仔細觀察你會發現其中的差異。

利用輔助線對字體進行進一步規範，合理安排字體間距，使其更整體。

字體完成，規範後的字體比原來更耐看了。

推薦閱讀：