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

這是目前最高效的Modal實(shí)現(xiàn)方式，希望對(duì)你有用，enjoy~

Modal簡介

彈窗、對(duì)話框、浮層，我們在網(wǎng)頁中會(huì)經(jīng)?？吹竭@些元件。這類元件統(tǒng)稱為Modal（模態(tài)對(duì)話框）。Modal一般使用在如下場景：需要用戶處理事務(wù)，又不希望跳轉(zhuǎn)頁面以致打斷工作流程時(shí)，可以使用?Modal?在當(dāng)前頁面正中打開一個(gè)浮層，承載相應(yīng)的操作。

特性

如下圖所示，這是一個(gè)最常規(guī)的Modal。

Modal通常呈現(xiàn)出以下幾個(gè)特點(diǎn)：

1、居中

Modal居中顯示，明確告知用戶當(dāng)前內(nèi)容必須進(jìn)行處理。

2、遮罩

將Modal外的內(nèi)容遮罩，引導(dǎo)用戶的視覺焦點(diǎn)到Modal上。

3、需手動(dòng)關(guān)閉

Modal是模態(tài)對(duì)話框，是必須要用戶做出操作才能繼續(xù)進(jìn)行下去的。

原型設(shè)計(jì)

在原型設(shè)計(jì)的過程中，pm能夠高效地實(shí)現(xiàn)Modal的制作，是很重要的。

高效的具體表現(xiàn)為：元件要少、用例要少、復(fù)用性高、邏輯清晰。

如下圖所示，這是一個(gè)Modal的高效實(shí)現(xiàn)方法。（預(yù)覽地址：https://c5zu4k.axshare.com）

該方法使用了3個(gè)按鈕，1個(gè)動(dòng)態(tài)面板，實(shí)現(xiàn)了3個(gè)Modal的。無論再添加幾個(gè)按鈕和Modal，始終只需要原來的一個(gè)動(dòng)態(tài)面板，也無需添加新的用例。

如何設(shè)置

1、添加3個(gè)按鈕,名稱如下圖。添加1個(gè)動(dòng)態(tài)面板（設(shè)置為隱藏），設(shè)置4個(gè)狀態(tài)，名稱如下圖。

2、右擊動(dòng)態(tài)面板，勾選“自動(dòng)調(diào)整為內(nèi)容尺寸”和”固定到瀏覽器“，設(shè)置見下圖。

3、為按鈕添加用例

4、為動(dòng)態(tài)面板添加用例

5、在動(dòng)態(tài)面板的狀態(tài)（除去State1）內(nèi)添加內(nèi)容，為操作按鈕（確定、取消）添加用例。

6、大功告成，在瀏覽器內(nèi)預(yù)覽即可查看效果。

如何復(fù)用

如需在此基礎(chǔ)上添加更多的按鈕和Modal，可以按一下方式操作：

新增一個(gè)按鈕，名稱設(shè)置為Button4；復(fù)制動(dòng)態(tài)面板的Button3狀態(tài)，新的狀態(tài)名稱設(shè)置為Button4，修改Button4中的內(nèi)容為自己想要的內(nèi)容即可。

這樣的復(fù)用，無需新增動(dòng)態(tài)面板，也無需新增用例，在添加多個(gè)Modal時(shí)會(huì)十分高效。

知識(shí)點(diǎn)解析

1、自動(dòng)調(diào)整為內(nèi)容尺寸

動(dòng)態(tài)面板的屬性。動(dòng)態(tài)面板內(nèi)會(huì)有多個(gè)狀態(tài)，每個(gè)狀態(tài)內(nèi)的內(nèi)容大小不一，勾選此項(xiàng)后，動(dòng)態(tài)面板能夠根據(jù)當(dāng)前的狀態(tài)自動(dòng)調(diào)整尺寸。

2、固定到瀏覽器窗口

動(dòng)態(tài)面板的屬性。設(shè)置此項(xiàng)后，動(dòng)態(tài)面板能夠脫離頁面的限制，始終固定在瀏覽器的某個(gè)位置。彈窗提示、通知等元件，需要固定顯示位置，使用此項(xiàng)能夠完美實(shí)現(xiàn)需求。

3、燈箱效果

顯示動(dòng)態(tài)面板時(shí)的效果。設(shè)置此項(xiàng)后，動(dòng)態(tài)面板在顯示時(shí)，會(huì)自動(dòng)將頁面其余內(nèi)容遮罩，能夠?qū)崿F(xiàn)彈窗的樣式效果。

好了，本文到此就全部完成了。這樣的實(shí)現(xiàn)方式，是我目前找到的最高效的Modal實(shí)現(xiàn)方式。之前在不斷探索的過程中，也使用了很多其他的方法，結(jié)果導(dǎo)致頁面元件混亂、邏輯不清晰、復(fù)用性差，現(xiàn)在看來是比較可笑的。希望本文中的方法能夠?qū)Υ蠹矣兴鶐椭?/p>

（原型下載：https://pan.baidu.com/s/1snsPpSD）

我目前專注于后臺(tái)產(chǎn)品的設(shè)計(jì)，以后會(huì)逐步將自己的一些工作經(jīng)驗(yàn)分享出來，也希望和大家一起討論和成長。接下來的一篇，打算寫一些表格的規(guī)范和設(shè)計(jì)。大家有想要了解的內(nèi)容，留言哦！

本文由 @流風(fēng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。