（移动端）按钮设计你真的会么？

时间：2023-10-20 01:06:01 | 来源：网站运营

时间：2023-10-20 01:06:01 来源：网站运营

（移动端）按钮设计你真的会么？：【摘要】在我们的UI设计中，有一个经常被用到的界面元素-按钮。虽然按钮小而常见，但是，我们不可否认它具有一定的重要性。在实际的页面设计当中，UI新人对按钮细节的处理，不到位的情况，比比皆是。下面的这篇文章将和大家探讨一下移动端按钮的设计，以便大家在设计中，更合理的使用按钮...

【作者】Molly

什么是按钮（Button）?

按钮是最常见的组件之一，它是界面中必备的交互元素，是用户和系统沟通交流的核心组件；如果页面中没有按钮，页面无法实现页面跳转，可以说这个页面是不完整的。完整的视觉设计中按钮包含，强、中、弱3个层次。按钮的状态分为正确未点击、单击、和不可点击3种状态。

按钮的作用? 确认命令，启动功能，开关选择......

按钮分类：CTA按钮（鼓励性）、文字按钮（指示性）、归类按钮、幽灵按钮、悬浮按钮

1.CTA按钮

CAT是英文 “call-to-action”的简写,旨在鼓励用户执行特定操作，又名行为召唤按钮。是 Web 和移动软件应用中最常用的交互元素，其主要作用就是引导人们做出某些特定操作，从而提高产品的转化率。

2.文字按钮

文字按钮为视觉层级较低的按钮形式，在移动端设计中，文字按钮规范一般用于顶部导航栏。由于移动端屏幕大小的限制，文字按钮会受限于显示面积，因此不易过长，字数不宜超过4个字。在网页设计中，表格页面中的操作按钮，基本都采取文字按钮的形式。

3.幽灵按钮

幽灵按钮是中间为空，它的外围有一圈淡淡的轮廓，中间包含了简单的文字，除了外框和文字，它几乎是透明。（故名“幽灵”），这种按钮有助于视觉层次的区分，避免出现多个CTA 。

幽灵按钮的主要组成元素：

1.按钮中间为空；

2.用线条表示外部轮廓，一般只有一点点厚度；

3.内部只用文字展示按钮名称；

4.颜色通常只有黑白，它没有使用复杂的颜色、样式；

5.按钮往往比传统按钮更大；

4.悬浮按钮

悬浮按钮，是 Android 应用中最常见的一个控件，在 Material Design 出现之初，备受追捧。悬浮按钮通常为圆形，底部加少量的投影让它看起来悬浮在页面之中，是页面中的主要按钮，可以说能够代表这个产品的核心功能。

5.归类按钮

归类按钮，也称之为类目按钮。在电商、餐饮平台中，这种按钮经常被用到。它可以是文字形式、图片的形式，或者图片+文字的形式

按钮的设计原则

1）按钮尺寸和间距

按钮在屏幕中的大小，体现了它在屏幕中的优先级别。适当大小的按钮，可以引导用户进行点击。一个按钮的识别性和号召性，我们可以调整它的体积大小来提高，但绝不是随意的，无上限的。按钮如果太大，会影响页面布局，影响页面的美观。按钮大小的设计，要严格按照设计规范来。在Apple的设计规范中，指出，最小的点击目标尺寸是44 x 44像素。Microsoft中建议使用34 x 34像素的尺寸，最小也要26 x 26 像素。

2）按钮颜色

按钮的用色，绝对是一门学问，选择合适的颜色至关重要。通常，在按钮的设计中，多用颜色来填充按钮。其中CAT按钮代表性最强，能有效多引导用户对交互进行操作，能让用户很容易注意到。颜色，是对按钮层级进行区分的一个重要的因素。

3）按钮形状

按钮，要保留按钮的本质。简单的说，在界面众多的元素中，能让用户一眼看出来哪里是按钮。而且按钮的形状要与app或者网页的设计风格保持一致。在按钮的设计中，被用户熟知的形状有以下4个：

a.直角，填充。直角按钮，一般比较严谨，高端，适用于奢侈品等产品中；

b.圆角，填充。圆角按钮，比较中性，温和，适用于大众的产品。

c.圆角，填充，加投影（识别性最强）

d.幽灵按钮

4）按钮的位置

不管是IOS还是android的用户，大家对于页面的传统布局形式和交互都有基本的认知，形成了相对固定的操作习惯。所以，按钮的设计过程中，我们需要尽可能使用传统的布局形式，让按钮在出现在用户期望的地方，这样，不用到处去找按钮，给用户造成困扰。从而能提升用户体验和快速进行交互。

举个例子，如下图的确认订单页面，【提交订单】这个按钮非常重要，当然按钮的位置也就至关重要了。该页面需要用户阅读完并再进行操作，按钮的最佳位置应该是在界面底部。为什么是右下角而不是左下角呢？是由用户的视觉落脚点和“右手操作”习惯决定的。

5.按钮的文案

按钮的文案和按钮的形状一样非常重要。在按钮设计中，文案的重要性很容易被大家忽视。不恰当的按文案，会给客户造成困扰，延长交互的完成时间；如果想让用户更轻松，更容易的操作页面，我们需要使用恰当的文案。按钮文本用词要精确；如果太过了模糊和宽泛，很容易给用户造成困扰，所以每个文本标签都应该尽量的精确。