马云爸爸的淘宝升级了,小伙伴们是不是都木有看出来捏?不过也难怪,设计师的世界你不懂。下面就由小编来给你说道说道他们都改了些啥!
把大象关冰箱分为三步:1、打开冰箱门;2、把大象放进去;3、关上冰箱门;
呵呵哒~淘宝UI升级也分三步:1、用户画像和分析;2、设计概念稿;3、落地实施
第一阶段,用户画像
淘宝用户研究数据分析出主力人群越来年轻化,通过典型画像分析出年轻化、丰富化、个性化的形象标签,为改版手淘奠定了新的基调及品牌语言:活力、亲和、鲜明。产品体验设计需有亲和力,能带给用户生活和情感上的共鸣,贴心、自然、生活化。例如产品设计应该是亲和的,舒缓的提示动态、亲切的文案话术、舒适的颜色搭配、自然的视觉流等。
第二阶段:设计概念稿(和搞概念车差不多)
首先是设计师一通分析,如上图,我有些纳闷了,上一版淘宝的APP有这么差劲吗?
然后引入了6点设计理念:视觉吸引、浏览舒适、内容立体、最优平衡、框架统一、基因渗透,哈哈~看不懂了吧,看不懂就对了,来来来,年轻人,小编借花献佛给你普及普及知识。
视觉吸引:时尚而缤纷,充满生机与活力,第一时间进入视觉的往往是颜色,原来扁平单一的色彩需要更加时尚年轻化,色彩缤纷时尚、明亮亲和、重点突出。颜色使用渐变融合样式,我们一直不断的调试最合适淘宝的渐变色度,要充满生机活力及友好。
浏览舒适:视觉扁平、视觉呼吸、简明统一、节奏韵律、高效浏览
梳理手淘框架结构及表现层,整体视觉框架尽可能扁平处理,减少多余元素,用颜色和模块区分出不同层级的内容,能用一层元素区隔就不用第二层。
视觉呼吸:图文组合板块适当增加空间,调整到最舒适平衡的视觉结构,有视觉呼吸感,让用户在购物浏览时处于高效及相对舒适状态。比如像我的淘宝改版,设计师进行的视觉呼吸的常态工具卡系列设计,就很符合设计理念。
简明统一:不增加结构的复杂性,不增加用户的认知成本,整体保持一致的韵律感。一个页面3个以内版式最为合宜。尽量将同类型场景、内容模版统一,达到简明统一的效果。比如行业模块入口的统一方式,解决用户对同类型内容的认知。比如微淘的内容流卡片大结构的统一富文本不同的变化。
节奏韵律:个人经验判断一般眼球同时获取信息不超过3个,加上手机屏幕宽度有限,规划模块分割尽量是1至3列的空间展示,由主到次的业务级别往密排列,有规律可循。
内容立体:结构立体、动态传达
在纵向纬度上,增加信息展示空间、丰富业务展示形式,让信息结构更加多元立体化,比如主图片更大、卡片异形效果等。通过入口自身形式和风格动态传达业务特色,比如视频、电影、直播内容,富媒体的本质还原,动态引起用户好奇心,展现形态丰富的内容流。还有页面动效逻辑的转场、界面滚动的缓和动画也需要一并升级,达到手淘整体立体生动的效果。
最优平衡:不同系统/业务处理,最优呈现决策
第一点根据不同系统能提供的效果特性做各最优的设计处理,进行最优的平衡决策,比如iOS系统可以做毛玻璃效果,可应用在界面里做最好的视觉呈现。而Android系统不能做毛玻璃效果则变通设计手段,平衡各种细节,尽量达到同样期望通透柔和的效果。
框架统一: 整体框架,统一认知
梳理框架统一了三个层次的逻辑,首页5个一级导航的统一框架,二级页面的普通导航统一框架,以及特殊行业的导航统一框架。也为下次更进一步的升级做好铺垫。
基因渗透:设计语言渗透各链路
根据单点设计元素组成系列形成一套设计语言,全面链路的应用设计样式/组件DNA,形成手淘产品自身设计语言风格,每个业务根据规范应用及灵活变化,掌握及提取风格基因去渗透在各自设计中,形成完整的新淘系面貌,共建完成统一的视觉体验,给用户统一的品牌认知。
第三步:设计落地
我这里定义好淘宝产品新风格基调,以及设计理念方向,未来很长段时间大家都遵循六个理念进行。在升级过程中一直积极听取各位设计师遇到的问题情况而做微调整,各业务整体的设计除了符合基础规范更多是围绕设计理念去设计共建,完成自己负责的业务设计升级。一些手淘组件也是需要大家一起共建,我和核心成员收集各业务使用到的组件场景有什么需求,考虑各种情况去统一以及拓展使用,满足各类业务需求下统一体验,比如底部导航组件、弹窗、评论组件等。我也会推动设计师负责某块组件的升级,在一起进行更深的讨论,有助于更多设计师的全局考虑,以及更深一步参与到升级项目中来,更深的理解设计理念去执行,达到设计师们一起共建的结果。比如全局标题导航栏的4位设计师共建、卡券包、图片切换的更多样式、为空情感化组件等。
哈哈~下图就是成品了
你是是耳目一新的感觉,还是揉了揉眼睛,开始怀疑人生了!
盛世阳光秉承着专业、贴心的服务理念,用心、用智、用情对待每一位新老客户。无论是在网站、app还是游戏领域,你都能看到我们的身影,旨为为企业互联网+新模式带来更多灵感与机遇。开创行业发展趋势,引领行业创新潮流,为企业改造升级出谋划策,我们的努力会让你明白“适合的,才是最好的”。互联网的盛世,岂能没有阳光同行?
盛世阳光手机版网站 盛世阳光微信公众平台