iOS和Android规范解析——工具栏和固定底板

今天我们来介绍上篇文章中的表格中余下的一个控件:工具栏(toolbars)。工具栏是iOS中的控件,Android当中相对应的是固态底板。老规矩,先说Android的控件(虽然这个控件之前已经介绍过了,耸肩)。


今天我们来介绍上篇文章中的表格中余下的一个控件:工具栏(toolbars)。工具栏是iOS中的控件,Android当中相对应的是固态底板。老规矩,先说Android的控件(虽然这个控件之前已经介绍过了,耸肩)。

iOS和Android规范解析——工具栏和固定底板

固定底板(Persistent Modal Sheet)

固定底板主要用于以下两种情况:

  1. 在当前页展示新内容;
  2. 展示与主要内容同等重要的新内容。

iOS和Android规范解析——工具栏和固定底板

固定底板示例

对于不同尺寸的设备,MD规范也给出了详细的说明:

  1. 对于手机,不论正常或者横置的情况,固定底板都占满100%的宽度。
  2. 对于平板,则要依据内容的多少决定固定底板是否占满100%宽度,如下图所示:

iOS和Android规范解析——工具栏和固定底板

平板上固定底板占满100%的宽度

iOS和Android规范解析——工具栏和固定底板

平板上固定底板未占满100%的宽度

对于PC,MD规范建议设计师考虑把固定底板移到屏幕左侧:

iOS和Android规范解析——工具栏和固定底板

PC上的固定底板

工具栏

工具栏出现在在页面的底部,它包含对当前页面的相关操作按钮,或者对当前页面中的内容的相关操作按钮。我们来举个栗子 :

iOS和Android规范解析——工具栏和固定底板

iOS自带应用——邮件

工具栏是半透明的,可以在此基础上加上背景色。它是悬浮在当前页面之上的,并且当用户不需要使用的时候,可以隐藏它。比如在iOS的浏览器Safari中,当用户向上滚动查看页面时,工具栏会自动隐藏,因为此时主要的目的是浏览页面。当用户点击下半部分的页面时,工具栏将重新展现。另外,当键盘被调出时,工具栏也会被隐藏。

关于工具栏,苹果给出了以下几个需要注意的点:

1. 提供(和当前页面)相关的操作选项。工具栏应该提供当前的页面下,常用的操作。

2. 考虑使用图标(icon)还是文字来表示操作按钮。如果操作的按钮多于3个,则使用图标;如果等于或小于3个,则文字有时能更清楚地表达操作。比如在iOS自带应用——日历中,就使用了文字来表示操作的按钮,如下图:

iOS和Android规范解析——工具栏和固定底板

iOS自带应用——日历

3. 避免使用切换按钮。切换按钮让用户可以切换不同的页面,但是工具栏是只针对当前页面提供了一些操作选项,所以不能混用。下图所示即为切换按钮:

iOS和Android规范解析——工具栏和固定底板

切换按钮示例

另外,如果你想在页面底部让用户可以切换不同页面,请使用底部标签栏(Tab Bar),而不要适用工具栏。

iOS和Android规范解析——工具栏和固定底板

底部标签栏示例

4. 为文字操作按钮提供足够的空间。这一条主要是为了保证按钮不会混到一块,如下图:

iOS和Android规范解析——工具栏和固定底板

文字操作按钮之间应留有足够的空间

以上为大家介绍了MD中的固定底板和iOS中的工具栏。两者都可以为当前页面提供操作选项。不同的是,MD的固定底板还可以提供内容,并且在尺寸上可以更大(因为可以提供内容嘛)。

之前的文章为大家介绍了iOS和Android两个系统中的所有弹出类控件,其中介绍了“模态”的概念,请参看下面的表格:

iOS和Android规范解析——工具栏和固定底板

弹出类控件比较表格(工具栏不是弹出类控件)

关于表格中控件的介绍,详细可参看这篇文章 《3分钟带你掌握11个最常用的交互控件》。

讨论使人认识更加深刻。欢迎留言。

#专栏作家#

新设计青年,微信公众号:新设计青年。人人都是产品经理专栏作家,爱奇艺高级交互设计师。德国海龟一枚,曾任职于腾讯微生活、网易、宜信等公司。

本文由 @新设计青年 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21860/

(0)
CatherineCatherine
上一篇 2017-04-29 20:18
下一篇 2017-04-29 22:07

相关推荐

  • 2018年产品经理交互设计交流分享大会

    活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己还欠火候。看过许多千货,听过许多直播,...

    2018-04-17
  • Axure官方教程中文版第3课:组件与母版-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(3).MP4 新建一个文件 1、添加一个按钮并设置鼠标悬停交互样式 2、复制并对齐按钮 3、将按钮转化为母版 4、将母版应用于每一页 5、在母版中为每个…

    2015-01-25
  • 提升体验,要懂心理学之行为主义(一)

    有时我在设计用户体验的时候,在想,什么体验对用户来说是重要的?什么才是真正吸引用户?怎么样才能让用户,甚至会对自己设计的产品上瘾呢?

    2017-05-20
  • 从用户体验的视角评析《CSR赛车》手游

    我最近一直在玩《CSR赛车(CSR Racing)》和《CSR赛车:经典(CSR Classics)》,在近期的游戏中我发现,Natural Motion在该系列的核心玩法、货币体系、社交机制和盈利模式中都引入了许多新的花样和用户体验功能,这些新元素的加入为游戏的某些方面带来了更好、更流畅的玩家体验。CSR系列专为手游玩家设计,会话时间极短(10-15秒),玩家们可以在忙碌的间隙进行一场快速竞赛,这是一个非常好的设计。在《CSR赛车》中...

    2018-03-07
  • 全面掌握算法交互设计,你的设计你做主

    在OF COURSE学习最纯粹的创意编程Processing生成艺术进阶课程全面掌握算法交互设计12周成为顶尖设计师👇△课程介绍《Processing&OF算法交互线上课程》你将要学习的第一部分:培养算法创造能力,学习运用高级算法模拟真实环境中的自然变化。第二部分:理解并掌握算法交互的原理。第三部分:培养软硬件结合能力,学习使用手部识别设备Leap motion、体感识别摄像头Kinect和算法的交互。第四部分:运用openCV计算机图...

    2018-04-08
  • 扁平化2.0:扁平化设计以前从未有的6个设计风格

    时至今日,扁平化已不再是流行一时的设计风潮,而是一种美学风格。扁平化大胆的用色,简洁明快的界面风格一度让大家耳目一新,当它对元素效果抛弃的如此彻底之际,它又将效果捡起来,改装成另一番模样,使得扁平化进化为扁平化2.0。

    2017-05-24
  • 三招两式讲需求,看完你们也懂需求了

    美国一家市场研究公司通过分析101家科技创业公司的失败案例,总结出了创业公司失败的20大主要原因,排名首位的就是:No Market Need!据统计42%的失败创业公司出现过这个问题,创始人执着于执行自己的创意,却没有…

    2023-03-03
  • 一、Axure教程--app启动画面的翻页效果

    1、案例示例:2、参考对象:qq安全中心-启动画面3、案例描述:手指向左右滑动界面时,能够切换显示内容;切换内同时,屏幕下方的圆点标记同步切换;当切换到最后一个页面,单击进入主页的按钮时,启动画面和圆点分页标签隐藏;同时屏幕顶部状态栏改变样式。4、素材准备:见百度圆盘5、采用技术:动态面板、全局变量。6、制作难点:启动页面切换时,使用全局变量记录切换后的面板状态名称;将底部的分页标签面板同步切换到同名称的状态。7、制作过程:https:...

    2018-04-29
  • VR界面设计实践指南

    一篇VR实践指导文章。Smashing Magazine好久没有这样新一些的东西了。实践指导性质的内容非常简单易行,个人感觉需要重点关注的是将传统UX设计流程及方法融入VR产品设计的思路,以及作者对于VR设计开发工作前景的观点。新技术,新事物,大风刮去之后留下的一批实践者所始终坚持的那些,才是真实的、有长期价值的东西。这是走心;集体意淫无非走肾而已。

    2017-05-07
  • 订阅渠道

    一些第三方媒体渠道大家需要的可以订阅我是UE网最新文章,订阅阅读交互设计教程文章 微博:http://t.im/iamuewb 微信:http://t.im/nw5y 网易云课堂:http://t.im/iamue 网易云阅读的:http://t.im/iamue1 或者:ht…

    交互设计 2015-06-30