实战设计企业在线优化项目总结.docx

实战设计企业在线优化项目总结.docx

《实战设计企业在线优化项目总结.docx》由会员分享，可在线阅读，更多相关《实战设计企业在线优化项目总结.docx（9页珍藏版）》请在冰点文库上搜索。

实战设计企业在线优化项目总结

此文章已于20:

42:

202013/1/10发布到良知塾

【实战设计】企业在线优化项目总结

类别全部;交互信息

存在的问题

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

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

优化目标

1.增加买卖双方体验，特别是减少对买家的干扰。

2.企业在线与现有旺铺样式统一，视觉风格更为简洁。

未读消息提示框位置调整，不遮挡旺铺主体区域。

用例模型和角色关系

之前：

之后：

可以明显得看出，系统不再提供设置自动发送消息到前台的功能，也就是说，访客在浏览旺铺过程中，弹出的对话框一定是卖家主动发起的消息，而不是系统设置的系统消息，减少了无端的干扰，从而改善了买家用户体验。

交互功能改良之后，下面进行视觉上的优化。

视觉目标：

更商务更简洁

初步风格制订

从目前设计中盛行的微渐变出发，抛弃了老版中采用较大色块及强烈渐变的风格，这样视觉上会显得更平一些。

运用情绪板，提取了认为比较适合的颜色，用于最初风格的设计，为了在整体页面中对企业在线的角色进行一些弱化，饱和度上也有所减弱。

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

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

不同颜色的确定

之前企业在线皮肤共有12套，颜色过于丰富，为了达到更为简洁，整体协调的目标，在颜色上进行了调整和筛选。

努力做到在满足让用户有多种选择的同时，又不至于出现颜色过于杂乱而产生困惑的情况，于是收集了当前关于企业在线颜色版本使用的相应数据。

最终保留了使用数最高的前5位颜色，另外增加了一款灰色系，将灰色版本设置为默认选项。

这六款颜色分别是灰，蓝，绿，红，橙，紫。

在颜色的选择上，进行了多次调整，既考虑之前老版的用色，又参考现有旺铺模板库中不同颜色类型，与之前确定风格版本的颜色饱和度相近，尽量选取与该色系旺铺各版本都能较好协调搭配的颜色

位置调整

企业在线是基于web浏览器的即时通讯工具。

目前即时通讯工具的形式多样，它的展示形式是以网页为媒介。

常见的即时通讯工具的web版本，如webqq、web版XXHI，这类在线IM主要的功能局限于即时的交流沟通，侧重点在消息与文件传输等少数功能。

针对社区、论坛以及普通网页开发的即时聊天插件。

比如xtalk，用户打开网站后，可以看到在网站右下角生成的一个聊天窗口，可以跟同时浏览该网站的用户进行即时的交流。

这种WebIM插件旨在提高网站用户的活跃度，用户在获取网站信息同时，还能同时和对同样话题感兴趣进行即时交流，深入挖掘网站的互动潜力。

展现方式主要有浮动列表式，浮动图标式，浮动窗口方法和固定图标方式。

为了对主体区域减少干扰，很多收起或隐藏到页面的顶部、右侧和底部。

比如facebook的聊天工具，是采用固定方式，位于页面右下方。

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

弹出对话框位置调整，之前弹框默认位置没有固定，现在调整为与企业在线顶部平齐，更好体现整体性，更加整齐规范

最终效果：

黄页：

旺铺：

小结：

从用户的角度出发，用数据做依据，在纯粹的视觉设计和用户体验之间找到一个平衡点，过程可能会需要一些取舍。

不能忽视每一个小细节，有时候这些细小之处正是决定用户体验是否完美的关键。

BY:

时光真疯狂

良知塾实战设计分享：

【实战设计】快速搭建节日促销专题