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

相关推荐

  • 美的苏宁智能+计划解读:供给侧改革用户体验升级

    丁道师ID:dingdaoshi123资深互联网观察家,长期致力于中国互联网产业和企业研究。苏宁与美的空调宣布联合共建用户研究实验室,通过云服务、大数据等技术基础,让用户全方位的参与到美的产品研发、交互、营销等环节中来,未来美的、用户、渠道商共同携手,构建一个可循环的新消费升级商业体系。随着一股实力派冷空气登场,2016年的初冬比以往更冷一些。这几日,北方多地现初雪,大风吹、降温猛。伴随着天气的转凉,围绕“智能空调”为核心的“寒冬保卫战...

    2018-03-10
  • 阿里设计师的思考总结:用户体验设计的进阶修炼之路

    从方法、标准、协同、软技能和创新五个方面说说我对用户体验设计进阶修炼的思考与实践。

    2017-05-17
  • 为增强产品的用户体验,UI设计师会做哪些工作

    近年来,人们越来越多地谈及用户体验,甚至将其视为互联网产品赢得市场的最关键因素。作为UI设计师,我们战斗在用户体验设计的一线,那么在实际工作中我们会通过哪些工作来提升产品的体验呢?下文给出了几点关于实际工作中提升产品用户体验的思考。我们在设计一个程序或者系统的时候,前提是保证产品定位及有目标用户群,保证产品是有用的,能连接不同的节点产生价值。如果一个程序没有用,那么对用户来讲就没有下载、使用的必要了。而当程序有用了之后,如果用户需要付出...

    2018-02-03
  • 用通俗的方式告诉你什么是「交互设计」

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-04-11
  • 交互干货必收 | App界面交互设计规范

    在上篇《APP界面设计风格》确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前,拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧!

    2017-06-04
  • 交互体验,是最好的科普教育——天宁小学参观丽水市科技馆活动随记

    点击上方“莲都区教育局”可以关注哦充分利用身边的公共科普资源,激发学生的科学探究兴趣,享受交互体验式的科普教育,增强学生的科技创新意识,这是我们安排学生走进科学馆进行参观体验的根本目的。这次天宁小学的孩子们真的是赚到了!面前的这个机器人可不简单,它的中文名叫阿尔法。2016年央视猴年春晚上,540台阿尔法机器人与歌手孙楠共同演绎歌曲《冲向巅峰》,那气场堪比国庆大阅兵。工作人员对阿尔法机器人作简要介绍:阿尔法是一款仿人型智能机器人,可直立...

    2018-01-30
  • 用户体验:网页设计中错误提示的五种设计方法

    每个系统软件在运行的过程中都会出错,可能是用户操作造成的也可能是系统错误。基于这两种情况,如何正确的提示错误信息就显得尤为重要,它直接决定了用户体验的好与坏。一个好的错误提示必备的3条重要法则:清晰地文本提示语放置在正确的位置良好的视觉设计清晰的文本信息1. 错误提示信息应该简明易懂提示信息应该明确的表明发生了什么错误、发生的原因以及解决方法。将你的错误提示信息看作是一次对话,跟用户说人话。确保你的文案是礼貌性的、易于理解的、友好的并且...

    2018-04-07
  • 用户为王时代,美的如何开创用户体验新模式

    4月23日,美的联手京东推出了巅峰24小时AR新玩法,不仅福利多多,还将家电焕新的概念融入到趣味游戏中,打造了良好的用户体验,赢得了众多用户认可。随着大数据、云计算、社交商务、移动技术等新技术的发展,用户对个性化的产品和服务的需求更加强烈,并期望企业去了解他们真实的需求和提供卓越的服务体验。在此变化下,美的坚持以用户为中心的理念,推进实施关注用户实际需求的创新模式,通过用户体验实证推动产品销售和企业发展。产品研发融合需求从以前的设计师主...

    2018-04-23
  • 【干货】Axure产品原型在手机上运行的完整教程

      图1 模拟丁香园的高保真原型   在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌…

    2014-11-26
  • 优化夜间阅读体验-夜间模式设计通用方法

    作者:花咯   你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学的验证我们的设计,我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面,并总结…

    交互专题 2017-08-07