IOS14设计规范的基本认识

用户头像
北京/UI设计师/5年前/792浏览
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
举报
|
13
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
UI界面 组件
【新年UI图标】银行卡icon
【新年UI图标】影音icon
UI 登录界面设计模板包
抽象液态渐变UI背景模版
拟物风质感写实UI卡片合集源文件
智能家居中心 简约 UI设计组件库
3D渐变流体抽象矢量UI背景图
新拟态风格 UI设计组件库
【新年UI图标】秒杀icon
矢量立体简约UI蓝白图标
新能源APP应用UIKit
我的钱包-UI界面设计-app
UI通用设计素材1
【新年UI图标】30个图标
科技医疗透明柜UI界面设计
【新年UI图标】钱包icon
Security Camera UI kit
【新年UI图标】会员icon
【新年UI图标】珠宝icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
手表表盘UI系列
盲盒APP UI设计
高级表盘系列UI源文件
【新年UI图标】汽车icon
你可能喜欢
相关收藏夹
大家都在看
登录注册