淘宝2017设计升级：手淘首次以设计为主导的版本升级

面对互联网产品的日益变化和用户的不断成长，淘宝在经历了移动互联网爆炸式的发展后，是时候全面升级了。寒冬已过，杨柳夹岸，艳桃灼灼，迎着春天的气息我们向用户呈现出一个全新的手淘客户端，期望向他们传达新的品牌理念，配合更流行的观感和更友好的体验赋予淘宝更年轻的品牌精神。这是手淘首次以设计为主导的版本升级。

面对复杂的产品改版，设计师犹如妙手回春的医生，需要用专业的手段治理产品里的各种疑难杂症，从内至外顾及各种牵连的细节进行整体治疗，从而让产品更加美观、健康、舒服。在历时很长的项目过程中，我们一步步地将公司的设计战略分解成产品体验方向，从设计概念落地到界面设计语言，在执行过程中又不断地平衡各种设计细节，才有最终的设计产出。所有的改变都是为了给用户营造更加良好体验的购物环境，那我们就先来看看这次升级针对的人群特征。

一、人群特征

淘宝用户研究数据分析出主力人群越来年轻化，通过典型画像分析出年轻化、丰富化、个性化的形象标签，为改版手淘奠定了新的基调及品牌语言：活力、亲和、鲜明。产品体验设计需有亲和力，能带给用户生活和情感上的共鸣，贴心、自然、生活化。例如产品设计应该是亲和的，舒缓的提示动态、亲切的文案话术、舒适的颜色搭配、自然的视觉流等。

二、设计体验方向

根据公司策略、业务、人群的变化，我们进行手淘的设计改版，希望以此进一步提升用户体验。以设计部三大策略：认知减负、内容吸引、品牌渗透，作为高层次体验的指引。针对这三大策略，在改版上我们对当前版本的问题进行分析，同时对这几年的设计方向进行总结。

认知减负

从手淘整体设计上考虑，需要更加突出内容的呈现，在内容化设计上需要更明确的认知，在同类型内容模块的设计表现也需一致，减少过多结构样式的表达，保持一定的韵律感和统一性，给用户内容丰富但结构简明的视觉认知。

内容吸引

从业务和用户角度考虑，设计规划业务内容更立体的展示空间，主次分明，流畅的浏览体验，以及内容的氛围营造、出其不意的惊喜。

品牌渗透

优先考虑手淘大品牌，在视觉表达上不用太突出业务品牌特色，引导业务侧重内容特色。视觉品牌考虑是手淘大一统的品牌感与品质，品牌基因可渗透各链路界面里。

三、设计概念/思路

思路

将手淘视觉体验进行整体走查，分为了框架结构类型、全局通用元素、业务特殊类型进行问题分析。发现整体结构布局、UI元素、业务统一组件以及拓展的设计都有很多优化空间，可塑造更立体完整的品牌形象，以及注入一些品牌性格。整体界面感觉需清晰、连续、舒适、愉悦、完整一气呵成。就好比书法章法的讲究，整体“以章法为先，运实为虚，实处俱灵;以虚为实，断处俱续。点画与点画之间的呼应，字与字之间的顾盼，行与行之间的相映，整体上气韵通达，虚实相生”。对内容重新理解，定义场景，重整框架，新的设计方式将界面呈现全新面貌，给用户整体的感知，达到想要的章法效果，有序可循，有理可依，有清晰的规划迭代。

视觉打法

视觉体验就是最重视人的情绪体验，每一处的设计都能影响人的微妙情绪，点到整的总体感受，我称之为视觉情绪管理。将发现的视觉问题色彩单一、不吸引、分割多、线条多、平静、拥挤等感受归列 3 个主要情绪–单调感、挤压感、无聊感。一一对应优化为缤纷丰富、内容透出、时尚感、简洁缓和、动态情绪、视觉呼吸，引出 3 个新情绪–情绪愉悦、视觉呼吸、好奇惊喜。

六点设计理念：视觉吸引、浏览舒适、内容立体、最优平衡、框架统一、基因渗透

基于以上所述的前期探索引出六点设计理念，梳理清楚视觉的情绪方向，整体考虑表现的韵律美、结构美、优雅的细节等，还要更多思考的是以设计解决业务问题，因为是手淘基础链路整体改版，个人不可能了解所有业务，所以看的更多是手淘整体共性的体验问题，考虑的设计方向或规范须是普适于各基础业务的，当然个别业务特殊情况特殊处理，根据业务本身重要特性该突出的突出该收敛的收敛，每一点UI元素都是经过全局考虑精心斟酌，对于如此庞大的产品包来说多一点元素都是负担，视觉退一步服务于产品内容，使内容更加突出展示及清爽大方，当然在需要视觉氛围重渲染的情况还是该有它的出彩，每一点的斟酌都只为整体品质，点线面的重新塑造手淘新品牌。

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

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

(1) 缤纷丰富的调色板

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

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

(4) 缤纷多彩的渐变使用

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

(1)视觉扁平

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

(2)视觉呼吸

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

我的淘宝内容卡片

(3)简明统一

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