赞助商
立即赞助

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

品牌设计3年前 (2021)发布 流光
3K 0 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 时的容版个性,聚焦做商的个性,仅保留For大面户的营销、容场景,升算法推荐区的曝光率,此区域的商做首页的直接转。

官方出品!揭秘阿里巴巴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 8.0 视觉品牌升级背后的设计思路

在动效呈现部分,主要以缓、缓出、缓动结合曲来节,总的来说,内容场时节奏稍慢,速度缓,分加载,代清信息在 Z 轴上的次关系,内容出场时节奏快,速度快,内容级不用做分消失。

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

APP 内典型场的动效案例及演示:

4. 业务品牌的价值传递

此外,除以上在图形、彩、动效等基础度收口外,我们也需要将业务品牌放声给买卖家,以达成业务品牌的价值传递。在 1688 向数字营销平台转型的阶段,业务提出「源头货通天下」的口号,我们通设计手段,用 APP 开机启动页及下拉刷新的空间,将「货通天下」的概念强化表达。

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

结语

以便此次首页改版阶段性的记录。 8.0 的视觉体系里,好突出内,视觉器选择尽可能轻、平,以冷静、克制的「视觉语气」与 B 类商人对话。当然,这设师业务同学阶段性的选择。后续品牌的完善及产品的优化,仍需结合数据持续打磨。

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

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

万能螺丝刀也拧不开眼镜框上的螺丝。如同万能螺丝刀一样,QQ 也是一个通用的沟通工具,在针对游戏、粉丝、家校等垂类场景下,...
QQ家校群
QQ 阅读作为国内较大的数字阅读平台,拥有海量的数字正版图书资源,随着产品内容不断丰富,图书资源已覆盖网络文学、历史、教...
改版实战
Hi,大家好,我是彩云。Spotify,也叫“声田”,是一个在国外非常火的正版音乐平台,也是目前全球最大的流音乐服务商之一,在去...
Spotify
@途家UED:途家网,全球民宿预订平台,为用户提供公寓、别墅、树屋等各式新奇住宿。 为了更好的贴近及满足用户体验,设计团...
实战案例
现在 UI市场越来越完善,在以前 dribbble 等不敢想象的风格都逐渐出现在产品中。那么在现在的市场什么样的「设计」是好的设计...
实战案例
「红袖读书」2018年全新改版,打造更轻的阅读体验,更适合女性阅读的读书APP。 一、项目背景 「红袖读书」APP 原名「红袖添香...
实战案例
随着智能技术的不断发展与深入,对话机器人的应用越来越普遍,展现了高效、24 小时在线沟通等效果,一定程度上弥补了人工客服...
AlibabaDesign
阿里巴巴_B2B_UED – 张加其:在互联网公司中,设计师的伙伴主要有产品经理、运营、技术。常规合作流程为产品、运营输入需求,...
设计实战