5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

iPhone X的热度逐渐下去了,用户等着发售日的到来,而设计师们则忙着做适配。而适配却发现出了大事,一款齐刘海,刷新了半个界面圈子的三观。

要知道,沾上设计的多少会有点强迫症的。一旦他们一边倒批评一个设计,一定有什么地方是出了毛病的,至少在拯救强迫症方面。记得上次讨论这类事情,说的是阿里菜鸟的新Logo:菜鸟联盟新Logo简评

那么,齐刘海的核心痛点是什么?

 

屏幕不再是长方形,不再对称

86808978 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

根据iPhone X的官方说法,iPhone X齐刘海两侧的部分,属于“可用区域”。也就是说,这两侧在APP的全屏模式下可以隐藏,而显示APP的内容。这意味着:iPhone X的屏幕不是长方形的

而另一侧,Home条同样是“可用区域”,也可以做到全屏下隐藏。而问题在于,Home条的高度和齐刘海是不同的。这意味着:iPhone X的屏幕不是上下对称的(以竖立放置的情况来界定上下)。

苹果设计的贴心又在这时候无意义地体现,iPhone X的Home条在屏幕横向时,也会在“下方”,也就是正立时的侧面。这意味着:iPhone X的屏幕不是左右对称的(以竖立放置的情况来界定左右)。

Nice cnnnd job ! —— 某设计师一拍大腿说。

 

非对称如何设计

进入苹果官网,找到IOS开发文档,你会看到类似这样的图片。

48943039 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

没错,Safe Area,安全区。理解起来很简单,就是在以上不规则、不对称的情况下,切出一个对称而规则的长方形作为安全区。而这个安全区,就是开发人员被推荐放置一切操作界面的地方。

93477030 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

上面的图片,可以看到iPhone X并不推荐在竖屏模式下,将APP的功能性部分放置在安全区之外,也就是齐刘海两侧的位置是不可使用的。iPhone X推荐你为系统的状态工具栏预留这个位置。

横屏呢?没错这部分第一张图已经展示给你了,我们这里再放一次。

48943039 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

左侧齐刘海的部分被划分在安全区之外,底部也留下了Home条的位置,右侧……什么鬼。右侧居然需要保留和左侧齐刘海一样高度的安全区!那我的大屏还有什么用?这里的划分并不是为了切割出16:9的比例而设置的,而是……

61125957 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

是的,侧面的情况下,你没法确定用户会怎么拿手机。除非能做出“智能地平移整个应用”这种操作,不然如果利用了安全区之外的部分,翻转手机就可能会出现上图的情况——部分功能模块被齐刘海遮住。

 

出血的概念

苹果这一波操作,让我想起了印刷中的一个概念,叫做“出血”。

518814 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

出血的理解很容易,如一张A4的册子稿件,一般交付印刷厂的是216x303mm的大小。而我们知道,A4原本的尺寸是210x297mm,这多出的3mm即出血。上图画板外红色框内的部分即出血的部分(上图白色部分为画板)。另外,浅蓝色线条也划出了安全区,既是为了对齐,也起到了保护画面的作用。

之所以需要出血,是因为需要避免切割的时候出现切歪的现象。

73487793 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

如上图,深蓝色部分为主要区域,而浅蓝色部分为画布外的区域。在切歪的情况下,如果按照红色线条切割,不仅破坏了深蓝色的部分,得到的稿件上还会出现少许浅蓝色部分,如果浅蓝色部分是白色的,大多情况下就会变得难看了。此时如果在浅蓝色部分也设计了画面,而且规定了安全区,那么切歪的影响就会小很多。

44202428 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

实际印刷又往往是上面的情况,在一张大纸上放置多个画幅,印完统一切割。这在印刷上叫做拼大版。

72946438 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

在拼大版时,如果使用没有出血的稿件,可能就出出现上面的情况。有的稿件上既有上一张的头,又有下一张的尾。这就很尴尬了。

在不规则图形中,出血的规则同样适用。一样的道理,也适用于iPhone X。

 

如何用出血的方式适配大屏

出血的原理用更通俗的方式来解释,就是:让设计稿比最终需要的画面大一圈。也就是说,既要保证在大一圈的情况下,让作品看起来是一个整体,又保证作品的主要内容在“安全区”以内。

51222211 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

如上图,在底部如果有一张横贯版面的线条,在设计时就应把线条一直延伸到出血线的位置,而不是到画布边缘。这样在裁切后,就能很好地避免这条线在纸张边缘断开的现象。

45037247 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

所以,最基本的方式,即仅按照安全区来设计APP内容,让安全区外的色调和APP内容完美衔接即可——裁剪是最简单粗暴的适配方式。

至于为每一个场景做适配……我想大部分APP不会选择曲线救国的方式,当然主流的那些还是有希望可以期待一下的。

 

iPhone X的体验会如何?

基于上述分析,很多APP可能仅针对安全区进行开发,而导致宣传中的5.8英寸的屏幕大量浪费——你的5.8英寸,可能是个假屏幕。

iPhone X的Home条仅提供了“明”、“暗”两种色调,这意味着在大部分APP里它不会显得特别好看。而同时,Home条的存在还对“底部向上滑动”这个操作进行了霸道的占用。现有的很多有这项操作的APP,是选择专为iPhone X设计一款,还是保持原状呢?

80986984 - design, sharing - 5.8英寸是假的!从iPhone X齐刘海出发,浅谈设计的出血线和安全区

最后,也是我认为最麻烦的,就是这款手机太大了。屏幕到了一定大小,就会出现拇指盲区这个概念——很多功能键都在我们并非能简单用拇指触及的位置,比如普遍的左上角的返回键。iPhone X无疑是一款双手操作的机型,在屏幕加大的同时,双击Home下拉屏幕的操作都不存在了,单手体验是可想而知的。

 

虽然他们知道iPhone X的种种不好,虽然iPhone X的独特设计会增加他们的工作量,但我不认为这会成为障碍。可以相信,在iPhone X上我们依然可以获取体验优良的大量APP。当你发现那款APP在你的手机上变得越来越好,就向设计师们致意吧。

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注