安卓和iOS到底有啥区别?

这个话题就像月经问题,总是不断。果粉喷安卓粉,安卓粉喷果粉,总是会抓住对方的缺点,然后痛数一番,这种事情我们可以在各个群里看见,聊着聊着吵起来了。我们呢,作为设计爱好者,要理性对待这些问题,谁让他们是我们的衣食父母呢,不能骂爹骂娘。

作为儿女,我们应该深入了解父母,理解他们,孝顺他们。所以啊,设计师对待Android和iOS也应该一样,不了解他们,可能最后落得个“不孝”之地。那我们下面来深入探索下这对衣食父母。

我们从4大模块来逐步了解:

  • 封闭与开放
  • 物理交互区别
  • 设计的差异
  • 后妈-iPhone x 和iOS11

一、封闭与开放

封闭与开放,我想这个程序猿会很熟悉。当进行产品开发时,你会发现,各个程序猿会在网上寻找各种开源代码,直接调用,有时候会发现他们效率特别高,但是,很多时候也会和你输出的设计稿不一样。Android和iOS系统的不同,也带来了设计思路的不同。

Android是开放的,但是带来了多样化设计的同时(使用自定义控件几乎没有不能实现的设计效果),也带来了“杂乱无章”的情况。各个手机厂商生产着不同型号的手机,五花八门。

而iOS则是封闭的,很多权限是不开放给开发者,开发设计者必须遵循苹果制定的规范。而iOS的HIG(《Human Interface Guideline》人机交互规范)则更多“迫使”设计师去更多的使用系统原生的控件,这样虽然有一定的局限,但这样做的好处就是每个App的基本操作都是在规范之内,具有一定的统一性,用户使用起来非常的方便,学习成本也相应降低了不少。

虽然说iOS有这自己的设计规范,Android也是有这自己的规范的,Android推出material design设计规范,很大的提高了安卓的设计能力,很多效果都比iOS更优秀。具体效果大家可以去买一个谷歌手机,体验优质Android设计。

封闭与开放具体体现在:(具体请查看链接:http://www.jianshu.com/p/372034fc2f2e)

1.两个系统对屏幕反应的优先级不同

iOS对屏幕反应的优先级是最高的,它的响应顺序依次为Touch–Media–Service–Core架构,换句话说当用户只要触摸接触了屏幕之后,系统就会最优先去处理屏幕显示也就是Touch这个层级,然后才是媒体(Media),服务(Service)以及Core架构。

而Android系统的优先级响应层级则是Application–Framework–Library–Kernal架构,和显示相关的图形图像处理这一部分属于Library,你可以看到到第三位才是它,当你触摸屏幕之后Android系统首先会激活应用,框架然后才是屏幕最后是核心架构。

2.硬件工作配置不同

iOS基于GPU加速Android系统产品则并非如此,因为Android需要适应不同的手机硬件,需要满足各种差异配置,所以很多图形特效大多都要靠程序本身进行加速和渲染,并严重依赖CPU运算的操作自然会加大处理器的负荷,从而出现卡顿的问题

3.开发机制不同

安卓机制效率低,Android的编程语言是JAVA,而iOS的则为Objective-C,不过要是说Android系统之所以有些卡顿是因为JAVA开发语言的关系,或者是拿它和Objective-C对比肯定会有人提出质疑。Objective-C的优势是效率高但比较“唯一”,而JAVA的优势则是跨平台不过运行效率相对偏低,其实这两个编程语言所带来的机制不同,就已经造成了各自系统之间的流畅性差异化。

我们可以用一个简单易懂的案例来解释封闭与开放。例如消息提醒机制的差异

iOS系统对权限控制比较严,每当我们下载一个新的app,当要调用相册权限、相机、麦克风、位置等都需要用户选择确定,如果用户点击不允许,就没法调取。想要再次允许的时候操作也比较麻烦,需要到系统设置里面去打开权限。这也就是为什么iOS消息设置相对来说复杂一点,根本原因是iOS系统。

由于Android开源,Android开发在用户安装app就获取了很多权限,比如用户安装app后,对于消息提醒的设置只需要在app设置界面设置就可以了。

二、物理交互区别

Android和iOS除了封闭和开放的差别外,还有物理控制、交互的差别。iOS全是由苹果公司统一出品,而安卓则不同。在国内,经济快速发展,安卓手机厂商如雨后春笋拔地而起,很多从原来的山寨机一步步打造自己的品牌,逐渐得到用户的认可。我们常见的Android手机有三星、谷歌、小米、华为、中兴、魅族、oppo、美图手机、锤子手机、努比亚……面对着这么多手机厂商,每个厂商有着自己独特的功能和交互方式,甚至有的物理键都不相同。

截屏

就拿一个很常见的截屏功能来说,iOS是电源开关键和home键同时按,而小米手机截屏则是按住音量键和最左边的功能键截屏(其实小米有五种截屏方法,如下图),谷歌手机又不同了,华为也不一样了。

解锁

比如说一个常见的功能,指纹解锁,苹果5、6、7的指纹解锁就是在home键上,而iPhone x则采用面部识别解锁。从用户的操作习惯来说,会用大拇指来解锁,不管左手还是右手。而华为手机的指纹解锁放在手机的背面,用户大多数则会选择食指来解锁。再举一个栗子,密码解锁除了指纹外,还有输入密码解锁,iOS从原来的四位到现在的6位,都是采用键盘输入密码的方式进行解锁;而安卓手机解锁大部分是采用的手势密码的方式进行解锁。

拍照

再比如美图手机、oppo r11这些手机都是主打拍照功能,拍照很牛逼,吸引着用户,当然,拍照是现在很多手机主推功能,包括苹果手机也一直在拍照功能上改进。

当然,Android和iOS的物理交互区别不仅仅是上面举出的这些栗子,还有非常多的不同,每个厂商都有各自牛逼的地方。我们上面举出的一些系统物理的区别,对于我们一般互联网UI设计师来说没多大影响,而手机生产商这边的设计师就会考虑更多系统物理的差别。有的童鞋会疑问,面对着这么多手机,用户会习惯么。其实呀,我们都不是土豪,不会一下买个一二十款手机放在兜里,用户一般也就主用一款手机,既然选择了这款手机,他会去学习里面的一些新的体验的。物理交互区别还有其他的,这里就大致说这么多吧,毕竟我也是个穷屌丝,没玩过那么多的手机,再逼我,我也想不出来了。多看,多体验,发现它们的不同。

三、设计的差异

那我们的重点来了,对于老司机来说,所有的流程和规范基本都很熟悉了,老司机看了请多多指教。我就从设计输入与输出[包括尺寸大小、单位、字体、设计输出(标注、切图、交互与视觉输出)]和控件差别来讲述。

1.设计输入与输出

a.尺寸大小

新人刚进入UI行业的时候,都会纠结一个问题,我到底应该要设计多大的界面,然后上网一查手机尺寸后,就更懵逼了。不信你看看

这还仅仅只是一部分尺寸,你不会被这么多尺寸吓到吧。如果每种手机尺寸都去做设计,一个设计师你会做死,设计师多了公司又请不起。所以呢,通常设计师们是这样做的:Android就以720px*1280px 或者1080px*1920px(根据具体情况定,但大部分是以720px*1280px做的),iOS则以750px*1334px。从众多尺寸中最后选出2-3种,是不是觉得轻松很多。还有的人抱怨,我同一个app,需要做两种设计么,界面都长得一样。其实呢,严格意义上来说是应该做2种尺寸的,Android和iOS各一种,毕竟它们的系统不同的,很多交互控件也是不相同的。但是,如果你先做iOS的尺寸,再调整一套Android尺寸,也是相当浪费时间的,而且也没太大必要。

所以呢,那我们就看公司业务情况,重Android还是重iOS,重谁就以谁为基础做设计,只做一套,让开发适配,具体控件调用相应平台原生控件。如果两种都重视呢,那我们就以iOS的750px*1334px作为设计基础。

虽然说Android和iOS你可以选择只做一套,但是Android和iOS的规范你还是应该去了解的,毕竟是2个系统,在开发设计的时候很多是不同的。就举一个简单的栗子,Android的安全点击范围为48dp,iOS的则为44pt。Android的状态栏为24dp,iOS的为20pt。安卓的顶部导航栏为56dp,iOS的为44pt。

b.单位

前面说了px、pt、dp,可能有的人比较懵逼,其实还有sp,这些都是我们设计中常用的单位名词。为什么会这样呢?因为安卓和iOS是不同的系统,针对的手机屏幕分辨率不同,有着各自的单位规范,做设计的时候我们要了解这些单位换算。px是我们常用的像素单位,比如我们常说的苹果6的设计尺寸为750px*1334px;pt是在iOS中的,表示长度单位和字体单位,对于iOS开发来说,我们应该给他们pt的单位,我们现在设计的尺寸基本是以苹果6的尺寸设计的(用pt单位表示就是375pt*667pt,用像素单位表示就是750px*1334px,在2倍图中1pt=2px);dp是安卓开发中使用的设计单位,就拿我们常用的720px*1280px来说,与之对应的安卓单位表示为360dp*640dp,它们也是2倍的关系。sp是安卓的字体单位,假如字体在你的设计稿720px*1280px中为32px,那么在360dp*640dp中该字体的大小就为16sp。

我们首先说说Android,具体的原理我就不讲了,详情请看http://wiki.jikexueyuan.com/project/material-design/layout/units-measurements.html 。看着这么多,我们设计记住这一点 XHDPI是对应安卓的2倍图(720px*1280px)    XXHDPI是对应安卓的3倍图(1080px*1920px)这两个是我们现在常用的

我们再来看下iOS,具体单位原理请看官方规范,前面也说过,我们通常设计尺寸是750px*1334px,它对应的是iOS的@2x图。

c.字体

字体区别呢,其实在前面的文章也讲过,http://www.zcool.com.cn/article/ZNTE4Njg4.html。在Android中,英文字体使用Roboto,中文字体使用Noto(思源黑体)。以前的设计中,中文字体主要是使用微软雅黑,但微软雅黑在界面中就显得有点厚重、臃肿。Google联合Adobe发布了「思源黑体」作为Android的默认中文字体,新的「思源黑体」不仅仅在字形上更易于在屏幕的阅读,并且拥有7个字重,充分满足了设计的需求。

iOS 中,在英文方面,苹果加入了新的字体San Francisco,该字族包含了有两个字体:为 iOS 和 OS X 设计的 SF,以及为 Watch OS 设计的 SF Compact ,而各自分为各自分为Text 和 Display,前者 6 个字重,后者 9 个(多了三个斜体)。

在中文方面,终于,iOS带来了全新的「苹方」,字形更加优美,且在屏幕的显示也更加清晰易读,拥有6个字重,满足了日常的设计和阅读需求。

虽然说两个系统有着各自的字体,那我们前面说的设计稿只出一稿,那这两种字体怎么用呢。既然设计稿都只有一稿,那么我们的字体也当然只用一种了。还是前面说的,如果你们公司以安卓为主,那就以安卓的设计稿设计,字体也采用思源黑体。如果是以iOS为主,则采用iOS的设计尺寸,字体直接用平方就好。如果两种应用同时开发,那就以iOS为设计基础,字体也采用平方。

虽然我们减少了设计成本,但是开发这边还是各自用自己的系统的。在我们移交设计稿时,我们要向开发说明,安卓、iOS开发,用系统自带的字体,那么安卓就会用安卓系统的字体,iOS则会用iOS系统的字体。除非设计特殊要求用其他字体,那就要和开发工程师商量了,在安装包植入字体包,这样才能让用户使用的字体都相同。或者设计稿上存在特殊字体,那我们就把少量的特殊字体切图给他们。

d.距离大小、字体大小的区别

安卓和iOS的官方也各自出了自己的设计规范指南。我们不难看出,在iOS中,内容到边的距离通常是15pt(以750px*1334px为基础,像素大小为30px),而安卓基本是16dp(以720px*1280px为基础,像素大小为32px)。字体大小也不一样,iOS是11pt、13pt、15pt、17pt,而安卓中是12sp、14sp、16sp、18sp。

前面也说了,用一种设计尺寸,那么我们通常采用偶数,这样方便两边适配,就是间距以8px为基础(请查看这篇文章,一切为了程序猿,http://www.uisdc.com/akanelee-android-about-8px),我们边距可以定位32px。字体大小也采用12sp、14sp、16sp、18sp。

其实说这些也仅仅是一种参考,具体请按照自己公司的需求而定,建议采用一套规范,设计规范对于设计湿和开发者来说都是非常有用的,如果没有,那你应该建立一套规范,做规范对自己的提升也特别大。

e.设计输出

前面讲了设计的输入区别,那我们再来讲讲设计的输出区别。

标注

标注,是我们最后设计输出必须做的一件事,其实对于我们现在工具如此强大的时代,标注问题已经不再是什么难题了,sketch现在是UI、交互设计最常用的一款软件,使用起来非常方便。sketch有一款插件叫sketch Measure,它可以轻松导出我们的尺寸标注,导出的时候我们可以选择默认展示的单位。如果是给安卓开发导出尺寸,你的画板是360dp*640dp,那我们选择导出的单位就为MDPI,这样开发就直接读取值就行,不用换算了。如果给iOS导出尺寸,画板是375pt*667pt,那就选择导出的单位为@1x。

坑爹的是sketch只有mac版,windows用户就开始哭泣了,而我们很大一部分童鞋都是windows用户。那我们也别灰心,我们也有标注神器,你们就自己去研究下。比如

Markman(http://www.getmarkman.com),

Pxcook像素大厨(http://www.fancynode.com.cn),

Assister ps( http://witstudio.net/en/assistor/ )

Markly(http://marklyapp.com/)

INK(http://ink.chrometaphore.com/)

切图

切图是我们UI设计师必须熟知的,除了把标注素材给到开发,还应该把页面中的所有图片都给到他们。切图的格式也是多种多样的,比如png、jpg、svg、webp等,每种格式都有着自己的特点,不了解的可以自己再去温习一下。通常我们切图格式为png,当然,现在h5页面、网页开发基本都是采用svg格式(矢量)。切图我们有很多方式,如果在sketch中,我们可以新建一个面板,专门放切图文件。如果是ps,那也很方便,ps也有切图插件cutterman,一键切图,非常智能高效,https://pan.baidu.com/s/1o8OKUHc

切图我们需要注意的是:

统一规格:通常,我们都有一套自己的图标设计规范,在这个规范内进行我们的图标设计,设计完后再用到相应的位置。比如,安卓常见的图标制作大小为24dp,安卓切图通常就为24dp

注意点击范围:点击范围,这个是我们在设计的时候或者交付的时候非常容易忽视的一个问题,很多时候开发也不注意,直接就按照设计给的图给的点击范围大小,造成最后上线的产品非常不好用。安卓的安全点击范围为48dp,比如我们顶部的导航返回键,点击范围就应该设置为48dp。虽然通常设计切图可以不切这么大,但是应该在移交的时候注明点击范围。

统一命名:命名规范,其实也就像我们使用ps的时候图层命名一样,它的主要作用是让我们能够快速找到想要的切图和区分其他切图,是一个习惯的问题。切图命名统一英文,不要用中文,程序不识别的。详情请参照:http://m.ui.cn/details/114321?plg_nld=1&plg_uin=1&plg_auth=1&plg_usr=1&plg_vkey=1&plg_dev=1

安卓点九切图:这个是安卓切图比较特别的地方,点九切图可以更好的适配手机和减少系统占用资源,当然并不是所有安卓切图都用点九,只是在特殊情况下才使用的,比如按钮、背景等。使用点九,你可以用ps切,也可以下载一个点九图的生成器,但必须先下载一个java环境(很容易),然后才能使用。当然,你可以让开发自己切。

切图的输出:虽然前面我们讲了只做一套设计稿,但是我们切图的时候最好分别输出,因为安卓和iOS的命名是不一样的。iOS切图是全部放在一个文件夹的,以后缀名不同来区分@2x和@3x。而安卓是把2倍图和3倍图分开放在不同的文件夹里,名字都是一样的,2倍图放在xhdpi的文件夹中,3倍图放在xxhdpi中。这样给到开发就好了,免得给他们造成不必要的麻烦。毕竟我们要爱护好我们的程序猿,和睦共处。

交互与视觉输出

顺便再谈谈交互和视觉输出,这主要看你们公司是否有交互设计师和视觉设计师的区别了。如果2个岗位都有,那就各自有不同的输出物了。下面是有的公司对于视觉设计和交互设计输出物和分工边界的划分。

说的直白一点,交互设计师需要把页面跳转流程、交互事件在交互文档中说明。视觉设计师最后输出切图、标注、图片,最后统一移交给开发。

2.控件差别

控件的差别,是我们设计中会经常碰见的问题。系统不同,导致本身的很多控件就不相同,我们就从常见的几个控件样式说明一下,主要是:导航、弹窗、动画、按钮、键盘、选择控件

导航首先,导航栏的高度是不相同的,iOS系统规范为44pt,安卓的为56dp。其次iOS导航栏的标题在中间,返回键旁边可以有返回字样或者上一层级的名称;而安卓导航栏的标题通常是和返回键挨着的,还有就是两者的箭头样式不同。但是,现在的app同质化严重,这些导航栏的区别也不是大问题,各种导航样式在两个平台混用也屡见不鲜。所以,我建议,如果只做一套,那就把标题统一放在中间吧,返回键旁边也不需要放指示文字了。互联化进入我们生活好几年了,用户也大多数习惯了。

弹窗我在以前的文章中专门总结了一次弹窗规范,这里我们再大致说说两个平台的弹窗区别。

Dialog/Alerts首先它们在两个平台的名称不一样,安卓称之为dialog,iOS中称之为alert。使用场景就是:需要用户对此弹框进行操作后才能继续执行其他任务。使用Dialog/Alerts的时候还是谨慎一点比较好,尽量不要给用户带来糟糕的体验感。

Toast/HUD这两个是app中非常常用的,作为一个轻量级提示,它们在各自平台中的名称也不相同。toast是安卓中的习惯叫法,HUD是iOS中的习惯叫法。

安卓中是这样规范toast的:

  • 出现在屏幕底部。
  • 只能放文字不能带图标,文字要精简不宜太长。
  • 不是模态的,可以透过Toast对其他控件进行操作。
  • 短时间后会自动消失。5.不能对Toast进行交互,不能手动操作让Toast主动消失。

它们两的不同主要是:

  • Toasts一般出现在屏幕下方,HUD出现在屏幕中间。
  • Toasts一般是灰黑或黑色半透明,HUD一般是毛玻璃半透明。
  • 每次产生的Toasts内容不可改变,HUD内容可以改变(比如调节音量时出现的HUD)

但其实现在toast使用也已泛化,每个平台都在用,而且也延伸出其他样式,出现的位置也不一定在中间或者底部,也有可能出现在顶部。还是那句话,规范只是作为参考,具体的需要结合自己app的需求。

Actionbar(Action Sheets、Acitivity Views)动作栏虽然两个系统都有,但是官方给的指导建议还是有些不同的。

安卓中称为Bottom Sheets,特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作,或者需要详加描述的,可以考虑使用菜单(Menu)或者对话框替代。

底部动作条(Bottom Sheets)可以是列表样式的也可以是宫格样式的,没有取消按钮。宫格布局可以增加视觉的清晰度。在一个标准的列表样式的底部动作条(Bottom Sheets)中,每一个操作应该有一句描述和一个左对齐的 icon。如果需要的话,也可以使用分隔符对这些操作进行逻辑分组,也可以为分组添加标题或者副标题。

而iOS中,也有和安卓类似的功能,但是action sheets是没有图标的,居中对齐,在action sheets(操作列表)和activity views(活动视图)通常还带有一个取消按钮,通常点击取消或者弹窗外的界面,弹窗都会消失。

其实,安卓中也有不带文字的操作列表,不过通常是在屏幕中间弹出。样式我们现在基本也趋于统一,不去纠结每个平台的特殊性了。

tips和popover这两种用法在每个平台都有用到,我们在正确的场景中使用它们就好了。

Snackbar是安卓独有的(见上图)。它是一种针对操作的轻量级反馈机制,常以一个小的弹出框的形式,出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方,包括浮动操作按钮。

它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时,不会阻碍用户在屏幕上的输入,并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。

动画Material Design运用的是机械物理和电磁物理,而iOS的动效更多建立在镜头运动和景深变化上。究其设计语言的本质就是让用户可以把客观移植到界面的一种思路。

Material Design动画最引人注目的就是响应式交互动画,更加模拟真实物理场景,点击后就会泛起“涟漪”作为一个交互响应。而其他物体的排列则按照一种“深浅”的层级来排布,离手指越近的元素越亮,阴影越深,而离开远的元素则越暗,直至淹没在黑暗之中。

iOS的系统动效可以发现,每当用户去点击,镜头就会切近,而背景则是隐入了一片高斯模糊的景深之中。高斯模糊也成为了iOS特有的一个表达层级关系的利器(其中不仅是模糊,还存在着镜头晃动时的位移)。同样类型的动效还体现在打开app的时候由一个点放大成一个面,包括“日历”App和“相册”App(皆为系统应用)中年-日-月切换的操作,均是镜头思路的表现形式。

按钮

安卓主要使用的按钮是:扁平按钮、凸起按钮、悬浮按钮、底部常驻按钮、下拉菜单按钮、开关按钮

iOS和安卓的按钮形式都很接近,系统主要采用文字按钮和图标按钮

两者最大的差异是安卓点击有响应效果。比如:悬浮响应按钮(Floating action button), 点击后会产生墨水扩散效果的圆形按钮。浮动按钮(Raised button), 常见的方形纸片按钮,点击后会产生墨水扩散效果。扁平按钮(Flat button), 点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果。而iOS没有墨水扩散效果,而是颜色变浅来反馈用户点击事件。

键盘

安卓和iOS的键盘是不相同的,根据不同场景呼出不同的键盘类型,具体使用场景大家可以自己去深入了解下。如下图。通常对于对话框来说,iOS的发送按钮是可以直接放在键盘上的,而安卓的通常是放在对话框里面。

选择控件和日期选择等

常见的选择控件样式是不相同的,iOS像滚轮,模糊弱化未选择的选项,安卓就是平移滑动。开关控件样式也是不相同的。通常这些对于做原生应用的来说,各自调用各自的系统组件就行,但是对于h5来说,需要注意了,他们是采用统一的设计,安卓和iOS是相同的,应该让开发制作统一样式,需要更少的系统区分。

四、iOS11

首先我们来说一下iOS11,从iOS最开始的拟物化风格再到今天的iOS11,苹果在设计上不断的改进优化,引领设计潮流。毕竟这篇文章是说安卓和iOS的区别吧,那我们也要了解iOS最新的系统了。我们不去研究所有的风格,那就对比一下最近的两种风格吧。

iOS10升级到iOS11,变化比较大。我从2个维度来理解它们的变化。第一个是:设计语汇的变化,这个对于我们其他app应用的设计师影响最大,在设计应用时考虑的最多。它包括字体加重、字体变大、卡片与阴影和圆角的应用、icon从空心变为实心、键盘样式的改变。

另一个是系统本身的一些应用和交互发生改变:锁屏交互的变化、控制中心的变化、计算器和拨号按钮的变化等等,就不一一列举了。详细的可参考http://www.uisdc.com/ios11-design-differences#

设计语汇

1.字体加重

字体的变化在这个版本来说是非常大的,字重发生变化,比如主界面,App 名称的字变粗,日历字体变粗改进阅读体验。

2.字体变大

全新的 Navigation Bar,我们可能早就已经见过过这种样式了,去年(2016)在新版 Apple Music 就应用了这种大大字 Nav Bar,可谓是iOS的一次尝试,随后在今年就全部应用在iOS11系统中了。当然设计师也不要担心开发的实现难度,iOS11也开放 API 让大家使用了。

3.卡片、阴影、圆角的应用

卡片的应用,大家可以去观察App Store,这次它的改变也非常大,整体交互架构都发生了变化,视觉表现也让人耳目一新,当然它的改变不是为了更好看,而是为了达到苹果公司的商业目的。App Store也充分展现了卡片、阴影、圆角的应用方式。

4.icon从空心到实心

据研究表明,实心的图标比空心更容易识别。当然,这里的改变主要的原因我认为是卡片和阴影的应用,实心图标能更好的和它们结合在一起。

5.键盘样式改变

数字虚拟键盘也从原来的空心变成实心了,它和拨号、计算器统一为实心按钮

系统本身交互和应用的变化

1.解锁交互发生变化

iPhone x解锁采用面部解锁,取代了原来的指纹解锁,实体home键已经被虚拟条取代。

2.控制中心的变化

控制中心从原来的2个页面变为现在的一个页面了

3.计算器、拨号样式的变化

计算器和拨号样式也和数字键盘一样,从空心按钮便为实心按钮

五、iPhone x

除了上面说的iOS11发生了变化,苹果手机本身也发生了变化。最新苹果手机iPhone x,相信大家已不再陌生,周围的土豪们也陆续的用上了它,周围的同事也买了,屌丝我也有幸抚摸了一下。

一说到iPhone x,我们就会想起它那让人津津乐道的“刘海”了;除了“刘海”还有它取消了home物理键,而以小黑条虚拟键代替;再一个就是尺寸变大了,还有面部识别解锁。

尺寸

原来的屏幕在 iPhone X 之前,尽管 iPhone SE,7 和 7 Plus 的屏幕尺寸大小不同,但都是 16:9 的屏幕。而 iPhone X 差不多是个 13:6 的屏幕812pt x 375 pt(2436px x 1125px)。屏幕的绝对尺寸也变大了,从 4.7 吋增大到 5.8 吋

就尺寸大小来说,我们就可以简单的认为,iPhone X的竖屏模式,宽度与iPhone6、iPhone7、iPhone8的4.7寸显示屏宽度相同;iPhone X的高度比4.7寸的屏幕要高出145pt,增加大约20%的垂直显示空间。应用程序可以显示高分辨率的图像。iPhone X是显示高分辨率的@3x图片。375×812@1x,3倍尺寸就为1125×2436@3x,所以我们设计稿就以375pt x 812pt做,最后导出3倍图就可以。就设计图片本身来说不需要做过多额外的工作,只是在高度适配上需要注意一下。

安全区

安全区这个说法可能我们在做平面印刷的时候需要注意出血,没想到互联网app设计也需要注意,原本以为安全区离我很远了。为了在iPhone x上适配我们的设计,我们就不得不考虑这个问题。相对于其他来说,iPhone x 的状态栏变高了,垂直空间更大,展示的内容更多。还有home键采用虚拟条,交互也发生了一些变化。我们通过下面的图来了解它。

好啦,今天就到此结束了,欢迎各位小伙伴交流学习。

站酷

作者:Luyeelin

(0)

相关推荐

  • 天天喊着学UI,知道安卓和iOS的区别吗?

    这是一篇基础的UI基础文章,是一个UI设计妹子整理的安卓和iOS的区别,对于初学者来说,真的帮助很大,那么就开始学习吧~! iOS和Android的区别,想了很久,也没想出特别多,这两个系统有些东西越 ...

  • 国行与非国行的 iPhone 到底有什么区别?

    国行与非国行的 iPhone 到底有什么区别?每当人们问我买 iPhone 怎么买的时候,我都会建议买非国行的 iPhone,但当人们问我为什么的时候,我总是很难系统的回答.那么,今天我们就一起来具体 ...

  • 安卓手机水货和行货,翻新机区别在哪里?怎么辨别

    最近朋友想买手机,但不清楚什么是水货行货,其实这个词早就在很久就已经出现了,只是说有塞班时代到安卓时代,水货又多了一些概念。但终归还是不理本宗。其实,在小编看来,水货行货都是好货。关键是得自己会挑,因 ...

  • 畅无线手机版怎么用?畅无线使用教程(安卓版/ios版)

    畅无线是一款一键接入公共WiFi的免费手机软件,云联团队开发的手机应用软件,致 力于帮助用户快速查找并接入公共wifi热点。版本支持android系统和 IOS 系统。可以快速接入 中国移动CMCC、 ...

  • fgo安卓和ios互通吗

    今天小编给大家带来的是fgo安卓和ios互通吗 ,希望能帮助到大家! 操作方法 01 首先,目前的话fgo安卓和ios还没有互通,但是技术上完全可以实现. 02 不过游戏厂商不会这么做,同时苹果公司也 ...

  • 快牙安卓与iOS版怎么传文件

    安卓和iOS快牙怎么连接 01 分别打开安卓和iOS设备桌面上的快牙图标,如下图所示. 02 点击安置手机中间蓝色的"传"按钮,进入如下界面. 03 点击"我要创建&qu ...

  • 安卓与IOS的区别对比

    手里拥有两部手机,老是有人跟我讨论安卓手机与IOS手机的区别,因为爱好不同,应用习惯不同总是各种评述,我分享一下我对他俩的优劣评比. 操作方法 01 1.屏幕大小的优劣 IOS系列的手机除价格外,被诟 ...

  • 应用FotoSwipe实现安卓和ios之间一键传照片,FotoSwipe视频教程(附FotoSwipe安卓版下

    神奇应用:iOS和安卓之间分享图片最直接的方式 在手机之间分享文件一直都是一件繁琐的事情,尤其是在iOS设备和安卓设备之间,往往需要很多的步骤和网络连接,但是有了下面这款神奇的图片分享应用,在iOS设 ...

  • 脸萌软件下载大全 myotee脸萌电脑版/安卓版/ios版/iphone版/ipad版下载地址详情介绍

    脸萌软件下载地址应该还有很多网友不清楚吧,就下来小编为大家带来了myotee脸萌软件下载地址大全,其中包括了安卓版、ios版以及电脑版,一起来看看吧,希望会对大家有所帮助。 脸萌安卓最新版:http: ...