iOS平台的移动UI设计规范由奈斯0 发表在数码综合讨论 https://bbs.hupu.com/digital
一、状态栏和导航栏
1、状态栏（Status Bars）就是iPhone最上方用来显示时间、运营商信息、电池电量的那个很窄的区域。
2、导航栏（Navigation Bars）就是状态栏之下的区域，一般来说导航栏中间是页面标题，左右是放置功能图标的区域。
在iPhone6/7/8设计中，状态栏的高度为20pt（40px），导航栏的高度是44pt（88px）。这两个区域在iOS7代之后就进行了一体化设计。所以它们加起来的高度是64pt（128px）。
二、大标题导航栏
1、大标题
在最新的苹果设计中导航出现了一种新形式：大标题。出现这种形式就是为了减少视觉噪音，让内容更加突出。
很明显大标题的设计很像报纸的版式设计，在第一眼我们就会明白页面的主题。
大标题导航栏的高度一般为116pt（232px）：这包括了20pt（40px）状态栏的高度，同时也能放得下34pt（68px）的大标题和辅助信息（如返回等图标）。
但是注意一下，大标题并不应该像传统导航一样常驻在页面之上，因为它太占空间了。所以在滑动页面时大标题会变成正常导航栏的64pt（128px）的高度。
2、标签栏（Tab Bars）
Tab就是点击的意思，Tab栏（也叫标签栏）指的是APP底部的区域，如微信底部常驻有聊天、通讯录、发现、我的四个图标。
iOS规范中Tab栏一般有五个、四个、三个图标的形式。也就是把宽度平分为五、四、三份。
iPhone6/7/8设计中，标签栏的高度为49pt（98px）。Tab栏的操作是最常用的，因为手指最方便点击而且这个栏是常驻在页面之上的。
所以Tab栏的图标至关重要。
因为很多用户可能因为看不懂图标而找不到重要功能的入口，通常我们会在Tab栏图标之下加上10pt（20px）的注释文字，这个注释文字一般来说都是非常浅的浅灰色。
3、标签栏图标
我们在标签栏上的图标一般来说30pt（60px）大小左右，苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时考虑。
其意义是让不同外形的图标看上去是差不多大的，保证图标的平衡。
标签栏图标的选中态应该是一个彩色，来区别于非选中状态。
三、工具栏 （ToolBars）
我们在苹果自带浏览器底部就能看到工具栏。
工具栏提供了和当前任务相关的操作和按钮，在滑动时可以收起。
工具栏同Tab栏一样都是位于底部，但是高度略窄，它的高度是44pt（88px）。
四、闪屏资源
由于闪屏是一张完整的静态满屏图片，而不是诸如其他页面一样是由切图和文本拼成的，所以闪屏的适配更简单粗暴：我们需要提供不同尺寸的闪屏效果。
闪屏资源就是满尺寸的一张PNG，上端不需要状态栏里的信息，程序会在开发完毕时自动在闪屏中补上状态栏里的信息。
五、安全距离
作为iPhone全面屏系列手机，齐刘海无疑是一个特征。
但是全面屏给我们带来了使用上的问题：上下左右是圆角、顶部齐刘海使屏幕凹下一块。
所以在带有圆角和齐刘海的红色标注区域不应该放置任何功能，仅可在上端放置状态栏，底部圆角区域留白。
我们界面竖屏使用时左右临近手机边缘的区域不建议放任何操作，应留出一定的边距（Margin）。
这个边距是多少呢？没有明确严格的规定，但是一般的APP会留出16pt-24pt不等的边距防止用户在屏幕边缘不好点击。
不过内容展现却可以呈现在边距里。如果我们横屏使用手机时，左右同样不好点对吧？横屏同时还有令人闹心的“齐刘海”，所以同样左右需留出一定的边距来。
所以我们就得到一个安全距离的矩形，内容可以完整地呈现在这个安全距离内。
六、色彩
其实在iPhone上显示的色域要比我们作图时的RGB色域要广。
所以在iPhone上设计怎样的颜色都可以。只要符合产品气质并且在色彩心理学理论上思考，用什么颜色是设计师的自由。
官方建议的系统色彩如下：
iOS13 也引入了六种不透明的灰色，在少数透明色不好使的情况下可以使用它们。
七、字体
iOS中，英文使用的是San Francisco (SF)字体或者NewYork字体；中文使用的是苹方黑体。
安装好以后你会发现中文苹方的字族有那么我们设计界面时需要根据信息的逻辑权重分配粗细：不少可供选择的粗细，标题应该较粗，而说明字体应该较细并且可以设计成灰色。
其实字体的设计最重要的考量就是信息层级。
苹果提供的字号规范,其实并不适用中文,因为相同字号下，中文看起来比西文更大、更高，包括西文行高1.3~1.5倍,中文采用1.5~2倍。
包括内文，官方规范为17pt(34px)，但是放到界面当中看会太大，看得不舒服，所以都可以适当调整。
比如内文用14pt(28px)，或者精致的追求逼格大量留白、少量文本内容的的APP，可以采用12pt(24pt)。
八、启动图标
在设计模板还没有如今这么发达时，设计师需要设计启动图标（1024x1024px）之后按照程序员的要求切出几十个不同尺寸的图标。
比如，在手机中@3x情况下桌面图标尺寸为180x180px，在@2x情况下为120x120px；在应用商店图标需要使用的尺寸是1024x1024px；这个工作太烦人了，现在我们只需要专注在启动图标设计本身上了。
在苹果提供的这套资源中，有Template-AppIcons-iOS这个文件。
打开这个文件，用我们自己设计的启动图标替换掉智能对象里的内容，你会发现所有尺寸的图标都变成了我们的图标。然后我们把背景隐藏，切出这些图标即可。
图标设计建议使用AI等矢量软件，然后使用规范切出图像资源。
九、控件
控件包括：输入框、按钮、滑杆、页卡、开关等，在设计模板中已经全部列出。
为了让设计更符合整体产品品牌调性，这些控件都可以做成自定义的设计样式，但是这样会增加工作量和切图资源。
所以一般我们在诸如设置界面这些无需太体现设计感的页面中都使用系统默认控件，而在一些品牌感需要强调的页面或产品则会使用自定义的样式。
如果我们想自己设计控件，那么注意两件事：
第一，点击区域基本符合44pt（88px）原则，也就是在手机上大小大概是7mm-9mm，适合手指点击；第二，要设计操作的不同状态，不要只设计一种状态。
十、键盘
在设计模板中您也可以找到键盘的设计。
这里需要提醒的是，很多朋友做界面设计时不考虑输入时键盘会遮挡到的空间。
如果考虑到键盘弹起遮挡住的内容，那么我们的一些界面中的输入框和信息可能都需要上移了。
当然也不是说可能被键盘遮挡的地方不可以防止任何内容，也有一种方式就是当输入一个表单时，页面会垂直定位到当前输入的位置。
一、状态栏和导航栏
1、状态栏（Status Bars）就是iPhone最上方用来显示时间、运营商信息、电池电量的那个很窄的区域。
2、导航栏（Navigation Bars）就是状态栏之下的区域，一般来说导航栏中间是页面标题，左右是放置功能图标的区域。
在iPhone6/7/8设计中，状态栏的高度为20pt（40px），导航栏的高度是44pt（88px）。这两个区域在iOS7代之后就进行了一体化设计。所以它们加起来的高度是64pt（128px）。
二、大标题导航栏
1、大标题
在最新的苹果设计中导航出现了一种新形式：大标题。出现这种形式就是为了减少视觉噪音，让内容更加突出。
很明显大标题的设计很像报纸的版式设计，在第一眼我们就会明白页面的主题。
大标题导航栏的高度一般为116pt（232px）：这包括了20pt（40px）状态栏的高度，同时也能放得下34pt（68px）的大标题和辅助信息（如返回等图标）。
但是注意一下，大标题并不应该像传统导航一样常驻在页面之上，因为它太占空间了。所以在滑动页面时大标题会变成正常导航栏的64pt（128px）的高度。
2、标签栏（Tab Bars）
Tab就是点击的意思，Tab栏（也叫标签栏）指的是APP底部的区域，如微信底部常驻有聊天、通讯录、发现、我的四个图标。
iOS规范中Tab栏一般有五个、四个、三个图标的形式。也就是把宽度平分为五、四、三份。
iPhone6/7/8设计中，标签栏的高度为49pt（98px）。Tab栏的操作是最常用的，因为手指最方便点击而且这个栏是常驻在页面之上的。
所以Tab栏的图标至关重要。
因为很多用户可能因为看不懂图标而找不到重要功能的入口，通常我们会在Tab栏图标之下加上10pt（20px）的注释文字，这个注释文字一般来说都是非常浅的浅灰色。
3、标签栏图标
我们在标签栏上的图标一般来说30pt（60px）大小左右，苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时考虑。
其意义是让不同外形的图标看上去是差不多大的，保证图标的平衡。
标签栏图标的选中态应该是一个彩色，来区别于非选中状态。
三、工具栏 （ToolBars）
我们在苹果自带浏览器底部就能看到工具栏。
工具栏提供了和当前任务相关的操作和按钮，在滑动时可以收起。
工具栏同Tab栏一样都是位于底部，但是高度略窄，它的高度是44pt（88px）。
四、闪屏资源
由于闪屏是一张完整的静态满屏图片，而不是诸如其他页面一样是由切图和文本拼成的，所以闪屏的适配更简单粗暴：我们需要提供不同尺寸的闪屏效果。
闪屏资源就是满尺寸的一张PNG，上端不需要状态栏里的信息，程序会在开发完毕时自动在闪屏中补上状态栏里的信息。
五、安全距离
作为iPhone全面屏系列手机，齐刘海无疑是一个特征。
但是全面屏给我们带来了使用上的问题：上下左右是圆角、顶部齐刘海使屏幕凹下一块。
所以在带有圆角和齐刘海的红色标注区域不应该放置任何功能，仅可在上端放置状态栏，底部圆角区域留白。
我们界面竖屏使用时左右临近手机边缘的区域不建议放任何操作，应留出一定的边距（Margin）。
这个边距是多少呢？没有明确严格的规定，但是一般的APP会留出16pt-24pt不等的边距防止用户在屏幕边缘不好点击。
不过内容展现却可以呈现在边距里。如果我们横屏使用手机时，左右同样不好点对吧？横屏同时还有令人闹心的“齐刘海”，所以同样左右需留出一定的边距来。
所以我们就得到一个安全距离的矩形，内容可以完整地呈现在这个安全距离内。
六、色彩
其实在iPhone上显示的色域要比我们作图时的RGB色域要广。
所以在iPhone上设计怎样的颜色都可以。只要符合产品气质并且在色彩心理学理论上思考，用什么颜色是设计师的自由。
官方建议的系统色彩如下：
iOS13 也引入了六种不透明的灰色，在少数透明色不好使的情况下可以使用它们。
七、字体
iOS中，英文使用的是San Francisco (SF)字体或者NewYork字体；中文使用的是苹方黑体。
安装好以后你会发现中文苹方的字族有那么我们设计界面时需要根据信息的逻辑权重分配粗细：不少可供选择的粗细，标题应该较粗，而说明字体应该较细并且可以设计成灰色。
其实字体的设计最重要的考量就是信息层级。
苹果提供的字号规范,其实并不适用中文,因为相同字号下，中文看起来比西文更大、更高，包括西文行高1.3~1.5倍,中文采用1.5~2倍。
包括内文，官方规范为17pt(34px)，但是放到界面当中看会太大，看得不舒服，所以都可以适当调整。
比如内文用14pt(28px)，或者精致的追求逼格大量留白、少量文本内容的的APP，可以采用12pt(24pt)。
八、启动图标
在设计模板还没有如今这么发达时，设计师需要设计启动图标（1024x1024px）之后按照程序员的要求切出几十个不同尺寸的图标。
比如，在手机中@3x情况下桌面图标尺寸为180x180px，在@2x情况下为120x120px；在应用商店图标需要使用的尺寸是1024x1024px；这个工作太烦人了，现在我们只需要专注在启动图标设计本身上了。
在苹果提供的这套资源中，有Template-AppIcons-iOS这个文件。
打开这个文件，用我们自己设计的启动图标替换掉智能对象里的内容，你会发现所有尺寸的图标都变成了我们的图标。然后我们把背景隐藏，切出这些图标即可。
图标设计建议使用AI等矢量软件，然后使用规范切出图像资源。
九、控件
控件包括：输入框、按钮、滑杆、页卡、开关等，在设计模板中已经全部列出。
为了让设计更符合整体产品品牌调性，这些控件都可以做成自定义的设计样式，但是这样会增加工作量和切图资源。
所以一般我们在诸如设置界面这些无需太体现设计感的页面中都使用系统默认控件，而在一些品牌感需要强调的页面或产品则会使用自定义的样式。
如果我们想自己设计控件，那么注意两件事：
第一，点击区域基本符合44pt（88px）原则，也就是在手机上大小大概是7mm-9mm，适合手指点击；第二，要设计操作的不同状态，不要只设计一种状态。
十、键盘
在设计模板中您也可以找到键盘的设计。
这里需要提醒的是，很多朋友做界面设计时不考虑输入时键盘会遮挡到的空间。
如果考虑到键盘弹起遮挡住的内容，那么我们的一些界面中的输入框和信息可能都需要上移了。
当然也不是说可能被键盘遮挡的地方不可以防止任何内容，也有一种方式就是当输入一个表单时，页面会垂直定位到当前输入的位置。
推荐 (30)
评论 (29)
收藏
分享
举报
只看楼主
