我們在制定全局框架時，對于組件和響應(yīng)式設(shè)計可能沒有那么熟練，不知道如何進行調(diào)整，作者總結(jié)了詳細的做法，希望對你有所幫助。

一、全局框架中的組件

1. 浮層組件

（1）全局提示

全局提示是指在全局場景中都會觸發(fā)的通知、警示、反饋的懸浮組件類型。通常，全局提示包含兩種類型的組件：

我們需要根據(jù)項目的實際情況，選擇需要使用的類型，再為它們分配嚴(yán)格的使用場景和觸發(fā)條件。比如：

• Meassage：斷網(wǎng)、上傳失敗、已登出、暫無權(quán)限…
• Notification：站內(nèi)信、用戶留言、進度通知…

當(dāng)然，也并不是每個項目都要使用到這兩個組件。有時候為了精簡懸浮內(nèi)容，可以只使用 Meassage 來覆蓋所有通知內(nèi)容，比如將 Notification 的大段文本內(nèi)容去掉，在提示中添加一個 ”查看按鈕“ 讓用戶進行跳轉(zhuǎn)做替代。

確定好使用的類型以后，才能制定它們的交互方式。分別顯示在頁面的哪個位置，對齊的模式，多通知堆疊的邏輯等等。

（2）對話框彈窗

對話框彈窗也可以叫模態(tài)（Modal）彈窗，只要用來指應(yīng)用了黑色透明遮罩的懸浮窗口。這類窗口通常是用來促使用戶必須關(guān)注彈窗內(nèi)容，并完成對應(yīng)操作后才能進行后續(xù)操作。

對話框彈窗是一個非常靈活的組件，可以作為多種內(nèi)容的載體形式，如：

• 重要提示：對刪除、修改、替換、登錄等場景進行二次確認(rèn)
• 信息公告：展示一些特定的信息，如站內(nèi)公告、注意事項、廣告信息等
• 表單操作：填寫一些基礎(chǔ)的表單，如數(shù)量設(shè)置、添加用戶、修改標(biāo)題等
• 彈窗頁面：基本可以理解成是將一個完整的頁面以彈窗的形式展示

對話彈窗因為它太靈活，所以很容易在項目中被濫用，導(dǎo)致整個項目各類對話框?qū)映霾桓F，缺乏統(tǒng)一的樣式和操作方法，尤其是作為頁面載體的彈窗。

所以，我們并不能把對話框彈窗只當(dāng)成一個組件，而是一個同類組件的合集。要針對每個分類制定對應(yīng)的應(yīng)用場景、內(nèi)容結(jié)構(gòu)、操作方式。

而表單、頁面型彈窗，還可以做進一步的分類（類似 PS 中不同類型的設(shè)置彈窗），比如表單包含基礎(chǔ)表單、穿梭表單、上傳表單等等。

（3）側(cè)邊抽屜

側(cè)邊抽屜是一個通常在右側(cè)打開的浮層，可以理解成是用來展示在右側(cè)的臨時頁面。

它的主要作用是讓用戶不用跳出當(dāng)前的頁面直接展開一些下級的頁面，如列表詳情、表單填寫、系統(tǒng)設(shè)置等等，提升用戶的頁面跳轉(zhuǎn)效率。

抽屜作為頁面的載體，如果要在項目中使用，就需要設(shè)計師在前期制定應(yīng)用的場景，或指定哪些頁面使用抽屜。要避免其應(yīng)用和獨立頁面、對話框產(chǎn)生沖突，這會非常影響使用體驗。

并且，還要決定打開抽屜是否要使用遮罩（模態(tài)），有的業(yè)務(wù)需求需要打開側(cè)邊欄后依舊保留左側(cè)區(qū)域的操作，盡量在項目中只使用一種形態(tài)。

（4）固釘元素

固釘元素我更喜歡叫固定元素，意思是固定在頁面某個位置的懸浮元素。

比如在 SAAS 系統(tǒng)右側(cè)的幫助、客服，或者設(shè)置、回到頂部、風(fēng)格切換等，都是可以長期在全局中存在的固定元素。

固釘元素沒有太復(fù)雜的設(shè)置，只要在前期確定有哪些按鈕、字段是需要做成固釘?shù)?，并確定它們所在的位置即可。

以上就是全局框架中包含的主要組件類型了，在項目設(shè)計過程中，就要根據(jù)需求提前設(shè)計它們的布局和交互方式，以此確定整個項目的基本操作路徑，為整個項目的交互方法奠基。

二、柵格和響應(yīng)式架構(gòu)

有了全局框架，就要考慮頁面的柵格和響應(yīng)式規(guī)則了。

因為主流電腦屏幕分辨率寬度從 1280-3440px 不等，在跨度這么大的顯示差異下，怎么保證產(chǎn)品的正常使用并平衡用戶體驗，就成為前期交互工作中的必要環(huán)節(jié)。

多數(shù)新手對柵格和響應(yīng)式的使用存在非常大的誤解，所以我會在下面對它們分別做出解釋。

1. B 端中的柵格制定

網(wǎng)頁中的柵格，是脫胎于平面網(wǎng)格系統(tǒng)的一種網(wǎng)頁格線系統(tǒng)，讓設(shè)計師使用平面排版的技巧來完成網(wǎng)頁的排版，可以很高效的輸出富有設(shè)計感的頁面。

早期的網(wǎng)頁柵格僅僅是在設(shè)計過程中輔助設(shè)計師排版的工具，在開發(fā)代碼中并不會有相關(guān)的體現(xiàn)。但隨著 HTML5 的登場， Bootstrap 響應(yīng)式框架的問世和普及，柵格就不再只是設(shè)計的工具，也成為開發(fā)用來制定頁面顯示邏輯、響應(yīng)規(guī)則的重要依據(jù)。

所以在主流的前端開源框架中，都會包含柵格的應(yīng)用說明。

但是，這些說明并不是作為柵格的應(yīng)用教學(xué)，而是 ——告訴你系統(tǒng)支持的柵格方式有哪些！

兩者之間是有天壤之別的，前者只是把規(guī)則做好，你去執(zhí)行就好。后者是提供了很多種方法和支持的方式，你得理解以后再自己制定。

所以，不管你有沒有用這些開源框架，都需要制定出一套符合項目需要的柵格規(guī)則，應(yīng)用在后續(xù)的界面設(shè)計和實際開發(fā)環(huán)節(jié)。

柵格系統(tǒng)的制定，就是在前期確定柵格的列數(shù)（Row）、列寬（Width）、外邊距（ Margin ）、列間隔（Gutter）。

其中，列數(shù)基本是以 24 列為主，除非有自己對項目應(yīng)用場景的想法，否則不會是用 12、16、20 列柵格。

而網(wǎng)頁中的列寬，則是一個變量數(shù)值，它是通過頁面寬度減去外邊距、列間距后除以列數(shù)得出的寬度。它的獲取公式：

列寬 = ( 頁面寬 – 列間隔總寬 – 外邊距總寬 ) / 24

這么做的目的是后面頁面寬度變更，列寬也會按比例縮放。所以列寬是一個非固定數(shù)值，不需要我們在這個階段制定。

而外邊距的制定則是重點，外邊距一般指柵格區(qū)域左右的留空區(qū)域，很多新手以為這個數(shù)值就像平面的出血線一樣，保證左右有一定留白就可以了。但實際上，這是用來告知瀏覽器哪些區(qū)域不參與響應(yīng)式的依據(jù)。

比如最常見的情況，就是移除左側(cè)導(dǎo)航欄的區(qū)域，不讓它們參與響應(yīng)式，因為大多數(shù)情況下，導(dǎo)航是一個定寬的組件，它沒有參與寬度變更的需要。

所以目前的軟件柵格設(shè)置中，都有單獨定義邊距的選項，符合真實項目的使用需要。

還有一些特殊的場景，比如頁面右側(cè)可以展開聊天、日志、任務(wù)等面板（非浮層），這些面板也是定寬的，但會擠壓內(nèi)容區(qū)域，于是我們就會額外進行說明，哪些場景外邊距數(shù)值會變更。

最后，就是列間隔數(shù)值的制定。列間隔一般以 4 的倍數(shù)為主，要用 5 的倍數(shù)也可以，這個數(shù)值決定了布局的寬松程度。設(shè)置柵格唯一的標(biāo)準(zhǔn)，就是根據(jù)親密原則，不大于外邊距即可。

確定好參數(shù)，就要通過交互文檔或者創(chuàng)建標(biāo)準(zhǔn)的柵格系統(tǒng)畫布進行說明。

柵格的數(shù)值定義一定是要滿足指導(dǎo)后續(xù)頁面設(shè)計和布局要求的，而線上很多作品集中的柵格系統(tǒng)標(biāo)注漏洞百出，證明他們本身并沒有理解柵格的制定要素。

2. 項目的響應(yīng)式規(guī)則

如果完全理解柵格和響應(yīng)式的關(guān)系，應(yīng)該知道柵格定好了，那么響應(yīng)式的依據(jù)似乎也就有了，還需要制定什么響應(yīng)式的規(guī)則呢？

包含下面幾個關(guān)鍵的要素：頁面寬度支持、非響應(yīng)式頁面、組件響應(yīng)邏輯。

首先，頁面寬度支持就是確定一個可以觸發(fā)響應(yīng)式的畫布區(qū)間，因為響應(yīng)式不可能無差別適配所有寬度，比如只有 100px 的瀏覽器畫布寬，怎么適配？或者類似 32：9 的超寬屏幕比例，適配它有什么必要？

所以，盡量要提前制定出項目支持的最小和最大尺寸。最小尺寸建議不小于 800px，因為沒有適配移動端的必要，而最大寬度支持到 2560px 即可，再寬的分辨率占比極低（ 4K屏幕會應(yīng)用 HIDPI 合并成 2K 或 1080p 而不是 3840 px 寬）。

第二就是確定不應(yīng)用響應(yīng)式頁面的情況，響應(yīng)式雖然看起來很萬能，但并不是所有頁面都需要使用響應(yīng)式，強行使用只會收獲反面效果。

比如基本的表單頁面、文本頁面、效果頁面等，都是使用定寬設(shè)計的效果會遠遠優(yōu)于響應(yīng)式。所以，我們要確定非響應(yīng)式的頁面場景，以及對應(yīng)的頁面框架（下一章節(jié)會具體說）。

第三組件響應(yīng)邏輯，就是下級組件中對于響應(yīng)式的支持情況。

這里要做個區(qū)分，有些組件是游離與響應(yīng)規(guī)則之外的，比如前面提到的導(dǎo)航，還有彈窗、抽屜、固釘?shù)?，都是定寬即可的元素，沒必要參與響應(yīng)規(guī)則。

但是需要應(yīng)用到響應(yīng)的組件，就需要為它們分配基本的響應(yīng)邏輯。舉個例子，前面提到的內(nèi)容模塊組件，就可以制定固定內(nèi)間距、標(biāo)題左對齊、按鈕居中對齊的適配規(guī)則，來滿足頁面的響應(yīng)需要。

同理，一些非常復(fù)雜的大型組件，也需要在前期做好響應(yīng)適配的規(guī)則制定，如表格、層級穿梭框、列表等，就不在這里展開，我們會在之后的組件交互章節(jié)具體說明。

最后，還有一個在響應(yīng)式架構(gòu)中非常重要的參數(shù) —— 斷點 BreakPoint，我沒有提，就是因為它在 B 端項目中能夠發(fā)揮的作用并不是太大，引入斷點的概念會讓上方的組件響應(yīng)邏輯復(fù)雜幾個量級。

所以前面我強調(diào)了支持最小和最大的顯示區(qū)間，就是為了盡可能杜絕頁面過窄過寬從而必須應(yīng)用斷點適配的問題。

當(dāng)然上方的參數(shù)都是個人建議，如果你項目經(jīng)驗豐富，對于參數(shù)的應(yīng)用和響應(yīng)式規(guī)則了如執(zhí)掌，可以隨心所欲的駕馭數(shù)值，就不需要被我的建議還其它條條框框束縛，大膽發(fā)揮……