推薦閱讀

一、研究背景

隨著信息技術的迅猛發展，人們獲取信息的方式日益多樣化，各種屏幕設備已成為我們日常交互的主要渠道。這一變化雖然極大地豐富了用戶體驗，但也為 UI 設計師們帶來了適配上的挑戰。

在移動互聯網的推動下，面向消費者的 C 端產品不斷涌現，市場競爭日益加劇。盡管如此，UI 設計領域已逐步建立起一套標準化的規范，包括字體、按鈕、布局等，不同廠商間的風格差異也逐漸縮小。

然而，在 web 端設計方面，盡管 ElementUI、AntUI、ArcoUI 等主流 UI 框架為設計師提供了基礎控件和柵格系統，但在界面適配的具體尺寸上，這些框架尚未提供詳盡的指導。

本文將探討 web 界面設計的適配策略，致力于找到一套能夠適應各種屏幕尺寸和設備類型的布局方案，旨在為 UI 設計師提供有效的設計參考和實踐指導。

二、當前問題

B 端 web 后臺設計涉及多種頁面類型，如儀表盤、表單、列表、詳情、結果、異常頁面以及彈窗和側邊抽屜等。不同設計師和企業展現出多樣化的設計風格。

1366×768 分辨率下：

1920×1080 分辨率下：

在表單設計中，一些設計師傾向于采用多列布局以優化空間利用，而另一些則更注重用戶體驗，選擇單列布局以簡化用戶的操作流程。

在設計詳情頁文本內容時，部分設計可能未能充分考慮閱讀效率，導致文本鋪滿整個頁面，增加了用戶的視線橫向移動負擔。相對地，更周到的設計會限定文本的最大寬度（例如 AntUI 設定了 750px）并采用自動換行，以優化用戶的閱讀體驗。

為了在各種頁面場景中實現設計的一致性，建立一套全面的設計規范至關重要。設計師能夠打造出既美觀又實用的界面，滿足用戶的多樣化需求。而首要步驟是確立一套明確的布局結構規范。

在《從微軟和蘋果的產品，聊聊 Web 端設計縱向分割趨勢》一文中，我分析了行業內的典型解決方案，提出了 web 端縱向分割設計的初步概念。近年來的 web 設計趨勢進一步證實了這一思路的有效性，在此基礎上我期望能進一步總結出一套適用于中后臺典型界面的通用適配規則。

相關閱讀

三、行業參考

Linear 等優秀的 web 設計項目通過其獨特的設計風格和高效的界面布局，為我們提供了寶貴的參考。特別是 Linear 在暗色背景下運用漸變、模糊、微噪點、外發光等設計元素，并結合無襯線字體和微動效，創造出既美觀又高效的界面。

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

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

②在屏幕寬度縮小時，左右兩側區域根據適應屏幕有不同的處理方式；

③對應內容板塊也可以放到抽屜中，無需額外的適配處理，節省設計開發成本，降低用戶學習成本；

表單頁面內容寬度限定最大寬度 640px，利用縱向的視線動向保障表單填寫的效率和規范。

四、推導規范

1. 內容寬度：640px，適用于：表單頁

①表單控件

Linear 以及很多國外的很多 web 設計中，表單的視線設計一直是自上而下縱向流動的，因為這樣更聚焦更高效。linear 限定表單寬度最大為 640px 居中，左右兩側均留白。

在 AntUI 的設計研究中，他們總結了表單最基礎的控件--輸入框/選擇框的寬度規范，分成了 XS/S/M/L/XL 5 檔寬度，運用 8px 網格，保障輸入框表單適應、整齊、美觀。

圖片來源：AntDesign

我們也參考了 AntUI 對輸入框寬度的規范，結合 Linear 的設計，經過多次測試后，我們確定了 XS/S/M/L 四種尺寸的輸入框，以適應不同的場景。

② 基礎表單

在表單設計中，我們確定了 640px 的最大內容寬度，以保證填寫效率。

對于信息輸入量較大的表單頁面，我們考慮采用分欄布局，將字段標簽和輸入控件上下排列，并根據頁面寬度確定分欄數。

③復雜表單

實際場景中常有一些復雜的流程當中需要填寫復雜的表單項，我們推薦給用戶有層次有秩序的填寫引導，表單具體內容依然保持 640px 寬，右側可放置填寫進度提示區。

2. 內容寬度 800px,適用于：詳情頁

①基礎詳情頁

我們定義了左側導航寬度為 220px，并設定了目錄樹寬度為 280px。在 1440px 的設計稿分辨率下，剩余的空間為 940px，在此范圍內我們選擇了 800px 作為詳情內容的寬度，以適應段落文本的最佳閱讀寬度范圍（50 到 75 個字符之間）。

②復雜詳情頁

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

3. 內容寬度自適應撐滿屏幕

適用場景：儀表盤、列表頁、復雜詳情頁

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

4. 彈窗、抽屜

在中后臺系統的設計中，跨模塊的內容調用是一種常見需求。為了簡化這一過程，我們將表單、詳情等關鍵內容封裝為可復用的通用信息單元。同時，考慮到彈窗和抽屜作為頁面內容展示的另一種形式，我們基于 640、800、自適應撐滿三個寬度檔位為彈窗和抽屜規定了不同的尺寸，這樣的設計確保了內容能夠在不同容器間無縫適配，無需進行額外的設計和開發工作。

結語

本文提出的 web 頁面寬度適配規則，旨在指導團隊設計師在不同產品和項目中保持設計的一致性和協作效率。經過 2 年的項目設計驗證，這一規范已幫助我們實現保障設計一致性，節省開發成本，并提升交付質量和效率。