亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

設(shè)計(jì)師按鈕UI設(shè)計(jì)思路總結(jié)，考慮到這十點(diǎn)，你將不僅僅只是美工

發(fā)布時(shí)間：2024-01-26 20:50:54 瀏覽量：277次

１請確保在整個界面中保持一致性

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

2.讓文案說明按鈕用途

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

3線狀和面狀，突出重要按鈕

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

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

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

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

5.易懂的文案

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

6.按鈕的視覺主次

在表單或?qū)υ捒蛑校粹o有另一種方法來吸引用戶的注意。當(dāng)用戶需要在主要和次要行為之間進(jìn)行選擇時(shí)，視覺區(qū)分是可靠的方法：

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

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

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

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

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

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

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

8.突出最重要的按鈕

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

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

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

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

按鈕是創(chuàng)造流暢用戶體驗(yàn)的關(guān)鍵因素，因此在實(shí)踐是必須要重視的。快速回顧：

  • 讓按鈕像按鈕

  • 讓文案說明按鈕用途

  • 讓按鈕容易被看到

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

  • 讓重要的按鈕突出

當(dāng)你設(shè)計(jì)按鈕時(shí)，從最重要的按鈕開始，請記?。喊粹o設(shè)計(jì)的本質(zhì)是識別與清晰。

什么是UI按鈕組？

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

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

判斷

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

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

選擇

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

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

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

總結(jié)

以上就是我對按鈕組的使用場景做的一個總結(jié)，希望可以給大家?guī)硪恍椭?/p>

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動，老師會在第一時(shí)間與您取得聯(lián)系，請保持電話暢通！
確定