案例实战!浅聊淘宝闲鱼发布界面的两次改版 - 优设网 - UISDC

案例实战!浅聊淘宝闲鱼发布界面的两次改版

2015/12/25 12330评论区

taobao-xianyu-ui-redesign-1

编者按:建议刚学UI的同学多看这类改版经验总结,提前学习交互设计的知识,在求职时能加不少分。习惯靠经验/感觉做设计的新人也别放过,这种实战的案例结合书本看,能帮你更透彻地理解那些设计原则。不多说了,直接看文!

讲交互设计的书里有一本很有名的《简约设计》(《Simple and UsableWeb, Mobliel, and Interaction Design》),相信很多设计师都看过,里面教了一个如何简约四策略。为自己的设计做减法,做一个简单的设计,基本成为一个设计师自我修养的重要信条。但是简单这件事啊,没那么简单(唱),民主社会的规则并不是一句少数服从多数。

闲鱼APP发布流程的第一次改版,也是从淘宝二手变身闲鱼的第一次发布交互结构上的大改变。下图是老版二手APP发布从入口到发布界面的样式,当时二手的APP还是采用抽屉式导航,而发布入口就藏在导航中的一项。

1xx20151225_

发布主体界面在纵向空间上分了两层,基本上就是一个很长的表单,列出各项希望卖家可以尽量填入的信息。意图上其实很明显,就是希望收集到尽量多的格式化信息,用于商品页面的信息展示,帮助买家决策购买,促成交易。当然不同项信息的优先级是经过考虑过的,重要的信息,如图片、标题和价格等项目排在了第一层,其它放到了第二层。不过第二层的信息项,需要发布用户主动去触发(向上拨动)才会出现。

对老版的淘宝二手发布设计改版很快就定了两个目标:

  1. 要让用户能更简单清晰的完成发布操作;
  2. 成为闲置(二手)商品发布的行业标准。

目标似乎没有任何问题,设计方案的主要思路也很快就出来了:将发布流程拆分步骤,一步一步引导用户填写信息项,每一个流程都尽量合并同性质的信息项,简化每一步的内容,流程分解为:

  1. 宝贝图片添加
  2. 宝贝相关信息填写
  3. 宝贝价格信息填写

基于每一个步骤,方案上也精心去设计,包括设计了一个醒目的提示区,试图穷举各种发布过程中用户会遇到的情况,给出对应的提示来引导用户完成发布。

2xx20151225

但是上线结果却不尽如人意,这个版本的方案上一个很大的问题就是对于“更”简单清晰的发布流程,在设计上的主观意愿过强,试图让用户接受一种由我们自己定义的流程,而忽略了用户在真实环境下的体验。把一件事分成几个步骤,以此达到简化的目的,但实际上,并没有从用户的角度上去客观分析“这件事”本身的意义,就已经进入一个。另外,预测用户行为,让系统来告知用户下一步做什么的方式似乎很友好,但是你又怎么知道用户是不是讨厌这种被牵着鼻子走的人呢,就像大部分用户根本不会看说明书,只想拿过来就用。

还有一个问题,和之前的老版发布流程类似,我们试图让用户尽量多的精准的填入相关的发布宝贝信息,因为我们习惯于丰富详尽的宝贝信息有助于促进成交这样一个概念,这相当于把动销的压力转嫁给发布的用户。更不用说冗长的步骤流程,在用户没有强烈意愿的情况下,带来的环节间用户流失,很大一部分用户不是在做一件非做不可的事情。

3xx20151225_

我们对闲鱼的发布进行了第二次改版,在第一次改版获得的事实依据上进行思考。把向用户索要信息改成与用户对话的过程,对话是在沟通,交换信息。信息的接受有一个由简到繁的过程,能更好被吸收。理解这个过程,是设计思维的一个螺旋提升,决定了这种信息交换的基本交互结构,不是一次索要,而是一场对话,是从一种主观的决断到客观对待的过程。对话,要说倾听者明白的语言,说他想听的话。我们决定:

  1. 减少所有不必要的填写内容;
  2. 在发布入口做好分流引导,保证进入人群的目的效率;
  3. 整合所有步骤,尽量将需要填写的内容集合在一屏之内。

4xx20151225_

所谓不必要的填写内容,是指像新旧程度这种买家强调需要,但是非职业卖家在发布时根本无法判断,即使填写也是非常主观的内容,既然会让发布用户疑惑犹豫,那么就去掉。对于一些不能去掉的填写字段,采用渐进出现的方式展现给用户,比如用户进入价格填写时,才展现原价和邮费等信息。隐藏是为了适时的出现。

而在方案的客观性上,也要有一些方式来获得事实依据。比如数据分析,考察标题和描述内容填写的重复性,作为标描合一的数据依据(由于搜索原因未上线);比如用研,把设计方案拿到用户小调研里做快速的用户测试,收集反??;在一些新功能(不谈钱)引入的切换交互上,借鉴一些已经存在的被用户接受的交互模式。

对于发布入口的设计也有多次争论,是让用户在一次点击就进入发布界面,还是像微信一样,在朋友圈的发布入口设计了一些指对性的选项。最后上线事实说明,在发布入口完成一些指对性的操作进入发布流程,可以发布成功率的促进有明显的效用。

5xx20151225_

当设计师在产出设计方案时,习惯性的总是从自我经验出发,主观的下结论,这是一种追求效率决策的本能。我们总是擅于把毫无关系的两件事情关联起来,然后认为互为因果。但是这样的联系可能是错的,或者说可能被错误的套用。设计师从一个自我体验式的方式去分析问题,在自我的纠结中,提出一个主观的设计方案,俗称“憋大招”。

所以,我们如何来做一件简化设计的事情?很重要的一点就是在简化的点上要做到尽量的客观。所谓的客观就是要围绕用户事实的依据。以用户为中心的设计,是要以用户事实为依据的设计。作为设计师,我们总是希望马上开始出设计方案,特别是习惯性倒推的工作流程里留给设计师的时间非常少。但是克制自己非常重要,太早设计意味着会遗漏重要的见解,甚至设计思路会完全错误,因为这种反应下的思维方式基本是一种自我经验式的思维。设计需要以用户心理、用户行为相关的客观事实为依据去执行,而非以一种自我体验的方式。

  1. 确定所有事情原因的优先级是开始执行的第一步;
  2. 证明这些原因的真伪(即所谓寻找真正的用户事实)。

设计师如何获得事实的依据,在此依据上讨论与设计:

  1. 数据事实的分析(达成共识的重要基?。菏占?、分析数据、沉淀数据,尝试用数据变化的维度来记录设计的整个演化进程;数据作为目前公司被普遍的一种考量维度,已是一种团队可以共同讨论的重要语言;
  2. 各种渠道与方法的用研:各种用户研究的方法(快速小调研、焦点小组、A/B test、用户反馈系统、社交媒体的反?。?;
  3. 利用好成熟的交互模式(效率与成本,已被证实的通用交互);
  4. 专家走查(启发式评估),固定的专家评审,避免常规的错误。

其它的小撇步:用概念图将系统视觉化;快速的原型产出参与测试,用测试结果来说明事实,来设计;边做边验证,但一定要验证,无论对错都是指导下一个方案的经验,工作并不是中止在这一次的方案上。

设计方案并不是最终的目的,一次次改版是我们不断在向真实的用户需求靠近努力,利用一次次的方案寻找真实才是最重要的,这么说来,方案只是接近用户的手段,得到需求洞见才是目标。

欢迎关注淘宝UED的微信公众号,第一时间获取设计经验!

taobaouedqr

【淘宝的设计师和干货】

双12背后的设计哲学:
《形色意三???!淘宝2015″双12年度盛典”设计浅谈》

阿里资深视觉设计师访谈:
《优设访谈!阿里资深设计师的自学设计之路》

阿里实习生的职业思考:
《消失的界面!未来的设计师该从这四方面提升竞争力》

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网ag亚游集团“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量106万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.offshoring-digest.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/taobao-xianyu-ui-redesign

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里