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

流水一樣的響應式設計

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

更多響應式干貨：

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

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

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

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

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

第一區(qū)間 1024 以下

第二區(qū)間 1024~1280

第三區(qū)間 1280~1366

第四區(qū)間 1366~1440

第五區(qū)間 1440~1600

第六區(qū)間 1600~1920

第七區(qū)間 1920~∞

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

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

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

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

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

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

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

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

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

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

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

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

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

大小窗體內容區(qū)域寬度不變

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文本等高刪減

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

文本換行

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

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

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

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

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

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

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

圖片等高裁剪

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

圖片等比縮放

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

八、綜述

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

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

Happy work and happy life！

歡迎關注團隊微信公眾號：兆日 UCD