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

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

更高的屏幕

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

更多內(nèi)容空間

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

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

“齊柳?！?/p>

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

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

標(biāo)題

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

更大的狀態(tài)欄

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

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

橫向模式的iPhone X

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

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

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

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

圓角

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

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

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

漢堡菜單的死亡

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

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

漢堡菜單在網(wǎng)頁設(shè)計(jì)中非常普遍，可以說手機(jī)上移動(dòng)網(wǎng)頁的設(shè)計(jì)體驗(yàn)不如基于手機(jī)的設(shè)計(jì)體驗(yàn)。雖然一些適應(yīng)手機(jī)的網(wǎng)頁目前使用原生控件，但這是一種很好的網(wǎng)頁設(shè)計(jì)方式，但在iOS設(shè)計(jì)中，特別是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è)計(jì)時(shí)保持靈活性，并且可以在需要時(shí)擴(kuò)展額外的菜單。

堆棧視圖

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

點(diǎn)（pt）和像素（px）

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

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

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