沧州信息港
旅游
当前位置:首页 > 旅游

MyAlibaba後台首页及导航风格改版

发布时间:2019-07-11 09:53:20 编辑:笔名

2012年第三季度时,我们对海外卖家版My Alibaba(以下简称MA)首页进行改版,当时MA后台的视觉已有规范,但很陈旧,如果按照原来的规范进行设计,也能顺利的完成需求;但我们的前台页面经过2012年轰轰烈烈的改版已经有了全新的面貌,风格也趋向于平面、宽松、简约;后台还是多年未变的样式,体验相对陈旧而且不统一,同时集团提出work in Alibaba的概念,也是时候对后台进行一些改版优化了。

当然视觉风格不统一不是发起一个改版项目的目的,根本是要分析目前的界面存在的问题,通过解决问题进行优化,改版过程分成两个步骤。

首页框架结构及样式

导航栏

先是进行了老页面的框架结构及样式的改动。

在国际站中会员类型繁多,在业务上为了满足每个会员阶段中的不同的需求,从而出现了多种版本的后台首页,在这过程中出现了历史遗的留问:风格差异越大,用户体验上毫无延续性。在设计前简单分析了后台首页功能本身作用于操作体验的平衡性。

首页更多是承载关键性动态提示、相关信息层级入口和用户操作的主行为。

比起前台产品信息的可视化展示、后台更多的作用是【工具】。

在交互阶段从新调整了MA后台信息结构。

把信息模块中的需要强化的【待办事项】和【会员生命周期引导】主要价值点内容放在了核心位置,在用户从免费会员到基础认证会员,再到成为收费会员过程中这个结构始终不会有变化。

在之前的后台有多个不同的尺寸版本,按DPL规范中的栅格公式从新划分了左右框架。因后台子页面暂时不改动宽度,暂时采用了960px,但为后续改动为990px做了准备。

把关键信息内容展示在屏,尽量显示在500~600之间,现访问国际站的用户中纵向分辨率800以内设备的占据70%以上。

样式风格:首先要考虑使用我们站后台的用户群及商业属性。用户多为男性,属于贸易类管理后台。所以体现更加工具类特性的设计。在设计上尽量做了精简,采用了全站统一式的灰色框体,也把信息块之间用框体圈了起来,让信息结构简洁明了,也体现扁平的效果。

买家头部搜索框:考虑到搜索不是用户在后台的主行为,同时为了减少用户在操作中的干扰,弱化了整体搜索框。

终设计稿:

此后单独做了导航栏的改版。

把当前的ma后台大多数页面分为两个模块:一级二级导航区、内容操作区,从缩略图可以看出目前的设计,导航的视觉层级高于内容操作区。

为了重新确定界面视觉层级,先问自己三个问题并进行回答:

1)用户来到MA后台某个界面如产品管理页主要目的是什么?

对自己发布的产品进行管理(包括查看发布的产品是否通过审核、对未通过审核的产品进行等)

2)用户来到MA后台某界面如何行为?

一般是先查看自己关心的内容如审核未通过的产品,然后进行相应的操作如或删除,用户想要离开本页面时,会去找导航

3)导航的作用是什么?

告诉用户MA后台有那些内容可管理,当前你在那个页面,当用户需要离开本页面或迷路时,能快速找到他想要去的页面

从以上对问题的解答,可初步得出结论:

MA后台的导航是可以弱化的,但要固定导航的位置,同时清晰表达当前的位置

为了验证这个分析思路的合理性,我还需要看看其他站的做法:

1、支付宝首页的改版,老版的视觉层级的时导航及推广的活动,问了周围的同事,来到支付宝首页常用的功能是什么?基本上作为老用户的我们主要是进行登录操作;新版首页针对新用户强调了支付宝的核心价值,针对老用户强调登录操作,而原先视觉层级很高的导航被弱化,但仍然不失导航的作用。

2、Google+界面典型的以内容为中心,导航在侧边弱化,用户需要切换时也能快速找到,同时也清晰的表明了当前的位置

经过前面的界面分析及竞品分析,后面就是根据得出的结论进行设计了,在设计过程中,视觉需要解决的主要问题是,导航被弱化后,如何才能做到内容和导航的分离,使用户来到MA后台后,能快速定位到自己关注的内容部分

我们前后也尝试了好几种方案来达到这个目的:

版本1:将一级导航和页头统一用灰色底,形成一个整体,和内容分离

版本2:将导航弱化成灰色,100%通栏设计

我们考虑MA首页及子页面的适用性,得出设计终稿

在项目推行过程中,因为后台涉及到多个业务方,而且导航从原来视觉层级,降到很弱,变化很大,大家虽然觉得前面的分析很有道理,但还是不免担心因为视觉层级降弱,用户找不到导航;基于业务方的接受度及用户的接受度,我们借助用研团队的调研工具来验证那个设计更优:

用研同学选取4000名海外用户,将新老版本图片分别发给2000名用户,设置两项任务:

1、首先看到的是MA首页,需要对自己的产品进行管理,让用户点击图片上的区域(验证一级导航)

2、进入产品管理页面,用户需要发布新产品,再次点击(验证二级导航)

从调研结果看:

在内容定位上,新版本导航用户点击率高于老版本

用户寻找导航的速度,新版本也大大高于老版本。

用研的数据,验证了新设计的体验更优于老版本,对后面我们推进这个设计方案落地执行并上线,起了很大的帮助。

这个项目整个过程比较完整,我同时扮演了一次PM的角色,受益很多,让我看到从视觉专业角度想办法促进产品体验,我们的设计是可被衡量的,设计师不仅仅是资源,我们也可以主导发起需求,来达到用户体验提升甚至促进业务目标达成的效果。

(作者:尹哲、陈雪梅)

来源:

莆田址大全

怎么加入微信小程序
小程序怎么弄
微信小程序怎样使用
友情链接
海南小儿耳鼻喉医院哪家好 海南碎石中心医院哪家好 深圳疼痛科医院哪家好 江门正畸科医院哪家好 江门牙周科医院哪家好 江门口腔粘膜科医院哪家好 江门康复科医院哪家好 湛江中医内分泌医院哪家好 湛江肝病科医院哪家好 茂名运动医学科医院哪家好 茂名体检科医院哪家好 汕尾胸外科医院哪家好 汕尾泌尿外科医院哪家好 汕尾微创外科医院哪家好 汕尾眼整形医院哪家好 阳江职业病科医院哪家好 阳江肿瘤内科医院哪家好 阳江放疗科医院哪家好 清远肿瘤综合科医院哪家好 东莞超声科医院哪家好 东莞五官科医院哪家好 东莞预防保健科医院哪家好 中山心外科医院哪家好 揭阳心脏科医院哪家好 青岛小儿心内科医院哪家好 青岛小儿血液科医院哪家好 鄂州司法鉴定科医院哪家好 鄂州双相障碍科医院哪家好 荆门泌尿外科医院哪家好 荆门眼外伤医院哪家好 荆门中医肿瘤科医院哪家好 孝感放疗科医院哪家好 荆州口腔修复科医院哪家好 荆州中医肾病内科医院哪家好 咸宁儿科医院哪家好 恩施妇产科医院哪家好 恩施其它科室医院哪家好 淄博有哪些心血管外科医院 恩施肿瘤康复科医院哪家好 恩施小儿呼吸科医院哪家好 仙桃中医五官科医院哪家好 枣庄有哪些耳鼻喉医院 仙桃超声科医院哪家好 仙桃急诊科医院哪家好 仙桃其他医院哪家好 东营有哪些中医内科医院 天门中医老年病科医院哪家好 天门中医内分泌医院哪家好 天门双相障碍科医院哪家好 神农架中医妇产科医院哪家好 济宁有哪些小儿呼吸科医院 开封整形科医院哪家好 泰安有哪些麻醉科医院 开封烧伤科医院哪家好 洛阳核医学科医院哪家好 日照有哪些生殖医学科医院 徐州有哪些功能神经外科医院 苏州有哪些老年病科医院 邓州民族医学科医院哪家好 商丘肿瘤外科医院哪家好 苏州有哪些角膜科医院 南通有哪些五官科医院 信阳脊柱外科医院哪家好 周口儿科医院哪家好 周口小儿皮肤科医院哪家好 连云港有哪些法四医院 淮安有哪些外科医院 镇江有哪些医疗美容医院 攀枝花遗传咨询科医院哪家好 宿迁有哪些肿瘤内科医院 宿迁有哪些肿瘤康复科医院 泸州医学影像学医院哪家好 宿迁有哪些神经外科医院 德阳脑外科医院哪家好 遂宁中医皮肤科医院哪家好 嘉兴有哪些体检科医院 邯郸有哪些实验中心医院