2023-11-14 博博
作者：藍藍設計奧博
自適應與響應式設計的差異：
之前我們經常利用自適應布局的方式來解決多終端適配的問題。而響應式與自適應時常被混淆，為更清晰的理解這兩種實現方式的差異，我們來概括一下它們之間的區別：
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倍，才能更好的保障用戶的易讀與易操作的良好體驗。
藍藍設計(www.devb.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、用戶體驗公司、軟件界面設計公司、軟件qt開發、軟件wpf開發、軟件vue開發。