iPhone X 響應式網頁設計

以下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。 

24小時前，蘋果公司推出了iPhone X。隨之而來的是一個新的白色線條，幸福地坐在底部的觸控板上，它替代了原有的home鍵。這也喚起了人們對物理home鍵的懷舊情結。

頂部的黑色凹槽採用了許多最先進的技術：紅外攝像頭、環境感應器、光感感測器等——所有這些都是用來支援面部識別的。

iPhone X 的頂部凹槽

這也意味著你從看視訊到玩遊戲，始終會在價值1000 $的手機頂部看到一個黑色凹槽 - 但隨著時間的推移，這可能會讓人賞心悅目。為了適應這一點，蘋果公司在硬體，軟體和iOS互動方面做了很多變化，Safari的網站呈現就是其中之一。

在iPhone X上的網頁呈現

橫屏

在橫屏模式下，iPhone X呈現的是帶有白色條紋的網頁。儘管很多部分都有不同的顏色背景，蘋果自己的官網也是由這些白色的線條呈現。

能讓你的頁面更有特色的唯一方法是給你的手機網頁設定一個合適的背景顏色——一個確保大多數情況下與你的品牌/網站的顏色方案一致的顏色。

body {

background-color:#676767;

}

然而，在同一頁上有不同背景顏色、漸變或圖案的部分，仍然會在兩邊顯示選中的正文背景顏色。

豎屏

當手機在豎屏時(這也是人們最常用的方式)，當視窗貫穿所有的邊緣時，兩邊都沒有白色線條。

在豎屏模式下，iPhone X會在其周圍滲透至整個螢幕。它是浸入式的，這樣，視窗可以無縫地貫穿四邊的圓角。

此外，狀態和URL /導航條會佔用網頁的自定義背景顏色。

這類似於Android上的Chrome，呈現主題顏色的元標籤，在整個狀態列中佔據網頁的主色。

<meta name="theme-color" content="#676767">

縱向方向開啟了推動品牌顏色發展的新天地，並且進一步的縮小了漸進式網路應用程式和本地應用程式之間的差距。另一方面，Safari上的橫屏網頁呈現與縱向有些關聯。隨著時間的推移，我們看看它是如何演變的也是一件有趣的事。

iPhone X的最佳頁面——https://thepeachstudio.com/iphone-x

圍繞新的設計指南-凹槽設計，蘋果公司強調iOS開發人員不會隱藏裝置的圓角，或者在他們的應用程式凹槽周圍新增黑塊。

 

原文作者：Krishna Murari 

原文連結：https://medium.com/peachstudio/designing-responsive-webpages-for-the-iphone-x-c3fc55732409

 Mockplus做原型，更快更簡單，現在下載Mockplus，免費體驗暢快的原型設計之旅。