UI設計中如何把按鈕設計的更好？
來源：優(yōu)漫教育
發(fā)布人：UMAN
時間：2023-12-04 16:27:52
在PC端設計按鈕時，因為鼠標的精準點擊，我們通常會將按鈕設計得小一些，同時也能讓整個界面看起來更加細膩，只要不影響操作，36px~如果將按鈕樣式設計的與用戶認知有較大的偏差，不易于用戶理解。
說起按鈕，很多做設計的小伙伴是熟悉的不能再熟悉了，它是我們在設計界面時最常用、最重要的組件之一，也是易被忽略的元素之一，所以在設計之前，做好對按鈕組件的認識、了解非常有必要。
按鈕最吸引我們的莫過于通過簡單觸摸就能輕松滿足自己的行為需求，按鈕設計的直觀性及易用性會影響著人們完成一件事情的意愿及效率。
在UI設計中，如何完美地避開問題、把按鈕設計得更好，是每個設計師需要深思的問題。按鈕設計的好壞，將直接關系著用戶引流、觸發(fā)行動、產(chǎn)品轉(zhuǎn)化率等至關重要的問題。
另外，精致的按鈕也會讓整個頁面的視覺提升檔次。本篇文章將對按鈕作出解析，介紹在設計按鈕時需要著重考慮的因素及設計標準，并將理論付諸于實踐。
一、按鈕的作用1.什么是按鈕
在UI設計中，按鈕是一個明確指示交互行為動作的組件，主要用于觸發(fā)某一個即時操作，很多時候，我們需要采取下一步行動或返回到上一步，都要通過按鈕（部分場景可用手勢交互）來完成。
在視覺層面，按鈕的組成看起來很簡單，由一個底色塊/線框加上一組文案即可組成，但真正要將按鈕設計好，僅停留在視覺層面并不嚴謹，其大小、位置、色值、文案……等每一個細節(jié)的處理都關系著用戶的操作體驗，下面的這幾種情況大家肯定有碰到過：
2.按鈕有什么用
通常，我們在設計按鈕之前，需要詳細理解按鈕所存在的意義，哪里該加、哪里不該加、為什么要加，主要從以下幾點來體現(xiàn)按鈕的作用：
1）功能性操作
這種按鈕很常見，比如展開、收起、下拉、加減等，按鈕視覺較弱，重點強調(diào)該頁面的功能，突出主體信息，在操作之后會發(fā)生一些交互變化，這類按鈕主要起到功能形態(tài)的作用。
2）明確引導下一步操作
當用戶完成一個頁面的內(nèi)容填充或信息確認，就會失去視覺焦點，而下一步按鈕就會聚焦視覺重心，通過文案告知用戶下一步該怎么做，常見的有保存、下一步、支付、確定……等。
另外，用戶需要完成某個任務，但同一個任務流程的信息、種類較多，這時就會通過分步驟、分頁的方式，并在每個步驟的末尾增加一個能起到上下銜接作用的按鈕，明確引導用戶進入下一步操作，以此來提升用戶完成整個任務的成功率。
3）培養(yǎng)行為習慣
如果在操作某個按鈕之后得到了一定的利益，且能持續(xù)為用戶帶來價值，那么不妨將這個按鈕設計的更醒目，并在同等級但不同的地方保持視覺的統(tǒng)一，持續(xù)培養(yǎng)用戶點擊習慣，當用戶下次再看到類似這種按鈕時，慣性思維就會引導點擊。
3.按鈕的組成
在大部分的認知中，最常見的按鈕就是一個底色塊加上一句文案就完成了，殊不知一個好的按鈕需要經(jīng)過很多細節(jié)的把控，才能發(fā)揮出按鈕的最大作用。
例如文案的長短/邊距、容器的大小/圓角、填充色的主/次之分……等，下面我們來看看一個按鈕到底是由哪些屬性、元素組成。
說起按鈕，很多做設計的小伙伴是熟悉的不能再熟悉了，它是我們在設計界面時最常用、最重要的組件之一，也是易被忽略的元素之一，所以在設計之前，做好對按鈕組件的認識、了解非常有必要。
按鈕最吸引我們的莫過于通過簡單觸摸就能輕松滿足自己的行為需求，按鈕設計的直觀性及易用性會影響著人們完成一件事情的意愿及效率。
在UI設計中，如何完美地避開問題、把按鈕設計得更好，是每個設計師需要深思的問題。按鈕設計的好壞，將直接關系著用戶引流、觸發(fā)行動、產(chǎn)品轉(zhuǎn)化率等至關重要的問題。
另外，精致的按鈕也會讓整個頁面的視覺提升檔次。本篇文章將對按鈕作出解析，介紹在設計按鈕時需要著重考慮的因素及設計標準，并將理論付諸于實踐。
一、按鈕的作用1.什么是按鈕
在UI設計中，按鈕是一個明確指示交互行為動作的組件，主要用于觸發(fā)某一個即時操作，很多時候，我們需要采取下一步行動或返回到上一步，都要通過按鈕（部分場景可用手勢交互）來完成。
在視覺層面，按鈕的組成看起來很簡單，由一個底色塊/線框加上一組文案即可組成，但真正要將按鈕設計好，僅停留在視覺層面并不嚴謹，其大小、位置、色值、文案……等每一個細節(jié)的處理都關系著用戶的操作體驗，下面的這幾種情況大家肯定有碰到過：
2.按鈕有什么用
通常，我們在設計按鈕之前，需要詳細理解按鈕所存在的意義，哪里該加、哪里不該加、為什么要加，主要從以下幾點來體現(xiàn)按鈕的作用：
1）功能性操作
這種按鈕很常見，比如展開、收起、下拉、加減等，按鈕視覺較弱，重點強調(diào)該頁面的功能，突出主體信息，在操作之后會發(fā)生一些交互變化，這類按鈕主要起到功能形態(tài)的作用。
2）明確引導下一步操作
當用戶完成一個頁面的內(nèi)容填充或信息確認，就會失去視覺焦點，而下一步按鈕就會聚焦視覺重心，通過文案告知用戶下一步該怎么做，常見的有保存、下一步、支付、確定……等。
另外，用戶需要完成某個任務，但同一個任務流程的信息、種類較多，這時就會通過分步驟、分頁的方式，并在每個步驟的末尾增加一個能起到上下銜接作用的按鈕，明確引導用戶進入下一步操作，以此來提升用戶完成整個任務的成功率。
3）培養(yǎng)行為習慣
如果在操作某個按鈕之后得到了一定的利益，且能持續(xù)為用戶帶來價值，那么不妨將這個按鈕設計的更醒目，并在同等級但不同的地方保持視覺的統(tǒng)一，持續(xù)培養(yǎng)用戶點擊習慣，當用戶下次再看到類似這種按鈕時，慣性思維就會引導點擊。
3.按鈕的組成
在大部分的認知中，最常見的按鈕就是一個底色塊加上一句文案就完成了，殊不知一個好的按鈕需要經(jīng)過很多細節(jié)的把控，才能發(fā)揮出按鈕的最大作用。
例如文案的長短/邊距、容器的大小/圓角、填充色的主/次之分……等，下面我們來看看一個按鈕到底是由哪些屬性、元素組成。
相關推薦
-
【UI培訓】：關于UI設計新手常遇到的問題及解決方法
UI設計新手常遇到的問題有哪些？比如，請問UI設計師每天的工作內(nèi)容是什么樣的？除了做圖還要干什么？還需要哪些技能？個人職業(yè)規(guī)劃通常什么樣？做圖只是視覺設計師最基礎的工作，除了視覺執(zhí)行，還需要向上接入PD了解產(chǎn)品需求、在設計中驗證交互流程，向下跟進程序開發(fā)、數(shù)據(jù)收…行業(yè)資訊發(fā)布時間：2022/03/24 查看詳情 -
室內(nèi)設計應體現(xiàn)文化元素的六大重要思維
無論是首都北京的故宮，還是西藏的布達拉宮，其精巧的室內(nèi)裝潢和環(huán)境藝術，都有誰能說出這并非出自頂級的專業(yè)室內(nèi)設計師和藝術大師之手，中國傳統(tǒng)室內(nèi)設計文化也正是傳統(tǒng)東方文化與古典建筑藝術的精華部分。行業(yè)資訊發(fā)布時間：2022/03/24 查看詳情 -
UI設計培訓中有沒有學不會UI的人
UI設計培訓中有沒有學不會UI的人？優(yōu)漫教育小編要說是真的有，就是那些根本不想學的，就像你永遠叫不醒一個裝睡的人。如果你對ui有強烈的學習興趣，想在ui行業(yè)有所建樹，那么不論你是高中畢業(yè)、大學畢業(yè)，不論你是有計算機基礎、零基礎，不論你是男生、女生，不論你是20歲、30…行業(yè)資訊發(fā)布時間：2022/04/01 查看詳情
