IOS14设计规范的基本认识
积累
IOS规范是苹果公司为自己移动端系统设计的产品交互、视觉做出的说明和建议
说明:对系统一些规则进行一些讲解,是默认不可变更、自定义的
建议:对一些设计师可以自己决定的设计内容给出建议,确保设计的“下限”
iOS就包含这两部分,只是这两部分是糅合在一起的,没有中文的规范,而原生规范内容非常的繁琐(啰嗦),并不仅仅指导设计的样式而已,80%是有关交互上注意的细则、产品制定上考量的建议
第一步:快速的浏览一遍,大致了解每个框架在说什么,未来在设计过程中再回到手册去找,这是一个操作手册
新手了解规范,优先关注的是哪些规范信息可以帮助我们完成界面的设计。
前期重点关注:UI界面包含的规范内容
数值定义——板式结构——常用组件——文字参数——图标应用——色彩材质
这次重点解析数值定义、板式结构、常用组件
第二节 iOS官方组件下载和认识
官方给我们提供了系统专用的组件和对应的源文件,帮助我们快速完成界面的搭建和标准元素的引用
https://developer.apple.com/design/resources/ https://developer.apple.com/design/human-interface-guidelines/
第一个可以下载IOS官方的组件库
官方的组件库包含大量元素,主要关注iPhone的组件元素和版式即可。
第三节规范的具体应用
常见的IOS页面,主要构成如下图

状态栏(status bar)44pt;
导航栏/顶部标题栏(nav bar)96pt;
搜索栏(search bar)36pt;这个数值可以自定义(官方36)
安全边距(margin)16pt;这个数值可以自定义(在不知道怎么做的情况下,用16就对了)
标签栏/底部导航栏(tab bar)50pt (官方最新版本是50pt);
首页指示器(home indicator)34pt;
中间内容创作区
1、status bar 在引用控件的时候记得删掉背景色,苹果系统这个位置的颜色与nav bar 颜色一致,安卓系统可能不一致
其中status bar 和home indicatoe是页面固定的内容,是系统默认的元素,只有特殊情况下或全屏(视频、游戏)时可以隐藏。
在UI设计中,对于元素尺寸的定义是非常重要的,虽然对于自定义元素的尺寸没有绝对固定的数值,但也有一定的规律可以遵循
使用8px*8px的网格系统,网格系统可以让线条和图像内容在所有尺寸上保持清晰,无需太多的修饰和锐化,将图形边界对齐到网格上,以减少按比例缩小图像时出现的像素和内容模糊的情况
这是安卓崇尚的,苹果系统建议使用8作为一个制定参数的递进数值,而我们实际设计过程中,使用4的倍数即可,










































































