Material Design（四）--模式

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. 搜索

应用内搜索

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

基本的搜索包括：

打开一个搜索文本框

输入并提交一个查询

显示一组搜索结果

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

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

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

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

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