編輯導(dǎo)讀：圖標(biāo)是用戶使用產(chǎn)品的第一印象，飽滿的圖標(biāo)會(huì)在視覺(jué)上給人舒適感。如何畫(huà)一個(gè)飽滿的圖標(biāo)呢？本文將從四個(gè)方面展開(kāi)分析，希望對(duì)你有幫助。

Hello~大家好，這次跟大家分享一個(gè)非常實(shí)用的設(shè)計(jì)方法：飽滿性應(yīng)用。

先說(shuō)下我是怎么認(rèn)識(shí)到圖標(biāo)的“飽滿性”的。

默畫(huà)人家icon時(shí)候發(fā)現(xiàn)的：為什么按我記憶中默畫(huà)出來(lái)的別家產(chǎn)品圖標(biāo)，系統(tǒng)圖標(biāo)都沒(méi)有原版好看？在比對(duì)自己的默畫(huà)與原作細(xì)節(jié)之后我發(fā)現(xiàn)一個(gè)非常重要，區(qū)別開(kāi)“嗯這個(gè)是個(gè)圖標(biāo)”和“哇這個(gè)圖標(biāo)像樣”之間的關(guān)鍵因素：讓你“哇”出來(lái)的圖標(biāo)，一般都比較飽滿。

一、啥是飽滿？

為啥大家喜歡飽滿？我們先來(lái)感性的認(rèn)識(shí)一下，啥是飽滿。

根據(jù)牛津詞典的解釋，飽滿有兩層意思，分別是充實(shí)；豐滿，「籽粒 飽滿」；以及充沛，旺盛。

這就很好理解了，飽滿，是果實(shí)成熟的象征。我們的祖先還在野外打食兒的時(shí)代，在環(huán)境復(fù)雜的叢林里，他們通過(guò)辨識(shí)果實(shí)飽滿的形狀將其跟周?chē)植?，纖細(xì)，扁平的樹(shù)枝樹(shù)葉區(qū)分開(kāi)，達(dá)到快速找到食物的目的。因此，飽滿意味著食物，這奠定了我們?nèi)搜蹖?duì)飽滿形態(tài)的偏好。

無(wú)論果實(shí)的顏色，我們都能通過(guò)對(duì)飽滿形態(tài)的識(shí)別快速將果實(shí)從周別環(huán)境中識(shí)別出來(lái) 。

相近的，提到飽滿的設(shè)計(jì)第一個(gè)闖入我腦海的就是保時(shí)捷。每次我經(jīng)過(guò)保時(shí)捷，哦不，有保時(shí)捷經(jīng)過(guò)我時(shí)，都被它那飽滿的形態(tài)，流暢的造型吸引

據(jù)說(shuō)保時(shí)捷的設(shè)計(jì)師考慮的不是線條而是曲面，我們看到的外輪廓形態(tài)是曲面轉(zhuǎn)折的二維投影。

那么是不是說(shuō)，只有圓形才算飽滿，難道以后我的icon都長(zhǎng)圓形才討喜了？

也不是那么回事，雖然iPhone做過(guò)通過(guò)給撥號(hào)鍵盤(pán)的數(shù)字加圓底兒的方式增加用戶好感度，但這也不是說(shuō)只有圓形才能讓人喜歡。

另外一個(gè)例子就是舞蹈中常說(shuō)的“框架”

May j lee 舞蹈《worth it》截圖

這是我在一個(gè)舞蹈視頻中隨機(jī)截下的幾張圖，已知中間的舞者最受歡迎，求她為啥受歡迎？

當(dāng)然顏值很重要，但是顏值之外呢？何況頭發(fā)已經(jīng)把臉擋住，為我們排除了影響因素。

在這兒我拋磚引玉的分析了下中間舞者的肢體動(dòng)作，可以看到區(qū)別于其他舞者的明顯特征，是她的手腳會(huì)同時(shí)達(dá)到動(dòng)作的最大值，在一群舞者中制造出了最為舒展的輪廓，也就是所謂的動(dòng)作飽滿，因此最為悅目。

May j lee 舞蹈《worth it》截圖畫(huà)線分析

善用框架這一點(diǎn)，我們也能從Material design 的 “Icon grid and keyline shapes”中略窺一二：

https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes

其中給出了能夠利用好框架的四個(gè)基本形態(tài)，能夠幫助設(shè)計(jì)師制作出統(tǒng)一，飽滿的icon系列。

二、飽滿性在當(dāng)下流行產(chǎn)品圖標(biāo)中的運(yùn)用

如果只是單純的羅列，這個(gè)圖標(biāo)哪里圓潤(rùn)，哪里飽滿，哪里框架搭的到位可能還不足以生動(dòng)說(shuō)明設(shè)計(jì)的亮點(diǎn)，在此分享一些流行APP的icon VS 鹿也默畫(huà)這些icon的草圖。

1. 微信讀書(shū)

在第一次默畫(huà)時(shí)，我記憶中的微信頭像是個(gè)橢圓，微信頭像的眼間距也沒(méi)有多想按感覺(jué)畫(huà)上了，畫(huà)完跟原設(shè)計(jì)對(duì)比時(shí)發(fā)現(xiàn)，橢圓其實(shí)很飽滿沒(méi)有那么扁，眼間距也相對(duì)近一些，頗有睿智的感覺(jué)。除了飽滿性，微信圖標(biāo)的設(shè)計(jì)也十分貼合業(yè)務(wù)：

1. 藍(lán)色區(qū)域取翻開(kāi)的書(shū)，微信的對(duì)話氣泡意像合二為一。
2. 大塊的淡藍(lán)色，寧?kù)o，沉穩(wěn)的色彩，既區(qū)別于市場(chǎng)其他圖標(biāo)的藍(lán)色，易于找到，又渲染了使用時(shí)的氣氛。
3. 大塊無(wú)內(nèi)容區(qū)域，讓人聯(lián)想到主體是里面的無(wú)限書(shū)籍。
4. 符合基本的圖形設(shè)計(jì)準(zhǔn)則，微信小頭偏圓，飽滿討喜;小頭在藍(lán)色區(qū)域右下方四分之一的區(qū)域內(nèi)居中;書(shū)的尖角延伸至?xí)亩种惶幍鹊取?/li>

2. Duolingo

Duolingo是一款學(xué)習(xí)語(yǔ)言的應(yīng)用，寓教于樂(lè)，是我非常喜歡的一個(gè)APP。

從第一次默畫(huà)到第四次默畫(huà)，可以清楚地看到飽滿性的運(yùn)用對(duì)作品討喜程度的提升。

對(duì)比01-04，可以看到雖然貓頭鷹眼睛面積相似，但04中眼睛長(zhǎng)寬比更接近，更飽滿。

喙的形態(tài)也是，雖然給人印象中面積不大，然而弧度非常大的上沿曲線，喙上的高光和圓角的處理都使喙的形態(tài)非常飽滿。

不可忽視的是眼睛和喙的位置關(guān)系，緊湊適當(dāng)，能夠撐起整個(gè)面部。眼睛上方羽毛的形狀也不是干癟的樣子，這些細(xì)節(jié)都幫助使icon看起來(lái)更豐滿，富有回味的樂(lè)趣。

除了以上，在默畫(huà)過(guò)程中還能體會(huì)到原作的幾點(diǎn)妙處：

1. 使用了博學(xué)的貓頭鷹這個(gè)形象。
2. 上喙的三角形，喙跟眼睛形成的三角形，以及頭頂羽毛的三角形相似相等，形成一種積極向上的動(dòng)勢(shì)。同時(shí)三角形也帶有穩(wěn)定感，象征著持之以恒，貼合業(yè)務(wù)語(yǔ)義。

3. 盒馬鮮生

優(yōu)點(diǎn)分析：

盒馬作為生鮮新零售市場(chǎng)的頭部玩家，其APP的視覺(jué)風(fēng)格很好的強(qiáng)化了業(yè)務(wù)調(diào)性。

1. icon使用線框風(fēng)格，且線框內(nèi)大面積留白，圖標(biāo)內(nèi)的元素用盡可能簡(jiǎn)潔的圓頭短線條表現(xiàn)，打造出輕盈的感覺(jué)，與“生鮮”的自身業(yè)務(wù)相符，配合淺藍(lán)色的高亮色，感覺(jué)干凈清新，讓人聯(lián)想到食材的品質(zhì)。
2. 圖標(biāo)內(nèi)元素大致遵循著三分法，即識(shí)別性元素占圖標(biāo)整體位置的三分之一左右。
3. 因?yàn)閳D標(biāo)本身是小東西，所以圖標(biāo)內(nèi)的線條盡可能的少，如待收貨小卡車(chē)圖標(biāo)的簡(jiǎn)潔。

在默畫(huà)這個(gè)盒馬小鎮(zhèn)的icon時(shí)，我更為真切地體會(huì)到了飽滿性原則：

印象中的這朵荷花是面積相等的三片花瓣形態(tài)左右對(duì)稱，見(jiàn)第一次默畫(huà)。

然而與原作對(duì)比時(shí)發(fā)現(xiàn)，這朵荷花的三片花瓣竟然如此飽滿，干脆貼著圓形的輪廓走線。

第二次默畫(huà)與第一次默畫(huà)相比，可以看出原作的一些妙處：

• 更飽滿 – 飽滿來(lái)自于對(duì)框架的利用
• 更富于層次/大小對(duì)比 – 這和盒馬的其他icon富于戲劇性的對(duì)比的手法一致
• 元素只有一個(gè)完全相同的花瓣，重復(fù)使用，創(chuàng)造出簡(jiǎn)潔又豐富的形態(tài)

三、如何運(yùn)用飽滿性去指導(dǎo)圖標(biāo)設(shè)計(jì)改版

hello U 是鹿也工作中的一個(gè)APP項(xiàng)目，現(xiàn)已在北美地區(qū)上線。

APP的主要內(nèi)容是Motorola原創(chuàng)內(nèi)容+用戶喜好內(nèi)容的新聞流。

初版上線時(shí)使用的 system icon 都是 Material design 的原生icon。

1. 任務(wù)分析

前面提到過(guò)，hello U里包含了motorola的原創(chuàng)內(nèi)容， 比如手機(jī)使用的tips，線下活動(dòng)新聞，產(chǎn)品優(yōu)惠等等；也包含用戶根據(jù)喜好訂閱的新聞內(nèi)容，如體育，八卦，科技等等。內(nèi)容的來(lái)源十分豐富，在icon改版設(shè)計(jì)中希望能夠體現(xiàn)出這種多樣性。

在用戶訪談中發(fā)現(xiàn)，我們的用戶認(rèn)為hello U的新聞來(lái)源更為可信，健康。事實(shí)也確實(shí)如此，hello U有一套不良內(nèi)容過(guò)濾機(jī)制，再加上Motorola品牌背書(shū)，頗得用戶信任，在設(shè)計(jì)中我們可以強(qiáng)化這種信任感。

原生的icon固然棒，但我們也希望通過(guò)一套獨(dú)有的icon建立獨(dú)特且友好的品牌形象。

任務(wù)拆解：

1. 在icon中使用多種形狀來(lái)暗喻內(nèi)容的多樣性。
2. 使用三角形去強(qiáng)化可信賴的感覺(jué)。
3. 設(shè)計(jì)飽滿討喜的icon，傳遞出友好的品牌信息。

2. 從紙面到軟件

Flinto 的設(shè)計(jì)師Peter Nowell在一篇文章中寫(xiě)到他對(duì)紙面設(shè)計(jì)和在軟件里設(shè)計(jì)的看法：

用筆在紙上畫(huà)，這是一個(gè)激發(fā)靈感，創(chuàng)造可能的階段，是加法。

倒入sketch/ai ，這是一個(gè)有關(guān)生產(chǎn)效率和設(shè)計(jì)精準(zhǔn)的階段，是減法。

以下是鹿也在重新設(shè)計(jì) hello U 系統(tǒng)icon時(shí)的紙面/軟件設(shè)計(jì)過(guò)程：草圖注重推演，倒入軟件后更關(guān)注圖形是否光滑，icon之間的形態(tài)是否一致。

我們把重新設(shè)計(jì)后的icon與原生icon進(jìn)行對(duì)比：

可以看到改版后的設(shè)計(jì)有了獨(dú)特風(fēng)格：

Home icon:

• 更圓潤(rùn)的圖標(biāo)增加了友好的感覺(jué)，同時(shí)提升了可識(shí)別性;
• 選中狀態(tài)使用半填充狀態(tài)，增加了圖標(biāo)的維度。

Game icon:

游戲機(jī)右側(cè)三個(gè)小按鍵呈三角形排列，并很好地與左側(cè)大按鍵平衡。

3. 設(shè)計(jì)驗(yàn)證回歸

改版前 vs 改版后

在只更新系統(tǒng)圖標(biāo)的情況下，app的視覺(jué)感受發(fā)生了如下變化：

結(jié)合自身業(yè)務(wù)特色得到了服務(wù)產(chǎn)品的獨(dú)特設(shè)計(jì)語(yǔ)言，有助于建立品牌形象，半填色的選中處理方式，在渲染友好氣氛的同時(shí)減弱系統(tǒng)工具圖標(biāo)的重量，讓用戶更專注于內(nèi)容本身。

在圖標(biāo)同樣大小情況下，使用了飽滿性原則的icon更加清晰，友好，可讀性強(qiáng)。

四、總結(jié)

只要稍加觀察，小到圖標(biāo)，大到汽車(chē)，我們身邊的設(shè)計(jì)不乏運(yùn)用飽滿性原則增加吸引力的例子。

我們?cè)谠O(shè)計(jì)時(shí)不妨問(wèn)自己幾個(gè)問(wèn)題：

某個(gè)元素是否“足夠”飽滿？如果更飽滿，能否讓設(shè)計(jì)更討喜？

元素間的位置關(guān)系構(gòu)成的框架是否與其中元素的飽滿度相符？

而更深層的，則是思考視覺(jué)設(shè)計(jì)該如何強(qiáng)化產(chǎn)品，結(jié)合業(yè)務(wù)場(chǎng)景為產(chǎn)品發(fā)展出獨(dú)具自身特色的設(shè)計(jì)語(yǔ)言。

共勉之。

本文由 @鹿也 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議