按钮
按钮是用户界面中的一个交互式元素，点击后会执行一个操作，例如：提交表单、保存更改或进入下一步。如果您需要导航到另一个页面或网站，请使用链接。
外观
按钮有五种类型：强调色、主色、语义色、浮雕色和对比色。
强调色 (Accent)
强调色按钮用于突出关键操作，吸引用户对重要操作的注意。它们有三种主要样式：操作、描边操作和扁平操作。
根据您希望在界面中强调操作的程度，选择这些强调色按钮类型。对于最高优先级，请使用“操作”；对于中等优先级，请使用“描边操作”；对于较低优先级或次要操作，请使用“扁平操作”。
请谨慎在界面中使用强调色按钮，如果可能，每页限制使用一个（对话框除外）。这样，您可以强调重要性并突出用户的主要操作，同时避免因过多强调色元素而使界面显得杂乱。
主色 (Primary)
主色按钮用于执行界面中的主要和常用操作。这些按钮有几种样式：常规、描边、扁平化和扁平化次要。根据您希望在界面中强调特定操作的程度，选择这些样式。例如，“常规”按钮适用于标准操作，“描边”按钮适用于中等优先级的操作，而“扁平化”和“扁平化次要”按钮则用于不太重要或次要的操作。
语义色 (Semantic)
语义色按钮传达特定的上下文或操作，对用户具有明确的含义。使用它们可以帮助用户轻松理解执行的操作及其含义。
语义色按钮有四种主要样式：信息、成功、警告、危险。
信息 (Info)
用于与获取额外信息、提示或上下文相关的操作。当您需要突出显示导航到另一个资源的选项时，信息按钮也可以用作超链接。例如：“更多信息”、“文档”、“帮助”。
成功 (Success)
用于突出已成功完成的操作。
警告 (Warning)
用于突出需要用户注意的操作，因为这些操作可能存在潜在风险或警告。这些按钮可以帮助用户理解其操作可能产生的后果，并鼓励谨慎操作。
危险 (Danger)
用于突出可能具有破坏性或负面后果的操作。我们建议谨慎使用此按钮，仅在确实需要突出潜在负面影响（例如：删除、停止、断开连接）时使用。
浮雕色 (Raised)
浮雕色按钮是一种从内容上方突出的按钮类型。用于突出屏幕上的重要操作，通常具有固定位置。这种类型的按钮适用于用户应立即注意的关键操作。
这些按钮也常用于地图界面和基于图像的应用程序中，用于各种操作，例如缩放、平移或对图像数据的其他操作。
对比色按钮 (Contrasting buttons)
对比色按钮是用于在复杂背景上突出操作的特殊类型的按钮。它们能产生明亮清晰的对比度，即使在各种饱和的背景上（如横幅或营销材料）也能提供出色的可见性。
这些按钮有助于突出操作，并确保在各种背景下都能获得良好的可见性，例如在横幅广告中。
结构 (Anatomy)
界面中的按钮结构包含各种设计选项：
- 仅文本 (Text only)：仅包含文本的按钮。当文本清晰明确地传达按钮的目的时，这种按钮非常有用，尤其是在文本简短且信息丰富的情况下。例如，您可以使用此类按钮执行“创建”或“取消”等操作。
- 右侧图标 (Icons on the right)：图标位于文本右侧的按钮。当需要呈现执行同一操作的不同方式时，此选项非常有用。例如，可以使用此类按钮执行“保存”操作，用户可以选择不同的保存格式（另存为：PDF、RTF、HTML）。
- 左侧图标 (Icon on the left)：图标位于文本左侧的按钮。当图标承载重要信息并需要突出显示时，请使用此选项。例如，可以使用此类按钮执行“开始”或“删除”操作。
- 左右两侧图标 (Icons on the right and left)：文本两侧都有图标的按钮。使用此选项可以通过图标来强调关键操作，并提供不同的执行路径。例如，此类按钮可用于“添加”操作，用户可以选择不同的添加对象（添加：项目、资源、文档）。
- 仅图标 (Icon only)：仅由图标组成，不包含任何文本的按钮。当按钮上的信息可以通过视觉理解且无需额外文本说明时，请使用此选项。您也可以将其用于在有限空间内紧凑地组合多个操作，不留文本标签按钮的空间。例如，项目列表中的删除按钮。在这种情况下，您可以将删除选项显示为垃圾桶图标，而不带文本标签。
状态 (States)
界面中的每个按钮都有五种基本状态，这些状态在视觉上指示了按钮的可用性和当前的用户交互状态。
默认 (Default)：按钮的初始状态，此时按钮已准备好进行交互并等待用户操作。
悬停 (Hover)：按钮已准备好进行交互并等待用户操作的状态。
禁用 (Disable)：按钮暂时不可交互的状态。为了获得更好的用户体验，我们建议解释按钮被禁用的原因，特别是当这种禁用不直观时。您可以将此解释作为按钮旁边的文本，或作为悬停工具提示。
加载中 (Loading)：表示系统正在响应用户操作而执行某个操作的状态。
选中 (Selected)：用于可切换元素，用户可以在其中选择多个选项之一。处于“选中”状态的按钮表示当前选中的状态或选项。
尺寸 (Sizes)
每个按钮都可以有四种尺寸，这使得您可以根据上下文选择最合适的选项。
XS：一种附加尺寸，用于尺寸受限的组件中的操作。
S：在标准按钮过大且占用大量空间的情况下使用，例如在表格或小型卡片中。
M：这是我们默认推荐的主尺寸。
L：用于突出主要操作，在创建表单、模态框或弹出窗口中使用。
XL：在需要突出显示操作且您的网站或登陆页面有足够空间时使用。
形状 (Form)
使用“pin”属性，您可以控制按钮的形状，通过以下值设置其样式：
round：圆角按钮，即两侧都有圆角。这种样式使按钮看起来柔和且现代，交互起来友好且令人愉悦。
brick：两侧都有尖角的按钮。
clear：两侧都有尖角且没有描边的按钮。
circle：两侧都是圆形形状的按钮。
您还可以将这些属性组合成不同的变体，根据设计理念和界面需求创建独特的按钮样式。
宽度 (Width)
默认情况下，按钮宽度会自动调整以适应文本，使按钮的宽度可以拉伸以容纳所有文本而不会被截断。但是，如果您需要控制按钮的宽度，可以使用两个主要属性：auto 和 max。
auto：限制按钮尺寸，避免超出容器限制。如果按钮内容无法完全显示在容器中，则会用省略号隐藏，表示存在额外文本。
max：将按钮宽度设置为等于父容器宽度的固定值。如果按钮内容超出此宽度，也会用省略号截断，保持界面紧凑并防止容器溢出。
建议 (Recommendations)
使用 (Usage)
好的，这是 UI/UX 设计指南的中文翻译，力求自然流畅，并保留了所有 MDX 组件标签、代码块和技术术语：
- 清晰简洁地措辞按钮文本，以便用户立即了解点击后会发生什么。
- 使用图标时，请确保它们能清晰地传达其含义，并且用户能够轻松识别。
- 在图标和文本之间保持平衡，确保两者都可见且易于阅读，并且互不压倒。
- 使用仅包含图标的按钮时，在鼠标悬停时添加操作工具提示，以便用户可以看到图标的含义。
撰写文本
- 按钮上的文字应清晰简洁地传达点击后将发生的动作的本质。避免使用长短语或不明确的缩写。
- 使用描述用户操作的动词。例如：保存 (save)、发送 (send)、删除 (delete)。
- 避免在按钮上使用负面词语或短语。负面指令可能会引起混淆。
- 在所有界面按钮上坚持一致的文本风格和格式。这有助于用户轻松导航并理解可用的操作。