不知道大家在设计还原中有没有感到奔溃的体验，最近我就遇到了一些。面对ui失真、交互点击跳转的问题感到头大，所以我就在想能不能规范一下。通过分析发现对于交互点击跳转方面问题有一定规律可循，于是自己决定设计制定一套简单实用的热区规范，供开发使用。具体的思考过程，设计思路如下。
该篇文章的总体框架为：
- 现有热区点击问题；
- 热区设计遵循基本原则；
- 热区设计方法；
- 热区设计规范详情。
一、现有热区的点击问题
在还原中我对问题进行了总结，大致分为3类：1.热区过小。2.同一入口热区设计过多。3.热区设计不一致。
1.热区过小：
击热区过小，导致误点、点击无效等问题，影响体验和数据转化。
2.热区过多：
同一热区割裂成多个热区，导致存在热区失效区域。
3.热区不一致：
不同开发人员对热区的理解有一定差异，导致热区设计不统一。
具体如下图：
二、热区设计遵循原则
在发现这些问题之后，和对应的开发同学进行了沟通，他们愿意由设计制定一套热区点击规范，并按照规范来进行设计热区。不过他们有顾虑点就是希望不要太复杂，不然他们可能不愿意去看。
在与开发同学沟通基础上，同时做了一些相关的竞品分析。得出热区设计既要满足体验需求，又要降低开发设计成本，并保证可复用性。所以我提出了本次热区设计的基本原则：化繁为简 、简单复用 、标准统一 。
三、热区设计方法
在热区设计过程中我总结出了【“模块化设计方法”进行交互热区设计】。具体的方法是什么？怎么用呢？如下：
第一步：确定主模块；第二步骤：划分子模块；第三步骤：设定热区。
1.确定主模块：将页面进行模块拆分，单页面拆分为多个模块，我们这里叫做主模块。
2.将主模块进行划分成若干个子模块。
3.将子模块分别进行热区设定。而具体的子模块的热区设计按照具体的热区设计规范来即可。
四、热区设计规范详情(具体场景示意)
场景一：整个模块为一个点击热区，则整个模块可点击
场景二：单独行/列为一个点击热区，则单独行/列可点击
场景三：同一行多个功能平均分布，则热区平均划分
场景四：独立热区（如独立icon、独立文本、独立icon+文本）
1.纯icon-热区尺寸：通用40*40dp；最小>=30*30dp(1倍的尺寸)
2.纯文本：通用40*(40+)dp，最小>=30*(30+)dp
3.icon+文本：通用40*(40+)dp，最小>=30*(30+)dp；注意：icon+文案为同一内容时，合成同一个热区
场景五：同一模块多个热区，进行模块拆分和功能组合
结语
这是我在工作中的一次小总结。佛系更新…
送一句话给自己：设计亦深亦浅，在混沌与清醒中，愿不丢失设计热情！
