让图示穿上颜色说说话

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

时间: 2024-10-21 21:06:52

让图示穿上颜色说说话的相关文章

Photoshop给模特照片穿上中国风东北花棉袄

  本教程主要使用Photoshop给模特照片穿上中国风东北花棉袄,我做这个的总体思路是这样的:就像我们平时应用一些设计场景那样,先把原有的衣服变成一个"空白"的衣服,然后正片叠底放一个花纹应该就差不多了. 先看看原图 下面开始: 1.先找来的一位服装美女模特人物图片素材1.按照思路你得先抠图,这个不说,先脱下上衣. 2.把这件衣服变成空白,我是指去掉它的颜色信息,变成一件白色的衣服,去色拉拉曲线色阶什么的,这个尝试一下好了,我一贯不喜欢直接给数值的,见谅.变成差不多下图这个样的. 另

传统产品如何穿上互联网的外衣

互联网对传统行业的影响越来越大,而用互联网来打造传统产品的设想得到了空前的反响.小米手机就是典型的成功案例,最近受到广泛关注的大象安全套也是用互联网的思维来打造.为传统产品穿上互联网的外衣,不仅是互联网现在与人们的生活已经密不可分,更在于互联网渠道化.产品特性的人性化和用户感知化三个方面. 传统产品的传播十分局限,却能给用户更加实际的感触和体验,减少用户的盲区购买成本,近年来,互联网的快速发展让很多传统产品向互联网靠拢.大部分产品只是单独的转移渠道,除了少量能够真正"互联网化",小米只

超市粽子提前上市大多穿上真空外衣

离端午节还有一段时间,但重庆晚报记者昨日走访市内超市发现,各超市的粽子已提前上市,价格比去年上浮了10~20%.今年上市的粽子,除现包现卖的外,变化最大的就是大多穿上了"外衣"---散装粽子装进了抽去真空的塑料袋.有粽子生产厂家负责人称,这是食品安全检查过程中,有关部门要求的结果. 品种仍以传统口味为主 昨日,重庆晚报记者走访渝中.江北.南岸等区大型连锁超市发现,各超市粽子均已摆上货柜.从品种上看,今年的外地产粽子仍以传统的口味为主,主要包括甜味.咸味和白味等.只有少数本地厂家新开发了

ie浏览器-查找(在当前页)把查找相同的内容标上颜色

问题描述 查找(在当前页)把查找相同的内容标上颜色 如何在IE浏览器,查找(在当前页)把查找相同的内容标上颜色.之前可以的 相同的都会自动变成红色的,现在换台电脑就不知怎么设置了 解决方案 ctrl+f调出浏览器的查找窗口查找就行了吧.高亮是ie自动实现的.不知道你什么版本的ie,ie8没有问题

JavaScript技巧:让网页自动穿上外套

javascript|技巧|网页  进行网页设计时,许多网页都需要相同的边框图案和导航条,FrontPage给我们提供了共享边框方便设计,但是,这样也不太方便,毕竟每个网页都添加了相同的内容,无形中网页增大了,当然,对于动态网页,这不是问题,但是,如果是静态的呢?  怎样可以克服这个缺点,通过框架可以实现这些的,只是,框架又引来了另一个麻烦,就是如果直接打开框架内部网页,脱去了华丽的外套,是不是显得很单调,这里我们找一种好的方法,让脱去外套的网页自动穿上外套,你想到了吗?如果你对这个议题不感兴趣

&#106avascript技巧:让网页自动穿上外套

技巧|网页   进行网页设计时,许多网页都需要相同的边框图案和导航条,FrontPage给我们提供了共享边框方便设计,但是,这样也不太方便,毕竟每个网页都添加了相同的内容,无形中网页增大了,当然,对于动态网页,这不是问题,但是,如果是静态的呢?   怎样可以克服这个缺点,通过框架可以实现这些的,只是,框架又引来了另一个麻烦,就是如果直接打开框架内部网页,脱去了华丽的外套,是不是显得很单调,这里我们找一种好的方法,让脱去外套的网页自动穿上外套,你想到了吗?如果你对这个议题不感兴趣,你可以走开了,下

JavaScript让网页自动穿上外套的方法技巧

javascript|技巧|网页 进行网页设计时,许多网页都需要相同的边框图案和导航条,FrontPage给我们提供了共享边框方便设计,但是,这样也不太方便,毕竟每个网页都添加了相同的内容,无形中网页增大了,当然,对于动态网页,这不是问题,但是,如果是静态的呢? 进行网页设计时,许多网页都需要相同的边框图案和导航条,FrontPage给我们提供了共享边框方便设计,但是,这样也不太方便,毕竟每个网页都添加了相同的内容,无形中网页增大了,当然,对于动态网页,这不是问题,但是,如果是静态的呢? 怎样可

Photoshop给美女穿上花瓣衣服

最终效果图 Photoshop给美女穿上花瓣衣服 PS教程 第1步:将准备好的素材图片在PS中打开,新建画布,如下图所示; 第2步:将人物拉入画布调整好位置,用钢笔工具勾出人物,添加蒙版如下图所; 第3步:背景填充橙色,调节画笔参数,增加些白色,如下图所示; 第4步:将花瓣拉入图层中,使用魔棒工具去掉背景,如下图所示; 第5步:使用自由变换调整好大小和位置,放在合适位置,如下图所示; 第6步:复制花瓣,调整角度放到合适位置,使花瓣完全覆盖衣服,如下图所示; 分类: PS入门教程

html边框怎么加不上颜色?

问题描述 html边框怎么加不上颜色? <html> <head> <title>旅游网欢迎你</title> </head> <body> <table border="1" cellpadding="30" cellspacing="10" bordercolor="blue"> <tr bordercolor="green