欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

最常见的网页交互控件怎么用

发布时间:2017:09:04 17:07:11 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1542个文字,预计阅读时间4分钟
导语
移动端设计中有三个名字经常被提到:Dialog、Toast 和 Snackbar,大部分同学从 Google 设计规范中第一次了解它们。原本无论作为系统规范还是应用组件它们都已足够成熟,我也自以为对它们

移动端设计中有三个名字经常被提到:Dialog、Toast 和 Snackbar,大部分同学从 Google 设计规范中第一次了解它们。

原本无论作为系统规范还是应用组件它们都已足够成熟,我也自以为对它们有足够的了解。但最近工作、交流中发现对这三者尤其 Snackbar 的了解非常浅,所以花了一点时间重新学习了一下。

我并非专业工程师,更多仅从设计师角度来阐述自己的心得。


最常见的网页交互控件怎么用

作为应用中承担“操作反馈”和“信息传递”的组件,Dialog、Toast 和 Snackbar 三者很相似但又各有不同。尤其从 Snackbar 被提出之后,网络上有很多文章讨论它们三者的应用场景和使用方法。

Toast 翻译过来叫“吐司”,非常形象的一小片;Snackbar 则是“快餐店”,听起来就比吐司要牛逼一点。

众所周知,iOS 规范中是没有 Toast/Snackbar 这两个名字的,但由于设计“跟随操作且超轻量”的反馈交互比较困难,所以直接将文字、icon 在操作后甩到用户脸上成为了一种简单、有效的做法。

理想的反馈是发生在操作空间自身,如 Twitter 的 Favorite 按钮,触发与否都用动画来表达。第一做到了操作与反馈一体,第二避免了 按钮被反复点击触发多个 Toasts 所引起的坏体验。


最常见的网页交互控件怎么用

最初我想当然的以为,那些出现在屏幕正中间、黑色半透明底色,显示文字或图案的东西叫做 Toast;而那些自带操作项,可以滑动或点击删除消息的东西则是 Snackbar。但实际上,通过位置、颜色、是否带操作和如何消失都无法准确定义它们。

首先,来复习一下 Material Design 的官方说明。(值得注意的是,现在 Snackbar 和 Toast 在同一个文档中,但谁能告诉我为什么这两个单词要用复数?)

Snackbars

contain a single line of text directly related to the operation performed. They may contain a text action, but no icons.

Only one snackbar may be displayed at a time. Each snackbar may contain a single action, neither of which may be “Dismiss” or “Cancel.”

Snackbars animate upwards from the bottom edge of the screen.

译文:

1. Snackbar 包含一条简单的、与操作行为相关的文字消息,它也可以包含一个文字操作项目,但不能包含 icon。

2. 同一时间只能出现一个 Snackbar,每个 Snackbar 可以包含。

3. Snackbar 从屏幕底部向上移动出现。

Toasts (Android only) are primarily used for system messaging. They also display at the bottom of the screen, but may not be swiped off-screen.

译文:

Toast(Android only?显然已经不是了…)主要用于传递系统消息,展示于屏幕底部并且不能滑动消除。

可以看到,官方设计规范对 Toast 的描述已经很少了,似乎更倾向于让大家使用 Snackbar,,而且它们的定义也非常含糊,显然大多数 App 都不是这么设计的……

从代码层面我们可以看到关于它们更多的特性 [1]。


最常见的网页交互控件怎么用

首先,与 Dialog不同,Toast 和 Snackbar 都不属于模态。这意味着它们不获取当前屏幕焦点,用户依然可以操作屏幕中的其他内容,这也正是所谓的“轻量化信息和反馈”。当设计者不希望用户任务被打断时,使用它们比 Dialog 更轻量。

其次,Toast 默认是展示在当前屏幕内所有控件之外,Snackbar 则是在控件的最顶层。从我的角度来看,似乎 Snackbar 更像应用的一部分而 Toast 则更接近系统消息。这可能就是官方所谓的“Toast are primarily used for system messaging”。

实际效果上,Toast 不会改变已有控件的布局,而 Snackbar 常常把悬浮按钮往上推。


最常见的网页交互控件怎么用

再次,很多人会问,这两个消息显示多长时间比较合适?虽然设计规范中没有给出具体的时间建议,但代码却已经告诉我们。

在 Toast 和 Snackbar 的参数中,有 LENGTH_SHORT 和 LENGTH_LONG 两个状态,测试后分别为约1.8s和3s [2]。所以,即便可以自己想办法设置时间,不如遵从官方1.8s/3s的建议比较合理。

然后,颜色、位置、操作和带不带 icon 真的很严格吗?答案是否定的。为了应对变态且任性的需求,有两篇文章 [3][4] 详细介绍了如何花式使用 Toast 和 Snackbar,简而言之就是技术上要做到给它们换个底色、加个 icon、换个位置都是很容易的。

比如你想要的话,可以做到这样:


最常见的网页交互控件怎么用

但是,设计师还是要有基本的节操,在追求最流畅用户体验的时代,不要轻易给用户太多的干扰。

总结

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:跨屏幕的响应式用户体验设计

下一篇:2017受欢迎的网页设计趋势

  • 18894 文章总数
  • 2307371访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信