结合多年UI经验，深究iOS设计规范解析及应用

Sponsor

推荐理由：作者结合多年UI经验，列举出从新手都进价设计师在UI设计中都可能遇到的问题。

移动端的设计规范比较多也比较细，很多新手设计师在开始做移动端设计师，确实往往对界面的一些规范及控件的称呼不是很了解。本文给大家带来相对全的iOS设计规范解析，希望能在实际工作上帮助到你，也欢迎一起探讨。

苹果在2021年6月8日凌晨WWDC (Worldwide Developers Conference苹果全球开发者大会)公布了iOS 15、iPadOS 15、MacOS 12 Monterey之后，随即对界面设计指南(Human Interface Guidelines)内容也同步进行更新。值得注意的是这次的界面设计指南的更新不同于以往介绍不同设备的新特性，更多的是讲解整个苹果生态下都会用到的内容。

APP设计规范、字体、官方组件下载：https://www.shejidaren.com/examples/tools/chichun/ui-design-spec.html

为什么先讲到全局的包容性呢? 一个具有包容性的软件始终会把人放在第一位，尊重不同人的习惯、特征和文化。让使用者使用起来更加便捷且没有多少学习成本，每个人都能理解和使用你的内容和功能。苹果新增的这项内容旨在指导大家如何在APP中做到包容各种类型用户的使用。

把简单直观地体验作为设计目标。用同理心来理解不同人的观点和需求，研究他们的年龄、性别、肤色、认知、宗教、教育和政治观点等等，确保你的软件里没有在内容和功能上冒犯每个群体，创造每个人都能享受其中的体验。

设备像素/物理像素(device pixel)

设备像素是物理概念，指的是设备屏幕上的像素点个数，比如iPhone X的分辨率1125 x 2436px,那么水平方向.上有1125个像素点，竖直方向上有2436个像素点。

CSS像素(css pixel)

CSS像素是Web编程概念，指的是CSS代码中使用的逻辑像素。在CSS规范中，长度单位可以分为两类，绝对(absolute) 单位以及相对(relative)单位。px是一个相对单位,相对的是设备像素(device pixel)。

以iPhone X为例:通过Figma移动端开发时选择iPhone X设备，如下图所示可以看到此时的宽高分别为375 x 812 px，也就是每个方向.上一个物理像素包含3个css像素。

逻辑像素(dp、 pt)

为了抹去高密度分辨率屏幕所带来的适配问题，iOS与Android两个平台分别提出了pt (point) 与dp (device-independent pixel)两个单位。他们的名称不一样，但是内涵是一样的。下面我们以iPhone X为例，逻辑像素设定为375 x 812pt (实际像素:1125x 2436px)，以物理屏幕左上角为原点，横向X轴375pt，纵向Y轴812pt。 所以PPI越高 ，1pt的所覆盖的物理像素就越多。如果不是很理解逻辑像素的概念，就等同于CSS像素即可。

像素密度ppi (Pixels Per Inch)

像素密度，准确的说是每英寸的像素点数量。1英寸是一个固定长度，等于2.54厘米。像素密度越高，代表屏幕显示效果越精细。如下图iPhone X的分辨率约为463ppi。

在移动端开发中，一般通过rem、vh、Vw、rpx等相对单位进行移动端的适配，因此了解像素比概念是非常有必要的，有助于深入理解相对单位换算的原理。这里附，上一张iPhone尺寸对照表，方便大家工作、学习自查对比。

总结

所有的设计都有着规范，我们在限定的设备和技术中出发进行设计,让在不同尺寸的产品.上都呈现统- -的美好，因此熟络平台的规范规则也成为我们每个设计师的基本功和必备的知识，篇幅和时间有限，这里只涉及了常用的一些专业知识，如需了解更多或者真正工作中所遇到的问题欢迎探讨，也可以移步至苹果官网查询，感谢您的观看，鞠躬!

感谢阅读！

作者：罗小盒

来源：站酷（xiaohe.zcool.com.cn）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。