存在的问题

1.老版企业在线视觉风格相对现有网站整体风格已有些过时，整体与网站改版后简洁风格不够协调。

 

2.系统自动发出的消息弹框，对浏览旺铺的买家用户造成较大干扰。

 

优化目标
1.增加买卖双方体验，特别是减少对买家的干扰。
2.企业在线与现有旺铺样式统一，视觉风格更为简洁。未读消息提示框位置调整，不遮挡旺铺主体区域。

 

用例模型和角色关系

 

可以明显得看出，系统不再提供设置自动发送消息到前台的功能，也就是说，访客在浏览旺铺过程中，弹出的对话框一定是卖家主动发起的消息，而不是系统设置的系统消息，减少了无端的干扰，从而改善了买家用户体验。
交互功能改良之后，下面进行视觉上的优化。
视觉目标：更商务 更简洁

初步风格制订
从目前设计中盛行的微渐变出发，抛弃了老版中采用较大色块及强烈渐变的风格，这样视觉上会显得更平一些。运用情绪板，提取了认为比较适合的颜色，用于最初风格的设计，为了在整体页面中对企业在线的角色进行一些弱化，饱和度上也有所减弱。

设计了起初3个版本，经过讨论，决定第2款风格更加接近简洁，与网站风格更协调的目标。

 

风格确定下来，是第一步，在其基础上进行下面的优化扩展。

不同颜色的确定
之前企业在线皮肤共有12套，颜色过于丰富，为了达到更为简洁，整体协调的目标，在颜色上进行了调整和筛选。努力做到在满足让用户有多种选择的同时，又不至于出现颜色过于杂乱而产生困惑的情况，于是收集了当前关于企业在线颜色版本使用的相应数据。

 

 

最终保留了使用数最高的前5位颜色，另外增加了一款灰色系，将灰色版本设置为默认选项。这六款颜色分别是灰，蓝，绿，红，橙，紫。在颜色的选择上， 进行了多次调整，既考虑之前老版的用色，又参考现有旺铺模板库中不同颜色类型，与之前确定风格版本的颜色饱和度相近，尽量选取与该色系旺铺各版本都能较好 协调搭配的颜色。

 

 

位置调整
企业在线是基于web浏览器的即时通讯工具。目前即时通讯工具的形式多样，它的展示形式是以网页为媒介。常见的即时通讯工具的web版本，如webqq 、web版百度HI，这类在线IM主要的功能局限于即时的交流沟通，侧重点在消息与文件传输等少数功能。针对社区、论坛以及普通网页开发的即时聊天插件。
比如xtalk，用户打开网站后，可以看到在网站右下角生成的一个聊天窗口，可以跟同时浏览该网站的用户进行即时的交流。这种Web IM插件旨在提高网站用户的活跃度，用户在获取网站信息同时，还能同时和对同样话题感兴趣进行即时交流，深入挖掘网站的互动潜力。
展现方式主要有浮动列表式，浮动图标式，浮动窗口方法和固定图标方式。为了对主体区域减少干扰，很多收起或隐藏到页面的顶部、右侧和底部。
比如facebook的聊天工具，是采用固定方式，位于页面右下方。

 

 

由于现在的诚信通用户在旺铺中可设置营销海报，这块banner位置就位于页面右下方，会形成干扰，同时从用户的使用习惯出发，考虑放在页面最右侧，只是 企业在线区域的消息提示弹出框位置从左侧调整到上方，不遮挡旺铺和offerdetail的主体内容，只有对于1024px分辨率情况下，默认为收起状 态，大于1024px情况下则默认为展开状况，这样既对主体区域减少干扰，又使客户方便点击，随时与卖家进行沟通。
弹出对话框位置调整，之前弹框默认位置没有固定，现在调整为与企业在线顶部平齐，更好体现整体性，更加整齐规范。

 

 

最终效果：
黄页：

 

 

旺铺：

 

 

小结：
从用户的角度出发，用数据做依据，在纯粹的视觉设计和用户体验之间找到一个平衡点，过程可能会需要一些取舍。不能忽视每一个小细节，有时候这些细小之处正是决定用户体验是否完美的关键。