iPhone X 發(fā)布后，很多設(shè)計(jì)師吐槽屏幕的形狀。當(dāng)大部分的吐槽逐漸平息下來(lái)，我依然沒(méi)看到關(guān)于屏幕轉(zhuǎn)角細(xì)節(jié)設(shè)計(jì)的討論。

你理解的轉(zhuǎn)角是什么樣的?

當(dāng)你開(kāi)始設(shè)計(jì)轉(zhuǎn)角的時(shí)候，毫無(wú)疑問(wèn)，一定是設(shè)計(jì)成簡(jiǎn)單的方形。因?yàn)榭梢酝ㄟ^(guò)機(jī)械校準(zhǔn)制造這些屏幕，所以能夠保證邊界的誤差很小。

每個(gè)人都知道如何制作出正確的轉(zhuǎn)角，設(shè)計(jì)師通過(guò)視覺(jué)繪制，工程師需要通過(guò)少量的計(jì)算，機(jī)器被設(shè)定好后就能清楚的按照設(shè)定程序進(jìn)行制作。

讓我們看看怪異的全直角是什么樣子的：

當(dāng)Apple公司知道他們要利用全屏技術(shù)，他們就有機(jī)會(huì)改變屏幕的形狀了，因?yàn)闊o(wú)論如何他們都需要解決制造過(guò)程中存在的問(wèn)題。想來(lái)，大部分的費(fèi)用應(yīng)該是花費(fèi)在了內(nèi)置更新上了。

當(dāng)然，這些屏幕設(shè)計(jì)還有一些丑陋的方案：

這個(gè)方案應(yīng)該是他們落地生產(chǎn)最好的方案：

屏幕的棱角

接下來(lái)是強(qiáng)迫癥慎入，iPhone X屏幕的圓角不是使用經(jīng)典的圓角方法：直線與圓的單個(gè)象限弧相切。

而是使用更復(fù)雜的方法：使用圓形，但是斜坡圓滑的更快些。使整體看起來(lái)溫柔很多。

為了能更好的看出差異，這里使用了gif：

△ 常規(guī)圓角和iPhoneX屏幕圓角的區(qū)別

Apple公司在平板和iMac上使用這樣的圓角已經(jīng)很多年，但是直到iOS7才應(yīng)用到iPhone上。這種形狀在傳統(tǒng)上難以實(shí)現(xiàn)，因?yàn)樗?D設(shè)計(jì)編輯器中是不可用的，不過(guò)這種情況正在改變。

關(guān)于缺口

接下來(lái)我們了解下屏幕的缺口部分，也就是我們常說(shuō)的「劉海」。左右兩邊有兩個(gè)圓角。由于曲線的衰減，一條曲線和另一條曲線可以無(wú)縫連接。

這種設(shè)計(jì)是沒(méi)有問(wèn)題的

我發(fā)現(xiàn)iPhoneX模板并沒(méi)有100%復(fù)制官方的形狀，可能是因?yàn)楹茈y制作或者他們沒(méi)有注意到。

這種設(shè)計(jì)的未來(lái)迭代肯定會(huì)改變這些尺寸，因?yàn)橛袀€(gè)很有趣的事情是內(nèi)置硬件的變化會(huì)影響外觀設(shè)計(jì)的變化。

當(dāng)然，這些變化看起來(lái)可能很小，但是從設(shè)計(jì)角度來(lái)看，他們相當(dāng)?shù)牧瞬黄鹆恕Ｒ驗(yàn)楹芏嘣O(shè)計(jì)即使設(shè)計(jì)師愿意推動(dòng)這些想法，大部分組織也不會(huì)投放太多的資源。

關(guān)于改變

我喜歡獨(dú)立應(yīng)用程序的一個(gè)原因是他們有堅(jiān)持己見(jiàn)的資本。比如很多公司（人數(shù)超過(guò)50人）產(chǎn)品外觀上有大型變化基本上是不可能的，但是Apple公司的設(shè)計(jì)就仍有能力進(jìn)行改變，這是一個(gè)很酷的行為。

數(shù)以千計(jì)的設(shè)計(jì)細(xì)節(jié)是Apple公司與其他公司區(qū)別開(kāi)的主要原因。能做到這一點(diǎn)真的很不容易，并且產(chǎn)品看起來(lái)真的很漂亮。

原文鏈接：《No Cutting Corners on the iPhone X》

原文作者：Maggie Mason

歡迎關(guān)注譯者的微信公眾號(hào)：「漁夫和Ta的靈魂」

「iPhone X 適配案例」

• 《騰訊設(shè)計(jì)師：極速適配 iPhone X 的技巧揭秘！》
• 《如何適配iPhone X？來(lái)看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤(pán)！》
• 《如何適配iPhone X？來(lái)看QQ 音樂(lè)這個(gè)實(shí)戰(zhàn)案例復(fù)盤(pán)總結(jié)》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com