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，免費體驗暢快的原型設計之旅。