IOS14设计规范的基本认识

北京/UI设计师/4年前/728浏览
IOS14设计规范的基本认识

积累

IOS规范是苹果公司为自己移动端系统设计的产品交互、视觉做出的说明和建议

说明:对系统一些规则进行一些讲解,是默认不可变更、自定义的

建议:对一些设计师可以自己决定的设计内容给出建议,确保设计的“下限”

iOS就包含这两部分,只是这两部分是糅合在一起的,没有中文的规范,而原生规范内容非常的繁琐(啰嗦),并不仅仅指导设计的样式而已,80%是有关交互上注意的细则、产品制定上考量的建议

第一步:快速的浏览一遍,大致了解每个框架在说什么,未来在设计过程中再回到手册去找,这是一个操作手册

新手了解规范,优先关注的是哪些规范信息可以帮助我们完成界面的设计。

前期重点关注:UI界面包含的规范内容

数值定义——板式结构——常用组件——文字参数——图标应用——色彩材质

这次重点解析数值定义、板式结构、常用组件

第二节 iOS官方组件下载和认识

官方给我们提供了系统专用的组件和对应的源文件,帮助我们快速完成界面的搭建和标准元素的引用

https://developer.apple.com

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的倍数即可,



2
Report
|
13
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
IP设计合集 DGS FRIENDS
Homepage recommendation
相关收藏夹
学习
学习
学习
学习
作品收藏夹
设计方法论
设计方法论
设计方法论
设计方法论
作品收藏夹
UI
UI
UI
UI
作品收藏夹
UI
UI
UI
UI
作品收藏夹
我喜欢的
我喜欢的
我喜欢的
我喜欢的
作品收藏夹
大家都在看
Log in