品牌细节融入场景

Part.1 | 页面

1.1 启动页

当用户打开app时，在启动过程中看到的过渡页面（或动画）都称为启动页。为体现产品的品牌，一般启动页会由：产品名称+产品形象（logo）+产品广告语（slogan）组成。

1.2 闪屏页

闪屏页又叫开机广告，出现在启动页之后，闪屏展现品牌精神、Slogan，主要用于活动推广或商业广告宣传，闪屏可能会有连续多个，一般设有倒计时和跳过的功能。

1.3 引导页

用户第一次安装app或者app更新后首次启动时展示的3-5个可滑动的页面，指导用户操作或展示更新内容，可以左右切换，并在最后一个页面有引导按钮跳转到首页。

1.4 登录页

登录页的作用：提供登录路径，传递品牌信息。内容和结构：产品标志或吉祥物+主要登录路径+（辅助登录路径）。

1.5 缺省页

缺省页品牌表现会加入一些情感化的表现，运用IP形象插图故事，或者拟人化、戏剧化的文案。

缺省页包含：

1. 当网络不良，页面没有加载出来的时候；（局部功能未加载，图片/图标未加载，页面全部未加载）2. 当前页面没有状态的时候；3. 当信号中断，完全没有网络的时候；4. 当服务器发生错误返回404页面的时候；给用户提供的反馈，缓解用户的情绪或者引导用户。

1.6 弹框

品牌形象与弹框结合的方式。

分类有：1. 操作提示：通过弹框提醒，引导用户进行操作，来提高用户体验；2. 版本更新提醒：用户APP版本过低时，打开低版本APP的弹框提示；3. 活动宣传：这类弹框目的就是活动宣传。

1.7 运营页

IP形象为主体，并与场景氛围融合。

Part.2 | 动效

动画结合 IP 形象，提升趣味性，又贴合产品本身的定位。

2.1 下拉刷新

比如美团外卖是品牌形象骑电动车送餐的动效

2.2页面加载

比如闲鱼的加载动效是IP形象在跳动。

Part.3 | 图标/控件

3.1导航栏

导航栏背景采用品牌色，品牌IP或品牌标志，突出品牌，凸显视觉差异化。比如京东采用京东小狗与活动推广组合，闲鱼签到的Icon采用是品牌IP的形象。

3.2搜索框

从logo提取，在搜索框中延伸应用。比如天猫提取猫的耳朵造型，飞猪提取了 logo 中发型用于搜索框。

3.3 Icon

图标与ip形象结合，强化ui品牌细节。

3.4导航

导航-选中条

从logo中提取图形元素，比如京东提炼出微笑曲线弧度，作为固化图形传递亲和力的品牌形象 ，飞猪提取猪的发型部分。

导航-tab栏

选中状态采用logo的头型元素。

Part.4 | 个人中心

4.1 背景装饰  

提取IP部分，排列组合装饰背景，比如盒马提取IP的鼻子轮廓，飞猪提取头部的圆角部分。

4.2  默认头像

使用IP形象头部作为默认头像

Part.5 | 智能场景

5.1 客服头像

客服形象拟人化，增加了趣味，建立了用户对品牌认知。

5.2 智能机器人

Part.6 | 其他

6.1 表情包：飞猪

6.1 品牌容器

品牌轮廓造型结合排版元素，视觉效果更强，助力品牌的传播。

感谢阅读！