关于金刚区的一些思考

最近画页面需要画金刚区，但不同产品中的金刚区各有千秋，不知该怎样图标的形式，所以收集整理了一些金刚区的知识，希望对大家有所帮助。

金刚区通常指的是 banner 或搜索框下以宫格形式排列的多个图标，数量上多采用1-2行，每行展示5个图标，再多会显得拥挤。大多数金刚区都可以左右滑动，以便查看更多的内容。如下图：

为什么叫金刚区呢？这个名称来源于百变金刚，由于产品迭代或功能调整变更，金刚区可以很灵活的进行替换，就像一个百变金刚一样，故称之为金刚区。比如每到春节等重要节日，金刚区就可以很方便换上一身“新衣服”。如下图：

金刚区的主要作用就是把多种功能汇聚到一起，方便用户查看选择，同时起到导流的作用。

我粗略地把金刚区分为两大类，有底板的和没有底板的。有底板的通常用一个固定的形状再加上其他元素组成图标，更容易做到视觉上的统一，使页面看起来更整齐规整，同时对比强烈，更容易吸引注意力。而没有底板更难把握视觉上的平衡。

1.有底板

1.1.底板形状

常见底板形状有圆形、超椭圆形、圆角矩形、三种，归根到底都是大圆角、非常接近圆形，而很少见以方形作为底板形状的。这是因为相同尺寸的圆形和正方形，圆形的面积更小，在视觉上会展现出较大的空隙，不会显得特别拥挤，更容易聚焦内容，同时圆形具有很强的亲和力，适用于大多数场景。如下图：

1.2.底板颜色

通常采用邻近色或同类色，并添加渐变提高质感。底板使用丰富的色彩使得图标和页面对比强烈，更容易吸引用户的注意力。以贝壳找房为例，进入首页的第一眼，视线就被顶部的金刚区所吸引，如下图：

1.3.构成元素

底板上的元素有很多种，常见的有线性、面形图标、文字、实物照片、logo等。金刚区不仅要吸引用户的注意力，同时还要做到能明确表达它所代表的功能作用，所以尽量使用识别度高、一目了然的图标，而添加字体或实物照片作为图标，比较容易让人理解。如下图：

2.没有底板

2.1.线性图标

线性图标在视觉上简洁、安稳沉静、有质感，大多数金融产品最常使用线性图标，更容易突出理智、安全可靠的情感，如下图：

2.2.图形图标

图形图标样式很多，常见的有扁平、拟物、2.5D等，可以展示更多的设计细节，增强视觉上的表现力，但是图标表意容易模糊，对文字的依赖性较大，而且更新迭代替换替换金刚区的成本较大，如下图：

2.3.实物照片

实物照片可以带来真实、可靠的感觉，表达清晰，用户一眼就能知道其代表的意思，同时使用实物照片替换金刚区时所花费的设计成本较低。

今天主要分享的内容是关于金刚区的一些思考，我总结了以下几点：

1.有底板的金刚区在视觉上更统一、突出，容易吸引用户的注意力；

2.金刚区使用圆形底板看起来整洁、不拥挤，且亲和力较强，使用场景广泛；

3.金刚区的图标要明确表达出他的功能作用，所以要使用识别度高、一目了然的图标。

参考引文：

《金刚区图标设计之四步法则|UI|观点》http://1t.click/aJAx

《8种金刚区设计样式，产品设计必备》http://1t.click/aJAy