當(dāng)拉伸釘釘 PC 客戶端窗體的時候，內(nèi)容會像流水一樣隨著窗體的大小改變布局或形狀。窗體大小的改變帶來的內(nèi)容布局的調(diào)整對于用戶來說是無感知的，這種絲滑自然的體驗得益于釘釘 PC 客戶端響應(yīng)式的適配方案。

流水一樣的響應(yīng)式設(shè)計

下面我們以釘釘 PC 客戶端為例，來解析它的適配方案，以便我們設(shè)計師能主動地把控產(chǎn)品在各種設(shè)備上的良好體驗。

一、確認(rèn)用戶設(shè)備的屏幕尺寸區(qū)間

響應(yīng)式布局的本質(zhì)是通過識別用戶設(shè)備屏幕的尺寸環(huán)境，選擇最佳的內(nèi)容展示方式，讓頁面有能力在所有設(shè)備環(huán)境中保持良好的用戶體驗。因此，制定適配方案的第一步，就是先確定產(chǎn)品適用的屏幕尺寸區(qū)間。

320~1920 基本上是所有設(shè)備屏幕寬度的尺寸范圍，320、360、480、768、1024、1280、1366、1440、1600、1920 這些尺寸是各設(shè)備中占比較多的屏幕寬度。

需要根據(jù)產(chǎn)品定位收集所有用戶設(shè)備覆蓋的尺寸范圍及核心用戶設(shè)備的屏幕尺寸，然后將屏幕尺寸范圍根據(jù)斷點分為幾個區(qū)間。

根據(jù)用戶使用場景、商業(yè)價值、技術(shù)及維護(hù)成本等因素，一般將 PC 客戶端適用的屏幕尺寸區(qū)間定義為：

第一區(qū)間 1024 以下

第二區(qū)間 1024~1280

第三區(qū)間 1280~1366

第四區(qū)間 1366~1440

第五區(qū)間 1440~1600

第六區(qū)間 1600~1920

第七區(qū)間 1920~∞

實際在制定適配方案時，區(qū)間不會劃分這么細(xì)，除非頁面上有比較復(fù)雜的組件，需要一個區(qū)間一個區(qū)間調(diào)整代碼以保證觀感最佳。如果頁面內(nèi)容較少，布局較簡單，只需要考慮 1366 以下、1366~1920、1920 以上 3 個區(qū)間的適配規(guī)則即可。

二、確定每個區(qū)間客戶端窗體的默認(rèn)尺寸、最小尺寸

接著，需要以頁面內(nèi)容展示的完整性和屏幕空間的利用率為衡量指標(biāo)來確定每個區(qū)間客戶端窗體的默認(rèn)尺寸和最小尺寸。

經(jīng)過測試，釘釘 PC 客戶端在各屏幕尺寸區(qū)間的窗體尺寸如下（粗略測量數(shù)據(jù)可能有偏差）：

小屏幕上，客戶端的窗體大小基本等于屏幕分辨率，也就是窗體最大化后的尺寸。準(zhǔn)確來說，窗體最大化后的高度是屏幕分辨率的高度減去系統(tǒng)任務(wù)欄的高度。在制定窗體默認(rèn)尺寸和最小尺寸的時候，要注意這一點，不然很可能出現(xiàn)窗體下方被任務(wù)欄擋住的情況。另外，測試過程中發(fā)現(xiàn)，雖然釘釘對 1366 以下的屏幕也進(jìn)行了適配，但也只是保證界面元素不重疊、不錯亂，不會再保證內(nèi)容顯示的完整性了。

釘釘 PC 客戶端主要使用了兩個窗體臨界值，1024*726 和 975*600，為什么定義這個尺寸，還無從考證，有興趣的朋友可以一起探討下。

在制定我們自己的適配方案時，如果找不到計算窗體大小的理論依據(jù)，可以借鑒釘釘 PC 客戶端的這套規(guī)則，當(dāng)然也可以根據(jù)自身產(chǎn)品特性進(jìn)行窗體默認(rèn)尺寸和最小尺寸的調(diào)整。比如說如果把最小高度設(shè)成 620，剛好能讓側(cè)邊欄菜單完全顯示處理，那設(shè)成 620 就是合理的。只要適配出來的效果好，就是正確的規(guī)則。

三、確定內(nèi)容區(qū)域是隨窗體伸縮，還是保持固定寬度

確定好窗體尺寸的適配規(guī)則后，接著要確定當(dāng)前頁面內(nèi)容區(qū)域的適配規(guī)則。

內(nèi)容區(qū)域的適配規(guī)則一般有 3 種：

①保持內(nèi)容區(qū)域兩側(cè)與窗體邊緣的留白寬度不變，內(nèi)容區(qū)域隨著窗體伸縮而伸縮。此種適配規(guī)則適合工作臺、管理后臺，因為內(nèi)容區(qū)域隨窗體拉伸而變大，可以在界面上看到更多信息，提高多任務(wù)多線程操作的工作效率。

大小窗體內(nèi)容區(qū)域的變化效果對比

②兩側(cè)留白寬度隨著窗體大小改變，內(nèi)容區(qū)域保持固定寬度。此種適配規(guī)則的選用更多是為了用最低成本實現(xiàn)跨終端全尺寸設(shè)備兼容。

大小窗體內(nèi)容區(qū)域?qū)挾炔蛔?/span>

③混合式。從下圖圖可以看出，釘釘 PC 客戶端同一個頁面的適配規(guī)則并不是單一的。在一定窗體尺寸范圍內(nèi)，內(nèi)容區(qū)域跟隨窗體拉伸，邊距幾乎保持不變或成比例變化，當(dāng)窗體大小超過了某個尺寸之后，內(nèi)容區(qū)域?qū)挾乳_始保持固定，邊距開始變大。

此種適配規(guī)則是目前客戶端和 web 最常用的適配規(guī)則，這種方式可以保證在一定窗體尺寸下，用戶能盡可能多地獲取信息，極大提高了屏效，也可以規(guī)避超過某個窗體尺寸后，內(nèi)容區(qū)域無限拉伸造成的視覺動線過長進(jìn)而引起視覺疲勞的問題。

混合適配規(guī)則示意圖

四、確定界面上的固定尺寸

一般元素與元素之間、卡片與卡片之間的間距會設(shè)為固定間距，無論其他內(nèi)容如何響應(yīng)，固定間距始終保持不變。下圖中 1~9 處，都是固定間距。

為了防止頁面抖動，也會把一些元素或卡片的尺寸設(shè)為固定尺寸。下圖中 10、11、12、13 處，搜索組件、banner、待辦模塊、日志模塊都為固定尺寸，這樣處理既保證了頁面的穩(wěn)定性，又減輕了適配工作量。至于固定尺寸定為多少，就要看最小窗體尺寸承載多大的元素能保證視覺效果依然出色。

大小窗體界面上的固定尺寸

五、確定卡片（模塊）的布局變化規(guī)則

卡片的布局變化規(guī)則有 3 種：

①卡片位置變化；此種變化規(guī)則多適用于九宮格卡片布局，當(dāng)窗體拉大時，一行多排幾張，當(dāng)窗體縮小時，一行少排幾張，溢出的換行展示。

卡片隨窗體尺寸發(fā)生位置變化

②卡片展示方式（布局）改變；此種變化規(guī)則多適用于跨終端的響應(yīng)式設(shè)計。電腦端的布局往往無法直接塞進(jìn)手機(jī)端界面上，這時候就需要改變元素的大小、形狀、數(shù)量、位置等屬性，呈現(xiàn)出帶來愉悅體驗的移動端布局。這里看似兩套界面，實則是基于一套界面再通過代碼修剪出來的另一套界面，跟自適應(yīng)需要設(shè)計兩套界面再根據(jù)視口分辨率分別請求界面的原理是不一樣的。

卡片隨窗體尺寸發(fā)生布局改變

③卡片數(shù)量改變。此種變化規(guī)則多適用于跨終端的響應(yīng)式設(shè)計。比如說 web 上可以展示 8 個熱門產(chǎn)品，到移動端，因為屏幕空間有限，首屏只能展示 4 個熱門產(chǎn)品，其他要用抽屜收起來，這時候就需要跟運營或業(yè)務(wù)同事溝通櫥窗產(chǎn)品的取舍問題。

卡片隨窗體尺寸發(fā)生數(shù)量變化

卡片布局是十分常見的響應(yīng)式布局，也是響應(yīng)式柵格系統(tǒng)運用最多的地方，感興趣的朋友可以深入了解一下柵格系統(tǒng)，這里不再鋪開解析。

六、確定文本是等高截取，還是換行

文本拉伸規(guī)則有以下兩種：

①容器尺寸縮小時，只保留容器內(nèi)文本，刪減溢出部分。這種情況下容器高度保持不變；

文本等高刪減

②容器尺寸縮小時，不刪減文本，做換行處理。此時容器高度可能會改變。

文本換行

下圖是阿里云管理后臺的界面，很多地方都能看到文本拉伸規(guī)則的應(yīng)用效果。通過 1 和 3 處的對比，可以發(fā)現(xiàn)，為了使提示信息顯示完整，提示信息使用的是第 2 種適配規(guī)則，即換行處理。

通過 2 和 4 處的對比，可以發(fā)現(xiàn)，廣告位上的標(biāo)題采用了第 1 種適配規(guī)則，副標(biāo)題采用了第 2 種適配規(guī)則，究其原因，這樣的處理方式呈現(xiàn)出來的視覺效果最協(xié)調(diào)。實際工作中，選用哪種適配規(guī)則，一定是業(yè)務(wù)訴求、用戶需求、體驗一致性、視覺效果等綜合作用的結(jié)果。

1366 分辨率下的阿里云后臺界面

1920 分辨率下的阿里云后臺界面

七、確定圖片是等高裁剪，還是等比拉伸

圖片拉伸規(guī)則有以下兩種：

①容器尺寸改變時，始終保持高度不變，裁剪圖片；

圖片等高裁剪

②容器尺寸改變時，等比縮放。

圖片等比縮放

圖片拉伸規(guī)則在 banner 或廣告圖中運用的最多，這里給各位讀者出個測試題：上圖中，2 和 4 處的廣告背景圖片使用是哪種圖片拉伸規(guī)則？

八、綜述

上面提到的幾種常見要素的適配規(guī)則，是以最小顆粒度說明的，實際產(chǎn)品設(shè)計中會遇到很多復(fù)雜的組件，可能是圖片+文字，可能是卡片+文字+圖片等異形組合，遇到的時候不要慌，先分析組件里的最小元素的適配規(guī)則，然后再通過各元素的大小、形狀、數(shù)量、位置變化合并成一套適配方案?？傊`活運用，效果為大。

雖然很多時候開發(fā)同事會根據(jù)以往經(jīng)驗或既有規(guī)范開展適配工作，而無需設(shè)計師提供適配方案，但如果設(shè)計師能了解適配規(guī)則，在進(jìn)行全用戶設(shè)備場景系統(tǒng)性體驗設(shè)計時就能游刃有余。

Happy work and happy life！

作者：兆日 UCD