android7 ios,IOS 10和Android 7，设计师看什么？（一）

*本文基于ios 10&Android 7官方规范进行解读和写作，理解不恰当之处，欢迎指正。

移动端是IOS和Android的天下。不同平台的设计区别很多，在一稿适配流行的今天，理解规范反而越来越重要。不仅帮助你设计有数，在不同平台上统一体验，还能避免某些无效的讨论。不同平台就像在不同的国家旅行，能使两个平台上的用户都能够理解并且易于使用你的app，那是多么愉快。由于职业习惯，在阅读规范文档的时候，我更加关注设计和交互层面的问题，主要针对设计方面的规范做一个提炼和横向比较，也希望能作为一个简明帮助文档方便设计时查看。

设计理念

IOS设计规范叫：ios Human Interface Guidelines 简称：IOS HIG

IOS的设计理念是：

1. 清晰(Clarity)

2. 遵从(Deference)

3. 深度(Depth)

解读：

1. IOS设计的最根本原则是要易于识别，便于使用。设计需要突出重点内容，并且表达可交互性。纵观整个系统，文字、图标、留白、颜色、以及其它界面元素，都是为了帮助理解和使用功能。

2. 动效要流畅，界面要清爽美观，但这些目的还是帮助用户理解内容并与之交互，而不会干扰用户。当前内容占据整屏时，半透明和模糊处理能够暗示其它更多的内容。通过减少使用边框、渐变和阴影让界面尽可能地轻量化，从而突出内容。在动态设计语言中，IOS模拟镜头，通过焦距和景深变化来展示关系，让用户可以使用人眼视觉习惯来操作。仔细看iOS 的桌面，点击打开app的过程，就像发现了一颗果树，调节焦距后放大这颗果树，发现树上的苹果越来越清晰，同时背景渐渐变得模糊。是不是很像呢？这种景深的模糊通常表示层级的切换。

3. 清楚的视觉层和生动的动效表达了层次结构，赋予了活力，并有助于理解。可交互的元素需要易于发现，让用户在成功触发相应功能或者获得更多内容的同时还能掌控当前位置的来龙去脉。例如日历app里由年-月这个视角转换。它流畅的表现了由一点展开变为面的过程，在这个动效过程中，我们能清楚的看到是由哪个页面过渡而来的。同样运营镜头焦距变化的视角，带来纵深感。

Android设计规范叫：Material Design 简称：MD

Material Design的设计理念是：

1. 通过隐喻来表达实体感。( Material is the metaphor )

2. 鲜明、形象、深思熟虑。( Bold, graphic, intentional )

3. 有意义的动态效果。( Motion provides meaning )

解读：

1. Material Design 以纸墨为隐喻，基于真实世界中电磁和物理规律的效果，创造熟悉的触感，意图建立真实的数字化(Authentically Digital)，让用户可以快速地理解和认知。同时MD对于光影做了严格的提炼，用来解释物体之间的交合关系、空间关系，以及单个物体的运动。动效和空间，构成了实体隐喻。MD对于层级的解释和IOS有显著的不同，所有元素都有z轴，意味着这是一个3D空间。

当点击模块时，我们的手指像有磁力一样，模块上升，泛起一圈圈涟漪(Ripple Effect)。从表现形式上来说物体的高度增加，阴影会变得更柔和、更大；随着物体高度降低，阴影会变得更锐利、更小。个人觉得这套动效很有魔法的味道诶，可以控制想要拿的东西飞过来。

2. MD注重平面视觉语言，在排版、网格、空间、比例、配色、图像使用等方面下功夫，运用视觉手法够构建层级，表达关系。通过精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，让用户沉浸其中。MD设计语言强调根据用户行为凸显核心功能，进而为用户提供操作指引。

3. 动效设计强调有意义，要根据用户行为而定，目的是为了吸引用户的注意力，可以有效地暗示、指引用户。动效要非常连续和平滑，维持整个系统的连续性体验。动效反馈需要细腻，让用户能够充分知晓所发生的变化。转场动效需要保持一致性。

单位换算

IOS是一个相对封闭的系统，使得我们设计时必须运用更多原生控件；而Android的开放性使得各厂商可以进行深度定制，屏幕和系统都五花八门，众所周知的某个原因，我们很少能接触原生Android。有些企业出于品牌一致性和资源等因素考虑，使用IOS设计稿作为一稿适配，这避免不了单位适配的问题，这件事情不仅仅是开发同学的活儿，我们在设计和标注时注意两个平台的区别，开发同学对接起来一定会更顺利啦~

iOS的单位:

pt(point ，独立像素)这里特别说明下，和平面设计印刷的pt值是不一样的，在手机屏幕里pt 是独立像素的意思。对于IOS来说1inch=163pt。而在平面设计和印刷中，包括ps等设计软件里，pt是点的意思，1inch=72pt。把这两个搞混了小心开发同学哭给你看哦(喂

Android的单位:

长度单位：dp(device independent pixel，设备无关像素)文字单位：sp(scale-independent pixel，缩放无关像素)一般情况下可认为sp=dp

计算公式：

px = dp *(ppi / 160 )

Android约定在逻辑密度为160DPI(即mdpi)时，1dp=1px。

IOS约定在逻辑密度为163PPI(即@1x)时，1pt=1px。Retina屏下1pt=2px

因此可以看成像素分辨率160下，1dp=1pt=1px

ppi(Pixels Per Inch)意思是：即每英寸所拥有的像素数目，即屏幕像素密度。在屏幕尺寸一样的情况下，屏幕的分辨率越大，PPI的值也就越大，屏幕显示密度就越高，画面的细节也会越丰富。

ppi计算公式：

ppi = √ (屏幕横向分辨率 ² + 屏幕纵向分辨率 ² ) / 屏幕英寸

iphone7屏幕横向分辨率750px，纵向分辨率为1334px， PPI=√(7502 ²+1334 ²)/4.7=326，所以iphone6的屏幕像素密度就是326;

如果你计算水平和我一样男默女泪的话。。。上神器：

设计与输出：

根据友盟17年3月的数据，国内IOS设备最主流分辨率TOP3分别是：1334*750，2208*1242，1136*640，每个尺寸占比差别10%左右。也就是主流是@2x和@3x尺寸。

国内Android设备最主流分辨率TOP3分别是：1920*1080，1280*720，854*480，由于第三个尺寸只占8.1%，基本可以忽略。主流尺寸主要是xxhdpi，xhdpi。值得一提的是两者几乎平分秋色，当然按这个趋势，xxhdpi会渐渐拉开差距。我们设计的时候也主要兼顾主流尺寸。

IOS

1. 设计时，用1334*750的设计稿进行设计

2. 切图时, 切的@2x，@3x图标，@2x的banner等位图。

3. 标注时，距离和字号用pt

Android

1. 设计时，用1280*720的设计稿进行设计

2. 切图时, 切xhdpi，xxhdpi的图标，xhdpi的banner等位图。

3. 标注时，距离用dp，字号用sp

一稿适配：

sketch：

如果你用sketch做IOS设计稿来适配的话，那么设计稿可以用375x667 。它是IOS的@1x；注意banner 之类的位图需要另外用@2x去设计，因为位图由小放大会模糊，只能由大缩小去适配。

PS：

如果你用PS做IOS设计稿来适配的话，那么请从@2x开始，虽然ps爸爸厉害但还是位图软件，例如@1x设计稿中要做0.5px的线，那么在ps里依然显示为1px。

你可能奇怪那么@3x不是更清楚吗？

我是基于以下几点考虑的：

1.目前ios最主流分辨率还是@2x的。

2. 虽然Android方面xxhdpi和xhdpi占比相当，但是图片越大意味着加载越慢，综合考虑用@2x设计banner和营销页面。

在输出时候，IOS输出@2x、@3x。

虽然Android的尺寸奇奇怪怪都有，但是兼顾主流才是重点对吧~ Android输出xhdpi，xxhdpi。或者问问你家开发有没有其他的尺寸需求。

标注直接按照你的设计稿标，分别告诉iOS是@1X的，Android是1px=1dp。

如果你喜欢我的分享记得给我留言或者点赞哦，

也可以把你的问题写在下面的评论区。

更多相关的文章记得去我的主页查阅哦。