Human Interface Guidelines —— 工具栏(Toolbars)

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

工具栏(Toolbars)

Human Interface Guidelines链接:Toolbars

Toolbar

Toolbar出现在app屏幕的底部,并包含用于执行与当前视图或其中的内容相关操作的按钮。 

Toolbar是半透明的,可能具有背景色,并且当人们不太可能需要它们时,它们通常隐藏。 例如,在Safari中,当您开始滚动页面时,工具栏会隐藏,因为您可能正在阅读。 您可以通过点击屏幕底部再次显示。 当键盘出现在屏幕上时,toolbar也会隐藏。

·提供相关的工具栏按钮

工具栏应包含在当前上下文中有意义的常用命令。

·考虑图标或文字标题的按钮是否适合app

当您需要三个以上的toolbar按钮时,图标是好的选择。当你有三个或更少的按钮时,文字有时会更清晰。例如,在日历中,使用文本是因为图标会令人困惑。文本的使用还允许收件箱按钮显示日历和事件邀请的计数。

·避免在toolbar中使用分段控件(segmented control)

分段控件允许人们切换上下文,而工具栏是特定用于当前屏幕的。如果您需要提供切换上下文的方式,请考虑使用tab bar。

·给文本标题按钮足够的空间

如果您的工具栏包含多个按钮,则这些按钮的文本可能会一起运行,从而使按钮无法区分。通过在按钮之间插入固定空间来添加分隔。

TIP 理解toolbar和tab bar之间的区别很重要,因为这两种类型的栏都出现在应用程序屏幕的底部。  Toolbar包含用于执行与当前上下文相关的操作的按钮,例如创建项目,删除项目,添加注释或拍摄照片。  Tab bar可让用户在app的不同部分之间快速切换,例如,时钟应用程序中的闹钟,秒表和计时器tab。  Toolbar和tab bar永远不会出现在同一个视图中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ml

学习HTML5之新特性标签一览(详细)

        HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi....     so --->支持css3...

3248
来自专栏Flutter入门到实战

Android适配全面总结(一)----屏幕适配

版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad...

1704
来自专栏夏时

两款 Js 插件为你的网站添彩

在网页中合理的利用一些特效能带给人眼前一亮的感觉。今天给大家分享两款很有意思的 Js 特效插件。

4609
来自专栏IMWeb前端团队

移动端重构实战系列5——form元素

form 大概要实现的效果如下图(具体demo可见sheral form): ? 粗略一看,跟line list差不多,好像可以直接套用,但是深究起来还是有那么...

2455
来自专栏HTML5学堂

如何让旧浏览器支持HTML5新标签

HTML5学堂:开发永远和理论不相同,一旦考虑IE低端浏览器,所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说,是有利于网站SEO的,...

3057
来自专栏守候书阁

canvas入门实战--邀请卡生成与下载

写了很多的javascript和css3的文章,是时候写一篇canvas的了。canvas是html5提供的一个新的功能!至于作用,就是一个画布。然后画笔就是j...

1113
来自专栏安富莱嵌入式技术分享

【安富莱二代示波器教程】第5章 示波器设计—波形快速刷新方案

波形快速刷新有很多方案需要测试,由于我们的GUI是采用的emWin,所以下面的这些测试都是基于emWin实现的。

1402
来自专栏Material Design组件

Human Interface Guidelines —— 导航栏(Navigation Bars)

36511
来自专栏郭诗雅的专栏

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

1.1K9
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

9605

扫码关注云+社区

领取腾讯云代金券