iosui设计尺寸规范
iOS用户界面设计标准规定:1 . 界面标准尺寸为7 5 0px宽×1 3 3 4 px高;2 . 电池显示栏高度应为4 0px;3 . 导航栏标准高度为8 8 px;4 . 主要菜单栏的标准高度为9 8 px;5 . 区域的高度设定为1 1 08 px;6 . 设置页面中图标及滑动开关按钮的高度均为5 8 px;7 . 区域的文字尺寸可选2 0px、2 4 px、2 6 px、2 8 px、3 0px、3 2 px、3 4 px。iOS(曾名iPhoneOS)是苹果公司针对移动设备开发的独占操作系统,覆盖了iPhone、iPad以及iPodtouch等设备。
自iOS4 版本起,iPhoneOS更名为iOS,成为全球第二大热门移动操作系统,仅次于谷歌的Android系统。
苹果于2 007 年1 月9 日在Macworld展会上首次亮相,同年6 月推出首个iOS操作系统,最初命名为“iPhoneRunsOSX”。
同年1 0月1 7 日,苹果发布首个iPhone应用程序开发包(SDK),并计划于次月分发给所有开发者和开发商。
2 008 年3 月6 日,苹果发布首个测试版SDK,并将“iPhoneRunsOSX”更名为“iPhoneOS”。
同年9 月,苹果将iPodtouch的系统也升级为iPhoneOS。
2 01 0年2 月2 7 日,苹果推出iPad,同样运行“iPhoneOS”。
同年,苹果对“iPhoneOS”进行了系统架构和内置应用的重新设计。
2 01 0年6 月,苹果正式将“iPhoneOS”更名为“iOS”,并获得了思科对iOS名称的使用授权。
移动设备的界面设计尺寸
在设计移动端界面时,我们需要关注几个关键的尺寸要素,针对不同的操作系统有特定的考量:对于iPhone,其界面设计的常用尺寸主要有三种:3 2 0x4 8 0、6 4 0x9 6 0和6 4 0x1 1 3 6 像素。
其中,6 4 0x9 6 0和6 4 0x1 1 3 6 这两个尺寸更为常用,因为它们能提供较好的预览效果。
iPhone的分辨率一般设定为7 2 ppi,这一标准适用于网页UI和移动UI的设计。
在界面元素方面,状态栏的高度通常为4 0px,导航栏和主菜单栏的高度分别是8 8 px和9 8 px。
区域的高度则根据屏幕尺寸会有所变化,例如在6 4 0x9 6 0的尺寸下,区域的高度为7 3 4 px,而在6 4 0x1 1 3 6 的尺寸下则为9 1 0px。
iPad的界面设计常用尺寸包括1 02 4 x7 6 8 和2 04 8 x1 5 3 6 像素,其分辨率同样为7 2 ppi。
iPad的界面元素尺寸与iPhone相似,但具体数值可能需要根据具体的设计需求进行调整。
Android设备的界面设计常用尺寸有4 8 0x8 00、7 2 0x1 2 8 0和1 08 0x1 9 2 0像素等。
建议采用7 2 0x1 2 8 0尺寸,因为这可以在显示效果和图片文件大小之间取得平衡。
Android设备的分辨率可能会因设备而异,但在设计时应保持一致性。
在界面元素方面,状态栏的高度为5 0px,导航栏和主菜单栏的高度均为9 6 px,这是因为在Android设计中,功能键可能会移动到屏幕中央,所以其高度与菜单栏相同。
区域的高度也会根据屏幕尺寸的不同而有所变化,例如在7 2 0x1 2 8 0的尺寸下,区域的高度为1 03 8 px。
字体大小方面,iPhone通常使用HelveticaNeue字体显示英文,而在中文显示上,Mac系统下使用黑体-简,Windows系统下则使用华文黑体。
字体大小应根据用户体验调查和用户可接受范围进行调整。
Android设备则通常使用Droidsansfallback字体,这一字体与微软雅黑相似。
同样,字体大小也需要根据用户体验调查和用户可接受范围进行调整。
综上所述,在设计移动设备界面时,应根据具体设备型号和屏幕尺寸选择合适的尺寸和分辨率,并遵循相应的界面元素尺寸和字体大小规范,以确保设计的一致性和用户体验的舒适性。
iOS平台的移动UI设计规范
一、状态栏与导航栏设计 状态栏:位于iPhone顶部,显示时间、运营商和电量等信息。在iPhone 6 /7 /8 系列中,其高度设定为2 0pt(4 0px)。
导航栏:位于状态栏下方,包含和功能图标。
iPhone 6 /7 /8 系列中,导航栏高度为4 4 pt(8 8 px),与状态栏结合后总高度为6 4 pt(1 2 8 px)。
二、大导航栏设计 大:设计宗旨是降低视觉干扰,强调。
高度通常为1 1 6 pt(2 3 2 px),包含2 0pt(4 0px)的状态栏和3 4 pt(6 8 px)的大部分。
大不应固定在页面顶部,滑动时将变为标准导航栏高度6 4 pt(1 2 8 px)。
三、标签栏(TabBars)设计 标签栏:位于应用底部,便于快速切换功能页面。
通常包含五个、四个或三个图标,高度为4 9 pt(9 8 px)。
图标下方可附加1 0pt(2 0px)的浅灰色注释文字。
四、工具栏(ToolBars)设计 工具栏:位于底部,提供与当前任务相关的操作按钮。
高度为4 4 pt(8 8 px),支持滑动隐藏。
五、闪屏资源 闪屏:全屏静态图片,需提供不同尺寸。
闪屏顶部不包含状态栏信息,系统将自动添加。
六、安全距离考虑 全面屏设计需注意圆角和刘海等特性,避免在这些区域放置关键功能。
竖屏使用时,两侧应保留1 6 pt-2 4 pt的边距;横屏同样需留出边距,确保安全显示。
七、色彩运用 iPhone色域超出RGB色域,设计时可选色彩范围广泛。
官方推荐色彩包括多种蓝、绿、红等,iOS 1 3 新增六种不透明灰色。
八、字体规范 iOS使用San Francisco(英文)和苹方黑体(中文)字体。
设计时需根据信息层级调整字体粗细和大小,中文字号规范需适当调整。
九、启动图标设计 启动图标需设计为1 02 4 x1 02 4 px,并根据需要裁剪成不同尺寸。
使用模板文件可自动生成图标,推荐使用矢量软件如AI进行设计。
十、控件设计 控件包括输入框、按钮、滑块等。
可自定义控件样式以匹配品牌风格,但会增加工作量及资源需求。
设计时需注意点击区域大小和不同状态的表现。
十一、键盘交互设计 设计时需考虑键盘弹出时的遮挡问题,确保输入框和信息不被遮挡或适当上移。
也可采用垂直定位至当前输入位置的方法。