阿里巴巴(1688) APP 8.0 视觉品牌升级手记

通过对阿里巴巴APP为什么要改版,分析哪些内容需要改变,对每个改版内容的详细透析,得出最优改版方案。这一切的改版都需要从用户的角度出发,让产品更符合用户的需求。

前言

阿里巴巴副总裁、中国内贸事业部总经理汪海(花名七公)在对外分享时提出1688已经从信息平台时代进入数字化营销平台时代,让1688用户在平台内完成营销和销售一体化的整个商业闭环。1688的使命也升级成“在数字化经济时代,让天下没有难做的生意!”在全新的业务态势下,为了更好的满足用户需求,阿里巴巴(1688)主客升级势在必行。

首页重要性

首页既是业务分流的中心场景,也是平台卖家判断平台打法,买卖家感知平台价值的重要“门面”。从UED专业视角来看,首页是定义APP内体验范式及视觉风格的核心场景。

如何改?

盘点现象,定义问题1、满足业务新的诉求:平台阶段性战略不同,1688从曾经的信息平台过渡到交易平台,如今向数字营销平台转型,旧的内容框架难以承载业务的新发展;2、提升分流质量:从过去的数据效果来看,需重新判断,在For特色采购需求和服务大面采购需求之前,如何平衡调优,提升首页的流量转化效能;

3、体验升级:移动端APP天然生长在手机系统上,系统的风格更迭也牵动着APP的变化和升级。在8.0升级前,1688APP存在着5.0、6.0、7.0多个由不同设计师在不同时间点所设计的场景,到8.0,APP趋待从框架层、表现层以及品牌等方面进行统一及升级。

改版策略

一、聚焦用户价值,基于业务打法升级内容框架;

APP升级前与业务对焦,我们收到三点诉求:1、用算法的能力去承接首页买家的转化;2、搜索是B类买家找品、选商的核心工具,需要引导更多用户更高频地使用搜索;3、互联网流量红利到瓶颈期,需要进一步做好新用户的承接。

在内容框架制定上,我们聚焦用户价值,舍掉7.0时的内容版块个性化,聚焦做商品的个性化,仅保留For大面用户的营销、内容场景,提升算法推荐区的曝光率,以此区域的商品做首页的直接转化。

二、弱化容器,突出内容,塑造心智

1、视觉容器升级

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

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

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

拉大字体大小的梯度,加重字体颜色梯度,提升文字的清晰度和可读性。

2、强调版块特性,塑造买家心智感知,达成业务目标。

强化搜索:7.0时,曾上线过将搜索做到“主观上觉得显眼”的测试方案,但相较于之前沉浸式搜索,数据几乎没变化。

8.0阶段,从视觉表现层跳出看:“强化搜索”并不意味把搜索设计得更“显眼”,而是达成“让更多用户更高频地使用搜索”这一目标。(如提升搜索底纹词、热搜词精准度和吸引力、增加搜索布点等,都可能助力达成业务目标)基于用户单手操作时,拇指在屏幕不同区域的点击体验,选择将搜索组件移到更易于点击、视线更聚焦的屏幕位置,上线后数据提升非常明显。

Banner升级:7.0的Banner画面丰富度高,加之描述字段多,用户阅读有一定成本,较难在3秒内掌握全 Banner的信息。此外,相比于C类用户,B类用户会更偏理性,我们选择以更冷静、克制的“视觉语气”与B类商人对话,而非渲染氛围引导点击。(上线后,同样的活动内容,按新、老两版规范设计投放两套Banner,新版较老版UV CTR约高出48%)

For新人:以差异化的利益、个性化秒杀、新人攻略做用户的承接。

营销场景心智差异化表达:营销由伙拼爆品、天天特卖两部分组成,我们判断爆品主打心智为“卖得火爆又便宜”,特卖主打心智是“限时限量抢便宜”,选择将两个区块最关键的特质做强化表达。

内容场景(直播)动态化、互动感、实时性传递:抽象出直播间的方形版面+内容叠加形式来设计,大坑位以动图传递给用户直播的动态感,以红包、个性化商品的多维实时轮播气泡传达直播的互动感、实时性。

三、升级品牌,贯穿APP场景

  • 为什么要做APP应用内的品牌设计?

品牌设计是将内容层(平台价值)与接收层(用户)做柔性链接的一环,譬如在APP场景中,由于有商品、商家、商机等“干货”,即使不特意做品牌设计,用户也能与平台保持刚性、稳定的连接;而反过来看,品牌做得很好,但平台没有“干货”,用户也不会单奔着品牌设计来平台。我们认为,做APP应用内的品牌设计,核心价值在于助力用户认知到平台特性,感知平台价值。从设计专业视角来看,APP应用内的品牌设计,有利于定义并统一APP内体验范式及视觉风格,保障用户的体验。

  • 怎么做?

每位设计师所处的业务环境不一样,解决问题策略和方式也千差万别,在APP应用内的品牌设计中,个人选择是通过厘清内容层(平台)多层次诉求及For用户的价值点,认知、感知接收层(用户)特质及内容倾向,基于内容层底料+接收层用户特质确定设计底层范式,塑造用户感知。

1、图形范式

在阿里巴巴商业操作系统中,1688聚焦做B类业务,直接服务对象是B类买卖家,业务细分出档口尖货、淘工厂、企业采购、淘货源、微商代发、工业品超级店、跨境专供等,这些都是具有一定B类特质及体量感的场景,故在APP业务门洞及常规图标的表达上,基于扁平vs写实、轻盈vs厚重、活泼vs稳重的维度,图形选定轻拟物、弱对比的设计范式,塑造B类场景For买家的沉稳、份量感。

此外,异常/空白场景也是平台与用户互动,塑造用户感知品牌的机会。在空态情感化插图部分的绘制上,力求塑形出有份量、易读、有意味的场景以示对应空态,并佐以轻微动效,增强空态的互动感。(在夹、我的供应商等工具型场景,基于空态信息的价值考虑,将空态与工具新手引导相结合,并未做常规的插图)。

2、色彩范式

  • 标准色

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

  • 辅助色

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

  • 场景用色规则

基于买家角色及场景特征定义用色规则。

  • 1688色域及选色示意

以HSB模式划定出偏沉稳的1688色域,在日常banner及业务场景中可灵活取用。

3、动效范式及应用

动效是设计的重要手段,良好的动效表达能增强信息表达强度,清晰信息层级关系,提升用户体验的舒适度。做动效之前,将APP信息结构平整到三层,保障内容在页面简洁明畅地呈现。

在实际落地中,动效实现非常依赖技术资源,故动效设计之前,应考虑一个前提: 动效设计增益内容表达,价值可论证,效果可衡量;同时,考虑接收层用户的商人特质,我们期望动效表达给用户以稳定感,并且在设计表达上能兼顾效率。

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

APP内典型场景的动效案例及演示。

4、业务品牌的价值传递

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

结语

以上便是此次首页改版阶段性的记录。在8.0的视觉体系里,为更好地突出内容,视觉容器选择尽可能做轻、做平,以冷静、克制的“视觉语气”与B类商人对话——当然,这是设计师和业务同学阶段性的选择。后续品牌的完善及产品的优化,仍需结合数据持续打磨。

站酷

作者:阿里巴巴国际用户体验事业部 佳棋

(0)

相关推荐

  • 丁香园 8.0 全新改版升级,设计背后的故事

    丁香园 App 是丁香园面向医生.医学生与医疗行业从业者推出的一款综合性应用.专注于通过病例讨论.话题互动的形式开展深度的社区交流.从专业技能.医学考试.职称晋升等方面真正帮助用户成长. 发现问题 在 ...

  • 百度网盘品牌升级背后的故事

    视频观看,请点击下面链接 项目背景 网盘是提供的个人云存储服务,自2013年上线至今,通过强大的技术能力以及承担高额的带宽成本,为7亿用户提供文件存储.备份.分享.共享等服务,成为行业领先位置.这5年 ...

  • 华为穿戴APP 2.0 上手指南

    华为穿戴app 2.0是一款整合华为可穿戴产品的数据和服务的应用程序,为用户提供完整.统一.便捷的使用体验.但是部分用户升级之后发现儿童手表的登陆.注销账号路径发生变化,本经验教大家如何登陆及注销账号 ...

  • 如何使用阿里巴巴手机app内的以图找货功能

    日常生活中,当我们在使用手机阿里巴巴app时,如果想要购买某个样子的商品,却又不知道它的名字的话,应如何操作呢?接下来就由小编来告诉大家如何使用阿里巴巴手机app内的以图找货功能.具体如下:1. 第一 ...

  • 怎么在支付宝app中进行芝麻信用升级

    今天给大家介绍一下怎么在支付宝app中进行芝麻信用升级的具体操作步骤.1. 解锁手机后,找到桌面上的支付宝app,打开.2. 进入主页面后,点击右下角的[我的]选项.3. 在打开的我的页面,找到下方的 ...

  • 快手App如何将用户ID升级为快手号

    快手是现在非常流行的一款短视频软件,有些新用户不知道如何将用户ID升级为快手号,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图所示,打开手机中的[快手]App.2. 第二 ...

  • 如何将阿里巴巴(1688.com)批发网商品铺货到拼多多

    阿里巴巴(1688.com)批发网是现在十分常用的网上批发平台之一,有些用户想知道如何将商品铺货到拼多多,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,找到并双 ...

  • USB2.0升级到USB3.0方法 怎么升级到USB3.0

    USB3.0相对USB2.0,具有更快的传输速率,同时可以显著提升硬件的性能,对于增加信息的传输及硬件性能具有极为重要的意义.对于我们手中的电脑,我们可以通过将USB2.0升级到USB3.0来享受更快 ...

  • 魔兽世界8.0新手宠物对战升级攻略

    魔兽世界8.0新手宠物对战升级攻略,很多玩家在玩游戏的时候,表示看到了宠物对战,但是不知道怎么升级,小白就告诉大家 魔兽世界8.0新手宠物对战升级攻略 操作方法 01 我们选择我们想要练习宠物对战的角 ...