實戰(zhàn)技巧 | “Content is like water ”響應(yīng)式布局設(shè)計

▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長

阿里巴巴設(shè)計官方認(rèn)證 MCN 機構(gòu)

SUXA 深圳體驗設(shè)計協(xié)會華東分會

全球服務(wù)設(shè)計共創(chuàng)節(jié)城市站發(fā)起者

.

轉(zhuǎn)自：AlibabaDesign

編輯：劉麗

共 5010 字，預(yù)計閱讀 13 分鐘

01 前言

隨著智能設(shè)備的不斷發(fā)展，電腦、大屏手機、平板、折疊屏手機、車機大屏等大尺寸設(shè)備發(fā)展迅猛，在視頻娛樂成熟且多競爭的行業(yè)大背景下，優(yōu)酷多終端的設(shè)計是我們逃不開的課題。無論是從產(chǎn)研投入的角度還是業(yè)務(wù)發(fā)展維護上，響應(yīng)式設(shè)計，是一套較為成熟的能力。為了更高效且保證質(zhì)量的服務(wù)我們的產(chǎn)品與用戶，更快跟上市場的競爭變化，我們需要制定一套適應(yīng)多終端的響應(yīng)式設(shè)計策略。

02 理解響應(yīng)式設(shè)計

在過去的時間里，我們更多的利用自適應(yīng)布局的方式來解決多終端適配的問題，而響應(yīng)式與自適應(yīng)時常被混淆，為更清晰的理解這兩種實現(xiàn)方式的差異，我們來概括一下它們之間的區(qū)別：

自適應(yīng)布局

根據(jù)設(shè)備分辨率的不同，分別為不同分辨率的屏幕進行布局定義，創(chuàng)建多個固定布局。這種適配方法需要根據(jù)不同使用場景設(shè)計及開發(fā)多套界面，且屏幕分辨率變化時，頁面中的元素?zé)o法靈活的做適應(yīng)，無論是從產(chǎn)品體驗還是維護成本上看，都不算是高質(zhì)高效。

響應(yīng)式布局

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

響應(yīng)式是基于同一套代碼、同一套設(shè)計語言，能夠兼容多尺寸、多終端設(shè)備的展示。在保障業(yè)務(wù)高效發(fā)展的前提下，制定一套在多終端間流轉(zhuǎn)的設(shè)計規(guī)則，為用戶提供更好的瀏覽體驗。

03 響應(yīng)式設(shè)計優(yōu)勢

開發(fā)成本更低：一套代碼

想要在不同尺寸屏幕的終端上獲取良好的顯示效果，傳統(tǒng)的應(yīng)用適配方案是針對不同尺寸的終端設(shè)備開發(fā)多個客戶端，例如很多廠商會針對不同終端推出單獨的客戶端版本。而響應(yīng)式的設(shè)計只需要開發(fā)一套代碼，就可以兼容多種尺寸的終端，不需要開發(fā)單獨的客戶端版本。不同的終端產(chǎn)品，由不同的垂直團隊開發(fā)，會帶來不同的后臺系統(tǒng)和客戶端技術(shù)方案，前后端技術(shù)能力會走向分化。響應(yīng)式是同一個客戶端產(chǎn)品運行在不同尺寸的設(shè)備上，使用統(tǒng)一的后臺系統(tǒng)，一次開發(fā)，多端生效。

設(shè)計成本更低：一套設(shè)計

透過響應(yīng)式制定了一套能在多終端流轉(zhuǎn)的界面自適應(yīng)設(shè)計方案，橫向拉通頁面以及容器布局的適配規(guī)則，提高了屏幕的顯示效率，面對不同分辨率的設(shè)備適應(yīng)性更強，最大化提升用戶的操作體驗。一套設(shè)計規(guī)則高效適配多終端，在繁重的業(yè)務(wù)迭代需求中解放設(shè)計資源，讓設(shè)計師能更好的深耕體驗。

業(yè)務(wù)迭代更快：一次運營

往往不同終端有不同的運營系統(tǒng)，可能存在多個垂直運營團隊，一次運營動作需要操作多次。響應(yīng)式客戶端產(chǎn)品，業(yè)務(wù)方在迭代過程中，會考慮多終端不同的使用場景、業(yè)務(wù)特性，基于同一個客戶端、后臺和運營系統(tǒng)，一次運營多端同步生效，保障業(yè)務(wù)發(fā)展效率最大化。

04 設(shè)計目標(biāo)與策略

參考網(wǎng)頁產(chǎn)品響應(yīng)式適配思路，讓客戶端產(chǎn)品內(nèi)的頁面框架、抽屜組件、坑位布局、樣式元素等，在既定的設(shè)計語言和風(fēng)格的指引下，隨屏幕尺寸調(diào)整展示效果，實現(xiàn)一套代碼適配所有尺寸變化及設(shè)計語言規(guī)范化、產(chǎn)品化和工具化，提升產(chǎn)研效能。

我們通過代碼統(tǒng)一，利用設(shè)計標(biāo)準(zhǔn)化管理體系升級，實現(xiàn)一套代碼多終端展示的能力，更好的在多終端進行精細(xì)化控制，實現(xiàn)產(chǎn)研投入的人效降本與用戶體驗提升的雙贏。

設(shè)計思路與方法

響應(yīng)式在多終端的適配上，不能只是粗暴的1比1遷移，我們除了要保障體驗的一致性外，核心需要讓用戶的瀏覽體驗是舒適的，不同大小屏幕比例上的內(nèi)容展示合理的。

如何在不同尺寸與分辨率的屏幕下，有效的做展示？這就需要設(shè)計側(cè)通盤考慮所有尺寸的屏幕，拉通不同寬高比例的設(shè)計規(guī)則，動態(tài)調(diào)整可見元素的布局（包括元素的列數(shù)以及尺寸等），在不同尺寸的設(shè)備上都能達到最佳的顯示效果，保障用戶的消費體驗。

設(shè)計標(biāo)準(zhǔn)化

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.”

設(shè)計標(biāo)記是設(shè)計系統(tǒng)的視覺設(shè)計原子，具體來說，它們是存儲視覺設(shè)計屬性的命名實體。我們使用它們來代替硬編碼的值（例如顏色的十六進制值或間距的像素值），以便為UI開發(fā)維護可伸縮和一致的視覺系統(tǒng)。

設(shè)計標(biāo)準(zhǔn)化是我們管理設(shè)計系統(tǒng)性的核心能力之一，我們透過抽離出框架層上影響視覺風(fēng)格的原子，包括顏色、字號、間距、圓角、柵格、尺寸等使其工程化可控制。設(shè)計團隊與開發(fā)團隊協(xié)作，通過統(tǒng)一的協(xié)作語言對視覺原子進行描述定義，視覺屬性與框架布局分離并與開發(fā)的工程邏輯能相互對應(yīng)，通過 SDK 的方式統(tǒng)一管理，一處替換全端生效，可以更高效的控制、定義產(chǎn)品風(fēng)格。

以前，設(shè)計師在針對視覺屬性調(diào)整時，涉及到要修改的場景眾多，點對點修改成本高；現(xiàn)在，通過設(shè)計標(biāo)準(zhǔn)化，我們把視覺樣式進行工程化統(tǒng)一管理，實現(xiàn)的是?整套設(shè)計體系化的調(diào)整。

從 1 到 n 的升級

在設(shè)計標(biāo)準(zhǔn)化 1.0 時，我們針對統(tǒng)一化的視覺原子抽離做全局的控制，統(tǒng)一且高效。但隨著業(yè)務(wù)的腳步跑的越快，我們也發(fā)現(xiàn)了應(yīng)用上的受限與不足。例如多終端響應(yīng)式上，終端設(shè)備的不同、使用場景的不同，都會帶來較大的差異。

為保障用戶的易讀與易操作的良好體驗，在不同終端設(shè)備下，界面展示的物理視覺因屏幕分辨率或使用距離的不同需要進行差異化處理，才能更好的保障用戶的產(chǎn)品體驗。

為了擴大設(shè)計標(biāo)準(zhǔn)化的覆蓋面，并且使其更好的幫助業(yè)務(wù)，我們進行了設(shè)計標(biāo)準(zhǔn)化 2.0 升級。

升級前，我們針對控制全局框架只需要 1 對 1 的考慮單端效果去做 token 的定義；升級后，我們細(xì)化業(yè)務(wù)場景，在考慮能高效控制全局框架的前提下，透過 1 對 n 的通用化思維去做精細(xì)化升級調(diào)整；調(diào)整后，我們可以根據(jù)映射設(shè)備的不同做差異化的展示處理。

以間距為例：

我們按照手機為基準(zhǔn)端，在映射到不同終端設(shè)備時可以根據(jù)設(shè)備的不同做展示的差異化映射；例如在手機上欄距為 9 ，但在大屏設(shè)備如 Pad 上展示效果變?yōu)?12 ；

在其 1.0 的基礎(chǔ)上， 2.0 支持了多套 token 配置與 token 的自適應(yīng)布局。升級后，我們可以在不同的終端設(shè)備上運行合適的配置，讓 Design tokens 在有明確的指向性和控制范圍內(nèi)使用，更好的在多終端進行精細(xì)化控制，實現(xiàn)一套代碼差異化配置的響應(yīng)式能力。

設(shè)計標(biāo)準(zhǔn)化 2.0 在設(shè)計管理和擴展上，除了提升產(chǎn)品的一致性體驗外也更好的提升產(chǎn)研效率。

05 響應(yīng)式設(shè)計系統(tǒng)

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

設(shè)計適配基本原則

定義響應(yīng)式的設(shè)計規(guī)則時，我們除了遵循一些基礎(chǔ)的布局原則外，還需要因應(yīng)業(yè)務(wù)的屬性去做結(jié)合，以下是優(yōu)酷響應(yīng)式核心覆蓋的幾個通用適配方法：

拉伸布局：

內(nèi)容在屏幕顯示區(qū)域內(nèi)進行相對拉伸，以達到布局完整。這種實現(xiàn)方式成本低，在響應(yīng)式中大量的被運用。

等比縮放：

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

擴展布局：

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

固定布局：

內(nèi)容在橫屏、豎屏狀態(tài)下始終展示固定，不受任何設(shè)備及屏幕尺寸影響。

分欄布局：

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

多終端響應(yīng)式適配差異

基于基本的適配原則，我們可以適配覆蓋 70% -  80% 的使用場景，但為了滿足各終端用戶的使用習(xí)慣，呈現(xiàn)更人性化的用戶體驗，則需要我們更進一步的 探究各終端的用戶畫像及設(shè)備特性，思考各終端的差異化賦能和機會點。

我們抽象化多終端的差異性，可概括成設(shè)備特性差異與使用場景差異兩方面：

• 設(shè)備差異：包含屏幕大小、分辨率高低、系統(tǒng)能力等。

• 場景差異：包含使用距離的遠近、使用方式與情景等。
  

以平板端為例：

手機為我們基準(zhǔn)端，當(dāng)它映射到平板端時，屏幕大小的差異特別明顯，這時我們需要考慮如何合理的利用屏幕；平板端擁有大屏幕尺寸的優(yōu)勢，還有多任務(wù)的差異化模式，我們需要針對同設(shè)備上屏幕比例切換做響應(yīng)式適配，自動調(diào)整相對應(yīng)的頁面布局與元素。

手機端布局大部分是單、雙列布局，但通過響應(yīng)式適配映射，我們能根據(jù)不同的終端實現(xiàn)不同的頁面變化布局，更好的利用了大屏設(shè)備的優(yōu)勢。

以車機端為例：

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

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

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

訂制到通用化

盡管有許多適配方法，但仍然有部分場景是無法透過上述方式達到良好的適配效果，這時我們需要 針對這些特殊場景去定義合適的方案或做映射、過濾；例如運營活動相關(guān)場景，整體頁面經(jīng)過一次設(shè)計包裝，沒有辦法做重組的情況下我們需要做特殊處理，保證展示效果。

當(dāng)我們決定采用響應(yīng)式作為我們主流設(shè)計系統(tǒng)時，我們的工作流程也會發(fā)生改變，產(chǎn)研團隊在實現(xiàn)新的功能或模塊時需要考慮在多終端的實現(xiàn)。在面對業(yè)務(wù)需求時，我們首先要與業(yè)務(wù)達成一致，根據(jù)需求類型的不同去支持多終端響應(yīng)式的透出，并且全盤考慮如何做展示適配，從單端訂制思路轉(zhuǎn)變?yōu)槎嘟K端通用化思路。

06 最后

通過響應(yīng)式設(shè)計策略的應(yīng)用解決了成本與體驗的難點，也是至今它仍然受到歡迎的原因。但我們都知道 多終端的不同、場景的差異性其實不是單純的響應(yīng)式設(shè)計能解決的。隨著技術(shù)不斷更迭，未來一定會有新的多終端設(shè)計與技術(shù)的解決方案出現(xiàn)，更完善產(chǎn)品在不同設(shè)備上快速響應(yīng)的同時并保障用戶的體驗。

響應(yīng)式設(shè)計項目由優(yōu)酷產(chǎn)研團隊齊心協(xié)作推進，目前已經(jīng)在多終端包含手機、平板、電腦、車機上落地應(yīng)用，在此感謝我們優(yōu)酷值得驕傲的產(chǎn)研伙伴。