可靠的點(diǎn)擊目標(biāo)可以成就或毀掉您的手機(jī)網(wǎng)站或app，按鈕或鏈接的大小、形狀、位置和整體設(shè)計(jì)決定了用戶是否成功完成了一個(gè)動(dòng)作。這看起來是一件小事，但卻是在網(wǎng)站設(shè)計(jì)中最重要的元素之一。

現(xiàn)代可操作的目標(biāo)容易識別，以預(yù)期的方式工作，并鼓勵(lì)參與。

今天我們來看看如何設(shè)計(jì)它們，如何制作有效的號召行動(dòng)項(xiàng)目，以及關(guān)于顏色和字體選擇的考慮。

1、梯度和顏色

當(dāng)網(wǎng)站設(shè)計(jì)中涉及到按鈕和其他可切換目標(biāo)時(shí)，您可能會(huì)注意到最大的設(shè)計(jì)趨勢之一是顏色。漸變和明亮的顏色是標(biāo)準(zhǔn)。

這些吸引注意力的選擇幫助用戶識別一個(gè)點(diǎn)擊目標(biāo)，并將注意力轉(zhuǎn)移到屏幕上的動(dòng)作上。

曾經(jīng)有一段時(shí)間，幾乎所有人都在用紅色或橙色來設(shè)計(jì)按鈕和點(diǎn)擊元素，但現(xiàn)在已經(jīng)讓位給了其他顏色，尤其是漸變。

藍(lán)色、紫色和綠色漸變可切換目標(biāo)是目前最流行的設(shè)計(jì)選擇。它們在淺色或深色背景（或模式）上都很好用，這使得它成為用戶可以控制默認(rèn)配色方案的設(shè)計(jì)的可行選項(xiàng)。

藍(lán)色、紫色和綠色漸變可切換目標(biāo)是目前最流行的設(shè)計(jì)選擇。

2、大小事項(xiàng)

點(diǎn)擊目標(biāo)的大小不僅僅是美觀，它在可訪問性方面也同樣重要。

對于可應(yīng)用元素的大小，大多數(shù)指導(dǎo)原則建議至少為44px。這大概是成年人手指墊的大小。

這并不是說所有的視覺元素都至少是這個(gè)大小，但是您應(yīng)該確保元素周圍的整個(gè)可切換區(qū)域超過這個(gè)大小。（想想在應(yīng)用程序內(nèi)的廣告上關(guān)閉一個(gè)極小的"x"是多么煩人，通常會(huì)導(dǎo)致錯(cuò)誤地點(diǎn)擊廣告本身。）適當(dāng)?shù)目蓤?zhí)行區(qū)域可以解決這個(gè)問題。

AAA級成功的可訪問性指南指出，"指針目標(biāo)"的大小必須至少是44×44的CSS像素，只有少數(shù)例外，與鏈接上下文相關(guān)。

3、設(shè)計(jì)的視覺功能

可切換目標(biāo)看起來像用戶應(yīng)該接觸的東西嗎？

雖然這可能是一個(gè)超級簡單的概念，但它經(jīng)常被遺忘。視覺啟示使用眾所周知的和公認(rèn)的模式和設(shè)計(jì)元素，使用戶在看到交互元素時(shí)更容易知道該如何處理它。

可執(zhí)行目標(biāo)的常見視覺啟示包括：

內(nèi)聯(lián)文本鏈接的下劃線或不同顏色

為物體投下陰影或內(nèi)部陰影

4、圓角或圓

具有可操作文本的元素，例如"登錄"或"提交"

在沒有任何其他對象的列中分隔位置

5、創(chuàng)建懸停和焦點(diǎn)狀態(tài)

懸停狀態(tài)是桌面設(shè)備上交互元素的一種廣泛認(rèn)可的選項(xiàng)。當(dāng)鼠標(biāo)移動(dòng)到可單擊的項(xiàng)目上時(shí)，它可能會(huì)改變顏色、移動(dòng)或以與以前不同的方式作出反應(yīng)。

這些操作對于移動(dòng)點(diǎn)擊目標(biāo)并不真正有效，因?yàn)闆]有鼠標(biāo)或光標(biāo)可以在屏幕上移動(dòng)。但這并不意味著它們不同等重要。

懸停狀態(tài)對于設(shè)計(jì)的桌面版本很重要。就移動(dòng)設(shè)備而言，這種微交互演變成一種活動(dòng)狀態(tài)，顯示按鈕或點(diǎn)擊元素是否/何時(shí)處于活動(dòng)狀態(tài)或以觸覺方式"按下"。

當(dāng)用戶通過鍵盤或屏幕閱讀器導(dǎo)航到點(diǎn)擊目標(biāo)時(shí)，它進(jìn)一步將焦點(diǎn)狀態(tài)作為一種可訪問工具。焦點(diǎn)狀態(tài)將顯示當(dāng)前選中的目標(biāo)，比如突出顯示窗體中的活動(dòng)框，或者對設(shè)計(jì)中的某些元素進(jìn)行關(guān)閉/打開切換（比如打開鍵盤）。

6、填充是充分的

除非您在設(shè)計(jì)一個(gè)暗模式，否則您可能希望確保用戶點(diǎn)擊的是目標(biāo)，而不是附近的對象。在每個(gè)可執(zhí)行元素周圍充分填充可以解決這個(gè)潛在問題。

除了使tap元素至少為44px之外，還要在整個(gè)tap區(qū)域中包含至少8px的空間。更好的做法是在其周圍使用相當(dāng)于tap元素大小一半的填充。這有助于防止意外敲擊。

7、文本是可讀的和可操作的

可切換元素設(shè)計(jì)中的文本為動(dòng)作和交互提供了上下文。

在文本指令的外觀方面，有兩種趨勢。

按鈕和點(diǎn)擊元素使用標(biāo)題大小寫

字體很簡單，一般或中等風(fēng)格

在編寫UI副本時(shí)也有一些考慮事項(xiàng)。

文本是直接可操作的，并告訴用戶接下來會(huì)發(fā)生什么，即使它比"點(diǎn)擊這里"稍長一些。

但是去掉所有不必要的單詞

避免行話或可愛的語言，直接表達(dá)

在整個(gè)設(shè)計(jì)中保持一致并使用相同的術(shù)語（用戶是"登錄"還是"登錄"？）

8、Halo以鏈接為目標(biāo)

文本鏈接不像其他可應(yīng)用元素一樣遵循所有相同的規(guī)則，但在設(shè)計(jì)時(shí)應(yīng)該同樣考慮。

首先要考慮的是使用內(nèi)聯(lián)文本鏈接的頻率。這些鏈接在小屏幕上很難點(diǎn)擊，而且鏈接越多，這些鏈接區(qū)域越有可能重疊，導(dǎo)致用戶使用錯(cuò)誤鏈接。

最好的建議是盡量少使用它們，盡可能多使用按鈕樣式的鏈接。

下一個(gè)最好的建議是在文本鏈接周圍創(chuàng)建一個(gè)擴(kuò)展暈圈或點(diǎn)擊區(qū)域，以使點(diǎn)擊更容易有效。這在菜單中的文本鏈接或頁腳中的鏈接中很常見。（在正文中這樣做沒有什么意義。）

WCAG可訪問性指南對內(nèi)聯(lián)目標(biāo)提供了更多的指導(dǎo)：

目標(biāo)可以出現(xiàn)在一條線上的任何位置，并且可以根據(jù)可用屏幕的寬度改變位置。由于目標(biāo)可以出現(xiàn)在行內(nèi)的任何位置，因此其大小不能大于可用的文本和句子或段落之間的間距，否則目標(biāo)可能會(huì)重疊。因此，包含在一個(gè)或多個(gè)句子中的指標(biāo)被排除在指標(biāo)規(guī)模要求之外。"

9、點(diǎn)按目標(biāo)可以（并且應(yīng)該）具有層次結(jié)構(gòu)

您的設(shè)計(jì)可能包括幾種類型的可執(zhí)行目標(biāo)，每一種都有自己的外觀和感覺。

基于網(wǎng)站或商業(yè)目標(biāo)的按鈕選擇或可切換目標(biāo)的級別，這種設(shè)計(jì)層次正變得越來越普遍。

10、可執(zhí)行目標(biāo)的設(shè)計(jì)層次結(jié)構(gòu)是什么樣的？

首先，確定您需要多少級別。對于大多數(shù)項(xiàng)目來說，一個(gè)主要的和第二個(gè)選項(xiàng)就足夠了，但是有些項(xiàng)目會(huì)進(jìn)入第三級和第四級點(diǎn)擊元素。

為每一個(gè)設(shè)置一個(gè)樣式。從主要設(shè)計(jì)開始。它可能是一個(gè)顏色/漸變按鈕。這是您希望用戶首先點(diǎn)擊的元素。次要的設(shè)計(jì)應(yīng)該類似于主按鈕，但包括以下變化之一：幽靈風(fēng)格，較少的對比顏色，或較小的尺寸。第三層和第四層按鈕也可以使用相同的更改。

在層次結(jié)構(gòu)的頂部的按鈕應(yīng)該有最大的對比度和最大的大小，并根據(jù)需要的使用比例減少。

您是否希望用戶首先看到并與之交互的點(diǎn)擊元素？使用具有清晰視覺層次結(jié)構(gòu)的可切換元素來建立用戶流和意圖。

點(diǎn)擊元素應(yīng)該有一個(gè)尺寸和突出度的設(shè)計(jì)，用戶可以很明顯地看到它應(yīng)該被觸摸（注意上面中間的橙色+按鈕）。在幫助預(yù)測用戶意圖方面，大小可能是最重要的考慮因素之一。

警告：雖然點(diǎn)擊目標(biāo)層次結(jié)構(gòu)是件好事，但是太多的選項(xiàng)會(huì)讓用戶感到沮喪。這是一種需要檢驗(yàn)的微妙平衡。

結(jié)論

是的，我們還在為拇指設(shè)計(jì)。無論手機(jī)多大（或多?。@一點(diǎn)都是正確的?？汕袚Q的目標(biāo)可以是任何東西，從按鈕到控件，再到文本鏈接，用戶可以通過這些共性讓網(wǎng)站或應(yīng)用程序按照設(shè)計(jì)的方式運(yùn)行。

一個(gè)好的可執(zhí)行目標(biāo)看起來像是應(yīng)該被觸摸（或點(diǎn)擊）并執(zhí)行用戶期望的操作的東西。

遺憾的是，設(shè)計(jì)這些元素往往是設(shè)計(jì)過程中被遺忘的一部分。在您的項(xiàng)目中不要落入這個(gè)陷阱。