金刚区是什么意思（UI设计细节指南设计金刚区的方法）

引言

金刚区也叫瓷片区，位于整个界面布局的核心功能区域，是首页的视觉中心，承载着产品的业务功能。那么在UI设计中金刚区有哪几种设计形式呢？几种设计形式中又包含哪些优缺点？

一、金刚区具有的意义和功能

Meaning and function

金刚区在页面中的一般处于BANNER模块的下方，占据手机满屏比例为1/5~1/4，作为各个子业务功能的聚合入口，为其分发流量，并在数据埋点中承担着重要角色。要使用户能够在金刚区中快速的定位到对应的功能，需要图标的展示方式与业务紧密贴合，图标本身具有高度概括内容的特点，所以金刚区的设计一般采用文字+图标的方式。

二、金刚区的几种常见类型

unctionSeveral types

金刚区最为常见的的图标展现形式是图形化，分为线性、面性、线面混合等设计风格。而面性图标又分为有底板和无底板两种类型。除了图形化设计之外，还有实景图和节日/主题图标两种设计方式，下面剖析下几种常见设计类型的优缺点：

1. 面性图标

① 有底板

设计样式：一般使用圆形或带有圆角的形状，颜色分为纯色和渐变色，内部的图标风格样式统一，图标颜色一般填充为白色。优点：通过底板的色彩划分区域，视觉上更有冲击力。缺点：对于具有较高相似性的业务功能，因为底板形状相同，识别性并不高。

② 无底板设计样式：没有底板作为背景，使用纯图标元素，可以使样式更加多元化。优点：打造小场景的插画效果，使细节更加丰富。缺点：轮廓复杂不一，对图标的风格统一性要求更强。

2. 线性图标

设计样式：使用较粗的外轮廓线条进行构图，色彩上采取单色或双色俩种方式。

优点：视觉上整洁干净、安静沉稳。减少色彩的使用，使得留白区域增大，适合简约风的设计风格。

缺点：视觉冲击力较弱，不适合扁平化布局。

3. 实物图标

设计样式：围绕文字元素匹配对应的实物商品/人物为图标，分为有底板和无底板俩种类型。优点：使用图片可以带来真实、新鲜的感觉。增强了页面的色彩丰富度，并可以将需要主推的商品作为图标为板块引流。缺点：商品图片需要经常替换，对用户的认知能力要求较高，导致最终会依赖文字信息进行辨别。

4. 节日/主题图标

设计样式：以节日或活动作为主题进行图标的设计，较多使用面性图标。优点：节日气氛浓重，设计细节丰富，富有创意，与用户的情感保持联动。缺点：有失效时间，只针对短期使用，识别度较低，较为依赖文字说明。

三、金刚区需要注意的几点

Requires Attention

1. 设计尺寸

金刚区图标设计尺寸没有硬性规定，通过经验规范下来，如果是没有外轮廓作为背景的情况下，图标尺寸的范围一般在 44~98px 左右（@2x）；加上外轮廓的情况下一般在 80~98px 左右（@2x）。尺寸的范围仅为参考，根据图标造型的繁简度不同都会形成差异，最终要以预览效果为准。

2. 颜色

金刚区图标颜色的可以直接采用品牌色，在简约的线性图标和面性图标中有时也会使用品牌色作为辅助色。如果要采用多种颜色且色相角度差异较大的，需要把控好色彩之间的关联性。底色的整体饱和度和明度要尽量做成视觉统一。

3. 差异性

在同质化的设计中，差异化的设计才能拉开与竞品的关系，增加产品的辨识度，通过整体的视觉语言设计让用户对产品有一个明确的记忆，增加辨识度。

4. 设计样式选择

功能型产品：由于以产品提供的功能服务为主，用户的自主性较强。 线性图标更加适合，因为线性图标视觉上更加安静沉稳，页面更加统一整体。

业务型产品：以业务导流为主，需要较强的视觉冲击力，更合适使用面性图标，能够引导用户点击，从而完成导流的作用。有时为了提高用户关注度，也会采用图标动效进行结合，提升主推业务的曝光度。

小结

Summary

以上提炼的方法不是绝对的，只是作为设计金刚区的一个参考，这里只是为大家进行抛砖引玉，更多还是要根据实际业务场景选择最适合产品的设计方法。