| 组件 | 选择逻辑 | 核心特点 | 生效方式 | 最佳使用场景 |
|---|---|---|---|---|
| 开关 | 二元独立切换 | 单功能、无关联 | 操作立即生效 | 单独功能开启 / 关闭 |
| 复选框 | 可多选、可全不选 | 同组关联、支持全选半选 | 多为统一确认生效 | 关联选项批量勾选 |
| 单选按钮 | 互斥单选、必选其一 | 组内唯一、排他选择 | 选定即锁定选项 | 多选项只能选一个 |
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
参考价值：金融科技类产品的深色模式设计、数据呈现方式与交互逻辑，都有很高的借鉴意义。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微UI设计公司，本次分享主要的工具也都是 AI 相关，有工业和产品 3D 设计 AI 平台 3flow，语音转社交媒体图片的 AI APP，面向 AI 创作者和开发者的在线社区 B150，专业的 AI 图像生成与编辑平台 APImage，Win95 风格 AI 创作者交流社区，以及荣获黑客松大奖的 AI 编程配置的超强 Skill。
3Flow AI 是一个面向产品设计的 AI 工具，可以在浏览器里直接使用。它的核心能力是把「想法」快速变成设计图，甚至直接生成 3D 模型，帮助设计师从灵感到初步原型的过程大幅提速。相比传统设计软件，它更偏向创意阶段，让你几秒钟就能看到一个产品雏形。
在功能方面，3Flow AI 是非常突出的，生成速度非常快（几秒内出图）、支持从 2D 图像一键转成 3D 模型、可以对局部设计做修改（比如换材质、颜色），以及自动生成多种设计变体用于对比。整体上，它把「画图 + 建模 + 修改」的流程整合在一个工具里，减少反复切换软件的成本。
3Flow AI 彻底降低了 3D 和工业设计的门槛，你不需要会复杂的 CAD 或 3D 建模，也能快速把想法变成可视化甚至可打印的模型。对于做产品、内容创作或创业的用户来说，它可以显著缩短从创意到验证的时间，让「想一个东西并做出来」变得更容易、更便宜。
Reframe 能将你的语音笔记转换成专业的 Instagram / LinkedIn / Facebook / X 上展示的轮播图，当然这可以发到微博/小红书/小绿书/朋友圈。你只需说出你的想法——AI 会自动构建框架、设计每个幻灯片，并保留你真实的语气。无需任何设计技能。
简单来说，Reframe 是一款专为创作者设计的 AI 社交媒体排版应用，它的核心理念是将用户的「语音」直接转化为具有专业设计感的轮播图和文字贴文，帮助创作者在没有专业团队和设计师的情况下快速制作内容。
Reframe 核心优势是「语音转图文」与「对话式编辑」。你只需录制几十秒的语音表达想法，内置 AI 就会自动编写出高吸引力的文案，并生成带排版的轮播图草稿。你可以通过与 AI 聊天来微调文字内容，还能自由套用精美的预设模板、修改字体和颜色，最后支持一键导出为图片或 PDF。
Reframe 极大降低了内容创作的门槛与时间成本，无论是在通勤路上还是灵光一现时，只需动动嘴就能把零碎的灵感瞬间变成高质量的社交传播素材。它完美解救了不擅长写文案和做排版的新手，让每个人都能轻松像专业博主一样高效产出爆款图文，提升个人影响力。
B150 是一款专为 AI 开发者、创作者和创业者打造的「专业社交网络」与社区平台。它致力于成为那些利用 AI 技术进行编程、设计、影视制作、游戏开发等领域的「实干家」们的聚集地，帮助他们将大胆的想法转化为真实落地的项目。
B150 提供了以项目为驱动的在线社交体验，AI 创作者不仅可以在信息流中展示自己的作品、获取早期种子用户和真实的反馈，还能在这里寻找志同道合的合作者。此外，它集成了 AI 工具及资源探索、AI 人才与工作机会招聘看板，以及专属的工具折扣市场，全方位覆盖从产品构思到发布落地的各种需求。
对于普通的 AI 爱好者和创作者而言，B150 提供了一个高浓度的专业学习和互助圈层。它打破了传统社交媒体的杂音，让你能专注于看别人是如何利用最新的 AI 工具来解决实际问题的。不仅能帮你少走弯路，还能让你在发布自己的「副业」或项目时，快速找到第一批支持者，真正将「想法」变成「事业」。
APImage 是一款专业的 AI 图像生成与编辑平台，专为电商团队、企业和创作者打造。它能够将简单的文字提示迅速转化为高质量、可直接用于商业生产的视觉素材，如产品展示图、生活方式插图或品牌创意海报，只需几秒钟即可完成。
APImage 的核心优势在于强大的「视觉一致性控制」及全面的编辑工具，不仅具备文本生图、一键抠图和局部重绘功能，最亮眼的是允许用户建立专属资产库。这意味着您可以在不同场景中反复生成拥有完全相同人物面孔、产品细节或特定背景的图片。此外，它还支持 API 接入和各类自动化工作流整合。
对普通用户、电商小卖家和自媒体人而言，APImage 彻底打破了专业摄影和设计的门槛。无需租借影棚或聘请专业模特，仅靠打字就能稳定地产出成套的、风格统一的高端商业大片，并且它就是为这样的场景而创造的。APImage 解决了传统 AI 绘图「每次结果都随机、难以连贯」的痛点，让个人也能轻松拥有专业级的视觉生产力。
链接：https://www.ideaboard95.com/
IdeaBoard95 是一款主打复古风格的公开创意灵感看板网站。它的界面被精心设计成了经典的 Windows 95 操作系统风格，为独立开发者、创作者和普通用户提供了一个展示产品想法、寻找灵感以及进行社区交流的公共空间。
IdeaBoard95 将复古视觉与极简交互结合，用户可以使用 Google 账号快捷登录，在看板上发布有关 App、网站或 AI 的产品点子，也可以为别人的好主意点赞投票。尽管外表怀旧，但它底层具备优秀的现代用户体验，在电脑和手机端都能清晰浏览，并支持通过标签快速筛选感兴趣的内容。
IdeaBoard95 提供了一个轻量化、充满趣味的「想法展示区」，它避免了零散的灵感在复杂的笔记工具中吃灰，并用这种没有压力的怀旧方式降低了分享的门槛。这让每个人都能轻松地把脑海中的奇思妙想贴在「公屏」上，纯粹地碰撞思维火花并验证点子的可行性。
链接：https://github.com/affaan-m/everything-claude-code
Everything Claude Code 是由 Anthropic 黑客松获胜者开源的一款极具人气的 AI 编程配置库。它并非独立软件，而是专为 Claude Code、Cursor 等 AI 智能体打造的「性能增强与工具扩展包」。
这个 Skill 提供了一套开箱即用的精密架构，内置了大量专家级的 Agents、按需加载的 Skills 以及自动化规则。它全面支持多语言环境，并具备记忆持久化、持续学习和安全审查等高级功能。这些配置能有效优化大模型的 Token 消耗，让 AI 像资深工程师一样精准拆解并自主执行复杂任务。
哪怕你是纯粹的新手小白，你也可以轻松使用它，因为它彻底免去了耗时费力的「AI 调教」过程。只需简单引入这套经过实战检验的配置，就能让原本基础的 AI 助手瞬间掌握数百种专业开发技能。它极大地降低了高效开发的门槛，让没有深厚技术积累的人，也能以几倍的速度搭建出高质量的应用程序。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微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。
#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。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com