《ios界面元素》

对于设计师来说,阅读ios规范的时候更多的是关注界面层面的内容,对于系统自带的内容关注较少。交互设计师同时要关注ios的交互手势、导航逻辑、控件使用规范等,但是所谓的“用户行为”的承载页面最终是界面,所以充分的了解界面元素是非常必要的。

本文内容来源ios规范,搬用内容、总结知识。

ios界面元素分为:条栏、内容视图、控件、临时视图

一、条栏

1、状态栏 status bar

状态栏用来显示设备的信息、时间、网络等重要信息。默认是白底黑字与黑底白字。

#状态栏是透明背景

#位置总是处于顶部

注意事项:1、状态栏可以在整个app中采用一个样式,也可以单独为某个视图设计样式。2、状态栏背后不要放其他内容,不要有滚动内容,防止干扰用户阅读状态栏信息。3、尽量不要隐藏状态栏,除非特殊情况,例如全屏看视频可以隐藏状态栏,但是保证轻点屏幕时可以重新恢复状态栏。

2、导航栏 navigation bar

导航栏主要作用是在不同的层级的信息结构之间导航,有时候可以管理屏幕内容。

导航栏上面可以放标题或者控件。

3、工具栏 Toolbar

包含了对页面或者视图中对象进行操作的控件。

4、标签栏 tab bar

标签栏赋予了用户在不同任务、视图和模态的切换的能力。

5、搜索栏 search bar

搜索栏可以接受用户输入的文本,并把它作为一次性搜素输入。

二、内容视图

我们可以把视图是用来承载页面信息的一个容器,iOS 系统为我们提供一些比较优秀的视图模式。在视图部分主要列举几种比较常用的视图模式。

1、精选视图 collection view

可以管理项目的有序集合,比如相册。

2、图像视图 image view

可以理解为装载图像的容器,用来定义图像是否可以拉伸、缩放、位置的调整等。

3、地图视图 map view 

可以呈现地理数据,并支持地图app的大部分功能。

4、滚动视图 scroll view

该视图的作用是可以让用户浏览比视图更大区域的内容。例如放大图片后,用滑动或者拖拽查看。

5、表格视图 table view

以不同的行来显示信息。该视图提供了控件让用户添加、删除或者多选,查看某行的更多信息。

6、文本视图 text view

可以容纳并显示多行文本。并且支持编辑文本。

7、web 视图

该视图可以显示富Html 内容。比如ios内置的邮件功能。

三、控件

1、活动指示器 activity indicator

表示某个任务或进程正在进行中。任务进行时旋转,任务完成时小时,不允许用户与之交互。

2、日期选择器 date picker

3、标签 label

用于显示静态文本。

4、网络活动指示器 network activity indicator

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

5、页码控件 page control

表示打开了多少视图以及当前视图是哪一个。不允许用户不按照顺序访问视图。

6、选择器 picker

用来显示一组数值,用户可以从中选择一个。

7、进度视图 progress view

用于展示已知持续时间的任务或者进度。

8、刷新控件 refresh control

用于执行用户发起的刷新,通常用在表格视图中。

9、分段控件 segmented control

每一个分段控件相当于一个显示不同视图的按钮

10、滑块 slider

允许用户在一定范围里调整数值或进度。

11、步进器 stepper

以常数量来增加或者减少某个数值。支持自定义图像。

12、开关 switch 表现两种互斥的状态,只用于表格视图。

13、系统按钮 system button

支持自定义样式,可以包含图片或者文字。默认情况下没有边框和背景。

14、文本框 text field

支持用户输入单行文本。可以在文本框左侧或者右侧显示自定义图像,或者添加系统按钮,例如书签按钮。还可以在文本框的右侧显示清楚按钮。

四、临时视图

1、警告框 alert

包含一条必要的标题和可选信息。

包含一个或多个按钮。 双按钮的情况下,按钮排布规则:1、操作不会造成严重后果,而且是用户最有可能的操作,我们把它放在右边,取消按钮放在左边。2、如果按钮具有破环性,则放在左边,取消按钮在右边。

2、操作菜单 action sheet

显示用户所发起操作的相关选项。用红色的字来显示具有破坏的选项按钮。

3、模态视图 modal view

以模态的形式展现的视图,为当前任务或者情景提供功能。通常包含一个完成按钮,一个取消按钮。比如评论功能,点击评论的图标进入模态视图,弹出键盘、文本视图、完成和取消按钮。

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

推荐阅读更多精彩内容