苹果iOS设计规范

用户头像
郑州/交互设计师/7年前/2244浏览
苹果iOS设计规范
用户头像
3纳秒

整理了一下iOS的设计规范,希望能对大家有所帮助。

在我们了解iOS的设计规范前,先来看下iPhone的发展历史吧



为什么要遵循规范?

设计时遵循规范是为了尊重用户习惯,提高开发实现的效率。

规范由设计升华而来。从视觉的角度来说,规范实际上就是一个素材库。产品有什么样的视觉呈现和元素定义,都有可遵循的标准,保证日后迭代可以延续产品所传递的思想跟价值,最大限度保证了产品的一致性。


设计需要遵循的几个规范

操作系统规范

遵循系统平台的规范可以让刚入行的新人少走弯路,避免我们设计出的界面出现大的问题。

公司设计规范

遵循公司的规范可以让UI风格与公司风格形象保持一致,更具品质。

产品内设计规范

产品规范可以让界面的设计更统一协调,设计时需要基于平台和公司规范上参考制作。


iOS设计三大原则

清晰:视觉层

在整个系统中,文字在每一尺寸都是清晰易读的,图标精确而清晰,装饰精巧而适合,是的用户更易理解功能。负空间、颜色、字体、图形和界面元素巧妙突出重要内容并传达交互性。

设计要点01:颜色

在UI的早期比较偏向高级灰的设计,是因为该开始时大多UI设计师都是从平面转过来的,比较推崇高级灰、消色设计,随着发展现在几乎都采用高饱和的的颜色,减少了灰度颜色的应用,甚至毛玻璃效果,模糊效果,字压图等越来越少。

设计早期可以通过较灰的颜色来避免色台对于间距和布局的影响,一旦设计完成,需要通过调整颜色和色调,来保证色彩在任何情况下都可以辨识。同时,也需要关注色盲人群的体验。

设计要点02:排版

对任何信息进行排布的时候,必须贯穿掌握设计的四大基本原则——对齐/重复/亲密/对比


遵从:交互层

流畅的动画和清晰美观的界面可以帮助人们更快的了解并且与内容交互,而不应该(因为过于花哨而)干扰到用户的使用。内容通常充满整个屏幕,而半透明和模糊常常暗示有更多内容。尽量少的使用边框,渐变和阴影,来保持界面的亮度和通透。


深度:结构层

使用不同的视觉层级和真实的运动效果来传达层次的感觉,赋予界面活力,并促进用户的理解。让用户通过触摸和探索来发现程序的功能不仅会使用户产生喜悦感、更加方便了解功能,还能使用户关注到额外内容。在对内容进行导航时,层级的转场效果提供一种有深度的感觉。


界面结构规范

状态栏

状态栏中固定在屏幕上边缘

1倍图下尺寸为20pt

不要自定义状态栏

避免滚动内容直接透过状态栏显示(设计抽屉导航时)

在用户全屏观看媒体时,可以考虑隐藏状态栏以及所有页面UI


导航栏

导航栏是半透明的(70%),位于状态栏下方

1倍图下尺寸为44pt(iPhone X上为88pt,是因为需要加上刘海)

不要自定义导航栏

避免导航栏内容过多,空间数目一般不超过2


iOS11导航栏分为两种形式

undefined


标签栏

标签栏是半透明的(70%),始终位于屏幕底部

1倍图下尺寸为49pt(iPhone X上为83pt,是因为需要加上Home Indicator)

标签栏一次最多承载5个标签,多于5个的图标以列表形式收纳到“更多”里

标签栏用来组织整个应用层面的信息结构,一定是最常用的

标签栏的图标有正负形

undefined

(标签栏半透明和模糊暗示有更多内容)


工具栏

工具栏是半透明的(70%)

1倍图下为44pt(iPhone X上为83pt,是因为需要加上Home Indicator)

工具栏内放置用户总常用的指令

工具栏可以放置文字或图标,当项目超过3个以上的项目可以使用图标

undefined


系统字体规范

在用户界面中,每一个单词和字母都至关重要。好的字体等于好的设计。字体成了界面设计的基石,而我们设计师,则是这些「信息基石」的修造者。

文本应该至少达到 11 像素,使得在典型视距内无需缩放即可看清。


iOS 9之前的字体

英文字体:Helvetica

中文字体:华文黑体

undefined

(都是基于Helvetica进行改动)


iOS9之后的字体

英文字体:San Francisco(旧金山)

中文字体:PingFangSC(苹方)


从对比来看,iOS 9字体相比iOS 8字体更好一些,整体显得更为圆润,让阅读变得更加容易。

点击了解更多关于苹果字体的信息:https://www.uisdc.com/ios-9-the-best-font


人机交互规范

iOS 11将这个先进的操作的系统又一次提升至新标准。

它让iPhone和iPad变得更为强大、更个性化,同时也变得更为智能。

手势规范

用户通过在屏幕上执行手势与iOS设备进行交互。这些手势与内容关系密切,并增强了与对象的直接操控感


54
举报
|
34
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】游戏/娱乐icon
【新年UI图标】钱包icon
UI 登录界面设计模板包
高级表盘系列UI源文件
【新年UI图标】汽车icon
盲盒APP UI设计
3D卡通UI界面图标可爱插画免扣素
手表表盘UI系列
新拟态风格 UI设计组件库
钱包ui模板
UI应用平面图标
【新年UI图标】影音icon
Security Camera UI kit
高级感金属拟物 UI设计组件库
智能家居中心 简约 UI设计组件库
【新年UI图标】秒杀icon
【新年UI图标】会员icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
UI界面 组件
【新年UI图标】30个图标
科技医疗透明柜UI界面设计
【新年UI图标】珠宝icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
新能源APP应用UIKit
你可能喜欢
大家都在看
登录注册