详细控件|按钮按钮的样式和状态不同

理解iOS的人机交互指南的基本设计原理，我们将分别以控制为单位介绍这些设计原理在产品设计中的具体应用，以及iOS和家用软件设计的一些设计原理. 如何处理矛盾的原则.

本文主要从以下几点讨论我们最常用的操作控件[button]的使用规则:

1. 定义和规则

2. 每种样式的状态和使用规则

3. iOS人机交互指南和国内软件设计规则对残疾人身份的不同处理方式

由文本/图标组成. 按钮的文字必须清楚地表明点击的内容，并满足用户的期望.

单击以触发操作.

按钮上的文本通常使用动词，并注意保持文本简洁，以免在较小的屏幕上被截断；

共有五种常见类型: 主按钮，辅助按钮，危险按钮，链接按钮和图标按钮.

每个按钮最多包含三种状态: 正常（正常状态），点击（单击状态）和禁用（不可单击）；

每种样式的状态和使用规则

主按钮: 用于页面上非常重要的功能；通常情况下，主按钮在同一操作区域最多出现一次；

根据界面内容合理放置按钮:

登录界面: 由于键盘在底部弹出，因此主按钮位于内容区域的下方；

付款界面或其他子页面: 主按钮始终悬挂在页面底部，其他页面的主按钮的操作位置保持一致；

PS: 主按钮的禁用状态更为复杂，这将在第4点~~

中单独说明.

它还将在弹出界面中使用；

可以根据界面的内容和整体风格来调整按钮的大小；

辅助按钮: 一个页面中可以有多个辅助按钮. 通常与主按钮或按钮组形式的多个按钮结合使用；作为主按钮操作的补充选项，其重要性要弱于主按钮，并且视觉效果需要弱于主按钮；

彩色辅助按钮比灰色辅助按钮强一级，更具启发性. 不可用时不显示.

危险按钮: 通常用于潜在危险的操作，在用户触发操作之前以可视方式向用户显示.

例如: 注销

或在一组辅助按钮中按颜色区分，以避免误操作.

例如: 删除

链接按钮: 即文本按钮，无边框和背景色的按钮，普通用户会显示较弱的信息.

PS: 链接按钮的禁用状态也将在第4点~~

中一起说明

图标按钮: 文本有两种，而没有文本.

带有文字的图标按钮可以提高识别度；

没有文本的图标按钮可以节省空间.

1. 普通的常规按钮不携带文字，例如: 设置，搜索

2. 建议在同一场景中显示的图标按钮样式应一致，无论是文本还是不文本.

3. 使用颜色传达选择和取消选择的状态. 避免在两种不同的图标设计之间切换；

例如: 纯色版本和轮廓版本.

会员代码是一个非常规的图标，因此，通过文本描述来提高识别度，左侧相应的扫描图标还带有文本；

搜索和好友列表的两个图标非常容易识别，没有文字描述，也没有文字.

还有另一种不常用的按钮样式: 虚拟按钮

虚线按钮: 目前，我们仍然可以看到某些软件正在使用此按钮样式，通常用于添加ID卡或银行卡. 占位符表单存在，添加后将向下移动，这意味着它可以填充和添加内容.

但是我们看到iOS官方网站不再使用这种软件，包括Ant Design Mobile的设计规范，该软件也没有，

看图片:

因此: 在移动端请谨慎使用虚拟按钮.

iOS人机交互指南和家用软件设计规则，以不同方式处理残疾人状态

iOS的HIG指南建议应区分交互式颜色和非交互式颜色，即button控件 样式，只要可以单击的文本是彩色的即可.

原文:

避免对交互式和非交互式元素使用相同的颜色.

如果是互动和非互动元素

具有相同的颜色，人们很难

知道点击的位置.

避免对交互式和非交互式元素使用相同的颜色.

如果交互式和非交互式元素具有相同的颜色，则人们很难知道单击何处.

也就是说，只要可以单击的文本是彩色的.

iOS官方地图: 文本按钮和图标按钮均为灰色，表示已禁用状态； <​​/ p>

主按钮在正式的交互过程中很少使用，通常用于启动功能或介绍页面的“开始”操作.

在微信设计指南中，使用降低的透明度来指示禁用状态

分析: 彩色按钮看起来更像是相同类型的操作按钮，并且表示如果按钮符合条件，则可以单击用户. 灰色是次要按钮的第二个辅助按钮的颜色，也就是说，如果存在颜色，则使用灰色，单击

家用软件的屏幕截图:

有两种处理禁用状态的方法:

1. 使用颜色区分按钮状态. 颜色表示可点击，灰色表示禁用.

包含: 主按钮，辅助按钮，文本链接按钮button控件 样式，图标按钮.

-iOS人机交互指南的颜色规则

2. 使用降低的透明度来区分按钮状态. 灰色作为一种颜色存在，可以单击.

包含: 主按钮，如果禁用了其他类型的按钮，则不会显示，如果是永久按钮，则会通过降低透明度来反映出来.

-国内软件颜色使用规则

建议: 设置按钮状态时，请以特定规则为标准，以保持主按钮，辅助按钮，文本链接按钮和图标按钮的一致性.

原始地址: Alkaid UX（公开号码）

作者: 北明生物碱

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/ruanjian/article-237223-1.html