一、研究背景

隨著信息技術(shù)的迅猛發(fā)展，人們獲取信息的方式日益多樣化，各種屏幕設(shè)備已成為我們?nèi)粘＝换サ闹饕?。這一變化雖然極大地豐富了用戶體驗(yàn)，但也為 UI 設(shè)計(jì)師們帶來(lái)了適配上的挑戰(zhàn)。

在移動(dòng)互聯(lián)網(wǎng)的推動(dòng)下，面向消費(fèi)者的 C 端產(chǎn)品不斷涌現(xiàn)，市場(chǎng)競(jìng)爭(zhēng)日益加劇。盡管如此，UI 設(shè)計(jì)領(lǐng)域已逐步建立起一套標(biāo)準(zhǔn)化的規(guī)范，包括字體、按鈕、布局等，不同廠商間的風(fēng)格差異也逐漸縮小。

然而，在 web 端設(shè)計(jì)方面，盡管 ElementUI、AntUI、ArcoUI 等主流 UI 框架為設(shè)計(jì)師提供了基礎(chǔ)控件和柵格系統(tǒng)，但在界面適配的具體尺寸上，這些框架尚未提供詳盡的指導(dǎo)。

本文將探討 web 界面設(shè)計(jì)的適配策略，致力于找到一套能夠適應(yīng)各種屏幕尺寸和設(shè)備類(lèi)型的布局方案，旨在為 UI 設(shè)計(jì)師提供有效的設(shè)計(jì)參考和實(shí)踐指導(dǎo)。

二、當(dāng)前問(wèn)題

B 端 web 后臺(tái)設(shè)計(jì)涉及多種頁(yè)面類(lèi)型，如儀表盤(pán)、表單、列表、詳情、結(jié)果、異常頁(yè)面以及彈窗和側(cè)邊抽屜等。不同設(shè)計(jì)師和企業(yè)展現(xiàn)出多樣化的設(shè)計(jì)風(fēng)格。

1366×768 分辨率下：

1920×1080 分辨率下：

在表單設(shè)計(jì)中，一些設(shè)計(jì)師傾向于采用多列布局以優(yōu)化空間利用，而另一些則更注重用戶體驗(yàn)，選擇單列布局以簡(jiǎn)化用戶的操作流程。

在設(shè)計(jì)詳情頁(yè)文本內(nèi)容時(shí)，部分設(shè)計(jì)可能未能充分考慮閱讀效率，導(dǎo)致文本鋪滿整個(gè)頁(yè)面，增加了用戶的視線橫向移動(dòng)負(fù)擔(dān)。相對(duì)地，更周到的設(shè)計(jì)會(huì)限定文本的最大寬度（例如 AntUI 設(shè)定了 750px）并采用自動(dòng)換行，以優(yōu)化用戶的閱讀體驗(yàn)。

為了在各種頁(yè)面場(chǎng)景中實(shí)現(xiàn)設(shè)計(jì)的一致性，建立一套全面的設(shè)計(jì)規(guī)范至關(guān)重要。設(shè)計(jì)師能夠打造出既美觀又實(shí)用的界面，滿足用戶的多樣化需求。而首要步驟是確立一套明確的布局結(jié)構(gòu)規(guī)范。

在《從微軟和蘋(píng)果的產(chǎn)品，聊聊 Web 端設(shè)計(jì)縱向分割趨勢(shì)》一文中，我分析了行業(yè)內(nèi)的典型解決方案，提出了 web 端縱向分割設(shè)計(jì)的初步概念。近年來(lái)的 web 設(shè)計(jì)趨勢(shì)進(jìn)一步證實(shí)了這一思路的有效性，在此基礎(chǔ)上我期望能進(jìn)一步總結(jié)出一套適用于中后臺(tái)典型界面的通用適配規(guī)則。

三、行業(yè)參考

Linear 等優(yōu)秀的 web 設(shè)計(jì)項(xiàng)目通過(guò)其獨(dú)特的設(shè)計(jì)風(fēng)格和高效的界面布局，為我們提供了寶貴的參考。特別是 Linear 在暗色背景下運(yùn)用漸變、模糊、微噪點(diǎn)、外發(fā)光等設(shè)計(jì)元素，并結(jié)合無(wú)襯線字體和微動(dòng)效，創(chuàng)造出既美觀又高效的界面。

Linear 的版面布局與響應(yīng)式適配方面也為我們提供了許多靈感：

①下圖中的內(nèi)容詳情板塊，限定最大寬度 860px；

②在屏幕寬度縮小時(shí)，左右兩側(cè)區(qū)域根據(jù)適應(yīng)屏幕有不同的處理方式；

③對(duì)應(yīng)內(nèi)容板塊也可以放到抽屜中，無(wú)需額外的適配處理，節(jié)省設(shè)計(jì)開(kāi)發(fā)成本，降低用戶學(xué)習(xí)成本；

表單頁(yè)面內(nèi)容寬度限定最大寬度 640px，利用縱向的視線動(dòng)向保障表單填寫(xiě)的效率和規(guī)范。

四、推導(dǎo)規(guī)范

1. 內(nèi)容寬度：640px，適用于：表單頁(yè)

①表單控件

Linear 以及很多國(guó)外的很多 web 設(shè)計(jì)中，表單的視線設(shè)計(jì)一直是自上而下縱向流動(dòng)的，因?yàn)檫@樣更聚焦更高效。linear 限定表單寬度最大為 640px 居中，左右兩側(cè)均留白。

在 AntUI 的設(shè)計(jì)研究中，他們總結(jié)了表單最基礎(chǔ)的控件--輸入框/選擇框的寬度規(guī)范，分成了 XS/S/M/L/XL 5 檔寬度，運(yùn)用 8px 網(wǎng)格，保障輸入框表單適應(yīng)、整齊、美觀。

圖片來(lái)源：AntDesign

我們也參考了 AntUI 對(duì)輸入框?qū)挾鹊囊?guī)范，結(jié)合 Linear 的設(shè)計(jì)，經(jīng)過(guò)多次測(cè)試后，我們確定了 XS/S/M/L 四種尺寸的輸入框，以適應(yīng)不同的場(chǎng)景。

② 基礎(chǔ)表單

在表單設(shè)計(jì)中，我們確定了 640px 的最大內(nèi)容寬度，以保證填寫(xiě)效率。

對(duì)于信息輸入量較大的表單頁(yè)面，我們考慮采用分欄布局，將字段標(biāo)簽和輸入控件上下排列，并根據(jù)頁(yè)面寬度確定分欄數(shù)。

③復(fù)雜表單

實(shí)際場(chǎng)景中常有一些復(fù)雜的流程當(dāng)中需要填寫(xiě)復(fù)雜的表單項(xiàng)，我們推薦給用戶有層次有秩序的填寫(xiě)引導(dǎo)，表單具體內(nèi)容依然保持 640px 寬，右側(cè)可放置填寫(xiě)進(jìn)度提示區(qū)。

2. 內(nèi)容寬度 800px,適用于：詳情頁(yè)

①基礎(chǔ)詳情頁(yè)

我們定義了左側(cè)導(dǎo)航寬度為 220px，并設(shè)定了目錄樹(shù)寬度為 280px。在 1440px 的設(shè)計(jì)稿分辨率下，剩余的空間為 940px，在此范圍內(nèi)我們選擇了 800px 作為詳情內(nèi)容的寬度，以適應(yīng)段落文本的最佳閱讀寬度范圍（50 到 75 個(gè)字符之間）。

②復(fù)雜詳情頁(yè)

對(duì)于包含表格、流程圖或其他復(fù)雜信息的詳情頁(yè)，我們采用自適應(yīng)布局設(shè)計(jì)，使內(nèi)容能夠充分利用可用屏幕空間，以確保信息的全面展示和用戶的高效交互。

3. 內(nèi)容寬度自適應(yīng)撐滿屏幕

適用場(chǎng)景：儀表盤(pán)、列表頁(yè)、復(fù)雜詳情頁(yè)

鑒于這些頁(yè)面通常包含大量信息，采用全屏寬度的布局能夠最大化信息展示區(qū)域，為用戶提供更為直觀和豐富的視覺(jué)體驗(yàn)。

4. 彈窗、抽屜

在中后臺(tái)系統(tǒng)的設(shè)計(jì)中，跨模塊的內(nèi)容調(diào)用是一種常見(jiàn)需求。為了簡(jiǎn)化這一過(guò)程，我們將表單、詳情等關(guān)鍵內(nèi)容封裝為可復(fù)用的通用信息單元。同時(shí)，考慮到彈窗和抽屜作為頁(yè)面內(nèi)容展示的另一種形式，我們基于 640、800、自適應(yīng)撐滿三個(gè)寬度檔位為彈窗和抽屜規(guī)定了不同的尺寸，這樣的設(shè)計(jì)確保了內(nèi)容能夠在不同容器間無(wú)縫適配，無(wú)需進(jìn)行額外的設(shè)計(jì)和開(kāi)發(fā)工作。

結(jié)語(yǔ)

本文提出的 web 頁(yè)面寬度適配規(guī)則，旨在指導(dǎo)團(tuán)隊(duì)設(shè)計(jì)師在不同產(chǎn)品和項(xiàng)目中保持設(shè)計(jì)的一致性和協(xié)作效率。經(jīng)過(guò) 2 年的項(xiàng)目設(shè)計(jì)驗(yàn)證，這一規(guī)范已幫助我們實(shí)現(xiàn)保障設(shè)計(jì)一致性，節(jié)省開(kāi)發(fā)成本，并提升交付質(zhì)量和效率。

碧野青風(fēng)