2012年第三季度，我们改版了我的阿里巴巴海外卖家版（以下简称MA）的首页。按原规范设计也能顺利满足要求；而我们的首页经过2012年的大力改版后，有了新的面貌，风格趋于扁平化、松散化、简洁化；后台还是多年不变的风格，体验比较陈旧，前后矛盾。同时，集团提出了阿里巴巴的工作理念，是时候对后台做一些修改和优化了。当然，不一致的视觉风格并不是启动改版项目的唯一目的。最根本的是分析当前界面存在的问题，通过解决问题进行优化。修订过程分为两个步骤。首页的框架结构和风格导航栏首先改变了旧页面的框架结构和风格。国际站的会员有很多种。为了满足各会员阶段在业务上的不同需求，出现了各种版本的后台主页。在这个过程中，一直存在历史问题：风格差异越大，用户体验就越没有连续性。在设计之前，简单分析一下后台首页功能本身对操作体验的平衡。首页更多的是承载关键动态提示、相关信息顶级入口、用户操作等主要行为。相对于前台商品信息的直观展示，后台更多的是一个【工具】。重新调整了交互阶段的MA背景信息结构。将需要加强的信息模块中的【待办事项】和【会员生命周期指导】的主要价值点放在核心位置，在用户从免费会员到基本认证会员的过程中使用该结构，再到付费会员，始终没有变化。在之前的背景下，有多个不同尺寸的版本，根据DPL规范中的网格公式重新划分了左右边框。因为后台子页面暂时不改变宽度，所以暂时使用960px，但为后续改为990px??做准备。在主屏上显示关键信息内容，尽量显示在500-600之间。访问国际网站的用户中，垂直分辨率低于800的设备占比超过70%。#p#Style风格：首先要考虑我们网站后台的用户群体和业务属性。用户多为男性，属于贸易在线管理背景。因此，它体现了更多的工具类特征的设计。设计上尽可能的简化了，整个站点使用了统一的灰色框架，信息块也用框架围起来，信息结构简洁明了，也体现了扁平化的效果。买家头上的搜索框：考虑到搜索不是用户在后台的主要行为，为了减少用户在操作上的干扰，整体弱化了搜索框。最终设计稿：此后导航栏单独改版。将当前ma后台的大部分页面划分为一级二级导航区、内容操作区两个模块。从缩略图可以看出现在的设计，导航的视觉层次要高于内容操作区。为了重新确定界面的视觉层次，首先问自己三个问题并回答：1）用户来到MA后台某个界面的主要目的是什么，比如产品管理页面？对自己发布的产品进行管理（包括查看发布的产品是否通过审核，对未通过审核的产品进行编辑等）2）用户来到MA后台某个界面时有什么表现？一般先查看自己关心的内容，比如未通过审核的商品，再进行相应的编辑或删除等操作。当用户想离开这个页面时，他们会去导航3）导航的作用是什么？告诉用户MA后台可以管理哪些内容，你当前在哪个页面，当用户需要离开这个页面或者迷路时，他可以快速找到他想去的页面#p#来自answers针对以上问题，可以得出一个初步的结论：MA后台的导航可以弱化，但是导航的位置一定要固定，同时要明确当前的位置。为了验证这个分析思路的合理性，我还需要看看其他网站的做法：版本的视觉层次在导航和推广活动方面是最好的。我问身边的同事，支付宝首页最常用的功能是什么？基本上，作为老用户，我们主要是进行登录操作；新版首页对新用户强调支付宝的核心价值，对老用户强调登录操作，同时削弱了原有的高级导航，但依然不失导航作用。2.Google+界面通常以内容为中心，导航在侧面被削弱。用户需要切换时可以快速找到它，它也清楚地显示了当前位置。经过前面的界面分析和竞品分析，后者基于在设计过程中，主要需要解决的视觉问题是弱化导航后如何将内容和导航分离，让用户快速定位内容来MA后台后他们关心的我们也前后尝试了几种方案来实现这个目的：版本1：统一一级导航和页眉灰色背景，形成一个整体，与内容分离版本2:将导航弱化为灰色，100%banner设计***我们考虑了MA首页和子页面的适用性，得出设计定稿#p#在项目实施过程中，由于后台涉及多个业务方，以及导航已经从原来的视觉层次***减少到非常低的Weak，变化很大。虽然大家觉得前面的分析是有道理的，但还是担心视觉层次弱化，用户找不到导航；验证哪种设计更好的在线研究工具：永研选取了4000个海外用户，将新旧版本图片分别发送给2000个用户，并设置了两个任务：1、首先看到的是MA主页，需要查看自己管理商品，让用户点击图片上的区域（验证一级导航）2.进入商品管理页面，用户需要发布新商品，再次点击（验证二级导航））从调查结果来看：在内容定位方面，新版导航用户的点击率高于旧版用户，新版也远高于旧版。通过研究数据验证，新设计的体验优于旧版本，这对我们后期推动本设计方案的落地和上线有很大的帮助。这个项目的整个过程比较完整。同时担任了PM的角色，受益匪浅。它向我展示了如何从视觉专业的角度提升产品体验。我们的设计是可以衡量的。设计师不仅仅是资源。我们还可以引导需求的发起，达到提??升用户体验甚至促进业务目标达成的效果。原文链接：http://www.aliued.com/2013/05/22/1701/
