１請(qǐng)確保在整個(gè)界面中保持一致性

為什么一致性這么重要？因?yàn)橛脩?hù)會(huì)不自覺(jué)地產(chǎn)生意識(shí)，將特定形狀的元素識(shí)別為『按鈕』。因此，一致性不僅有助于創(chuàng)建出色的設(shè)計(jì)，還能為用戶(hù)提供更為熟悉的體驗(yàn)，以便用戶(hù)能夠識(shí)別所有 UI 元素并將其當(dāng)做按鈕。

2.讓文案說(shuō)明按鈕用途

用戶(hù)會(huì)抵觸沒(méi)有明確意義的界面元素。 因此，UI 中的每個(gè)按鈕都應(yīng)該有正確的文案或圖標(biāo)。如果一個(gè)按鈕的文案或圖標(biāo)然人感到奇怪或驚訝，那么請(qǐng)修正它們。

3線(xiàn)狀和面狀，突出重要按鈕

我們?cè)谠O(shè)計(jì)按鈕的時(shí)候，經(jīng)常會(huì)面臨著抉擇，線(xiàn)狀按鈕還是面狀按鈕？其實(shí)線(xiàn)狀還是面狀爭(zhēng)論不僅僅存在于按鈕，還有icon，tab和標(biāo)簽等樣式。面狀和線(xiàn)狀代表不同的設(shè)計(jì)理念，我們都知道面狀元素在界面中更容易吸引用戶(hù)的注意力，而線(xiàn)狀元素強(qiáng)調(diào)的是輕量化。具體到按鈕，簡(jiǎn)單來(lái)說(shuō)就是面狀按鈕比線(xiàn)狀按鈕具有更強(qiáng)的可點(diǎn)擊性。我們可以來(lái)看一個(gè)例子：喜馬拉雅Fm這個(gè)界面中的“錄音”按鈕其實(shí)看起來(lái)特別的吃藕，因?yàn)楹芡回?。但是設(shè)計(jì)師的目的達(dá)到了，為了提升用戶(hù)黏性，他們肯定很希望用戶(hù)在喜馬拉雅Fm里上傳自己的錄音作品，那么必須做到足夠的顯眼。

確保與重要任務(wù)相關(guān)的按鈕被突出出來(lái)。增加顏色的對(duì)比度可讓用戶(hù)專(zhuān)注于操作，并讓按鈕吸引到用戶(hù)。

4，避免設(shè)計(jì)出讓用戶(hù)不知道他們做什么的按鈕

按鈕應(yīng)該表明當(dāng)前任務(wù)是什么，讓用戶(hù)知道他們點(diǎn)擊按鈕后會(huì)發(fā)生什么。使用動(dòng)詞作為按鈕文案是很好的做法。例如，用戶(hù)正在注冊(cè)帳戶(hù)的流程中，一個(gè)說(shuō)寫(xiě)著“創(chuàng)建帳戶(hù)”的按鈕會(huì)告訴他們按下按鈕后會(huì)怎么樣，它清楚地表達(dá)了當(dāng)前的任務(wù)。這樣的按鈕文案隨時(shí)都在幫助用戶(hù)，給予用戶(hù)進(jìn)行操作的信心。

5.易懂的文案

按鈕上的文案應(yīng)該清晰表達(dá)按鈕的操作行為，如果用戶(hù)可以理解按鈕的操作會(huì)感覺(jué)更舒適。

6.按鈕的視覺(jué)主次

在表單或?qū)υ?huà)框中，按鈕有另一種方法來(lái)吸引用戶(hù)的注意。當(dāng)用戶(hù)需要在主要和次要行為之間進(jìn)行選擇時(shí)，視覺(jué)區(qū)分是可靠的方法：

• 主要行為的按鈕需要更多的視覺(jué)比重，它應(yīng)該是視覺(jué)元素更多的按鈕

• 次要行為（如“取消”或“返回”等）的視覺(jué)比重則應(yīng)該較弱，從而進(jìn)一步引導(dǎo)人們?nèi)〉媒换ミ^(guò)程中的結(jié)果

7. 讓按鈕容易被點(diǎn)擊

按鈕的尺寸和視覺(jué)反饋，在引導(dǎo)用戶(hù)與其進(jìn)行交互時(shí)具有關(guān)鍵作用。

調(diào)整尺寸和間距

你應(yīng)該考慮到按鈕相對(duì)于頁(yè)面上其他元素的大小。 同時(shí)需要確保所設(shè)計(jì)的按鈕足夠大以供用戶(hù)進(jìn)行交互。

圖 過(guò)小的觸摸目標(biāo)給用戶(hù)帶來(lái)艱難的體驗(yàn) 你應(yīng)該考慮按鈕元素的大小，及可點(diǎn)擊元素之間的間距，間距有助于區(qū)分、明確目標(biāo)，并為用戶(hù)界面提供足夠的呼吸空間。

8.突出最重要的按鈕

確保與重要任務(wù)相關(guān)的按鈕被突出出來(lái)。增加顏色的對(duì)比度可讓用戶(hù)專(zhuān)注于操作，并讓按鈕吸引到用戶(hù)。

行為召喚按鈕，重要的按鈕（用于引導(dǎo)用戶(hù)進(jìn)行你希望的操作。創(chuàng)建有效的 CTA 按鈕，需要抓住用戶(hù)的注意力并誘導(dǎo)他們點(diǎn)擊。使用與背景高對(duì)比度的顏色是很好的方法。

9.按鈕設(shè)計(jì)自查清單

雖然每個(gè)設(shè)計(jì)看上去都獨(dú)一無(wú)二，但內(nèi)在是共通的。這就是有一個(gè)好的設(shè)計(jì)清單的地方。為了確保您的按鈕設(shè)計(jì)是適合您的用戶(hù)，你需要提出幾個(gè)問(wèn)題：

按鈕是創(chuàng)造流暢用戶(hù)體驗(yàn)的關(guān)鍵因素，因此在實(shí)踐是必須要重視的?？焖倩仡櫍?br class="sysbr">

• 讓按鈕像按鈕

• 讓文案說(shuō)明按鈕用途

• 讓按鈕容易被看到

• 讓按鈕容易被點(diǎn)擊

• 讓重要的按鈕突出

當(dāng)你設(shè)計(jì)按鈕時(shí)，從最重要的按鈕開(kāi)始，請(qǐng)記住：按鈕設(shè)計(jì)的本質(zhì)是識(shí)別與清晰。

什么是UI按鈕組？

顧名思義，按鈕組就是指兩個(gè)或兩個(gè)以上的按鈕排布在一起。為了了解按鈕組的使用場(chǎng)景，首先我們來(lái)思考一個(gè)問(wèn)題：什么時(shí)候我們會(huì)使用按鈕組？

從按鈕組的樣式上我們可以看出常見(jiàn)的按鈕組是供用戶(hù)進(jìn)行判斷(兩個(gè)選項(xiàng))或者選擇(兩個(gè)以上選項(xiàng))的。

判斷

首先我們來(lái)說(shuō)判斷，就是只有兩個(gè)按鈕的情況。一般來(lái)說(shuō)，兩個(gè)按鈕中肯定有一個(gè)擁有更高的優(yōu)先級(jí)或者說(shuō)用戶(hù)更希望去點(diǎn)擊，那么我們會(huì)在樣式設(shè)計(jì)上進(jìn)行區(qū)分。其實(shí)可以讓用戶(hù)進(jìn)行判斷操作的組件還有開(kāi)關(guān)。開(kāi)關(guān)，又稱(chēng)switch，也是我們很常見(jiàn)的一個(gè)組件，表示兩種相互對(duì)立的狀態(tài)間的切換，多用于表示功能的開(kāi)啟和關(guān)閉。而一項(xiàng)功能的開(kāi)啟可能會(huì)帶來(lái)相應(yīng)的后續(xù)操作，例如你在iOS設(shè)置里開(kāi)啟了微信的“通知”功能，那么你就需要對(duì)通知形式進(jìn)行進(jìn)一步的設(shè)置。而按鈕組不會(huì)出現(xiàn)這些后續(xù)操作，更像是一錘子買(mǎi)賣(mài)，這也是按鈕組和開(kāi)關(guān)的一個(gè)主要的區(qū)別。

對(duì)于一款產(chǎn)品來(lái)說(shuō)，設(shè)計(jì)師的職責(zé)是非常大的，不應(yīng)該像現(xiàn)在這樣僅限于美工層面。從整個(gè)產(chǎn)品的角度來(lái)說(shuō)，設(shè)計(jì)師要準(zhǔn)確的定位目標(biāo)用戶(hù)群，根據(jù)目標(biāo)用戶(hù)群的喜好來(lái)確定界面設(shè)計(jì)風(fēng)格，具體到每個(gè)界面中設(shè)計(jì)師要考慮各個(gè)功能的優(yōu)先級(jí)排布。不要怕麻煩，你能做的事情越多，你的“可替代性”就越低，所得的報(bào)酬就會(huì)越多。

選擇

喝完了雞湯，接下來(lái)我們回到正題。再來(lái)說(shuō)按鈕組中有三個(gè)或者三個(gè)以上的選項(xiàng)的時(shí)候我們應(yīng)該怎么處理呢？

其實(shí)這種出現(xiàn)多個(gè)選項(xiàng)的按鈕組樣式我們可以看成是單選/復(fù)選功能的一個(gè)變形。只不過(guò)現(xiàn)在傳統(tǒng)的單選/復(fù)選的樣式很難滿(mǎn)足當(dāng)前的設(shè)計(jì)需要，用戶(hù)渴望更加新穎多變的按鈕樣式。特別是選項(xiàng)過(guò)多的情況下，按鈕的優(yōu)勢(shì)就凸顯出來(lái)了。

單選/復(fù)選都是供用戶(hù)進(jìn)行選擇操作，其實(shí)還有一個(gè)組件跟單選/復(fù)選很相似，那就是下拉列表。當(dāng)選項(xiàng)過(guò)多時(shí)，用戶(hù)可以使用下拉菜單展示并選擇內(nèi)容。下拉列表的優(yōu)勢(shì)在于節(jié)省了界面空間，但是用戶(hù)想要看到全部的選項(xiàng)必須要點(diǎn)擊出下拉列表，增加了操作步驟，而且會(huì)對(duì)界面中其他內(nèi)容造成遮擋。所以當(dāng)你的界面元素不是很多的情況下，我的個(gè)人建議是盡量使用單選/復(fù)選按鈕。

總結(jié)

以上就是我對(duì)按鈕組的使用場(chǎng)景做的一個(gè)總結(jié)，希望可以給大家?guī)?lái)一些幫助。