幾個容易被忽視的彈框細節

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

瀏覽網頁時經常會發現彈框出現后,滾動鼠標時,蒙版下面的頁面還是可以滾動的,其實這些滾動都是沒必要的,因為彈框的原意就是要聚焦用戶的注意力。

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


從前端同學扒出其技術原理如下:

當Dialog彈框出現的時候,根元素overflow:hidden.

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

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


890

2.避免彈框上再彈出彈框

要盡量避免在彈框上再彈一層彈框,2層蒙版會讓用戶覺得負擔很重。可以改用輕量彈框或重新把交互梳理。

3.蒙版增強品牌感

過去我們對蒙版顏色可能沒有仔細關注過,也許顏色不是純黑#000,就是純白#fff。其實蒙版的顏色及透明度可以再深入搭配的,例如產品是藍色調性的可以在黑色中混入一點藍色,產品是輕盈的可以用白色或淡灰色,或者嘗試用沒那么深的顏色搭配高一點透明度等等,根據產品的調性設計出一個適合產品氣質的蒙版。

對彈框的其他思考

未來的趨勢

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


890

視覺表現方面,之前也提到過,將會有更多產品會為了在大屏幕下有更好的視覺效果做出針對性的設計。而隨著產品愈來愈追求簡潔,UI也變得愈來愈輕盈,甚至透明。彈框也許不再需要用一個框框去包住主體。市面上已經有不少產品使用這種手法,以整個屏幕來取代框框。

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


Squarespace的登錄彈框


Evernote的修改標簽彈框
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 果然是大公司,做彈框都做出花來了...當然,這只是看這篇文章之前的感覺,等看完了就覺得這特么之前幾百個彈框都白做了...
    EricVan閱讀 952評論 0 11
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,349評論 25 708
  • 丁公藤 別名:包公藤、麻辣仔藤、斑魚烈 采收加工:全年可采,洗凈,切成段,隔水蒸2-4h,取山曬干。 基源植物:旋...
    本草園丁閱讀 907評論 0 0
  • 很短的小巷 錯落零散的房子 你不在巷口 我不在巷尾 我們仍隔得很遠 我們相望在巷口 無邊絲雨 是否打濕了你的圍巾 ...
    營州布衣閱讀 248評論 1 3
  • 最近也開始追熱播劇《歡樂頌》。看到評論區大家討論如何的看到了自己奮斗的影子,她們或許就是我們曾經或將要成為的...
    愛吃肉的陳肉肉閱讀 296評論 0 0