劉海各不同！設(shè)計(jì)師告訴你為啥iPhone X的劉海更順眼

 當(dāng)蘋(píng)果第一次讓劉海屏出現(xiàn)在 iPhone X 上時(shí)，幾乎沒(méi)有人愿意說(shuō)這是一個(gè)好看的設(shè)計(jì)。但是時(shí)間來(lái)到現(xiàn)在，當(dāng)越來(lái)越多的安卓手機(jī)開(kāi)始加入劉海屏陣營(yíng)的時(shí)候，我們也看到了各式各樣的劉海，然后才發(fā)現(xiàn)，其實(shí) iPhone X 的缺口設(shè)計(jì)竟然是看起來(lái)最順眼的了!

為了解答大家的這個(gè)疑問(wèn)，設(shè)計(jì)師 Brad Ellis 在博客上發(fā)表了一篇文章，詳細(xì)解釋了蘋(píng)果在 iPhone X 缺口設(shè)計(jì)上的特別之處。首先我們需要來(lái)看看實(shí)現(xiàn) Notch 屏幕(劉海、缺口屏)都有哪些方式，上圖(圖片源自網(wǎng)絡(luò)，侵刪)和下圖的這些 Notch 屏要說(shuō)制造難度、成本和 iPhone X 的屏幕其實(shí)沒(méi)什么區(qū)別，都是需要按照須先設(shè)定好的形狀切割而已，但是效果確是差了不少。

Ellis 表示，蘋(píng)果在設(shè)計(jì)過(guò)程中并沒(méi)有遵循常見(jiàn)的圓角矩形的曲線，也就是在一段直線之后直接接入一個(gè)正圓的圓形，而是用上了一個(gè)名為“方圓形”的曲線，它的坡度一開(kāi)始更“陡”，而后來(lái)變得越來(lái)越柔和。下方的兩張圖能夠清晰地解釋兩種設(shè)計(jì)方法的不同，簡(jiǎn)單來(lái)說(shuō)，蘋(píng)果這里用上了曲率連續(xù)的方法。

雖然很多人把蘋(píng)果的設(shè)計(jì)風(fēng)格成為“圓角矩形”，但是 Ellis 表示，其實(shí)蘋(píng)果多年來(lái)一直在 MacBook、iMac 電腦和 iOS 7 以后的系統(tǒng)中使用曲率連續(xù)這一招數(shù)，并且這一形狀其實(shí)比較難實(shí)現(xiàn)，因?yàn)樗^(guò)去在 CAD 這樣的 2D 編輯器中并不可用。

更加直接地為大家展示 iPhone X 的“劉海”，Ellis 又舉了個(gè)例子。當(dāng)我們需要將上下兩條平行直線通過(guò)兩個(gè)圓弧連接起來(lái)時(shí)，按理來(lái)說(shuō)總會(huì)有那么一下圓弧的切線會(huì)垂直于兩條平行直線的，對(duì)吧?但是蘋(píng)果的設(shè)計(jì)中，你卻發(fā)現(xiàn)這些切線竟然都不是垂直的!

對(duì)于蘋(píng)果在劉海設(shè)計(jì)上的獨(dú)具匠心，Ellis 表示這些決定看起來(lái)很小，但是在很多公司中，即使設(shè)計(jì)師愿意花些心思設(shè)計(jì)出一條美妙的曲線，公司也不一定會(huì)投入資源去讓它變?yōu)閷?shí)際產(chǎn)品。未來(lái)蘋(píng)果肯定會(huì)不斷改變 iPhone 劉海的曲線，直到完全實(shí)現(xiàn)100%的屏占比，而這其中的變化將很有趣。

當(dāng)然，Ellis 也表示，需要提醒各位設(shè)計(jì)師朋友們，在開(kāi)發(fā) iOS 產(chǎn)品的時(shí)候，一定要用蘋(píng)果官方的設(shè)計(jì)資源，你不知道他們?cè)谀膫€(gè)地方突然給你來(lái)了一條充滿奇思妙想的曲線。