《iOS规范》学习笔记

来源:https://developer.apple.com

iOS界面元素主要分为三类:栏 Bars、视图 Views、控件 Controls。

视图

控件


下面分别记录各个控件的使用要点。

系统按钮

系统按钮执行app 中定义的行为。

1、标题使用动词;

2、标题不要太长;

3、默认状态下不含边界,也不含背景图;

4、需要的话,为按钮描边或者加入背景。

详情展开按钮

详情展开按钮展示了与该项相关的更多详细信息与功能描述。

1、以一个单独的视图展示特定项目的更多详情信息与功能;

2、在表格行中出现时,点击表格行的其它区域不会激活此按钮,只会选中该行,或者触发app 中其它自定义的行为;

3、注:ios中的表格视图,指的是列表。

信息按钮

信息按钮展示了 app 的配置信息,有时候它会出现在当前视图的背面。

系统按钮

添加联系人按钮让用户将现有联系人添加到文本框或者其它文字视图中。

1、点击按钮可以展示联系人列表;

2、帮助用户将一个联系人添加到当前联系人按钮所在的视图中;

3、除了添加联系人按钮,还要支持键盘输入。


编辑菜单

通过长按或双击视图中的元素,可以选中内容并唤出菜单选项。

1、根据上下文情景,展示合适的命令;

2、如果有需要的话,可以调整编辑菜单的位置,避免遮挡住界面重要信息;

3、不要在界面上提供和编辑菜单具有相同功能的其他控件;

4、允许选择和复制可能有用的不可编辑文本;

5、允许撤销编辑菜单中的操作;

6、可以在编辑菜单中增加有用的自定义命令;

7、把自定义命令放在系统提供的命令后面;

8、最小化自定义命令的个数;

9、保证自定义命令简洁。


标签

标签用于放置静态文本。

1、可以展示任意数量的静态文本;

2、禁止除了复制文本外的任何用户交互行为;

3、保证标签清晰易读。


页面指示器

页面指示器告诉用户当前共打开了多少个视图,以及他们正处在其中哪一个。用户可以点击页面指示器的前边或后缘来访问下一页或上一页,但不能点击特定的点来访问特定的页面。页面选择器是为所有视图平等的场景而设计的。当告知用户有多少打开的视图比帮助用户选择特定的视图更重要时使用 。

1、不要使用页面控件来显示视图中的层次结构;

2、避免显示太多点。超过 10 个点很难让用户一目了然;

3、在屏幕的底部垂直居中页面控件。


活动指示器

表明任务或进程正在进行中。在工具栏或主视图中使用活动指示器,告知用户任务或加载正在进行中,但并不提示该过程何时会结束。

o 当任务进行和加载时旋转,任务完成后自动消失;

o 不支持用户交互行为;

1、不要使用静止的活动指示器。

进度视图

展示了任务或进程的进度。

o 它是一条轨迹,随着进程的进行从左向右进行填充;

o 不支持用户交互行为;

1、只对可量化的任务使用进度条。否则,使用活动指示器;

2、始终准确地显示进度,而不要为了让应用程序看起来很忙而显示不准确的进度信息;

3、默认情况下,进度条包括已填充部分和未填充部分;

4、当在导航栏或工具栏中使用时,隐藏未填充部分,例如表示页面加载时。

网络活动指示器

在状态栏中出现,表示网络活动正在进行。

o 当网络活动正在进行时它会旋转,在活动停止时它则消失;

o 不支持用户交互行为;

1、当网络连接过程持续好几秒的时候使用;

2、如果所需时间很短则不需要使用, 因为很可能在用户注意到它之前就消失了。


刷新控件

刷新控件执行用户触发的内容刷新。一个典型的例子,它常在表格中出现,例如iOS 默认邮件 app 的 mailbox 列表页。

o 看起来类似活动指示器;

o 可以出现在标题中;

o 默认状态下不可见,当用户在表格上缘往下拖拽以刷新内容时才出现;

1、就算使用了刷新控件,也不要因此就不支持内容自动刷新;

2、只有在必要的时候才加短标题。特别需要注意的是,不要使用短标题来描述刷新控件怎么使用。


分段控件

分段控件是一组分段的线性集合,每一个分段的作用类似按钮,点击之后将切换 到相应的视图。

o 由两个或以上的分段组成,每一个分段的宽度相同,与分段的数量成比例 (分段数量越多,则宽度越小)

o 可以包含文字或者图片;

分段控件用来提供密切相关而又互斥的选项。

1、保证每个分段都容易点击。每个分段的大小有至少 44×44 像素。控制分段的数量,1个分段控件最多包含5个分段;

2、尽可能地保持每个分段中的文字长度一致。因为每个分段都是等宽的,当文本长度差异很大时看上去会很不协调;

3、不要在同一个分段控件中混用文字和图片。每一个分段都仅可支持纯文字或纯图 片;

4、请在必要时调整分段控件中文本的对齐方式。


滑块

滑块允许用户在一个限定范围内调整某个数值或进程。

o 由一条水平的轨迹和一个 Thumb(滑块中支持用户水平拖拽的圆形控件) 组成;

o 左边和右边支持使用自定义图片来表述相对的最小值与最大值的含义;

o 填充轨道左边缘最小值之间到 Thumb 之间的部分。

使用滑块来让用户精准地选择自己想要的值,或者控制当前的进程。

1、如果合适的话,自定义滑块的外观;

2、不要使用滑块来显示音量控制。


步进器

步进器是一个两段控件,其中一段默认显示减号,另一端默认显示加号。

o 支持自定义图片;

o 不展示用户更改的值。

1、当用户想要对数值进行小幅度调整时,可以使用步进器。例如修改打印机中的打印份数;

2、当用户需要大幅度调整数值的时候,不要使用步进器。例如选择打印页码范围;

3、确保步进器所调整的值明显可见。因为步进器自身不展示任何数值,所以要保证让用户知道他们正在调整哪一个数值。


开关按钮

开关按钮展示了两个互斥的选项或状态。

1、可以调整外观来匹配应用程序的风格;

2、仅在表格视图中使用;

3、避免添加标签来描述开关的值。开关要么是开的,要么是关的。提供描述这些状态的标签是多余的,而且会使接口混乱;

4、可以使用开关按钮来控制视图中的其它 UI 元素的可用/见性。例如,在设置中启用飞机模式切换会禁用某些其他设置,比如蜂窝和个人热点。在设置> Wi-Fi中禁用Wi-Fi开关会导致可用网络和其他选项消失。


文本框

文本字段是一个单行、固定高度的字段,通常带有圆角的控件。

o 当用户点击它时,它会自动弹出键盘;

o 使用文本字段请求少量信息,例如电子邮件地址。

1、在文本字段中显示提示文字,以帮助用户理解。当占位符文本足够时,不要使用单独的标签来描述文本框;

2、合适的话,在文本框右侧加入清除按钮。轻击清除按钮变可清空当前框内输入的全部内容;

3、当应用程序请求敏感数据时,使用安全文本字段,例如密码;

4、可以文本框中使用图像和按钮,帮助用户理解。 一般放在文本框的左侧用于表述文本框的含义,而右侧用于展示附加的功能,如书签;

5、根据输入内容的类型来指定不同的键盘类型。


选择器

选择器展示了一组值,用户可以从中选择一个。

o 是日期时间选择器的通用模式;

o 包括一个或多个滑轮,每个滑轮含有一组值;

o 当前选中的值在中间,以深色标识;

o 不可以自定义大小(选择器的大小与 iPhone 的键盘相同)。

1、在用户对所有数值均有预期的情况下时使用;

2、避免通过进入其它的视图使用选择器;

3、如果选项数量很多,使用表格视图而不是选择器。

日期时间选择器

展示关于日期和时间的组件,比如小时,分钟,天,以及年。

o 最多可以展示 4 个独立的滑轮,包括四种模式,每一种模式代表了一组不同的值;

o 日期和时间。日期和时间模式(默认模式)包含日期、小时、分钟、一个可选的 AM/PM 值;

o 时间。时间模式包括小时、分钟、可选的 AM/PM 值;

o 日期。日期模式包括月份、天以及年三个值;

o 倒计时器。倒计时器模式展示了小时和分钟值,倒计时的最大值为 23 小时 59 分钟。

1、有必要的时候,改变分钟滑轮的单位刻度。例如每15 分钟为一个刻度,此时分钟滑轮就有4个值:0、15、30、45。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容

  • 刮奖,看到谢谢两个字时,总要把惠顾两个字都刮出来才死心。一直都这么死心眼。 其实刮到“谢”字的时候,心已经凉透了,...
    Echopoint阅读 454评论 0 0
  • 心冠瑞 心服务—腾飞中的冠瑞医院麻城/樱子 巍巍大别山,延续了多少经典故事,演绎了多少不朽传奇?滔滔举水河,孕育了...
    樱子漫笔阅读 773评论 0 5
  • 泉州一个三四线的城市,没有大都市的繁华与喧嚣,更多的是份宁静和祥和。 泉州文庙 泉州文庙 有的是古韵和古街,一条民...
    Jack叔叔阅读 843评论 0 1