做“合理”的设计 — 典典养车商家端首页改版思考

前言

有时同事问我觉得A，B两个方案哪个比较好，我一般的回答是都不错，不过看起来A方案更加的合理些。没错，其实在两个设计方案不是具有明显的视觉差距或者有可能A比B方案视觉看上去更出彩不过最终却选择了B方案，这是为什么呢？这里面就牵涉到了我们评价设计的一个“合理”性标准了。

那么我们如何去定义设计的合理性呢？

注意这里我说是“合理”是针对于你当前所做的项目来定义的，根据不同项目背景和阶段性要求在特定使用场景下推导而得出的合理设计方案。

举个例子你刚看到到iPhone手机的那一刻只有一个home按键，你的目的是想唤醒屏幕（目的），你会先假设按下home键可能会唤醒屏幕，所以你用手去按下（操作），结果屏幕亮起（验证）证明了你的这个假设是正确的。一个设计方案是否合理我们的通常检验标准是看它是否能达成目的和可操作性，并且最终是可以被验证后被证实为“合理”方案的。

实例分析

项目介绍

典典养车商家端是一个服务于线下商家管理店铺和运营的B端工具软件。商家通过软件可查看自己店铺运营状态，自定义店铺活动和进行结账收款等操作方便管理店铺。

背景需求

1. 我们观察用户在首页查找跟进入功能入口的平均时间是4秒，并且过程中有短暂停顿。

2. 用户每日打开APP的频次为1-2次并且停留时间和跳转率都很低，运营方面希望提高用户粘性和活跃度。

3. 产品长期视觉风格老旧情感化欠缺，用户体感差。

4. 考虑到店铺类型不同首页展示的功能入口会有些许差异。

明确目标

首先我们梳理出首页在整个用户体验流程链路中的位置及核心价值

不难看出首页处于整条链路的开端，自然它的核心价值在于让用户了解这是个什么，这里面有什么，跟我能做什么？再结合之前的需求背景，我们可以明确化这次首页改版的具体目标点，并加以整理和拆解。

设计策略

因为手机终端的屏幕尺寸限制首屏可展示的内容，作为一款工具类产品避免分屏展示工具入口，所以内容信息控制在一屏完成，按照模块形式来区分不同的属性和各自的核心点。

在经过一轮大致功能框架梳理后，接下来我们要把信息显现化。这好比造房子一样，之前一步相当于明确了房子里面有什么，接下来我们开始划分区域空间来确定这个房子的格局，来慢慢使得房子的轮廓清晰具象化，这一步也是为了视觉表现层搭好框架基础。

按照用户认知习惯排序，保证高效的信息触达原则。提升工具模块区域的可操作空间。

视觉

根据之前的推导接下来我们进一步设计视觉方案。

细节+动效提升用户体感

有时候当我们为了节省页面空间并且表现内容的时候，我们会利用动效来做一个同区域内容切换的信息展示，同时工具类产品会略枯燥，加以适当的动效可以增添趣味性，如果对数据配以加载效果可以凸显专业和实效性消除用户的倦怠感。

适配

当设计输出后也要考虑到目前主流的平面现实状况下该如何呈现。因为iPhone X的屏幕长度为812pt那么比之前的屏幕尺寸多出来20%的空间，因为是偏功能操作性的产品也不复杂我希望信息和功能全部在一屏内展示。

如果直接把下面工具栏模块填充底色那么会造成在iPhone X显示情况工具栏模块下面有一部分是空白的这造成了视觉断层看起来视觉的比重也很不和谐会造成用户体验变差。

异形适配

大致的思路是保证在iPhoneX下也能显示内容饱满，但是又不能看上去空的很突然，所以尝试把除工具栏以上的模块先固定不动，考虑在工具栏ICON比例和间距上面做文章。因为iPhone X的屏幕分辨率对应iPhone8plus所以切图同样是用@3X的所以把ICON的切图替换并且调整间距看看效果。

当然我在这只是取了个折中方案，因为只需要设计切图输出到开发固定好上面模块的位置替换一套ICON就可以，比较快捷，如果选择调整每个模块的间距那么会造成代码过多，而且开发难度也增加，所以这里我选择这个异形适配。

验证

“合理”是要经得起推敲和验证的，之前的设计策略帮我们输出了方案，到了这一步我们要验证这个方案是否合理，那么根据我们之前明确的设计目标，在改版上线后我们还需要观察和收集反馈信息，并且配合后台数据来验证我们的设计方案。

写在最后

经过各个维度的分析后，我们做设计才能心中有数，而且能缩短中间方案反复纠结确定不下来的时间这极大的提高输出效率。当然每个产品属性和需求背景各不相同，也没有限制一种套路吃遍所以的情况，这过程中需要灵活的去调整设计流程，不过思路是大同小异的，这里我总结如下：

设计其实是一门科学和美学的结合体，在商业环境中和生活场景中这要求我们设计者充分考虑多维度才能做出“合理”的设计来。