作者：藍(lán)藍(lán)設(shè)計(jì)奧博

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

b. 設(shè)計(jì)標(biāo)準(zhǔn)化建設(shè)

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

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

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

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

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

以間距為例：

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

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

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

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

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

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

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

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

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

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

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

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

1）以平板端為例：

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

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

示例：

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

2）以車機(jī)端為例：

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

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

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

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

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