淘宝 产品设计

2017-03-15 18:23 18882

“万能大淘宝”最新客户端原来是这么设计出来的

刘博

面对互联网产品的日益变化和用户的不断成长,淘宝在经历了移动互联网爆炸式的发展后,是时候全面升级了。最近,淘宝推出全新手淘客户端:新的品牌理念,更流行的观感,更友好的体验,淘宝无时无刻不在传递更年轻的品牌精神。

同时,这也是手淘首次以设计为主导进行的版本升级。在历时很长的项目过程中,淘宝总结出了六点设计理念——原来淘宝是这么做设计的:

 

1、视觉吸引:时尚而缤纷,充满生机与活力

第一时间进入视觉的往往是颜色,原来扁平单一的色彩需要更加时尚年轻化,色彩缤纷时尚、明亮亲和、重点突出。颜色上,淘宝使用渐变融合样式,从中不断调试最合适自己的渐变色度——充满生机活力还要友好。在颜色变化时,需要每位设计师对色彩高度敏感与把握,调不好就回到十年前,调得好就现代化,调得浅亮易粉嫩刺眼,调得深暗易厚重不通透等,这都会影响用户的观感。同时,渐变色在一些操作功能上也起到引导作用,按钮的渐变或加立体大投影,增强点击引导,比如登录、弹窗按钮、加购、关注等业务需重点引导的操作。淘宝还设定了文本的功能性颜色使用,比如普通正文为黑,辅助为灰,连接色为蓝,重提示为橙等用户普遍认知的功能色。基础链路界面定义使用淘宝橙主色样式,不同场景如不适用可微调,行业可根据自身品牌色调整,饱和度明度相同、渐变角度统一即可。

1) 缤纷丰富的调色板

 

2) 使用色升级为渐变,根据不同语义、行业自有品牌色用色
 

3) 淘宝品牌色(基础色)的渐变使用
 



4) 缤纷多彩的渐变使用
 

 2、浏览舒适:视觉扁平、视觉呼吸、简明统一、节奏韵律、高效浏览

视觉扁平:梳理手淘框架结构及表现层,整体视觉框架尽可能扁平处理,减少多余元素,用颜色和模块区分出不同层级的内容,能用一层元素区隔就不用第二层。比如信息卡片去掉了阴影,分割线减少及统一浅色值,板块分割统一参数这些细节,让内容更清爽的呈现,让用户清晰关注到不同即可。

 

视觉呼吸:图文组合板块适当增加空间,调整到最舒适平衡的视觉结构,有视觉呼吸感,让用户在购物浏览时处于高效及相对舒适状态。比如像我的淘宝改版,设计师进行的视觉呼吸的常态工具卡系列设计,就很符合设计理念。
 
我的淘宝内容卡片

简明统一:不增加结构的复杂性,不增加用户的认知成本,整体保持一致的韵律感。一个页面3个以内版式最为合宜。尽量将同类型场景、内容模版统一,达到简明统一的效果。比如行业模块入口的统一方式,解决用户对同类型内容的认知。比如微淘的内容流卡片大结构的统一富文本不同的变化。
 
首页业务入口卡片(概念稿)
 
微淘内容流卡片

节奏韵律:个人经验判断一般眼球同时获取信息不超过3个,加上手机屏幕宽度有限,规划模块分割尽量是1至3列的空间展示,由主到次的业务级别往密排列,有规律可循。
 

视觉:弱化和减少视觉分割和格子,由大及小的V型业务模块的视觉流。
业务:从疏到密的业务排序,有业务级别的规律展现模块。

 
设计概念稿

高效浏览:整体纵观的视觉浏览体验顺畅,考虑整体性的韵律感及浏览商品的高效视觉流,减少用户眼睛太多纵横交错及断点的转动。
 
设计概念稿

3、内容立体:结构立体、动态传达

在纵向纬度上,增加信息展示空间、丰富业务展示形式,让信息结构更加多元立体化,比如主图片更大、卡片异形效果等。通过入口自身形式和风格动态传达业务特色,比如视频、电影、直播内容,富媒体的本质还原,动态引起用户好奇心,展现形态丰富的内容流。还有页面动效逻辑的转场、界面滚动的缓和动画也需要一并升级,达到手淘整体立体生动的效果。

 


设计概念稿


商品详情页

4、最优平衡:不同系统/业务处理,最优呈现决策

第一点根据不同系统能提供的效果特性做各最优的设计处理,进行最优的平衡决策,比如iOS系统可以做毛玻璃效果,可应用在界面里做最好的视觉呈现。而Android系统不能做毛玻璃效果则变通设计手段,平衡各种细节,尽量达到同样期望通透柔和的效果。

iOS:
1)底部导航栏升级,图标统一细线条,增加淘字新功能认知,以及社区的发布加号也统一圆形。
2)底部背景样式在iOS系统下根据毛玻璃效果展示,滚动透背效果更加。因为毛玻璃效果自带灰色样式,已经有了上下模块之间的区隔效果,所以去掉了背景的顶部分割线。

Android:
底部背景样式因系统无毛玻璃效果,设计上则做白色微透明度效果,顶部加半透明灰色的分割线,整体会稍微通透柔和。

 

第二点根据业务不同特性以及强调的功能特点而殊加处理,比如搜索业务强调的是搜索,那么就要突出搜索的样式,淘宝这次改版搜索背景色调为透明透底色,融合美观,也不会过于突出(见首页效果),但是在进入搜索场景下这个核心功能的搜索框背景就不能那么透明了,而是要清晰突出。还有店铺页面的搜索亦如是,因为店铺可以定制背景图,考虑图片比较花哨不可控的情况,搜索框背景色透明值要低。
 

5、框架统一: 整体框架,统一认知

梳理框架统一了三个层次的逻辑,首页5个一级导航的统一框架,二级页面的普通导航统一框架,以及特殊行业的导航统一框架。也为下次更进一步的升级做好铺垫。

 

6、基因渗透:设计语言渗透各链路

根据单点设计元素组成系列形成一套设计语言,全面链路的应用设计样式/组件DNA,形成手淘产品自身设计语言风格,每个业务根据规范应用及灵活变化,掌握及提取风格基因去渗透在各自设计中,形成完整的新淘系面貌,共建完成统一的视觉体验,给用户统一的品牌认知。每个设计师的做法都有出入,所以必须反复沟通设计理念及规范的一致理解,反复走查优化来达到产品UI大统一的形象。

比如全局填充元素一统渐变色:

 

全局按钮控件一统全圆角风格:
 

设计该如何推动落地

设计师的共建

在整个升级过程中,淘宝会听取各位设计师遇到的问题情况而做微调整,各业务整体的设计除了符合基础规范更多是围绕设计理念去设计共建,完成自己负责的业务设计升级。一些手淘组件也需要大家一起共建,收集各业务使用到的组件场景有什么需求,考虑各种情况去统一以及拓展使用,满足各类业务需求下统一体验,比如底部导航组件、弹窗、评论组件等。淘宝也会推动设计师负责某块组件的升级,在一起进行更深的讨论,有助于更多设计师的全局考虑,以及更深一步参与到升级项目中来,更深的理解设计理念去执行,达到设计师们一起共建的结果。比如全局标题导航栏的4位设计师共建、卡券包、图片切换的更多样式、为空情感化组件等。

 



开发的协作

设计全面改造完,最困难的部分是推动起来还原完美落地,因为这是淘宝第一次设计主导升级的大版本,投入了很多开发资源支持,工作量非常庞大,每个页面每一个设计元素都要升级,非常细碎繁杂。除了基本的日常升级我会评估重复性高的设计做成开发组件,跨业务推动架构组开发以及业务开发技术配合优化与统一,并推动一些技术的调整,也理出了很多隐性问题便于迭代。比如标题导航栏就涉及Native、Weex、H5等技术,都要不同程度的去推进达到统一的视觉效果。此外,设计师应该考虑开发还原度成本及效率的问题,其中很多技术也值得设计师参与学习研究。

 

从很多角度看待和思考,以淘宝大容器的设计出发,设计与执行复杂的平衡,一切的细节品质都因一些信念去推动,不断的精雕细琢,不断的推进开发解决问题落地,主动求变,积极推进。为了用户更好的体验,大淘宝也是很拼的。
点赞

文章评论

才可参与讨论

r8rCbRFkE8

251天前

1

人多了没事 ,闲得慌

互动通

热门招聘
  • 北京
  • 上海
  • 广州
  • 其他

本周新增职位数:32个

☆ 全国招聘服务,请致电 010-85887939

意见反馈

用户注册

已有账号?

用户注册

忘记密码

无法找回? 点此申诉

忘记密码

无法找回? 点此申诉

账号申诉

已有账号? 立即登录

信息已提交:

我们会在1-3个工作日内审核完毕,并用
邮件通知您,请耐心等待,谢谢