金刚区是一个页面中头部的重要位置，是页面的核心功能区域，表现形式为多行排列的宫格区图标。今天跟大家分享一下金刚区图标的一些设计方法，希望能帮助到大家哦～
1、什么是金刚区？
金刚区是页面的核心功能区域， 是聚合各类子板块的入口，为各个子版块分发内容。一般位于页面中头部位置，展示样式为多行排列的宫格图标。一般为2-3行，每行4-5个，内容多的时候可左右滑动。
比如饿了么首页banner下的图标、支付宝首页的图标。
2、金刚区图标常见设计类型
金刚区常见的设计类型有5种：
- 面性图标：有底板和无底板
- 线性图标
- 线面结合图标
- 实景图图标
- 节日/主题图标
1)面性图标
a.有底板
设计样式：底版形状一般使用圆形或大圆角的图形，颜色一般饱和度较高，内部图标风格样式统一。
优点：有底板的图标色彩面积更大， 视觉冲击力更强。
缺点：对于类似的业务，因为图形相似，视觉识别性不高。
举例：
1、房产平台类应用-安居客
组成：微渐变超椭圆底板+面性图标
颜色：底板是从上到下0度的渐变，上边的颜色和下边的颜色属于同一色系，渐变的两个颜色相差不会特别明显。上边的颜色比下边的颜色浅一些，整体饱和度较高。
内部图标：设计风格上偏扁平化，整体以白色为主，添加了阴影渐变等立体效果。
2、文教知识类应用-得到
组成：圆形托底+线性图标
颜色：底板采用灰色，文艺清新，符合产品定位；
内部图标：使用黑色为主橙色为辅的线性设计，传达温暖的产品气质。
3、阅读类应用-喜马拉雅
组成：圆形渐变底板+面性图标+文字
颜色：因为喜马拉雅是情感应用，金刚区设计上更注重场景打造，底板是从左下到右上45度的渐变，左下的颜色和右上的颜色属于同一色系。整体饱和度较低，更加文艺清新。
内部图标：设计风格上是扁平化的图标，添加了阴影内阴影高光等立体效果，视觉层次更丰富细腻。
a.无底板
设计样式：没有底板衬托，纯图标设计，设计样式更加多样化。
优点：设计细节丰富，富有创意，能营造小场景插画。
缺点：对文字信息的依赖性强，图形色彩等细节容易设计过度，轮廓复杂不一，统一性较差。
举例：
1、音乐类应用-酷狗音乐
音乐类产品金刚区设计相对较为朴素，重功能入口，弱视觉效果。因为音乐需要给用户营造舒适安静的倾听环境，而不是缤纷热闹的消费环境。
2、主流电商产品-京东、淘宝、拼多多
电商产品习惯于营造热闹的氛围，去底板设计可以放大图标细节，图标的造型感更强，色彩饱满丰富，符合产品希望用户消费的特点。
2）线性图标
设计样式：利用图形外轮廓线条进行设计，色彩上基本以单色或双色为主。
优点：视觉上简洁干净、安静沉稳。
缺点：视觉冲击力较弱
举例：
银行金融类应用-招商银行
银行金融类产品习惯于营造稳定、安全的环境，使用线性图标设计沉稳、简洁，给人安全感，符合产品行业特点。
3）线面结合图标
设计样式：由线和面组成，通过面加强视觉冲击力。
优点：设计细节丰富，富有创意。
缺点：视觉效果不易把握。
4）实景图类图标
设计样式：以具有代表性的商品为图标，单独展示或配有背景底版。
优点：使用图片可以带来真实、可靠的感觉。而且还可以将运营方需要主推的商品换成图标为板块带来流量。
缺点：商品图片会时不时更换，用户认知压力较大，最终还是会依赖文字信息辨别入口。
举例：
生鲜超市类电商产品-叮咚买菜、天猫超市
组成：底板+商品实景图
此类产品考虑到用户人群较广，采用商品实图有种商品货架的感觉，降低用户学习成本，展示更接地气。
金刚区图标大多采用两件物品进行摆拍，而在两件物品的组合上选的是大小对比大的物品，这样更能营造层次感，空间感。
5）节日/活动主题图标
设计样式：以节日或活动为主题设计图标，多以面性图标为主。
优点：节日气氛浓重，设计细节丰富，富有创意。
缺点：时效性强，只针对短时间内使用，识别度较低，比较依赖文字说明。
3、金刚区图标区分样式设计
有些产品会根据业务需求区分推荐应用和普通应用。区分设计能使推荐应用得到最大程度突出， 缺点是推荐个数有限。
1、旅游订票类应用-同程旅行 、携程旅游
两款产品金刚区均采用区分式设计，但是形式大不一样。 同程旅行相对携程来说，业务较轻，因此金刚区设计较为常规，推荐应用部分采用圆形底板+面性图标，其他应用则采用线性图标设计，整体设计层次分明，简单清新。携程旅游业务体量大，纯金刚区已不能满足其产品需求。因此结合瓷贴设计，突出推荐应用。
2、主流外卖平台产品-美团和饿了么
饿了么和美团外卖都是区分类型设计，推荐应用单独一列，其余应用列两行。
图标设计上，推荐应用均采用底板+插画图标设计，自选应用采用去底板+插画图标设计。金刚区图标的颜色总体给人鲜艳明亮的感觉，来表达食物的新鲜美味。图标造型采用比较写实、精致的插画，充满食欲感。 美团外卖推荐应用图标采用破形设计，视觉更抢眼，内部图形插画细节更明显，识别性更强。
4、金刚区图标推荐设计
根据业务需要，产品会对金刚区某个板块进行推荐设计，常见的主要有2种方式：
1、添加标签
给想要推荐的模块添加标签是最常用的方式。如下图所示：
2、添加微动效
给应用图标添加动效，使用图标动静对比来吸引用户视线、进而达到推荐的目的。这种方式适用于强推少量应用图标的时候使用。因为过多的动效会使页面显得杂乱，反而会降低推荐的效果。
5、金刚区图标设计注意要点
1.设计尺寸：合理的金刚区图标尺寸一般为80-100px左右，外环：内环=0.618视觉效果更佳。
2.颜色：采用渐变色时，渐变的两色要在同一色系内，整体金刚区图标底板色的饱和度和明度要尽量做成视觉统一。
3.差异性：金刚区图标在设计上最好要与竞品有一些差异度，通过对自家产品app的整体视觉语言设计让用户对我们的产品有一个明确的记忆，增加产品的辨识度。如贝壳找房APP金刚区图标采用扁椭圆形状，区别于常见形状，增加了产品记忆点。
4.设计样式选择：
不知道大家在做金刚区图标时会不会纠结使用什么风格，这里分享一个方法，我们可以根据产品的特性来选择，主要可以划分为功能型产品和业务型产品2类。
功能型产品：用户的自主性较强， 线性图标更加适合，因为线性图标视觉上更加安静沉稳，页面更加统一整体，如支付宝的金刚区图标。
业务型产品：面性图标更加合适，因为面性图标视觉冲击力更强，能够快速引导用户点击，完成导流的作用。如我们经常逛的淘宝APP金刚区图标。
当然这个方法不是绝对的，只是一个参考，在我们没有思路的时候可以试试这么做。
