作者：藍藍設(shè)計奧博

自適應(yīng)與響應(yīng)式設(shè)計的差異：

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

a.自適應(yīng)布局特點：

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

b.響應(yīng)式布局特點：

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

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

響應(yīng)式設(shè)計帶來的好處：

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

響應(yīng)式的設(shè)計只需要開發(fā)一套代碼，就可以兼容多種尺寸的終端，不需要開發(fā)單獨的客戶端版本，同一個客戶端產(chǎn)品運行在不同尺寸的設(shè)備上，使用統(tǒng)一的后臺系統(tǒng)，一次開發(fā)，多端生效。

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

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

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

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

優(yōu)酷的響應(yīng)式設(shè)計策略：

參考網(wǎng)頁產(chǎn)品響應(yīng)式設(shè)計思路，讓客戶端產(chǎn)品內(nèi)的頁面框架、抽屜組件、坑位布局、樣式元素等，能在既定的設(shè)計語言和風(fēng)格的指引下， 跟隨屏幕尺寸調(diào)整展示效果 。

實現(xiàn)一套代碼適配所有尺寸變化及設(shè)計語言規(guī)范化、產(chǎn)品化和工具化，提升產(chǎn)研效能。

a. 響應(yīng)式設(shè)計思路

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

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

b. 設(shè)計標準化建設(shè)

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

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

c. 持續(xù)不斷的update優(yōu)化

在設(shè)計標準化1.0時，我們針對統(tǒng)一化的視覺原子抽離做全局的控制，統(tǒng)一且高效。但隨著業(yè)務(wù)的腳步跑的越快，我們也發(fā)現(xiàn)了應(yīng)用上的受限與不足。

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

以間距為例：

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

響應(yīng)式設(shè)計規(guī)范：

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

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

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

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

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

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

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

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

b. 不同終端的針對性調(diào)整

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

1）以平板端為例：

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

平板端擁有大屏幕尺寸的優(yōu)勢，還有多任務(wù)的差異化模式，我們需要針對同設(shè)備上屏幕比例切換做響應(yīng)式適配，自動調(diào)整相對應(yīng)的頁面布局與元素。

示例：

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

2）以車機端為例：

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

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

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

藍藍設(shè)計(m.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、用戶體驗公司、軟件界面設(shè)計公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。