UI設計中的布爾運算由淺及深，深入解析，圖標瞬間高大上！

UI設計棧 2018-03-26 19:24:14

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、圖標的定義

1. 什么是圖標

圖標是具有明確指代含義的計算機圖形。從功能分類角度分為啟動圖標、應用圖標、功能圖標。

2. 什么是功能圖標

功能圖標是具有指代意義且具有功能標識的圖形，它不僅是一種圖形，更是一種標識，它具有高度濃縮并快捷傳達信息、便于記憶的特性。

二、圖標的種類

• 具象圖標：保持事物本來固有形態進行優化設計。如汽車，輪船，飛機，車票……
• 抽象圖標：不是一個具體的事物，更趨于概念化。如個人中心，空間，模式，最近等。

三、圖標的風格

1. 面性圖標

面性圖標是由一根封閉的線造成了面，面性圖標同樣具有大小、形狀、色彩、肌理等造型元素。直面圖標具有穩重、剛毅的男性化特征；曲面具有動態、柔和的女性化特征。

不透明度圖標

不透明度圖標是通過調節圖標的部分面性結構來增加層次感，從配色角度屬于同色系。

△ NO-921

光影圖標

三大面五大調，通過調節面的反光和陰影來增加面性圖標的紋理。在扁平時代的今天保留著微擬物風。

多彩色圖標

多彩色給人很酷炫的感覺，從明度角度還是要提取深淺的顏色來代表圖標的黑白灰。

△ Kyle Anthony Miller

2. 線性圖標

線性圖標是通過粗細一致的線條繪制，高度概括出來的圖標，既能讓人賞心悅目，又給用戶帶來創造和應用的樂趣。

圓角圖標

圓角圖標給人以親和力，也有柔軟，軟弱的一面。在圖標設計越來越精美的今天，圓角圖標的應用行業已經越來越廣泛。比如女性，母嬰，兒童，旅游……

△ Stephen Andrew Murrill

直角圖標

直角圖標給人以銳利，堅強，果斷，不拖泥帶水的一面。讓人眼前一亮的是魅族系統Flyme6 里面的圖標它就是用的直角，給人明快干凈的感覺。真正更好的詮釋它內在含義的非京東金融里的圖標了 ，投資理財的時候需要人們果斷作出判斷。理財有風險，投資需謹慎。直角的感覺讓人當機立斷，不拖泥帶水，快買快出。如果用圓角就感覺柔一點，感覺做事優柔寡斷。所以一下子在金融領域被做成了標桿式的功能圖標。

斷點圖標

斷點圖標是點線面演化的一種產物。在最開始UI興起的時候，設計師們不滿足于單線條的功能圖標，通過點線面增加形式感。最早新浪體育運用到這一風格，算是還是很不錯的一種風格。很遺憾只留在了我的記憶力，網上并沒有找到之前的設計。

△ Catalin Mihut

高光式圖標

高光式圖標是傳統繪畫的產物，我們在傳統繪畫的時候往往最后一筆都是添加高光，起到畫龍點睛的效果。高光式的功能圖標采用里細外粗的規律，和斷點式功能圖標差不多一個年代的產物。在不斷扁平不斷簡潔的今天，也不會感覺那最后一筆也是多余的。

△ Udisk6353

不透明度圖標

不透明度圖標是調節圖標的部分結構的不透明度來增加圖標的層次。色彩上面跟雙色圖標是一樣的，只不過從配色角度屬于同色系的范疇。

△ Laura Reen

雙色圖標

雙色圖標在實際應用中非常廣泛，也是很百搭的那種。一種可以有彩色跟無彩色結合，有彩色的顏色可以是企業色，可以是代表行業或者產品的顏色跟無彩色黑色相結合。一種是主體色跟點綴色組合而成的雙色，但使用時要考慮到當前界面中的配色不宜過多，多了就容易花。

△ stay

線面結合圖標

線面結合圖標也是一種很出彩的風格，線是高度概括的圖標，這時候面更多的是充當裝飾點綴的作用。面的表現方式也有很多種，可以是單色的，漸變色的，也可以像 MBE風格那樣提取主體結構形成的面，也可以提取圖標里面有閉合路徑所形成的面。這種風格應用也非常廣泛。

△ Ted Kulakevich

△ Prakhar Neel Sharma

結構圖標

結構圖標算比較有爭議性的圖標，結構圖標是我們學繪畫的時候老師要我們起形，要開始繪畫結構，對基礎的三大面五大調有很好的理解。現在結構圖標正好相反，比如對于一個具像圖標，我們要分析出它的每一筆每一畫，看清每一個結構，然后用固定的形式來表現出來。固定的形式可以像優酷圖標的相交結構點，可以像上海瑪娜花園一筆一個顏色，等等。

一筆畫圖標

一筆畫圖標是難度系數比較高的一種風格，也是我非常喜歡的一種風格，當才開始流行斷點圖標的時候，錘子設計師歐陽念念就提出了一筆畫圖標的概念，當時也是有爭議的一種圖標。當網易云音樂也出了這種圖標后就更具有說服力。一般也很難駕馭，也基本都能做出來，但是視覺上看上去很舒服還是要有深厚的功底。

logo類圖標

logo 類圖標跟一筆畫算是同等級別難度的，需要圖標足夠精致到可以直接拿來當應用圖標，乃至于 logo。這種在app中屈指可數。最為經典的就當屬網易云音樂的 logo 了，其實它也屬于一筆畫圖標，同時又用做了 logo，它的含金量可想而知。

情感化圖標

情感化圖標是提取人的五官跟圖標相結合具有擬人化的圖標，這種擬人化的場景模仿人在真實場景的應用。QQ 的底部圖標通過五官方向大小移動變化很好的表現出當前場景。QQ 開了先河，相信后續會有很多情感化圖標出現，會有它的一席之地。

3. 如何轉換線性圖標與面性圖標？

線性的閉合路徑的圖形變面性圖標，閉合路徑里面的線條反白，重要的關聯結構線反白，讓面性圖標透氣；線性的不閉合路徑的圖形變面性圖標，應適當的增加線的粗度來達到視覺上的平衡。

△ Jory Raphael

△ Sebo

4. 如何去創造新的圖標風格

繪畫結構＋點線面＋色彩，繪畫結構可以清晰的分析出事物的主體結構，勾勒出主體輪廓，對創造新的圖標風格有很大幫助。繪畫結構選的角度是人很熟知的角度，比如正面，盡量不要選擇帶有透視角度進行設計。點線面是設計的基礎，通過從點線面角度去構思會獲得更多的靈感。色彩方面可以是企業色、行業色、主題色、點綴色等等。（圖design by Ted-Kulakevich and Graphéine ）

四、圖標的特性

1. 統一性

大小的統一

在網頁設計中圖標的主流尺寸有16×16、24×24、32×3、48×48、 64×64、96×96、128×128、256×256、512×512。在移動端iOS規范中在2倍圖下最適合人點擊的區域大小為48*48px，iOS功能圖標其他尺寸為48加或減4的倍數；安卓android 功能圖標其他尺寸為48加或減8的倍數。為什么 iOS 是4的倍數，一個數除以2倍圖在乘以3倍圖要是偶數最小的數為4；為什么安卓android 是8的倍數，安卓開發中最小的單位是1dp,1dp=2px，同時也要滿足一個數除以2倍圖在乘以3倍圖要是偶數最小的數為4，所以安卓要是8的倍數。在很多帶有色塊的圖標，不僅要保證色塊44*44pt的大小統一，也要保證里面色塊里面的功能圖標的大小統一。

風格的統一

風格上面已經歸納的很全了，直角圖標和圓角圖標基礎上可以添加一個其他風格，如雙色風格；但是剩余的其他風格最好就不要兩兩相加，不然就會給用戶感覺很容易亂，也不夠簡潔，主次不明。

規范的統一

視覺的規范

為什么我們再同樣的大小區域去繪制正方形、圓形、三角形，雖然符合了大小統一的特性，但是從視覺上還是不能看上去很均衡？這就需要我們規范化的去繪制圖標，安卓android 規范里給出了圖標的繪制方法。

圓角的規范

2. 簡潔性

簡潔性不單單體驗在圖標的簡潔，還要體現在從創意到實際落地的簡潔。在使用軟件 ai 或者 sketch 的時候繪制基礎圖形不要出現小數點和基數，多用偶數。

3. 層次明確

圖標具有可點擊性和標識性。可點擊性就會有點擊前、點擊時、點擊后三種狀態，主流底部標簽欄會在點擊前使用線性圖標，點擊時和點擊后使用面性圖標；也有使用顏色來區分。

4. 延展性

圖標的延展性之前在圖標的風格也講到，好的圖標可以直接當應用圖標或者 logo 來使用。同時好的圖標還可以通過點線面動效變化做下拉加載動畫。

五、如何學會合理的設計功能圖標？

1. 頭腦風暴

頭腦風暴看似一個不知道怎么解釋的詞，簡單的說就是多動腦子，越用越活。頭腦風暴不單單是這里用到，是所有設計師做設計之前必備工作。頭腦風暴完你會覺得你的設計思路會很寬，然后就是要合理的分析每個的可行度，完成的工作量，自己當前設計的水平是否可以有效完成。其實很多設計師能有效的搜索到自己想要的東西也算是頭腦風暴的一種，雖然你不會想出很多點子但還是很明確的知道自己想要什么，一定注意不要直接拿來主義，還是要通過平時的練習掌握更多的風格。為以后頭腦風暴想出的很多點子能很好的實踐出來。比如以旅游為主體進行頭腦風暴，這個就能想到很多很多。

2. 搜集資料

搜集資料的時候要很好的提取關鍵詞，直接從 iconutopia、iconfont、iconfinder、iconmonstr 搜索獲取靈感。具象的事物可以看看該事物好的品牌公司的產品，品牌公司的工業設計相對較好，對后面提取元素也會有很大的幫助。也可以通過提取好的關鍵詞，翻譯成英文，再到國外的網站追波、be搜上一搜看看。搜索到的素材和元素一定要再設計，不能拿來直接用。

3. 提取元素

提取元素又歸結到繪畫結構中去了，繪畫好的看到具象事物，心里默默打開一個燈，三大面五大調，光影關系都有了。不是很理解的還是多練習吧。具象圖標就是提取主要輪廓線，保留可要可不要的元素，到最后的時候做統一刪減；抽象圖標有時候確實沒有一點的思路的時候可以在就 iconutopia、iconfont、iconfinder、iconmonstr 找找，找到了合適的還要進行 redesign。有想法后選擇一種圖標風格這樣的繪制效率會很快。

4. 規范化

上面元素提取好后，需要開始選擇一種圖標風格進行繪制。開始繪制的時候不要過于追求圖標的風格，還是要從圖標本身出發快速的繪制好。等全部繪制好了突然想換一種圖標風格也是很快的，水到渠成。可能剛開始很難在規范化的框框里直接就提取元素開始繪制，那就只能先繪制要你想要創意的元素圖標，全部畫好后在統一的規范里面再繪制一遍。規劃化的目的就是讓圖標統一，任何兩個圖標拿出來從視覺大小、風格都是一個統一的整體。

5. 加減法

一套圖標繪制好了之后還是在放在一起看一下整理的感覺，最后通過加減法適當的修修補補，對于視覺上看上去過于繁瑣的圖標要保留大輪廓的同時減少結構達到視覺平衡；對于確實很簡單但有沒辦法添加任何的東西元素來增加的為它做加法的時候是否可以放大，來增加它的視覺豐滿感。

圖標是界面設計中最重要的元素之一，也是我們 UI設計師必備的技能，日常工作中我們經常會接到含有圖標設計、優化的需求。但到底什么樣的圖標才算是優秀的？也許很多設計師并沒有太完整的評判體系，只是憑感覺，這樣就會造成輸出效果不穩定、耗時太長等不良的后果。

所以借著這次機會我梳理了一套圖標設計自檢的評判體系，一共五個維度，大綱如下：

• 識別
• 性格
• 品牌
• 飽滿
• 細節

一、識別

評判事物的價值在于它的用途是什么。

圖標的用途是幫助用戶理解信息，所以「識別性」就是圖標最重要、最底層的價值，如果你設計一個圖標，用戶看不懂，即使視覺再美觀，也是無根之木，沒有任何價值可言。

識別性可以分為兩個方面，一是含義識別，二是視覺識別。

先說含義識別，簡單來說就是你的圖標能不能被理解，當然并不是設計師自己能理解就可以了，而是需要用戶來決定。這里和大家分享一個我判斷圖標是否易識別的方法——內部用戶調研法，說白了就是隨機問一些團隊內部人員，最好多問幾種崗位，這樣得來的結果更加可靠，案例如下。

我在改版「話題」這個圖標的時候，想到了微博的「#」，于是把「#」和氣泡框結合到了一起，如下圖：

這時我找來10個內部人員進行測試，只有3個能看懂圖標的意思（這3個人都是平時經常玩微博的），在這樣的數據之下，不用猶豫，這個方案一定是不可取的。

在進行調研時，最少要保證80%的人能看懂，才證明你的方案是可行的。

再來說視覺識別，顧名思義這一點已經與圖標含義無關，而是視覺層面的問題，例如大小、底色等等阻礙用戶識別的因素。

這里引入一個國外的測試結果，是我在一位前輩的文章中看到的，測驗包括一組四種樣式的圖標：白底黑色實心圖標，白底黑色空心圖標，黑底白色實心圖標，黑底白色空心圖標，經過10天的時間，1260名參與者總共完成了超過25000次圖標的認知測試。將得出的數據分成四組進行雙向方差分析，在相同的統計條件下，選擇黑底白色空心圖標要比其他三種組合的時間慢0.17秒，也就是說這種圖標的信息表達能力會少弱，如下圖：

所以在這樣的理論與數據的支撐下，我對部分圖標進行了如下改版：

有底色的圖標全部從線性改成面性，如改不成面性（例如時鐘）需要適當加粗描邊，目的就是提高視覺識別性。

切記，識別性是圖標最重要的價值，尤其是在沒有文字說明的情況下，一定不要讓用戶產生困惑，不然你就是在消耗用戶體驗，而不是給用戶體驗賦能！

二、性格

試想如果一個人沒有性格，那這個人就是沒有靈魂的，圖標也一樣，沒有性格即沒有靈魂。

那如何打造屬于自己的性格呢，我們需要從用戶和品牌出發，例如騰訊動漫的用戶都是動漫、cosplay愛好者，給人一種又萌又可愛的感覺，所以我們需要讓圖標盡量圓潤一些：

像上圖2號圖標一樣，增大圓角，使圖標看起來更加圓潤可愛。

基于這樣的用戶人群，我們還將原有一些單色圖標，改成下面這樣的彩色圖標：

目的就是讓圖標可愛活潑的性格更加明顯。

三、品牌

品牌性是我們經常提到的緯度，常用的提取品牌的基因也有很多，顏色、圖形、吉祥物等等，這里舉兩個例子，一個是具象的品牌基因——吉祥物：

我們有自己的品牌吉祥物——黑子，所以在圖標設計時可以將其運用起來，如下圖就是結合黑子形象設計出來的「逗幣」圖標：

再舉個比較抽象的例子，從 logo 當中提取品牌基因。

由于 logo 的字體筆畫比較粗，整體給人一種厚重飽滿的感覺：

因此我們可以在品牌logo 中提取「粗胖飽滿」的品牌基因，在這樣的背景下就不用再糾結圖標使用2px描邊還是3px的描邊了：

我們可以很確定的使用3px描邊，因為它既符合品牌基因又符合用戶性格（肥胖圓潤顯得可愛）。

四、飽滿

很多時候我們做出來的圖標不夠精致，其中一個很大的原因就是不夠飽滿。

如何判斷圖標是否飽滿呢？我常用的衡量方法就是在圖標上面加一個矩形，看圖標的正形的面積是否還可以增加。

例如下圖，藍色是正形，紅色是負形：

很明顯藍色的正形面積是可以增加的，例如：

這就是在增加圖標的飽滿度，我也是按照這個思路來改版圖標飽滿度的。

舉個真實的例子，我們原版的續看圖標是上下結構，而上面部分的圖形太窄，導致左上角、右上角的空白太多（也就是綠色部分太多），沒有撐滿矩形，如下圖：

于是我對圖標的結構進行了調整，盡可能的減少綠色部分，最后達到了下圖這樣的效果：

最后提醒大家，對于圖標的飽滿度，還需要結合整套圖標的視覺效果來進行調試，雖然上面這個方法可以解決大部分圖標的飽滿問題，但還是要具體場景具體分析，切記，我們的目標是讓整套圖標看起來和諧、統一、精致！

五、細節

細節也包含很多方面，例如：

1. 角度是否一致或者遵循某種規律

我們定制的角度規范是30度的倍數，這樣可以很大程度的提高圖標統一性。

2. 描邊末端的細節處理

下圖就是一個錯誤的例子，一個描邊末端是直角，一個又是圓角：

我們在處理這樣的細節時，一定要保證統一性。

3. 像素對齊問題

大家會覺得只要把一個尺寸的圖標做好像素對齊，導出其他倍數的圖標就是ok的，其實這樣的想法是不對的，因為在導出0.5或1.5倍數關系的時候，像素很容易再次產生不對齊的情況。

舉個例子，我們做圖標是以2倍圖為基礎，然后統一導出3倍圖，那這時候3倍圖就是2倍圖的1.5倍，導出的時候就發生了下面這樣的情況：

雖然2倍圖是像素對齊的，但3倍圖卻沒有對齊，如果設計師沒有仔細檢查切圖，就會發生線上圖標發虛的情況，所以我們在輸出切圖時，一定要仔細核查，發現錯誤及時調整，免得造成不良影響。

除了以上這些，還有視覺大小、圓角、描邊粗細是否統一的細節，當然，這些都比較容易理解，就不一一舉例說明了，大家在做圖標設計的時候一定要多多注意。

總結

本次梳理的五緯自檢法可以用在圖標設計的自我檢查、改版優化等多個方面，或許它并不全面，但一定具有參考價值，希望能給大家帶來啟發和靈感，我們也會更加努力，爭取做出更好的作品和教程與在設計道路上的你們分享交流。

介紹一下如何在PS里更好的體現圖標的質感，個人覺得，這個教程對于UI學習者來說是非常受用的，特別是UI設計的新手學習者。好了，喜歡的朋友記得給我好評！

如今的用戶界面中，圖標絕對是不可或缺的元素。雖然絕大多數的圖標都很小，甚至不被人注意到，但是它們幫助設計和用戶解決了許多問題。圖標是可用性和導航的關鍵，用戶能夠感知到圖標的功用，但是只有設計師才會明白，想要讓圖標簡約、可用還富有表現力，要耗費多少時間和精力。

喬布斯曾經說過：“細節至關重要，花費時間仔細打磨是值得的。”圖標是現如今UI界面中可用性和導航體系的核心組件，所以，今天的文章，我們來仔細歸納一下常見的圖標類型和它們在UI中的使用。

對于設計師而言，移動端設備屏幕上的每一寸空間都是寶貴的資源。為了在小屏幕上做更多的事情，設計師在設計導航系統的時候，通常需要花費更多的時間來打磨。漢堡圖標在過去幾年當中，是最常見的一種設計策略，導航和選項被隱藏在這個小小的圖標之后，但是實際上，雖然大眾已經習慣了它的存在，但是它并不是最佳的導航設計方案。

在今天的文章當中，我們會探討為什么漢堡菜單這樣的隱藏式導航影響用戶體驗，以及可用性更強的替代方案。

為何漢堡圖標會破壞用戶體驗

在移動端設備上，我們看到的可見式導航其實比漢堡圖標這樣的隱藏式導航更多，前者大概是后者的2.5倍。

圖標設計如何具有品牌性？這可能是設計師工作中經常會遇到的問題。

但很多新人也許并不了解什么是品牌性，更不知道如何將品牌性融入到圖標當中，不過沒關系，看了這篇文章你就不會那么困惑了！

我們今天來聊的是一個真實的工作任務，做任務的整個過程分為以下幾個階段：

1.收到任務

2.找參考

3.根據參考執行

4.感覺沒有品牌性

5.根據品牌基因法提取基因

6.再次執行

7.棒棒噠

1. 收到任務

我們每天都可能收到不同的設計任務，作為設計師，順利的完成這些任務是我們最基本的能力，那我們今天要講的任務是什么呢？

嘿嘿！一套天氣圖標。

認真的構思中…..

2. 找參考

算了，還是先看看別人都是怎么做的吧！

我找了一堆參考，隨機選幾個展示下，如下圖（圖片采集于花瓣網）：