文字、图片(影片)以及图示可以说是用户界面中最重要的三种基本元素,使用图案代表文字有很多的优点:例如跨越语言限制、降低制造成本、降低学习成本等等。

相关推荐:
《经验分享:像素图标绘制技巧》
《图解力:跟顶级设计师学作信息图》
《扁平化设计反思:“中空图标”很难被理解吗?》

最常见的一个例子就是男女生厕所的区别标志,从最常见的人形符号、性别符号以外,我们也常在许多场合看到各种创意的性别区别符号,像是电影「赌侠」中在赌神号中的厕所门口即是用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 画面中勿扰模式的符号其实是颠倒的吗?

锦上添花:让图示穿上颜色说说话

原文地址:dclick
作者:Decill Chang
 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量61万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

锦上添花:让图示穿上颜色说说话
 

收藏 1
点赞

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。