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

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

1. 屏幕信息概覽

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

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

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

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

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

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

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

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

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

3. 布局影響

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

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

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

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

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

4. 手勢(shì)

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

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

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

5. ARKit

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

谷歌翻譯，方便的取景實(shí)時(shí)翻譯。

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

6. 工作流程建議

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

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

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


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