5000+的干貨，幫你系統掌握金剛區圖標設計

分析總結 UI 設計的細分模塊才能更加深入到每一個細分設計中，在 App 的各模塊中，金剛區算是比較重要的存在之一。是頁面的核心功能區域，聚合了業務線的功能入口，設計的發揮影響了曝光度的強弱，是設計師需要重點深入的模塊。

今天黑馬哥將和大家一起探討一下關于金剛區模塊設計的千奇百態，從布局的樣式、圖標設計的風格、不局限于圖形表達的形式等方向為大家進行梳理，希望可以讓你對金剛區模塊的設計有更深入的理解。

分享目錄

• 關于金剛區模塊
• 金剛區圖標設計類型
• 設計指南和注意事項
• 線上優秀案例分析
• 總結

關于金剛區模塊

金剛區模塊是整個界面布局的核心功能區域，通常布局在頁面頂部 Banner 之下，金剛區的功能模塊不會固定化，會根據業務目標的變更進行靈活調整。這種可變化組合的靈活性就像百變金剛一樣，所以大家才把這個功能區域稱之為金剛區。

由于金剛區所屬位置為核心區域，相當于流量站，可以聚焦業務功能為其帶來更好的曝光度。服務于整個產品架構，一方面可以為業務進行導流，給產品中的各業務版塊進行引流；另一方面也是一種功能選擇入口，為用戶提供不同功能的選擇和切換，享受功能帶來的服務。這也是金剛區在設計中需要重點對待的原因，也是迭代更新相對比較頻繁的因素。

金剛區通常以單行或者多行進行宮格布局，以“圖標+文字”的形式進行展示。一般為 1~3 行圖標展示，超過 3 行的比較少。單行的圖標展示數量最佳選擇在 4~5 個，如果超過 5 個的一般會采用左右滑動的交互形式。在后續也會繼續為大家梳理設計的類型，在設計上面的一些技巧和案例分析。

金剛區圖標設計類型

金剛區模塊的設計類型通常是以“圖標+文字”的形式，而圖標的設計方向不局限于圖形化的表達，從視覺表現層分析會有圖形化圖標設計、商品實物展示、人物形象引用、混合搭配、文字化結合、節日/主題設計等形式。格式上來歸類會有靜態格式和動態格式，微動效的表達通常是局部圖標動效，接下來我們詳細的梳理一下。

1. 圖形化圖標設計

金剛區圖標設計以圖形化的形式表達是最為通用的，圖標設計的風格有線性圖標、面性圖標、線面結合、微質感等。而面性圖標有直接進行圖形設計的形式，也有以基礎圖形（圓形、圓角矩形等）作為外輪廓加內部圖標組成。

這種結合業務或者功能模塊的關鍵詞進行圖標創作，是金剛區最為簡單的設計切入口，也是考驗設計師圖標設計能力的關鍵。

2. 商品實物展示

除了圖形化的圖標設計以外，以主營業務為代表的商品實物照片作為圖標運用也是一個方向，單獨展示或配有背景底版展示均可。商品實物展示可以帶來真實感，給人一種可靠的感覺，表現形式簡單粗暴，就是缺少一定的設計感，商品展示的視覺比重把控有一定的難度。

商品實物圖展示容易給用戶錯誤的信息傳達，會誤以為就是配圖的商品，但是功能模塊的傳播并不一定指的是特定的某一個商品。如果經常更換商品圖片也很難形成用戶記憶，需要依靠文案信息的傳遞強化記憶，對于用戶來說認知壓力增大。

3. 人物形象引用

除了進行圖標設計以外，也有一些產品會用到明星頭像、游戲角色、公眾人物形象等圖片引用為圖標進行展示，通常為配合特定的運營活動推廣出現。比如某部影片上線、某款游戲上線、特別事件紀念活動等。

4. 混合搭配

在對接業務需求的時候，單一的形式無法滿足差異化的業務需求，金剛區模塊的設計會混合搭配。混合搭配雖然可以滿足業務需求，但是混合搭配容易在風格上互相排斥，感官體驗難以掌控。

通常為了視覺效果盡量統一，會選擇基礎圖形作為統一的外輪廓，使其與其它圖標設計風格相對搭配。

5. 文字化結合

為了配合特定主題活動的推廣，金剛區圖標設計也會結合文字化的形式表達，突出活動主題。這種形式主題突出，活動針對性強，可以最大化的提高主題活動的曝光度。

當然，這種形式只適合在活動期間使用，匹配功能模塊的辨識度較低。

6. 節日/主題設計

在一些節日主題活動中，為了增強節日氛圍，除了將節日主題文字化結合設計以外，也可以將節日關聯性的元素結合到圖標設計中。可以在特定的節日或者主題活動中使設計細節更豐富，不過時效性較低，過于依賴文案說明，適合活動期間使用。

7. 圖標微動效

金剛區圖標微動效運用越發頻繁，相較于靜態圖標來說更能引起用戶的關注。適用于需要重點強調的功能模塊，可以在金剛區模塊中形成差異。

圖標設計的類型千奇百態，豐富的樣式不斷刷新著我們的設計認知，這里只是列舉了方向性的延展。為大家梳理出大綱方向，期待發現更多不同的設計解決方案。

設計指南和注意事項

了解金剛區模塊的設計方向之后，我們在進行實戰設計的時候也需要避免一些因素，更好的還原設計需求和增加用戶感官體驗。

1. 圖標數量

金剛區模塊以“圖標+文字”的形式展示，圖標單行 4~5 個為最佳，低于 4 個顯得松散，高于 5 個通常需要結合左右滑動交互。一般都控制在 3 行以內，超過的相對比較少，版面占用太大，用戶選擇性過于密集。

2. 圖標設計尺寸

金剛區圖標設計尺寸沒有硬性規定，通過經驗規范下來，如果是沒有外輪廓作為背景的情況下，圖標尺寸的范圍一般在 44~98px 左右（@2x）；加上外輪廓的情況下一般在 80~98px 左右（@2x）。尺寸的范圍僅為參考，根據圖標造型的繁簡度不同都會形成差異，最終要以預覽效果為準。

3. 外輪廓內圖形尺寸

如果金剛區圖標使用了帶有外輪廓作為背景來進行設計，內部圖形的尺寸需要結合外輪廓尺寸來確定。太大會顯得很滿，給人壓抑感；太小會使得負空間過多，顯得很空。沒有強制的尺寸要求，通常以經驗來判斷，內部圖形的尺寸一般控制在外輪廓大小的 1/2 左右，極小值設置在 2/5 偏上，極大值設置在 3/5 偏下，增減誤差一般不會太大。數字關系僅為參考，具體還要以實際預覽效果為準，圖標的繁簡程度都可能會干擾到數據的變化。

4. 圖標均分原則

金剛區圖標單行布局一般都是 4 個或者以上，在進行布局的時候我們會根據一些均分原則來進行，這樣更能使得設計規范。

通常有三種均分方式：第一種是寬度等分原則，根據布局圖標數量將界面寬度等分，每一個圖標居中布局在等分內部；第二種是邊距固定原則，用相同樣式設置好左右邊距，然后根據圖標數量自然均分；第三種是固定間距原則，一般適合帶有左右滑動的情況，固定好圖標之間的間距不變，根據圖標數量自然顯示或者遮擋。

5. 圖標配色方向

金剛區圖標顏色的選擇方向除了直接采用品牌色以外，也會使用品牌色作為點綴，通常出現在簡單的線性圖標和面性圖標中。如果是一些微質感的圖標設計，配色會比較多樣化一些，除了采用同色系變化以外，也可以在鄰近色和類似色中選擇，這些都是容易把控的方向。如果要采用多種顏色且色相角度差異較大的，需要把控好色彩之間的數字關聯性，這個在以后的配色課程可以和大家深入探索。

6. 圖標設計的差異化

在同質化的設計中，差異化的設計才能拉開與競品的關系，增加產品的辨識度。除了在本身的圖標造型和色彩關系上進行差異以外，結合自身的品牌基因也是一個重點探索的方向。在外輪廓上面也有一些產品在不斷改變，從圓形輪廓到圓角矩形，再到超橢圓的細微變化，也有采用橢圓輪廓和特殊圖形輪廓，或者結合品牌的特征關系進行延展等。從大的造型特征到細節的探索改變，設計師都在不斷地尋求新的差異化設計切入口。

7. 圖標樣式如何選擇

金剛區圖標設計的主要方向是線性圖標、面性圖標和微質感等，在選擇的時候要結合自己的實際需求來判斷。在屬性層面主要可以劃分為功能型金剛區和業務型金剛區，一種是以產品核心功能為主，為用戶提供各種服務；另一種是以業務導流為主，提高業務模塊的曝光度。

功能型金剛區：由于以產品提供的功能服務為主，用戶的自主性較強。通常運用較多的是線性風格的圖標設計，在視覺呈現上更加理智沉穩，模塊布局也更加統一整體。比如銀行類產品、支付寶、工具型產品等，不過這只是相對而言，也有采用面性圖標的設計，不過樣式通常不會過于繁瑣，以簡約設計為主。

業務型金剛區：由于是以業務導流為主，需要視覺沖擊力比較強的設計風格，而面性圖標和微質感圖標相對比較適合，能夠更快的吸引用戶的關注度而完成業務導流的作用。為了提高用戶關注度，也會采用圖標動效進行結合，增加主推業務的曝光度。

8. 推薦設計

為了提高金剛區某個業務模塊或者功能服務，會在金剛區圖標中進行推薦設計，以強化突出特定功能模塊。

通常有兩種主要的解決方向，一種是添加標簽設計，一般出現在圖標的右上角居多，靜態和動態的均可，起到強化突出的目的。第二種就是圖標動效的運用，給需要突出的圖標添加動效來吸引用戶視線，進而達到推薦的目的。不過動效的形式不適合推薦數過多，會形成相互干擾，反而達不到推薦的目的。

雖然只是產品設計中的一個細分模塊，我們在設計的時候依然需要深入的探索，增加每一個細分模塊的設計質量，帶給用戶更好使用體驗。這里只是列舉了一些主要的設計注意事項，希望拋磚引玉，帶給大家一些金剛區的設計思路。

線上優秀案例分析

當我們對金剛區圖標設計的知識點有了一定掌握之后，在設計的過程中也不會毫無方向。接下來為了強化大家的記憶，為大家總結了一些優秀的設計案例，站在優秀的基礎上才能思考得更深入，創作出更優秀的設計方案。

1. 品牌色的強化和點綴

為了突出品牌感，在金剛區圖標設計上面采用品牌色強化是最常見的處理形式。直接將品牌色作為圖標配色無論是線性圖標還是面性圖標都適合，不過相對來說在面性圖標上面比較多一點。線性圖標通常偏向于功能型產品運用較多，而品牌色多作為點綴來使用，不僅可以強化品牌感，也能豐富線性圖標樣式。

2. 商品實物替換圖標設計

除了圖形設計層面的表現以外，一些產品會選擇將商品實物照片作為金剛區的圖標來呈現。比如果蔬類、圖書類、服裝類等，就將商品實物圖片摳圖處理，直接作為圖標展示，也有結合外輪廓背景呈現，真實感的體現帶給用戶場景代入感。

3. 微質感圖標增強層次感

在一些以業務導流為主的產品中，業務型金剛區圖標設計以強視覺感為主。微質感的圖標設計運用最為普及，可以讓圖標的層次感更強，帶來的視覺吸引力也比較明顯，更能引起用戶的關注。目前微質感的體現主要有兩個方向，無輪廓背景的形式和有輪廓背景的形式，無輪廓背景主要是通過色彩的變化和圖層樣式的調節來深入。有輪廓背景的質感強化除了在色彩和圖層樣式上面深入以外，利用白色的不透明度變化也是一個不錯的技巧。

4. 立體圖標的空間感強化

隨著三維軟件的不斷普及，很多 UI 設計師也掌握了一些基本的三維設計能力，金剛區圖標采用立體圖標來表現，相較于扁平化的設計來說空間感更強。在進行透視角度把控的時候，要選擇統一的視角進行表達。現在很多立體圖標的效果也并非一定需要三維軟件實現，只要控制好透視的角度，PS、AI 或者 Sketch 軟件等均可以實現。

5. 生活中的靈感提煉

俗話說：“靈感來源于生活”，基于生活中的物品進行靈感提煉，是圖形創意常用的手法之一。比如自如 App 的金剛區圖標設計，就將生活中的物品造型進行圖形化提煉而成，場景代入感不僅更好的輔助用戶對功能模塊的理解，設計風格也十分的清新自然。

6. 微動效的關注度強化

在需要特別突出單個或者多個功能模塊的時候，除了進行標簽設計突出以外，圖標動效也是最為常見的處理形式。動效的圖標可以更好的引起用戶的關注度，只是需要控制動效的頻率和數量，太多的動效也容易形成互相干擾，需要有動效重點和主次分離。

7. IP 形象角色的設計融入

在一些兒童類產品中，金剛區會采用一些可愛的 IP 形象進行設計，除了結合自身產品的吉祥物進行發揮以外，也會結合主推業務的形象進行提煉。比如寶寶巴士旗下的系列產品，采用了眾多 IP 形象作為圖標設計，童趣可愛的風格更能引起小朋友的關注。

8. 文字化圖標設計

為了配合運營活動推廣，金剛區圖標也會在活動期間結合活動主題進行設計，其中主題文字化圖標設計也是較為常見的形式。直接將文字進行圖形化表達，或者配合活動關聯元素進行組合創作。這種形式主題突出，活動針對性強，可以最大化的提高主題活動的曝光度。

9. 特殊需求下的混合搭配

為了滿足業務需求，固定的形式無法被采用，就會呈現出混合搭配的形式。這種形式雖然可以滿足需求，但是風格很難做到統一，如果有固定的外形輪廓作為基礎圖形背景，算是一個相對合理的解決方案。

10. 磨砂玻璃圖標設計風格

磨砂玻璃的圖標受到很多設計師的追捧，最早在一些設計平臺出現，后來國內一些產品也都有應用，比如自如、騰訊視頻等。這種類似于特殊材質的運用也是很多設計趨勢所表露出來的，介于扁平和寫實之間的微質感，帶給用戶一種輕質感的體驗。

總結

金剛區模塊設計無論是從布局樣式還是圖標設計風格上面，都有非常豐富的優秀案例作為靈感來源。這里只是為大家進行拋磚引玉，分析 UI 設計中的細分模塊，讓我們可以更加深入的探索設計細節和研究設計原理。

希望本文的分享可以帶給你關于金剛區模塊設計的思路和技巧，我們后續再和大家探討更多細分設計的技巧和經驗。

歡迎關注作者的微信公眾號：「黑馬家族」