2.1.2 浮層組件

1.全局提示

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

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

Meassage：斷網(wǎng)、上傳失敗、已登出、暫無(wú)權(quán)限…

Notification：站內(nèi)信、用戶留言、進(jìn)度通知…

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

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

2.對(duì)話框彈窗

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

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

重要提示：對(duì)刪除、修改、替換、登錄等場(chǎng)景進(jìn)行二次確認(rèn)

信息公告：展示一些特定的信息，如站內(nèi)公告、注意事項(xiàng)、廣告信息等

表單操作：填寫(xiě)一些基礎(chǔ)的表單，如數(shù)量設(shè)置、添加用戶、修改標(biāo)題等

彈窗頁(yè)面：基本可以理解成是將一個(gè)完整的頁(yè)面以彈窗的形式展示

對(duì)話彈窗因?yàn)樗`活，所以很容易在項(xiàng)目中被濫用，導(dǎo)致整個(gè)項(xiàng)目各類(lèi)對(duì)話框?qū)映霾桓F，缺乏統(tǒng)一的樣式和操作方法，尤其是作為頁(yè)面載體的彈窗。

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

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

3.側(cè)邊抽屜

側(cè)邊抽屜是一個(gè)通常在右側(cè)打開(kāi)的浮層，可以理解成是用來(lái)展示在右側(cè)的臨時(shí)頁(yè)面。

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

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

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

4.固釘元素

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

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

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

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

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

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

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

2.2.1 B 端中的柵格制定

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

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

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

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

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

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

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

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

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

列寬 = ( 頁(yè)面寬 - 列間隔總寬 - 外邊距總寬 ) / 24

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

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

比如最常見(jiàn)的情況，就是移除左側(cè)導(dǎo)航欄的區(qū)域，不讓它們參與響應(yīng)式，因?yàn)榇蠖鄶?shù)情況下，導(dǎo)航是一個(gè)定寬的組件，它沒(méi)有參與寬度變更的需要。

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

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

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

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

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

2.2.2 項(xiàng)目的響應(yīng)式規(guī)則

如果完全理解柵格和響應(yīng)式的關(guān)系，應(yīng)該知道柵格定好了，那么響應(yīng)式的依據(jù)似乎也就有了，還需要制定什么響應(yīng)式的規(guī)則呢？包含下面幾個(gè)關(guān)鍵的要素：頁(yè)面寬度支持、非響應(yīng)式頁(yè)面、組件響應(yīng)邏輯。首先，頁(yè)面寬度支持就是確定一個(gè)可以觸發(fā)響應(yīng)式的畫(huà)布區(qū)間，因?yàn)轫憫?yīng)式不可能無(wú)差別適配所有寬度，比如只有 100px 的瀏覽器畫(huà)布寬，怎么適配？或者類(lèi)似 32：9 的超寬屏幕比例，適配它有什么必要？

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

第二就是確定不應(yīng)用響應(yīng)式頁(yè)面的情況，響應(yīng)式雖然看起來(lái)很萬(wàn)能，但并不是所有頁(yè)面都需要使用響應(yīng)式，強(qiáng)行使用只會(huì)收獲反面效果。比如基本的表單頁(yè)面、文本頁(yè)面、效果頁(yè)面等，都是使用定寬設(shè)計(jì)的效果會(huì)遠(yuǎn)遠(yuǎn)優(yōu)于響應(yīng)式。所以，我們要確定非響應(yīng)式的頁(yè)面場(chǎng)景，以及對(duì)應(yīng)的頁(yè)面框架（下一章節(jié)會(huì)具體說(shuō)）。

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

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

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

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

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

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

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