首页 > 开发 > 设计 > 正文

[ISUX译]iOS 9人机界面指南(四):UI元素

2017-09-15 09:31:38  来源: 网友分享

4.1 栏

4.1.1 状态栏

状态栏展示了关于设备及其周围环境的重要信息。

默认(深色)内容xa0status_bar_default_2x

浅色

status_bar_light_2x

状态栏:

  • 是透明的
  • 始终固定在整个屏幕的上边缘
  • API注释

    你可以将全应用的状态栏风格设计成统一的,或者给不同的视图控制器定义不同的状态栏风格。想要了解更多内容,你可以通过UIApplication Class Reference来了解UIStatusBarStyle常数,以及通过UIViewController Class Reference来了解更多关于preferredStatusBarStyle属性的内容。

    不要创建自定义状态栏。用户依赖系统默认状态栏的一致性。就算你可能会在应用中隐藏它,也不宜定制一个新的UI来代替原有系统状态栏。

    避免滚动内容直接透过状态栏显示。你不会希望用户在滚动的时候看到五花八门的内容和状态栏自身的元素混合在一起。想要让用户感受到内容区域够大的同时,最大限度地保证可读性,请保证在状态栏后面添加一块背景,用以模糊出现在状态栏后的内容。以下有一些方法可以让滚动的内容能正常显示在状态栏后面:

    • 使用导航控制器(navigation controller)来展示内容。导航控制器自动展示状态栏背景,同时能确保内容视图不会出现在状态栏后面。(了解更多请参考xa0Navigation Controllers)。
      • 在状态栏后面放一个低调的、不会抢走用户注意力的自定义图形——比如一道渐变。想要保证这样的图形始终固定在状态栏后面,你可以用视图控制器(view controller)来让它固定在滚动内容上一层,又或者可以用滚动视图(scrolling view)来保证图形固定在屏幕的顶部。
      • 让内容固定在导航栏区域外显示(这个区域由应用的statusBarFrame属性来定义)。如果你确定要这样做的话,请给导航栏区域添加固定的、与屏幕背景色相同的背景色。

        千万千万,避免在状态栏后面叠加会分散注意力的内容。尤其是,你不能让用户觉得轻击状态栏之后可以获取内容或激活你的应用中的控件。

        隐藏状态栏时请慎重。由于状态栏是透明的,通常情况下不需要隐藏它。始终隐藏状态栏意味着用户必须退出你的应用才能知道现在的时间,或者了解当前环境下是否有Wi-Fi连接。

        在用户全屏观看媒体时,考虑隐藏状态栏以及所有页面UI。当你这么做的时候,请确保用户在轻击屏幕时即可重新唤起状态栏以及相关的UI。而除非你有充分的理由,否则最好不要重新定义一个手势来让用户唤起状态栏,因为用户不会发现,就算发现了也难以记住。

        为你的应用选择配色协调的状态栏颜色。默认的状态栏内容是黑色的,在浅色应用中效果出色,而相应的浅色状态栏则更适用于颜色较深的应用。

        在适当的时候展示网络活动指示器(network activity indicator)。这可以提醒用户显示长时间的网络接入状态。更多详情请参考本章第三节控件部分的网络活动指示器部分(Network Activity Indicator)。

        4.1.2xa0导航栏

        导航栏能够实现在应用不同信息层级结构间的导航,有时候也可用于管理当前屏幕内容。

        nav_bar_iphone_2x

        nav_bar_ipad_7_2x

        导航栏:

        • 是半透明的
          • 通常位于屏幕的上方,状态栏正下方。在横屏视图中,导航栏也可以包含在某一视图中,不需要与整个屏幕等宽,比如说它可以出现在对分视图控制器(split view controller)的其中一侧。
            • 当键盘被唤起、用户使用了手势、或者当前视图变为竖屏的情况下,导航栏可以隐藏。
            • 可以填充颜色(使用tintColor来定义导航栏中的图标与文字颜色;使用xa0barTintColor来填充导航栏背景色)

              API注释

              导航栏包含于导航控制器(一个管理显示自定义视图层级结构的程序对象)中。想要了解更多关于如何在代码中定义一个导航栏的信息,请参阅Navigation Controllers,xa0UINavigationController Class Reference和xa0UINavigationBar Class Reference.

              你可以用导航栏在不同视图间提供导航,或在上面放置管理当前视图内容的相关控件。如果你需要提供导航栏难以承载的大量控件同时又不是非要提供导航不可,你可以考虑使用工具栏(Toolbar)。

              当用户到达一个新的层级,导航栏需要做出这样的改变:

              • 导航栏标题应该变成当前层级的标题。
              • 当前标题左侧放置应有返回按钮,需要的话,返回按钮可以以前一层级的标题命名。
              • xa0使用当前视图的标题作为导航栏标题。若觉得标题冗余,你也可以将标题留空。举个例子,备忘录的导航栏中就没有当前备忘录的标题,因为备忘录的第一行就已经提供了所有用户需要的内容。

                nav_bar_title_not_required_2x

                考虑在应用最高层级的导航栏中放置一个分段控件。它能够帮助你更好地扁平信息层级,也会让用户更容易找到所需内容。如果在导航栏中使用了分段控件,请确保返回按钮标题命名的准确。(更多使用指引请参阅本章第三节中的分段控件。)

                prompt_stocks_2x

                如果需要的话,可以考虑在导航栏位置使用提示语(prompt)来告诉用户在当前屏幕中他们可以做什么。提示语是一句出现在导航栏顶部的短句。举个例子,股票应用(Storcks)中就给用户提供了这么一句提示,来确保用户知道怎么去搜索自己想要的信息。

                如果你需要用到提示语,请设计一句简明扼要的单句,并在句末配以适当的标点符号。

                即使空间充足,也应当避免让过多的控件填满你的导航栏。一般来说,导航栏上应该不多于以下三个元素:当前视图的标题、返回按钮和一个针对当前的操作控件。而当你在导航栏中使用了分段控件,就不要再放标题以及其它多余控件了。

                确保文字按钮之间拥有足够的空间。如果导航栏左边或右边的文字按钮之间的间距太小,那些文字看起来会像挤在一起一样,让用户难以区分。如果按钮在导航栏中显得太过拥挤,你可以使用UIBarButtonSystemItemFixedSpace常数来给他们增加适当的间距。(想要了解更多关于这个常数的内容,请参考xa0UIBarButtonItem Class Reference.)

                确保你自定义的导航栏在你的应用的每个视图中都拥有一致的外观与体验。举个例子,不要在同一个应用中使用不透明导航栏和半透明工具栏。在屏幕处于同一方向时,最好不要改变不同屏上导航栏的背景图片、颜色和透明度。

                确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。用户知道系统默认的返回按钮能帮助他们在信息层级中追踪自己的路径,如果你想重新设计它,请确保使用一个自定义的蒙版图层 (custom mask image),它可以在iOS中让这些按钮标题在系统各转场中出现或者消失。

                重要

                不要创建多段式(multisegment)返回按钮。返回按钮通常是用来帮助用户回到当前层级的父层级中去的。如果你担心用户在没有了这种多节式的、如同面包屑一般的返回按钮后会迷路,那么你也许该好好考虑如何扁平你的信息层级了。

                在用户需要专注于内容的时候,可以考虑隐藏导航栏。当你这么做的时候,请确保用户通过一个简单的手势(比如一下轻击)即可重新唤起导航栏。

                nav_bar_map_2x

                4.1.3xa0工具栏

                工具栏上放置着用于操作当前屏幕中各对象的控件。

                mail_toolbar_iphone_2x

                mail_toolbar_ipad_2x

                工具栏: