ionic4 select 去掉确定取消按钮_如何设计好按钮

╰+哭是因爲堅強的太久メ 2023-01-01 09:54 175阅读 0赞

![36d0db22de5222665d15106392a1d89c.png][]

**第一章：设计语言-按钮**

1.前言

2.按钮应放在用户预期希望看到的地方

3.确定与取消按钮是放在右边还是左边

4.按钮应加上相应的操作反馈

5.按钮应该有合理的尺寸

6.大多数用户熟悉的按钮样式

7.按钮的4种交互状态

**1、前言**

按钮是UI界面中一个重要的交互元素也是图形化界面中，最早出现，也是最为常见的一种交互对象，在今天的文章中，我们将会回顾一下按钮设计的几个细节希望能够在设计的时候帮到你。

**2、按钮应放在用户预期希望看到的地方**

用户对于页面交互其实也是有着基本的感知和期望的，也就是说用户对按钮的位置也有个基本的认知，不要让用户到处找按钮，它最好在用户所期望的位置出现。在我们设计中尽量使用传统的布局和标准的UI模式所谓传统的布局就是贴合符合用户以前已有使用经验的布局，用户在浏览使用时对于这样的UI布局有着明确的预期，在对的位置看到了对的按钮，整体也更加容易理解，自然也就可以更加轻松和界面进行人机交互了

**3、确定与取消按钮是放在右边还是左边？**

个人认为我们应当根据具体的场景具体分析，这个问题其实国内外也有很多专家做出实验分析，但都没有得出具体结果如果非常感兴趣的话可以查找相应文献查询在我的印象中ios苹果系统**确定按钮**是放在右边的**取消按钮**则是放在左边但微软恰恰相反

![4241930d21460b64182320095943e999.png][]

![69e5cae7699027a1918f86e35513546d.png][]

我觉得系统规则可能影响更大，比如中国人用筷子，西方人用刀叉，要证明筷子和刀叉哪个更加适合人类本能，怎么设计实验来验证，恐怕唯一的实验对象只能是还没学会用餐的小孩，因为在每个人已经被环境同化的情况下，本能的影响已经微乎其微了，而就算真的证明筷子和刀叉哪个更符合人类本能又能怎样呢？也不可能因为那一点微小的学习成本就让全视角废弃任何一种餐具，思考到这里，恐怕只有顺应大环境，符合用户使用习惯才是最好的产品，所以我们平时在设计中按照自已的业务平台来确定按钮即可。

**4、按钮应加上相应的操作反馈标签**

当按钮的操作反馈标签如果写的太过广泛模糊的话可能会让用户感到迷惑，每个标签上的文本标签都应该尽量准确，简单直接的介绍清楚它的真实功能呢。例如用户不小心触发了一个删除按钮，现在你看到了下面的提升信息：

![dcf3bb3b59fd5d07eebca1983ba5e4dc.png][]

![e70753faaf0165db93f2999878179489.png][]

在这个界面中 ok 是一个相当模糊的表述，并没有说明按钮的作用。不论是确定或取消都没有说清楚这个操作的真实的含义，尤其当删除是一个非常危险的操作，你不确定当你点击之后会丢失什么，如果是数据库中的数据那就后果非常严重，因此这个操作就需要更加精准的表述了所以这个地方稍作修改改为删除和取消更合适，而删除就用红色区分标识，让用户意识到这个操作的重要性或者独特性。

**5、按钮应该有合理的尺寸**

重要的按钮在视觉上就应该体现他的重要性，在设计中我们要始终让主要的按钮更加的突出，增加它的尺寸，并且使用高对比度的色彩来吸引用户的注意力。

![a64ff8e25c880abfeafd80e4cec6d1d4.png][]

在设计中我们通常会保持页面统一的风格，比如统一的圆角，统一的按钮风格在网页和后台系统中我们通常使用的按钮尺寸为24px、32px、40px、48px都是4的倍数，数与数之间也是+-8的关系，另外在绘制按钮的尺寸

注意平方，留出按钮上下均等的距离，另外这几个数值从web端的体验上来看，比例也是相对更合适的，所以通常会采用这几个较为规范的数值。

**6、大多数用户熟悉的按钮样式**

![4b963f9a777e3f808336aecf49aecdee.png][]

**7、按钮的4种交互状态**（默认状态、hover状态、点击后状态、禁止状态）

![ede4beb69078628610b19737be46d3e1.png][]

**谢谢阅读感谢支持**

最后，在结尾我想说这些按钮的绘制看似简单的不得了，其实都是些高精度的工作，差一个像素点都不可以，当然更需要具备一定的毅力与耐心。我觉得做设计应该追求极致，重视体验和功能，让形式追随内容，而不是内容追随形式，就这样吧。受益于罗兄的印象从今往后我也会定期更新自已在设计中的所思所感。

**记得点个赞哦**

[36d0db22de5222665d15106392a1d89c.png]: /images/20221120/056ca400c4d14f4eb01f8728e2fd92cd.png
[4241930d21460b64182320095943e999.png]: /images/20221120/39e441a3899e4817b0583121fe30ddfb.png
[69e5cae7699027a1918f86e35513546d.png]: /images/20221120/cadca69b06b049019dae34d86457b345.png
[dcf3bb3b59fd5d07eebca1983ba5e4dc.png]: /images/20221120/fef8aeec88ec42f49f9b79a3180bfc1f.png
[e70753faaf0165db93f2999878179489.png]: /images/20221120/6c44e52330324adb847f7a208b3fa62f.png
[a64ff8e25c880abfeafd80e4cec6d1d4.png]: /images/20221120/6751371b02634feb82c4100432668511.png
[4b963f9a777e3f808336aecf49aecdee.png]: /images/20221120/1e12a3955ac04852add4b373c68af1d1.png
[ede4beb69078628610b19737be46d3e1.png]: /images/20221120/bd02fce7e3224dc680bae830c6cb34c5.png