IOS 9人机界面指南(4):UI元素

   4.1 栏

  4.1.1 状态栏

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

  默认(深色)内容


  浅色


  状态栏:

  是透明的

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

  不要创建自定义状态栏。

  用户依赖系统默认状态栏的一致性。就算你可能会在应用中隐藏它,也不宜定制一个新的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来填充导航栏背景色)

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

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

  导航栏标题应该变成当前层级的标题。

  当前标题左侧放置应有返回按钮,需要的话,返回按钮可以以前一层级的标题命名。

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

  若觉得标题冗余,你也可以将标题留空。举个例子,备忘录的导航栏中就没有当前备忘录的标题,因为备忘录的第一行就已经提供了所有用户需要的内容。


  考虑在应用最高层级的导航栏中放置一个分段控件。

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


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

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

  即使空间充足,也应当避免让过多的控件填满你的导航栏。

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

  确保文字按钮之间拥有足够的空间。

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

  确保你自定义的导航栏在你的应用的每个视图中都拥有一致的外观与体验。

  举个例子,不要在同一个应用中使用不透明导航栏和半透明工具栏。在屏幕处于同一方向时,最好不要改变不同屏上导航栏的背景图片、颜色和透明度。

  确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。

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

  重要

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

  在用户需要专注于内容的时候,可以考虑隐藏导航栏。

  当你这么做的时候,请确保用户通过一个简单的手势(比如一下轻击)即可重新唤起导航栏。


  4.1.3 工具栏

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


  工具栏:

  是半透明的

  在iPhone上,工具栏始终位于屏幕底部,而在iPad上则有可能出现在顶部

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

  你可以在工具栏里提供一系列让用户对当前视图内容进行操作的工具。

  在工具栏里放置用户在当前情景下最常用的指令。

  尽量避免在工具栏里提供一些仅会偶尔用到的指令。

  可以在工具栏里放置分段控件以方便用户快速切换当前内容的不同视图或模式。

  在工具栏中提供应用全局的任务或者模式分段控件是不恰当的,因为工具栏中的所有操作都应当是针对当前屏幕和视图的。如果你需要让用户可以快速唤起应用全局的任务、或改变全局视图和模式,可以使用标签栏(Tab Bar)。想要了解更多分段控件的内容,请参考下文的分段控件(Segmented Control)部分;想要了解更多标签栏的内容,请参考下文中的标签栏(Tab Bar)部分。

  如果需要在工具栏上展示3个以上的项目,可以使用图标。

  由于文本按钮通常会比图标更占空间,所以用图标可以避免文字标题们挤在一起。

  保证工具栏文字按钮之间有足够的间距。

  如果按钮之间间距过小,会让蚊子看起来挤在一起,让用户觉得它们难以区分。如果按钮在导航栏中显得太过拥挤,可以用UIBarButtonSystemItemFixedSpace常数来增加他们之间的间距。(想要了解更多关于这个常数的内容,请参考UIBarButtonItem Class Reference.)

  4.1.4 工具栏与导航标准按钮

  iOS提供了一系列工具栏与导航栏上的内置标准按钮。想要了解如何设计自定义图标,请参考本文第五章栏按钮图标(Bar Button Icons)部分。工具栏和导航栏图标的颜色可以通过tintColor属性来设定。

  想要了解每一个按钮所对应的标志名称及其含义,请参阅UIBarButtonItem Class Reference中的UIBarButtonSystemItem部分。

  重要

  跟所有标准按钮和图标相同,应当根据文档中说明的图标含义,而不是只凭图标外观来使用这些工具栏图标和导航栏图标。这样能够保证在关联特定意义的按钮改变了外观的情况下,你的应用中的UI仍然是可用而有意义的。

  表格 41-1 工具栏与导航栏标准按钮 (Standard buttons available for toolbars and navigation bars)


  除了表格41-1里展示的标准按钮之外,你还可以使用系统提供的编辑、取消、保存、完成、撤销、重做等等按钮来支持编辑或其它操作。这些按钮的标题即是按钮的操作内容。想要了解每一个按钮的名称及其含义,请参阅UIBarButtonItem Class Reference中的UIBarButtonSystemItem.

  另外,你还可以在工具栏中放置系统提供的信息按钮(info button).


  4.1.5 标签栏

  标签栏让用户在不同的子任务、视图和模式中进行切换。


  标签栏位于屏幕底部,并应该保证在应用内任何位置都可用。标签栏是半透明的,展示图标和文字内容,每一项均保持等宽。当用户选中某个标签时,该标签呈现适当的高亮状态。

  标签栏:

  是半透明的

  始终出现在屏幕的底部

  一个标签栏一次最多可承载5个标签(多于5个标签的时候,可以展示前4个标签和一个“更多”,并将其他的标签以列表形式收纳到“更多”里面)

  在横屏与竖屏情况下,高度均保持一致

  你可以在标签上加上红底白字,显示数字或者省略号的小气泡(badge)以展示特定的应用信息

  你可以使用标签栏来切换对同一组数据的不同视图模式,或者整体功能下不同的子任务。

  一般而言,使用标签栏来组织整个应用层面的信息结构

  标签栏非常适合用于应用的主界面中,因为它可以很好地扁平信息层级,并且同时提供多个触达同级信息类目与模式的入口。

  不要使用标签来让用户执行对于当前应用与屏幕内容的操作。

  如果你需要给用户提供操作控件,请使用工具栏。

  即使标签当前不可用,也不要把它从标签栏中删除。

  让某些标签时而出现时而隐藏,会让用户觉得你的应用UI不稳定而且难以预测。最好的解决方式是确保每个标签都可用,然后给用户解释某个标签的内容不可用的原因。举个例子,当用户没有在设备中保存任何歌曲,在系统音乐应用的歌曲标签页里就可以教育用户如何去下载一首歌。

  考虑在tab上加入红色的小气泡(Badge)以低调地传达信息。

  你可以通过添加小气泡来告知用户该标签中包含新的内容。

  根据控件的标准含义来选择系统提供 的图标。

  详情请查看下文中的标签栏标准图标(Tab Bar Icons)。如果想自定义标签栏图标,请参考文档第五章中Bar Buttons Icons里给出的建议。

  在横屏视图中,你可能会在对分视图(split view pane)或者浮出层 (popover) 内使用标签栏以切换或筛选视图中的内容。

  如果这些标签是用于切换或者过滤当前视图中的内容的话,你可以这么做。然而通常情况下,在对分视图和浮出层底部使用分段控件效果会更好,因为视觉上看起来更为协调。更多详情请参考文档本章第三节中的分段控件。

  避免让过多的标签填满你的标签栏。

  放置太多标签会让用户难以选中他想要点击的那一个。而同时每添加一个标签,意味着你的应用程序又复杂了一分。

  尽可能地在横屏与竖屏情况下都展示相同数量的标签。

  在不同的屏幕方向下提供同样的标签可以让用户对应用建立很好的视觉稳定感。在横屏中,你应该将与竖屏时数量相同的标签居中展示。在横屏中,避免使用“更多”标签。如果应用是横屏的,那么把额外的操作都塞到一个“更多”里面是对空间一种糟糕的浪费。

  4.1.6 标签栏标准图标

  iOS提供了一系列标签栏标准图标,在下面的表格35-2中有详细展示。想要了解如何设计自定义图标,请参考文档第五章栏标准按钮部分。标签栏图标的颜色可以通过tintColor属性来设定。

  想要了解每一个图标的名称及其含义,请参阅UIBarItem Class Reference中的UITabBarSystemItem部分。

  重要

  跟所有的标准按钮与图表相同,根据文档说明的图表含义而不是仅凭图表外观来使用这些图标是很关键的。这样能够保证在关联特定含义的按钮改变了外观的情况下,你的应用中的UI仍然是可用而有意义的。

  表格 41-2 标签栏标准按钮 (Standard icons for use in the tabs of a tab bar)


  4.1.7 搜索栏

  搜索栏获取用户键入的文本,用以作为搜索的关键字(下图中显示的文本为占位符,非用户输入文本)。


  搜索栏可能包含以下这些可选元素:

  占位符文本(Placeholder text)。占位符文本通常会写明控件的功能(比如上图里的 “Search”字样),或者提示用户输入的文本将在哪里搜索(如“Google”)。

  书签按钮(The Bookmarks button)。书签按钮可以让用户方便地找到他们需要的内容。例如在地图中搜索时,用户可以通过书签按钮快速选中书签地址、最近搜索记录、或通讯录。


  书签按钮只有当搜索栏中没有占位符或用户输入内容时才会出现,当搜索栏中已有文本时,书签按钮会被清除按钮(Clear button)所代替。

  清除按钮(The Clear button)。大多数搜索栏都会提供清除按钮,方便用户一键清空输入内容。


  一旦用户在文本框中输入内容,清除按钮就会出现,用户可以用它来一键清空输入内容;而当搜索框中没有任何文本内容时,清空按钮将被隐藏。

  结果列表图标(The results list icon)。结果图标说明此次搜索有搜出结果。当用户点击它时会出现用户最近一次搜索的搜索结果。


  提示(Prompt)。描述性标题,我们称之为提示。描述性标题是一个短而完整的句子,为搜索栏提供介绍或指引应用特定信息。

  在你的应用中使用搜索栏让用户进行搜索。不要使用文本框,因为文本框的外观不符合用户对搜索的预期。

  在iOS 8以及之后的版本里,你可以通过UISearchDisplayController简单快捷地把搜索栏放在导航栏中。请注意,当搜索的视图控制器包含在导航控制器里面的时候——比如在邮件应用(Mail)中那样,当用户激活搜索时,搜索栏会自动上浮,平铺到原来导航栏的位置上。

  根据搜索功能在你的应用中的重要程度来选择搜索栏的样式。

  如果搜索在你的应用中是最基础的功能,请使用突出样式(the prominent style);如果搜索不是用户常用的功能,那么可以使用弱化样式(the minimal style)。


  4.1.8 范围栏

  范围栏只有在与搜索栏一起时才会出现,它让用户可以定义搜索结果的范围。

  当搜索栏出现时,范围栏会出现在它的附近。范围栏的外观与你所指定的搜索栏的外观兼容。

  当用户想在明确的分类范围内进行搜索时,使用范围栏是非常有用的。然而,更好的选择是优化您的搜索结果,让用户不需要使用范围栏对搜索结果进行筛选,便可以找到他们所需要的内容。

时间: 2024-08-03 07:18:49

IOS 9人机界面指南(4):UI元素的相关文章

超赞的IOS 8人机界面指南(1):UI设计基础

  今天这篇长文让人激动到手发抖,腾讯译者糖箔糊的心血译作,整篇2万多字,源自官方超详细的IOS 8人机界面指南,非常用心的作品,文字到位,逻辑清晰,保证任何一个细节读起来都能明白晓畅,趁着IOS 8 刚刚发布,赶紧提前学起来,千万记得收藏呦! 小技巧:Word 2013会自动检测目录,阅读模式下学习非常方便! 1.1 为iOS而设计(Designing for iOS) iOS 的革新关键词如下: 遵从 :UI能够更好地帮助用户理解内容并与之互动,但却不会分散用户对内容本身的注意力. 清晰 :

[ISUX译]iOS 9人机界面指南(一):UI设计基础

[ISUX译]iOS 9人机界面指南(一):UI设计基础 raina 2015.10.29 文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 设计跟随内容 (Defer to Content) 1.1.2 保证清晰(Provide Clarity) 1.1.3 用深度层次来进行交流(Use Depth to Communicate) 1.2 iOS应用解析(iOS App Anatomy) 1.3 适应性和布局(Adaptivity and Layout) 1.

[ISUX译]iOS 9人机界面指南(三):iOS 技术

[ISUX译]iOS 9人机界面指南(三):iOS 技术 UI规范 summer 2015-11-29 3247浏览 0评论 专为0基础小白量身打造的UI设计入门课程(ps,ai软件+图标技巧),在线学习2个月包教会(公开课3位师傅),拜师费1500,随到随学,可插班.抢名额请加qq群:429369013咨询. 本文译自苹果官方人机界面指南 iOS Human Interface Guidelines ,由腾讯ISUX设计师翻译整理,非发文者一人之作. 文章索引 3.1 3D触摸(3D Touc

超实用的IOS 9人机界面指南(1):UI设计基础

  1.1 为iOS而设计(Designing for iOS) iOS 表现了以下三大设计原则: 遵从(Deference):UI应该有助于用户更好地理解内容并与之交互,并且不会分散用户对内容本身的注意力. 清晰(Clarity):各种尺寸的文字清晰易读;图标应该精确醒目,去除多余的修饰,突出重点,以功能驱动设计. 深度(Depth):视觉的层次感和生动的交互动画会赋予UI新的活力,有助于用户更好地理解并让用户在使用过程中感到愉悦. 无论你是重新设计现有的应用,还是重新开发一个新应用,请基于下

超实用的IOS 9人机界面指南(2):设计策略

  设计原则 美学完整性 美学完整性不评判应用的视觉设计,也不是用来描述应用的风格特征.美学完整性是指在一款应用的视觉表现和交互行为与功能结合后所传达出的整体一致性. 人们关心应用是否提供了应有的功能,但是也会潜移默化甚至是很直接地被应用的视觉表现和交互行为所影响.举个例子,一款协助用户完成任务的应用,可以通过使用精美而又无干扰的装饰性元素.标准的控件和可预期的交互行为很好地帮助用户聚焦在任务本身上.这样,应用就能传达出清晰而一致的信息,使得人们信任它.但是,如果应用使用干扰的.琐碎的或随意的U

APPLE WATCH人机交互指南之UI元素设计

  1.标签 标签呈现静态文本. 标签: - 呈现任意数量的静态文本 - 不允许直接的用户交互 - 可以通过程序升级 - 可以跨越多行 标签是你应用中最常见的元素.使用标签向用户呈现简短的消息.标签最适合呈现相对少量的文字. 让你的标签清晰易读 对你的标签文字使用高对比的颜色,并使用动态类型(Dynamic Type)确保标签文字的大小适合用户. Apple Watch内置的系统字体提供了最佳可读性,我们推荐使用它.如果你选择使用用户字体,不要使用花体字母或者艳丽的色彩.(关于在app中使用文字

手把手带你入门IOS 8人机界面设计

  在去年,Apple针对新时代用户彻底更新了其设计语言.现在的设计语言相对之前大为简化,能够让设计师将精力集中到动画和功能上,而不是繁复的视觉细节上. 很多人都曾问过我:设计应当如何入门?成为一名优秀设计师有没有捷径可走?要我说,虽然没有捷径,但确实有几个适用于iOS的设计技巧和规则能够从全局角度改变你的设计方式. 当然,即便你目前的设计目标是完全不同于iOS的平台,相互之间的设计理念也是相通的,你可以将在web和印刷领域学习到的技巧运用到iOS设计中去.iOS 8是一个让设计寻回根源的平台,

聊聊IOS人机界面指南中的三个关键词

  翻了下这几年的iOS人机界面指南,开篇始终是遵从(Deference),清晰(Clarity),深度(Depth)这三个关键字,从iOS7到iOS9从未变过.在iOS>中UI作为内容的支撑,始终服务于内容,就像乔帮主说的"设计不只是看上去的样子和感觉,设计的关键在于它如何发挥作用." 一.遵从 (Deference) 设计为内容服务,UI作为内容的支撑,可以帮助用户更好地理解内容并与之交互,且不会分散用户对内容本身的注意力.以内容为中心被反复强调,而平时设计师却常常会因为过度

苹果iOS人机界面指南

苹果iOS人机界面指南用户界面原则 好的人机界面规范遵从于用户思考和行动的方式,而不屈从于设备的性能.一个缺乏吸引力,复杂的,或违悖逻辑的用户界面,却会让原本优秀的应用变得索然无味.反过来, 一个漂亮的,直觉感知的,引人入胜的界面能强化应用程序的功能,并且能在用户心中激发出正面的情绪. 整体之美 整体之美,并不是简单地指应用界面有多漂亮,而是指应用的外观和功能是否完美地结合.例如,用来处理实际工作的应用通常会简化装饰性的UI元素,并置于背景中,而将重要的地位让给任务本身,因而会仅提供标准的控件和