Material Design(四)--模式
程序员文章站
2022-06-08 09:31:30
...
Material Design–模式
. 确认 & 确知
-
确认和确知操作可以帮助减少事情的不确定性
-
它还可以防止用户犯下会让他们后悔的错误。
1.1:确认:要求用户核实需要继续执行的操作。
用户请求从库中删除一个相册,会显示一个警告框来确认此操作,并告知用户此相册在任何设备上都将不能使用。
1.2:确知:是显示文本,让用户知道他们执行的操作已完成。
如果用户从编写界面向后导航,则会保存电子邮件的草稿,一个 toast 形式的确知出现,然后几秒钟后淡出。
2. 数据格式
- 2.1:日期和时间
元素 | 描述 | 示例 |
---|---|---|
时间 | 使用 AM 或 PM 显示当天的时间,不使用点号。如果使用 24 小时制,则显示不带 AM/PM 的时间。 | 2:00 PM \ 14:00 |
月,日,年 | 在当前的年份内,显示不带年份的日期。否则,显示日期和年份。 | 1月14日\2012年1月14日 |
大致时间 | 大致时间会四舍五入到最大和最近的日期或时间单位。 | 5分钟内\3天前 |
绝对时间 | 当不适合使用大致时间时,显示精确的日期或时间。 | 今天,10:00 AM |
- 2.2:数据修订和截断
- 居中的椭圆[• • •]是隐藏部分敏感数据的符号字符。它们指示何时数字是不完全可见的(例如信用卡或社保号码)。
符号字符 | 何时使用 | 示例 |
---|---|---|
[• • •] | 要隐藏大部分数字,例如社保号码,请使用三个点的居中椭圆[• • •] | |
[• • • •] | 信用卡和借记卡数据必须使用 4 个居中椭圆进行隐藏 [• • • •] | |
底线椭圆[…] | 底线椭圆[…]表示未显示的字母、单词或短语。它们还可以表示名称或邮件地址仅部分可见。 |
3. 空状态
无法显示项目的内容时会显示空状态、避免完全为空的状态。
图像应该是素净的,视觉上能成为背景的一部分。标语应该传达应用的用途,而不要让用户去执行某项操作。
- 空状态的特点
- 图片: 淡淡的,颜色素净的,和背景色不造成冲突的
- 文字:传达应用的用途,而不要出现可执行的操作
图像太过鲜明,标语不应该使用号召性的文字,这可能会导致用户去触摸图像或标语来开始视频聊天。
4. 错误
4.1:用户输入错误
- 应用无法识别用户输入
- 系统或应用载入失败
通过优化设计,使用户能轻松地输入信息,最大限度地减少错误,以帮助用户理解,提高用户体验
解决错误:
- 清楚的告诉用户发生了什么
- 告诉用户如何解决这个错误
- 尽可能保留用户的输入
带有错误文本的文本输入框示例
错误文本示例
4.2:应用错误
- 应用错误和用户的输入无关。
- 当出现错误时,在显示错误消息之前应显示加载提示符。
警告框:阻止了正常操作的错误,使用警告框来作为反馈
内容加载失败的空状态
5. 启动页
- 在加载应用时,如果显示一个空白页面,会增加用户感官上的加载时间,因此考虑使用占位 UI 或品牌启动页。
- 占位 UI 是最无缝的启动过渡 – 同时适用于应用启动和应用内的页面过渡。
- 品牌启动页提供短暂的品牌展示,清除了 UI 以便用户能专注于内容。
品牌启动页 | 占位 UI |
---|---|
6. 滑动刷新
- 滑动刷新功能可以通过用户的操作或手势来手动刷新屏幕内容。
- 滑动刷新是一个滑动手势,可以用在按最近更新排序的列表、网格列表、以及卡片集的头部
- 滑动刷新不应在以下情况下使用:
抽屉式导航 | 主屏幕小部件 | 可平移的内容 |
---|---|---|
7. 搜索
应用内搜索
当应用支持大量内容时,用户应该要能通过搜索功能快速查找内容。
基本的搜索包括:
打开一个搜索文本框
输入并提交一个查询
显示一组搜索结果
然而,可以通过提供以下功能来提升搜索体验:
语音搜索
在搜索完成之前,根据用户的最近搜索提供历史搜索建议
自动完成和应用的真实搜索结果匹配的搜索建议
应用内搜索有两种主要模式:固定显示的搜索
和可展开搜索
当搜索是应用的主焦点时,使用固定显示的搜索。
当搜索不是应用的主焦点时,使用可展开搜索。
下一篇: MongoDB自学笔记下载