騰訊設計師出品!寫給新人的圖標自檢手冊 - 優設網 - UISDC

騰訊設計師出品!寫給新人的圖標自檢手冊

2019/09/24 14844評論 9

:之前寫過的《騰訊設計師總結的圖標設計五維自檢法》云南体彩网受到了很多關注。轉眼已經過去一年有余,對于圖標也有了更加深刻的理解,所以今天繼續深挖這個話題,希望能夠打造一份全面的、可行的圖標自檢手冊,贊助在人人改版、面試等場景進行自檢優化。

識別

云南体彩网事物的價值在于它的用途是什么。

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

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

1. 含義識別

含義識別就是你的圖標能不克不及被理解。在做騰訊動漫閱讀頁的時候,工具欄頂部新增一個圖標是詳情頁入口,最開始做的效果如下:

發現有些人以為它是目錄頁,有些人則根本不知道是什么意思,這就屬于在含義識別層涌現了問題。

由于這個圖標沒有文案搭配使用,所以在含義識別上一定要重視,最后的方案就是采取一個詳字來進行設計,既滿足了識別,又滿足了統一的形式。

其實這種提取含義自己的文案來進行設計是常用的提高含義識別性的手法,尤其是在圖標自力涌現的時候。

2. 視覺識別

云南体彩网視覺識別與圖標含義無關,主要是視覺層面阻礙用戶識別的因素。目前我總結有以下幾點。

顏色因素

明度特別接近的顏色不克不及用在一起,好比檸檬黃和白色,如果白色圖標放在了檸檬黃的底色上,白色就很容易看不清楚,而且特別晃眼:

底色與線性圖標的搭配

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

云南体彩网所以在這樣的理論與數據的支撐下,去年我對部分圖標進行了如下改版:

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

復雜水平

云南体彩网在圖標設計前,我們一定要注意圖標的使用場景,有時候我們設計的圖標,做設計稿的時候沒什么問題,但是一放到真實場景中就會發現很多問題。

好比下面這組底部圖標:

云南体彩网做設計的時候并沒有什么問題,但最后唯一被挑戰的就是,當把圖標縮小放在底部標簽欄的時候會不會過于密集而導致復雜?而這種復雜就很有可能造成圖標的視覺識別。

云南体彩网再好比下面這組圖標也都存在相同的問題:

所以在圖標尺寸較小的時候,一定要担保圖標的簡潔,否則就會影響識別。

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

統一

云南体彩网在圖標改版的時候,我們最常說到的就是圖標的統一性問題,對于統一性我們可以從哪些方面入手,我整理了以下 6 點,我們依次來看。

1. 圓角巨細

云南体彩网圓角巨細的統一,雖然經常掛在嘴邊,但有時候還是容易被忽略,好比下面這組圖標:

云南体彩网并沒有完成圓角的統一性,好比免費圖標的圓角明顯小于其他兩個,后面被人提到,才糾正了這個細節:

2. 描邊粗細

在做一組同等巨細的圖標時,并不容易發生描邊粗細紛歧致的情況,好比我們很少會把其中三個做成 4px,而其中一個做成 2px:

這種毛病,我覺得優秀的你,應該不會犯。但是有些時候在做一套擁有分歧尺寸的圖標時,我們必須要根據圖標巨細來調劑描邊粗細,使整體看起來和諧統一。

3. 視覺巨細

眾所周知,物理尺寸同等的方形要比圓形大,所以我們要在乎的是視覺感官上的巨細統一,而不是物理尺寸,所以在做輔助線規范的時候會有圓形、方向、橫向矩形、縱向矩形:

目的就是能夠更加靈活地調劑圖標巨細,使其在視覺重量上堅持統一。

4. 描邊尾部細節

云南体彩网如果你的圖標是有描邊且斷線的,一定要注意這兩個細節,一個是描邊尾部的方與圓:

云南体彩网另一個就是斷線的距離,一定要做到統一,這個很容易被忽略:

5. 角度

云南体彩网角度,也是增加圖標統一感的因素之一,最常見的角度統一方式就是依照一定的倍數來制定規范,好比 30 度的倍數:

再舉一個其他方面的例子,在做下面這組圖標的時候,最初沒有考慮斷線的規律:

云南体彩网所以看久了會覺得有些凌亂,于是我將斷線處定為右下角 45 度,如遇到圓角拐角處,可挪動靠近拐角處進行斷線:

云南体彩网這樣我們就會看到所有的圖標斷線位置都大致涌現在右下角的地方,最終效果如下:

很洪水平上提高了圖標的統一性,而且在延展執行的時候節省了大量的思考時間(思考在哪里斷)。

云南体彩网但是對于斷線的位置是否一定要規定其涌現的角度,我覺得紛歧定,也可以從其他角度考慮,但最終的目的還是讓整體統一和諧,且延展性高。

6. 正負形比例

正負空間比例很容被忽略,以前我也很少講過,不過我覺得很實用。如下圖,很明顯白色所占比例分歧,導致圖標一致性就會有問題:

云南体彩网當比例調劑后,統一性就會加強很多:

這個因素既簡單又實用,人人一定要熟練掌握。

以上就是關于統一緯度的所有總結,做到統一雖然不會讓圖標加分太多,但是做不到統一,可能就還不算及格,所以一定要重視起來。

耐看

能夠讓圖標耐看的因素有很多,以我目前的認知,主要有以下兩點。

1. 豐滿

云南体彩网很多時候我們做出來的圖標不足精致,其中一個很大的原因就是不足豐滿。

云南体彩网如何判斷圖標是否豐滿呢?我常用的衡量方法就是在圖標上面加一個矩形,看圖標的正形的面積是否還可以增加。

例如下圖,藍色是正形,紅色是負形:

云南体彩网很明顯藍色的正形面積是可以增加的,例如:

這就是在增加圖標的豐滿度,我也是依照這個思路來改疆土標豐滿度的。

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

云南体彩网于是我對圖標的結構進行了調劑,盡可能地減少綠色部分,最后達到了下圖這樣的效果:

云南体彩网最后提醒人人,對于圖標的豐滿度,還需要結合整套圖標的視覺效果來進行調試,雖然上面這個方法可以解決大部分圖標的豐滿問題,但還是要具體場景具體分析。

2. 有變更的透氣感

很多時候我們會發現自己做的圖標有些死板、發悶,其實就是透氣感沒做好。

什么是透氣?我們經常會說頁面不足透氣,沒有呼吸感,無非就是留白做得欠好,圖標也是一樣的,好比下面這組面性圖形:

看起來就很悶,如果我們給它加一扇窗,也就是加入白色之后:

云南体彩网這樣整體就會透氣很多,但是這種透氣做的并不是很好,圖標外形和里面融入的白色形狀都有些雷同,這樣就會導致圖標看起來沒有變更的細節。

所以我們需要在透氣的基礎上再融入一些變更,好比下面的例子,就體現了這種有變更的透氣感,豈論是正形還是負形都有很大的變更:

對于耐看這一塊,我覺得應該會有很多知識點,不過目前我能總結出來的只有這兩點,后面會繼續挖掘。

風格

云南体彩网風格包含兩方面內容,一個是屬性表達,一個是形式表達。

1. 屬性表達

云南体彩网屬性表達就是圖標的骨骼基調,好比圓角巨細、線條粗細等,可以根據行業屬于及用戶人群來進行判斷。好比商務行業和動漫行業就是完全分歧的屬性,商務行業可以偏方正嚴肅一些,而動漫行業可以偏圓潤一些(當然也一直對,只要有因有果即可);再好比男性和女性,老人和小孩都有分歧的屬性表達。

云南体彩网好比同一種黑白線稿的形式表達,分歧的圓角巨細就會給人分歧的感覺:

云南体彩网左側就會偏嚴肅一些,右側就會偏可愛一些。

所以千萬不要小看前期的屬性表達,它可以贊助你確定大的骨骼基調。

2. 形式表達

云南体彩网確定了基礎的屬性之后,就是填充形式的時候了:

至于形式的種類實在是太多了,但一定要有理有據,符合產品整體想表達的感覺。

云南体彩网我想講的重點是我們如何提取抽象的風格,然后用在我們自己的設計上,好比波洞的這組圖標:

風格就是在下面這組圖標的基礎上的二次原創,好比加入紋理、IP形象等等:

云南体彩网設計師在這中間需要提取風格的關鍵要素,然后結合產品需求來進行創作設計。

下面再來一個實例,好比看下面這套谷歌的圖標:

我們就可以在它的風格上提取出以下要素:

組合:就是每個圖標會由至少兩個元素組成。

融白:有一些白色的融入,使整體更加透氣。

有了這兩個要素之后,就可以根據具體需求來進行創作設計了,下面兩組圖標就是這么來的:

云南体彩网這就是對已有風格的一種提取及二次加工,也是我常用的一種圖標設計方法。

品牌

隨著設計越來越同質化,品牌感逐漸被人人所重視,對于品牌這一塊,以前寫過很多相關文章,這里再簡單歸類一下。

1. 顏色

顏色是最容易體現品牌感的元素,所以圖標上經常會結合品牌色來進行設計:

2. 圖形

圖形可以取自 logo、吉祥物等等,好比首頁圖標就經常使用到 logo 自己:

再好比 MONO 的標簽欄圖標,設計非常勇敢,提取 logo 上面的 4 個字母──M、O、N、O后,直接將其作為圖標,如下圖:

但是這種方法還是有很大的風險,究竟每個字母與功能自己的含義沒什么聯系,如果不是非常個性化的 app,謹慎使用。

3. 形象

如果你的產品有品牌形象,那一定要用起來,好比騰訊動漫的黑子,就可以進行結合使用:

4. 特性

特性就是提取一些氣質或者特征,例如斷線、圓潤、尖銳等等,屬于比較抽象的元素。

去年在優化圖標的時候,發現騰訊動漫 logo 上字體筆畫比較粗,整體給人一種厚重豐滿的感覺:

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

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

云南体彩网以上就是個人從識別、統一、耐看、風格、品牌,5 個維度來打造的自檢框架,相比較上一篇會更加的全面體系。對于圖標設計,一定要歷久的積累,耐心的研究,我也還在賡續研究的路上,借此機會整理分享,希望人人互相學習進步。

歡迎關注作者的微信公眾號:「菜心設計鋪」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/icon-self-test-manual

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里