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