中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

我們?cè)谥贫ㄈ挚蚣軙r(shí)，對(duì)于組件和響應(yīng)式設(shè)計(jì)可能沒有那么熟練，不知道如何進(jìn)行調(diào)整，作者總結(jié)了詳細(xì)的做法，希望對(duì)你有所幫助。

一、全局框架中的組件

1. 浮層組件

（1）全局提示

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

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

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

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

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

（2）對(duì)話框彈窗

對(duì)話框彈窗也可以叫模態(tài)（Modal）彈窗，只要用來指應(yīng)用了黑色透明遮罩的懸浮窗口。這類窗口通常是用來促使用戶必須關(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)、廣告信息等
• 表單操作：填寫一些基礎(chǔ)的表單，如數(shù)量設(shè)置、添加用戶、修改標(biāo)題等
• 彈窗頁面：基本可以理解成是將一個(gè)完整的頁面以彈窗的形式展示

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

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

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

（3）側(cè)邊抽屜

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

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

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

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

（4）固釘元素

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

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

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

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

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

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

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

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

1. B 端中的柵格制定

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

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

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

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

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

所以，不管你有沒有用這些開源框架，都需要制定出一套符合項(xiàng)目需要的柵格規(guī)則，應(yīng)用在后續(xù)的界面設(shè)計(jì)和實(shí)際開發(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)頁中的列寬，則是一個(gè)變量數(shù)值，它是通過頁面寬度減去外邊距、列間距后除以列數(shù)得出的寬度。它的獲取公式：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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