1. 背景鎖定與滾動(dòng)條引起的抖動(dòng)問(wèn)題

　　瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)發(fā)現(xiàn)彈框出現(xiàn)后，滾動(dòng)鼠標(biāo)時(shí)，蒙版下面的頁(yè)面還是可以滾動(dòng)的，其實(shí)這些滾動(dòng)都是沒(méi)必要的，因?yàn)閺椏虻脑饩褪且劢褂脩?hù)的注意力。

　　因此我們要做的是 – 背景鎖定(從技術(shù)角度其實(shí)是暫時(shí)性干掉滾動(dòng)條)。

　　從前端同學(xué)扒出其技術(shù)原理如下：

　　當(dāng)Dialog彈框出現(xiàn)的時(shí)候，根元素overflow:hidden.

　　此時(shí)，由于頁(yè)面滾動(dòng)條從有到無(wú)，頁(yè)面會(huì)晃動(dòng)，這樣糟糕的體驗(yàn)顯然是不能容忍了，于是，對(duì)元素進(jìn)行處理，右側(cè)增加一個(gè)滾動(dòng)條寬度(假設(shè)寬度是widthScrollbar)的透明邊框。

　　Dialog隱藏的時(shí)候再把滾動(dòng)條放開(kāi)。

　　2.避免彈框上再?gòu)棾鰪椏?

　　要盡量避免在彈框上再?gòu)椧粚訌椏颍?層蒙版會(huì)讓用戶(hù)覺(jué)得負(fù)擔(dān)很重?？梢愿挠幂p量彈框或重新把交互梳理。

　　3.蒙版增強(qiáng)品牌感

　　過(guò)去我們對(duì)蒙版顏色可能沒(méi)有仔細(xì)關(guān)注過(guò)，也許顏色不是純黑#000，就是純白#fff。其實(shí)蒙版的顏色及透明度可以再深入搭配的，例如產(chǎn)品是藍(lán)色調(diào)性的可以在黑色中混入一點(diǎn)藍(lán)色，產(chǎn)品是輕盈的可以用白色或淡灰色，或者嘗試用沒(méi)那么深的顏色搭配高一點(diǎn)透明度等等，根據(jù)產(chǎn)品的調(diào)性設(shè)計(jì)出一個(gè)適合產(chǎn)品氣質(zhì)的蒙版。

　　Tumblr的蒙版顏色採(cǎi)用了它的品牌色rgba(54,70,93,.95)

　　Twitch的蒙版顏色在黑色中混入了一點(diǎn)紫色rgba(32,28,43,.9)，與它的品牌色相符。

　　對(duì)彈框的其他思考

　　未來(lái)的趨勢(shì)

　　移動(dòng)在影響著人們生活，也同時(shí)引領(lǐng)著設(shè)計(jì)趨勢(shì)，這些年產(chǎn)品都在追求多終端的一致性，早已衍生出自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)(Responsive Web Design)的布局解決方案，因此網(wǎng)頁(yè)設(shè)計(jì)也日趨移動(dòng)化。可以想像將會(huì)有一大波移動(dòng)上的體驗(yàn)會(huì)搬到網(wǎng)頁(yè)設(shè)計(jì)上，如彈框中包含多個(gè)層級(jí)，透過(guò)左上角返回的交互體驗(yàn)，更靈動(dòng)及細(xì)膩的動(dòng)畫(huà)效果等。

　　視覺(jué)表現(xiàn)方面，之前也提到過(guò)，將會(huì)有更多產(chǎn)品會(huì)為了在大屏幕下有更好的視覺(jué)效果做出針對(duì)性的設(shè)計(jì)。而隨著產(chǎn)品愈來(lái)愈追求簡(jiǎn)潔，UI也變得愈來(lái)愈輕盈，甚至透明。彈框也許不再需要用一個(gè)框框去包住主體。市面上已經(jīng)有不少產(chǎn)品使用這種手法，以整個(gè)屏幕來(lái)取代框框。

　　這些也許是未來(lái)的一個(gè)趨勢(shì), 讓我們拭目以待。

　　Squarespace的登錄彈框

　　Evernote的修改標(biāo)簽彈框

http://www.tinmen.com.cn/jianzhanzhishi/7433.html 網(wǎng)站設(shè)計(jì)中幾個(gè)容易被忽視的彈框細(xì)節(jié)