以釘釘 PC 客戶端爲例談適配方案
當拉伸釘釘 PC 客戶端窗體的時候，內容會像流水一樣隨着窗體的大小改變佈局或形狀。窗體大小的改變帶來的內容佈局的調整對於用戶來說是無感知的，這種絲滑自然的體驗得益於釘釘 PC 客戶端響應式的適配方案。
流水一樣的響應式設計
下面我們以釘釘 PC 客戶端爲例，來解析它的適配方案，以便我們設計師能主動地把控產品在各種設備上的良好體驗。
一、確認用戶設備的屏幕尺寸區間
響應式佈局的本質是通過識別用戶設備屏幕的尺寸環境，選擇最佳的內容展示方式，讓頁面有能力在所有設備環境中保持良好的用戶體驗。因此，制定適配方案的第一步，就是先確定產品適用的屏幕尺寸區間。
320~1920 基本上是所有設備屏幕寬度的尺寸範圍，320、360、480、768、1024、1280、1366、1440、1600、1920 這些尺寸是各設備中佔比較多的屏幕寬度。
需要根據產品定位收集所有用戶設備覆蓋的尺寸範圍及核心用戶設備的屏幕尺寸，然後將屏幕尺寸範圍根據斷點分爲幾個區間。
根據用戶使用場景、商業價值、技術及維護成本等因素，一般將 PC 客戶端適用的屏幕尺寸區間定義爲：
第一區間 1024 以下
第二區間 1024~1280
第三區間 1280~1366
第四區間 1366~1440
第五區間 1440~1600
第六區間 1600~1920
第七區間 1920~∞
實際在制定適配方案時，區間不會劃分這麼細，除非頁面上有比較複雜的組件，需要一個區間一個區間調整代碼以保證觀感最佳。如果頁面內容較少，佈局較簡單，只需要考慮 1366 以下、1366~1920、1920 以上 3 個區間的適配規則即可。
二、確定每個區間客戶端窗體的默認尺寸、最小尺寸
接着，需要以頁面內容展示的完整性和屏幕空間的利用率爲衡量指標來確定每個區間客戶端窗體的默認尺寸和最小尺寸。
經過測試，釘釘 PC 客戶端在各屏幕尺寸區間的窗體尺寸如下（粗略測量數據可能有偏差）：
小屏幕上，客戶端的窗體大小基本等於屏幕分辨率，也就是窗體最大化後的尺寸。準確來說，窗體最大化後的高度是屏幕分辨率的高度減去系統任務欄的高度。在制定窗體默認尺寸和最小尺寸的時候，要注意這一點，不然很可能出現窗體下方被任務欄擋住的情況。另外，測試過程中發現，雖然釘釘對 1366 以下的屏幕也進行了適配，但也只是保證界面元素不重疊、不錯亂，不會再保證內容顯示的完整性了。
釘釘 PC 客戶端主要使用了兩個窗體臨界值，1024726 和 975600，爲什麼定義這個尺寸，還無從考證，有興趣的朋友可以一起探討下。
在制定我們自己的適配方案時，如果找不到計算窗體大小的理論依據，可以借鑑釘釘 PC 客戶端的這套規則，當然也可以根據自身產品特性進行窗體默認尺寸和最小尺寸的調整。比如說如果把最小高度設成 620，剛好能讓側邊欄菜單完全顯示處理，那設成 620 就是合理的。只要適配出來的效果好，就是正確的規則。
三、確定內容區域是隨窗體伸縮，還是保持固定寬度
確定好窗體尺寸的適配規則後，接着要確定當前頁面內容區域的適配規則。
內容區域的適配規則一般有 3 種：
- 保持內容區域兩側與窗體邊緣的留白寬度不變，內容區域隨着窗體伸縮而伸縮。此種適配規則適合工作臺、管理後臺，因爲內容區域隨窗體拉伸而變大，可以在界面上看到更多信息，提高多任務多線程操作的工作效率。
大小窗體內容區域的變化效果對比
- 兩側留白寬度隨着窗體大小改變，內容區域保持固定寬度。此種適配規則的選用更多是爲了用最低成本實現跨終端全尺寸設備兼容。
大小窗體內容區域寬度不變
- 混合式。從下圖圖可以看出，釘釘 PC 客戶端同一個頁面的適配規則並不是單一的。在一定窗體尺寸範圍內，內容區域跟隨窗體拉伸，邊距幾乎保持不變或成比例變化，當窗體大小超過了某個尺寸之後，內容區域寬度開始保持固定，邊距開始變大。
此種適配規則是目前客戶端和 web 最常用的適配規則，這種方式可以保證在一定窗體尺寸下，用戶能儘可能多地獲取信息，極大提高了屏效，也可以規避超過某個窗體尺寸後，內容區域無限拉伸造成的視覺動線過長進而引起視覺疲勞的問題。
混合適配規則示意圖
四、確定界面上的固定尺寸
一般元素與元素之間、卡片與卡片之間的間距會設爲固定間距，無論其他內容如何響應，固定間距始終保持不變。下圖中 1~9 處，都是固定間距。
爲了防止頁面抖動，也會把一些元素或卡片的尺寸設爲固定尺寸。下圖中 10、11、12、13 處，搜索組件、banner、待辦模塊、日誌模塊都爲固定尺寸，這樣處理既保證了頁面的穩定性，又減輕了適配工作量。至於固定尺寸定爲多少，就要看最小窗體尺寸承載多大的元素能保證視覺效果依然出色。
大小窗體界面上的固定尺寸
五、確定卡片（模塊）的佈局變化規則
卡片的佈局變化規則有 3 種：
- 卡片位置變化；此種變化規則多適用於九宮格卡片佈局，當窗體拉大時，一行多排幾張，當窗體縮小時，一行少排幾張，溢出的換行展示。
卡片隨窗體尺寸發生位置變化
- 卡片展示方式（佈局）改變；此種變化規則多適用於跨終端的響應式設計。電腦端的佈局往往無法直接塞進手機端界面上，這時候就需要改變元素的大小、形狀、數量、位置等屬性，呈現出帶來愉悅體驗的移動端佈局。這裏看似兩套界面，實則是基於一套界面再通過代碼修剪出來的另一套界面，跟自適應需要設計兩套界面再根據視口分辨率分別請求界面的原理是不一樣的。
卡片隨窗體尺寸發生佈局改變
- 卡片數量改變。此種變化規則多適用於跨終端的響應式設計。比如說 web 上可以展示 8 個熱門產品，到移動端，因爲屏幕空間有限，首屏只能展示 4 個熱門產品，其他要用抽屜收起來，這時候就需要跟運營或業務同事溝通櫥窗產品的取捨問題。
卡片隨窗體尺寸發生數量變化
卡片佈局是十分常見的響應式佈局，也是響應式柵格系統運用最多的地方，感興趣的朋友可以深入瞭解一下柵格系統，這裏不再鋪開解析。
六、確定文本是等高截取，還是換行
文本拉伸規則有以下兩種：
- 容器尺寸縮小時，只保留容器內文本，刪減溢出部分。這種情況下容器高度保持不變；
文本等高刪減
- 容器尺寸縮小時，不刪減文本，做換行處理。此時容器高度可能會改變。
文本換行
下圖是阿里雲管理後臺的界面，很多地方都能看到文本拉伸規則的應用效果。通過 1 和 3 處的對比，可以發現，爲了使提示信息顯示完整，提示信息使用的是第 2 種適配規則，即換行處理。
通過 2 和 4 處的對比，可以發現，廣告位上的標題採用了第 1 種適配規則，副標題採用了第 2 種適配規則，究其原因，這樣的處理方式呈現出來的視覺效果最協調。實際工作中，選用哪種適配規則，一定是業務訴求、用戶需求、體驗一致性、視覺效果等綜合作用的結果。
1366 分辨率下的阿里雲後臺界面
1920 分辨率下的阿里雲後臺界面
七、確定圖片是等高裁剪，還是等比拉伸
圖片拉伸規則有以下兩種：
- 容器尺寸改變時，始終保持高度不變，裁剪圖片；
圖片等高裁剪
- 容器尺寸改變時，等比縮放。
圖片等比縮放
圖片拉伸規則在 banner 或廣告圖中運用的最多，這裏給各位讀者出個測試題：上圖中，2 和 4 處的廣告背景圖片使用是哪種圖片拉伸規則？
八、綜述
上面提到的幾種常見要素的適配規則，是以最小顆粒度說明的，實際產品設計中會遇到很多複雜的組件，可能是圖片 + 文字，可能是卡片 + 文字 + 圖片等異形組合，遇到的時候不要慌，先分析組件裏的最小元素的適配規則，然後再通過各元素的大小、形狀、數量、位置變化合併成一套適配方案。總之，靈活運用，效果爲大。
雖然很多時候開發同事會根據以往經驗或既有規範開展適配工作，而無需設計師提供適配方案，但如果設計師能瞭解適配規則，在進行全用戶設備場景系統性體驗設計時就能遊刃有餘。
Happy work and happy life！
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/DVt4-QcTJeViC4GJvVg7sg