客户管理页面交互改版

【改版背景】

老版本线上产品页面存在一些问题，主要有以下几点：

1）页面样式陈旧，视觉样式不统一。

2）交互逻辑混乱，页面操作不流畅。

3）页面内容呈现逻辑不清，层次结构模糊。

【改版目标】

在不改动页面数据内容逻辑的情况下，尽量降低开发成本，

1）页面视觉样式舒适合理，符合主流审美和认知。

2）页面操作流畅，让用户减少疑惑和使用学习成本。

3）页面数据内容根据用户预期呈现给用户，内容信息不堆积。

【改版过程】

首先分析原页面：

1——首页问题集合

1)首先是页面头部

头部包含：需要展示的数据信息；点击进入数据内页的入口；开通会员（包含3种状态：1未开通会员，引导其开通；2开通会员，引导其进入收会员页面；3，收了会员之后展示会员数）。目前问题

在于，【会员】的感知不够强烈，数据展示与操作引导没有进行区分。加上当会员有三种状态时，整个头部信息较为杂乱，不能让用户一目了然的清楚需要进行什么操作。

改版需要做的就是：1把数据展示与会员模块区分清楚；2会员模块状态样式有差异性的同时保持更高的统一性。

然后仔细观察会发现，会员状态中的第三种状态【展示会员数】其实可归纳为数据展示，不同于【开通会员】与【收会员】的操作属性，而是数据展示与内页入口。

2）其次是列表

列表模块由icon加标题组成，整个视觉较为单调粗燥。问题在于：1图标粗糙不精致，大色块配里面用复杂线性icon，视觉上太过松散且尖锐。2）数据信息过于简单，也就没有主次层级，占页面较大面积的列表因此会沉闷无聊。

所以改版方案首先是优化图标，此页面为事务相关内容，宜采用较为沉稳简练的风格。所以不准备采用c端页面常用的大渐变加（如下图）

找到市场主流产品，比如支付宝的“朋友”页面，飞猪的“消息”页面，淘宝“消息”页面。我采取的办法是用圆直角微渐变加形状镂空。同时补充内容信息，给每一条列表内容层级已经丰富视觉感受。

综合以上分析考虑，最终设计方案如下：

其中对于头部数据顺序，考虑到用户阅读习惯（从左到右），分析用户对于数据的重视程度（会员数>客户数>访客数），做了排序调整。

2——内页分析

从首页头部数据点击进入数据内页。如上图所示，三个数据入口点击进入的都是同一个页面（如下图）

首先分析这个操作逻辑关系。

对于页面操作，UI界面需要做到使用户提前预知操作后能得到的结果，即出现的反馈（页面跳转，页面弹窗等）在用户的心理预期中。在首页的时候，有三种数据（会员、客户、访客）那么单独点击某一个入口，心理预期为进入此数据详情页面，而不是进入此三个全部数据的页面。

所以对于此问题的解决方法是，确保每一个数据入口对应相应的数据详情页。所以需要对页面数据做一些拆分（一个页面分为3个页面）

逐一分析每个模块。发现左图图三个数据，其实对应首页三个数据。而有图数据入口也有重复。在较多数据展示页面，数据层次关系清晰才能较好的帮助客户理解众多数据关系。

其次我们分析此页面操作交互。

页面有两个数据切换【切换数据时段方式：日数据、周数据、月数据】和【修改时间】。分别在导航栏和页面内操作

【导航栏下拉>页面顶部点击按钮>在页面底部弹出浮层】使用感受很不流畅，操作凌乱不连贯（操作散布于屏幕上、右、下），观察页面可以看出来导航上的切换和浮层上的按钮切换是重复的，所以可以合并此切换。另外由于浮层承载的信息和操作较多，所以采用跳转新页面的方式。

对于页面内容，除了相关数据展示，还有功能入口。另外整个页面较为单调，所以考虑添加活动banner对页面进行丰富，同时较为恰当的告知用户更多活动信息，增加用户参与兴趣。

综合以上分析考虑，最终设计方案如下：