没有四倍图!iPhone X发布对UI设计师有这些影响

原创文章 分类: 经验/观点 版权:
13959 236 391 19
2017-09-13
105.0
首页推荐

果发布了最新的iPhone 8/Plus以及iPhone X,当然还包括了公测已久的iOS11的正式版,那么新手机需要四倍图吗?

静电说:就在北京时间9月13日凌晨,一年一度的科技界春晚正式拉开帷幕。苹果发布了最新的iPhone 8/Plus以及iPhone X,当然还包括了公测已久的iOS11的正式版,以及很多很多更好玩的东东。大家知道,每次苹果发布新产品,那就意味着设计师可能要有更多的工作要做了,回想一下iPhone 6 PLUS出来的时候,咱们UI设计师可是忙里忙外来半天去适配新的屏幕密度和分辨率。那么这次苹果新的设备发布后,设计师需要注意哪些问题呢?如何能更快速的将自己的应用适配新的手机设备呢?来听静电一一道来。



本文内容导读:

1.苹果新设备特性介绍

2.新设备的发布,对UI设计师有哪些影响?




PART ONE

苹果新产品特性概览


iPhone 8/Plus 和 iPhone X

如果说iPhone8在外观上并没有太多的变化,仅仅增加了无线充电等功能,处理器提升的话,那么iPhone X无疑是我们关注的焦点,全面屏的设计非常惊艳,整个观感跟之前的任意一款iPhone都不一样。


Image title


独立使用移动网络的Apple Watch 3

恩,之前的Watch必须配合iPhone来使用,现在可以直接在手表中内置电话卡,即使你不使用iPhone也可以打电话了(小天才电话手表?)

Image title


可爱的3D表情-Animoji

这组小动物真的是萌到爆了有没有,你可以用自己的声音和面部表情来自定义动画,嗯,你永远都不知道,屏幕的对面是不是一条狗。这一条确实很好玩,静电觉得以后会爱上发短信了。

Image title


Image title


新的Face ID功能

指纹解锁对于静电这种大汗手来说是一件非常痛苦的事情,识别率真的非常低,有时候静电会想摔手机。那么,这个新的Face ID功能,看起来真的是棒棒的。有了这个功能,恐怕每次解锁都要看一眼帅帅的自己了。但看了发布会的现场演示,静电觉得解锁速度并不太快。另外,以后支付也太省事了吧,我直接看一眼手机,钱就搜搜的没了,欲哭无泪啊。


无线充电功能

还以为新iPhone的无线充电就像使用Wifi那样方便,但真正的效果并不是这样,我们必须将设备放到一个基座上,但是这样好像并没有什么新意,静电买的三星的S7 edge早已实现了这种功能。

Image title

其它诸如相机优化,AR等等的功能,静电就不赘述了,新设备的新功能相信大家已经看到不少了,那么接下来就是重头戏,我们聊聊UI设计师如何应对这次苹果新设备的变化。




PART TWO

苹果新产品对UI设计师的影响


放轻松,没有4倍图

大家都知道,之前在做iOS的应用的时候,最常用到的就是@2x和@3x,这代表着不同的屏幕密度与图片大小之间的适配关系,326左右PPI的Phone5/iPhone6/iPhone7 都使用了@2x大小的图片,虽然它们的分辨率有差异,但是最终决定我们用哪种图片素材的,还是要看手机的PPI,也就是密度。那么这次广大UI设计师关注的要点,可能就是iPhone X了,屏幕分辨率提升到1125X2436(375ptX812pt),尺寸为5.8英寸,经过静电测算,那么PPI达到了458左右,这意味着屏幕密度比Plus的401PPI更大,但是只是多了50多哦,根据苹果的iOS11的规范,我们可以揭晓答案啦,没有四倍图,依然延续@3x,大家可以找一台iPhone X看看之前用@2x或者@3x的应用安装到新设备上会不会虚掉,然后就可以及时开展素材的适配工作了。 其实很简单,无非是把原来的@2x的图片再放大1.5倍就可以了,其实,也就是沿用plus的素材就可以了,只不过,布局需要动一动了。

Image title

Image title


什么?你还不知道屏幕密度(PPI)的定义,这个静电在自己的两本图书《Sketch+Xcode双剑合壁》和《不一样的UI设计师》中都着重讲过哦,当然还有《静电的UI设计教室》课程中也花了大量时间来介绍,不懂的,一定要去再次复习,了解了这些原理,你就可以以不变应万变了。


分辨率提升带来的布局变化

大家是否还记得iPhone 7 Plus的高分辨率屏幕与iPhone7 的普通分辨率屏幕所带来的屏幕内容的变化呢?针对分辨率更大的iPhone X,意味着你需要根据高分辨率适时的讲应用的布局作出调整。那么未来,也许小分辨率的布局会越来越少了。趋势~

Image title

 iOS11?大!黑!粗!

虽然iOS系统从7这个版本到现在的iOS11,设计语言都没有太多的变化,无非是从拟物化变为扁平化,但iOS 11 相对于之前的几个版本,改动还是相对比较大的。静电就拿页面的Title部分举例,你会发现这些文字都变大变粗了。俨然老人机的既视感啊(摊手~)。这么做的好处是视觉层级更加清晰,用户也更加的易读了,加上iPhone X的高分辨率,那么现实效果一定也是棒棒哒。


那么咱们UI设计师在做新的应用的时候,可以尝试使用这样的风格,让我们的应用显得与众不同一点。下面就是一些iOS11界面的截图。大家感受一下。更多的设计规范讲述,我们会在随后的时间及时跟进,为大家带来第一手学习内容,千万不要忘记关注我们的公众号静Design(jingdesign91)哈。

Image title


全面屏!被砍掉的半个状态栏

如图所示,iPhone新机型中大家可以发现,状态栏只剩下半个了。UI设计师小伙伴又要开始忙活了,之前100%宽的状态栏好歹可以显示个提示信息啥的,这下可好,设计又要重新改了。状态栏空间显得很局促,怎么办怎么办?大家可以看到,iPhone X为新的头帘儿设计,而iPhone8与Plus则为正常设计。

Image title

Image title

Image title


注意安全区域,防止内容超出

iPhone X为了防止误触和保证头帘位置的显示效果,在设计的时候需要在左右和上下留出安全区域,请设计师务必注意,不要太贴边了哦。


Image title


将iPhone X的屏幕区域填满

由于新的iPhoneX变长,因此你需要在布局的时候保证上下位置填满,否则会影响美观。如下图是4.7英寸和5.8英寸的iPhone X的内容布局对比。

Image title

以上是静电挑选出的设计师最需要关注的一些设计细节,另外静电也为大家提供了iOS 11的设计规范供大家参考,欢迎关注静Design公众号:jingdesign91,静电将会第一时间为大家带来上手视频,。那么最后一个细节,iPhone X的国内售价是多少呢?64G 8388元,256G 9688元。你选哪个? 静电觉得有点肉疼啊。

Image title


喜欢就下面点个赞吧


版权声明:

本文系静电@静Design原创,转载请注明作者和出处。



hixulei

微信公号: jingdesign91,欢迎关注.

6196粉丝/13关注

原创小生“劳模勋章”之锄头勋章助人为乐
十分钟快速掌握iPhone X UI界面适配技巧又给国家拖后腿?-由《2016年北京市薪资水平报告》谈起
16
蛋疼君

静电还在这里装B啊?当初跟我赌7的屏幕分辨率的赌资还没给我呢

精彩!

hixulei

hixulei

微信公号: jingdesign91,欢迎关注.

原创小生“劳模勋章”之锄头勋章助人为乐

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN