文字、图片以及图示可以说是用户界面中最重要的三种基本元素,使用图案代表文字有很多的优点:例如跨越语言限制、降低制造成本、降低学习成本等等。
最常见的一个例子就是男女生厕所的区别标志,从最常见的人形符号、性别符号以外,我们也常在许多场合看到各种创意的性别区别符号,像是电影「赌侠」中在赌神号中的厕所门口即是用PUKE牌的 King 以及 Queen 来做为男女厕的区别符号。

用户界面系统中也有许多常见的符号标示:打勾代表确认、叉叉代表取消或删除、放大镜可能是代表搜寻、放大或者是缩小、垃圾桶当然很直觉的就是删除了。以及来自于音响界面上的播放、停止、跳转等等。从极度形象化的到抽象的皆有,这些都是我们相当熟悉的用户界面符号。

而其中有一个容易被大家忽视的符号:0 与 1,我们可以在很多开关中发现其踪迹,像是以下这个是 iOS 系统中开启「勿扰模式」的状态:

0 与 1 的符号在现今被简单的定义为开与关闭的意思: 0 代表着 off (断电),而 1 则代表 on (接通)的状态,在计算机以及电路中皆是如此,事实上在许多应用场合中并不是写上 0 或 1 的符号,更多时候是使用简单的 一槓符号(│)以及圆圈符号(○)来表示,也带有更强烈的符号性。
在 iOS 系统中常见的开关符号中即可以看到这个符号的踪迹,不过我们在确认的时候发现,当系统语言设定为英文时,开关符号上依然是写着 ON / OFF,而在中文、韩文、法文等系统的情况下中则是以 (│) 以及 (○) 符号来表示:

虽然猜测是因为各种语言文字长度的关系(有些语言的开与关可是非常长的),所以苹果的 UI 设计师如此设计。但其实日文系统中亦是书写日文的情况看来,在这个空间里面要写上中文的「开」以及「关」应该是没什么难度吧。
而值得一提的是,代表着电源开关按钮的这个即是 (│) 以及 (○) 的合并,来代表这个按钮的功能:开与关。

先望其色,才读其形比起形状,其实人们对于色彩的辨识能力更为优先且强烈,以下我们看看几个常见的例子:例如作业系统中随处可见的代表应用程式入口的图示。你有思考过你是怎么去寻找这些图示的吗?以下这个是 Photoshop 以及 Illustrator 软件,软件公司在 CS3 以后便以简单的色彩来区别每一套软件,相信大家在找寻它们的时候都是先想:「Photoshop?就是那个蓝色方形的图示」

这或许还能解释一部分关于为什么通讯软件大多喜欢用绿色作为形象以及图示设计的标准色彩,你是不是也是先找绿色,然后才确认 APP 的图示内容是个气泡框里面写着LINE呢?

其实这是因为我们在快速滑动手机画面、寻找应用程式时,眼睛并不会一直停下来扫描画面上的每个细节,而在快速的浏览动作中最容易感受到的视觉资讯就是色彩了,我们可以透过模糊后的画面来模拟类似的情况:

而 iOS7 中一直被认为过度极简的细字图示设计,也在 beta5 的版本中对于设定图示重新加上了色彩的设计,可以发现调整后的效果在辨别上来说提高了不少:

而正因为人们更习惯透过颜色、发光与否来分辨状态,因此许多电源延长线的开关都制作成会发光的样式,甚至可能根本不需要文字描述也可以正常的使用,底下右图即是 iOS7 中新版的开关按钮型式。

当然厕所性别识别符号也是。其实在许多时候我们看到这组符号都是制作成彩色的版本:红色代表女性、蓝色代表男性的色彩组合,看起来是再直觉不过了。其实当我们看到这组符号时,首先接受的是也色彩的讯息,接下来「也许」才会依据图形的细节而确认实际上代表的性别。(以防走错门)

如果有一天有人把厕所的门做成这样,你直觉会想走进哪一监厕所呢?

就像有人可能会因为蓝色的门而误闯女厕一样,你有发现上面 iPhone 画面中勿扰模式的符号其实是颠倒的吗?

情非得已
21个Sketch实用高频小技巧2019-02-15
25款值得收藏的优秀网站模板免费下载2015-09-16
20套高质量的免费网页模版PSD素材2013-09-02
20款国外时尚大气的按钮开关PSD素材下载2013-07-31
CSS实例教程:十步学会用CSS建站2011-10-05
网页设计师:浅淡网页BANNER设计2010-09-27
网页细节教程:WEB设计精确点滴2010-09-13
网页设计中的点滴细节把握2010-09-01
总结交互组件创新的四种方式2010-06-28
最全的国外电子商务CSS模板下载2010-06-18
5种方式提高网页设计中的对比度
相关文章3182017-03-09
10个提高电商网站商品图片可用性的办法
相关文章3082016-12-15
通过实战案例帮你解锁5种商品摆放姿势
相关文章2832016-08-17
10款搭配Material Design配色的Web工具
相关文章4472016-08-03
详细解析设计网页时选择配色的八个要点
相关文章2122016-07-11
5个快速提高网站可用性的实用方法解析
相关文章2572016-07-07
详细解析设计师色彩理论终极指南分享
相关文章3352016-06-24
如何使用网页渐变色来提升设计逼格
相关文章8662016-05-25
