自從iPhone X正式亮相以來，“齊六海”一直被群眾的創(chuàng)造力所打破。作為一名專業(yè)設(shè)計師，我們當(dāng)然必須從設(shè)計的角度分析設(shè)計?以下是由DUBEST（百度地圖服務(wù)）Eco-UE團隊）iPhone X設(shè)計指南翻譯：

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

更高的屏幕

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

更多內(nèi)容空間

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

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

“齊柳?！?/p>

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

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

標(biāo)題

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

更大的狀態(tài)欄

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

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

橫向模式的iPhone X

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

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

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

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

圓角

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

在iOS模擬器上預(yù)覽您的應(yīng)用

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

漢堡菜單的死亡

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

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

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

自適應(yīng)布局和多任務(wù)處理

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

堆棧視圖

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

點（pt）和像素（px）

開發(fā)人員使用點值，因此了解點值和像素之間的差異非常重要。當(dāng)iPhone首次推出時，兩個單元是相同的：1pt等于1px。然后，當(dāng)視網(wǎng)膜的屏幕出現(xiàn)時，1pt變?yōu)?px。因此，將pt視為第一代iPhone中物理區(qū)域的標(biāo)準(zhǔn)尺寸，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）。布局未縮放，但可以根據(jù)屏幕的分辨率進(jìn)行擴展。例如，導(dǎo)航欄僅調(diào)整寬度，但保持相同的高度，內(nèi)部元素的大小保持不變。

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

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