iPhone X已經(jīng)發(fā)售了一個(gè)星期，許多小伙伴已經(jīng)有了真正的機(jī)器。目前，iPhone X沒有申請。我相信他們正在加班加點(diǎn)調(diào)整。否則，效果真的很糟糕。 11月6日晚上8點(diǎn)30分，Statics還播放了iPhone X的實(shí)際操作以及UI設(shè)計(jì)師在SketchChina Live中需要注意的適應(yīng)點(diǎn)！但是，一些小伙伴可能看不到加班，沒關(guān)系，現(xiàn)場評論視頻靜態(tài)已被壓制上傳完成！可以看到郵票下面的地址。此外，一些小型合作伙伴可能無法觀看視頻版本。靜電還專門組織了本文中文本版的內(nèi)容。這是非常親密的嗎？

如果你不想觀看視頻的小朋友，那么適應(yīng)iPhone X的最快點(diǎn)即將到來。只要掌握了這些要點(diǎn)，公司的APP改編工作絕對不是問題。

如果您不想查看詳細(xì)分析，可以直接拉到最后查看靜電摘要。

分辨率對比

首先，我們來看看iPhone X和其他iPhone之間的比較，以便我們可以設(shè)計(jì)，看看屏幕密度，iPhone 6/7/8沒有邏輯分辨率，但Plus模型和iPhone X都有邏輯分辨率。 。請注意！

　機(jī)型實(shí)際大小對比

不要看iPhone X是一款5.8英寸的屏幕，但真正的感覺比Plus要小得多，而且只比iPhone 7大一點(diǎn)，一個(gè)人討厭像靜電這樣的大屏幕，沒有iPhone X的問題。我媽媽再也不用擔(dān)心在床上看手機(jī)時(shí)舔她的臉了！

　分辨率產(chǎn)生的設(shè)計(jì)差異

雖然我們似乎有很多iPhone X，但是沒有成長的145pt，差異仍然很大。 iPhone X的物理分辨率是1125X2436，那么雙重圖片是什么？ 375-812pt，那么看起來屏幕的寬度并沒有改變，所以設(shè)計(jì)師朋友們松了一口氣。適應(yīng)的成本和難度已經(jīng)大大降低。

但不要擔(dān)心，我們還沒有計(jì)算密度。密度是決定手機(jī)適應(yīng)難度的重要指標(biāo)。你還記得密度計(jì)算公式嗎？是的，這是以下，PPI（每英寸像素?cái)?shù)）是水平方+垂直平方然后生根。

我們看到，在邏輯分辨率下，iPhone X的屏幕密度大于Plus，分別為444和401，但真實(shí)密度，iPhone X小于Plus，分別為458和489。這時(shí)，我們可以從屏幕密度知道，實(shí)際上它們都是@ 3x，這是三位數(shù)的數(shù)字。因此，從加號到iPhone X，適應(yīng)的大部分成本將提供給工程師。

　設(shè)計(jì)師要做的-注意安全區(qū)域

如果需要在任何移動(dòng)電話上注意屏幕兩側(cè)的安全區(qū)域（即，在屏幕兩側(cè)留下適當(dāng)?shù)目瞻滓员苊庹`觸摸，您還可以確保視覺效果。特定的空白區(qū)域由你的設(shè)計(jì)草案，Apple和沒有具體的規(guī)定。）

所以在iPhone X上，我們還需要關(guān)注其他兩個(gè)重要的安全區(qū)域，即屏幕頂部和底部的兩個(gè)內(nèi)容：上半部分是“劉?！眳^(qū)域，只有一些系統(tǒng)狀態(tài)和其他內(nèi)容可以放置，劉海區(qū)域需要在設(shè)計(jì)草案中反映出來。然后屏幕的底部，許多設(shè)計(jì)師會忽略，是一個(gè)虛擬控制欄，它與主頁按鈕起作用，所以我們不能讓內(nèi)容與本文沖突，所以你會發(fā)現(xiàn)標(biāo)準(zhǔn)與應(yīng)用程序，屏幕底部留有很多空間。接下來，讓我們看一下現(xiàn)在已知的適用于世界的應(yīng)用程序，哪些是正確的，哪些是有問題的？

顯然，左邊的淘寶有點(diǎn)夸張。中間的微信很合適，最右邊的微信也沒有適應(yīng)。

另外，我們也可以在這個(gè)截圖中知道截圖不是劉海的樣子。

　安全區(qū)域的尺寸?

在雙圖設(shè)計(jì)模式中，上部狀態(tài)欄的高度為44pt，下部控制欄的高度至少為34pt。請注意，我說的是加倍設(shè)計(jì)模式，單位是pt而不是像素。有些學(xué)生可能會問，如何轉(zhuǎn)換為像素？畢竟，iPhone X是三重圖像，然后乘以3得到實(shí)際像素。

現(xiàn)在，大部分適應(yīng)工作已經(jīng)完成。實(shí)際上，我們只需要根據(jù)之前的設(shè)計(jì)草案進(jìn)行一些小的改動(dòng)。這很簡單嗎？

　設(shè)計(jì)師要做的-修改全屏圖片的大小

由于iPhone X長大，之前的全屏縮放圖像將在iPhone X上失真，如下圖所示，因此開發(fā)工程師可能會放大原始圖像以填滿整個(gè)屏幕，如果不是大的話，那么將出現(xiàn)下圖第一行中最右邊的數(shù)字的效果。上下都非常難看。在另一種情況下，您的圖片可能被壓扁，這是第二行圖片。

因此，設(shè)計(jì)人員應(yīng)根據(jù)iPhone X的分辨率設(shè)計(jì)一組圖片，用于啟動(dòng)界面，啟動(dòng)畫面圖像和一些全屏浮動(dòng)提示框。好吧，我們的工作量增加了。

　設(shè)計(jì)師要做的-注意色彩空間

iPhone X的顯示屏使用P3色彩空間。與傳統(tǒng)的sRGB色彩空間相比，顯示的色彩將更豐富，更逼真，因此設(shè)計(jì)師的老問題是“我為什么要在草圖中導(dǎo)出圖像””手機(jī)的顏色有所不同？答案就在這里。但是，靜電感覺我們無法解決這個(gè)問題。畢竟，顏色空間跟隨顯示介質(zhì)。例如，您的顯示器是一個(gè)色彩空間，而手機(jī)則是另一種類型。因此，忽略了這種不可見的色差。好的。

設(shè)計(jì)師必須做的事情 - 注意視頻的顯示方式。你肯定會在這里嘔吐這個(gè)大爆炸。畢竟，您可以覆蓋部分視頻內(nèi)容，但您也可以選擇縮小范圍。這也是一個(gè)好主意。不要放下任何東西。以下是Apple的建議。讓我們來看看。

什么？你說國王的殺蟲劑是什么樣的？來！看下面的圖片，但它不太合適。

設(shè)計(jì)師必須做什么 - 交互式改變iPhone X上的交互變化非常明顯，例如通過底部控制欄滑回桌面等等。您可以查看本文開頭的視頻顯示。每個(gè)人都會詳細(xì)介紹靜電。簡而言之，無論您是否擁有新手機(jī)，都必須盡快進(jìn)行調(diào)整。對于人臉識別等黑色技術(shù)，靜電體驗(yàn)感覺太好了！識別速度和指紋識別具有可比性，更加平滑。像靜電這樣的汗?jié)竦氖终娴氖且环N祝福。

不想看長文?那直接看總結(jié)!

1.務(wù)必注意iPhone X的安全區(qū)域，不要直接擴(kuò)展設(shè)計(jì)稿。

2.注意全屏圖像和視頻的改編

3.在雙圖下，您可以使用375-812px進(jìn)行設(shè)計(jì)。這與iPhone plus兼容。換句話說，三重圖像是主流嗎？

4.狀態(tài)欄區(qū)域高44pt，下控制欄區(qū)域至少高34pt（在雙圖的情況下）

5.注意交互方式變化的影響。

思考問題的小提示：請注意靜電分析的方法。當(dāng)您遇到新的東西時(shí)，例如新的手機(jī)，您可以從其分辨率和大小開始，然后計(jì)算其屏幕密度，這樣您就可以立即了解它的一些設(shè)計(jì)規(guī)則。是否與舊款不同。你對這個(gè)問題的思考方式至關(guān)重要。您應(yīng)該嘗試從這方面進(jìn)行分析，例如分析靜態(tài)文章，而不是僅僅想要最終結(jié)果。因?yàn)檫@個(gè)過程實(shí)際上非常重要，所以設(shè)計(jì)師也是如此。

« 從SP到游戲的過渡是什么？ | “新消費(fèi)”推動(dòng)品牌升級網(wǎng)易考拉用品品味定義生活方式 »