分组型(grouped)表格包含至少一组列表。每一组总是包含至少一项。每一组起始于眉标文字,收尾于脚标文字(A group can be preceded by header text and followed by footer text.这一句真不好翻译啊)。默认情况下,分组被放置在蓝色背景上,组内的背景是白色的。分组型表格没有编号。
iOS 提供了一些表格元素,用于拓展表格的功能。除非特别标注,这些元素仅适用于表格视图。 iOS 3 及以后的版本提供了4 种表格视图样式,为朴素型和分组型表格提供了最常见的表格样式。每一种样式最适合的表达内容有所不同。 默认型。默认型的单元格样式包括默认左对齐的标题,每一行最左边还有可选的图片。 在默认样式的单元格里,文本的外观暗示它代表项目的名称或标题,左对齐也使列表容易浏览。这使得默认样式很适合展示一列不需要辅助信息就能加以辨别的项目。 副标题型。默认型的单元格样式包括默认左对齐的标题,每一行最左边还有可选的图片。 每个标题下面还有副标题。主标题黑色,副标题字号小一点,是灰色的。 在副标题型里,字符的显著性暗示它是项目的名称或标题,而副标题外观暗示它包含与主标题相关的辅助信息,左对齐也使列表容易浏览。这种样式适合项目看起来差不多的情况,用户可以利用额外的信息来帮助区分项目。 Value1 这种样式用左对齐的黑色字体显示主标题,用右对齐的小号蓝色字展示副标题。 图片不适合这种样式。 在这种单元格里,字符的外观暗示它是项目的名称或标题,而副标题的外观暗示它包含与主标题相关的重要信息左对齐和字体使列表容易浏览,右对齐的副标题将用户的注意吸引到它提供的相关信息上。这种布局尤其适合展示项目当前的状态,可能是该项目对应的子列表中被选中的那一项。 Value2.这个样式展示右对齐的蓝色子标题,右边紧邻左对齐的黑色主标题。图片不适用本样式。 在Value2 单元格中,右对齐、受限的宽度以及字体暗示这是标题,但左对齐的内容更加重要。 在这种布局下,每一行两部分内容的相接点位置相同。这在两列内容间创建了整齐的一列空隙,用户阅读右侧的主内容会更加轻松。 指南 你可以使用表格视图来高效地展示或多或少的信息。例如以下情景: 提供一系列可供用户选择的项目。可以使用勾选标记向用户展示以选中的内容。 当呈现用户点击表格中某一项后出现的一列选项时,任何一种样式都适用。当呈现用户按下按钮或其他不在表格中的元素后出现的列表时,适用朴素型。 展示层级信息。朴素型样式尤其适合展示层级信息。列表中的每一项都是通往各种子信息的入口。用户通过在一系列列表中的选择来浏览层级信息。这个图标 暗示用户点击该项后还会有子列表。 呈现概念上可归组的信息。两种表格样式都允许在各段的分割处添加段眉和段脚,以示分组。分组性表格的圆角可以很清晰地分割各组信息,即使在快速滚动时效果也很好。 展示有编号栏的信息。朴素型样式支持编号,可以让用户快速找到需要的信息。编号通常是贴在屏幕右边缘的一栏字符,通常是按字母表排序的字母。用户触摸(或拖拽)编号,展示相关的区域。 如果你要用编号栏,避免在屏幕右侧边缘展示信息(比如这种图标 ),因为会与编号栏冲突。 在用户选择列表项的时候提供反馈。用户希望在点击列表项的时候它能高光一下。点击后用户期望响应的动作会立即执行:出现一个屏新东西或者项目被勾选。
有时,即使与被选中项目相关的辅助细节或控件已经在同一屏出现了,被选中项还处于高光态。但是,我们不鼓励这样做。因为一列项目,加上选中项,加上相关的细节或控件,会乱成一锅粥。 用动画展示用户对列表项的改变。这可以提供反馈,增强用户直接控制的感觉。在“设置”中,关闭“自动调整时间”后,列表组会慢慢展开,展示设置“时间和日期”的区域。 如果表格内容很复杂,避免等到所有信息都载入后再展示。应该立刻展示文本,然后等复杂的信息完备后再展示它们。这种技术可以立刻给用户一些有用的信息,增加程序的反馈性。 考虑在等待载入信息时展示原有信息。如果你的程序展示的信息不太常变,这种技术可以让用户立刻看到一些有用的信息。如果信息经常变动,那就算了吧。在决定这样做之前,调查一下信息更新的频率以及很依赖新信息的用户所占的比重。 如果数据很复杂或载入很慢,要提供信号,暗示处理进行中。如果表格包含的信息很复杂,可能无法立刻提供有用的信息。这种情况下,不要只展示空格子。因为这会暗示程序挂了。你应该在屏幕中心放一个活动指示器,配上“载入中”这样的字符。这会给用户提供反馈,让他们知道程序还在继续努力。 朴素型表格的高度不能为适应内容而变化。分组型表格的行高是可以变得,但是在朴素型表格里就看起来很乱。 Value1 和Value2 的表格很适用于分组型。虽然几种表格样式你可以随便用,但value1和value2 与分组型表格最搭配。例如,“设置”用了value1,iPhone 版Contacts 用了value2。
尽量保持标题简洁,避免被截断。单词和短语被截断后很难阅读和理解。在各种表格样式中,文本截断都是自动的。但这可能因单元格样式和截断位置的不同而引起各种问题。 在默认样式中,短的文本标签最好。如果截断不可避免,尽量把重要的词放在前面。 在副标题型样式中,短的文本标签也是最好。如果截断不可避免,尽量把重要的词放在前面。如果副标题的文字被截断了,用户可能不会太介意,因为这里的信息是辅助主标题的。 在Value1 样式中,自动截断很难避免。因为要在同一行展示两节信息。但截断也是有必要的,否则就没办法在两节信息间留下分隔空隙了。 在Value2 样式中,截断的字段会破坏两节文字间整齐的空隙。当行与行之间的空隙不一致时,用户会很难浏览右侧的细节信息。 可以通过增加行高来容纳更多的文字,以避免截断。但这会导致如下问题: 你需要系统地检查一遍文字是否能被栏充分地包起来。竖屏模式和横屏模式都要检查,因为表格宽度也会有影响。 不要在一个方向上是包好的,而在另一个方向上不是不论采用什么表格样式,自适应的行高都会影响表格的整体展示效果。 如果你想用非常规的方式展示表格,最好不要和标准样式差别太大。 文本视图 文本视图可以展示多行文本。 外观和行为 文本视图是一个高度任意的圆角矩形。如果内容过多,超过了便捷显示范围,文本视图会提供拖动功能。 如果文本视图支持用户编辑,当用户在矩形内点击一下后,键盘就会出现。键盘的布局和输入方式由用户的语言设置决定。当用户触摸标有“.?123”的按键时,键盘会变成用于输入数字和标点符号的类型。 指南 你可以对文字的字体、颜色和对齐方式进行设置,但必须要应用到整块文字。也就是说,不能只设置一部分文字的字体。默认的字体是系统字体,默认的颜色是黑色,因为这样的可读性最高。默认的对齐方式是左对齐。
如果你必须自定义各种颜色和字体,可以使用web 视图取代文字视图,用html 定义文字的样式。 Web 视图 Web 视图是可以用来展示丰富的HTML 文本的区域。 外观和行为 除了展示网页信息外,web 视图还会对网页内容进行一些自动化处理,比如将电话号码自动显示为电话超链接。 指南 如果你有网页或者网页app,可以考虑用web 视图,然后再给它加一个app 的壳。 避免使用web 视图创建一个外观和行为与迷你网页浏览器相似的程序。用户希望使用iOS 上的Safari 来浏览网页内容,所以没必要在你的程序里做重复工作。
警告框、操作列表和模态视图 这三种视图都是当需要获得用户注意、或需要展示额外的信息和功能时临时出现的。当任意一种视图出现时,用户都不能再对主界面进行操作了。 警告框 警告框用于向用户展示对使用程序有重要影响的信息。 外观和行为 警告框浮现在程序中央,覆盖在主程序之上。警告框的外观强调了这样一个事实,它的到来是由于程序或设备的状态发生了重要变动,并不一定是由用户最近的操作导致。用户必须刻意地关掉警告框才能继续进行操作。 警告框通常至少有一个按钮,用户点击后即可关闭窗口。警告框上也总会有标题,并展示额外的辅助信息。警告框的背景色是系统定义的,无法定制。 指南 由于警告框不经常出现,所以一旦出现用户就会谨慎对待。切记限制警告框的数量,确保每一次展示的都是关键、有用的信息。 一般而言,以下情况就木有使用警告框的必要了: 仅仅是为了让一些信息显眼点,尤其是那些与程序的常用功能相关的信息。 相反,你应该用与程序样式和谐的方式让重要的信息吸引眼球。 向用户提示正常进行中程序的进度。 对用户触发的操作讨要“确认” 为了要求用户再次确认刚才触发的操作,即使是删除联系人等有潜在风险的操作,也只能使用操作列表(action sheet)不要提示那些用户无能为力的错误。
虽然有必要使用警告框对用户无法弥补的错误进行提示,但最高把这些消息嵌入到界面里。例如,与其每次服务中断时都提示用户一下,不如在最后一次链接成功时提醒用户。 你可以自由定制警告框的标题和内容,按钮的数量,按钮上的文案。但警告框宽度、背景皮肤以及文字的对齐方式不能更改。 在阅读警告文案设计指南的时候,最好明白以下定义: 标题大写样式(Title-style capitalization):每一个字母都是大写的,除了冠词、 协调连接词和少于四个字符的介词。 句子大写样式(Sentence-style captitalization):第一个字母大写,其他字母小写,除非是特定的名词或形容词。 警告文案要简洁地描述当前情景、告知用户他们可以做什么。理想条件下,你的文案要能让用户明白为什么会出现警告,并知道按哪一个按钮是合适的。 标题简短,要在一行内显示。长标题影响用户阅读速度,还有可能要折行显示。 避免只显示一个没有意义的单词。比如“错误”、“警告” 可以的话,使用句子片段。一个简短的,有信息的陈述要比一个完整的句子更容易理解。 表述负面影响时不要扭扭捏捏。用户知道警告框会告诉他们出问题了,提醒危险情景。 所以直接把问题讲出来要比和谐的语气有用的多。 尽可能避免使用“你”“你的”“我”“我的”。有时,直接定位用户会带来误会,甚至可以被理解为是一种侮辱。 如果标题包含一个问句,那就使用句子大写样式,以问号结尾。一般而言,如果能避免附加辅助信息,就使用问句作为标题吧。 如果标题包含两个以上的句子,使用句子大写样式,并使用合适的标点结尾。通常是不应该用两个句子做标题的,但如果这样可以省掉辅助句子,也是可以考虑的。 如果要提供辅助信息,就写一个简短的完整句子。使用句子大写样式,并使用合适的标点结尾。 避免消息内容过长。可能的话,保持消息足够的短,一两行足以。如果消息过长的话,就需要滚动翻页,这可不是什么好体验。 避免解释“按某个键后有什么效果”。比如“按‘查看’可以浏览更多信息”。理想状态下,清晰的警告文案和富有逻辑的按钮标签足以给人们足够的信息明白当前的情况和合适的选择。然而,如果你觉得必须提供细致至极的解释,最好遵循这些原则: 要用“按”,而非“触摸”“点击”或“选择”,来描叙选择某个键,不要用引号把按钮标题框起来,但要保证它是首字母大写的。 一定要在两种设备方向上都检测一下警告框。因为横屏模式下,警告框的高会偏小,会和竖屏模式下略有不同。建议你优化一下警告框,以便在两种方向上看起来都很棒。 尽量采用有两个按钮的警告框。两键警告框通常是最有用的,因为方便用户在两种选择间做决策。只有一个按键的警告框不是好警告框,因为这样对于用户没什么意义,不能让用户掌控情景。包含多于三个选项的警告框太过复杂,因尽量避免。如果需要向用户展示多多于两个选择,应该考虑使用操作列表。 认真选择警告框上按钮的颜色。警告框的颜色或深或浅。在有两个按钮的警告框上,左边的按钮总是设色的,右边的总是浅色的。在一个按钮的警告框上,按钮总是浅色的。 在包含危险操作的双按钮警告框上,取消应该放在右侧,用浅色按钮表示。 如果双按钮警告框是用于启动某个用户期待的功能,那么取消功能应该放在左侧,用深色按钮表示。 给警告框的按钮赋以简短而富有逻辑的标题。最好的标题包含一到两个单词,与警告框所处的环境相适应。以下指南可以作为准备按钮文案时的参考。 使用标题大写样式,不用在结尾加标点 优先考虑动词或动词短语,比如“取消”“允许”“恢复”和“忽略”等于警告框直接相关的词汇如果没有更合适的词,那么在表达“同意”时优先考虑“OK”。不要用“是(YES)”“否(NO)” 避免使用你,你的,我,我的。按钮标题用了这些词汇后会变得让人费解。 操作列表 操作列表展示一组与用户触发的任务相关的选项。 外观和行为 iPad 上的操作列表与iPhone 上的有些不同。iPhone 上的操作表总是从屏幕底部出现,悬浮在程序上方。操作列表的两端与屏幕的两条边相接,将其与程序以及最近的操作建立紧密联系。 在iPad 上,操作列表总是在浮出层中显示,从不与屏幕同宽。操作列表可以引发浮出层出现,也可以出现在一个已有的浮出层里。这两种情况下,在用户的操作以及操作列表的出现间都有强烈的视觉联系。 操作列表始终包括至少两个按钮,让用户选择怎样完成任务。当用户按下某个键后,操作列表消失。操作列表没有标题或者解释性的文字,因为它是在用户的某个操作后立即出现的(这足以说明它的身份)。 指南 这样使用操作列表: 提供多种完成任务的方式供用户选择。操作列表允许用户提供与当前情景相符的选择,而不用把这些选择放在一个固定的地方。 在完成有潜在危险的任务前获得确认。操作列表的出现提醒用户接下来将面临的危险。这种提醒方式尤为重要,因为用户很可能不小心就触碰到哪里。 在iPhone 上,将操作列表的背景与导航栏和工具栏协调起来。如果你的程序使用黑色的导航栏和工具栏,那就使用半透明黑色背景。如果你的程序使用默认蓝色的导航栏和工具栏,那就使用默认蓝色背景。 你程序中所有的操作列表应该具有一致的背景色。 在iPhone 上,提供取消按钮。这种用户能够轻易且安全地离开任务。把取消按钮放在最下面,鼓励用户在做出选择前通读操作列表。默认情况下,取消按钮的颜色与操作列表的背景色一致。 在iPad 上,选择是否用动画的方式展示操作列表。 用没有动画的方式向用户在浮出层外触发的任务提供选择。没有动画的话,操作列表和浮出层同时出现。用这种方式展现操作列表的话,浮出层的箭头应指向用户触发任务的控件或区域。 不要放取消按钮,因为用户可以触碰浮出层外的区域来关闭操作列表,不用选择任何选项。 用有动画的方式向用户在浮出层外触发的任务提供选择。有动画时,操作列表从已有的浮出层里滑出来。 有动画的操作列表应该包含取消按钮,应为用户需要在不关闭浮出层的前提下就关掉操作列表。 无论哪种设备,有潜在危险的按钮要用红色背景。在操作列表顶端展示一个红色按钮,因为离顶部越近越能吸引注意。在iPhone 上,破坏性的按钮离操作列表底部越远,用户就越不可能在找Home 键的时候误按到它。 避免操作列表太长,需要翻滚。如果你在操作列表中的按钮过多,它就会需要翻滚。 这对于用户来说十分讨厌。因为他们必须花费时间仔细考虑没有选择。而且,翻滚列表又不误按某个按钮是件难事。
模态视图 模态视图用于在当前任务或工作流中提供独立封装的功能。 外观和行为 模态视图会把整个程序屏幕折起来,让用户知觉到一个独立、临时的状态,供他们完成某些任务。 合适的话,模式视图可以拿来呈现文字、以及用于执行某个任务的控件。在模态视图上通常会有完成任务关闭对话框的按钮,或者有个放弃任何改动的“取消”按钮。 指南 当需要在主程序上给用户提供完成某个子任务的独立空间时,可以考虑使用模态视图。 有些子任务需要很多步骤,而且平时没必要把这些控件一直放在屏幕上,这种情况最适合采用模态视图。 在iPad 上,选择与当前任务以及程序的视觉样式相匹配的模态视图风格。你可以选用: 全屏(full screen)。覆盖整个屏幕。这种样式适用于那些非常复杂,用户可以 在模态的封闭环境中完成的任务。例如:iPod 就用这种形式来完成创建Genius 播放列表的子任务。 页表(page sheet)。固定宽度768 像素,与当前屏幕同高。竖屏模式下,这种模态也能覆盖整个屏幕。横屏模式下,页表没覆盖的屏幕区域蒙上半透明的黑色层,避免用户去操作它。例如,Mail 使用这种方式来展示邮件编辑任务。 形式表(form sheet)。固定尺寸540×620 像素,相对屏幕居中对齐。其他没有覆盖的屏幕区域蒙上半透明的黑色层,避免用户去点击。当横屏模式下键盘可见时,形式表向上移动到状态栏下面。这有利于从用户获得信息。 相机行事(current context)。和父级视图的尺寸一致。这种样式很适合在分栏视图、浮出层等非全屏视图里面展示模态视图。 在iPad 上,不要在浮出层上面再蒙一层模态视图。不应该在浮出层上再放任何东西,但警告框是个例外。有时,你需要在用户对浮出层有所操作后展示浮出层。那就先把浮出层关掉,再展示模态视图。 在iPhone 上,让浮出层的外观与主程序一致起来。例如,浮出层上经常会有导航来,上面有用于完成或取消任务的按钮。这种情况下,导航栏的皮肤应该和主程序的导航栏一致起来。 在两种设备上,都应尽可能的在任务界面上展示它的标题。你也可以在视图的其他区域呈现一些文字,完整地介绍当前的任务,提供一些指南。例如,iPhone 版Message 在用户想要撰写短信时会展现模态视图。这个视图有与主程序相同的导航栏皮肤,标题上写的是“新信息”。 对于两种设备,选择合适的转场效果来展示模态视图。使用与主程序相符的样式,加强用户对“出现了模态视图,场景发生了临时改变”的知觉。可以从如下几种样式进行选择。 垂直:模态视图从屏幕底部滑出来,消失的时候反方向滑走。(默认样式)
翻转:当前的主程序界面从右向左翻转,展现出模态视图。模态视图看起来像是主任务界面的背面。当遣散模态视图时,它水平地总左向右翻转,展现出原有的主程序,卷边:卷边看来与iPhone 上的Maps 页面卷曲效果相仿。当前页面的一角卷曲,展示其下方的模态视图。当用户离开模态视图时,卷曲的部分舒展开来,恢复原状。当你要展示的模态视图不是很大,也不需要太多交互时,可以考虑这种方式。比如用于设置属性选项。 记住,用卷边展示的模态视图不能再用于展示其他的模态视图。 如果你决定改变程序中模态视图的转场效果,避免太过花哨。用户会觉察到其中的差异,并任务这可能代表点什么。因此,最好使用用户容易发现且记住的模式,要逻辑清晰且具有一致性。 控件 控件是用户用于完成操作、浏览信息的界面元素。iOS 提供了大量控件供您使用。 活动指示器 活动指示器暗示任务或过程正在进行中。 外观和行为 当任务在进行中时,活动指示器出现。任务完成后立即消失。用户不与活动指示器交互。 默认条件下,活动指示器是白色的。 指南 在工具栏或主视图上展示活动指示器,说明活动正在进行中,但无法展示何时完成。 不要展示静止的活动指示器,因为用户会觉得进程卡死了。 有必要提醒用户进程没有卡死的时候再展示进程指示器,而非展示进程何时完成。 合适的话,调整指示器的尺寸和颜色。 日期和时间拾取器 日期和时间拾取器用于选择时间的各个组成,比如小时、分钟、天、年。
外观和行为 日期和时间拾取器最多可以展示四个独立的轮子,每一个展示一类值,比如月、小时。 用户拖拉每个轮子,直到透明的选择栏下出现想要的值。每个轮子上最终的值组成了拾 取器的值。 拾取器的尺寸与iPhone 键盘的尺寸一致。 日期和时间拾取器有四种状态,每一种展示不同数量的轮子,用于选择不同的值。 日期和时间。展示日期,小时和分钟,上午/下午的轮子可选。这是默认模式。 时间。时间模式展示小时和分钟,上午/下午的轮子可选。 日期。日期模式展示月份、天和年。 倒计时。倒计时展示小时和分钟。你可以设置倒计时的总长度,最多23 小时59 分钟。 指南 使用日期和时间拾取器让用户对包含多段内容的时间进行设置,比如日、月、年。日期和时间拾取器很容易使用,因为每一部分的取值范围都很小,用户也知道会出现什么。 合理的话,改变分钟轮的步长。默认情况下,分钟轮展示60 个值(0-59)。如果用户对时间精度要求不高,可以把分钟轮的步长设置的更大些,最高可达60。例如,对时间精度要求是“刻”,那就展示0,15,30,45. 在iPad 上,只在浮出层里展示日期和时间拾取器。iPad 不适合全屏展示日期和时间拾 取器。 详情展开按钮 详情展开按钮用于展示与某个物体相关的详情或功能。 外观和行为 用户按详情展示按钮,展示与某物体相关的额外信息和功能。这些额外细节或功能会展示在一个独立的视图里。
当详情展示按钮出现在表格视图的“行”里时,按在行的其他位置上不会激活细节展示按钮,这只会选中行或者触发程序自定义的行为。 指南 通常,详情展示按钮会用在表格视图里,用以引导用户查看更多与某项目相关的细节或功能。当然,你也可以在其他视图模式使用它。 信息按钮 信息按钮展示程序的配置,通常是展示在屏幕的背面。 外观和行为 iOS 有两种信息按钮:深色i 浅色背景和浅色i 深色背景。用户按到它时,信息按钮会自动发光闪一下,同时立刻有所响应。比如翻转屏幕展示背面。 指南 使用信息按钮可以展示配置详情或者选项。你可以使用与界面风格最相符的信息按钮样式。 在iPhone 上,使用信息按钮翻转屏幕,展示更多信息。通常,屏幕的背后展示那些不需要呈现在主界面上的配置选项。 在iPad 上,避免使用信息按钮翻转整个屏幕。相反,你可以使用信息按钮向人们展示他们可以进入包含更多信息的扩展视图。 标签 标签用于展示各种数量的静态文字。 外观和行为 标签用于展示各种数量的静态文字。用户不与标签进行交互,但可以复制文本内容。 指南 你可以使用标签命名或描述界面的某一部分或者提供短消息给用户。标签最好用来展示少量文本。 尽量让你的标签清晰可读。不要为了梦幻字体或炫目的色彩牺牲文字的清晰度。
网络活动指示器 网络活动指示器出现在状态栏上,暗示网络活动正在进行。 外观和行为 当有数据传输时,网络活动指示器出现在状态栏上。当网络活动停止后它就消失。用户不与网络活动指示器交互。 指南 当你的程序调用网络数据的时间稍长时,就应该展示网络活动指示器向用户反馈。如果数据传输很快就完成,就不用展示它了,因为很可能用户还没发现它就消失了。 页码指示器 页码指示器可显示共有多少页视图,当前展示的是第几页。 外观和行为 每一页视图在页码指示器里都用一个圆点展示。圆点的顺序与视图的顺序一致。发光的圆点代表当前打开的视图。用户可以按下发光点左右的点,浏览前一页或后一页。 点的间距不能压缩。竖屏视图模式下总共可以容纳20 个点。如果你想放置更多的点,多余的点会被裁切掉。 指南 当需要展示一系列同级别的视图时可以使用页码指示器。如果要展示的视图间存在层级关系,就不要用它了,因为页码指示器不能帮助用户记录步骤和路径。 将页码指示器水平居中放置在屏幕底部。这样它既可以总摆在外面,又不会碍眼。不要展示过多的点。 在iPad 上,考虑在同一屏上展示所有内容。iPad 的大屏幕不适于展示平级的视图,所以对页码指示器的依赖也小一些。 拾取器 拾取器会展示一系列备选值。
外观和行为 日期和时间拾取器起源于拾取器。当使用日期和时间拾取器的时候,用户拨动转盘,直到想要的值出现。在iPhone 上拾取器的尺寸与键盘一致。 指南 当需要在一组值中作出选择时,拾取器用起来更简单。当用户对整组值的内容都有所了解时,拾取器会更加适合。这是因为在任意时刻都有很多值是隐藏起来的。如果用户对可选的值并不了解,拾取器就不适合了。 如果需要展示非常大量的值,还是用表格吧,别用拾取器。表格的高度更大,滚动翻页也会更方便。 在iPad 上,只使用浮出层展示拾取器。全屏展示拾取器不怎么合适吧。 进度指示器 进度指示器用于展示那些可预测完成度(时间、量)的任务或过程的完成情况。 外观和行为 iOS 提供两种进度指示器。两种样式非常相似,但高度有所差别。 默认样式:白色,适合用在程序的主内容区。 栏样式:比默认的细,适合用在工具栏上。也是白色。 任务或过程进行中时。进度指示器的槽从左向右被逐渐填充。在任何时候,已填充和未填充部分间的比例都能告知用户任务或过程多久能完成。用户不与进度指示器交互。 指南
对可以预测总长度的任务或过程应当提供进度指示器,向用户反馈当前进度,尤其是当用户急切地想知道任务大概还要用多少时间。当进度指示器出现时,用户知道任务还在进行中,这样就能判断是继续等待还是终止进程。 圆角矩形按钮 按钮用于执行特定的操作。 外观和行为 按钮的圆角弧度与分组型表格的外角弧度一直。默认情况下,按钮的背景色是白色。 指南 使用圆角矩形按钮可以触发操作。在命名按钮的时候,可以参考以下方式: 使用标题大写样式:除冠词、连词、介词外的词都大写,最多四个词 避免标题太长:太长的词读起来太卡,用户不容易理解。 你可以定义圆角矩形按钮内展示的标题或图片,也可以定义被按下后如何高亮反馈、标题的外观如何改变。 范围栏(Scope Bar) 范围栏可以允许用户定义搜索的范围,只有在和搜索栏配合时才可以使用。 外观和行为 当搜索栏出现的时候,范围栏紧挨着出现在它下面,除非你使用的是搜索显示控制器(search display controler)。当使用搜索显示控制器的时候,横屏视图模式下范围栏会出现搜索框的右侧。 用户可以点击范围栏上的按钮,切换搜索范围。其外观会和搜索框的设置一致。 指南当对用户想搜索的范围有明确或典型的分类时,使用范围栏会很有帮助。例如:用户常常想只在邮件中的某一类中进行搜索。 搜索栏 搜索栏可以从用户获得文本,用做筛选的关键字。 外观和行为 搜索栏看起来像圆角的文本框。默认情况下,搜索按钮放在左侧。当用户点击搜索栏,键盘自动出现;当用户输入完毕后,输入的文本就按系统定义的那样处理。 另外,搜索栏还有一些可选的元素: 占位符文本。可以用它来描述控件的作用(例如“搜索”)或者提醒用户是在哪里搜索(例如“Youtube”“Google”)。 书签按钮。这个按钮可以为用户提供便捷的信息输入方式。例如,在Maps 搜索模式下,用户可以用书签按钮访问标记的地点、最近的搜索和联系人。 只有当文本框里不存在用户输入的或占位符以外的文字时,书签按钮才会出现。因为有了用户输入的文字后,这个位置会放一个清空按钮。 清空按钮。大多数搜索栏包含清空按钮,允许用户点一下就擦除搜索栏中的内容。 当搜索栏任何非占位符的文字时,清空按钮就会出现。如果没有用户提供的或者非占位符,这个按钮就隐藏起来。因为没必要清空搜索栏的必要。 描述性标题。它会出现在搜索上上面。例如,它可以是一小段用于提供指引或介绍上下文的短语。 指南 用搜索栏来实现搜索功能,不要用文本文本框。 你可以在几种标准配色里选取适当的颜色,对搜索框进行自定义: 蓝色(与工具栏和导航栏的默认配色一致)。 黑色。
分段控件 分段控件是一条分割成多段的线,每一段都像是按钮,可以激活一种视图方式。 外观和行为 分段控件的长度由分段的数量决定,高度是固定的。每一段的宽度依比例而定,起决于分段的总数。当用户单击分段,可使其变成选中态。 指南 使用分段控件提供紧密相连又互斥的选项。 确保每一个选项都可以轻松触摸。为了将每一段尺寸维持在44×44 像素以上,你需要限制段的数目。在iPhone 上,分段控件至多可以分成5 段。 尽可能让每一段的标题一致。因为所有段的宽度都是相同的,如果段上的文字标题长度、风格等不一致,会很难看。 避免同时使用文字和图标。分段控件上面可以放文字,也可以放图标,但只能选用一种。 |