高手总结！4个章节帮你掌握UI点击热区设计规范

通过分析发现，交互点击跳转方面问题有一定规律可循，于是决定设计制定一套简单实用的热区规范，供开发使用。具体的思考过程，设计思路如下：

往期干货：

该篇文章围绕热区的总体框架为：

1. 问题
2. 原则
3. 方法
4. 规范

一、问题

在还原中对问题进行了总结，大致分为3类：

1. 热区过小
2. 同一入口热区设计过多
3. 热区设计不一致

1. 热区过小

热区过小，导致误点、点击无效等问题，影响体验和数据转化。

案例一

案例二 这都是我们产品里实打实发生的Bad Case 

2. 热区过多

同一热区割裂成多个热区，导致存在热区失效区域。

举个例子

3. 热区不一致

不同开发人员对热区的理解有一定差异，导致热区设计不统一。

案例一 见笑了 😂

案例二 拿出实际Case是为了更好的说明问题

二、原则

在发现这些问题之后，和对应的开发同学进行了沟通，他们愿意由设计制定一套热区点击规范，并按照规范来进行设计热区。不过他们有顾虑点就是希望不要太复杂，不然他们可能不愿意去看。

在与开发同学沟通的基础上，同时做了一些相关的竞品分析。得出热区设计既要满足体验需求，又要降低开发设计成本，并保证可复用性。所以基本原则：化繁为简 、简单复用 、标准统一

1. 化繁为简：将复杂错乱的热区设计变得简单
2. 简单复用：定义简单，并且满足所有场景
3. 标准统一：iOS、安卓、H5做到标准统一

三、方法

具体的方法是什么？怎么用呢？先说个大概：

1. 将页面进行模块拆分，单页面拆分为多个主模块
2. 将主模块划分成若干个子模块
3. 将子模块分别进行热区设定，具体按规范来

模块化安全边距

用物理的不对齐，保证视觉的对齐

可以看到旧版，整体评论区设置了左右安全边距10

解决方案：

1. 引入IconButton，分section给安全边距
2. 更符合「化繁为简」和「标准统一」原则

案例

引入IconButton，分section给安全边距

依赖组件库

很显然，当页面组织80%都是由组件构成，那么组件本身添加可开关的热区范围，更符合「简单复用」和「标准统一」原则。

具体解决方案看第四章节部分。

案例一

案例二

案例三

布局影响热区最大化
上下还是左右，每次要想一想

案例一 Feed流的点赞

案例二 网易云音乐的评论点赞

四、规范

总共分为5种场景，从页面到原子

以下划线部分为不具备点击行为的组件，可以不用考虑

重点就是组件库覆盖高频场景的角度作为切入点来归类

场景一：整个模块为一个点击热区，则整个模块可点击

结合业务组件：帖子单列，订单单列等

场景二：单独行/列为一个点击热区，则单独行/列可点击

结合分子组件：所有Form表单类的选择项、填写项

场景三：同一行多个功能平均分布，则热区平均划分

结合分子组件：所有Bar类的Case，尤其BottomBar这种

场景四：独立热区（如独立icon、独立文本、独立icon+文本）

结合原子组件：所有可点击的原子都可以算作热区标注规范

1. 纯Icon：通用40*40dp；最小>=28*28dp(1倍的尺寸)

2. 纯文本：通用40*(40+)dp，最小>=24*(24+)dp

案例一

案例二

3. Icon+文本：通用40*(40+)dp，最小>=24*(24+)dp

注意：icon+文案为同一内容时，合成同一个热区

场景五：同一模块多个热区，进行模块拆分和功能组合

这个明确需要在业务设计时逐个标出

因为概率较低 or 业务组件需要，所以标明频率也不算太高

案例一

案例二 必须标注同一主模块内的子模块有点击

结语

以上，几乎涵盖了产品设计中相关热区的5大场景归类和3条基本原则，为了设计研发的人效提升，为了用户可以有更好的反馈体验，我们必须时刻精进地去发现问题，解决问题送一句话给自己：设计亦深亦浅，在混沌与清醒中，愿不丢失设计热情！