细说控件| Button按钮的不同样式与状态

了解到iOS的人机交互指南的基本设计原则,后面我们会以控件为单位去单独介绍这些设计原则在产品设计用的具体运用,以及当iOS的某些设计原则与国内软件的设计原则相冲突时的处理方法。

本篇来讲一讲我们最常用的操作控件【按钮】的使用规则,主要从下面几个点来分析:

1、定义及规则

2、每种样式的状态及使用规则

3、iOS人机交互指南和国内软件设计规则对禁用状态的不同处理方式

按钮的定义

由文字/图标组成。按钮文字必须清楚预示点击后的内容,且符合使用者的预期。

点击后会触发一个操作。

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

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

每种按钮最多包含三种状态:Normal(正常态)、Tap(点击态)、以及Disabled(不可点击);

bm400gjtau1.jpg插图

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

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

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

登录界面:因为底部有键盘弹起,所以主按钮置于内容区域下方;

支付界面或其他子页面:主按钮始终悬浮于页面底部与其他页面的的主按钮操作位置保持统一;

PS: 主按钮的禁用状态比较复杂,在第4点中单独说明~~

nd20qwuvovj.jpg插图(1)

也会在弹窗界面使用;

可根据界面内容及整体风格调整按钮大小;

jozolw2g34x.jpg插图(2)

次按钮:一个页面中可以有多个次按钮;常配合主按钮或多个按钮以按钮组的形式出现;作为主按钮操作的补充选项,重要度弱于主按钮,视觉呈现需弱于主按钮;

带颜色的次按钮会比灰色次按钮强一级,更具引导性。不可用时不显示。

ty3ql1csop0.jpg插图(3)

危险按钮:通常用于一个存在潜在危险的操作,在用户触发操作前通过视觉呈现给与用户警告。

比如:退出

或在一组次按钮中通过颜色区分,避免误操作。

比如:删除

0yhka55npo5.jpg插图(4)

链接按钮:即文字按钮,没有边框和背景颜色的按钮,一般用户较弱的信息呈现。

PS: 链接按钮的禁用状态也会在第4点中一起说明~~

cjmpqtcdt5x.jpg插图(5)

图标按钮:分带文字和不带文字两种。

带文字的图标按钮可增加辨识度;

不带文字的图标按钮可以节省空间。

1、一般常规按钮都不带文字,例如:设置、搜索

2、同一个场景出现的图标按钮样式建议保持一致,要么都带文字,要么都不带文字。

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

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

x2fwsl03xrw.jpg插图(6)

会员码非常规图标,所以带文字说明增加辨识度,对应左侧的扫一扫图标也同步带文字;

搜索和好友列表两个图标辨识度较高,不需要文字说明可不带文字。

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

虚线按钮:目前我们还是可以看到有些软件在用这种按钮样式, 一般用于添加身份证或者银行卡,已占位符的形式存在,添加完就往下移,代表这里是能填充、添加内容的。

gjhdlzubtez.jpg插图(7)

但是我们看到iOS官网已经不用这种软件了,包括Ant Design Mobile的设计规范里也是没有的,

看图:

jccetth2eoh.jpg插图(8)

所以:移动端慎用虚拟按钮吧。

iOS人机交互指南和国内软件设计规则对禁用状态的不同处理方式

iOS的HIG指南里建议可交互颜色与非交互颜色要区分开,即只要能点的文字,都是带颜色的。

原句:

Avoid using the same color for interactive

andnoninteractive elements.

If interactive and noninteractive elements

have the same color, it’s hard for people to

know where to tap.

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

如果交互式和非交互式元素具有相同的颜色,则人们很难知道在哪里点击。

即:只要能点的文字,都是带颜色的。

iOS官方图:无论是文字按钮还是图标按钮,都是用灰色表示禁用状态;

官方的交互流程中较少用到主按钮,一般用于开启某个功能或介绍页的“开始”操作。

0h2t2z4pje4.jpg插图(9)

微信设计指南里,用降低透明度表示禁用状态

分析:带颜色的按钮看起来更像是同类型的操作按钮,且暗示用户该按钮满足条件即可被点击,灰色被用于次于主按钮的次要按钮颜色,即灰色作为一种颜色存在,可点击

hk1gqojll2f.png插图(10)

国内软件截图:tg4y4ebaefq.jpg插图(11)

结论:

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

1、用颜色区分按钮状态,有颜色表示可点击,灰色表示禁用。

包含:主按钮、次按钮、文字链接按钮、图标按钮。

—iOS人机交互指南颜色规则

2、用降低透明度区分按钮状态,灰色作为一种颜色存在,可点击。

包含:主按钮,其他类型按钮禁用则不显示,如果为常驻则通过降低透明度来体现。

—国内软件颜色使用规则

建议:在设置按钮状态时,以某一种规则为标准,保持主按钮、次按钮、文字链接按钮、图标按钮的一致性。

原文地址:Alkaid UX(公众号)

作者:北冥Alkaid

人已赞赏
UI设计

Material Design Shape and motion 形状与动效

2020-10-13 2:05:14

UI设计

Material Design Shape and hierarchy 形状与层级

2020-10-13 4:04:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索