文章結構預覽：

什么是金剛區？

金剛區的意義和功能是什么？

金剛區圖標的常見設計類型和表現手法？

金剛區圖標該從哪幾個緯度出發去做設計？

金剛區圖標設計時有哪些注意要點？

一、什么是金剛區？

金剛區是一個頁面中頭部的重要位置、是頁面的核心功能區域，表現形式為多行排列的宮格區圖標。

比如：淘寶app首頁banner（廣告橫幅）下的兩行圖標、餓了么外賣app首頁banner下的兩行圖標、支付寶app首頁頭部的4個圖標就是金剛區。

二、金剛區的意義和功能是什么？

金剛區的位置通常是位于搜索框、banner之下，而且金剛區區域通常會占據屏幕22%~25%的大小且位于屏幕頭部，從用戶閱讀屏幕內容的視覺流來說位置至關重要，而且是聚合各類子板塊的入口，為各個子版塊分發內容引導流量。

所以其重要性不言而喻，產品要讓用戶通過不同類型展示方式的組件找到相應的功能，而圖標具備精煉高度概括內容的特性，而且圖標的識別度大于文字，所以金剛區的設計通常以圖標+說明文字為主。

我們都知道，app中的圖標也是構成整個品牌設計語言的重要一部分，圖標的展示形態，采用的配色，圖標的設計層次、設計手法、設計細節都在影響著整個品牌設計語言的走向。所以在設計金剛區圖標的時候，也是值得花很多心思在上面的。

三、金剛區圖標的常見設計類型和表現手法？

金剛區常見的設計類型有3種：

1.面性圖標

2.實拍性圖標

3.線性圖標

下面我們通過案例來逐一分析他們的設計手法和設計亮點。

1. 淘寶APP：面性圖標

因為淘寶的整個業務線很多，涵蓋的方向也很多，所以金剛區的部分是1排5個圖標，共2排也就是10個圖標。一行5個圖標也是當下行業內的圖標數量極限了，再多的話勢必會顯得很擁擠，而且圖標的識別性會打折扣。

淘寶8.0.0

淘寶 APP 金剛區組成：圓形底板+業務說明+圖形+板塊名稱

縱觀多種案例，我們會發現一個問題，為什么電商類APP金剛區圖標多為圓形呢？

我們來一起思考一下，從圓和方的直觀直覺感受來講，圓給人一種親近柔和的感覺，而正方形有4個棱角會讓人感覺很生硬顯得有距離感。

在設計上來講，方形的圖標還需要考慮到四個棱角部分的設計不然會顯得很空，圓形會顯得更加聚焦內容，如下圖。而且如果一排5個寬和高相同的圓形和方形圖標，方形圖標面積大所以會顯得擁擠一些，所以金剛區圖標圓形居多一些。

顏色：底板是從左到右0度的漸變，左邊的顏色和右邊的顏色屬于同一色系。在色相、明度、飽和度上等數值上都有差別，但不會讓漸變的兩個顏色相差的特別明顯。視覺感官上是左邊的顏色比右邊的顏色“亮”一些。

造型結構：圖標是上下結構。上方是圖標的業務說明描述，告知用戶這個板塊是做什么的，除了第一個圖標外，其余的圖標業務說明均是2個字，用最簡短的詞去描述、高度概括子版塊內容。因為淘寶的受眾用戶人群眾多，年齡跨度也較大，金剛區的識別性放在絕對的第一位，所以會在圖標上寫上業務說明。

圖形：圖標的下方是和子版塊相關的圖形，不過因為淘寶的業務線眾多，風格也不一，所以沒有將下方的業務圖形做成完全統一的風格。但在設計風格上都是扁平化的圖標，沒有添加陰影高光等立體效果。

2. 京東APP：面性圖標

京東7.1.6

京東APP金剛區組成：超橢圓底板+業務字設計／圖形+板塊名稱

超橢圓形狀介于圓形和方形之間，而相比于圓角矩形又顯得很靈活生動飽滿。

顏色：底板采用的是從左上到右下的斜45度漸變，左邊的顏色和右邊的顏色屬于同一色系，漸變柔和變化不是很明顯。

造型結構：在金剛區圖標的設計上，京東也是將圖標的識別性放在了首位，大部分圖標使用板塊的業務說明文字來進行設計，再疊加一個弧形的過渡，讓圖標內的圖形看起來像是從一個空間延展到了另一個空間，增加了設計感不失趣味性。

圖形：業務相關圖形或字體設計，且均添加了投影，營造空間感增加設計細節。有一點需要注意的是，比如：“京東超市”這個圖標的右上角是加了促銷標簽的，利用用戶喜歡貪便宜的心里，也是吸引用戶點擊的一種手段。但是此處不建議做字體的傾斜，試想一下，金剛區有8個圖標，每個圖標上都有一個字，每一個字都向右傾斜4～8度，那么你會感覺整個金剛區都是“傾斜”的。

3. 餓了么APP

餓了么8.3.1

餓了么APP金剛區組成：軸測圖立體圖標+板塊名稱

顏色：金剛區圖標的顏色總體給人鮮艷明亮的感覺，來表達食物的新鮮美味。就像我們生活中吃的食物生鮮蔬菜一樣，如果顏色看起來臟臟的，怪怪的，一點都不給人新鮮的感覺，那么你肯定也不放心去吃他。

造型結構：餓了么采用的是2.5D軸測圖的形式做的立體圖標。與常規圖標不同，這樣的設計手法會展示圖標3個不同的面，細節豐富設計感強，能在同類競品中脫穎而出。而且這種設計手法所畫出來的圖標更加貼近真實食物的形態。

外賣美食類APP的金剛區圖標應該盡量以美觀度為主，其次是識別度。

為什么這樣說呢？

我們試想一個場景，當你打開外賣類APP的時候通常是肚子餓了，有了“吃”的這一層身體上的欲望，那么在進不同的板塊選美食之前我們首先就是在選金剛區圖標，除非用戶在進APP之前腦海中已經決定好了要吃什么，進來直接下單。否則，金剛區圖標的設計影響著對用戶的吸引程度。

你的第一印象看到了整體的圖標都非常精致美觀，你的潛意識也會覺得里面的東西應該會很好吃，反之亦然。

圖形：因為2.5D設計手法畫出來的圖標是3個面，所以細節相比正常的圖標來說會多，那么就沒必要在給每個圖標添加一樣的底板了，那樣做會顯得圖標很復雜，不夠精簡。而且也會降低圖標的識別度。

4. 盒馬APP：實拍性圖標

盒馬4.0.0

盒馬鮮生APP金剛區組成：實物實拍+統一圓形底板+板塊名稱

顏色：底板的配色依然是業務色，比如“海鮮水產”的底板色是海藍。但有一點要注意，底板色要與實物實拍圖有區別，不能看起來像是融為一體的感覺。而且為了營造新鮮感顏色應明亮一些。

造型結構：實拍實物擺放角度為從左上向右下的斜45度。此處采用了“破格”的設計手法，讓實拍物品一小部分“沖”出了圓形底板，空間感很強。

圖形：金剛區圖標大多采用兩件物品進行擺拍，而在兩件物品的組合上選的是大小對比大的物品，這樣更能營造層次感，空間感。

類似的實拍性金剛區圖標還有小米有品、網易考拉。

小米有品2.5.1

實拍性實物做圖標的好處是可以帶來真實，可靠的感覺，而且還可以將運營方需要主推的商品換成圖標為板塊帶來流量。

5. 京東金融-支付、支付寶：線性圖標

京東金融4.9.10

支付寶10.1.35

兩個APP都是錢包和支付有關，錢包級別的應用要給用戶帶來安全、可靠的感覺，所以在金剛區的視覺上的設計盡量克制、簡潔。線性圖標在此應用最適合不過了。

四、金剛區圖標應該從哪幾個緯度去設計？

1. 辨識度、識別性

圖標在辨識度上要優于文字。

還有一層意思是在圖標的設計上要與競品有一些差異度，要讓自身產品在市場中有“存在感”和“存在率”，存在感即我們通過對自身產品app的整體視覺語言設計從而讓用戶使用我們的產品和竟品時有一個明確的記憶區分，比如：請你在腦海中回憶“咸魚”app的顏色和“京東”app的顏色。

如果你用過兩款產品，那么你可以輕易的回憶起咸魚的品牌色是黃色，京東的品牌色是紅色。再回到金剛區，你只看到下面這組圖標就能知道這是什么app，對么？

2. 強調性

金剛區圖標通常是在app的首屏出現，位置位于搜索框、banner之下，而且金剛區圖標通常會占據屏幕五分之或者四分之一的大小，還起著為各個子版塊分發引流的重要作用，所以在設計的重量上應該比金剛區圖標下方的內容區：UGC、瓷片區等內容要重一些。

3. 識意性

有了前兩步的鋪墊后，金剛區圖標還需要有可識意性。通俗來講，能讓用戶做到看其形明其意，這一點很重要，即使畫的再好看，用戶看到圖標后需要仔細思考圖標的含義到底是什么的時候這個圖標就是失敗的（特殊情況除外），因為圖標的作用就是為了在文字之上輔助用戶識別，人腦對圖片的敏感度要大于文字。

圖標要表意，高度概括說明文字，如果實在沒有合適的圖案那么可以像京東一樣，將單字拿出來，去做一些字體基礎上的設計。

飛豬9.0.5

4. 趣味性

相當于考試時候的附加題了，不做不扣分，做了加分。如上圖的飛豬APP趣味性的出現讓整體的金剛區圖標更加的生動靈活，多漸變多色彩的應用會給你帶來一種旅途出游很愉快的感覺。不死板便是增加了與用戶的親密感，有助于在用戶首次使用產品是消除陌生帶來的距離感，增加用戶使用產品時的安全感。

五、金剛區圖標設計時有那些要點？

貝殼1.8.0

原支付寶口碑

金剛區圖標常用做法：45°漸變底板+白色面性圖標+微投影

網上流傳一種做法，圖標底板之上的圖形區域范圍是底板乘以黃金比例0.618的結果。但縱觀市面上的案例，如此做法的少之又少，而且設計本來也沒有特定的數值，具體情況要具體應用，而且習慣性操作后容易讓自己的思維陷入死角。

底板上圖形設計區域約占底板區域的50%~65%之間，45°漸變可以讓圖標看上去更加有設計感，漸變的兩色要在同一色系，漸變不要過于明顯。整體金剛區圖標底板色的飽和度和明度要盡量做成視覺統一。白色面性圖標會使圖標整體看上去更加簡約，直接。

有些稍復雜的圖形在做白色面性圖標時可以做一些漸變在上面，或者做一些透明度的變化，如上圖貝殼APP和之前的支付寶口碑APP。在圖形上加一些底板色同色系的投影上去，營造一些層次感空間感，但切記不要讓投影過于明顯和顏色臟。

當然，并非一定要做統一圓形底板的面性圖標。不帶底板的異形圖標，線性圖標都可以，具體還得看業務需求，如果不需要金剛區視覺效果很重的話可以考慮線性圖標，更加的輕量、簡潔、逼格高。