編輯導讀：圖标是用戶使用産品的第一印象，飽滿的圖标會在視覺上給人舒适感。如何畫一個飽滿的圖标呢？本文将從四個方面展開分析，希望對你有幫助。

Hello~大家好，這次跟大家分享一個非常實用的設計方法：飽滿性應用。

先說下我是怎麼認識到圖标的“飽滿性”的。

默畫人家icon時候發現的：為什麼按我記憶中默畫出來的别家産品圖标，系統圖标都沒有原版好看？在比對自己的默畫與原作細節之後我發現一個非常重要，區别開“嗯這個是個圖标”和“哇這個圖标像樣”之間的關鍵因素：讓你“哇”出來的圖标，一般都比較飽滿。

一、啥是飽滿？

為啥大家喜歡飽滿？我們先來感性的認識一下，啥是飽滿。

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

這就很好理解了，飽滿，是果實成熟的象征。我們的祖先還在野外打食兒的時代，在環境複雜的叢林裡，他們通過辨識果實飽滿的形狀将其跟周圍粗糙，纖細，扁平的樹枝樹葉區分開，達到快速找到食物的目的。因此，飽滿意味着食物，這奠定了我們人眼對飽滿形态的偏好。

無論果實的顔色，我們都能通過對飽滿形态的識别快速将果實從周别環境中識别出來 。

相近的，提到飽滿的設計第一個闖入我腦海的就是保時捷。每次我經過保時捷，哦不，有保時捷經過我時，都被它那飽滿的形态，流暢的造型吸引

據說保時捷的設計師考慮的不是線條而是曲面，我們看到的外輪廓形态是曲面轉折的二維投影。

那麼是不是說，隻有圓形才算飽滿，難道以後我的icon都長圓形才讨喜了？

也不是那麼回事，雖然iPhone做過通過給撥号鍵盤的數字加圓底兒的方式增加用戶好感度，但這也不是說隻有圓形才能讓人喜歡。

另外一個例子就是舞蹈中常說的“框架”

May j lee 舞蹈《worth it》截圖

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

當然顔值很重要，但是顔值之外呢？何況頭發已經把臉擋住，為我們排除了影響因素。

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

May j lee 舞蹈《worth it》截圖畫線分析

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

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

其中給出了能夠利用好框架的四個基本形态，能夠幫助設計師制作出統一，飽滿的icon系列。

二、飽滿性在當下流行産品圖标中的運用

如果隻是單純的羅列，這個圖标哪裡圓潤，哪裡飽滿，哪裡框架搭的到位可能還不足以生動說明設計的亮點，在此分享一些流行APP的icon VS 鹿也默畫這些icon的草圖。

1. 微信讀書

在第一次默畫時，我記憶中的微信頭像是個橢圓，微信頭像的眼間距也沒有多想按感覺畫上了，畫完跟原設計對比時發現，橢圓其實很飽滿沒有那麼扁，眼間距也相對近一些，頗有睿智的感覺。除了飽滿性，微信圖标的設計也十分貼合業務：

1. 藍色區域取翻開的書，微信的對話氣泡意像合二為一。
2. 大塊的淡藍色，甯靜，沉穩的色彩，既區别于市場其他圖标的藍色，易于找到，又渲染了使用時的氣氛。
3. 大塊無内容區域，讓人聯想到主體是裡面的無限書籍。
4. 符合基本的圖形設計準則，微信小頭偏圓，飽滿讨喜;小頭在藍色區域右下方四分之一的區域内居中;書的尖角延伸至書的二分之一處等等。

2. Duolingo

Duolingo是一款學習語言的應用，寓教于樂，是我非常喜歡的一個APP。

從第一次默畫到第四次默畫，可以清楚地看到飽滿性的運用對作品讨喜程度的提升。

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

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

不可忽視的是眼睛和喙的位置關系，緊湊适當，能夠撐起整個面部。眼睛上方羽毛的形狀也不是幹癟的樣子，這些細節都幫助使icon看起來更豐滿，富有回味的樂趣。

除了以上，在默畫過程中還能體會到原作的幾點妙處：

1. 使用了博學的貓頭鷹這個形象。
2. 上喙的三角形，喙跟眼睛形成的三角形，以及頭頂羽毛的三角形相似相等，形成一種積極向上的動勢。同時三角形也帶有穩定感，象征着持之以恒，貼合業務語義。

3. 盒馬鮮生

優點分析：

盒馬作為生鮮新零售市場的頭部玩家，其APP的視覺風格很好的強化了業務調性。

1. icon使用線框風格，且線框内大面積留白，圖标内的元素用盡可能簡潔的圓頭短線條表現，打造出輕盈的感覺，與“生鮮”的自身業務相符，配合淺藍色的高亮色，感覺幹淨清新，讓人聯想到食材的品質。
2. 圖标内元素大緻遵循着三分法，即識别性元素占圖标整體位置的三分之一左右。
3. 因為圖标本身是小東西，所以圖标内的線條盡可能的少，如待收貨小卡車圖标的簡潔。

在默畫這個盒馬小鎮的icon時，我更為真切地體會到了飽滿性原則：

印象中的這朵荷花是面積相等的三片花瓣形态左右對稱，見第一次默畫。

然而與原作對比時發現，這朵荷花的三片花瓣竟然如此飽滿，幹脆貼着圓形的輪廓走線。

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

• 更飽滿 – 飽滿來自于對框架的利用
• 更富于層次/大小對比 – 這和盒馬的其他icon富于戲劇性的對比的手法一緻
• 元素隻有一個完全相同的花瓣，重複使用，創造出簡潔又豐富的形态

三、如何運用飽滿性去指導圖标設計改版

hello U 是鹿也工作中的一個APP項目，現已在北美地區上線。

APP的主要内容是Motorola原創内容 用戶喜好内容的新聞流。

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

1. 任務分析

前面提到過，hello U裡包含了motorola的原創内容， 比如手機使用的tips，線下活動新聞，産品優惠等等；也包含用戶根據喜好訂閱的新聞内容，如體育，八卦，科技等等。内容的來源十分豐富，在icon改版設計中希望能夠體現出這種多樣性。

在用戶訪談中發現，我們的用戶認為hello U的新聞來源更為可信，健康。事實也确實如此，hello U有一套不良内容過濾機制，再加上Motorola品牌背書，頗得用戶信任，在設計中我們可以強化這種信任感。

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

任務拆解：

1. 在icon中使用多種形狀來暗喻内容的多樣性。
2. 使用三角形去強化可信賴的感覺。
3. 設計飽滿讨喜的icon，傳遞出友好的品牌信息。

2. 從紙面到軟件

Flinto 的設計師Peter Nowell在一篇文章中寫到他對紙面設計和在軟件裡設計的看法：

用筆在紙上畫，這是一個激發靈感，創造可能的階段，是加法。

倒入sketch/ai ，這是一個有關生産效率和設計精準的階段，是減法。

以下是鹿也在重新設計 hello U 系統icon時的紙面/軟件設計過程：草圖注重推演，倒入軟件後更關注圖形是否光滑，icon之間的形态是否一緻。

我們把重新設計後的icon與原生icon進行對比：

可以看到改版後的設計有了獨特風格：

Home icon:

• 更圓潤的圖标增加了友好的感覺，同時提升了可識别性;
• 選中狀态使用半填充狀态，增加了圖标的維度。

Game icon:

遊戲機右側三個小按鍵呈三角形排列，并很好地與左側大按鍵平衡。

3. 設計驗證回歸

改版前 vs 改版後

在隻更新系統圖标的情況下，app的視覺感受發生了如下變化：

結合自身業務特色得到了服務産品的獨特設計語言，有助于建立品牌形象，半填色的選中處理方式，在渲染友好氣氛的同時減弱系統工具圖标的重量，讓用戶更專注于内容本身。

在圖标同樣大小情況下，使用了飽滿性原則的icon更加清晰，友好，可讀性強。

四、總結

隻要稍加觀察，小到圖标，大到汽車，我們身邊的設計不乏運用飽滿性原則增加吸引力的例子。

我們在設計時不妨問自己幾個問題：

某個元素是否“足夠”飽滿？如果更飽滿，能否讓設計更讨喜？

元素間的位置關系構成的框架是否與其中元素的飽滿度相符？

而更深層的，則是思考視覺設計該如何強化産品，結合業務場景為産品發展出獨具自身特色的設計語言。

共勉之。

本文由 @鹿也 原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部