幾個容易被忽視的彈框細節(jié)

1.背景鎖定與滾動條引起的抖動問題

瀏覽網(wǎng)頁時經(jīng)常會發(fā)現(xiàn)彈框出現(xiàn)后撮执,滾動鼠標時库糠,蒙版下面的頁面還是可以滾動的,其實這些滾動都是沒必要的剥纷,因為彈框的原意就是要聚焦用戶的注意力痹籍。

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


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

當Dialog彈框出現(xiàn)的時候晦鞋,根元素overflow:hidden.

此時蹲缠,由于頁面滾動條從有到無,頁面會晃動悠垛,這樣糟糕的體驗顯然是不能容忍了线定,于是,對元素進行處理确买,右側(cè)增加一個滾動條寬度(假設(shè)寬度是widthScrollbar)的透明邊框斤讥。

Dialog隱藏的時候再把滾動條放開。


890

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è)計上舌界,如彈框中包含多個層級掘譬,透過左上角返回的交互體驗,更靈動及細膩的動畫效果等呻拌。


890

視覺表現(xiàn)方面葱轩,之前也提到過,將會有更多產(chǎn)品會為了在大屏幕下有更好的視覺效果做出針對性的設(shè)計藐握。而隨著產(chǎn)品愈來愈追求簡潔靴拱,UI也變得愈來愈輕盈,甚至透明猾普。彈框也許不再需要用一個框框去包住主體袜炕。市面上已經(jīng)有不少產(chǎn)品使用這種手法,以整個屏幕來取代框框初家。

這些也許是未來的一個趨勢, 讓我們拭目以待偎窘。


Squarespace的登錄彈框


Evernote的修改標簽彈框
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市溜在,隨后出現(xiàn)的幾起案子评架,更是在濱河造成了極大的恐慌,老刑警劉巖炕泳,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纵诞,死亡現(xiàn)場離奇詭異,居然都是意外死亡培遵,警方通過查閱死者的電腦和手機浙芙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進店門登刺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人嗡呼,你說我怎么就攤上這事纸俭。” “怎么了南窗?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵揍很,是天一觀的道長。 經(jīng)常有香客問我万伤,道長窒悔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任敌买,我火速辦了婚禮简珠,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘虹钮。我一直安慰自己聋庵,他們只是感情好,可當我...
    茶點故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布芙粱。 她就那樣靜靜地躺著祭玉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪春畔。 梳的紋絲不亂的頭發(fā)上攘宙,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天,我揣著相機與錄音拐迁,去河邊找鬼蹭劈。 笑死,一個胖子當著我的面吹牛线召,可吹牛的內(nèi)容都是我干的铺韧。 我是一名探鬼主播,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼缓淹,長吁一口氣:“原來是場噩夢啊……” “哼哈打!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起讯壶,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤料仗,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后伏蚊,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體立轧,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了氛改。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片帐萎。...
    茶點故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖胜卤,靈堂內(nèi)的尸體忽然破棺而出疆导,到底是詐尸還是另有隱情,我是刑警寧澤葛躏,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布澈段,位于F島的核電站,受9級特大地震影響舰攒,放射性物質(zhì)發(fā)生泄漏败富。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一芒率、第九天 我趴在偏房一處隱蔽的房頂上張望囤耳。 院中可真熱鬧篙顺,春花似錦偶芍、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至宰僧,卻和暖如春材彪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背琴儿。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工段化, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人造成。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓显熏,卻偏偏與公主長得像,于是被迫代替她去往敵國和親晒屎。 傳聞我的和親對象是個殘疾皇子喘蟆,可洞房花燭夜當晚...
    茶點故事閱讀 43,562評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 果然是大公司,做彈框都做出花來了...當然鼓鲁,這只是看這篇文章之前的感覺蕴轨,等看完了就覺得這特么之前幾百個彈框都白做了...
    EricVan閱讀 945評論 0 11
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,796評論 25 707
  • 丁公藤 別名:包公藤、麻辣仔藤骇吭、斑魚烈 采收加工:全年可采橙弱,洗凈,切成段,隔水蒸2-4h膘螟,取山曬干成福。 基源植物:旋...
    本草園丁閱讀 812評論 0 0
  • 很短的小巷 錯落零散的房子 你不在巷口 我不在巷尾 我們?nèi)愿舻煤苓h 我們相望在巷口 無邊絲雨 是否打濕了你的圍巾 ...
    營州布衣閱讀 238評論 1 3
  • 最近也開始追熱播劇《歡樂頌》【2校看到評論區(qū)大家討論如何的看到了自己奮斗的影子奴艾,她們或許就是我們曾經(jīng)或?qū)⒁蔀榈?..
    愛吃肉的陳肉肉閱讀 274評論 0 0