This is 腾讯ISUX's Tencent Weibo homepage. Follow now!

腾讯ISUX 收听

腾讯社交用户体验设计,简称ISUX (Internet Soc...

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

2016-02-24


文章索引

  • 4.1.1 状态栏

  • 4.1.2 导航栏

  • 4.1.3 工具栏

  • 4.1.4 工具栏与导航标准按钮

  • 4.1.5 标签栏

  • 4.1.6 标签栏标准图标

  • 4.1.7 搜索栏

  • 4.1.8 范围栏

  • 4.2.1 活动

  • 4.2.2 活动视图控制器

  • 4.2.3 集合视图

  • 4.2.4 容器视图控制器

  • 4.2.5 图片视图

  • 4.2.6 地图视图

  • 4.2.7 页面视图控制器

  • 4.2.8 浮出层

  • 4.2.9 滚动视图(Scroll View)

  • 4.2.10 分栏视图控制器

  • 4.2.11 表格视图

  • 4.2.12 文本视图

  • 4.2.13 网络视图


4.1 栏


4.1.1 状态栏


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

默认(深色)内容


 


浅色



状态栏:

  • 是透明的

  • 始终固定在整个屏幕的上边缘


API注释


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


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


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

栏后面:


  • 使用导航控制器(navigation controller)来展示内容。导航控制器自动展示状态栏背景,同时能确保内容视图不会出现在状态栏后面。(了解更多请参考 Navigation Controllers)。

  • 在状态栏后面放一个低调的、不会抢走用户注意力的自定义图形——比如一道渐变。想要保证这样的图形始终固定在状态栏后面,你可以用视图控制器(view controller)来让它固定在滚动内容上一层,又或者可以用滚动视图(scrolling view)来保证图形固定在屏幕的顶部。

  • 让内容固定在导航栏区域外显示(这个区域由应用的statusBarFrame属性来定义)。如果你确定要这样做的话,请给导航栏区域添加固定的、与屏幕背景色相同的背景色。


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


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


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


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


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


4.1.2 导航栏


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




导航栏:


  • 是半透明的

  • 通常位于屏幕的上方,状态栏正下方。在横屏视图中,导航栏也可以包含在某一视图中,不需要与整个屏幕等宽,比如说它可以出现在对分视图控制器(split view controller)的其中一侧。

  • 当键盘被唤起、用户使用了手势、或者当前视图变为竖屏的情况下,导航栏可以隐藏。

  • 可以填充颜色(使用tintColor来定义导航栏中的图标与文字颜色;使用 barTintColor来填充导航栏背景色)


API注释


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


你可以用导航

正在加载...