百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

设计按钮真的很简单吗?(按钮设计原则)

myzbx 2025-01-29 17:00 64 浏览

编辑导语:按钮设计是产品设计中的必要模块,合理的按钮设计可以让用户有更清晰的认知,一定程度上提升用户的产品使用体验。本篇文章里,作者便对按钮结构、按钮状态、按钮开发对接技巧等方面做了总结,一起来看一下。

按钮是每个产品设计当中必备的交互元素,可以说是整个Ixd设计当中最为重要的一环。

在现实世界当中,出现的各种各样的物理按钮也成为了界面设计当中按钮的映射,让我们去理解交互设计当中的按钮降低了理解的成本。那么今天我为大家分享一下有关交互设计当中按钮的经验。

一、什么是按钮

1. 追本溯源

按钮从字面解释来看,可拆解为“按”与“钮”两部分。

“按”即为用手或手指压动作;“钮”的含义就比较有意思,在东方文化中“钮”本意指印章上用来系绶带凸起的部分,引申指物件的机键、中心部分。西方文化中“button”指带有信息的徽章,比如古代带有家族信息用来蜡封的徽章戒指。

2. 现实中的含义

按钮(维基百科)是一种开关,用来控制机械或程序的某些功能。一般而言,红色按钮是用来使某一功能停止,而绿色按钮,则通常可开始某一项功能。

3. 交互设计中的含义

按钮(维基百科),是程序或网页常用的一个控件。在程序中,按钮是最常用的用于触发事件的控件,也可以开始,中断,结束一个进程。

综上结论,在交互设计当中,按钮是界面之上最具有仪式感的存在,没有之一(综上“按钮定义”与“按钮释义”的概念总结源于Hozin的表单课程)。

二、按钮的结构

  1. 图标:按钮含义的图形化表达。
  2. 文字标签:按钮含义的文字化表达。
  3. 圆角:决定按钮视觉感受的元素。
  4. 背景:决定按钮视觉感受的元素,改变颜色能够表示按钮的状态。
  5. 容器:按钮的载体。
  6. 边框:明确的按钮的大小与边界。

通过对按钮六大要素的不同组合,就可以得到不同种类的按钮类型,例如主按钮、标准按钮、幽灵按钮、文字按钮等,从而来适配不同产品不同业务场景下对按钮的类型需求。

三、按钮的状态

按钮状态,即当下按钮所处的操作状态,它可以帮助用户去判断当下按钮处在:正常状态(Normal)、聚焦状态(Focus)、悬停状态(Hover)、激活状态(Active)、禁用状态(Disabled)当中的哪一种。

1. 正常状态

正常状态,用户在日常使用产品中最常接触到的一种按钮状态,也是设计师在工作中对按钮主要的设计形态。表示该按钮可交互的,并且已经启用。

2. 聚焦状态

聚焦状态,主要用于展示当前电脑光标所在的具体位置。这种状态对于一些刚入行的设计师比较容易遗漏。

它的作用是当用户不用鼠标操作时,也可以用Tab按键或者方向键去页面进行访问。现在相当多的产品几乎都去掉了该种状态,造成产品可用性大大降低。

3. 悬停状态

悬停状态,出现在鼠标指针在按钮处停留,该按钮发出的特殊反馈。该状态在桌面端产品中出现,移动端交互形态中无此状态,故不必考虑。

一般的做法是在亮色的按钮上,叠加一层10%的黑色蒙层。

4. 激活状态

激活状态,当用户按下按钮时出现该状态,其颜色由浅变深。一般的做法是在亮色的按钮上,叠加一层20%的黑色蒙层。

5. 禁用状态

禁用状态,当表单信息没有填写完整,或者没有达到某类条件时,按钮所表现出来的不可点击的形态。无论web还是app很多场景都会用到该状态。

但是个人意见来看,如果可以的话,我建议避免使用禁用按钮。最好可以一直启用,如果用户没有满足触发的条件时,只需要在条件处高亮提示,或者显示通知即可。对于“按钮为什么不可至灰”在Hozin表单课程中详细讲解。

6. 特别提醒

这里很多朋友提出按钮似乎还有一个加载状态是需要考虑的,但是就我个人意见按钮加载状态不应该算在按钮基本状态当中,甚至不太提倡这种设计,因为此种做法会用户感到困惑。

例如下图:

加载态按钮设计会让用户感到存在两种可能性:

  1. 这种状态是因为输入搜索信息后数据处在加载中吗?
  2. 这种状态是因为网络问题造成按钮这个组件处在加载中吗?

四、与开发对接小技巧

相信工作中很多小伙伴在按钮的设计还原当中会碰到如上图所示这样的问题。明明自己标注时很清楚,开发还原起来会有很大的问题,这里其实有个关于padding的思维。

1. Padding的概念

Padding简单的可以理解为属性定义元素边框与元素内容之间的空间。

对于前端同学来说同一系列的按钮最好可以有相同的padding值。这样更有利于项目的开发与维护。所以我们在设计时更应该对于规范有预先的判断与规划。

2. 最小Padding值

一般习惯于把4个字的宽度定为文字标签的最小宽度。

举个例子,我们按钮内文字大小为12px,左右的padding值分别为24px,那么按钮的最小宽度=12*4+24+24=96px,方便前端进行CSS开发。

3. 其他事项

在我们的设计软件中,按钮边框有三种,内边框、居中边框、外边框,默认为居中;但是在前端的CSS代码中没有居中边框,如果需要调整为外边框,需要跟前端小哥特别提醒。

五、结语

按钮是Ixd设计中作为一个最基础的元素,但是在整个设计体系中,它一直都扮演着一个十分重要的位置。就跟开头讲的,在交互设计当中,按钮是界面之上最具有仪式感的存在,没有之一,通过我的分享可以为大家避开设计当中的坑。

作者:月亮月六便士;公众号:月亮体验设计坊

本文由 @月亮与六便士 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

相关推荐

判断变量是否为数组(判断变量是否为数组的函数)

大家好,我是前端西瓜哥,今天带大家学习在JS中如何判断一个对象是否为数组。Array.isArray最好的写法是使用Array.isArray(val)。因为该方法能正确判断iframe传过...

2023-03-13:给定一个整数数组 A,坡是元组 (i, j),其中 i < j 且 A[i]

2023-03-13:给定一个整数数组A,坡是元组(i,j),其中i<j且A[i]<=A[j],这样的坡的宽度为j-i。找出A中的坡的最大宽度,如果不存在,返...

世界上形形色色的“奇葩”小望远镜②

上一篇我们介绍了在探索伽玛射线暴、超新星上大放光彩的小望远镜,但天文学所研究的领域却是非常的多,比如我们所好奇的暗物质以及太阳系外行星等,那么在这些方面做出突出贡献的“奇葩”小望远镜都是谁呢?1、蜻蜓...

C#解析多层嵌套的JSON数组(多层嵌套json转换成map)

首先引用开源类库:Newtonsoft.Json.dll,目前最低支持.NET3.5版本。官方帮助文档:http://www.newtonsoft.com/json/help/html/Samples...

Vlookup函数的这7个应用技巧都不掌握,那就真的Out了

查询引用,用到最多的函数为Vlookup,但你真的会用吗?其实,Vlookup函数除了常规的查询引用外,还有多种使用技巧一、Vlookup函数:功能及语法结构。功能:在指定的数据范围内返回符合查询要...

C语言-闲聊一维、二维数组(c语言中二维数组的定义和使用)

①若a[i]为一维数组则有,a[0],为数组的一个元素。a[i]=*(&a[i]),为数组的一个元素。a+i=&a[i],为元素a[i]的地址。*(*(a+i))=*(*&a[...

Excel常用技能分享与探讨(5-宏与VBA简介之VBA的数组与集合)

总结数组:适合处理固定大小、类型一致、需要快速访问的数据。集合:适合动态增删、键值查找或混合类型数据。根据具体需求选择合适的数据结构,可显著提升代码效率和可读性。一、从仓库管理理解数据结构(场景化入门...

数据结构串和数组(一)(数据结构串的概念)

一、串的基本概念串是由零个或多个字符组成的有限序列。记作str="a0a1…an-1"(n≥0)。串中所包含的字符个数n称为串长度,当n=0时,称为空串。一个串中任意连续的字符组成的子...

C语言进阶教程:指针数组与数组指针

在C语言中,指针和数组是两个核心且紧密相关的概念。当它们结合时,就产生了指针数组(ArrayofPointers)和数组指针(PointertoanArray)。这两者在语法、含义和用途上都...

一篇文章搞懂数组的所有知识点(一篇文章搞懂数组的所有知识点怎么写)

1.一维数组数组是一种数据结构,用来存储多个相同类型的数据,并通过索引来访问每个元素。概念描述示例代码什么是数组?数组是一种数据结构,用来存储一组相同类型的值。你可以把它想象成一个排好序的储物柜,每...

这些Java基础知识,诸佬们都还记得嘛(学习,复习,面试均可)

方法重载和方法重写的区别方法重写重写体现在继承关系上。在Java中,子类继承父类,子类就会具备父类所以的特征,以及父类的方法和变量比如动物类有“叫”的方法,小狗小猫分别继承了动物类,重写方法时就可以...

js将list转化为tree格式的几种写法

最近在考虑一个树状结构存储。最终需要将list转化为tree格式源数据示例源数据共401条[{"menuId":"5f50c5fb8f0d74536bbfb7a4"...

Java学习之数组——java基础篇(java数组知识)

如果希望保存一组有相同类型的数据,可以使用数组。数组的定义和内存分配Java中定义数组的语法有两种:typearrayName[];type[]arrayName;type为Java中的任...

C语言-数组平均值与排序(c语言数组平均数)

①目标输入一个正数数组,求平均值,并根据平均值重新排序,大于平均值的数前置,小于等于平均值的值后置。~②命令行#include<stdio.h>调用输入输出函数库#include<...

数据结构串和数组(二)(数据结构串的概念)

数组的基本概念数组是一个二元组(idx,value)的集合,对每个idx,都有一个value值与之对应。idx称为下标,可以由一个整数、两个整数或多个整数构成,下标含有d(d≥1)个整数称为维数是d。...