2020年如何設(shè)計(jì)移動(dòng)端的點(diǎn)擊目標(biāo)？

時(shí)間：2024-05-22 04:30:01 | 來源：建站知識(shí)

時(shí)間：2024-05-22 04:30:01 來源：建站知識(shí)

可靠的點(diǎn)擊目標(biāo)可以建立或破壞您的移動(dòng)網(wǎng)站或應(yīng)用。按鈕或鏈接的大小，形狀，位置和整體設(shè)計(jì)確定用戶是否成功完成了一項(xiàng)操作。這似乎是一件小事，但可能是設(shè)計(jì)中最重要的元素之一。

現(xiàn)代點(diǎn)擊式目標(biāo)必須易于識(shí)別，并吸引用戶點(diǎn)擊。今天，我們正在研究如何設(shè)計(jì)它們，制作有效的號(hào)召性用語的方法以及有關(guān)顏色和字體選擇的注意事項(xiàng)。

漸變和顏色

藍(lán)色，紫色和綠色漸變可輕敲目標(biāo)是當(dāng)前最受歡迎的一些設(shè)計(jì)選擇。

關(guān)于按鈕和其他可輕敲目標(biāo)，您可能會(huì)注意到的最大設(shè)計(jì)趨勢之一就是色彩。漸變和鮮艷的色彩是常態(tài)。

這些吸引注意力的選擇有助于用戶識(shí)別輕擊目標(biāo)，并將注意力轉(zhuǎn)移到屏幕上的操作上。

一次，幾乎每個(gè)人都在設(shè)計(jì)紅色或橙色的按鈕和水龍頭元素，但實(shí)際上已經(jīng)讓位于其他顏色，尤其是漸變色。

藍(lán)色，紫色和綠色漸變可輕敲目標(biāo)是當(dāng)前最受歡迎的一些設(shè)計(jì)選擇。它們適用于淺色或深色背景（或模式），因此對于用戶可以控制默認(rèn)配色方案的設(shè)計(jì)而言，這是一個(gè)可行的選擇。

大小事項(xiàng)

輕擊目標(biāo)的大小不僅僅是美觀，在可及性方面同樣重要。

對于可點(diǎn)擊元素的大小，大多數(shù)準(zhǔn)則建議至少為44px。這大約是普通成人指墊的大小。

這并不是說所有視覺元素都至少要具有此大小，但是您應(yīng)確保元素周圍的整個(gè)可點(diǎn)擊區(qū)域都超過此大小。（想想在應(yīng)用內(nèi)廣告上關(guān)閉一個(gè)很小的“ x”會(huì)很煩人，通常會(huì)導(dǎo)致錯(cuò)誤地點(diǎn)擊廣告本身。）足夠的可點(diǎn)擊區(qū)域可以解決此問題。

AAA級成功的可訪問性準(zhǔn)則指出，“指針目標(biāo)”的大小必須至少為44 x 44 CSS像素，并帶有少數(shù)與鏈接上下文有關(guān)的異常。

設(shè)計(jì)視覺能力

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

盡管這可能是一個(gè)非常簡單的概念，但它經(jīng)常被遺忘。使用知名的和公認(rèn)的模式和設(shè)計(jì)元素的視覺能力使用戶在看到交互式元素時(shí)更容易知道該怎么做。

可點(diǎn)擊目標(biāo)的常見視覺承受能力包括：

• 內(nèi)聯(lián)文本鏈接的下劃線或不同顏色
• 為對象放置陰影或內(nèi)部陰影
• 圓角或圓
• 具有可操作文本的元素，例如“登錄”或“提交”
• 列中的分隔位置，兩側(cè)均無其他對象

創(chuàng)建懸停狀態(tài)和焦點(diǎn)狀態(tài) 懸停狀態(tài)是臺(tái)式設(shè)備上交互式元素的一種廣泛認(rèn)可的選項(xiàng)。當(dāng)鼠標(biāo)移到可以單擊的項(xiàng)目上時(shí)，它可能會(huì)更改顏色，移動(dòng)或做出與以前不同的反應(yīng)。

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

懸停狀態(tài)對于設(shè)計(jì)的桌面版本很重要。在移動(dòng)性方面，這種微交互作用演變?yōu)榛顒?dòng)狀態(tài)，該狀態(tài)顯示/何時(shí)以觸摸方式激活或“按下”按鈕或點(diǎn)擊元素。

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

填充足夠 除非您要設(shè)計(jì)深色圖案，否則您可能要確保用戶點(diǎn)擊預(yù)期的目標(biāo)，而不是附近的物體。在每個(gè)可輕敲元件周圍進(jìn)行足夠的填充可以解決此潛在問題。

除了使Tap元素至少為44px外，還應(yīng)在Tap區(qū)域周圍至少保留8px的空間。更好的做法是使用等于其周圍Tap元素大小一半的填充。這有助于防止意外敲擊。

文字可讀且可行 可輕敲元素的設(shè)計(jì)中的文字為操作和交互提供了上下文。

關(guān)于文本指令的外觀，有兩件事正在發(fā)展。

• 按鈕和水龍頭元素使用標(biāo)題大小寫
• 字體很簡單，有常規(guī)或中型風(fēng)格

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

• 文字可直接執(zhí)行，并告訴用戶接下來會(huì)發(fā)生什么，即使比“單擊此處”更長
• 但要消除任何不必要的詞
• 避免使用行話或可愛的語言并保持直率
• 在設(shè)計(jì)中保持一致并使用相同的術(shù)語（用戶是“登錄”還是“登錄”？）

鏈接周圍的光環(huán)目標(biāo) 文本鏈接不遵循與其他可輕敲元素相同的規(guī)則，但設(shè)計(jì)應(yīng)包含同等考慮。

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

最好的建議是謹(jǐn)慎使用它們，并盡可能使用更多按鈕式鏈接。

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

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

點(diǎn)按目標(biāo)可以（并且應(yīng)該）具有層次結(jié)構(gòu) 您的設(shè)計(jì)可能包括多種類型的可輕敲目標(biāo)，每種都有自己的外觀。

基于網(wǎng)站或業(yè)務(wù)目標(biāo)的按鈕選擇或可點(diǎn)擊目標(biāo)的級別，這種設(shè)計(jì)層次結(jié)構(gòu)變得越來越普遍。

層次結(jié)構(gòu)頂部的按鈕應(yīng)具有最大的對比度，并應(yīng)具有最大的大小，并根據(jù)所需用途成比例地減小。

可輕擊目標(biāo)的設(shè)計(jì)層次是什么樣的？

首先，確定您需要多少級。對于大多數(shù)項(xiàng)目而言，主要和次要選項(xiàng)就足夠了，但是某些項(xiàng)目屬于第三級和第四級單擊元素。

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

層次結(jié)構(gòu)頂部的按鈕應(yīng)具有最大的對比度，并應(yīng)具有最大的大小，并根據(jù)所需用途成比例地減小。

您是否希望用戶首先看到并與之交互的水龍頭元素？使用具有清晰視覺層次的可點(diǎn)擊元素來建立用戶流和意圖。

分接元素的設(shè)計(jì)應(yīng)具有一定的大小和突出度，對于用戶來說應(yīng)該被觸摸（請注意上方的中心橙色+按鈕）。就幫助預(yù)測用戶意圖而言，大小可能是最重要的考慮因素之一。

提醒您一點(diǎn)：雖然點(diǎn)擊目標(biāo)層次結(jié)構(gòu)是一件好事，但太多的選項(xiàng)可能會(huì)使用戶感到沮喪。這是一個(gè)微妙的平衡，應(yīng)該進(jìn)行測試。

結(jié)論 是的，我們?nèi)栽谠O(shè)計(jì)。不管手機(jī)多大（或多小），可觸碰的目標(biāo)可以是任何東西，從按鈕到控件，再到文本鏈接，用戶可以使用它們來使網(wǎng)站或應(yīng)用程序按設(shè)計(jì)正常工作。

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

可悲的是，設(shè)計(jì)這些元素通常是設(shè)計(jì)過程中被遺忘的一部分。請不要在您的項(xiàng)目中忽略這點(diǎn)。