iOS部分控件介绍及设计规范

iOS及Android图标按钮设计规范

UI设计师需要了解的开发中常用的UI控件(ios篇)

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


1.视图(UIView)

进入模态视图后不能与母视图交互,需要进行操作才能结束该模式,比如动作表单、警告框、浮层都属于模态视图。(感谢知乎伊夫圣罗兰的回答的启发!)。

动作表单(UIActionSheet)

iOS ActionSheet
浮出层(Popover或Popup)

警告框(UIAlertView)

警告框(Alert)


iOS警告框指导原则


提示器(HUD)

HUD不属于模态视图


图片视图(UIImageView)

可设置图片的显示方式,如居中、居右,是否缩放

页面试图

页面视图

表格试图(UITableView)

表格视图(可通过控件对所有某行操作)


表格视图常见样式
分组/不分组表格视图

滚动视图(UIScrollView)

一个能够滚动的视图控件,可以⽤来展⽰大量的内容,并且可以通过滚动查看所有的内容;随着手指的变动进行调节相应的点,知道何时停止滚动,而且必须知道内容视图的范围

文本视图(UITextView)

文本视图(长文本可滚动,可唤起键盘)

补充一下通用布局:

遵循移动端8pc原则


2.按钮(UIButton)

充分考虑四种状态

食指点击目标尺寸是44 x 44像素,拇指是72 x72像素;

所有可操作元素最小点击区域为88*88px,物理尺寸7*7mm。

iPhone icon尺寸


3.加载控件和进度条(UIProgressView)

加载模式:

不同模式适应不同场景

考虑的点:①要保证内容完整性?还是保证快速阅读、了解信息?还是想让用户无尽探索?②重要信息不能全部放在头图上,重要操作不能放图片按钮,万一load不出来就炸了;③网络因素,切换小图、无图模式,视频动画占位符模式(智能加载)。

加载控件形式:

导航条-标题旁小菊花
下拉-导航条下小菊花

进度条形式:

弹出框形式的进度条
线形/环形/带数字的进度条

注意:①可用非模态的加载方式,不打断用户,可在等待时进行其他操作,减少等待感;②使用情趣化的加载动画;③漫长的等待要使用精确进度条告知;④尽量提前加载。

导航栏下的非模态进度条


4.导航控制器(UINavigationController)

UINavigationBar提供一种对导航层级内容的控制。它是一个栏,最典型的用法就是放在屏幕顶端,包含着各级视图的导航按钮。它最首要的属性是左按钮(返回按钮)、中心标题,还有可选的右按钮。你可以单独用导航栏,或者和导航控制器一起使用。

完整的导航控制器由 Navigation bar,Navigation View,Navigation toolbar 等组成。

通用导航条布局

适当根据功能改变导航的设计:

网易新闻(虽页面改变的导航条)
QQ个人信息页(覆盖导航条及状态栏)
上下滑动隐藏或显示导航栏


5.分段控件(SegmentControl)

iOS 分段控件


一个分段控件最多包含五个分段
知乎

6.选择器(UIPickerView)

多用于日期,省份,时间的选择。

日期和时间


7.文本区(UITextField)

显示文本段,显示所给的文本。可以设置输入文本一些属性,改变大小和位置等。

注意:唤醒合适的键盘;适当使用占位符帮助理解;适当在最右加入清除按钮。

8.短文本/标签(UILabel)

可以设置字体,字号,颜色等。


9.滑块(UISlideer)

允许用户在一个限定范围内调整某个数值或进程,常用在控制音量、亮度等。

UISlideer


10.开关(UISwitch)

iOS7 UISwitch

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


11.页面切换控件

页面控件

注意:①iOS仅支持连续视图间逐一切换;②不超过10个点。

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

推荐阅读更多精彩内容