前端如何提升用戶體驗:加強可點擊區域的大小

做者:Ahmad Shadded
譯者:前端小智
來源:css-tricks

點贊再看,養成習慣css

本文 GitHub https://github.com/qq44924588... 上已經收錄,更多往期高贊文章的分類,也整理了不少個人文檔,和教程資料。歡迎Star和完善,你們面試能夠參照考點複習,但願咱們一塊兒有點東西。前端

你是否曾經試着點擊或點擊一個元素(例如:按鈕、連接),而且注意到只有單擊該元素的特定區域,它纔會響應?git

必生這種狀況是由於可點擊區域未應用於整個元素。 爲了更加清楚,請參見下圖,左圖可點擊區別(圈紅部分)明顯比右圖的小不少,因此右圖的實現用戶體驗會更好。github

clipboard.png

對於本文,會介紹一些事例,並經過事例演示如何增長可點擊區別,提升用戶體驗。面試

WCAG準則

WCAG全稱Web Content Accessibility Guidelines 網頁內容無障礙瀏覽準則,簡單的說就是爲了方便殘障人士(包括低視患者,盲人,聾人,學習障礙,行動不便,認知障礙....)訪問Web內容而制定的相關標準,可使網站更加人性化。微信

舉個例子,在WCAG準則2.3.2中規定:網頁不包含任何閃光超過3次/秒的內容。ide

用戶應該可以使用臺式機/筆記本電腦上的鍵盤以及移動設備或平板電腦上的觸摸屏來操做輸入。 不要在移動設備屏幕上將按鈕設置得過小,以避免按下正確的按鈕。 觸摸目標的最小尺寸最好至少爲44 x 44像素。函數

費茲法則

費茲法則(Fitts law)是一我的機互動以及人體工程學中人類活動的模型;它預測了快速移動到目標區域所需的時間是目標區域的距離和目標區域大小的函數。工具

在下面的圖中,我模擬了兩個按鈕的不一樣狀況。在左側,按鈕更小,更遠,用戶須要更多的時間與它互動。在右側,按鈕大小更大,更接近於它的同級輸入元素,這將使交互更容易、更快。學習

clipboard.png

接着,咱們再來看看一些更加真實例子。注意:記住WCAG準則費茲法則 的概念。

按鈕

在須要時使用實際真實<button>(包含可點擊區域)很是重要。 下面的示例來自我使用的在線銀行系統:

<div class="navig next" onclick="validateLogin()">Next</div>

這是上面按鈕的HTML的GIF圖像。我把鼠標懸停在按鈕上,光標仍然是一個指針,這很好。不過,我也能夠選擇文本和懸停時,有一個文本光標!若是使用了正確的元素,就不會發生這種狀況。

圖片描述

當使用HTML <button>元素時,會得到下面效果:

  • 可經過鼠標,鍵盤或觸摸訪問
  • 能夠經過鍵盤選中
  • 有對應的 JavaScript 方法

有些元素,咱們須要添加 padding,緣由有二:

  • 讓它更美觀
  • 讓它變大,這樣更容易被注意到

clipboard.png

連接

以前在作導航的時候,犯了一個錯誤,應該是給 a 標籤添加 padding 而不是 li:

<nav>
  <ul>
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><nav href="#">Products</nav></li>
    <li class="nav-item"><a href="#">Store</a></li>
    <li class="nav-item"><a href="#">Team</a></li>
  </ul>
</nav>

// css

.nav-item {
  padding: 12px 16px;
}

基於上面的HTML和CSS,可點擊的區域將只是文本,以下圖所示:

clipboard.png

正確的方法是在a 標籤自己上添加padding。 請注意,默認狀況下,padding 須要塊元素纔有效,而 a 標籤是行內元素,因此能夠給 a 標籤設置blockinline-elementflex

.nav-item a {
  display: block;
  padding: 12px 16px;
}

添加了上面的樣式後,可點擊的效果以下:

clipboard.png

你們都說簡歷沒項目寫,我就幫你們找了一個項目,還附贈【搭建教程】

麪包屑導航

假設可點擊區域以下所示:

clipboard.png

這種體驗不是很好,鼠標或手指指向屏幕上如此小的目標會比較難。 在下圖中,它的可點擊區域更大而且更易於交互。

clipboard.png

事例源碼:https://codepen.io/shadeed/pe...

複選框和單選按鈕

當存在複選框或單選按鈕元素時,我但願能夠單擊它或關聯的標籤來激活/禁用它。

clipboard.png

從用戶體驗的角度來看,這是難以訪問和糟糕的。在 HTML 中,可使用for屬性將標籤與輸入框綁定在一塊兒。

<input type="checkbox" id="option1">
<label for="option1">Option 1</label>

或者能夠將輸入框放置在標籤內:

<label for="option1">
    Option 1
    <input type="checkbox" id="option1">
</label>

而後,在<label>元素上添加padding,以使可點擊區域變大。 這樣,問題得以解決,整個複選框或單選按鈕都是可單擊的,以下圖所

clipboard.png

側邊欄

對於帶有類別的頁面,有時我會注意到列表連接沒有擴展到其父頁面的整個寬度。 也就是說,可點擊區域僅在文本上,以下圖所示:

clipboard.png

解決方法:

  • 刪除<li>元素的 padding,並將其移動到<a>元素
  • 經過添加display: block使a標籤的寬度等於其父連接的寬度。
.nav-item a {
    /*Other styles*/
    padding: 12px 16px;
    display: block;
}

添加後,以下所示:

clipboard.png

真實案例

在最近的Twitter更新中,導航設計在可點擊區域大小方面存在問題。 最初,它僅與文本相關,以下面的屏幕截圖所示,但他們在收到反饋後將其修復。

clipboard.png

你們都說簡歷沒項目寫,我就幫你們找了一個項目,還附贈【搭建教程】

章節標題

在某些狀況下,須要在章節標題的遠端添加「查看更多」按鈕或箭頭。 在下面的示例中,我將箭頭放置在假圓中,以即可以正確地使箭頭居中。

一般狀況下,箭頭周圍的間距可使用paddingwidthheight

clipboard.png

使用僞元素來增長可點擊區域

僅經過改變元素的寬度和高度或使用padding,並不老是可以使可點擊區域變大,這時候就須要僞元素救場了。

這個想法是,僞元素屬於其父元素,所以當咱們建立具備特定寬度和高度的僞元素時,它將充當其父元素的單擊/觸摸/懸停區域。

在下圖中,我在菜單按鈕中添加了:after僞元素:

.menu-2:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
  /*Other styles*/
}

圖片描述

事例源碼:https://codepen.io/shadeed/pe...


代碼部署後可能存在的BUG無法實時知道,過後爲了解決這些BUG,花了大量的時間進行log 調試,這邊順便給你們推薦一個好用的BUG監控工具 Fundebug

原文:https://css-tricks.com/enhanc...


交流

文章每週持續更新,能夠微信搜索「 大遷世界 」第一時間閱讀和催更(比博客早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了不少個人文檔,歡迎Star和完善,你們面試能夠參照考點複習,另外關注公衆號,後臺回覆福利,便可看到福利,你懂的。

相關文章
相關標籤/搜索