過(guò)去不久的11月，不知道有多少小伙伴已經(jīng)成功入坑蘋(píng)果公司的新一代腎機(jī)iPhoneX了呢，作為蘋(píng)果近幾年來(lái)的突破之作，其外觀及屏幕的變化也是讓我們UED的設(shè)計(jì)師們虎軀為之一震。
本著全心全意為用戶(hù)服務(wù)的心情（其實(shí)我們知道途牛用戶(hù)都是土豪✧(•̫̀•́），UED團(tuán)隊(duì)的小伙伴們?cè)缭趇Phone X發(fā)售前就針對(duì)其操作特性進(jìn)行了界面適配，來(lái)保障全面屏用戶(hù)寶寶們的操作體驗(yàn)。
適配開(kāi)始之前，我們首先需要了解iPhoneX新版系統(tǒng)中對(duì)于設(shè)計(jì)師界面設(shè)計(jì)的影響（有興趣的小伙伴可以去蘋(píng)果官網(wǎng)參閱官方的設(shè)計(jì)指南進(jìn)行學(xué)習(xí)developer.apple.com）。以下僅將我們這次途牛APP適配中涉及到的幾個(gè)要點(diǎn)進(jìn)行簡(jiǎn)單的回顧。
✧ 屏幕尺寸切圖變化1、屏幕尺寸對(duì)于習(xí)慣用375×667尺寸作圖的設(shè)計(jì)師而言，iPhoneX的到來(lái)并不會(huì)帶來(lái)太大影響。在移除了主鍵和邊框后，iPhoneX與蘋(píng)果上一代相比增加了145pt的設(shè)計(jì)面積。
2、 切圖而由于屏幕分辨率的升級(jí)，iPhoneX的切圖需要使用跟Plus一樣的@3x大小來(lái)保證視覺(jué)元素在屏幕中的完美呈現(xiàn)。
✧ 安全區(qū)概念的引入原有蘋(píng)果機(jī)型中，安全區(qū)默認(rèn)代表除了狀態(tài)欄以外的屏幕范圍，而隨著iPhoneX頂部劉海和底部Home indicator的出現(xiàn)，是的現(xiàn)今iPhoneX的安全域特指距上44pt，距下34pt的屏幕區(qū)域
對(duì)于途牛新上線直播項(xiàng)目中，橫屏狀態(tài)下的安全區(qū)域需要在左右留邊的基礎(chǔ)上，將Home indicator的位置置于屏幕下方居中放置。對(duì)于此種安排，蘋(píng)果給出的官方解釋是，由于無(wú)法預(yù)測(cè)用戶(hù)在橫向持握下會(huì)把「劉海」放在左邊還是右邊，如果安全區(qū)不是橫向居中放置的，會(huì)造成界面中元素與手機(jī)邊緣的相對(duì)位置不固定。他們認(rèn)為，用戶(hù)在使用手機(jī)時(shí)（尤其是玩游戲的時(shí)候）高度依賴(lài)手部的肌肉記憶，不對(duì)稱(chēng)的設(shè)計(jì)盡管空間利用率更高，但與用戶(hù)的肌肉記憶相背，由此導(dǎo)致的失敗操作容易讓用戶(hù)沮喪。
因此，對(duì)于需要在界面四周布置操作按鈕的直播橫屏界面需要特別注意在橫屏狀態(tài)下操作按鈕的安全區(qū)域的適配。
✧ Home indicator1、背景配置置于屏幕最底部的Home indicator集成了原有Home退出切換系統(tǒng)應(yīng)用的功能，適配過(guò)程中添加方法可以控制此區(qū)域內(nèi)背景的顏色/透明度/高度/出現(xiàn)與否。
2、虛擬Home條屬性Home indicator區(qū)域中的虛擬Home條目前僅支持黑白兩色。不過(guò)這塊區(qū)域也有一個(gè)鮮為人知的功能，開(kāi)發(fā)可以設(shè)定隱藏虛擬Home條，讓它在固定秒數(shù)后消失且消失不影響系統(tǒng)級(jí)操作（目前此功能僅淘寶iPhoneX部分頁(yè)面中出現(xiàn)）
3、觸碰區(qū)域在此區(qū)域內(nèi)的操作會(huì)優(yōu)先響應(yīng)系統(tǒng)級(jí)的操作功能，真機(jī)測(cè)試中發(fā)現(xiàn)虛擬Home條的有效觸發(fā)區(qū)域其實(shí)略低于官方大大說(shuō)明的34pt，因而即使頁(yè)面底部的操作內(nèi)容與Home indicator有所重疊，用戶(hù)依舊可以進(jìn)行點(diǎn)擊操作，只是需要避免放置重要操作功能和功能文字的遮擋問(wèn)題，畢竟官方還是推薦大家在有操作的情況留足34pt高度的。
✧全屏適配由于iPhoneX整體高度增加，導(dǎo)致原有的全屏展示畫(huà)面（如閃屏活動(dòng)頁(yè)）無(wú)法兼容增高后的屏幕尺寸，裁切/留白的視覺(jué)效果都會(huì)影響用戶(hù)的視覺(jué)體驗(yàn)，因此設(shè)計(jì)師們需要有針對(duì)性地為這些頁(yè)面單獨(dú)進(jìn)行IPhoneX尺寸的比例設(shè)計(jì)。
得益于今年開(kāi)始在全站推廣的組件化設(shè)計(jì)系統(tǒng)，在適配開(kāi)始后我們很快地根據(jù)組件系統(tǒng)中的幾個(gè)模塊進(jìn)行了有針對(duì)性的適配方案規(guī)則設(shè)定。
✧ 頂部元素1、頂部Bar調(diào)整原有頂部組件統(tǒng)一吸附于距上44pt的狀態(tài)欄下方，狀態(tài)欄處背景色吸取頂部Bar背景色保持一致。
2、頂部帶漸變/帶畫(huà)面元素Bar當(dāng)狀態(tài)欄無(wú)法吸取頂部Bar的背景色或圖片適配變形時(shí)，設(shè)計(jì)師主要有以下兩種方法進(jìn)行適配：
① 使用兩張切圖適配，根據(jù)頁(yè)面效果提供向上加高24pt的背景圖片進(jìn)行替換
這種適配方法呈現(xiàn)效果最佳，但是會(huì)使得我們的APP包文件量過(guò)大，客觀上不適合作為途牛適配的標(biāo)準(zhǔn)
② 使用一張切圖適配，通過(guò)縮放來(lái)完成頁(yè)面的適配
這種適配方法無(wú)論是向上適配還是向下適配都會(huì)產(chǎn)生頁(yè)面的裁切與留白，對(duì)于會(huì)員中心這種支持自定義個(gè)性化皮膚替換的業(yè)務(wù)場(chǎng)景，容易丟失畫(huà)面關(guān)鍵內(nèi)容的露出或遮擋，可控性較弱。
而向下適配中僅裁切頂部的方案需要設(shè)計(jì)師將畫(huà)面元素至于偏下的位置來(lái)保證適配小屏?xí)r的畫(huà)面效果，這種方式是使用一張切圖適配時(shí)較好的方案，但是鑒于技術(shù)問(wèn)題，我們暫時(shí)也無(wú)法實(shí)現(xiàn)此種裁切方式。
③ 使用一張切圖適配，統(tǒng)一4.7寸屏與iPhoneX屏幕中頭部的高度
作為最終應(yīng)用于會(huì)員中心的適配方案，這種適配方式雖然使得iPhoneX上的背景高度沒(méi)有做到等比例的縮放，但是保證了大小屏雙端的基本視覺(jué)呈現(xiàn)，是在視覺(jué)效果和開(kāi)發(fā)成本中最為折中的適配方式。
3、透底背景圖調(diào)整原有頂部組件庫(kù)中透底Bar的位置吸附于距上44pt的狀態(tài)欄下方，圖片根據(jù)頁(yè)面模塊高度進(jìn)行等比例拉伸
4、透底運(yùn)營(yíng)位通欄的運(yùn)營(yíng)廣告圖片常見(jiàn)于機(jī)票、酒店等品類(lèi)頻道首頁(yè)，其適配方式前面第二點(diǎn)的方式類(lèi)似，只能采用一張切圖的適配方法，因此用保持廣告圖高度來(lái)進(jìn)行適配。
不同的是此類(lèi)頁(yè)面在iPhoneX中呈現(xiàn)使用單獨(dú)配置白色頂部Bar的方案進(jìn)行適配，以保證運(yùn)營(yíng)banner中文本信息的正常露出，當(dāng)然后續(xù)我們也會(huì)持續(xù)探索針對(duì)此類(lèi)情況的更佳表現(xiàn)方式。
✧ 底部元素1、底部無(wú)操作設(shè)定Home indicaror背景色為透明，信息內(nèi)容撐滿(mǎn)屏幕展示
2、底部有操作2.1 底部Tab bar、篩選項(xiàng)、輸入框、底部浮出的半屏彈窗等
吸附于距下34pt的Home indicaror之上，Home indicaror背景色與底部Bar底色保持一致。
2.2 底部鄰近操作按鈕（如：返回頂部、旅圖頻道中的上傳照片等）
向下吸附于距下34pt的Home indicaror上方，距離Home indicaror的間距與原頁(yè)面間距保持一致。
2.3 底部為操作按鈕
以途牛為例，底部有操作按鈕的場(chǎng)景主要涉及詳情、訂單此類(lèi)與下單流程強(qiáng)相關(guān)的頁(yè)面之中，為了保證用戶(hù)整個(gè)下單鏈路的流暢及與iPhoneX機(jī)型的完美適配，針對(duì)此模塊，我們也進(jìn)行了一系列的探索與實(shí)踐。
本著頁(yè)面按鈕與iPhone X物理圓角兼容更和諧、更整體的初衷，我們最終選定底部為操作按鈕的適配規(guī)則為：保持4.7”屏樣式不變，修改iPhoneX中底部按鈕樣式為圓角，圓角弧度為4的方案。
✧ 全屏元素1、全屏彈窗調(diào)整文本內(nèi)容于安全區(qū)域內(nèi)，底部有操作按鈕的距下增加Home indicaror34高度，距Home indicaror間距與原頁(yè)面間距保持一致。
2、左右布局頁(yè)面當(dāng)頁(yè)面中右側(cè)交互內(nèi)容推出后，如果信息卡片和主屏幕指示條交錯(cuò)疊加，就會(huì)稍顯信息混亂，建議抽屜導(dǎo)航的寬度根據(jù)主屏幕指示條的位置進(jìn)行調(diào)整，完整露出或完全遮擋指示條。
3、全屏畫(huà)面（Splash、全屏活動(dòng)頁(yè)、全局缺省等）iPhoneX界面中增加的145pt增加了對(duì)于內(nèi)容文本的露出，但是當(dāng)面對(duì)如splash這類(lèi)的全局頁(yè)面是，增加的高度會(huì)使得全屏畫(huà)面的視覺(jué)中心上移，所以需要設(shè)計(jì)師們針對(duì)此類(lèi)問(wèn)題進(jìn)行新增iPhoneX尺寸/ 調(diào)整頁(yè)面元素間距來(lái)完成適配。
綜上的適配規(guī)則只需熟悉官方大大的基本限制結(jié)合業(yè)務(wù)調(diào)整后并沒(méi)有太大的難點(diǎn)，但是在規(guī)則設(shè)定完后如何發(fā)動(dòng)各個(gè)不同的事業(yè)部進(jìn)行規(guī)則周知？如何把控各個(gè)研發(fā)團(tuán)隊(duì)的開(kāi)發(fā)效果？如何提高人效完成適配工作？這些問(wèn)題成為了我們?cè)陧?xiàng)目落地過(guò)程中更為的痛點(diǎn)。
值得慶幸的是，在此之前，我們團(tuán)隊(duì)就針對(duì)頁(yè)面中的基礎(chǔ)模塊進(jìn)行了組件化系統(tǒng)的搭建及推廣，而以下的幾個(gè)特點(diǎn)也為此次iPhoneX適配的過(guò)程減少了不少麻煩。
1、自由組合、靈活兼容以頂部Bar組件為例，在制作頂部bar組件的過(guò)程中需要全面的考慮不同場(chǎng)景下各個(gè)元素組合的布局、樣式、響應(yīng)狀態(tài)、交互效果、兼容方案……而多個(gè)組件間也需要能靈活地組合來(lái)構(gòu)建不同的產(chǎn)品坑位和功能模塊。
當(dāng)組件開(kāi)發(fā)完成后，還需配置部分可定義元素來(lái)滿(mǎn)足不同業(yè)務(wù)線產(chǎn)品的需求，如頂部bar組件就支持背景色調(diào)整、顯示/隱藏分隔線、動(dòng)態(tài)圖片等功能。
2、打通語(yǔ)言，實(shí)現(xiàn)統(tǒng)一長(zhǎng)久以來(lái)，大部分互聯(lián)網(wǎng)公司的工作流程是界面設(shè)計(jì)師產(chǎn)出界面視覺(jué)稿，開(kāi)發(fā)工程師根據(jù)視覺(jué)稿編輯代碼，發(fā)布上線。介于兩者所展示語(yǔ)言的壁壘始終存在，每一次新頁(yè)面的上線都需要設(shè)計(jì)與開(kāi)發(fā)分別針對(duì)頁(yè)面元素各自編譯一次，對(duì)于一些重復(fù)性較高的頁(yè)面，其中人效的耗損可想而知。
而組件化系統(tǒng)最為關(guān)鍵的一點(diǎn)在于打通了與開(kāi)發(fā)之間語(yǔ)言，我們將界面中復(fù)用率較高的一些模塊按組件而非元素進(jìn)行開(kāi)發(fā)語(yǔ)言式的搭建，各業(yè)務(wù)線按需調(diào)取組件中的模塊進(jìn)行業(yè)務(wù)替換，真正實(shí)現(xiàn)了全站的統(tǒng)一。而后續(xù)任何針對(duì)該模塊的修改都可以通過(guò)組件自動(dòng)同步到各業(yè)務(wù)線中，大大減少了反復(fù)測(cè)試的成本。
3、單線協(xié)作，提高人效途牛現(xiàn)有的設(shè)計(jì)架構(gòu)中，每個(gè)設(shè)計(jì)師對(duì)應(yīng)各自的業(yè)務(wù)線，工作方式更偏向于多線并行，這種形式能讓設(shè)計(jì)師對(duì)自身業(yè)務(wù)更為深入地進(jìn)行設(shè)計(jì)，但從整體架構(gòu)層而言，在應(yīng)對(duì)大型視覺(jué)改版或模塊升級(jí)時(shí)，這種多線并行的工作方式需要在每次改版過(guò)程中調(diào)動(dòng)所有業(yè)務(wù)設(shè)計(jì)師參與，而最終的成果也難以把控。
而依托組件化系統(tǒng)按模塊而非頁(yè)面的搭建方式，使得在應(yīng)對(duì)模塊升級(jí)/調(diào)整的過(guò)程中，只需對(duì)接組件架構(gòu)組的設(shè)計(jì)師及開(kāi)發(fā)即可實(shí)現(xiàn)組件視覺(jué)代碼的升級(jí)，而前期業(yè)務(wù)調(diào)取的入口會(huì)自動(dòng)更新最新的修改，這種單線溝通的工作方式能有效的減少人效在重復(fù)性工作中的耗損，也能更有效的把控項(xiàng)目質(zhì)量。
寫(xiě)在最后雖然新事物的出現(xiàn)總會(huì)引起諸多質(zhì)疑，但是好的工具和工作方法始終能接受住時(shí)間的考驗(yàn)，幫助我們更好地開(kāi)展設(shè)計(jì)工作。雖然此次適配過(guò)程中仍有一些想法和細(xì)節(jié)沒(méi)有完美的落地，留下了些許遺憾，但也正是這些不完美促使我們對(duì)每一個(gè)下一次始終心潮澎湃，全力以赴！
途牛UED
本著全心全意為用戶(hù)服務(wù)的心情（其實(shí)我們知道途牛用戶(hù)都是土豪✧(•̫̀•́），UED團(tuán)隊(duì)的小伙伴們?cè)缭趇Phone X發(fā)售前就針對(duì)其操作特性進(jìn)行了界面適配，來(lái)保障全面屏用戶(hù)寶寶們的操作體驗(yàn)。
適配開(kāi)始之前，我們首先需要了解iPhoneX新版系統(tǒng)中對(duì)于設(shè)計(jì)師界面設(shè)計(jì)的影響（有興趣的小伙伴可以去蘋(píng)果官網(wǎng)參閱官方的設(shè)計(jì)指南進(jìn)行學(xué)習(xí)developer.apple.com）。以下僅將我們這次途牛APP適配中涉及到的幾個(gè)要點(diǎn)進(jìn)行簡(jiǎn)單的回顧。
✧ 屏幕尺寸切圖變化1、屏幕尺寸對(duì)于習(xí)慣用375×667尺寸作圖的設(shè)計(jì)師而言，iPhoneX的到來(lái)并不會(huì)帶來(lái)太大影響。在移除了主鍵和邊框后，iPhoneX與蘋(píng)果上一代相比增加了145pt的設(shè)計(jì)面積。
2、 切圖而由于屏幕分辨率的升級(jí)，iPhoneX的切圖需要使用跟Plus一樣的@3x大小來(lái)保證視覺(jué)元素在屏幕中的完美呈現(xiàn)。
✧ 安全區(qū)概念的引入原有蘋(píng)果機(jī)型中，安全區(qū)默認(rèn)代表除了狀態(tài)欄以外的屏幕范圍，而隨著iPhoneX頂部劉海和底部Home indicator的出現(xiàn)，是的現(xiàn)今iPhoneX的安全域特指距上44pt，距下34pt的屏幕區(qū)域
對(duì)于途牛新上線直播項(xiàng)目中，橫屏狀態(tài)下的安全區(qū)域需要在左右留邊的基礎(chǔ)上，將Home indicator的位置置于屏幕下方居中放置。對(duì)于此種安排，蘋(píng)果給出的官方解釋是，由于無(wú)法預(yù)測(cè)用戶(hù)在橫向持握下會(huì)把「劉海」放在左邊還是右邊，如果安全區(qū)不是橫向居中放置的，會(huì)造成界面中元素與手機(jī)邊緣的相對(duì)位置不固定。他們認(rèn)為，用戶(hù)在使用手機(jī)時(shí)（尤其是玩游戲的時(shí)候）高度依賴(lài)手部的肌肉記憶，不對(duì)稱(chēng)的設(shè)計(jì)盡管空間利用率更高，但與用戶(hù)的肌肉記憶相背，由此導(dǎo)致的失敗操作容易讓用戶(hù)沮喪。
因此，對(duì)于需要在界面四周布置操作按鈕的直播橫屏界面需要特別注意在橫屏狀態(tài)下操作按鈕的安全區(qū)域的適配。
✧ Home indicator1、背景配置置于屏幕最底部的Home indicator集成了原有Home退出切換系統(tǒng)應(yīng)用的功能，適配過(guò)程中添加方法可以控制此區(qū)域內(nèi)背景的顏色/透明度/高度/出現(xiàn)與否。
2、虛擬Home條屬性Home indicator區(qū)域中的虛擬Home條目前僅支持黑白兩色。不過(guò)這塊區(qū)域也有一個(gè)鮮為人知的功能，開(kāi)發(fā)可以設(shè)定隱藏虛擬Home條，讓它在固定秒數(shù)后消失且消失不影響系統(tǒng)級(jí)操作（目前此功能僅淘寶iPhoneX部分頁(yè)面中出現(xiàn)）
3、觸碰區(qū)域在此區(qū)域內(nèi)的操作會(huì)優(yōu)先響應(yīng)系統(tǒng)級(jí)的操作功能，真機(jī)測(cè)試中發(fā)現(xiàn)虛擬Home條的有效觸發(fā)區(qū)域其實(shí)略低于官方大大說(shuō)明的34pt，因而即使頁(yè)面底部的操作內(nèi)容與Home indicator有所重疊，用戶(hù)依舊可以進(jìn)行點(diǎn)擊操作，只是需要避免放置重要操作功能和功能文字的遮擋問(wèn)題，畢竟官方還是推薦大家在有操作的情況留足34pt高度的。
✧全屏適配由于iPhoneX整體高度增加，導(dǎo)致原有的全屏展示畫(huà)面（如閃屏活動(dòng)頁(yè)）無(wú)法兼容增高后的屏幕尺寸，裁切/留白的視覺(jué)效果都會(huì)影響用戶(hù)的視覺(jué)體驗(yàn)，因此設(shè)計(jì)師們需要有針對(duì)性地為這些頁(yè)面單獨(dú)進(jìn)行IPhoneX尺寸的比例設(shè)計(jì)。
得益于今年開(kāi)始在全站推廣的組件化設(shè)計(jì)系統(tǒng)，在適配開(kāi)始后我們很快地根據(jù)組件系統(tǒng)中的幾個(gè)模塊進(jìn)行了有針對(duì)性的適配方案規(guī)則設(shè)定。
✧ 頂部元素1、頂部Bar調(diào)整原有頂部組件統(tǒng)一吸附于距上44pt的狀態(tài)欄下方，狀態(tài)欄處背景色吸取頂部Bar背景色保持一致。
2、頂部帶漸變/帶畫(huà)面元素Bar當(dāng)狀態(tài)欄無(wú)法吸取頂部Bar的背景色或圖片適配變形時(shí)，設(shè)計(jì)師主要有以下兩種方法進(jìn)行適配：
① 使用兩張切圖適配，根據(jù)頁(yè)面效果提供向上加高24pt的背景圖片進(jìn)行替換
這種適配方法呈現(xiàn)效果最佳，但是會(huì)使得我們的APP包文件量過(guò)大，客觀上不適合作為途牛適配的標(biāo)準(zhǔn)
② 使用一張切圖適配，通過(guò)縮放來(lái)完成頁(yè)面的適配
這種適配方法無(wú)論是向上適配還是向下適配都會(huì)產(chǎn)生頁(yè)面的裁切與留白，對(duì)于會(huì)員中心這種支持自定義個(gè)性化皮膚替換的業(yè)務(wù)場(chǎng)景，容易丟失畫(huà)面關(guān)鍵內(nèi)容的露出或遮擋，可控性較弱。
而向下適配中僅裁切頂部的方案需要設(shè)計(jì)師將畫(huà)面元素至于偏下的位置來(lái)保證適配小屏?xí)r的畫(huà)面效果，這種方式是使用一張切圖適配時(shí)較好的方案，但是鑒于技術(shù)問(wèn)題，我們暫時(shí)也無(wú)法實(shí)現(xiàn)此種裁切方式。
③ 使用一張切圖適配，統(tǒng)一4.7寸屏與iPhoneX屏幕中頭部的高度
作為最終應(yīng)用于會(huì)員中心的適配方案，這種適配方式雖然使得iPhoneX上的背景高度沒(méi)有做到等比例的縮放，但是保證了大小屏雙端的基本視覺(jué)呈現(xiàn)，是在視覺(jué)效果和開(kāi)發(fā)成本中最為折中的適配方式。
3、透底背景圖調(diào)整原有頂部組件庫(kù)中透底Bar的位置吸附于距上44pt的狀態(tài)欄下方，圖片根據(jù)頁(yè)面模塊高度進(jìn)行等比例拉伸
4、透底運(yùn)營(yíng)位通欄的運(yùn)營(yíng)廣告圖片常見(jiàn)于機(jī)票、酒店等品類(lèi)頻道首頁(yè)，其適配方式前面第二點(diǎn)的方式類(lèi)似，只能采用一張切圖的適配方法，因此用保持廣告圖高度來(lái)進(jìn)行適配。
不同的是此類(lèi)頁(yè)面在iPhoneX中呈現(xiàn)使用單獨(dú)配置白色頂部Bar的方案進(jìn)行適配，以保證運(yùn)營(yíng)banner中文本信息的正常露出，當(dāng)然后續(xù)我們也會(huì)持續(xù)探索針對(duì)此類(lèi)情況的更佳表現(xiàn)方式。
✧ 底部元素1、底部無(wú)操作設(shè)定Home indicaror背景色為透明，信息內(nèi)容撐滿(mǎn)屏幕展示
2、底部有操作2.1 底部Tab bar、篩選項(xiàng)、輸入框、底部浮出的半屏彈窗等
吸附于距下34pt的Home indicaror之上，Home indicaror背景色與底部Bar底色保持一致。
2.2 底部鄰近操作按鈕（如：返回頂部、旅圖頻道中的上傳照片等）
向下吸附于距下34pt的Home indicaror上方，距離Home indicaror的間距與原頁(yè)面間距保持一致。
2.3 底部為操作按鈕
以途牛為例，底部有操作按鈕的場(chǎng)景主要涉及詳情、訂單此類(lèi)與下單流程強(qiáng)相關(guān)的頁(yè)面之中，為了保證用戶(hù)整個(gè)下單鏈路的流暢及與iPhoneX機(jī)型的完美適配，針對(duì)此模塊，我們也進(jìn)行了一系列的探索與實(shí)踐。
本著頁(yè)面按鈕與iPhone X物理圓角兼容更和諧、更整體的初衷，我們最終選定底部為操作按鈕的適配規(guī)則為：保持4.7”屏樣式不變，修改iPhoneX中底部按鈕樣式為圓角，圓角弧度為4的方案。
✧ 全屏元素1、全屏彈窗調(diào)整文本內(nèi)容于安全區(qū)域內(nèi)，底部有操作按鈕的距下增加Home indicaror34高度，距Home indicaror間距與原頁(yè)面間距保持一致。
2、左右布局頁(yè)面當(dāng)頁(yè)面中右側(cè)交互內(nèi)容推出后，如果信息卡片和主屏幕指示條交錯(cuò)疊加，就會(huì)稍顯信息混亂，建議抽屜導(dǎo)航的寬度根據(jù)主屏幕指示條的位置進(jìn)行調(diào)整，完整露出或完全遮擋指示條。
3、全屏畫(huà)面（Splash、全屏活動(dòng)頁(yè)、全局缺省等）iPhoneX界面中增加的145pt增加了對(duì)于內(nèi)容文本的露出，但是當(dāng)面對(duì)如splash這類(lèi)的全局頁(yè)面是，增加的高度會(huì)使得全屏畫(huà)面的視覺(jué)中心上移，所以需要設(shè)計(jì)師們針對(duì)此類(lèi)問(wèn)題進(jìn)行新增iPhoneX尺寸/ 調(diào)整頁(yè)面元素間距來(lái)完成適配。
綜上的適配規(guī)則只需熟悉官方大大的基本限制結(jié)合業(yè)務(wù)調(diào)整后并沒(méi)有太大的難點(diǎn)，但是在規(guī)則設(shè)定完后如何發(fā)動(dòng)各個(gè)不同的事業(yè)部進(jìn)行規(guī)則周知？如何把控各個(gè)研發(fā)團(tuán)隊(duì)的開(kāi)發(fā)效果？如何提高人效完成適配工作？這些問(wèn)題成為了我們?cè)陧?xiàng)目落地過(guò)程中更為的痛點(diǎn)。
值得慶幸的是，在此之前，我們團(tuán)隊(duì)就針對(duì)頁(yè)面中的基礎(chǔ)模塊進(jìn)行了組件化系統(tǒng)的搭建及推廣，而以下的幾個(gè)特點(diǎn)也為此次iPhoneX適配的過(guò)程減少了不少麻煩。
1、自由組合、靈活兼容以頂部Bar組件為例，在制作頂部bar組件的過(guò)程中需要全面的考慮不同場(chǎng)景下各個(gè)元素組合的布局、樣式、響應(yīng)狀態(tài)、交互效果、兼容方案……而多個(gè)組件間也需要能靈活地組合來(lái)構(gòu)建不同的產(chǎn)品坑位和功能模塊。
當(dāng)組件開(kāi)發(fā)完成后，還需配置部分可定義元素來(lái)滿(mǎn)足不同業(yè)務(wù)線產(chǎn)品的需求，如頂部bar組件就支持背景色調(diào)整、顯示/隱藏分隔線、動(dòng)態(tài)圖片等功能。
2、打通語(yǔ)言，實(shí)現(xiàn)統(tǒng)一長(zhǎng)久以來(lái)，大部分互聯(lián)網(wǎng)公司的工作流程是界面設(shè)計(jì)師產(chǎn)出界面視覺(jué)稿，開(kāi)發(fā)工程師根據(jù)視覺(jué)稿編輯代碼，發(fā)布上線。介于兩者所展示語(yǔ)言的壁壘始終存在，每一次新頁(yè)面的上線都需要設(shè)計(jì)與開(kāi)發(fā)分別針對(duì)頁(yè)面元素各自編譯一次，對(duì)于一些重復(fù)性較高的頁(yè)面，其中人效的耗損可想而知。
而組件化系統(tǒng)最為關(guān)鍵的一點(diǎn)在于打通了與開(kāi)發(fā)之間語(yǔ)言，我們將界面中復(fù)用率較高的一些模塊按組件而非元素進(jìn)行開(kāi)發(fā)語(yǔ)言式的搭建，各業(yè)務(wù)線按需調(diào)取組件中的模塊進(jìn)行業(yè)務(wù)替換，真正實(shí)現(xiàn)了全站的統(tǒng)一。而后續(xù)任何針對(duì)該模塊的修改都可以通過(guò)組件自動(dòng)同步到各業(yè)務(wù)線中，大大減少了反復(fù)測(cè)試的成本。
3、單線協(xié)作，提高人效途牛現(xiàn)有的設(shè)計(jì)架構(gòu)中，每個(gè)設(shè)計(jì)師對(duì)應(yīng)各自的業(yè)務(wù)線，工作方式更偏向于多線并行，這種形式能讓設(shè)計(jì)師對(duì)自身業(yè)務(wù)更為深入地進(jìn)行設(shè)計(jì)，但從整體架構(gòu)層而言，在應(yīng)對(duì)大型視覺(jué)改版或模塊升級(jí)時(shí)，這種多線并行的工作方式需要在每次改版過(guò)程中調(diào)動(dòng)所有業(yè)務(wù)設(shè)計(jì)師參與，而最終的成果也難以把控。
而依托組件化系統(tǒng)按模塊而非頁(yè)面的搭建方式，使得在應(yīng)對(duì)模塊升級(jí)/調(diào)整的過(guò)程中，只需對(duì)接組件架構(gòu)組的設(shè)計(jì)師及開(kāi)發(fā)即可實(shí)現(xiàn)組件視覺(jué)代碼的升級(jí)，而前期業(yè)務(wù)調(diào)取的入口會(huì)自動(dòng)更新最新的修改，這種單線溝通的工作方式能有效的減少人效在重復(fù)性工作中的耗損，也能更有效的把控項(xiàng)目質(zhì)量。
寫(xiě)在最后雖然新事物的出現(xiàn)總會(huì)引起諸多質(zhì)疑，但是好的工具和工作方法始終能接受住時(shí)間的考驗(yàn)，幫助我們更好地開(kāi)展設(shè)計(jì)工作。雖然此次適配過(guò)程中仍有一些想法和細(xì)節(jié)沒(méi)有完美的落地，留下了些許遺憾，但也正是這些不完美促使我們對(duì)每一個(gè)下一次始終心潮澎湃，全力以赴！
途牛UED