iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 17
1
自我挑戰組

30 天 CSS 隨手筆記系列 第 17

30 天 CSS 隨手筆記 - 第 17 天 - UX 相關的眉角 ( 1/3 )

主要參考 CSS SECRETS 這本書裡面的內容作筆記~


添加點擊的感應範圍

現在使用手機瀏覽網頁的人越來越多了,在頁面的設計上,當然也要更考慮在小螢幕上的操作習慣。

本來的按鈕可能是這樣設計的:https://jsfiddle.net/x1gy34nw/1/

<= 藍色圈圈內的範圍才會有感應

但在手機上時,手指的觸控範圍沒辦法像使用滑鼠時一樣精確,甚至還會擋到螢幕;而且螢幕上面還有一層玻璃的厚度,視線如果不是完全垂直手機面的話,看到的按鈕就可能比實際的位置偏上或偏下。
比較理想的狀況應該是,使用者只要 "大概" 按到螢幕上的位置,就應該要能觸發功能。因此常常會把點擊的感應範圍設定的大一點。

如果旁邊剛好是沒有功能的元素的話還好,如果是剛好手指粗點到廣告的話,體驗就很差了 D=

我們可能會想增加透明的 border,於是就變成這樣了:https://jsfiddle.net/x1gy34nw/2/


按鈕看起來變大了 ( 增加的範圍是右圖的藍綠色區域 )
這是因為 background 的範圍有包含 border 區域的關係。

但我們不想讓使用者覺得按鈕變大了,所以我們可以新增設定 background-clip: padding-box;,這樣就可以達成 "擴大感應範圍,但不改變按鈕 ( 視覺上的 ) 大小" 的效果

https://jsfiddle.net/x1gy34nw/3/


lightbox 的效果

這裡寫了一個 lightbox 的雛形:https://jsfiddle.net/dzwrgzL6/2/

但通常會想加個半透明遮罩~
可以使用 box-shadow 達到不錯的效果:https://jsfiddle.net/dzwrgzL6/3/

.light-box {
    /* 
     * 一些本來的設定
     */

    box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .2);
}

有點小遺憾是,他可以操作到應該是 box-shadow 的部分,所以只是視覺上的遮罩。

另外還可以用原生的 <dialog> 配合 ::backdrop 使用,這樣在視覺上、功能上都非常完全~!!
https://jsfiddle.net/dzwrgzL6/5/

<button onclick="document.getElementById('light-box').showModal()">
    開啟 light box
</button>

<!-- 一些內容 -->

<dialog class="light-box" id="light-box">
    <p>light box</p>
    <button onclick="document.getElementById('light-box').close()">關閉</button>
</dialog>
.light-box {
    /* 一些本來的設定 */
}
.light-box::backdrop {
    background-color: rgba(0, 0, 0, .2);
}


dialog 預設是不顯示的,可以用 showModal / close 來控制

不過... 支援度也是非常的低:

但目前的想法是,它可以配合 @support,並用 ::before 遮罩作為 backup。


上一篇
30 天 CSS 隨手筆記 - 第 16 天 - feature query ~!!
下一篇
30 天 CSS 隨手筆記 - 第 18 天 - UX 相關的眉角 ( 2/3 )
系列文
30 天 CSS 隨手筆記30

尚未有邦友留言

立即登入留言