- 设计理论 -

浅析界面中的选中与未选中状态

作者:海舟Ocean 原文出处:海盐社
2018-07-20

屏幕快照 2018-07-20 下午12.04.49.png

在界面设计中,我们经常可以见到Tab切换选项卡/导航栏/标签选项卡/点赞收藏按钮等模块。这类模块中的内容往往通过「选中」与「未选中」两种状态来提示我们当前处于的位置或者反馈我们的选择操作。所以,清晰明确的区分两种状态就显得尤为重要。

一般,我们会把选中的统一成一种样式(如下图中的蓝色填充),未选中的统一成另一种样式(如下图中的灰色填充)。并且选中状态使用更为醒目的样式,而未选中状态则使用视觉重量较弱的样式。

640.png

当然两者之间的样式差异需要非常明显才能轻易的区分出他们(如下图中,虽然样式做了统一区分,但仍难以识别两种状态,就是因为差异不够明显)。

640-1.png

如果没有对两种状态的样式进行统一区分,那结果也是显而易见的——根本分不清楚哪个是「选中」,哪个又是「未选中」……

640-2.png

样式差异

那么,通过哪些样式差异可以区分两种状态呢?常见的有颜色、大小、图形、文案以及指示器(小短线)。

640.jpeg

这些样式差异并非只能单独使用其中一种,因为单一使用可能导致差异不明显,所以大多数情况下我们会组合使用(如下图使用了图形、颜色以及文案的差异)。

640-3.png

那么我们应该如何选择并应用呢?这里可以根据元素来进行选择,不同的元素往往会选择不同的样式差异。

根据元素选择

常见的元素有文字、图标以及标签。

文字

显而易见,除了图形的变化,其他差异文字都是适用的。

640-1.jpeg

这其中,除了颜色差异以外,其他差异并不明显,所以建议组合使用。

640-4.png



图标

图标的话,不仅文案的变化不适用,大小和指示器的变化也不适用。一般仅改变其的颜色和图形。


640-5.png



大小差异不适用是因为图标大多数是不规则的,如果只改变一点点的大小是很难区分出差异来的,而如果大小尺寸变化比较大,则会对布局造成影响,所以一般情况下不建议使用大小差异来区分不同状态。此外,哪怕是组合使用也没有必要,因为颜色和图形已经足够区分不同的状态了。


640-6.png


当然也有例外,比如儿童类产品和游戏类产品,图标并非是简单的剪影图形,这时通过颜色和图形就很难体现出不同状态的差异了,大小差异不失为一个合适的选择。


640-7.png

图标:iconfont by 王老中医


指示器不适用是因为本身它就是一个图形,再与图标放在一起会造成干扰,影响用户对图标的理解。


640-8.png


在颜色和图形差异的运用中,一般面状图标仅改变颜色;线性图标则不仅要改变颜色,还需改变其图形为面状。因为我们通常使用高亮表示选中的原因是更醒目,而面状的大色块相对于线性的小细线就更醒目。


640-2.jpeg


标签

标签可以看成是带有文字的图形,所以指示器及大小差异同样不适用。


640-3.jpeg


同样,除了颜色差异以外,其他差异并不明显,所以建议组合使用。


640-9.png


总结


明确区分「选中」和「未选中」状态对用户来说至关重要,可以帮助他们清晰地了解自己所处的位置或者操作反馈。一般会将两种状态分别统一为一种样式,其中醒目的作为选中状态,而视觉重量较弱的作为未选中状态。


两种状态的样式差异包括颜色、大小、图形、文案以及指示器(小短线)。我们需要根据不同的元素类型来选择不同的样式差异:

1、文字:除了图形的变化,其他差异文字都是适用的。这其中除了颜色差异以外,其他差异并不明显,所以建议组合使用;

2、图标:一般仅改变其的颜色和图形,文案、大小和指示器的变化不适用;

3、标签:可以看成是带有文字的图形,所以指示器及大小差异同样不适用。除了颜色差异以外,其他差异并不明显,所以建议组合使用。



16.jpeg

海盐社.jpeg

喜欢就分享
精选评论