iOS交互设计基础之控件(二)

1、活动指示器

活动指示器表明进程或任务正在进行中

注:微博清空缓存

(1)当任务加载和进行时旋转,任务完成后自动消失(针对系统默认样式)

(2)不支持用户交互行为

注:Pinterest添加账户

2、日期时间选择器

日期时间选择器展示关于日期和时间的组件

(1)最多可以展示四个独立的滑轮,每一个滑轮列表标识一个不同的值

(2)日期选择器的大小与与iPhone键盘的大小相同,并且不可该更

(3)包括四种模式,每种模式包含一组不同的值

日期和时间:日期、小时、分钟

时间:小时和分钟以及可选的上午/下午

日期:年、月、日

倒计时:小时、分钟,可以精确的设定总共的倒计时时间

3、网络活动指示器

网络活动指示器在状态栏中出现,标识网络活动正在进行。例如:当重新进入app,系统进行自动刷新时,显示正在进行网络活动

4、页面控件

页面控件告诉用户打开了多少个视图以及他们正处在哪一个视图当中

注:微信图片浏览

(1)不支持用户访问不连续的视图(不能直接跳转至相邻视图以外的视图)

注:掌盟

(2)默认情况下,不支持视图之间的导航

注:天气

(3)页面控件是为所有视图平等的场景设计的

注:豆瓣阅读

(4)避免显示太多点,超过10个很难让用户一目了然

注:下厨房

总结:页面控件多用来展示平行层级的内容信息,在有限的屏幕控件内延展可以展示的内容数量,左右滑动切换,也很适合用户单手操作浏览信息

5、选择器

选择器包含了一组值,用户可以从中选择一个相应的值

(1)选择器是日期时间选择器的通用模式

(2)不可以自定义大小(跟iPhone键盘相同)

(3)当你需要展示的备选数量很多时,可以考虑使用表格视图

总结:选择器多用在选择地区、年龄、性别等编辑操作中,用来选择一系列同一类别下的子项

6、刷新控件

刷新控件执行用户触发的内容刷新

注:下厨房
注:知乎

(1)刷新控件可以出现在标题中

(2)使用了刷新控件,同时也应支持自动刷新,刷新控件给用户多一个选择

(3)可以根据产品风格设计相应的刷新控件样式

7、分段控件

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

(1)有两个或以上的分段组成,每一个分段的宽度相同

(2)可以包含文字或图片

(3)一个分段控件最多包含五个分段

(4)不要在一个分段中混用文字或图片

注意:Android中类似的控件为固定选项卡以及滚动选项卡,可以左滑或右滑在不同的视图之间进行切换,并且可以扩展更多的分类视图,更加便于用户操作。iOS中也大量采用这种交互方式,在视图之间可以左滑右滑切换视图,用户操作上更加地便捷

注:网易云音乐
注:NEXT
注:36氪
注:QQ空间
注:知乎

8、滑块

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

总结:滑块多用来控制音量、控制进度、控制大小(字体)、控制亮度等,例如在线阅读书籍、在线播放视频等沉浸式体验中

9、开关按钮

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

(1)开关按钮仅在表格视图中可用

另:开关的操作方式隐喻了电灯开关,两种操作分别对应两种不同的功效

10、系统按钮

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

(1)默认状态下不含边界,也不含背景图

(2)可以是图标或者文字标题

(3)支持自定义样式,如描边或者加背景图

注意:按钮的几种状态:正常状态、选中状态、禁用状态,每种状态所对应的按钮样式

11、文本框

(1)根据输入内容的类型来指定不同的键盘

(2)输入框中增加帮助用户理解的提示文字

(4)合适的情境下,在文本框右侧加入清除按钮

注意:文本框与文本视图(下一篇中会提到)的区别,文本框只能输入单行文本,例如通常用来填写用户名、密码、手机号等等,适合增加清除按钮

本篇是“iOS交互设计基础”第二篇,后面会更新最后一篇关于视图的介绍

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

推荐阅读更多精彩内容

  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,703评论 22 664
  • 4.3 控件 4.3.1 活动指示器 活动指示器表明任务或进程正在进行中,如下图所示。 想要了解如何在代码中定义活...
    小虾仔阅读 1,165评论 0 6
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 认清我们是谁 产品分析 竞品分析 市场分析 知道我们要做什么 设置业务目标 怎么考量 数据运营 具体怎么做 产品运...
    Jim花阅读 172评论 0 0
  • 夜深风骤起,点点落窗促。辗转难眠忧思堵,不知心何处。 晨起倚窗顾,水深不适路。当值无奈踏征途,悲念命无福。
    冠李戴阅读 245评论 0 0