UI 大難題!面對礙眼的 iPhone X「瀏海」,各地開發者顯神通

評論
評論

原文《面對 iPhone X 瀏海現實,看看全世界的開發者怎麼適配》刊登於 PingWest,作者 curator,INSIDE 獲授權轉載。

台灣時間 9 月 12 日凌晨,蘋果在賈伯斯劇院發表了 iPhone X,主打滿版螢幕的 iPhone X 取消了 Touch ID,代之以 Face ID。

為了實現更為安全的臉部辨識,iPhone X 正面的滿版螢幕上方有一條瀏海,上面整合了紅外線(深度)鏡頭、近距離感應器、泛光感應元件、環境光感應器、左 / 上揚聲器、麥克風、前鏡頭和一個名為點狀投影器 (Dot projector) 的元件。它會投影 30000 多個肉眼不可見的光點在你臉上,對你的臉繪製一幅三維的深度「臉譜圖」,然後和系統記錄的臉譜圖進行比對。

對於開發這來說,這些都不重要!!重要的是:

▲王者榮耀遊戲畫面合成圖

這個螢幕上的瀏海究竟要怎麼支援呀!

哦,不過這篇文章並不是為了吐槽這個點的。畢竟再怎麼吐槽,再過一個多月 iPhone X 就要出貨了,不管怎樣最終還是要面對現實。

經過了一段時間的沈澱,全世界的開發者們似乎已經找到了幾種處理 iPhone X 瀏海滿版螢幕的方法。

首先是縱向的問題:

縱向主要是頂部的導航欄、狀態欄和底部 TabBar 的問題。

iPhone X 開發尺寸與 iPhone 8 的寬度一致,在垂直方向上多了 145 pt,這就意味著多出 20% 的垂直空間, APP 可以展示更多的內容。

但是多出來的 145 pt 並不是方方正正的矩形,而是被瀏海切割成了異形區域。

於是就有人嘗試,既然蘋果沒有把瀏海做齊,那透過軟體把瀏海兩側的空白填上不就可以了嘛。

這樣是不是就順眼多了?「Ears」的名稱也很貼切吧。

然而蘋果的「Human Interface Guidelines」明確禁止了這種做法。

蘋果規定:注意內容不要被裁切,建議內容為居中對稱已不被圓角或感應器等遮擋,也建議使用系統提供的的元素以及自動佈局來構建頁面獲得更好的支援效果。注意 StatusBar 的高度,iPhone X 的狀態欄高度會更高,如果有開發者對 NavgationBar 的位置是透過固定值進行位置的定位,建議升級 App。

而且如果 App 是隱藏 StatusBar 的,蘋果建議開發者重新考慮,iPhone X 為用戶在垂直空間上提供了更多展示空間,且狀態欄中也包含了用戶需要知道的資訊,除非能透過隱藏狀態欄帶給用戶額外的價值,否則蘋果建議將狀態欄還給用戶。

蘋果給出了 iPhone X 設計佈局的安全區意見是這樣的:

也就是說,開發者還要保證設計佈局能夠填充整個螢幕,而核心內容又不能被裝置的大圓角、感應器 (齊瀏海)、以及底部的 Home Indicator 遮擋。

如果沒有支援 iPhone X,就會變成這樣:

圖片來源:奇點開發者 @圖拉鼎(注:新版奇點已適配。)

另一款成功設計的 App 效果圖是這樣的:

來源:四葉新媒體聯合創始人微博 @Saic

當然,比起縱向的問題,橫向的問題更大。

首先是蘋果 iOS 內建的 Safari 在橫螢幕狀態下網頁兩側會填充一定的空白,就變成了這樣:

與對應,蘋果給出的橫螢幕狀態下的安全區域是這樣的:

好吧,既然要載入空白區域,那捲動的時候捲軸該怎麼「優雅」的穿過瀏海?
蘋果的 Safari 捲軸在橫螢幕狀態下穿過瀏海的時候難道就變成貪食蛇了?

還有這樣的:

當然,這些都是蘋果不允許的。

還有開發者把彈出功能鍵放在了瀏海那一側,由於也是黑色的背景,看起來更有一體感了:

Photo credit: 0therPlanet on Twitter

而橫螢幕打遊戲的時候,操作界面被瀏海遮擋。所以操作功能鍵需要放在蘋果建議的安全區域,其他的背景圖用來填充空白。

也就是說,按照蘋果的開發指南,無論橫螢幕還是直立螢幕,要支援 iPhone X 這樣有瀏海的螢幕,除了審美感需(被)要(迫)提(適)高(應),App 重要的功能鍵、TabBar 等需要放在蘋果建議的安全區域內,其他的地方用 App 背景頁或者狀態欄填充。

而如果想把男女朋友的照片設為鎖定螢幕桌布的話,需要找一張人物稍微「居中」或者「居下」的照片(拍照的時候人物主體在畫面下方),否則就會變成了這樣:

還有些需要我們的審美去適應(無解)的情況,尤其是全螢幕模式下瀏覽照片、看影片以及 Safari 閱讀模式。

比如這樣的:

圖片:微博 @Jonny

iPhone X 瀏海裡的 Face ID 雖然很強大,但是這樣的異形螢幕真是難為開發者和使用者了。

哦,對了關於開頭那個王者榮耀的吐槽,根據中國遊戲社群中關村在線,騰訊官方的應對方法是這樣的:

延伸閱讀:


精選熱門好工作

產品專員 Product Associate

SHOPLINE 商線科技有限公司
臺北市.台灣

獎勵 NT$20,000

Partnership Manager

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$20,000

Campaign Associate 線上活動策劃專員

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$20,000

評論