论控制按钮的不同风格和禁用状态

在前一篇文章中，我们学习了IOS人机交互指南的基本设计原则. 随后，我们将从控制的角度介绍这些设计原则在产品设计中的具体应用，以及IOS的一些设计原则与国产软件设计原则冲突时的处理方法

在本文中，我们将讨论使用最常用的操作控制[按钮]的规则，主要从以下几点进行分析:

一. 定义和规则

2. 每种风格的状态和使用规则

三. IOS人机交互指南与国产软件中禁用状态的不同处理

一. 按钮定义

由文本/图标组成. 按钮文本必须在点击后清晰地显示内容，满足用户的期望. 单击可触发操作

按钮上的文字一般使用动词，注意保持文字简洁，避免在较小的屏幕上被截断

常见的有五种类型: 主按钮、次按钮、危险按钮、链接按钮和图标按钮

每个按钮最多可包含三种状态: 正常、点击和禁用

2. 每种风格的状态和使用规则

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

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

登录界面: 因为底部会弹出一个键盘，所以主按钮会放在内容区下面

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

PS: 主按钮的禁用状态很复杂，这在第4点中单独描述~~

它也将用于弹出式界面

按钮大小可根据界面内容和整体风格进行调整

二级按钮: 一页中可以有多个二级按钮，通常以按钮组的形式与主按钮或多个按钮一起出现，作为主按钮操作的辅助选项，其重要性弱于主按钮，其视觉表现力需要弱于主按钮

带颜色的二级按钮比灰色的二级按钮强一级，更具导向性. 不可用时不显示

危险按钮: 通常用于有潜在危险的操作. 在用户触发操作之前，它会以可视方式显示以警告用户. 例如: 退出

或者在一组按钮中按颜色区分，避免误操作. 例如: 删除

链接按钮: 即文本按钮、无边框和背景色按钮、一般用户弱信息呈现

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

图标按钮: 有文本和无文本. 带有文本的图标按钮可以提高识别率；没有文本的图标按钮可以节省空间

一. 常规按钮没有文本，例如: 设置、搜索

2. 建议在同一场景中保留相同的图标按钮样式，包括或不包括文本

三. 使用颜色来传达选择和取消选择的状态. 避免在两种不同的图标设计之间切换，例如纯色版本和大纲版本

会员码不是一个常规的图标，因此提供文本描述来增加识别度，左侧相应的扫描图标也与文本同步

搜索和好友列表的图标是高度可识别的，不需要文本描述

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

虚线按钮: 目前，我们可以看到一些软件正在使用这种按钮样式，通常用于添加或银行卡. 它以占位符的形式存在，并在添加后下移，这意味着可以在此处填充和添加内容

但我们可以看到，这种软件已经不再在IOS官方网站上使用，包括在Ant Design Mobile的设计规范中. 如图所示:

所以: 在移动终端中，虚拟按钮的使用要谨慎

三. IOS人机交互指南与国产软件中禁用状态的不同处理

IOS的hig-guide建议，应该区分交互颜色和非交互颜色，也就是说button控件 样式，只要可以单击文本，文本就有颜色

原句:

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

如果交互元素和非交互元素具有相同的颜色，人们就很难知道在哪里可以点击

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

如果交互元素和非交互元素具有相同的颜色，则很难知道单击的位置

也就是说: 只要你能指向文字，都是有颜色的

IOS官方图: 无论文本按钮还是图标按钮，都是灰色，表示禁用状态

在官方的互动过程中，很少使用主按钮，一般用于打开功能或“开始”操作的介绍页面

在微信设计指南中，降低透明度以显示禁用状态

分析: 带有颜色的按钮看起来更像是同一类型的操作按钮，它表示用户可以在更改按钮后单击按钮以满足条件. 灰色用于次按钮颜色低于主按钮，即灰色作为一种颜色存在，可以点击

国产软件截图:

结论:

有两种方法可以处理残疾状态:

一. 使用颜色来区分按钮状态. 如果有颜色，可以点击. 如果有灰色，则禁用. （IOS人机交互指南颜色规则）

（包括: 主按钮、次按钮、文本链接按钮、图标按钮）

2. 要通过降低透明度来区分按钮状态，可以单击灰色作为颜色. （国内软件颜色规则）

（包括: 主按钮. 如果禁用了其他类型的按钮，则不会显示这些按钮. 如果它们是常驻的，则会通过降低透明度反映出来. ）

建议: 在设置按钮状态时button控件 样式，主按钮、次按钮、文本链接按钮和图标按钮的一致性应根据一定的规则进行维护

在接下来的几篇文章中，我将继续通过其他控件的使用规则，全面分析IOS的设计交互原理，关注我，成为一个集美感与才华于一身的设计师~

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