场景设计-Scene

场景设计包含加载设计、特殊场景设计以及反馈设计。

加载设计

加载设计常用到的场景:标题栏加载、全局加载、下拉刷新、预设图(占位图)、模块加载等。

标题栏加载:数据收取过程(缓存数据内容预留)、断开网络连接

全局加载:一次性加载情况,超出加载时间显示加载失败,告知原因并提供解决方案(骨架屏应用)

下拉刷新:情感化设计,注意下拉刷新的几个状态(下拉中、下拉结束、加载中、加载结果)

预设图/占位图:分几种常见场景(广告位预设、商品详情预设、商品列表图预设、默认头像)

模块加载:常用于首页混合模块中的部分模块加载

反馈设计

反馈设计以用户操作得到反馈为基础,确保反馈及时,异常可控。反馈消失行为自动可控,被动及时清晰。

自动行为消失:Toast轻提示,及时反馈用户的操作结果

被动行为消失:对话框信息提示,操作自主可选;模态视图,脱离主任务,完成后返回

特殊场景设计

特殊场景设计容易被设计师忽略,综合考虑应用可能出现的任何异常状态并给予解决方案或提醒。

网络异常:

  1. 网络中断情况:明确提醒用户并提供刷新操作,可附加基本网络排查解决方案。同时做好数据的预处理,从而降低用户的认知负担;

  2. 网络切换情况:几种网络状态的切换需告知用户并由自主选择操作方案,如视频、音乐的2、3、4、5G网络播放选择。

信息输入异常:非预期信息输入的提示

缺省场景:

  1. 初次场景:页面初次操作的引导和提醒,例如浮层引导,指引入口
  2. 操作结果场景:用户执行操作后的相应结果,例如搜索、筛选等
  3. 异常场景:网络异常、应用异常

缺省场景的设计在达到交互目的后要同时注意情感化的设计,不同的应用场景还应搭配不同的解决方案:

  1. 系统示例项:如猜你喜欢、最近浏览
  2. 缓存机制:暂时调用缓存,待缺省状态解决后恢复
  3. 情感化处理:场景模拟、人性化图标
  4. 提供新任务:页面异常后,通过提供新的任务解决

应用

缺省方案:

根据实际应用场景的不同选择不同的缺省方案

布局方式:

缺省元素应与页面整体居中对齐,且注意缺省区域(红色区域)有最大宽度限制,通常限制不超过页面宽度的三分之二即可

缺省图标:

缺省图标在保证表意清晰的基础上,保持风格统一,加以情感化的设计

Copyright © biliui.com 2019 all right reserved,powered by Gitbook上次更新: 2019-06-07 20:12:15

results matching ""

    No results matching ""