一套設計稿多端適配：電腦、手機、平板和車機

Sponsor

前幾天優酷小伙伴告訴我，他們現在做方案，基本上只產出一套設計稿了，無論是iPad、安卓大屏、電腦或者是車機，全部通過響應式設計搞定。

本來還不信來著，畢竟iPad屏幕尺寸跟手機也差太遠了吧，一個橫屏一個豎屏，信息量也不一樣。不過后面她分享了我一篇文章，看完后才發現，原來還真有這種辦法??！

好東西不能獨樂樂，所以特地要到了這篇文章的授權，今天分享給大家??！

優酷APP設計師：

隨著智能設備的不斷發展，電腦、大屏手機、平板、折疊屏手機、車機大屏等大尺寸設備發展迅猛，在視頻娛樂成熟且多競爭的行業大背景下，優酷多終端的設計是我們逃不開的課題。

為了更高效且保證質量的服務我們的產品與用戶，更快跟上市場的競爭變化，我們需要制定一套適應多終端的響應式設計策略。

自適應與響應式設計的差異

之前我們經常利用自適應布局的方式來解決多終端適配的問題。而響應式與自適應時常被混淆，為更清晰的理解這兩種實現方式的差異，我們來概括一下它們之間的區別：

a.自適應布局特點：

根據設備分辨率的不同，分別為不同分辨率的屏幕進行布局定義，創建多個固定布局。這種適配方法需要根據不同使用場景設計及開發多套界面，且屏幕分辨率變化時，頁面中的元素無法靈活的做適應，無論是從產品體驗還是維護成本上看，都不算是高質高效。

b.響應式布局特點：

描述響應式最著名的一句話就是 “Content is like water”，翻譯成中文便是“如果將屏幕看作容器，那么內容就像水一樣流淌”。

響應式是基于同一套代碼、同一套設計語言，能夠兼容多尺寸、多終端設備的展示。在保障業務高效發展的前提下，制定一套在多終端間流轉的設計規則，為用戶提供更好的瀏覽體驗。

響應式設計帶來的好處

a. 開發成本更低：一套代碼

響應式的設計只需要開發一套代碼，就可以兼容多種尺寸的終端，不需要開發單獨的客戶端版本，同一個客戶端產品運行在不同尺寸的設備上，使用統一的后臺系統，一次開發，多端生效。

b. 設計成本更低：一套設計

透過響應式制定了一套能在多終端流轉的界面自適應設計方案，橫向拉通頁面以及容器布局的適配規則。一套設計規則高效適配多終端，解放設計資源。

c. 業務迭代更快：一次運營

響應式客戶端產品，業務方在迭代過程中，會考慮多終端不同的使用場景、業務特性，基于同一個客戶端、后臺和運營系統。一次運營多端同步生效，保障業務發展效率最大化。

響應式設計策略

參考網頁產品響應式設計思路，讓客戶端產品內的頁面框架、抽屜組件、坑位布局、樣式元素等，能在既定的設計語言和風格的指引下， 跟隨屏幕尺寸調整展示效果 。

實現一套代碼適配所有尺寸變化及設計語言規范化、產品化和工具化，提升產研效能。

a. 響應式設計思路

響應式在多終端的適配上，不能只是粗暴的1比1遷移，我們需要保障體驗的一致性，核心需要讓用戶的瀏覽體驗是舒適的。

如何在不同尺寸與分辨率的屏幕下，有效的做展示？這就需要設計側通盤考慮所有尺寸的屏幕，拉通不同寬高比例的設計規則，動態調整可見元素的布局（包括元素的列數以及尺寸等），在不同尺寸的設備上都能達到最佳顯示效果。

b. 設計標準化建設

設計標準化是我們管理設計系統性的核心能力之一，我們透過抽離出框架層上影響視覺風格的原子，包括顏色、字號、間距、圓角、柵格、尺寸等使其工程化可控制。通過統一的協作語言對視覺原子進行描述定義，一處替換全端生效。

以前，設計師在針對視覺屬性調整時，涉及到要修改的場景眾多，點對點修改成本高；現在，通過設計標準化，我們把視覺樣式進行工程化統一管理，實現的是?整套設計體系化的調整。

c. 持續不斷的update優化

在設計標準化1.0時，我們針對統一化的視覺原子抽離做全局的控制，統一且高效。但隨著業務的腳步跑的越快，我們也發現了應用上的受限與不足。

例如多終端響應式上，終端設備的不同、使用場景的不同，都會帶來較大的差異。為了擴大設計標準化的覆蓋面，我們進行了設計標準化2.0升級。

以間距為例：

我們按照手機為基準端，在映射到不同終端設備時可以根據設備的不同做展示的差異化映射；例如在手機上欄距為9，但在大屏設備如Pad上展示效果變為12；

響應式設計規范

良好實現響應式的前提有兩點：一是頁面布局具有規律性，建立靈活的柵格布局基礎；二是擺脫像素，容器按比例實現，不固定寬高；這兩點本身也是柵格系統自身的特點，我們透過柵格化布局的設計系統為響應式適配打下良好的基礎。

a.設計適配基本原則

定義響應式的設計規則時，我們除了遵循一些基礎的布局原則外，還需要因應業務的屬性去做結合，以下是優酷響應式核心覆蓋的幾個通用適配方法：

1）拉伸布局：

內容在屏幕顯示區域內進行相對拉伸，以達到布局完整。這種實現方式成本低，在響應式中大量的被運用。

2）等比縮放：

內容在屏幕的相對位置進行等比例縮放，這種方式不會產生任何布局重構影響，適配簡單。一般在帶有圖片顯示場景中使用，需要注意圖片素材放大后清晰度的問題。

3）擴展布局：

內容可靈活按照屏幕比例進行增加或減少、擴展為多行或多列等。采用此方案需要做數據源的補足，保證內容展示合理。

4）固定布局：

內容在橫屏、豎屏狀態下始終展示固定，不受任何設備及屏幕尺寸影響。

5）分欄布局：

充分利用不同設備、不同屏幕尺寸的差異化，通過分欄布局形式重新對內容展示做位置變化，進行整個屏幕更合理化的分配。此布局頁面結構產生變化，需要重構UI框架，有一定的開發成本。

b. 不同終端的針對性調整

為了滿足各終端用戶的使用習慣，我們更進一步的探究各終端的用戶畫像及設備特性，思考各端差異化賦能和機會點。

1）以平板端為例：

手機為我們基準端，當它映射到平板端時，屏幕大小的差異特別明顯，這時我們需要考慮如何合理的利用屏幕；

平板端擁有大屏幕尺寸的優勢，還有多任務的差異化模式，我們需要針對同設備上屏幕比例切換做響應式適配，自動調整相對應的頁面布局與元素。

示例：

手機端布局大部分是單、雙列布局，但通過響應式適配映射，我們能根據不同的終端實現不同的頁面變化布局，更好的利用了大屏設備的優勢。

2）以車機端為例：

不同車機的屏幕尺寸多種多樣，目前主流的屏幕分為橫向屏幕比例、豎向屏幕比例兩大類，所以車機應用需要兼顧橫向、豎向兩種屏幕布局，頁面能夠動態調整內容的顯示，以滿足不同尺寸設備的適配需求。

基于對用戶觀察模型的研究分析得出，用戶使用手機距離約為30公分，但駕駛艙對車機屏幕的使用距離約為70公分，這時我們面對的不僅僅是屏幕大小、分辨率的差異，還有用戶使用距離的差異。

我們在車機的適配映射上除了對功能的簡化外，還針對展示上做了放大處理，界面元素大小需要達到手機基準端的2倍，才能更好的保障用戶的易讀與易操作的良好體驗。

小結

通過響應式設計策略的應用解決了成本與體驗的難點，也是至今它仍然受到歡迎的原因。但我們都知道多終端的不同、場景的差異性其實不是單純的響應式設計能解決的。

響應式設計項目由優酷產研團隊齊心協作推進，目前已經在多終端包含手機、平板、電腦、車機上落地應用，在此感謝我們優酷值得驕傲的產研伙伴。

來源 | AlibabaDesign （ID：AlibabaDesign）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。