網(wǎng)站設(shè)計(jì)中幾個(gè)容易被忽視的彈框細(xì)節(jié)

<

　　1. 背景鎖定與轉(zhuǎn)動(dòng)條引起的抖動(dòng)問題
　　瀏覽網(wǎng)頁時(shí)經(jīng)常會(huì)發(fā)明彈框呈現(xiàn)后，轉(zhuǎn)動(dòng)鼠標(biāo)時(shí)，蒙版下面的頁面還是可能轉(zhuǎn)動(dòng)的，切實(shí)這些轉(zhuǎn)動(dòng)都是沒必要的，因?yàn)閺椏虻脑饩褪且劢褂脩舻牧羯窳Α?br/>　　因此咱們要做的是 – 背景鎖定(從技巧角度切實(shí)是臨時(shí)性干掉轉(zhuǎn)動(dòng)條)。

 
　　從前端同窗扒出其技巧原理如下：
　　當(dāng)Dialog彈框呈現(xiàn)的時(shí)候，根元素overflow:hidden.

 
　　此時(shí)，因?yàn)轫撁孓D(zhuǎn)動(dòng)條從有到無，頁面會(huì)晃動(dòng)，這樣蹩腳的閉會(huì)顯然是不能容忍了，于是，對(duì)元素進(jìn)行處理，右側(cè)增加一個(gè)轉(zhuǎn)動(dòng)條寬度(假設(shè)寬度是widthScrollbar)的透明邊框。

 
　　Dialog隱藏的時(shí)候再把轉(zhuǎn)動(dòng)條放開。網(wǎng)站設(shè)計(jì)要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。因此在網(wǎng)頁創(chuàng)作的時(shí)候就必須將網(wǎng)站的整體設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來。

 
　　2.避免彈框上再彈出彈框
　　要盡量避免在彈框上再彈一層彈框，2層蒙版會(huì)讓用戶覺得累贅很重?？赡芨挠幂p量彈框或從新把交互梳理。

 
　　3.蒙版加強(qiáng)品牌感
　　從前咱們對(duì)蒙版色彩可能不細(xì)心關(guān)注過，興許色彩不是純黑#000，就是純白#fff。切實(shí)蒙版的色彩及透明度可能再深刻搭配的，例如產(chǎn)品是藍(lán)色調(diào)性的可能在黑色中混入一點(diǎn)藍(lán)色，產(chǎn)品是輕巧的可能用白色或淡灰色，或者嘗試用沒那么深的色彩搭配高一點(diǎn)透明度等等，依據(jù)產(chǎn)品的調(diào)性設(shè)計(jì)出一個(gè)適合產(chǎn)品氣質(zhì)的蒙版。
　　Tumblr的蒙版色彩採用了它的品牌色rgba(54,70,93,.95)

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

 
　　對(duì)彈框的其余思考
　　將來的趨勢(shì)
　　挪動(dòng)在影響著人們生活，也同時(shí)引領(lǐng)著設(shè)計(jì)趨勢(shì)，這些年產(chǎn)品都在尋求多終真?zhèn)€一致性，早已衍生出自適應(yīng)網(wǎng)頁設(shè)計(jì)(Responsive Web Design)的布局解決計(jì)劃，因此網(wǎng)頁設(shè)計(jì)也日趨挪動(dòng)化?？赡芟胂駥?huì)有一大波挪動(dòng)上的閉會(huì)會(huì)搬到網(wǎng)頁設(shè)計(jì)上，如彈框中包含多個(gè)層級(jí)，透過左上角返回的交互閉會(huì)，更靈動(dòng)及細(xì)膩的動(dòng)畫后果等。

 
　　視覺表示方面，之前也提到過，將會(huì)有更多產(chǎn)品會(huì)為了在大屏幕下有更好的視覺后果做出針對(duì)性的設(shè)計(jì)。網(wǎng)站設(shè)計(jì)要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。因此在網(wǎng)頁創(chuàng)作的時(shí)候就必須將網(wǎng)站的整體設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來。而隨著產(chǎn)品愈來愈尋求簡潔，UI也變得愈來愈輕巧，甚至透明。彈框興許不再須要用一個(gè)框框去包住主體。市道上已經(jīng)有不少產(chǎn)品利用這種伎倆，以全部屏幕來取代框框。
　　這些興許是將來的一個(gè)趨勢(shì), 讓咱們刮目相待。
　　Squarespace的登錄彈框

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

http://m.212118.com/
>