解读!拟物图标设计风格

2021-10-23 07:56·设计智造

拟物化风格也称为写实风格,即据实直书,真实地描绘事物。

拟物化图标基本上使用生活中原有的物象来反映产品的功能,同时图标的内部加入更多的写实细节,比如色彩、3D效果、阴影、透视效果,甚至一些简单的物理效果,使得用户认知时一目了然,视觉刺激强烈,大大提高辨识程度。

但有些时候写实的设计并不一定是原始的意思,而是一种近似的表达,比如眼睛图形可能不代表“眼睛",而代表“查看”或“视图";齿轮状的图形不一定代表的是“齿轮",可能是“设置",也可能是“调整"。

简而言之,拟物化的图标,无论是面对真实存在的物体,还是想象出来的对象,其总是在描述一个真实存在的事物,而不是抽象的符号。

拟物化风格图标的实际设计,并不一定是照着原始物体将其完全描绘出来,有时候只需要描绘基本元素即可,即将重点的部分表达出来就可以了。比如我们经常看到用户界面上的主页按钮,通常会用一个小房子作为图标,将代表房子的重点元素绘制出来。

拟物化风格设计对于初次接触电子产品的用户来说,识别直观,易用性强,可以很容易找到操作的入口。但多年一成不变的设计也造成了一些问题,比较突出地表现于以下两个方面:拟物化风格图标流行多年,造成用户的审美疲劳;过度地在意拟物化的细节表现,使得用户对产品内容的转化效率变低。

①注意取舍。在拟物化图标的创作中,细节太多或太少,都有可能造成用户看不懂的情况,所以要注意取舍。可以先在纸稿上绘制草图,用来确定哪些细节需要表达,哪些可以省略。当然,如果界面元素和生活参照物相差太远,就会很难辨别;如果太写实,有时候也会让人们无法识别你要表达的内容。

②使用合适的材质和纹理。拟物化图标中使用好的材质和纹理,能够让用户得到对品质追求的满足感。比如木质、皮质或者塑料一般可以使人产生怀旧感,金属一般可以使人产生科技感,大自然中的事物能够唤起亲和感,食物类的质感表现可以勾起人们的食欲感。使用合适的质感与纹理表现,可以使用户的感受从物质感受提升至对美好事物的精神感受。

③规划拟物化图标中的光影与色彩。拟物化图标中的光影与色彩是还原“真实”物象的重要环节,能使图标从二维平面转换为三维的立体效果。光影与色彩从不同的角度、不同的空间表现出来的组合效果,成为一种独特的视觉语言,带给人们美好的享受。

(0)

相关推荐

  • 苹果iOS 15要来了,支持息屏显示,还有这些变化!

    据媒体报道的最新消息,苹果公司将会在今年的6月份举办一年一度的全球开发者大会.除了一些硬件的正常更新迭代之外,在这次大会上将会发布苹果最新的iOS15操作系统. 从目前各大媒体的爆料来看,最新IOS1 ...

  • 火爆设计圈的玻璃拟态风格,现在到底怎样了?

    今天一起来看下,今年比较火的玻璃拟态设计风格,通过这篇文章,我将带大家了解玻璃拟态的美学发展过程.风格特点.为什么没有被大量使用?最后通过一些优秀的案例,找到切入点,将这种设计风格巧妙的运用到设计中. ...

  • 优漫动游教育拟物化设计的回归

    以扁平化设计风格为主导的设计在当今的UI设计领域已经是无可争辩的事实.平面应用除了提高用户获取信息的效率外,对于设计者来说也是大大降低了设计的难度. 一种界面的UI视觉元素,仅需图片素材.矢量图标.几 ...

  • Material 还是扁平化?开发者还有第三个答案

    2011年,拉里·佩奇担纲谷歌CEO之后,改变谷歌工程师主导的文化,其中一项重要行动便是,下令谷歌设计师将谷歌旗下所有产品重新设计.谷歌启动"肯尼迪"项目,召集公司里的骨干设计师, ...

  • 今年必买iPhone 13的理由找到了!

    雷科技数码3C组 编辑丨MoFirLee 前段时间,苹果正式公布,WWDC 21全球开发者大会将于6月8日~12日召开.也就是说,全新的iOS 15.iPadOS 15.macOS 11.watchO ...

  • 到底是扁平还是3D,还能不能给个准信儿?

    有人调侃艺术是有轮回的,至于年限,说十年也有,二十年也有.人们总在喜新厌旧,然后再把旧的拿出来当新事物,谓之"复古". 曾经我们一度追寻扁平风,因为它简洁.清爽,但就像我前面讲到的 ...

  • PS教程!手把手教你临摹一枚经典的SIRI拟物图标

    @P大点S微博 :今天临摹的是一个SIRI图标,iOS里标志性的icon,非常漂亮.看了原图后我认为临摹过程中最麻烦的地方就是麦克风中的一组镂空和它的发光效果,在胶囊型的麦克风里怎么能整齐科学排列它们 ...

  • PS高手教程!30小时拟物图标速成记之写实手表篇

    作者:@张小碗儿grace 源文件打包  百度云下载:http://pan.baidu.com/s/1pKuymIB 作者微信公众号:bigdcc,欢迎关注哟

  • PS教程!30分钟拟物图标速成记之USB篇

    编者按:超精致图标教程第二弹!不同以往,@张小碗儿grace 同学今天的教程实实在在演示了专业UI设计师的绘制过程是怎样的,你可以学习如何拆分一个物体以及建立规范的图层分组,来练下手,绝对能让你有全新 ...

  • PS进阶教程!30分钟拟物图标速成记之直刀篇

    编者按:超精致图标教程第三弹!今天的图标效果特别抢眼,30分钟帮你速成帅气利落的直刀,跟着@张小碗儿grace  的教程来,一边学习Photoshop的操作,一边了解专业的图标绘制流程,一举两得,赶紧 ...

  • PS教程!30分钟拟物图标速成记之自动铅笔篇

    源文件 微盘下载 屏幕小的同学如果看图不清楚,可摁住 Ctrl+鼠标中键放大 :) 作者:@张小碗儿grace

  • Photoshop快速的绘制高格调的拟物风扇图标

    来源:优设  作者:杨洋-XHM 去年做的拟物图标临摹练习.做总结的时候看到这个作品,感觉光影依然非常漂亮.索性就把教程重新规范化写一遍,拿来跟大家分享. 效果图: 练习重点: 这次练习主要练习光影. ...

  • 最全可降解知识:标准清单、标准解读、认证图标……

    来源:金华市婺城区市场监督管理局 由生物降解材料研究院主办,金发科技.安徽丰原.蓝山屯河.华测检测.苏州和塑美协办的<中国降解材料高峰论坛(苏州站)与项目对接会>,将于5月28日在苏州隆重 ...

  • 深入浅出讲伤寒第44篇:现代语言解读“黄芪桂枝五物汤”-虚劳

    后三期发文预告:桂枝龙骨牡蛎汤. 麦门冬汤.奔豚汤. 发文规则:周一.周三.周五更新.点击关注@三甲医院中医袁大夫查看更多文章. 本系列文章用通俗易懂的现代科学语言解读中医方剂背后的机理及适用范围,帮 ...

  • “鸿蒙”系统都在用的「轻拟物」风格,你还不会吗?

    最近,华为发布的"鸿蒙系统"火了! 虎仔在看关于HarmonyOS UX设计理念的宣传片时,意外地发现:鸿蒙系统的设计中,竟然用了「轻拟物」风格设计! ▲截图来自HarmonyOS ...