自從iPhone X正式亮相以來，“齊六?！币恢北蝗罕姷膭?chuàng)造力所打破。作為一名專業(yè)設計師，我們當然必須從設計的角度分析設計?以下是由DUBEST（百度地圖服務）Eco-UE團隊）iPhone X設計指南翻譯：

iOS11標志著iPhone X的誕生，iPhone X是一款具有更高且?guī)缀鯖]有邊框的新一代iPhone。 5.8英寸的OLED屏幕比iPhone 8 Plus的5.5英寸屏幕大，但機身的尺寸與iPhone 8相同。對于設計師來說，這意味著更自由的設計空間。

更高的屏幕

如下圖所示，高145磅可能意味著添加一行內容，或添加我們認為太窄的菜單。雖然分辨率不同，但這部分的額外空間也適用于iPhone 8和8 Plus，因為它們的比例相同。

更多內容空間

如果與原始iPhone相比，iPhone X增加了332磅的高度，相當于7個導航欄的高度。未來在新iPhone上展示的內容看起來會更好，漢堡包菜單也會被削弱。

當我們將來自不同時代的兩部iPhone放在一起時，我們可以注意到內容空間幾乎翻了一番。通常，這意味著當前應用程序需要包括以下字段：狀態(tài)欄，導航欄，選項卡和用于訪問主屏幕的主頁指示器。消除這些列不僅會使用戶體驗變得更糟，而且還會使您的應用程序與本機iOS程序不一致。

“齊柳海“

也許最具爭議的新設計前10％是“齊六?！?。最初的深度感應攝像系統(tǒng)也被稱為凹槽（國內形象稱為“齊劉?！保?，它充當分割元素，使iPhone X的屏幕真正“從屏幕邊緣到手機邊緣” ”。從技術角度來看，由于面部ID，相機和耳機的集成，不可能移除凹槽。從設計的角度來看，這是近年來蘋果公司最大的妥協(xié)之一。然而，很難說在談到其他手機制造商如何解決這個問題時，他們沒有妥協(xié)，無論是“高額頭”還是“低下巴”或兩者兼而有之。

Apple不建議使用黑色狀態(tài)欄隱藏此凹槽。他們的理由是，盡管這個地方令人頭疼，但它仍然為狀態(tài)欄和其他內容提供了寶貴的空間。它使上下文內容連貫，同時讓人們對屏幕有更大的感受。當通過圓角和凹槽修剪時，諸如壁紙，地圖和顏色的背景元素不會受到很大影響。通過隱藏此空間，您的應用程序將感覺更小并且與其他應用程序不一致。

標題

在iOS 11中，屏幕標題通常為34pt（點），并且是粗體黑色字體。有趣的是，當您向上滑動屏幕時，標題會自動轉換為導航欄的位置，為我們提供寶貴的空間。在水平屏幕狀態(tài)下，只剩下導航欄的一小部分，這為設計人員提供了非常清晰的信息。首先，你應該更合理地利用這個額外的空間。其次，你需要讓你自己設計是自動適應的，因為它可能在垂直屏幕上有額外的空間，并且景觀模式中不存在空間。https://designcode.io/cloud/ios11/Design-LargeTitle.mp4

更大的狀態(tài)欄

狀態(tài)欄的高度從20pt增加到44pt，增加了一倍多。現(xiàn)在可以通過向下滑動左側狀態(tài)欄來喚醒通知欄，同時通過右側導航欄的滑動動作喚醒控制中心。當操作快速完成時，用戶只需輕掃屏幕的下邊緣即可輕松返回主屏幕。但是，如果要查看導航欄，則必須中斷滑動。https://designcode.io/cloud/ios11/iPhoneX-Gestures.mp4

安全區(qū)布局指南當我們?yōu)閕Phone X進行設計時，我們應該始終注意并盡量避免設計內容被圓角和凹槽裁剪的情況。我怎樣才能更好地避免這種情況？使用安全區(qū)域可以幫助您確保不裁剪內容。通常，背景的使用不受安全區(qū)域的限制，并且文本，圖像和按鈕需要在安全區(qū)域中設計。

橫向模式的iPhone X

在橫向模式中，隱藏狀態(tài)欄以最大化內容的空間。 iOS 11的導航欄減少到32pt，標簽欄為30pt，虛擬主頁按鈕為23pt。雖然在大多數情況下用戶不會在iPhone X上切換到橫向模式，但有一些更重要的使用場景使用橫向模式。例如，當我們查看水平照片，全屏視頻或閱讀帶有大文本的文章時，我們將使用水平屏幕模式。當用戶完成使用后，他將直觀地切換回肖像模式。然后，我們必須確保切換的內容可以正常顯示給用戶，尤其是當設備處于橫向時處于舒適的位置時。時間。

如果您的應用程序可以適應iPad，為什么不在iPhone上進行良好的橫向屏幕調整？大多數應用程序已開始采用響應式布局設計概念，以最大限度地降低成本。為了獲得最大的利益。

iPhon X橫屏狀態(tài)頁

如果您是產品設計師，則可能正在處理網頁。在橫向模式的iPhone X上，您的網頁左側和右側將有一個大的空白區(qū)域。這是因為安全區(qū)域會自動將內容部分的不良結果切除到安全區(qū)域之外。為了避免這種尷尬，Apple引入了一套規(guī)范來指導您的網頁在橫向模式下適合iPhone X.這基本上允許網頁在水平屏幕狀態(tài)下水平擴展背景以填充屏幕，同時確保在安全區(qū)域中完整顯示網頁內容。

圓角

在iPhoneX屏幕的四個角落也會出現(xiàn)剪輯內容。除非您隱藏狀態(tài)欄和底部的觸摸區(qū)域，否則您將不會遇到此問題，因為它們會覆蓋屏幕的四個角。但是，對于大多數全屏應用，例如相機，重要的是確保四個角中有足夠的空白。建議您將按鈕半徑設置為16pt，以完全遵循圓角規(guī)則。

在iOS模擬器上預覽您的應用

發(fā)布后，iPhone X可能會很快售罄，因此我們大多數人都無法立即使用它。手頭沒有設備，唯一的方法是通過iOS模擬器。您可以通過安裝Xcode來預覽您的應用和網站。

漢堡菜單的死亡

十年來，設計師一直在努力使內容適應原始的iPhone屏幕，許多設計師已經徹底消除了它，因為標簽欄占用了太多的屏幕空間。其他人相對富有創(chuàng)意，他們放了一個從左邊滑出的按鈕。這是原始的漢堡菜單。雖然起初它非常有趣，但它最終被發(fā)現(xiàn)是可用性的噩夢。因為在使用時，用戶需要更多點擊。這意味著將減少使用輔助標簽。人們常常忘記隱藏更多內容。

隨著屏幕變大，單手操作開始受到影響。 Apple甚至設計了一個雙擊主頁按鈕，可以向下滑動整個用戶界面手勢，以便手指可以到達導航欄。漢堡菜單通常放在屏幕的左上角，用戶需要額外雙擊才能進入菜單。這也使用戶更難以操作此菜單。隨著屏幕的延長，設計人員不再需要糾纏占用多少屏幕空間。所以現(xiàn)在設計將選擇使用標簽欄來替換漢堡菜單。對于iPhone X尤其如此，這意味著如果您的應用有兩個以上的部分，我們強烈建議您使用標簽欄，iOS11標簽欄占用的屏幕空間更少。

漢堡菜單在網頁設計中非常普遍，可以說手機上移動網頁的設計體驗不如基于手機的設計體驗。雖然一些適應手機的網頁目前使用原生控件，但這是一種很好的網頁設計方式，但在iOS設計中，特別是iPhone X，你仍然應該使用標簽欄而不是漢堡。菜單。https://designcode.io/cloud/ios11/iPhoneX-Hamburger.mp4

自適應布局和多任務處理

隨著越來越多的屏幕分辨率需要調整，調整頁面布局更有意義。使用Sketch的Constraints和Xcode的Auto Layout等工具，您需要在設計時保持靈活性，并且可以在需要時擴展額外的菜單。

堆棧視圖

在Xcode中，您還可以找到Stack Views，這是一個神奇的工具，可以幫助您的布局更加靈活。一些元素和組可以動態(tài)堆疊在一起，您只需要編輯元素之間的間距和框中的內容填充。然后您可以使用自動布局來完成剩下的工作。 Apple的建議是在使用自動布局之前使用堆棧視圖。

點（pt）和像素（px）

開發(fā)人員使用點值，因此了解點值和像素之間的差異非常重要。當iPhone首次推出時，兩個單元是相同的：1pt等于1px。然后，當視網膜的屏幕出現(xiàn)時，1pt變?yōu)?px。因此，將pt視為第一代iPhone中物理區(qū)域的標準尺寸，px是該物理區(qū)域中存在的實際像素的密度（iPhone 4,5,6,7,8=@ 2x，iPhone 8另外，iPhone X=@ 3x）。

iPhone解決方案

iPhone有五種主要分辨率：320x480 pt（iPhone 4），320x568 pt（iPhone 5），375x667 pt（iPhone 8），414x736 pt（iPhone 8 Plus）和375x812 pt（iPhone X）。布局未縮放，但可以根據屏幕的分辨率進行擴展。例如，導航欄僅調整寬度，但保持相同的高度，內部元素的大小保持不變。

iPhone 8 Plus是唯一一款更像橫向模式iPad的iPhone。換句話說，可能會出現(xiàn)左側導航而不是標簽欄。

« 案例|蒂芙尼，星巴克，杜蕾斯趣味圣誕節(jié)名人營銷 | 京東的訂單金額宣布：十天不如天貓的一天交易金額！ »