1.背景鎖定與滾動條引起的抖動問題
瀏覽網(wǎng)頁時經(jīng)常會發(fā)現(xiàn)彈框出現(xiàn)后撮执,滾動鼠標時库糠,蒙版下面的頁面還是可以滾動的,其實這些滾動都是沒必要的剥纷,因為彈框的原意就是要聚焦用戶的注意力痹籍。
因此我們要做的是 - 背景鎖定(從技術(shù)角度其實是暫時性干掉滾動條)。
從前端同學扒出其技術(shù)原理如下:
當Dialog彈框出現(xiàn)的時候晦鞋,根元素overflow:hidden.
此時蹲缠,由于頁面滾動條從有到無,頁面會晃動悠垛,這樣糟糕的體驗顯然是不能容忍了线定,于是,對元素進行處理确买,右側(cè)增加一個滾動條寬度(假設(shè)寬度是widthScrollbar)的透明邊框斤讥。
Dialog隱藏的時候再把滾動條放開。
2.避免彈框上再彈出彈框
要盡量避免在彈框上再彈一層彈框湾趾,2層蒙版會讓用戶覺得負擔很重芭商∨刹荩可以改用輕量彈框或重新把交互梳理。
3.蒙版增強品牌感
過去我們對蒙版顏色可能沒有仔細關(guān)注過铛楣,也許顏色不是純黑#000近迁,就是純白#fff。其實蒙版的顏色及透明度可以再深入搭配的蛉艾,例如產(chǎn)品是藍色調(diào)性的可以在黑色中混入一點藍色,產(chǎn)品是輕盈的可以用白色或淡灰色衷敌,或者嘗試用沒那么深的顏色搭配高一點透明度等等勿侯,根據(jù)產(chǎn)品的調(diào)性設(shè)計出一個適合產(chǎn)品氣質(zhì)的蒙版。
對彈框的其他思考
未來的趨勢
移動在影響著人們生活缴罗,也同時引領(lǐng)著設(shè)計趨勢助琐,這些年產(chǎn)品都在追求多終端的一致性,早已衍生出自適應(yīng)網(wǎng)頁設(shè)計(Responsive Web Design)的布局解決方案面氓,因此網(wǎng)頁設(shè)計也日趨移動化兵钮。可以想像將會有一大波移動上的體驗會搬到網(wǎng)頁設(shè)計上舌界,如彈框中包含多個層級掘譬,透過左上角返回的交互體驗,更靈動及細膩的動畫效果等呻拌。
視覺表現(xiàn)方面葱轩,之前也提到過,將會有更多產(chǎn)品會為了在大屏幕下有更好的視覺效果做出針對性的設(shè)計藐握。而隨著產(chǎn)品愈來愈追求簡潔靴拱,UI也變得愈來愈輕盈,甚至透明猾普。彈框也許不再需要用一個框框去包住主體袜炕。市面上已經(jīng)有不少產(chǎn)品使用這種手法,以整個屏幕來取代框框初家。
這些也許是未來的一個趨勢, 讓我們拭目以待偎窘。