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

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

下面我們以釘釘 PC 客戶端為例，來(lái)解析它的適配方案，以便我們?cè)O(shè)計(jì)師能主動(dòng)地把控產(chǎn)品在各種設(shè)備上的良好體驗(yàn)。

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

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

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

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

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

第一區(qū)間 1024 以下

第二區(qū)間 1024~1280

第三區(qū)間 1280~1366

第四區(qū)間 1366~1440

第五區(qū)間 1440~1600

第六區(qū)間 1600~1920

第七區(qū)間 1920~∞

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文本等高刪減

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

文本換行

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

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

1366 分辨率下的阿里云后臺(tái)界面

1920 分辨率下的阿里云后臺(tái)界面

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

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

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

圖片等高裁剪

②容器尺寸改變時(shí)，等比縮放。

圖片等比縮放

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

八、綜述

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

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

Happy work and happy life！

作者：兆日 UCD