你看到的手机淘宝，是这样被设计出来的

你看到的手机淘宝，是这样被设计出来的

文／宋翔，阿里巴巴无线事业部设计师

从手淘的种子种下开始，随着这些年版本的演进，详情页一直是手淘主干的重要组成部分。 说到它的重要性，主要体现在用户购买产品时一定要到这里查看。 各个品牌和行业的引流也汇聚于此，实现了GMV转化。 可谓是基础交易产品线不可或缺的页面。

历年详情页的版本

回到问题点，再去设计解决问题，从上个版本找痛点。

比如以往的图文细节，都是以PC版为准。 它的缺点是图文没有根据移动端的特点进行设计。 文字太小，移动端看不清楚。 整体图在左边，右边留了很多空间。 空白，整体加载兆字节过大，浪费用户流量等基本问题。

比如，以前BU的所有特色商家都集中在手机淘宝详情页，而特色商家到详情页则以非特色的方式展示。 用户对品牌没有认知，只会记住这个产品，不会记住这个特色品牌。 . 如果从视觉的角度入手，在详情页展示品牌，优质的品牌会在用户购物时在脑海中形成印象，让用户产生好感，形成良性循环，促使用户经常来特色品牌选购心怡宝贝，提高购买率。

还有就是从基础视觉组件的角度进行优化。 比如字体大小很多，没有对应的Style。 模块色彩层次凌乱，主次不分明，没有抓住重点。 组件和文字的上下间距没有自定义标准，整体结构不清晰。 使用写实图片，占用资源包大小淘宝图片空间适配手机，增加细节崩溃率。 没有有序的运行路径，不够连续。 使用透明大阴影的视觉表示来增加系统风险和其他基本问题。

由此可见，“移动端特色”、“突出品牌个性化”、“极致标准建立”是我们改版的重点。

综上所述，啰嗦了一大堆，我们看看具体解决了哪些方案和优化？

移动功能

1 合理、实用、客观

在上一个版本的基础上，我们增加了头图的尺寸，让用户在不同的手机分辨率下可以更广泛地查看图片。 同时去掉了顶部系统栏的常规显示方式，更加节省了手机屏幕的空间。 全新的置顶系统栏，满足了用户的操作逻辑，让宝贝的展示更加直观。 去除了多余的装饰辅助元素，添加了所有的内容。 主要是。 经过测试和实验，我们发现黑色浮层更适合在手机淘宝界面上使用。 因为白色花哨的宝贝背景展示的产品太多，白底黑图标会让用户很难找到返回等操作按钮，影响用户体验。 用户体验，而黑色透明按钮更有针对性。 当用户向上拖动时，全局顶部栏淡出，这样无论用户停留在详情的哪个模块，都会回到上一页。

2 图文细节要有点移动端的样子

从那以后，图形细节的体验就很差了。 问题包括文字浏览太小，卖家设计师不知道移动端尺寸，编辑成图片，文字在移动端压缩后堆积，难以看清. 图片不符合手机特性，尺码表卖家编辑成图片，造成手机上模糊。 这一次，我们与商家团队合作，对这些用户体验痛点进行改造。 我们定义了在移动端应该准确使用的字体大小和颜色，并开放给第三方设计师和合作伙伴。 在图片上也做了清晰度处理，避免出现两端留白的现象，让图片更加开阔，更适合在移动端显示。 此次也加入了卖家自营模块的体验。 这些模块由我们自行定义，卖家直接使用，减少了卖家编辑和技术不专业的问题。 移动端模块上线数月，全新可视化模板直达百万商品，进一步提升图文详情浏览体验。

3 考虑性能和适应性

从头开始设计可以是创造，在已经存在的基础上创造也是一种设计。 以轮播控件为例。 之前我们使用的是手机淘宝的全球公共组件。 全局的好处是整个APP链接保持统一，细节居多。 表头控件可以占用304KB，而系统默认的手机淘宝色系组件可以减少到750倍左右，有针对性的使用视觉样式可以提高性能，降低崩溃率。 我们不遵守规范和标准是错误的吗？ 设计不仅仅是在执行层面，更是在各种约束条件下，能够优雅地解决问题的人。

新版本还降低了宝贝与标题之间视觉分隔阴影的高度。 降低高度的目的也很明确。 过高的透明度和阴影难以区分的视觉形式会造成过多的系统转换，使整个详情页浏览卡顿，而直接区分线方案会使整个页面划分过于直接，尤其是在白色宝贝页面上，会比较明显，就像白衬衫上的黑灰线一样。 设计是一门讲究“平衡”的艺术作品。 它平衡了产品和用户的利益，通过设计在两者之间找到平衡点。

突出品牌个性化

细节一直都是以一种形式展示，产品不同于操作页面，所以不需要过多的装饰展示，需要有条不紊。 这一次，我们在品牌个性化的细节上做了重点，突出了各子公司的品牌，如聚划算、天猫国际、天猫超市、阿里购、环球精选、非常大品牌、淘钱买等特色业务。

品牌个性化视觉推广的目的之一是让用户在从品牌门户输入详情后保持品牌知名度，而不会在浏览时打破隶属关系。

二是逐步培养用户对品牌的粘性。 当用户长时间浏览宝贝页面时，会对信义的产品“品牌”产生化学反应。 品牌日UV活跃，收藏代购GMV提升。

从几家品牌的业务数据来看，聚划算、淘钱购、天猫国际、中国制造、阿里果阿均有明显增长，各占整体GMV的近2%。 天猫超市品牌个性化后，成交率提升了近10%，而且这个数字还在增加。 这是发生在长尾巴中的化学反应。 产品设计不仅注重功能，更注重情感。

在首页逐步筛选商家品牌后可以看到，除了充值和社区产品，只要有独立品牌商家，都可以在细节处露出自己的LOGO，让用户有更强的感知品牌知名度和信任感的提升，帮助商家提高转化率。 后续未公开品牌仍可继续曝光。

极端标准形成

做正确的事比做正确的事更重要。

UI的组成就是组件。 过去，设计完成后没有标准化。 结果，设计开发完成后，还有问题需要修改淘宝图片空间适配手机，形成循环。 副本的每一次修改都是临时解决方案，而不是永久解决方案。 会事半功倍。 垂直业务愿景和开发恢复到标准后，其他开发者可以使用相应的标准组件，而无需开发一套新的，提高了合作效率。

本次改版成功与天猫团队共建。 过去，天猫和手机淘宝详情页的业务逻辑是一致的，但属于两个不同的开发设计团队。 业务团队正在支持各自的产品。 这种可视化组件化可以跨两个平台。 精心设计的视觉交互和开发代码可在淘宝和天猫上通用，形成设计-产品-开发-组件的统一体，实现两端用户体验的一致性，节省人力的重复输入输出提高效率！ 组件共建后，图文细节内存减少，从原来的30兆减少到现在的2兆，性能得到快速提升，交易转化率大幅提升。

组件是基础，是标准，是工匠对设计的态度。 但绝对不是设计的本质。 产品用户体验的提升，恰恰是设计师所要弥补的。

设计驱动的产品创新

设计师不能简单地把自己定位在执行层面，还要积极沟通，促进用户体验的落地和实现。 我们必须站在用户和产品的角度考虑问题。 我和搭档霍仁义一起发明了mini。 在下拉头图的基础上增加了足迹体验，省去了回到我的淘宝查看足迹的繁琐操作。 同时使用下拉头像的手势操作。 从数据上来看，这次新设计方案的推广可以说是详情页推荐场景中PV最高的，日导交易可以说是等同中奖500万每天都有奖。

其次，对产品想得太多，可能会有意想不到的发现。 比如这次在细节上申请的外观设计专利就是一个方面。 太多的创新虽然不会应用到产品上，但也是一种积累。 假设很好，证据更好。

其他体验点

生意依旧井然有序。 在每个版本时间段，做正确的事比设计做正确的事更重要，非设计也是如此。 宝贝细节还有体验优化的空间，比如收藏宝贝时是否可以直接分类收藏，和收藏夹一起打通。 详情中增加评价TAB，避免用户返回评价入口点评价的繁琐操作...

结尾

问题、冲突、解决方案仍然存在于人类的视角和认知中……

在我心中，老虎是玫瑰。

这篇文章够“干”的！ 想和文章背后的“干货”们聊聊？ 下面有二维码，大家可以扫一扫试试看。