UI图标设计5大原则,来了解一下

图形化用户界面图标设计的原则,主要有以下几个,即图形化用户界面图标的统一性原则;图标的用户认知性与民族性原则;图标的简洁性和符号性原则;图标的尺寸性原则和图标的文字应用原则。

统一性原则

一个软件或程序的系统中,图标的设计风格需要保持统一。因为统一的图标比单一零散的图标更具品质,更容易让用户理解和接受。图标的造型设计,可以使用轻松诙谐的绘画风格,也可以使用简洁明快的平面剪影效果或酷炫时尚的3D效果。

①图标的透视效果表现,是图标造型中的重要因素。如果某一图标元素的造型设计成平行透视的表现效果,那么其他的图标,也要按照平行透视效果来进行设计。而如果图标元素视觉效果是成某一个特点角度,即成角透视效果,那么其他所有的图标,都要按照这个特定角度进行设计。

②图标的光影效果表现,也能很好地体现图标的统一性。图标的光影效果,如果不是从同一光源角度射入,那么可能会导致整个图标系统视觉混乱。使用统一的光源效果,不仅可以使图标整体效果统一,而且也会让使用者觉得图标的设计比较专业。

③图标的色彩风格,也需要和图标造型风格相统一。特别是在色彩的选择和搭配上,尽量考虑色彩三属性的协调,色相、明度或纯度3项中至少有1项是相互统一协调的。同时,颜色选用也不宜过多,因为过多的颜色在一个很小的区域里出现,会让人产生杂乱的感觉,影响到最终视觉效果。

用户认知性与识别性原则

图标设计的目的,是通过符号化的图形传达信息。因此,图标的用户认知性与识别性原则,在图标设计中就显得尤其重要。图标,是建立在虚拟世界和真实世界的一种隐喻或映射关系的桥梁。隐喻旨在“以一种更为明显,更为熟悉的观念符号来表示某种观念”,观念之间存在着类似性。

在图标设计中,隐喻是一个相当重要的表现手法。通过归纳和联想,使图标的图案造型与图标的使用功能,可以建立起最为直接的联想。但是,这种直接的联想关系,取决于图标使用用户的认知水平和认知习惯。相较之下,具有隐喻表现手法的界面图标设计,可以化繁为简,将抽象事物的内涵明确化,让使用者更容易理解和认知,因此显著地提高了图标在人机交互间的有效性和准确性。

简洁性与符号性原则

因为图形在传递信息时,其简约程度,与受众的识别认知度,也是成正比的。即越是简洁的图案,越容易让人识别和记忆,也越是能高效地传达信息。而极度写实或加入过多装饰效果的图标,其信息传达的快捷度,也是大打折扣的。

象征性的符号,在图标设计中也是常见的。符号图标能够更快地被用户所接受、记忆和识别。同时,符号图标所使用的图形文件小,便于硬件的支持和运算效率的提高。因此,在图标设计时,尽量不要使用过于复杂的图案。过多的图形和装饰效果,会降低图形的认知度,特别是在小尺寸图标中,由于图标尺寸偏小,导致视觉上的识别度降低。

同时,也需要避免过多的元素在同一图标中出现。如果必须在图标中加入过多元素的话,那么就要尽量在图标设计时保持强烈的符号品质,让主体图案以符号化的形式出现。在图标中,应谨慎地设置图标的图形元素,因为不可能所有的图标,都有使用简约的黑白剪影效果。

尺寸性原则

由于图形化用户界面的使用环境不同,导致图形用户界面在使用中的显示环境不同。因此,图形化用户界面的图标尺寸,也出现了不同。同时,随着显示技术的不断发展,图标对应的显示尺寸越来越大,分辨率越来越高,这使得图标的细节,也不断地在进行改进中。并且跨平台软件的图标大小或像素的数量,通常按照特定的技术规范进行设计。一般的图标标准尺寸有4种,分别为像素、24×24像素、32×32像素和48×48像素。

图标设计,不同于其他的视觉设计。同一图标,由于其尺寸不同,展示效果和制作细节也不尽相同。因此,在不同显示系统下的图标,在图标设计时,都有其对应的图标效果。

文字应用原则

在图标设计中,除了图形设计之外,还有一个重要的组成部分就是文字。简洁明快的文字标签和清晰准确的文字说明,能更好地提高图形化用户界面的工作效率。在设置图标文字时,最好使用简单通俗的文字作为图标的说明文字。在图标文字的选择上,需要具备高度的概括性。同时,图标文字又需要有高度的信息传达性,能够充分体现其是对图标图案的一种解释和说明。

在图标文字的设计中,需要对文字属性和文字使用环境进行考虑。而文字的字体、尺寸和色彩等方面,也会对图标的整体视觉和运行效果产生影响。在文字字体的选择上,考虑图标字体的形态不宜复杂。文字的识别度差异,在通常情况下,中文字体应不小于14px,英文字体应不小于12px。另外,应该尽量使用均匀的间距,使文字更为整齐清晰,易于辨体识。

图标中的文字使用,是对图标图案的说明,能够让用户高效、快速地读懂图标所需要传达的全部信息。图标文字的设计,涉及到图标文字内容的选择、字体选取、字形安排以及文字的色彩的选用等多个方面,是综合应用的结果,也体现了图标文字应用在图形化界面中的重要性。

THE END
1.40个几何感强的图形logo设计欣赏40个几何感强的图形 logo 设计欣赏设计频道 - logo 来源:设计在线 作者:lifa 2024-11-29 点赞 声明:站内网友所发表的所有内容及言论仅代表其本人,并不反映任何网站意见及观点。 举报 收藏 silina 山的那边,海的那边,有个蓝色的小精灵。 关注Ta 私信 ...http://www.ccdol.com/sheji/biaozhi/36174.html
2.盲人配眼镜系列造型图标图片商业图片正版原创图片下载购买VEER图片库提供盲人配眼镜系列造型图标图片购买下载服务,2亿+高清商业图片,正版图片购买下载一站服务,另提供矢量图片,健康保健图片,人图片,肢体缺损图片,安全的图片,男人图片,设计图片,医院图片,触摸图片,法律图片,恢复图片,图像图片商业正版下载服务,版权保障,使用0风https://www.veer.com/illustration/394403149
3.造型十二星座图标图片免费下载PNG素材编号vo9i0m6dg图精灵为您提供造型十二星座图标免费下载,本设计作品为造型十二星座图标,格式为PNG,尺寸为500x500,下载后直接使用,下载造型十二星座图标图片素材就到图精灵。https://616pic.com/sucai/vo9i0m6dg.html
4.古装造型图标icon免费下载图标图标 元素元素 背景背景 PPTPPT 字体字体 动图动图 模板 在线设计在线设计 样机样机 海报海报 插画插画 UIUI 淘宝淘宝 图库 高清图库高清图库 免费商用(cc0)免费商用(cc0) 版权商用(9元)版权商用(9元) 游戏 美术 图标图标 UIUI 场景场景 角色角色 技能技能 合集合集 横版横...https://www.aigei.com/view/113683.html
5.计算机六班——图标的绘制,让造型能力更上一层楼。手机图标的绘制,是我们这学期检验学习成果的最好方式。那一个个熟悉的手机app图标,将会在这里完成。 QQ是我们常用的社交软件之一,对于我们这些没有美术基础的技校生来说,每画完一个步骤都好像完成了一项艰巨的任务。 绘画过程中,总是顾此失彼,注意和主题色彩的关系,却忽略了每个图标之间的联系。注意了图标的整体...https://www.meipian.cn/129y59d2
6.云图标ICON(5分钟打造完美造型/非扁平)MadeinChina云图标ICON(5分钟打造完美造型/非扁平) Made_in_China 北京/UI设计师/10年前/1760浏览 版权 工作闲暇之余,动动手绘制几个ICON也是一种不错的选择,附上PSD,周一才刚刚开始,漫长的一周你该如何充分利用? 原创作品UI图标 16:42:50 【全新版】figma高级进阶系统实战-速成课...https://www.zcool.com.cn/work/ZNTQyMDM2NA==.html
7.卡通扁平可爱猫头鹰造型图标元素矢量素材卡通扁平可爱猫头鹰造型图标元素矢量素材 矢量动物,卡通猫头鹰,手绘动物,儿童插画,卡通动物 矢量图共享与免费下载网站-素材公社(www.tooopen.com)https://www.tooopen.com/view/2423872.html
8.书写图标大全书写图标设计书写图标素材书写图标是由千图网正版图库提供下载服务,除此之外,还提供了书写图标,游戏技能图标,造型图标,制冷图标,图标认证等下载服务。找正版商用素材就上千图素材网!https://www.58pic.com/zt/6857.html
9.十四运会和残特奥会体育图标主题海报等发布第十四届全国运动会体育图标设计理念取自中国传统文化“天人合一”哲学思想,图标造型由圆环形内代表全运会各运动项目特征的运动人形共同构成。 体育图标设计色彩沿用会徽黄、绿、蓝、紫、红色为主色调,黄色代表黄土高原,红色代表革命圣地,绿色代表生态自然,蓝色代表现代科技,紫色代表文化时尚。以生动准确的运动造型表现第十...https://m.thecover.cn/news_details.html?eid=1wSbNBSMwYE=
10.色图标高清图片第131页色图标免费券图片 下载 色图标社区展板背景图片 下载 色图标都市丽人图片 下载 色图标房子房地产图片 下载 色图标云标签图片 下载 色图标班级文化建设图片 下载 色图标中国梦我的梦中国传统文化文化墙图片 下载 色图标安全须知图片 下载 色图标小标签图片 下载 色图标瓶标签图片 下载 色图标造型标签图...https://www.photophoto.cn/tupian/setubiao-131.html
11.天猫图标图片天猫图标素材觅元素为您精心挑选了77张内容丰富天猫图标高清图片素材,帮助您进行天猫图标作品创意设计,下载更多天猫图标风格的图片、免抠png图片素材、背景图片素材就来觅元素。https://www.51yuansu.com/topic/tianmaotubiao-1.html
1.icon图标立体(图标立体效果)1. 熟悉立体造型原理 要设计出立体感强烈的icon图标,首先需要对立体造型原理有一定的了解。立体造型是指通过光影和透视关系来营造出物体具有深度和厚度的效果。因此,在设计过程中需要注意光源、阴影和透视等因素,并合理运用它们来营造出真实感。 2. 选择合适的颜色 ...https://www.c4dmodels.cn/article/142820.html
2.海阳亚沙会三大标识揭晓吉祥物造型超萌(图)即将于11月29日迎来倒计时200天的海阳2012第三届亚洲沙滩运动会,昨日在北京钓鱼台国宾馆举行新闻发布会,对外正式发布第三届亚沙会的三大重要“标识”———体育图标、吉祥物体育动作造型、志愿者标志。它们与亚沙会会徽、吉祥物等标志一起,构成了亚沙会的形象标志体系。 https://www.qingdaonews.com/content/2011-11/26/content_9023233.htm
3.UI设计UI图标设计初阶要先型平面其它平面设计形不好再怎么营造整体风格都白费力,好比建筑造型与装修的关系,而色彩等营造的风格都可另起文章分析 。图标造型表现上无非就是典型的2种:面与线 。运用这两种基础元素去造型也可以进行多种组合不同的表现 。组合造型一般有单体造型、多个元素组合造型,线与面之间的独立与结合的变化。https://www.jb51.net/pingmian/397320.html
4.超1000多个PS自定义图标形状素材下载类图片素材60张我图找相似功能已为您找到60张与超1000多个PS自定义图标形状素材下载类似的图片,包含各种高清原创超1000多个PS自定义图标形状素材下载素材图片,找超1000多个PS自定义图标形状素材下载相似图片就上我图网.https://so.ooopic.com/findsimilarity-16935407.html
5.『宜图矢量素材网』『宜图矢量素材网』简称“宜图网”,是一个专注设计基本元素素材造型分享平台,提供eps矢量元素、图形素材的上传下载服务。为设计师省去大量的基本造型时间,全站png素材免费下载,使设计更加方便快捷!http://www.epspic.com/
6.吉利icon设计解析看完让你“i”上它吉利iocn是继吉利缤越之后,吉利BMA全球新一代模块化架构的第二款SUV,也是吉利首款以英文命名的全球战略车型。吉利icon是吉利首款仅有英文命名的车型,名字中的“icon”原意为崇拜的偶像、时代的符号;亦代表数字时代应用程序的图标。 在造型方面高度还原了吉利概念车CONCEPT ICON,并采用了“icon科技语法”即:以科技制定...https://www.yoojia.com/article/9675777121288523531.html
7.王者荣耀打野装备图标更改图片新版打野装备图片什么样子http://www.qqtn.com/qqkey/wzrypjb/ 王者荣耀单机版: http://www.qqtn.com/qqkey/wzrydjb/ 王者荣耀安装包: http://www.qqtn.com/qqkey/wzryazb/ 其他装备图片微调: 除此之外,辅助装备近卫荣耀同样更改了图标造型,以上更改只涉及图标,属性依旧没有变化!https://www.qqtn.com/article/article_206056_1.html
8.干货!UI设计中那些创意的图标怎么做营业执照卡通图标将复杂图标简化为简洁图标 因为扁平化图标造型简单,易识别,经常应用在界面和菜单栏中。在绘制这类图标时一定要注意外观的统一性和识别性。很多新手设计师会通过网络去下载图标素材,东拼西凑成一套图标,这不仅降低了界面的档次,而且很难统一图标的整体风格。 https://blog.csdn.net/weixin_51686423/article/details/111047334