“金刚区”的8种设计样式

当我们在设计首页的时候，大家考虑页面布局设计细节的时候，可能最让人头疼就是金刚区的图标设计！在设计金刚区的时候往往不知道采取那种设计样式能够更好的服务产品，面对这个头疼的问题，那么我们就结合一下实际上线的产品中金刚区设计进行一下归纳总结，并分析一下它们的设计样式以及优缺点。

1.金刚区的定义

金刚区是指页面顶部 banner 之下的核心功能区，金刚区会根据产品的业务目标的变更进行灵活的调整，就像百变金刚一样灵活，所以叫做金刚区。金刚区多以宫格的形式排列展现的图标，一般情况一屏展示5~10个图标。

2.金刚区的作用

金刚区服务于整体产品，属于页面的核心功能区，金刚区主要作用有两点：一是业务导流，为不同的业务模块进行引流；二是功能选择，为用户提供不同功能的服务。

3.金刚区设计形式&优缺点

金刚区的设计形式一般是由：“图标+文字”组成。我们以线上实际的产品为例简单的归纳总结一下当前主流的金刚区样式。

A.面性图标

设计样式：面性图标是由外部轮廓和内部的 icon 图形组成，外轮廓的图形一般选用圆形或者超椭圆作为背景图形，色彩上多会选用同类色处理成微渐变的形式。

优点：外轮廓选用了圆形或大圆角的图形，具有亲和力，容易吸引用户的注意力；色彩饱满具有质感，视觉冲击力强；内部图形（icon）与外轮廓组合方式多样化，能更好的适应业务变化。

缺点：对于相似的业务，图形相似，视觉辨识度低；对于复杂的业务，图形无法表达明确，需要使用文字代替图形，容易造成金刚区设计风格不统一。

B.图形图标

设计样式：图形设计，不需要外轮廓的衬托。

优点：设计细节丰富，处理样式较多，例如渐变、图案纹理等等；富有创意，能营造小的场景插画；设计样式多样化，扁平化、2.5D等设计样式。

缺点：对文字信息的依赖性强；图形色彩等细节容易设计过度，例如复杂的图形和过度弥散效果。

C.线性图标

设计样式：主要利用图形的结构线进行设计，色彩上基本上以纯色为主，或者添加品牌色作为辅助色。

优点：设计上简洁干练，不易干扰用户进行其他操作。

缺点：在内容复杂的页面中视觉冲击力较弱；相比于面性图标色彩较为单调。

D.线面结合

设计样式：在图形化的基础上添加轮廓结构线，色彩上简练干净，一般不会超过三种颜色。

优点：轮廓清晰，视觉冲击力较强；设计细节丰富，富有创意。

缺点：视觉层级繁琐，视觉效果不易把握；视觉效果复杂，不够简洁；图形不统一，增加识别难度，较为依赖文字注释。

E.实物展示

设计样式：多以当前主营业务具有代表性的商品为例，单独展示或者配合遮罩图形进行展示。

优点：主题明确，简单粗暴；直接使用商品展示，具有感染力。

缺点：纯商品图片展示，缺乏设计感且视觉重量不易把控和统一；商品图展示，容易误导用户，让用户感觉只是单一商品的售卖；商品展示立意单一，极其依赖文字注释；如果频繁更换商品图，增加用户对于金刚区模块认知的学习成本。

设计样式：主要汲取当前的节日文化元素为基础进行设计，贴合节日氛围和自身的品牌属性。

优点：设计风格节日气氛浓重，满足用户当前的情感需求；设计细节精致，富有创意；视觉冲击力强；视觉上与当前运营主题设计风格统一，使整个界面在视觉上看起来更加融合。

缺点：图形设计上更加贴近节日活动的主题，以渲染气氛为主，图形设计较为复杂，功能的识别性较弱；由于图形设计主要以渲染气氛为主，所以图标极其依赖文字注释；时效性强，只针对节日活动的时间阶段。

F.混合搭配

设计样式：主要以图形 icon 和图片展示进行混合排布，图片一般都会进行图形遮罩处理，使其与其它图标在视觉上相对统一。

优点：能够有效帮助产品推动当前的运营活动点击率。

缺点：图形和图片混搭容易造成视觉不统一；如果频繁更换运营活动，增加了用户的学习成本。

G.运营文字

设计样式：以运营文案为主，会结合当前的活动主题进行主题性的视觉创意设计。

优点：突出当前的运营活动主题，满足用户情感化的设计；运营活动的针对性强，能够直接突出主题，例如之前的猫狗文案大战；设计风格新颖，通常结合当前活动主题进行创意设计；设计细节丰富，视觉冲击力强。

缺点：品类功能的辨识度极低，对底部的文案；时效性强，只限用于当前活动期间使用。

3.如何选择金刚区的样式

我们设计中主流的金刚区的图标设计主要分为两种：线性图标和面性图标。两者的优势各不相同，这个时候我们往往要结合自己的实际需求来选择使用那种设计样式。

通过归纳总结我们发现大多数的金刚区可以分为两种，一种是功能性的金刚区，主要以产品的核心功能为主，为用户提供功能型的服务；另一种属于业务性的金刚区，主要以为各个业务导流为主。

在实际的设计工作当中，你可以根据实际的需求选择使用那种设计样式，在这里我们可以参考所设计的金刚区的功能类型和功能数量两个参考维度。如果产品是功能性的且数量偏多，建议使用线性图标，因为线性图标视觉上更加安静沉稳，不会过多的干扰用户，使页面更加统一整体。例如支付宝的首页，支付宝的金刚区的功能较多，选用线性图标能使整个模块更加统一，用户可以根据自己的需求进行点击。

如果是业务性的产品更加适用于面性图标，因为面性图标视觉冲击力强，能够快速引导用户点击，完成业务导流的作用。常见的使用场景有淘宝、京东等电商平台。如下图：

淘宝、京东等电商平台资源品类丰富，金刚区需要担任为其他业务导流的作用，选择视觉冲击力较强的面形图标能够更好的吸引用户的注意力，引导用户点击选择。

画重点

1.金刚区是页面的核心功能区，会根据产品的业务目标的变更进行灵活的调整。

2.金刚区的主要作用是为产品的主营业务导流和辅助运营，已经为用户提供核心的功能服务。

3.在选用金刚区设计样式的时候，我们主要参考的是功能类型和功能数量的两个维度，产品偏重功能性且数量多的时候更加偏向于线性图标，产品偏重业务性的话更加偏向于面性图标。

更多内容可查看海盐社出版的UI书籍：

var jd_union_pid="1948330372";var jd_union_euid="";