大家好，这里是兰亭妙微设计，一家专注 B 端系统、Web 界面与交互体验的专业设计公司。今天我们聊一个设计师圈里老生常谈、却又天天踩坑的话题：UI / 交互设计师，到底要不要了解前端？
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
Figma 社区最新推出的资源类型——Figma Weave 工作流——现已上线。Figma Weave 让您能够在可视化画布上构建可重复、可扩展的生成式 AI 工作流。现在，您可以直接在 Figma 社区中探索和复制 Figma Weave 团队构建的工作流。无论您是想生成新图像、将图像转换为视频，还是将品牌指南扩展为插图集，Figma Weave 都能轻松实现。
网址： https://www.figma.com/release-notes/
在线的轻量级矢量编辑器，作者希望像 Figma 向量网络那种流畅的操作体验，同时又想拥有 Blender 修改器的“魔法”。最终的成果是一个基于 GPU 加速、使用 Go + WASM 构建的图标与字形设计工作室，并且完全运行在浏览器中。
它有一些很酷的功能，比如形状构建器、动态镜像、干净的 SVG 导入导出、等距绘图投影等等，还有很多其他特性。整体设计比较简洁克制，但用起来很顺手。
网址： https://iso.alasdairmonk.com/
网址： https://x.com/almonk/status/2042127913173057659
在任意网页上实现类似 Figma 的设计体验，调整元素样式、添加评论，并导出结构化 Prompt 给 AI 开发与协作。
Liaison 是一款面向设计师、产品经理、前端工程师和高频 AI 用户的浏览器插件。它让你可以直接在真实网页上完成样式调整、界面批注和实现反馈，不再依赖截图标注、文档补充和反复描述。你可以像在设计工具里一样选中页面元素，修改尺寸、间距、字体、颜色、圆角、描边、投影等属性，同时把评论和修改统一整理成结构化结果，方便交给开发或 AI 继续实现。
使用介绍： https://gwrdluzl9j9.feishu.cn/wiki/JWRjwF12ZiSQSrkjHbMcMwfbnPu
最贵的缩放录屏软件 Screen Studio，核心功能被 Recordly 复刻，完全免费开源！ 同时支持 Mac/Windows/Linux。 测试了下，比 Screen Studio 还轻便顺滑
网址： https://github.com/webadderall/Recordly
MingCute 是一套简约精致的开源图标库。无论您是设计师还是开发者，它都非常适合用于 Web 和移动端项目，同时提供了 Figma 插件能够更便捷的在设计过程中使用，以及动画图标库、UI 组件库、天气图标等不同场景的素材
Figma 插件： https://www.figma.com/community/plugin/1306884809438005528/mingcute-icon
作者使用 vibe Coding 了一个支持 Markdown、图文混排的长文转小红书图片生成器，
一个微型工具，用于在 localhost 上测量间距并对齐您的 UI
网址： https://x.com/Ibelick/status/2042508446671499405
体验地址： https://mesurer.ibelick.com/
面向 UI/UX 设计师与开发者，Freefaces Gallery 是一个精选的免费开源字体合集，这意味着您可以在个人和商业项目中使用它们，而无需担心许可问题。
网址： https://www.freefaces.gallery/
你可以使用这些基于 SVG 的加载图标来直观地指示内容。 这些动画来自多种来源，均采用 MIT 许可证。因此，它们可以无限制地用于商业用途，且无需署名。
网址： https://magecdn.com/tools/svg-loaders
作者根据自身经验整理了一份「面向 UI/UX 设计师 的 Vibe Coding 完整工作流指南」从用 AI 辅助开发到 可交付、可上线。
网址： https://vibecodingfang.netlify.app/#
作者在 Figma 中 1 小时绘制的小组件，好玩的是发帖后有人回复了在线的地址，将组件实现为了可以使用的音乐播放器，在 AI 时代还是需要审美创造力的，可以通过链接体验
网址： https://x.com/AdityaSur11/status/2038881480898756695
网址： https://audio.snvshal.workers.dev/
作者为自己的博客增加了多种阅读状态，让视觉外观不止是浅色、深色，增加了树影、月色、下雨、下雪等多种自然状态，网站右上角可以切换体验
网址： https://theme-switch.pages.dev/
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
Anthropic 内部文件意外流出，揭示了其最强模型 Mythos 的恐怖算力。该模型虽具备重塑行业的潜力，但也因可能被攻击者用于挖掘系统漏洞而引发安全危机。官方声明称，在正式发布前需确保防御者已做好应对这种新型算力冲击的准备。
图源：Anthropic, Getty Images
此次泄露迅速波及资本市场，导致网络安全相关股价剧烈波动。分析师指出，Mythos 揭示了 AI 技术在安全攻防中深度嵌入的现状，反映出利用 AI 进行威胁防御已成常态，同时也暴露出单点泄露可能引发的系统性金融风险。
图源：Anthropic, Getty Images
随着 Mythos 的曝光，OpenAI 等巨头的对标模型也浮出水面，预示着 AI 正从辅助工具进化为攻防核心。未来技术博弈将进入“以 AI 对抗 AI”的新阶段，攻击者与防御者在更高维度上的算力对决，将彻底改写网络安全的竞争格局。
NVIDIA证实DLSS 5并非通过读取游戏引擎的3D几何或材质数据运行，而是仅凭2D渲染帧与运动矢量进行AI推断。这意味着该技术本质上是通过分析图像来“幻化”细节（如皮肤与光照），而非精确重建场景。
图源：NVIDIA
虽然这带来了惊人的视觉增强，但也导致AI会在早期预览中产生原画中不存在的细节“幻觉”，引发了外界对画面真实性与艺术还原度的质疑。
Stitch 正在重构 UI 设计范式，推出 AI 原生无限画布并引入“氛围设计”概念。用户不再受限于枯燥的线框图，只需通过自然语言描述业
务目标或灵感，AI 代理即可理解设计意图并并行处理多模态输入，让创意探索从底层逻辑转向感官体验。
图源：Google
平台实现了人机交互的自然化，支持用户通过语音指令进行实时设计对话与方案筛选。同时，Stitch 能将静态画面瞬间转化为交互原型，由 AI 自动推演点击逻辑与用户旅程，并支持通过 URL 提取设计系统，极大简化了从规则制定到原型生成的复杂流程。
图源：Google
时尚巨头康泰纳仕正式起诉恶搞杂志《Dogue》，指控其封面设计侵犯《Vogue》商标权。这本由独立创作者创立的实体刊，因让狗狗模仿人类大片而走红。目前，康泰纳仕不仅要求经济赔偿，更强制要求销毁所有库存杂志。
图源：dogue
创始人 Portnaya 坚称《Dogue》是基于对话与重新诠释的艺术创作，旨在为独立创作者争取表达空间。然而，面对销量微薄与高昂法律费用的悬殊对比，这场“大卫与歌利亚”式的博弈陷入僵局，创作者正通过众筹寻求法律援助。
图源：vogue
Johnson Banks 为爱丁堡皇家植物园（RBGE）打造的品牌重塑旨在整合四个园区的品牌感知，确立了“四处花园，一个植物世界”的品牌愿景，将爱丁堡、本莫尔、道伊克和洛根的花园融为一体。
图源：johnsonbanks
还专门设计了边框，可以用来框住作品，并提醒人们它们始终存在，而不是事后才想起来的。
图源：johnsonbanks
这些标志首次展示了一款全新的定制字体，共有四种字重。它是Nomada Incise的定制版，线条棱角分明，优雅别致。最细的字重中包含一系列连字，呼应了西巴尔迪亚符号及其边框的生动呈现。
图源：johnsonbanks
剑桥地区以其创新和发现而闻名，而这一切始于其世界闻名的大学校园内，如今已发展成为环绕该地区的欧洲领先的知识生态系统——融合了 5000 家创新驱动型公司、60 家跨国公司、5 个医院信托机构、36 个研究园区、2 所大学（剑桥大学和安格利亚鲁斯金大学）以及蓬勃发展的初创企业和投资者群体。
图源：johnsonbanks
以图解为主题，并将其运用到代数、方程式、图表和文字游戏中。这既充分利用了该地区的科学声誉，又为方案增色不少，同时还创造了一种独特的视觉和语言。
图源：johnsonbanks
将自己最喜欢的创意与剑桥郡广袤无垠的天空的静态和动态影像相结合，打造出一套可应用于多种媒体的设计工具包。
图源：johnsonbanks
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
#RRGGBB，精准定义 RGB 色彩。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
无法想象没有按钮的页面是什么滋味，那定会像没有方向盘的汽车，让人不知所措吧？也无法想象按钮设计不恰当，会给用户带来怎样的困扰？
面对十万火急的任务需求，如果需要调动全部理性脑，深呼吸三秒，才能找到想要执行操作的按钮入口，我想这样的产品设计是失败的，是会被用户所唾弃的。
兰亭妙微UI设计公司，将详细剖析按钮的神秘面纱，了解它、研究它，让按钮设计成为产品的得力助手，为我们的产品赋能，为我们的工作提效，下面就让我们开启这场神秘之旅吧!
一、按钮的定义
二、按钮设计的种类
三、按钮设计的尺寸
四、按钮的构成
五、按钮设计的作用
六、按钮的位置
七、按钮的颜色
八、按钮在UI界面的设计原则
九、按钮设计的注意事项
十、按钮弱化设计的六种方式
按钮在我们生活中起着很大的作用，它就像我们的小助手一样，帮我们一键开启想要的任务，凡事都能一键触达。
按钮在UI界面中，是一种界面交互控件，通常以矩形、圆形或其他几何形状呈现，具有明确的视觉边界。它通过用户的点击、触摸等操作来触发特定的功能或操作，如提交表单、执行命令、导航页面、切换状态等。
按钮一般包含文字标签、图标或两者的组合，以清晰传达其功能。同时，按钮在不同状态下会呈现出不同的视觉效果，如默认状态、按下状态、悬浮状态、禁用状态等，为用户提供操作反馈和引导。
❶ 次按钮
常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。
❷ 主按钮
突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮。
❸ 文字按钮
弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如下面的站酷活动页就用了很多的文字按钮，只有当按钮被选中时，按钮才会高亮选中。
❹ 图标按钮
图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面，让页面看起来更加的简洁。
❺ 在按钮中添加图标
用于对按钮含义补充解释，提高按钮识别效率。
按钮的样式可以从多个方面进行分类和设计，以下是一些常见的样式分类：
❶ 按颜色划分
❷ 按形状分
❸ 按边框分
❹ 按图标分
❺ 按阴影样式分
❻ 按动画种类分
马蜂窝的功能主按钮，在点击的时候都会产生动画，交互感十足。
加载动画按钮：
当按钮处于加载状态时，按钮会有加载动画效果，如旋转图标、进度条等，常用于告知用户操作正在进行中。
3.1 默认按钮
按钮的初始状态，通常具有正常的颜色、形状和文字显示，等待用户操作。
3.2 待激活状态按钮
待激活状态按钮通常用于指示某个功能或服务尚未激活或启用，用户需要执行某些操作来激活它。这种按钮的设计和实现需要清晰地传达当前的状态，并引导用户进行下一步操作。
3.3 点击状态按钮
当用户点击按钮时，按钮会呈现按下的状态，通常通过改变颜色、形状或添加阴影等方式来表示。
3.4 禁用按钮
在某些情况下，按钮会处于禁用状态，无法进行操作，通常会以灰色或半透明的方式显示，提示用户当前操作不可用。
3.5 加载状态按钮
加载状态按钮通常用于指示某个过程正在进行中，例如数据加载、文件上传或页面正在加载等。这种按钮可以让用户知道他们的操作正在被处理，而不是卡住或出现错误。
3.6 危险提示状态按钮
危险提示状态按钮通常用于提醒用户即将执行的操作可能带来风险或不可逆的结果，例如删除重要文件、注销账户等。这种按钮的设计和实现需要让用户明确意识到操作的危险性，以避免误操作。
下边这两组弹框就是运用了危险按钮，来提示客户未来即将面临的风险，警示作用非常的明显。
在Web端，按钮尺寸没有固定标准。不过，一般来讲，按钮的高度常在32px-48px之间，宽度可根据内容灵活设置，但最好不要小于48px，这样方便用户用手指（触屏设备）或鼠标点击。
像一个简单的“提交”按钮，宽度可能是80px左右，高度是36px左右。这些尺寸能保证按钮在视觉上比较舒适，易于交互。
麻省理工触摸实验室通过对人类指尖的研究，得出了关于界面按钮大小设计的一些重要参考数据。
对于食指，平均宽度在16至20毫米，指腹触摸区域尺寸为10至14毫米，指尖触摸区域尺寸为8至10毫米；对于拇指，平均宽度为25毫米，指腹触摸区域尺寸为12至16毫米，指尖触摸区域尺寸为10至12毫米。
由此建议，食指触摸的按钮应保证在8毫米×8毫米以上，且控件间距应保证至少在1毫米以上；拇指触摸的按钮应保证在10毫米×10毫米以上，且控件间距应保证至少在2毫米以上。
该研究还指出，大多数用户可以舒适可靠地击中 10 毫米×10 毫米的触摸目标 。
从按钮图标尺寸来看，根据苹果官方设计指南，iOS中按钮图标有不同标准。小图标尺寸为24×24pt，用于小型按钮，如导航；标准图标为32×32pt，用于普通按钮，适合次要操作按钮；大图标是 40×40pt，用于宽大按钮；特大图标则为48×48pt，用于特大按钮。
不同设备屏幕尺寸也有对应的建议图标尺寸，如iPhoneSE建议24pt，iPhone14及iPhone14Pro建议32pt，iPad 建议40pt 。
在最小触摸区域方面，iOS规定最小触碰区域为44×44pt，这种尺寸一般适合主要操作按钮。
UI按钮的组成主要包括以下几个关键元素：
圆角的大小决定了按钮的气质和视觉感受。小圆角常用于常规按钮，如4px圆角；圆角越大，越有亲和力，人眼往往不喜欢非常锋利的物体，所以通常不建议使用0圆角的按钮样式，根据我大量的体验，我发现市面上确实也是带圆角的按钮居多些。
图标用于直观表达按钮的功能或状态，如加载中、编辑等。图标的设计应与整体页面风格一致，并确保其含义明确易懂。
内边距能够扩大按钮的可点击范围，帮助用户更容易点击按钮。一个好的设计间距是把按钮的水平内边距设计成垂直内边距的2倍。当然，你也可以根据你设计的实际情况做适当调整，规矩不是死的。
容器是包含所有视觉和交互元素的框架，包括颜色、纹理、文案和图标等。容器的设计应支持按钮的功能和美观。
边框定义了按钮的边界，常用于次级按钮的描边。边框的粗细和样式可以影响按钮的视觉层次和交互效果。
文案是按钮上的文字描述，用于表达按钮的含义和功能。文案应简洁明了，易于理解，同时具有一定的吸引力。
背景用于表达按钮的状态和品牌气质。不同的背景颜色和纹理可以增强按钮的视觉吸引力和品牌识别度。
投影用于凸显层级关系，帮助用户更好地区分不同的按钮。投影通常与纹理、渐变色结合使用，以打造更好的视觉体验。
佐糖首页为了促进转化，特意将“开通会员”的按钮用投影凸显处理，带投影的按钮明显有向前走的感觉，比没有投影的按钮看起来更加显眼。
小小投影在页面中不仅起到增加空间感的作用，还起到了业务强调的作用，已经不仅仅是样式的一个承载了。
这些元素共同作用，不仅提升了按钮的功能性，还增强了其美观性和用户体验。在设计UI按钮时，应综合考虑这些因素，以确保按钮既美观又实用。
Antdesign指出按钮的作用是指导用户采取你希望他们采取的行动，并帮助用户防错。
1.1 提交与确认
在表单填写场景中，如用户注册、登录、信息提交等，按钮用于触发提交或确认操作，将用户输入的信息发送给系统进行处理。
1.2 执行功能
在各类软件中，按钮是执行具体功能的主要方式，如在图像编辑软件中，“裁剪”“旋转”“调整颜色”等按钮，可让用户快速实现相应功能。
2.1 页面切换
在多页面的应用或网站中，按钮可实现页面之间的切换，如网站的首页、产品页、关于我们页等，通过点击按钮，用户能方便地浏览不同页面内容。
2.2 菜单展开与收起
用于控制导航菜单的展开与收起，节省页面空间，提高界面的整洁度和易用性。
3.1 显示与隐藏
可用于控制某些元素的显示与隐藏，如在电商网站中，点击“查看更多商品详情”按钮，可展开隐藏的详细商品信息。
飞书中的这个小小按钮，它承载着隐藏折叠的功能，让页面看起来更加的简洁有序。
3.2 启用与禁用
在某些功能需要满足一定条件才能使用时，按钮可用于表示该功能的启用或禁用状态，如在未填写完必填项时，“提交”按钮处于禁用状态，无法点击。
中国移动云盘的登录页就是这么设计的，当前面信息没有填完，后面的登录按钮始终是禁用的状态，只有当信息填完，且填写正确，按钮才会亮起。
4.1 操作反馈
当用户点击按钮后，按钮会通过颜色、形状、动画等方式的改变，向用户提供操作反馈，告知用户系统已接收到操作指令。
4.2 引导提示
在一些复杂操作或新功能引导时，按钮可作为引导提示的一部分，告知用户下一步操作，如在新手引导流程中，突出显示“下一步”按钮。
心岛日志的新手指引中就是这样设计的，按钮在其中起了很重要的指引作用。
5.1 数据筛选
在数据展示界面，如表格、列表等，按钮可用于对数据进行筛选，方便用户快速找到所需信息。
钉钉打卡这个界面中，多亏有了日、周、月的筛选按钮，才让数据筛选变得如此便捷。
5.2 数据排序
通过点击“按时间排序”“按销量排序”等按钮，用户可对数据进行重新排序，以满足不同的查看需求。
很多产品的按钮颜色都是与它的品牌色高度一致的，它既是按钮，又是品牌色的传递大使。
网易云音乐的按钮色用的网易红，钉钉打卡的按钮用的腾讯蓝，都是在传递自己的品牌色，同时也是在进行指令的传达。
在日常设计中，页面无疑少不了按钮位置的摆放，那么按钮放置在什么样的位置合适，这也是一个值得深思的问题，也许我们已经司空见惯了按钮的位置摆放，但是我们知道它为什么要放这里或者那里吗？下面我们来看下这几种设计模型，让它告诉我们，为什么，在特定场景下，按钮位置要这么放？
1.1 原理含义
Z型视觉模型是一种描述用户在浏览网页或界面时视觉轨迹的理论模型。
它的布局遵循字母Z的形状，指用户的浏览路线——从左到右，从上到下的的视觉运动轨迹。
首先，人们从左上角到右上角进行扫描，形成一条水平线；第二步，向页面的左下侧，创建一条对角线；最后，再次向右转，形成第二条水平线，当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形。
1.2 视觉区域
1.3 应用案例
在电商网站中，商家会把热门推荐或主打产品放在区域1和区域3，以吸引用户的注意力。
在产品详情页面，将“加入购物车”“立即购买”等按钮放在区域4，方便用户在浏览完产品信息后进行购买操作。
天猫商城就是这样做的，把网站的LOGO图放置在左上角（区域1），把产品图放置在左下角（区域3），最后在用户浏览了全部页面之后，在右下角（区域4）放置购买按钮，引导用户下单。
在这个带有销售场景的页面设计中，购买按钮放置在右下角符合用户浏览习惯，也符合Z型视觉模型。
在B端应用软件中，可能运用的功能比较多，按钮也比较多，通过大量分析和观察发现，它们大部分喜欢把按钮放置在每次视觉运动线的起点或者终点的位置。
腾讯云是这样处理的，中国移动网盘是这么处理的，看似巧合，其实也有它合情合理的一面，因为每一个动作的开始和结束都会更加的引人注意。
这就跟人们每次入职一个新公司一样，刚进去时会特别卖力、小心，后面时间长了，也就形成免疫，习惯了，但是当最后要离开这家公司的时候，最后心情又会特别复杂，回想起自己在这里成长的岁月，就会心生很多的感慨，也会特别的记忆深刻。
也许这也是为啥很多页面设计，喜欢把重要的按钮放置在每次视觉运动线的起点或者终点吧！
按钮的颜色在界面中不仅起到视觉点缀的作用，同时也是按钮状态的一种呈现和反馈。
按钮颜色不是千篇一律的品牌色，它也经常需要根据业务场景的不同，更换颜色，比方说红色-删除按钮、黄色-告警按钮、绿色-通过按钮、蓝色-更多按钮，不同的按钮在颜色设计上都会有所区别。
此外，在设计按钮颜色时，有一些基本规范。
首先，从功能角度看，主要按钮通常会使用比较突出的颜色，像鲜艳的蓝色，这是因为蓝色醒目又不会过于刺眼，能引导用户去点击。次要按钮（如取消、返回）的颜色会稍淡一些，比如浅灰色，让用户知道这是相对次要的操作。
从颜色搭配来说，按钮颜色要和背景色有足够的对比度，方便用户识别。比如背景是白色，深色按钮就会很清晰；如果背景颜色较深，那按钮可以用浅色或者高亮度颜色。
另外，颜色的选择也要考虑产品的风格和使用场景。例如，在一个游戏软件里可能会使用更活泼的色彩，像红色、橙色；而在办公软件里，通常会采用比较沉稳的色调，如蓝色、黑色。
1.1 视觉清晰
按钮应采用用户熟悉的设计样式，如带有矩形或圆角矩形边框的填充按钮、带有阴影的填充按钮、幽灵按钮等。
1.2 文字明确
按钮上的标签应准确、简明直接地介绍其功能，避免使用过于通用或模糊的表述，让用户清楚点击后会发生什么。
2.1 位置合理
将按钮放在用户期望看到的地方，如遵循F型或古腾堡原则，在页面的视觉焦点区域放置重要按钮。
2.2 尺寸适宜
按钮大小应反映其在屏幕上的优先级，更大的按钮用于更重要的操作，同时要适配用户的手指，避免误触。
3.1顺序得当、逻辑一致
按钮的顺序应反映用户与界面之间交互的逻辑，如“上一步”按钮通常在左边，“下一步”按钮在右边。
3.2 状态样式一致
按钮应具有一致的状态样式，如默认、按下、聚焦、禁用等，一个产品中，这些状态样式要高度的一致，不能在这个页面按钮样式是这样的，跑到另一个页面，样式又发生了改变。
著名的格式塔心理学也是这么认为的，它强调人对事物的理解是基于整体的、有组织结构的，如果按钮设计做到一致性，对提高产品的整体性是有非常大的改进的。
4.1 避免过多
避免在一个界面中使用过多的按钮，以免让用户感到无所适从，应优先考虑最重要的操作。
4.2 功能单一
每个按钮应尽量只执行一个主要功能，避免一个按钮承载过多复杂的操作，降低用户的认知成本。
希克定律指出，人的决策时间会随着选择的增加而增加。在按钮设计中，简洁的设计能减少用户的选择和认知负担，使用户能更快地做出决策并执行操作。
5.1 风格统一
按钮的设计风格应与整个UI界面的风格保持一致，包括颜色、形状、字体等方面，形成统一的视觉体系。
5.2 对比协调
在保持整体协调的基础上，通过对比突出重要按钮，如使用高对比度的颜色、较大的尺寸等，吸引用户的注意力。
情感化设计理论强调设计应该注重用户的情感体验。美观的按钮设计能够传递积极的情感信息，增强用户和产品的情感连接。
奥斯卡·王尔德说过：“习惯一旦养成，便很难改变。”
所以我们在设计按钮的时候，一定要符合人性的习惯，而不是试图改变人们的习惯。
带有分组的按钮摆放，让人看起来总是更加的有序，也更利于用户进行操作，面对同类型的功能操作点无需跳跃着去寻找，能很快在相似功能操作区域找到。
360的分组意识很强烈，三个不同区域的图标按钮样式都做了明显的区分，让界面看起来更加有序，操作起来也更加的便捷。
切不可一行按钮中出现多个高强调的按钮，Antdesign对这个也做了诠释，会对用户的行为进行错误的引导，也不利于聚焦。
通义这个页面虽然有多个选中的按钮，但是没有全部用高强调的按钮，只有强推荐的操作“开始录音”才用了强按钮。
其它通过相对浅的颜色做了弱按钮选中处理，视觉上主次分明，信息主次表达上也清晰可见。
当一个按钮同时兼顾两个交互动作的时候，一定要区分设计，不能赤裸裸的展示在一个按钮中，而不做任何区分。
具有返回意义的按钮，应该放在左侧，暗示其方向是回到之前，例如上一步。
简短的文字更易被用户阅读和记住，在一个按钮上最多不超过5个文字，重要的按钮一般使用2~4个字。
❶ 用纯灰色文字的弱化按钮
❷ 用灰色边框＋灰色文字的弱化按钮
❸ 用颜色边框+颜色文字的弱化按钮
❹ 用灰底+灰色文字的弱化按钮
❺ 用浅色底+颜色文字的弱化按钮
❻ 用纯颜色的弱化按钮
通过本篇文章的探讨，我们深入了解了B端按钮设计的九大核心要素。
从按钮的基本定义到Antdesign的分类，再到尺寸、构成、作用、位置和颜色等细节，每一部分都是提升用户体验的关键。
按钮设计不仅关乎美观，更影响着用户的操作效率和满意度。在UI界面中，遵循设计原则和注意事项，确保按钮既实用又具有吸引力，是每位设计师的职责。
希望本文能为设计师们提供有价值的参考，激发更多创新灵感，共同推动B端产品的交互设计向更高水平发展。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
很多设计师做描边风图标 / 插画时，经常遇到结构弱、没层次、颜色闷的问题。今天就用实战改稿思路，把描边风最常用、最好用的技巧讲清楚，新手也能直接套用。
蓝蓝设计的小编 http://www.lanlanwork.com