官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

Date 2026-04-20 15:28:13

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

阿里巴巴副总裁、中国内贸部总经理汪海在分享时提出 1688 已经从信息平台时代进入数字营销平台时代 1688 整个商业闭环,用户在平台内完成营销与销售的整合。1688 使命也升级为「在数字经济时代,世界上没有难做的生意!」在新的业务形势下,阿里巴巴(1688)主客升级势在必行,以更好地满足用户需求。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

首页重要性

主页不仅是业务分流的中心场景,也是平台卖家判断平台玩法、买卖双方感知平台价值的重要性「门面」。从 UED 从专业的角度来看,主页是定义的 APP 核心场景的内部体验范式和视觉风格。

如何改?

1. 盘点现象,定义问题

满足新的业务需求:不同的阶段性平台策略,1688 从以前的信息平台到交易平台,现在向数字营销平台转型,旧的内容框架难以承载业务的新发展。

提高分流质量:从过去的数据效果来看,需要重新判断 For 在特色采购需求和服务大面采购需求之前,如何平衡调优,提高首页流量转化效率。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

体验升级:移动终端 APP 自然生长在手机系统上,系统的风格变化也影响着它 APP 变化升级。在 8.0 1688APP升级前 存在着 5.0、6.0、7.0 不同设计师在不同时间点设计的多个场景,到8.0,APP 倾向于从框架层、表现层、品牌等方面进行统一升级。

改版策略

1. 关注用户价值,根据业务玩法升级内容框架

APP 在升级之前,我们收到了三个要求:

承担主页买家转换的算法能力;搜索是 B 类别买家的核心工具需要引导更多的用户更频繁地使用搜索;当互联网流量红利达到瓶颈时,新用户需要进一步承担。

在制定内容框架时,我们关注用户价值,放弃 7.0 当时的内容部分是个性化的,专注于商品的个性化,只保留大用户的营销和内容场景,提高算法推荐区域的曝光率,使该区域的商品直接转换为主页。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

2. 弱化容器,突出内容,塑造心智

升级视觉容器

平视觉框架,选择「大间距分隔」,为内容留出干净简洁的视觉空间。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

简化内容格栅,避免形式给用户阅读带来的负担。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

提高留白率,提高页面整体透气性,为内容留出更清新、更轻松的阅读空间。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

扩大字体大小的梯度,增加字体颜色的梯度,提高文本的清晰度和可读性。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

强调板块特点,塑造买家的心智感知,实现商业目标

强化搜索:7.0时,已经上线搜索了「主观上感觉显眼」但与以往的沉浸式搜索相比,数据几乎没有变化。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

8.0 跳出视觉表现层的阶段:「强化搜索」这并不意味着设计更多的搜索「显眼」,而是达成「让更多的用户更频繁地使用搜索」这个目标。比如提高搜索底纹词、热搜词的准确性和吸引力,增加搜索布局,都有助于实现业务目标。

在用户单手操作的基础上,拇指在屏幕不同区域的点击体验选择将搜索组件移动到更容易点击和更关注视线的屏幕位置。在线后,数据得到了显著的改进。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

Banner 升级:7.0 的 Banner 图片丰富度高,描述字段多,用户阅读成本高,难度大 3 秒内掌握全 Banner 信息。另外,相比之下, C 类用户,B 类用户会更理性,我们选择更冷静、更克制「视觉语气」与 B 类似商人的对话,而不是渲染气氛,引导点击。(上线后,根据新旧版本,设计并推出两套相同的活动内容。 Banner,新版较老版 UV CTR 约高出 48%)

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

For 新人:用户承担差异化利益、个性化秒杀、新人策略。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

营销场景心智差异化表达:营销由两部分组成:合伙爆品和天天特卖。我们判断爆炸性产品的主要思想是「卖得又热又便宜」,特卖主打心智是「限时限量抢便宜」,选择强化和表达两个区块的关键特征。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

内容场景(直播)动态、互动、实时传递:设计抽象直播间的方形布局+内容叠加形式,大坑通过动画传递给用户直播的动态感,通过红包和个性化商品的多维实时轮播气泡传达直播的互动感和实时性。

3. 品牌升级贯穿APP场景

APP应用中为什么要做品牌设计?

品牌设计是将内容层(平台价值)与接收层(用户)之间的柔性链接,例如在 APP 场景中国有商品、商家、商机等。「干货」,即使不专门设计品牌,用户也能与平台保持刚性稳定的联系。另一方面,品牌做得很好,但平台没有「干货」,同时,用户也不会只奔向品牌设计来平台。我们认为, APP 品牌设计在应用中的核心价值在于帮助用户认识到平台的特点和价值。从设计专业的角度来看,APP 应用中的品牌设计有利于定义和统一 APP 内部体验范式和视觉风格,保证用户体验。

怎么做?

每个设计师的业务环境不同,解决问题的策略和方法也不同。 APP 在应用中的品牌设计中,个人选择是澄清内容层(平台)的多层次需求和 For 基于内容层底料+接收层用户的特点,确定用户价值点、认知、感知接收层(用户)特征和内容倾向的设计底层范式,塑造用户感知。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

1. 图形范式

在阿里巴巴的商业操作系统中,1688 聚焦做 B 类别业务,直接服务对象为 B 类别买卖双方、业务细分摊位尖端商品、淘工厂、企业采购、淘货源、微信业务发行、工业品超级店、跨境专用供应等,这些都有一定的特点 B 因此,在类特征和体量感的场景中 APP 在业务门洞和常规图标的表达上,基于扁平 vs 写实、轻盈 vs 厚重、活泼 vs 稳定维度,图形选择轻拟物,弱对比设计范式,塑造 B 类场景 For 买家的冷静和分量感。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

此外,异常/空白场景也是平台与用户互动,创造用户感知品牌的机会。在绘制空态情感插图时,努力塑造重量、易读、有意义的场景,以显示相应的空态,并辅以轻微的动态效果,增强空态的互动感。(在收藏夹、我的供应商和其他工具场景中,根据空态信息的价值,空态与工具新手指导相结合,没有制作常规插图。)

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

2. 色彩范式

标准色

随着业务的发展,基于新的业务形势,我们丰富了它 1688 品牌色,以橙红色作为营销和利益属性的表达,以商业蓝色作为服务和数字属性的表达,以金色作为权益属性的表达。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

辅助色

在实际的产品设计中,品牌色彩不足以在各种业务场景中表达多层次的内容。因此,基于 VI 品牌色彩,裂变出重量不同、层次更丰富的品牌辅助色。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

场景色彩规则

用色规则是根据买家的角色和场景特征来定义的。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

1688色域及颜色选择示意

以 HSB 模型划定偏冷静 1688 日常生活中的色域 banner 并且可以在商业场景中灵活使用。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

3. 动态范式及应用

动态效果是设计的重要手段。良好的动态效果表达可以提高信息表达强度,明确信息层次关系,提高用户体验的舒适性。在制定动态效果之前 APP 信息结构平整到三层,保证页面内容简洁明了。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

在实际实施中,动态效率的实现非常依赖于技术资源,因此在动态效率设计之前,应考虑一个前提:动态效率设计增益内容表达、价值论证、效果衡量;同时,考虑到接收层用户的商业特征,我们希望动态效率表达给用户一种稳定感,并考虑到设计表达的效率。

“官方制作!揭秘阿里巴巴APP

在动态效果呈现部分,主要通过慢入、慢出、慢动结合曲线进行调整。一般来说,内容进入时节奏慢,速度慢,分层加载,说明信息清晰 Z 轴上的层次关系,节奏快,内容出现速度快,内容层次不需要分层消失。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

APP 动态案例及演示内典型场景:

4. 商业品牌的价值传递

此外,除了上述图形、颜色、动态效果等基本维度外,我们还需要向买卖双方发出商业品牌的声音,以实现商业品牌的价值传递。在 1688 业务提出了向数字营销平台转型的阶段「来源厂货通天下」我们通过设计手段使用口号 APP 启动页面和下拉刷新的空间将启动「货通天下」概念强化表达。

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

结语

以上就是本次首页改版的阶段性记录。在 8.0 在视觉系统中,为了更好地突出内容,视觉容器选择尽可能轻、平、冷静、克制「视觉语气」与 B 商人对话。当然,这是设计师和商务学生的阶段性选择。随后的品牌改进和产品优化仍需结合数据不断抛光。

欢迎关注「阿里巴巴UED」微信公众号:

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路