社群中對 B 端管理界面設(shè)計(jì)中，問得最多的，就是我們?nèi)绾味x管理界面畫布尺寸，今天就針對這個(gè)問題來好好解答一下。

管理界面寬度解析

B 端管理界面設(shè)計(jì)，本質(zhì)上就是網(wǎng)頁設(shè)計(jì)的一種，所以在諸多規(guī)范和限制上要遵循 WEB 設(shè)計(jì)的基本法。

普通網(wǎng)頁尺寸的定義上，分成響應(yīng)式和非響應(yīng)式兩種，響應(yīng)式設(shè)計(jì)我一向建議大家取中間尺寸 1440px 寬作為主要設(shè)計(jì)對象，而非響應(yīng)式的定寬設(shè)計(jì)則使用小于 1280px 的設(shè)計(jì)。

網(wǎng)頁設(shè)計(jì)寬度制定我們之前做過對應(yīng)的分享，大家可以去回顧一下：

網(wǎng)頁寬度到底該怎么定？

B 端項(xiàng)目的設(shè)計(jì)，優(yōu)先要確認(rèn)，是響應(yīng)還是定寬的設(shè)計(jì)框架，不要認(rèn)為管理界面一定是使用響應(yīng)式布局，經(jīng)驗(yàn)豐富的設(shè)計(jì)師會在項(xiàng)目開始前對頁面的框架做預(yù)判，有很多業(yè)務(wù)類型使用內(nèi)容定寬的結(jié)構(gòu)遠(yuǎn)遠(yuǎn)比使用響應(yīng)式高效。

例如淘寶、視頻網(wǎng)站的管理后臺：

如果使用定寬的模式，那么基本上中央內(nèi)容的區(qū)域都只會控制在 1200 以內(nèi)，這時(shí)候創(chuàng)建 1440 或者 1280 寬的畫布都沒有問題。

而如果使用響應(yīng)式的框架，那么問題就會開始復(fù)雜起來了，涉及到用戶常用分辨率類型統(tǒng)計(jì)以及響應(yīng)式概念。

首先說用戶常用分辨率問題，做 B 端設(shè)計(jì)最容易犯的錯誤，就是找全網(wǎng)平均數(shù)值。B 端產(chǎn)品和 C 端產(chǎn)品的基礎(chǔ)差異之一，就是 B 端是用來滿足更細(xì)分、特定的商業(yè)目標(biāo)受眾。

類似銀行、學(xué)校、超市等等，操作員可能使用的都是企業(yè)統(tǒng)一派發(fā)的顯示器或筆記本，這種情況并不需要你去統(tǒng)計(jì)其它渠道的數(shù)據(jù)，只要了解清楚使用的是什么分辨率即可，以它作為主要輸出的畫布進(jìn)行創(chuàng)建。

換句話說，創(chuàng)建畫布是以 ——?實(shí)際應(yīng)用設(shè)備為考慮核心，你要去關(guān)注的是你的目標(biāo)用戶主要使用的設(shè)備，優(yōu)先確保這個(gè)尺寸中獲得最優(yōu)的體驗(yàn)，這個(gè)參數(shù)以外的其它分辨率都是次級考慮對象。

如果目標(biāo)用戶普遍采用 1280px 寬的商務(wù)筆記本，你就制定 1280px 寬，使用 1440、1680、1920 同理。

但是，不管主要用戶使用什么樣的高度，都要在這個(gè)高度上減 -100px （可調(diào)整）作為默認(rèn)畫布高，因?yàn)闉g覽器和 Windows 底欄都會占用屏幕的高度空間，適當(dāng)縮減默認(rèn)高度，可以確保一屏的內(nèi)容能顯示完。

如果響應(yīng)式設(shè)計(jì)針對的用戶沒有使用固定設(shè)備，比如開放式 SAAS 服務(wù) Teambition、語雀等工具。那么我們首先要支持和考慮的分辨率都以 1280px 或 1440px 為標(biāo)準(zhǔn)。

因?yàn)閷τ陧憫?yīng)式的特點(diǎn)來說，從小往大適配容易，但是從大往小適配問題就特別多。以 1920px 寬設(shè)計(jì)的界面在面向小尺寸屏幕的時(shí)候多數(shù)都很不友好，甚至到了部分頁面無法正常使用的地步。

所以，針對響應(yīng)式的設(shè)計(jì)，優(yōu)先輸出小版本的尺寸，然后再設(shè)給出適配的方案進(jìn)行調(diào)試即可。除非你們的老板、產(chǎn)品強(qiáng)行要求使用 1080p 進(jìn)行設(shè)計(jì)，否則我都建議大家創(chuàng)建 1440px * （900-100）px 的畫布。

結(jié)尾

很不幸，創(chuàng)建 B 端項(xiàng)目畫布就是不能使用一個(gè)通用，沒有爭議，沒有開發(fā)阻力和落地痛點(diǎn)的尺寸，需要大家自己做出思考和判斷。

所以，為了防止大家在這個(gè)過程繞暈，將前面的觀點(diǎn)制作成的表格便于理解：

B端的部分會以每篇分享一個(gè)簡單的知識點(diǎn)展開，鴻篇巨制就要等基礎(chǔ)的知識點(diǎn)更完以后再做。