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

本文来自互联网,114PS教程网仅作学习交流使用。发布时间:2016-04-28
本栏目刊载的经验技巧仅为提供更多信息,部分来源于网络,由本站整理发布,转载本文请注明本文地址。
教程所属栏目:
首页 > ps教程网 > 经验技巧

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

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

转载请注明:114教程网



那些不务正业的品牌Apps
0 点击  / 0 评论
锦上添花:让图示穿上颜色说说话
0 点击  / 0 评论
圆形风格的移动应用手机界面设计实
0 点击  / 0 评论
高手之路:浅谈多终端产品视觉一致性
0 点击  / 0 评论
五条法则,帮你打造典型扁平化产品
0 点击  / 0 评论
APP用户体验之通过设计让APP变快的
0 点击  / 0 评论
设计师最需要的5种营养补充
0 点击  / 0 评论
最美APP的9条闪光定律
0 点击  / 0 评论
不要让“合理性”成为阻碍设计前行
0 点击  / 0 评论
如何开发出完美的App
0 点击  / 0 评论
圆形风格的移动应用设计实例赏析
0 点击  / 0 评论
扁平和简约来袭
0 点击  / 0 评论
iOS 7和Android 4.4奇巧巧克力:巨人
0 点击  / 0 评论
7个Google Search app的动态设计效
0 点击  / 0 评论
设计漂亮有趣的转场动效!高手之路!
0 点击  / 0 评论
相关文章:


桃子穿上小内内,七夕性感蜜桃朋友圈热传  Excel:工作表锦上添花  用QQ怎么截取动态图示例教程  

觉得不错?顶一下!
PUSH UP
复制本文地址
COPY
最近更新:

人物皮肤修饰完全自学教程(视频教程)
9 点击  / 0 评论
所属栏目:[美容]
修图师分享 五分钟完成皮肤处理的伪商业修
3 点击  / 0 评论
所属栏目:[美容]
核心技术 教你人像后期面部精修
1 点击  / 0 评论
所属栏目:[美容]
利用计算及修复画笔快速给人像祛斑及磨皮
0 点击  / 0 评论
所属栏目:[美容]
Photoshop高低频磨皮教程
0 点击  / 0 评论
所属栏目:[美容]
商业人像大片中的发丝精细美化
1 点击  / 0 评论
所属栏目:[美容]
新手必学 用Lighroom5分钟快速编辑人像照片
7 点击  / 0 评论
所属栏目:[美容]
运用中性灰给商用人像大图精细磨皮
2 点击  / 0 评论
所属栏目:[美容]
本页全部评论共计()条    【点击查看全部评论】
您的昵称:(10个汉字以内)                      匿名
评论中不要带有网址,并且不要发布违禁词汇。字数限制在300汉字以内。
           验证码:(注意大小写) 看不清楚?请点击刷新
网友最新评论:          
  关于 栏目 栏目 联系 帮助 综合
  关于本站 入门基础 图片合成 在线留言 如何投稿 范文
  版权声明 鼠绘教程 抠图操作 联系方式 常见问题 软件资讯
  免责声明 调色方法 视频教程 本站微博   推荐问题
  本站地图 人物美容 相关素材     已解决
  Sitemap 照片处理 资源下载     待解决
    字体效果 相关经验      
    图标按钮 CS6专题      
  声明  
  114PS教程网(114ps.com)发布的所有教程信息版权归原作者所有,由本站转载的内容仅为提供更多信息,并不代表本站同意其观点。
  所有图片信息均来自网络,本站仅作学习使用,若无意冒犯,请联系本站。
  黑ICP备15009090号-1
  Copyright © 2011-2014