"齊劉海兒"擋畫面?蘋果:開發(fā)者你們調(diào)整界面適配

(原標(biāo)題:蘋果要求開發(fā)者調(diào)整界面,適應(yīng)iPhone X那塊形狀獨(dú)特的屏幕)

周韶宏

iPhone X被庫(kù)克描述成“未來(lái)的手機(jī)”,不過對(duì)許多應(yīng)用開發(fā)者來(lái)說,迎接這個(gè)“未來(lái)”的第一步是修改應(yīng)用。

為了實(shí)現(xiàn)正面的“全面屏”而又不缺失關(guān)鍵組件,iPhone X頂部有一條1/2屏幕寬度的黑色窄條,依次排列著放著:紅外攝像頭、泛光燈、距離傳感器、環(huán)境光傳感器、聽筒、麥克風(fēng)、正面攝像頭和光點(diǎn)投射器。

再加上顯示區(qū)域的圓角設(shè)計(jì),整塊屏幕不再是長(zhǎng)方形,而是種一個(gè)詭異的異形。按照庫(kù)克在發(fā)布會(huì)上的演示,iPhone X頂部的兩端會(huì)顯示時(shí)間、電量和信號(hào)格。運(yùn)營(yíng)商的名稱也不見了,需要滑動(dòng)時(shí)間才能看到。

可能你平時(shí)不怎么在意屏幕最上方會(huì)顯示什么,但缺了一個(gè)口子之后,應(yīng)用開發(fā)者需要做一些界面調(diào)整的工作。

蘋果在發(fā)布會(huì)后更新了UIkit和XCode開發(fā)工具,以及新的人機(jī)界面指南(Human Interface Guidelines),還發(fā)布了一個(gè)“為iPhone X搭建應(yīng)用”的頁(yè)面,用視頻向開發(fā)者介紹怎么對(duì)應(yīng)用做iPhone X優(yōu)化。

指南文件描述到,iPhone X的屏幕比4.7寸的iPhone 7高了145個(gè)像素,使得屏幕顯示區(qū)域增加20%,被“額頭”分割成左右兩塊的屏幕區(qū)域,也會(huì)跟隨應(yīng)用顯示內(nèi)容。

大部分情況下,豎屏顯示都不會(huì)出現(xiàn)太大問題,應(yīng)用頂端會(huì)顯示狀態(tài)欄也就是放著時(shí)間和信號(hào)格的橫幅,但橫屏情況下的“額頭”會(huì)影響顯示區(qū)域。

蘋果給出的視頻展示了蘋果認(rèn)為“理想情況下”適配iPhone X的應(yīng)用應(yīng)該怎樣設(shè)計(jì);镜乃悸肥,調(diào)整排版讓關(guān)鍵信息不在頂部以及圓角處顯示,也不能被底部用于返回主界面的Dock窄條影響。

比如用Safari瀏覽網(wǎng)頁(yè)的時(shí)候,界面雖然填充至整個(gè)異形屏幕,但左右兩邊都需要留有空白,文字的排版集中在中間位置。

聯(lián)系人應(yīng)用也是一樣,當(dāng)你橫屏滑動(dòng)列表的時(shí)候,應(yīng)用開發(fā)者要確保文字不會(huì)頂?shù)健邦~頭”的位置。

不過好像有一些情況還是不能解決,比如全屏播放視頻和圖片,畫面鋪開在整個(gè)屏幕上,但“額頭”的區(qū)域永遠(yuǎn)缺了一大塊。

對(duì)開發(fā)者來(lái)說,倘若原本的設(shè)計(jì)利用到了屏幕邊邊角角的位置,那么現(xiàn)在需要調(diào)整整個(gè)界面的排版。

有不少應(yīng)用為了產(chǎn)生“沉浸感”的體驗(yàn),會(huì)在某些情況下隱藏頂部狀態(tài)欄。很多閱讀類應(yīng)用都利用這種方式盡量讓一頁(yè)展示更多的文字。

但現(xiàn)在他們要改一改設(shè)計(jì)了,蘋果在界面指南中直接說“如果你的應(yīng)用目前隱藏狀態(tài)欄,重新考慮這個(gè)決定在iPhone X上的樣子!

蘋果給出的全屏顯示下、各個(gè)機(jī)型顯示效果的示意圖

這些調(diào)整讓開發(fā)者開心不起來(lái)。Twitter賬號(hào)為 @Marcel Wichmann的界面交互設(shè)計(jì)師在看了視頻之后說:“這種情況下的主要問題不是缺口本身,而是根本沒有應(yīng)用能夠做到充分利用(這塊異形屏幕)。”

對(duì)用戶來(lái)說可能也是如此,盡管蘋果提供了解決方案要求開發(fā)者做優(yōu)化,但無(wú)論如果你的屏幕都缺了一塊東西,怎么看左右都不對(duì)稱。

蘋果有數(shù)量龐大的開發(fā)者數(shù)量,今年WWDC公布的數(shù)字是迄今App Store已經(jīng)有超過1800億次下載,分給開發(fā)者的錢有700億美元。

所以每一個(gè)細(xì)微的變動(dòng)都可能需要龐大的工作量來(lái)推動(dòng)開發(fā)者修改。理論上蘋果應(yīng)該給出一個(gè)解決方案,讓應(yīng)用開發(fā)者不做任何改動(dòng)就能適應(yīng)新的形狀。如果開發(fā)者想要利用那部分區(qū)域,再調(diào)整自己的應(yīng)用,而不是反過來(lái)。

但現(xiàn)在來(lái)看,這些復(fù)雜的事情要開發(fā)者自己去做了。

題圖來(lái)自現(xiàn)場(chǎng)拍攝


微信掃描分享本文到朋友圈
掃碼關(guān)注5G通信官方公眾號(hào),免費(fèi)領(lǐng)取以下5G精品資料
  • 1、回復(fù)“YD5GAI”免費(fèi)領(lǐng)取《中國(guó)移動(dòng):5G網(wǎng)絡(luò)AI應(yīng)用典型場(chǎng)景技術(shù)解決方案白皮書
  • 2、回復(fù)“5G6G”免費(fèi)領(lǐng)取《5G_6G毫米波測(cè)試技術(shù)白皮書-2022_03-21
  • 3、回復(fù)“YD6G”免費(fèi)領(lǐng)取《中國(guó)移動(dòng):6G至簡(jiǎn)無(wú)線接入網(wǎng)白皮書
  • 4、回復(fù)“LTBPS”免費(fèi)領(lǐng)取《《中國(guó)聯(lián)通5G終端白皮書》
  • 5、回復(fù)“ZGDX”免費(fèi)領(lǐng)取《中國(guó)電信5GNTN技術(shù)白皮書
  • 6、回復(fù)“TXSB”免費(fèi)領(lǐng)取《通信設(shè)備安裝工程施工工藝圖解
  • 7、回復(fù)“YDSL”免費(fèi)領(lǐng)取《中國(guó)移動(dòng)算力并網(wǎng)白皮書
  • 8、回復(fù)“5GX3”免費(fèi)領(lǐng)取《R1623501-g605G的系統(tǒng)架構(gòu)1
  • 本周熱點(diǎn)本月熱點(diǎn)

     

      最熱通信招聘

      最新招聘信息

    最新論壇貼子