存在的问题
1.老版企业在线视觉风格相对现有网站整体风格已有些过时,整体与网站改版后简洁风格不够协调。
2.系统自动发出的消息弹框,对浏览旺铺的买家用户造成较大干扰。
优化目标
1.增加买卖双方体验,特别是减少对买家的干扰。
2.企业在线与现有旺铺样式统一,视觉风格更为简洁。未读消息提示框位置调整,不遮挡旺铺主体区域。
用例模型和角色关系
之前:
之后:
可以明显得看出,系统不再提供设置自动发送消息到前台的功能,也就是说,访客在浏览旺铺过程中,弹出的对话框一定是卖家主动发起的消息,而不是系统设置的系统消息,减少了无端的干扰,从而改善了买家用户体验。
交互功能改良之后,下面进行视觉上的优化。
视觉目标:更商务 更简洁
初步风格制订
从目前设计中盛行的微渐变出发,抛弃了老版中采用较大色块及强烈渐变的风格,这样视觉上会显得更平一些。运用情绪板,提取了认为比较适合的颜色,用于最初风格的设计,为了在整体页面中对企业在线的角色进行一些弱化,饱和度上也有所减弱。
设计了起初3个版本,经过讨论,决定第2款风格更加接近简洁,与网站风格更协调的目标。
风格确定下来,是第一步,在其基础上进行下面的优化扩展。
不同颜色的确定
之前企业在线皮肤共有12套,颜色过于丰富,为了达到更为简洁,整体协调的目标,在颜色上进行了调整和筛选。努力做到在满足让用户有多种选择的同时,又不至于出现颜色过于杂乱而产生困惑的情况,于是收集了当前关于企业在线颜色版本使用的相应数据。
最终保留了使用数最高的前5位颜色,另外增加了一款灰色系,将灰色版本设置为默认选项。这六款颜色分别是灰,蓝,绿,红,橙,紫。在颜色的选择上,进行了多次调整,既考虑之前老版的用色,又参考现有旺铺模板库中不同颜色类型,与之前确定风格版本的颜色饱和度相近,尽量选取与该色系旺铺各版本都能较好协调搭配的颜色。
位置调整
企业在线是基于web浏览器的即时通讯工具。目前即时通讯工具的形式多样,它的展示形式是以网页为媒介。常见的即时通讯工具的web版本,如webqq 、web版百度HI,这类在线IM主要的功能局限于即时的交流沟通,侧重点在消息与文件传输等少数功能。针对社区、论坛以及普通网页开发的即时聊天插件。
比如xtalk,用户打开网站后,可以看到在网站右下角生成的一个聊天窗口,可以跟同时浏览该网站的用户进行即时的交流。这种Web IM插件旨在提高网站用户的活跃度,用户在获取网站信息同时,还能同时和对同样话题感兴趣进行即时交流,深入挖掘网站的互动潜力。
展现方式主要有浮动列表式,浮动图标式,浮动窗口方法和固定图标方式。为了对主体区域减少干扰,很多收起或隐藏到页面的顶部、右侧和底部。
比如facebook的聊天工具,是采用固定方式,位于页面右下方。
由于现在的诚信通用户在旺铺中可设置营销海报,这块banner位置就位于页面右下方,会形成干扰,同时从用户的使用习惯出发,考虑放在页面最右侧,只是企业在线区域的消息提示弹出框位置从左侧调整到上方,不遮挡旺铺和offerdetail的主体内容,只有对于1024px分辨率情况下,默认为收起状态,大于1024px情况下则默认为展开状况,这样既对主体区域减少干扰,又使客户方便点击,随时与卖家进行沟通。
弹出对话框位置调整,之前弹框默认位置没有固定,现在调整为与企业在线顶部平齐,更好体现整体性,更加整齐规范。
最终效果:
黄页:
旺铺:
小结: