（移動端）按鈕設(shè)計你真的會么？

時間：2023-10-20 01:06:01 | 來源：網(wǎng)站運營

時間：2023-10-20 01:06:01 來源：網(wǎng)站運營

（移動端）按鈕設(shè)計你真的會么？：【摘要】在我們的UI設(shè)計中，有一個經(jīng)常被用到的界面元素-按鈕。雖然按鈕小而常見，但是，我們不可否認(rèn)它具有一定的重要性。在實際的頁面設(shè)計當(dāng)中，UI新人對按鈕細(xì)節(jié)的處理，不到位的情況，比比皆是。下面的這篇文章將和大家探討一下移動端按鈕的設(shè)計，以便大家在設(shè)計中，更合理的使用按鈕...

【作者】Molly

什么是按鈕（Button）?

按鈕是最常見的組件之一，它是界面中必備的交互元素，是用戶和系統(tǒng)溝通交流的核心組件；如果頁面中沒有按鈕，頁面無法實現(xiàn)頁面跳轉(zhuǎn)，可以說這個頁面是不完整的。完整的視覺設(shè)計中按鈕包含，強(qiáng)、中、弱3個層次。按鈕的狀態(tài)分為正確未點擊、單擊、和不可點擊3種狀態(tài)。

按鈕的作用? 確認(rèn)命令，啟動功能，開關(guān)選擇......

按鈕分類：CTA按鈕（鼓勵性）、文字按鈕（指示性）、歸類按鈕、幽靈按鈕、懸浮按鈕

1.CTA按鈕

CAT是英文 “call-to-action”的簡寫,旨在鼓勵用戶執(zhí)行特定操作，又名行為召喚按鈕。是 Web 和移動軟件應(yīng)用中最常用的交互元素，其主要作用就是引導(dǎo)人們做出某些特定操作，從而提高產(chǎn)品的轉(zhuǎn)化率。

2.文字按鈕

文字按鈕為視覺層級較低的按鈕形式，在移動端設(shè)計中，文字按鈕規(guī)范一般用于頂部導(dǎo)航欄。由于移動端屏幕大小的限制，文字按鈕會受限于顯示面積，因此不易過長，字?jǐn)?shù)不宜超過4個字。在網(wǎng)頁設(shè)計中，表格頁面中的操作按鈕，基本都采取文字按鈕的形式。

3.幽靈按鈕

幽靈按鈕是中間為空，它的外圍有一圈淡淡的輪廓，中間包含了簡單的文字，除了外框和文字，它幾乎是透明。（故名“幽靈”），這種按鈕有助于視覺層次的區(qū)分，避免出現(xiàn)多個CTA 。

幽靈按鈕的主要組成元素：

1.按鈕中間為空；

2.用線條表示外部輪廓，一般只有一點點厚度；

3.內(nèi)部只用文字展示按鈕名稱；

4.顏色通常只有黑白，它沒有使用復(fù)雜的顏色、樣式；

5.按鈕往往比傳統(tǒng)按鈕更大；

4.懸浮按鈕

懸浮按鈕，是 Android 應(yīng)用中最常見的一個控件，在 Material Design 出現(xiàn)之初，備受追捧。懸浮按鈕通常為圓形，底部加少量的投影讓它看起來懸浮在頁面之中，是頁面中的主要按鈕，可以說能夠代表這個產(chǎn)品的核心功能。

5.歸類按鈕

歸類按鈕，也稱之為類目按鈕。在電商、餐飲平臺中，這種按鈕經(jīng)常被用到。它可以是文字形式、圖片的形式，或者圖片+文字的形式

按鈕的設(shè)計原則

1）按鈕尺寸和間距

按鈕在屏幕中的大小，體現(xiàn)了它在屏幕中的優(yōu)先級別。適當(dāng)大小的按鈕，可以引導(dǎo)用戶進(jìn)行點擊。一個按鈕的識別性和號召性，我們可以調(diào)整它的體積大小來提高，但絕不是隨意的，無上限的。按鈕如果太大，會影響頁面布局，影響頁面的美觀。按鈕大小的設(shè)計，要嚴(yán)格按照設(shè)計規(guī)范來。在Apple的設(shè)計規(guī)范中，指出，最小的點擊目標(biāo)尺寸是44 x 44像素。Microsoft中建議使用34 x 34像素的尺寸，最小也要26 x 26 像素。

2）按鈕顏色

按鈕的用色，絕對是一門學(xué)問，選擇合適的顏色至關(guān)重要。通常，在按鈕的設(shè)計中，多用顏色來填充按鈕。其中CAT按鈕代表性最強(qiáng)，能有效多引導(dǎo)用戶對交互進(jìn)行操作，能讓用戶很容易注意到。顏色，是對按鈕層級進(jìn)行區(qū)分的一個重要的因素。

3）按鈕形狀

按鈕，要保留按鈕的本質(zhì)。簡單的說，在界面眾多的元素中，能讓用戶一眼看出來哪里是按鈕。而且按鈕的形狀要與app或者網(wǎng)頁的設(shè)計風(fēng)格保持一致。在按鈕的設(shè)計中，被用戶熟知的形狀有以下4個：

a.直角，填充。直角按鈕，一般比較嚴(yán)謹(jǐn)，高端，適用于奢侈品等產(chǎn)品中；

b.圓角，填充。圓角按鈕，比較中性，溫和，適用于大眾的產(chǎn)品。

c.圓角，填充，加投影（識別性最強(qiáng)）

d.幽靈按鈕

4）按鈕的位置

不管是IOS還是android的用戶，大家對于頁面的傳統(tǒng)布局形式和交互都有基本的認(rèn)知，形成了相對固定的操作習(xí)慣。所以，按鈕的設(shè)計過程中，我們需要盡可能使用傳統(tǒng)的布局形式，讓按鈕在出現(xiàn)在用戶期望的地方，這樣，不用到處去找按鈕，給用戶造成困擾。從而能提升用戶體驗和快速進(jìn)行交互。

舉個例子，如下圖的確認(rèn)訂單頁面，【提交訂單】這個按鈕非常重要，當(dāng)然按鈕的位置也就至關(guān)重要了。該頁面需要用戶閱讀完并再進(jìn)行操作，按鈕的最佳位置應(yīng)該是在界面底部。為什么是右下角而不是左下角呢？是由用戶的視覺落腳點和“右手操作”習(xí)慣決定的。

5.按鈕的文案

按鈕的文案和按鈕的形狀一樣非常重要。在按鈕設(shè)計中，文案的重要性很容易被大家忽視。不恰當(dāng)?shù)陌次陌?，會給客戶造成困擾，延長交互的完成時間；如果想讓用戶更輕松，更容易的操作頁面，我們需要使用恰當(dāng)?shù)奈陌?。按鈕文本用詞要精確；如果太過了模糊和寬泛，很容易給用戶造成困擾，所以每個文本標(biāo)簽都應(yīng)該盡量的精確。