2023-11-14 博博
作者：藍(lán)藍(lán)設(shè)計奧博
自適應(yīng)與響應(yīng)式設(shè)計的差異：
之前我們經(jīng)常利用自適應(yīng)布局的方式來解決多終端適配的問題。而響應(yīng)式與自適應(yīng)時常被混淆，為更清晰的理解這兩種實(shí)現(xiàn)方式的差異，我們來概括一下它們之間的區(qū)別：
a.自適應(yīng)布局特點(diǎn)：
根據(jù)設(shè)備分辨率的不同，分別為不同分辨率的屏幕進(jìn)行布局定義，創(chuàng)建多個固定布局。這種適配方法需要根據(jù)不同使用場景設(shè)計及開發(fā)多套界面，且屏幕分辨率變化時，頁面中的元素?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è)計語言，能夠兼容多尺寸、多終端設(shè)備的展示。在保障業(yè)務(wù)高效發(fā)展的前提下，制定一套在多終端間流轉(zhuǎn)的設(shè)計規(guī)則，為用戶提供更好的瀏覽體驗(yàn)。
響應(yīng)式設(shè)計帶來的好處：
a. 開發(fā)成本更低：一套代碼
響應(yīng)式的設(shè)計只需要開發(fā)一套代碼，就可以兼容多種尺寸的終端，不需要開發(fā)單獨(dú)的客戶端版本，同一個客戶端產(chǎn)品運(yù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ùn)營
響應(yīng)式客戶端產(chǎn)品，業(yè)務(wù)方在迭代過程中，會考慮多終端不同的使用場景、業(yè)務(wù)特性，基于同一個客戶端、后臺和運(yùn)營系統(tǒng)。一次運(yùn)營多端同步生效，保障業(yè)務(wù)發(fā)展效率最大化。
優(yōu)酷的響應(yīng)式設(shè)計策略：
參考網(wǎng)頁產(chǎn)品響應(yīng)式設(shè)計思路，讓客戶端產(chǎn)品內(nèi)的頁面框架、抽屜組件、坑位布局、樣式元素等，能在既定的設(shè)計語言和風(fēng)格的指引下， 跟隨屏幕尺寸調(diào)整展示效果 。
實(shí)現(xiàn)一套代碼適配所有尺寸變化及設(shè)計語言規(guī)范化、產(chǎn)品化和工具化，提升產(chǎn)研效能。
a. 響應(yīng)式設(shè)計思路
響應(yīng)式在多終端的適配上，不能只是粗暴的1比1遷移，我們需要保障體驗(yàn)的一致性，核心需要讓用戶的瀏覽體驗(yàn)是舒適的。
如何在不同尺寸與分辨率的屏幕下，有效的做展示？這就需要設(shè)計側(cè)通盤考慮所有尺寸的屏幕，拉通不同寬高比例的設(shè)計規(guī)則，動態(tài)調(diào)整可見元素的布局（包括元素的列數(shù)以及尺寸等），在不同尺寸的設(shè)備上都能達(dá)到最佳顯示效果。
b. 設(shè)計標(biāo)準(zhǔn)化建設(shè)
設(shè)計標(biāo)準(zhǔn)化是我們管理設(shè)計系統(tǒng)性的核心能力之一，我們透過抽離出框架層上影響視覺風(fēng)格的原子，包括顏色、字號、間距、圓角、柵格、尺寸等使其工程化可控制。通過統(tǒng)一的協(xié)作語言對視覺原子進(jìn)行描述定義，一處替換全端生效。
以前，設(shè)計師在針對視覺屬性調(diào)整時，涉及到要修改的場景眾多，點(diǎn)對點(diǎn)修改成本高；現(xiàn)在，通過設(shè)計標(biāo)準(zhǔn)化，我們把視覺樣式進(jìn)行工程化統(tǒng)一管理，實(shí)現(xiàn)的是?整套設(shè)計體系化的調(diào)整。
c. 持續(xù)不斷的update優(yōu)化
在設(shè)計標(biāo)準(zhǔn)化1.0時，我們針對統(tǒng)一化的視覺原子抽離做全局的控制，統(tǒng)一且高效。但隨著業(yè)務(wù)的腳步跑的越快，我們也發(fā)現(xiàn)了應(yīng)用上的受限與不足。
例如多終端響應(yīng)式上，終端設(shè)備的不同、使用場景的不同，都會帶來較大的差異。為了擴(kuò)大設(shè)計標(biāo)準(zhǔn)化的覆蓋面，我們進(jìn)行了設(shè)計標(biāo)準(zhǔn)化2.0升級。
以間距為例：
我們按照手機(jī)為基準(zhǔn)端，在映射到不同終端設(shè)備時可以根據(jù)設(shè)備的不同做展示的差異化映射；例如在手機(jī)上欄距為9，但在大屏設(shè)備如Pad上展示效果變?yōu)?2；
響應(yīng)式設(shè)計規(guī)范：
良好實(shí)現(xiàn)響應(yīng)式的前提有兩點(diǎn)：一是頁面布局具有規(guī)律性，建立靈活的柵格布局基礎(chǔ)；二是擺脫像素，容器按比例實(shí)現(xiàn)，不固定寬高；這兩點(diǎn)本身也是柵格系統(tǒng)自身的特點(diǎn)，我們透過柵格化布局的設(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)進(jìn)行相對拉伸，以達(dá)到布局完整。這種實(shí)現(xiàn)方式成本低，在響應(yīng)式中大量的被運(yùn)用。
2）等比縮放：
內(nèi)容在屏幕的相對位置進(jìn)行等比例縮放，這種方式不會產(chǎn)生任何布局重構(gòu)影響，適配簡單。一般在帶有圖片顯示場景中使用，需要注意圖片素材放大后清晰度的問題。
3）擴(kuò)展布局：
內(nèi)容可靈活按照屏幕比例進(jìn)行增加或減少、擴(kuò)展為多行或多列等。采用此方案需要做數(shù)據(jù)源的補(bǔ)足，保證內(nèi)容展示合理。
4）固定布局：
內(nèi)容在橫屏、豎屏狀態(tài)下始終展示固定，不受任何設(shè)備及屏幕尺寸影響。
5）分欄布局：
充分利用不同設(shè)備、不同屏幕尺寸的差異化，通過分欄布局形式重新對內(nèi)容展示做位置變化，進(jìn)行整個屏幕更合理化的分配。此布局頁面結(jié)構(gòu)產(chǎn)生變化，需要重構(gòu)UI框架，有一定的開發(fā)成本。
b. 不同終端的針對性調(diào)整
為了滿足各終端用戶的使用習(xí)慣，我們更進(jìn)一步的探究各終端的用戶畫像及設(shè)備特性，思考各端差異化賦能和機(jī)會點(diǎn)。
1）以平板端為例：
手機(jī)為我們基準(zhǔn)端，當(dāng)它映射到平板端時，屏幕大小的差異特別明顯，這時我們需要考慮如何合理的利用屏幕；
平板端擁有大屏幕尺寸的優(yōu)勢，還有多任務(wù)的差異化模式，我們需要針對同設(shè)備上屏幕比例切換做響應(yīng)式適配，自動調(diào)整相對應(yīng)的頁面布局與元素。
示例：
手機(jī)端布局大部分是單、雙列布局，但通過響應(yīng)式適配映射，我們能根據(jù)不同的終端實(shí)現(xiàn)不同的頁面變化布局，更好的利用了大屏設(shè)備的優(yōu)勢。
2）以車機(jī)端為例：
不同車機(jī)的屏幕尺寸多種多樣，目前主流的屏幕分為橫向屏幕比例、豎向屏幕比例兩大類，所以車機(jī)應(yīng)用需要兼顧橫向、豎向兩種屏幕布局，頁面能夠動態(tài)調(diào)整內(nèi)容的顯示，以滿足不同尺寸設(shè)備的適配需求。
基于對用戶觀察模型的研究分析得出，用戶使用手機(jī)距離約為30公分，但駕駛艙對車機(jī)屏幕的使用距離約為70公分，這時我們面對的不僅僅是屏幕大小、分辨率的差異，還有用戶使用距離的差異。
我們在車機(jī)的適配映射上除了對功能的簡化外，還針對展示上做了放大處理，界面元素大小需要達(dá)到手機(jī)基準(zhǔn)端的2倍，才能更好的保障用戶的易讀與易操作的良好體驗(yàn)。
藍(lán)藍(lán)設(shè)計(www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗(yàn)設(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è)計公司、用戶體驗(yàn)公司、軟件界面設(shè)計公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。
藍(lán)藍(lán)設(shè)計的小編 http://www.wnxcall.com