ios底部栏设计规范_iOS平台的移动UI设计规范
⼀、状态栏和导航栏
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全⾯屏系列⼿机，齐刘海⽆疑是⼀个特征。
但是全⾯屏给我们带来了使⽤上的问题：上下左右是圆⾓、顶部齐刘海使屏幕凹下⼀块。
手机app设计模板
所以在带有圆⾓和齐刘海的红⾊标注区域不应该放置任何功能，仅可在上端放置状态栏，底部圆⾓区域留⽩。
我们界⾯竖屏使⽤时左右临近⼿机边缘的区域不建议放任何操作，应留出⼀定的边距(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，适合⼿指点击；第⼆，要设计操作的不同状态，不要
只设计⼀种状态。
⼗、键盘
在设计模板中您也可以到键盘的设计。
这⾥需要提醒的是，很多朋友做界⾯设计时不考虑输⼊时键盘会遮挡到的空间。
如果考虑到键盘弹起遮挡住的内容，那么我们的⼀些界⾯中的输⼊框和信息可能都需要上移了。
当然也不是说可能被键盘遮挡的地⽅不可以防⽌任何内容，也有⼀种⽅式就是当输⼊⼀个表单时，页⾯会垂直定位到当前输⼊的位置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。