UI进阶干货——金刚区

时间：2019-04-09 10:43
发布：宁波达内培训
来源：网络
分享到：

一、什么是金刚区？

金刚区是一个页面中头部的重要位置，是页面的核心功能区域，表现形式基本是多行排列的宫格区图标。

比如淘宝app 首页banner（广告横幅）下的两行图标，饿了么外卖app 首页banner下的两行图标、支付宝app 首页头部的4个图标就是金刚区。

二、金刚区意义和功能是什么？

金刚区的位置通常是位于banner之下，区域通常会占据屏幕22%~25%的大小且位于屏幕头部，从用户阅读屏幕内容的视觉流来说位置至关重要，而且是聚合各类子板块的入口，为各个子版块分发内容引导流量。可见重要性不言而喻，产品要让用户通过不同类型展示方式的组件找到相应的功能，而图标具备精炼高度概括内容的特性，而且图标的识别度大于文字，所以金刚区的设计通常以图标+说明文字为主。

三、金刚区图标常见类型和表现手法？

常见的设计类型有3种：

面性图标

实拍性图标

线性图标

1. 淘宝APP——面性图标

淘宝整个业务线很多，金刚区的部分是1排5个图标，共2排也就是10个图标。一行5个图标也是当下行业内的图标数量极限了。

淘宝APP金刚区组成：圆形底板+业务说明+图形+板块名称

纵观多种案例，我们会发现一个问题，为什么电商类APP 金刚区图标多为圆形呢？我们来一起思考一下。从圆和方的直观感受来讲，圆给人一种亲近柔和的感觉，而正方形有4个棱角会让人感觉很生硬显得有距离感。在设计上来讲，方形的图标还需要考虑到四个棱角部分的设计不然会显得很空，圆形会显得更加聚焦内容，如下图。而且如果一排5个宽和高相同的圆形和方形图标，方形图标面积大所以会显得拥挤一些，所以金刚区图标圆形居多一些。

颜色：底板是从左到右0度的渐变，左边的颜色和右边的颜色属于同一色系。在色相，明度，饱和度上等数值上都有差别，但不会让渐变的两个颜色相差的特别明显。视觉感官上是左边的颜色比右边的颜色「亮」一些。

造型结构：图标是上下结构。上方是图标的业务说明描述，告知用户这个板块是做什么的，除了第一个图标外，其余的图标业务说明均是2个字，用最简短的词去描述、高度概括子版块内容。因为淘宝的受众用户人群众多，年龄跨度也较大，金刚区的识别性放在绝对的第一位，所以会在图标上写上业务说明。

图形：图标的下方是和子版块相关的图形，不过因为淘宝的业务线众多，风格也不一，所以没有将下方的业务图形做成完全统一的风格。但在设计风格上都是扁平化的图标，没有添加阴影高光等立体效果。

2. 京东APP——面性图标

京东APP金刚区组成：超椭圆底板+业务字设计／图形+板块名称

超椭圆形状介于圆形和方形之间，而相比于圆角矩形又显得很灵活生动饱满。

颜色：底板采用的是从左上到右下的斜45度渐变，左边的颜色和右边的颜色属于同一色系，渐变柔和变化不是很明显。

造型结构：在金刚区图标的设计上，京东也是将图标的识别性放在了首位，大部分图标使用板块的业务说明文字来进行设计，再叠加一个弧形的过渡，让图标内的图形看起来像是从一个空间延展到了另一个空间，增加了设计感不失趣味性。

图形：业务相关图形或字体设计，且均添加了投影，营造空间感增加设计细节。有一点需要注意的是，比如「京东超市」这个图标的右上角是加了促销标签的，利用用户喜欢贪便宜的心里，也是吸引用户点击的一种手段。但是此处不建议做字体的倾斜，试想一下，金刚区有8个图标，每个图标上都有一个字，每一个字都向右倾斜4～8度，那么你会感觉整个金刚区都是「倾斜」的。

3. 饿了么APP