- 1、本文档共18页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
图标设计的原则
最近想到要写一篇关于图标设计的原则,理由如下:
图标设计在 GUI 中所占的比重越来越大,很多 GUI 设计师都是从图标设计开始的的;
同时由于软件界面设计的未来方向是简洁、易用、高效,精美的图标设计往往起到画龙点睛的作用,从而提升软件的视觉效果;
但现实中很多设计师往往过度追求图标的视觉效果而忽视了其他几个方面,舍本逐末;
客户片面的要求图标要震撼,要立体,要发光,要高对比度,而忽视了图标所处的环境;
我们的团队经常做一些大量的图标设计工作,需要一些规范和原则;
谈到原则,我要先说图标设计的目的: 先说优点:
1:代替文字,比文字要直观,提高软件可用性;
2:代替文字,比文字更漂亮,提升视觉效果; 缺点:不如文字表达的准确。
因此,图标设计的核心思想,就是要尽可能的发挥图标的优点:比文字直观,比文字漂亮,减少图标的缺点:不如文字表达的准确
以下是我总结的几条原则:
第一:可识别性原则
可识别性原则,意思是说,图标的图形,要能准确表达相应的操作。
换言之,就是我看到一个图标,就要明白他所代表的含义,这是图标设计的灵魂。可以当之无愧称之为图标设计的第一原则。
我们看一下高速公路上的路标设计,我只能说,这是最好的图标设计,可识别性强,简单,直观,即使是不认识字的人,也能立即理解图标的含义。见图(1):
(图 1)
公路路标的特点,注定图标的设计要简单明了,要具有非常直观的可识别性,司机只需要瞄上一眼,就能准确理解路标的含义,这样便于他继续驾驶,如果图标设计的不够直观,不具有可识别性,那么司机在开车的时候会一直盯着路标看, 一直在想这是什么含义,你可以想象他面临的危险会有多大,另外在高速上,如
果路标设计不够直观,也有可能在司机还没有明白什么意思呢,就错过了路标。
(图 2)
图(2)是我设计的一些常用工具类的图标,你是否一眼就能看出每个图标的区别和含义呢
这套图标虽然很简单,但是很实用,因为通常的界面不需要精度很高、尺寸很大的图标,并且这套图标符合差异性,可识别性,风格统一性的原则。
(图 3)
图(3)为我们的设计师 Veronica 为 6301 项目进行的图标设计,符合可识别性原则。
第二:差异性原则
差异性原则,什么意思呢意思是如果一个界面上有六个图标,我一眼看上去,要能第一时间感觉到他们之间的差异性,否则我怎么辨认呢
这是图标设计中很重要的一条原则,但也是在设计中最容易被忽略的一条,图标和文字相比,它的优越性在于它更直观一些,但是如果图标设计失去了这一点, 我认为图标设计就失去了意义。我们看一些现实中的例子:
(图 4)
见图(4),这是我平时最常用的一套软件:用友致远办公管理系统,我只能说从差异性和可识别性来讲,这里的图标设计非常失败。“新建事项”“待发事项” “已发事项”“待办/已办”“超期督办”“流程管理”这六个图标一眼望上去, 几乎是一样的,其中五个图标采用了相同的元素“淡蓝色文档”,这里图标的设计,已经失去了存在的价值,因为图标设计的目标是提高效率,用户一眼望上去他们都一样,如果不看文字,用户真的很难区分它们,这实际上是降低了工作效率。
图(5)这套图标很漂亮,但是从差异性上来讲,这套图标也是失败的,黄色的文件夹部分的六个图标,一眼望去几乎又是一样的,差异极小,在具体应用过程中会很吃力,用户需要仔细观察才能区分出他们的差别。
Co mpm 巳r
酝 i;.y-·cl巳 Brn F ull
F o Id已『 守il li 丙]e
t 1 Y Co mp 印 知 1巳
-
-
Re” dl七 Btn0署心巴门
F氓ae, A SJ--| 它 仁l”
CKd
F n 虫 巳r Clo 贬
F Old 气租` 叩 1邑
R 巳"』巳甘Ill
Fn lrt吧冒
.叩玉 r 凡叫叩PL谗 wl们
(图 5)
Catia 是世界领先的 CAD\CAE 大型软件系统,但是它V5R16 版本图标设计同样存在上述问题,见图(6),一眼望上去几乎一个样子,同时边缘粗糙,配色生硬, 缺乏美感
.....口.a .L 口 L .. u - -L旷立 l .:l 且y 亡 5 .L 二 .a .J
芦海彴 . 口 开始fd) 文件仅)
` '扫料库
弓 k.ATI A 礼 邓 亚
11石 里(c at.斗 og ) 编错器
』,和 10l o S:tud.i
』,
』1mIll1:!!rsiT/e S y 5 也 m 红 豆 孔 部 t
』
』炉 吐 Ti rr. R江ndr吐 i ri.冬
』
IiJ恁 炉 斗u cl D ala Fil t eri.n.g
§毋 氐证字典编茹器
(图 6)
怎么办
我想应该这样,在一套图标中,如果各个图标需要使用相同的元素,那么我们要尽量
您可能关注的文档
- 体育学科我的再发展行动计划.docx
- 体育优质课观后感.docx
- 体育与健康知识讲座.docx
- 体质健康测试教案课程合集 ().docx
- 听桂贤娣老师报告后有感黄.docx
- 听课记录表格范文[1]模板.docx
- 听课评课总结.docx
- 听妈妈的话作文500字.docx
- 听马九克教授直播培训心得.docx
- 听沙高二抒情作文800字.docx
- 2024年江苏省淮安市中考二模道德与法治试题-3779.pdf
- 2024年山东省济宁市太白湖新区(五四学制)中考一模历史试题-7166.pdf
- 2024年辽宁省大连市中考二模历史试卷-6098.pdf
- 高考数学(文)一轮复习课件第一章第三节简单的逻辑联结词全称量词与存在量词.ppt
- 统考版2025届高考语文一轮复习专题十一辨析并修改蹭学案二考点二修改蹭学案.docx
- 江苏专用2024年高考历史一轮复习专题一古代中国的政治制度第2讲秦中央集权制度的形成学案新人教版.doc
- 2024高考英语一轮复习提能练三Unit3Celebration含解析北师大版.doc
- 统考版2025届高考语文一轮复习专题十正确使用词语包括成语学案二考点一正确使用成语学案.docx
- 新世纪 -美对加墨加征关税 中国今年GDP增长目标5%左右——全球宏观经济周报(20250301-20250307).docx
- 张少博-基于CodeGeeX的AI Coding实践与探索.docx
文档评论(0)