天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 开发>技术文档>iOS应用程序设计之UI元素使用指南

iOS应用程序开发:四栏UI元素使用指南

天极网开发频道 2013. 05. 14 作者:Sunny 责编:Sunny
我要吐槽

责任编辑

  【天极网开发频道专稿】在iOS应用程序开发时,UIKit 框架提供了大量的UI元素共开发者使用。但开发者设计应用程序的用户界面时,一定要记得用户对于系统内置的那一套应用程序已经非常熟悉,所以开发者一定要正确的使用这些UI元素,遵循系统内置应用的标准更容易让用户快速上手你的应用。

  另外,使用标准UI的好处就是它们能够自动收到iOS的更新,当开发者使用这些标准的UI,同时可以自定义元素的样式,同样可以收到样式的自动更新。

  iOS应用程序UI 元素主要由状态栏、导航栏、标签栏和工具栏组成。并不是每一个应用程序都需要这些bars,毕竟一个良好的应用程序是越简单越好,但如果必要时也需要呈现这些bars,这时候就需要开发者能够正确地使用这些Bars,本文将主要就这些UI元素的使用提供建议。

  状态栏

  状态栏通常显示与设备和当前系统环境相关的重要信息。

image: ../Art/ui_statusbar.jpg

image: ../Art/ui_statusbar_ipad.jpg

  状态栏样式设置,开发者可以通过在你的Info.plist 文档中修改对应的Value来控制你的状态栏样式,关于如何设置values本文不准备进行阐述,开发者可前往苹果开发者中心进行学习。

  * 样式和行为

  状态栏通常显示在移动设备屏幕的上边缘,包含了用户需要的信息,如网络连接、时间以及电池使用状况等信息。

  在iPhone上,状态栏可以有不同的颜色,iPad上,状态栏通常是黑色的。

  * 设计指南:

  尽管你不会和使用其他UI元素一样使用状态栏,但是这对于你理解你的App的功能很重要。

  1. 如果你的应用程序不是一个游戏或是全屏观看的媒体应用,在是否隐藏状态栏这件事上,一定要慎重考虑。

  如果你隐藏了状态栏,一定要确保用户在一个简单的tap操作就能够调出状态栏,除非你有一个足够的理由,否则尽量避免对显示状态栏的操作重新定义手势,因为用户并不喜欢去挖掘或是单独花精力来记忆这个手势。

  2. 不要自定义创建一个状态栏。

  用户对于系统提供的状态栏有一定的依赖性。尽管你可能会在你的应用程序中隐藏状态栏,但是单独创建一个占空间的状态栏是非常不明智的。

  3.在合适的时候,显示网络活动指示符。

  在状态栏中显示网络连接状态可以帮助用户了解网络连接的时长,关于如何实现网络连接指示符的代码,可以参考Network Activity Indicator。

  4. 对于iPhone设备,你要制定状态栏的颜色。

  你可以选择默认的灰色,或是不透明的黑色,抑或是半透明的黑色。

  选择好状态栏的外观很重要,一定要选择一个与你的iPhone App风格一致的外观。举个例子,如果你的导航栏是不透明的,那么不能选择一个半透明的状态栏。

  导航栏

  导航栏通过信息层级以及选项来帮助用户对应用内容进行管理。

  一个导航栏应该包含导航控制器,提供用户管理内容架构的可视化视图,如果你想知道如何定义一个导航栏,可以参考Navigation Controller.

  * 样式和行为

  导航栏通常在应用程序屏幕的上边缘、状态栏的正下方。导航栏一般都是在居中显示当前屏幕的标题。当通过导航信息进行导航时,用户会点击标题的左侧然后回到上一个页面。相反,用户可以点击特定的导航栏信息来管理屏幕的内容。

  导航栏中的所有控件包括它周围的框,iOS将其定义为边框样式。如果你在导航栏中放置了一个无边框的控件,他会自动转换成边框样式。

  与状态栏一样,导航栏也可以是不透明和半透明的。如果你将你的导航栏设置成半透明的,主内容视图的顶部会和状态栏的底部相遇,这样用户在查看导航栏的时候能够看到导航栏后面的内容。如果导航栏是不透明的,主内容视图的上边缘将和导航栏的下边缘相接。

  在iPhone上,改变设备的方向的时候,导航栏的高度将会自动发生改变。但在iPad上,导航栏的高度和半透明不会因为设备的旋转而发生变化。

  在iPhone上,导航栏始终显示整个屏幕的宽度。iPad上,导航栏可以在一个视图中显示。

  * 设计指南:

  开发者可以在多个不同视图中使用一个导航栏,或者在视图中提供可管理的的控件。

  1. 使用当前视图的标题作为导航栏的标题。

  当用户导航到新的页面时,两件事会发生:

  导航的标题需要更新为新页面的标题;

  返回按钮在标题的左边,还应该标有上一个层级的标题。

  2. 确保用户可以简单轻松的读取导航栏中的文本。

  系统提供了最大的字体,但是你可以根据自己的需要对字体大小进行修改,只要确保不影响用户的体验

  3. 在应用的首页导航中,应该考虑放置一个分段空间。

  这个非常有用,可以将你的导航信息扁平化,从而使用户可以很方便的找到他们要找的内容。如果你在导航中放置了分段控件,一定要选择准确的后退按钮标题。

  4. 就算显示有空间,也不要在导航栏显示与导航无关的其他控件。

  导航栏应该只显示当前视图的标题,返回按钮以及一个能管理当前视图的控件。相反,如果你使用了分段控件,导航栏就buying显示标题。

  5. 根据按钮的目的使用系统提供的按钮。

  如果你决定自定义一个导航栏控件可以参考: “Standard Buttons for Use in Toolbars and Navigation Bars.

  6. 如果可以的话,一定要自定义导航栏的样式已搭配你的应用程序。

  举个例子,你可以对导航栏自定义一个背景图片,选择色调,还可以定义导航栏的透明度。在一些案例中,提供一个可调整大小的背景图片是非常好的做法。当然,一定要保证自定义导航栏的样式与你的应用程序的风格是一致的!

  7. 如果合适的话,自定义导航栏控件的样式。

  特别是,如果你自定义了导航栏的样式,你就应该考虑控件与导航栏的一致性,这是你需要自定义导航栏控件的样式。

  8. 不要创建多重返回按钮,如下:

image: ../Art/ui_navbarmultisegment.jpg

分页导航
作者:Sunny责任编辑:Sunny)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
办公软件IT新闻整机