這篇分析iPhone X 轉(zhuǎn)角細(xì)節(jié)設(shè)計的文章，收獲了15000+個贊

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

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

當(dāng)你開始設(shè)計轉(zhuǎn)角的時候，毫無疑問，一定是設(shè)計成簡單的方形。因為可以通過機械校準(zhǔn)制造這些屏幕，所以能夠保證邊界的誤差很小。

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

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

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

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

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

屏幕的棱角

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

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

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

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

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

關(guān)于缺口

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

這種設(shè)計是沒有問題的

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

這種設(shè)計的未來迭代肯定會改變這些尺寸，因為有個很有趣的事情是內(nèi)置硬件的變化會影響外觀設(shè)計的變化。

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

關(guān)于改變

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

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

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

原文作者：Maggie Mason

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

「iPhone X 適配案例」

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

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

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

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