插图
插图作为产品视觉体验中的重要组成部分,通过图形化手段表达信息,可以在一定程度上帮助产品提升易读性、美观性,并刻画产品品牌性。
设计原则
Zepp OS 的插图遵循「轻量」、「友好」、「有效」的设计原则,需要做到图形轻量简洁,减少过多造型组合,设计表现友好且赋予适度的情感 ,表意清晰易于理解,保证用户的操作效率。
类型
状态说明类插图
阐明页面状态的插图类型,具有一定说明性、安抚性与装饰性。
用户引导类插图
引导用户进行对应操作,或者说明当前功能使用方式,具有一定的说明性、引导性。
为保证插图的表意明确,用户引导类插图通常会使用动态表现。
通知提醒类插图
向用户传达带有时间信息的应用通知内容或者身体状况提醒,具有一定的激励性、装饰性与说明性。
三方应用插图
三方小程序插图表现具有一定的灵活性,可根据三方品牌适当添加色彩,修改造型,增加自身小程序的情感运营与品牌表现。
使用规则
- 系统插图的基础视觉样式为白色图形样式①。
- 各应用空页面状态插图请使用灰色图形样式②;
- 副屏空页面(表示需连接手机应用进行操作),请使用彩色图形样式,为保证用户理解,通常使用该应用图标③ ;
- 包含动画的引导反馈插图,可在背景层添加表装饰的全屏幕动画。
①系统插图的基础视觉样式
②应用空页面插图
③副屏空页面插图(表示需连接手机应用进行操作状态的空页面)
- 方屏设备需要考虑状态栏存在,应用内页面插图无需标题。
④方屏设备系统插图的基础视觉样式
⑤方屏设备应用空页面插图
视觉规范
插图的主体切图大小为③ ,内部需预留空白透明的安全区域。
插图图形区域为①,其中绘制区域一般应保持在②的范围内。如图形需要添加额外视觉重量,保证与其他图标的一致,则绘制区域可以延伸至保留区域内(注意:切图时边缘需要保留2px安全距离)。
① 图标主体的基础绘制区域
② 图标主体的保留区域
③ 图标主体的最终实际尺寸