欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Material Design(四)--模式

程序员文章站 2022-06-08 09:31:30
...

Material Design–模式

. 确认 & 确知

  • 确认和确知操作可以帮助减少事情的不确定性

  • 它还可以防止用户犯下会让他们后悔的错误。

    1.1:确认:要求用户核实需要继续执行的操作。

Material Design(四)--模式

用户请求从库中删除一个相册,会显示一个警告框来确认此操作,并告知用户此相册在任何设备上都将不能使用。

1.2:确知:是显示文本,让用户知道他们执行的操作已完成。
Material Design(四)--模式

如果用户从编写界面向后导航,则会保存电子邮件的草稿,一个 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:数据修订和截断
    • 居中的椭圆[• • •]是隐藏部分敏感数据的符号字符。它们指示何时数字是不完全可见的(例如信用卡或社保号码)。
符号字符 何时使用 示例
[• • •] 要隐藏大部分数字,例如社保号码,请使用三个点的居中椭圆[• • •] Material Design(四)--模式
[• • • •] 信用卡和借记卡数据必须使用 4 个居中椭圆进行隐藏 [• • • •] Material Design(四)--模式
底线椭圆[…] 底线椭圆[…]表示未显示的字母、单词或短语。它们还可以表示名称或邮件地址仅部分可见。 Material Design(四)--模式

3. 空状态

无法显示项目的内容时会显示空状态、避免完全为空的状态。
Material Design(四)--模式

图像应该是素净的,视觉上能成为背景的一部分。标语应该传达应用的用途,而不要让用户去执行某项操作。

  • 空状态的特点
  • 图片: 淡淡的,颜色素净的,和背景色不造成冲突的
  • 文字:传达应用的用途,而不要出现可执行的操作
Material Design(四)--模式

图像太过鲜明,标语不应该使用号召性的文字,这可能会导致用户去触摸图像或标语来开始视频聊天。

4. 错误

4.1:用户输入错误
  • 应用无法识别用户输入
  • 系统或应用载入失败

通过优化设计,使用户能轻松地输入信息,最大限度地减少错误,以帮助用户理解,提高用户体验

解决错误:

  • 清楚的告诉用户发生了什么
  • 告诉用户如何解决这个错误
  • 尽可能保留用户的输入
Material Design(四)--模式

带有错误文本的文本输入框示例

Material Design(四)--模式

错误文本示例

4.2:应用错误

  • 应用错误和用户的输入无关。
  • 当出现错误时,在显示错误消息之前应显示加载提示符。
Material Design(四)--模式

警告框:阻止了正常操作的错误,使用警告框来作为反馈

Material Design(四)--模式

内容加载失败的空状态

5. 启动页

  • 在加载应用时,如果显示一个空白页面,会增加用户感官上的加载时间,因此考虑使用占位 UI 或品牌启动页。
  • 占位 UI 是最无缝的启动过渡 – 同时适用于应用启动和应用内的页面过渡。
  • 品牌启动页提供短暂的品牌展示,清除了 UI 以便用户能专注于内容。
品牌启动页 占位 UI
Material Design(四)--模式 Material Design(四)--模式

6. 滑动刷新

  • 滑动刷新功能可以通过用户的操作或手势来手动刷新屏幕内容。
  • 滑动刷新是一个滑动手势,可以用在按最近更新排序的列表、网格列表、以及卡片集的头部
  • 滑动刷新不应在以下情况下使用:
抽屉式导航 主屏幕小部件 可平移的内容
Material Design(四)--模式 Material Design(四)--模式 Material Design(四)--模式

7. 搜索

应用内搜索

当应用支持大量内容时,用户应该要能通过搜索功能快速查找内容。

基本的搜索包括:

打开一个搜索文本框

输入并提交一个查询

显示一组搜索结果

然而,可以通过提供以下功能来提升搜索体验:

语音搜索
在搜索完成之前,根据用户的最近搜索提供历史搜索建议
自动完成和应用的真实搜索结果匹配的搜索建议

应用内搜索有两种主要模式:固定显示的搜索可展开搜索

当搜索是应用的主焦点时,使用固定显示的搜索。

Material Design(四)--模式Material Design(四)--模式Material Design(四)--模式Material Design(四)--模式

当搜索不是应用的主焦点时,使用可展开搜索。

Material Design(四)--模式Material Design(四)--模式Material Design(四)--模式Material Design(四)--模式
相关标签: material