UI大牛告訴你最新的Phone10設(shè)計規(guī)范

iphone取消了 home 鍵后上滑回桌面的交互方式、「全面屏」帶來的布局影響等等，可能令你有很多擔(dān)心和疑惑。沒關(guān)系，我在這為大家梳理了這次的設(shè)計改動和諸多注意事項，以及我對之后 iOS GUI 設(shè)計流程的一些看法。希望對大家有所幫助~

1. 屏幕信息概覽

圖左為 iPhone 6 / iPhone 7 / iPhone 8 的尺寸，圖右為 iPhone X?？梢钥吹较啾?iPhone 8，iPhone X 寬度依舊保持 375pt，在高度上則增加了 145pt，實際像素則為 1125px × 2436px（375pt × 812pt @3x）。所以不用擔(dān)心切圖，iPhone X 依舊使用 @3x 切圖。（很多朋友不知道，但是值得一提的是，蘋果官方對于單色圖標(biāo)圖形的切圖建議是提供一套 @2x 的 PDF 切圖，它就能良好地適應(yīng)各種尺寸的屏幕。）

2. 對于StatusBar 的設(shè)計

在新的系統(tǒng)控件層面，最大的槽點莫過于新的 status bar 的設(shè)計（如上圖左側(cè)）。因此有熱心的網(wǎng)友設(shè)計了另一種方案來遮蔽 “劉海” 的丑（如上圖右側(cè)）。

但到底怎么評價蘋果的這個設(shè)計呢？首先，我一直主張 GUI不能被當(dāng)做單純的靜態(tài)圖像設(shè)計來看待。軟件 UI 最重要的是放在真實機(jī)器上，供人真實使用，方可判斷其好壞。單說視覺感受，蘋果的方案絕對丑，那是真的丑。但當(dāng)我們拿起手機(jī)，真正操作起來，這個丑是否還那么突出？是否會間接影響我們的判斷甚至效率？這個問題目前是無法給出答案的。因此要如何客觀評價這個設(shè)計，還是得摸到機(jī)器后再議。

但值得一提的是蘋果的設(shè)計師顯然思考過過右側(cè)的設(shè)計方案，并且給出了官方的否定票（如下圖）。

官方的解釋很簡單：在頂部或底部加入黑色的 bar，會令你的 app 看上去更狹小，并且看上去與 iPhone X 上的其他 app 不統(tǒng)一。

問題確實是真實存在的，尤其上圖非常明顯能顯示這點。但官方指導(dǎo)只是一方面，具體我還是堅持上文所述，看最終到手效果。畢竟規(guī)范……就是用來打破的

另外值得一提的就是 status bar 比以往高了不少。其高度并非對齊 “劉海” 底部，而是如圖所示。

且當(dāng)有 app 后臺活動時如打電話、導(dǎo)航，也將不再改變 status bar 的高度，如圖所示。另外，官方也提醒 app 慎重去除 status bar，畢竟已經(jīng)有了那么高的垂直空間。

3. 布局影響

蘋果在這次 guidelines 中提出了safe area的概念。在 iPhone X 上，它代表除去頂部 status bar 和底部 34pt 的 home indicator。如上圖所示綠色區(qū)域。

在設(shè)計 iPhone X 時，你必須確保內(nèi)容填滿屏幕，并且不會被設(shè)備的圓角、前置攝像頭、home indicator 遮擋住。

iPhone 8 對比 iPhone X 布局示例。如果你的 app 開發(fā)時使用標(biāo)準(zhǔn)系統(tǒng)提供的 UI 控件，如導(dǎo)航欄、標(biāo)簽欄等，那么它們會自動適配到合適的尺寸。

界面元素與邊框之間留有 marigns，我觀察 UIKit 上的數(shù)值應(yīng)該是 16pt。

關(guān)于自動布局的開發(fā)文檔在開發(fā)者中心 Documentation > UIKit > View Management > Auto Layout 目錄下，有需要的朋友可以另外了解下。

4. 手勢

底部有 3 個操作：上滑直接進(jìn)入桌面（如上圖）；上滑并停留可進(jìn)入多任務(wù)處理切換 app；另外還有在底部左右滑動快速切換前一個或后一個 app。

當(dāng)然由于這樣的設(shè)計，蘋果對于全屏模式下的 app 也變成了上滑直接退出 app 返回桌面。但是他們也提供給開發(fā)者另一個方式，可以令用戶第一次上滑拉出底部的 home indicator，第二次上滑才退出 app（如上圖）。這種情況非常少，所以除非你認(rèn)為你的 app 超級有必要，否則不建議使用這樣的設(shè)計。甚至我估計可能會在提交審核時會被打回。

當(dāng)然了，控制中心變成在頂部 “劉海” 右側(cè)下拉；通知中心在中間或左側(cè)下拉。

5. ARKit

ARKit 隨著 iOS 11 一起到來。我認(rèn)為現(xiàn)階段為 AR 設(shè)計，大家不要想著去顛覆什么東西，而去思考如何在現(xiàn)有的諸多需求場景下，結(jié)合現(xiàn)實做得更好。

谷歌翻譯，方便的取景實時翻譯。

發(fā)布會上登場的 Sky Guide，可以查看空中的恒星和星座。

6. 工作流程建議

可以繼續(xù)以 iPhone 8 的尺寸為標(biāo)準(zhǔn)，也可以以新 iPhone X 尺寸為標(biāo)準(zhǔn)進(jìn)行設(shè)計，與開發(fā)團(tuán)隊共同確認(rèn)后即可。

畢竟之后這 1 年這款新尺寸手機(jī)市場覆蓋率并不會太高，因此在實際工作中，確保 iPhone 8 與 iPhone 8 Plus 尺寸下的完美顯示更為重要。但其實對開發(fā)而言，只要大家制定好了頁面自動布局方案后，哪個尺寸并不緊要。設(shè)計師們喜歡用最新的設(shè)計、mock-up，很多時候只是為了做好看的效果圖罷了。

開發(fā)后確認(rèn)各尺寸下的運行情況，尤其是 iPhone X。畢竟與以往 iPhone 有較大差異，真機(jī)測試必不可少。對界面而言，可以特別關(guān)注上文提到的布局、按鈕和內(nèi)容顯示的問題。（當(dāng)然還要等到真機(jī)到手才可具體測試，在此就不空話太多。）


相關(guān)文章推薦《從產(chǎn)品經(jīng)理到CEO，我的經(jīng)歷你可以復(fù)制》