拟物化风格图标设计
拟物化风格图标设计
课程回顾
n扁平化风格概述
n扁平化风格设计原则
n扁平化风格的特点n扁平化风格的分类
本章任务
n了解拟物化设计的概念
n熟知拟物化启动图标设计的流程
n了解启动图标的设计原则
n能够使用Photoshop进行拟物化图标的设计
目录
n拟物化设计的概念
n拟物化启动图标设计的流程n启动图标的设计原则
n拟物化设计的概念
l“拟物化” 一词来源于古希腊，意思是只要看到它的外在形态，就能知道它是用来做什么的
l“拟物化”设计是一种以保留原始被模仿对象的各种装饰元素为基础、并由此衍生出来的设计风格
n拟物化设计的概念
哪一幅运用了拟物化风格?
哪一幅运用了拟物化风格?
n拟物化设计的优点
l外观完全与现实事物相似，用户认知和学习成本低l交互与现实事物保持一致
l动态效果高度统一，给用户以人性化的体贴
n拟物化设计的缺点
l花费大量的时间在视觉的阴影和质感效果上
l要求设计师有更深厚的设计功底和更熟练的软件使用l在适配方面比较复杂和麻烦
n拟物化设计的核心：提取物体的关键元素
：它们的关键元素是？
拟物化设计的概念
n拟物化设计的核心：提取物体的关键元素
：它们的关键元素是？
演示案例
n
需求描述
l完成拟物化风格日历启动图标设计
演示案例：
拟物化风格日历启动图标设计
n实现思路
l使用形状工具和钢笔工具
绘制整体的结构和布局
l给图标上色，将各部分大
致的颜色分出来
l为图层增加图层样式，通
过颜色渐变、内发光、外
发光等增加图形的质感和
细节
课堂练习
n需求描述
l完成拟物化风格旋钮设计
n实现思路
l使用形状工具和钢笔工具绘制整体的结构和布局
l给图标上色，将各部分大致的颜色分出来
l为图层增加图层样式，通过颜色渐变、内发光、外发光
等增加图形的质感和细节
课堂练习：
拟物化风格旋钮设计
目录
n拟物化设计的概念
n拟物化启动图标设计的流程n启动图标的设计原则
n拟物化启动图标
n从实际出发
• 台球App图标
n从现有图形系统出发
p被人们熟知
p被人们认同
p避免引起歧义
•设置图标
n从竞品出发开始l相同类型
l竞争对手
l不同平台
p pc
p web
p phone
p……
l从实际出发。
l根据这个设计的需求找到相关素材主题“抽屉”、“邮件”
l从现有图形系统出发
演示案例：拟物化风格抽屉邮件图标设计
l从竞品出发开始
演示案例
演示案例：
拟物化风格抽屉邮件图标设计
n需求描述
l完成拟物化风格抽屉邮件图标设计
n实现思路
l使用钢笔工具和图形工具绘制图标的整体结构
l双击图层缩略图，更改形状图层的颜色
l为图层增加图层样式，通过添加颜色渐变、内发光、外发光等
为图标增加更多的质感和细节
l将图标作为一张图片进行修整，在最上面增加一个图层调整整
体的光感
课堂练习
n需求描述
l完成拟物化风格复古磁带图标设计
n实现思路
l使用形状工具和钢笔工具绘制整体的结构和布局
l给图标上色，将各大部分大致的颜色分出来
l为图层增加图层样式，通过颜色渐变、内发光、外发光
等增加图形的质感和细节
课堂练习：
拟物化风格复古磁带图标设计
目录
n拟物化设计的概念
n拟物化启动图标设计的流程n启动图标的设计原则
n严格遵守平台下的规范进行设计
• iOS系统启动图标尺寸的设计规范
n严格遵守平台下的规范进行设计
n注意
l App启动图标在设计时要考虑后期是否要印刷，设计时的像素大小直接影响后期印刷效果
l为了防止图片过大引起的卡机、死机现象，或后期修改带来的被动因素，设计时请尽量使用矢量软件或PS里的矢量工具来设计
n严格遵守平台下的规范进行设计n考虑在各个平台实际应用中的情景n必须符合国家相关规定
n考虑受众群体的审美需求
演示案例
演示案例：拟物化风格相机图标设计
n需求描述
l完成拟物化风格相机图标设计
n实现思路
l仔细观察现实中的相机的模样，抓取它的关键元素
l对相机图标进行拆分
l使用圆形工具绘制几个同心圆，然后分别为其增加图层
样式
l绘制光晕镜头
l各个圆形之间的完美对齐
课堂练习
n需求描述
l完成拟物化风格可爱照相机图标设计
n实现思路
l使用形状工具和钢笔工具绘制整体的结构和布局
l给图标上色，将各部分大致的颜色分出来
l为图层增加图层样式，通过颜色渐变、内发光、外发光
等增加图形的质感和细节
拟物化风格可爱照相机图标设计
课堂练习
n需求描述
l完成拟物化风格圆角直尺图标设计
n实现思路
l使用形状工具和钢笔工具绘制整体的结构和布局
l给图标上色，将各大部分大致的颜色分出来
l为图层增加图层样式，通过颜色渐变、内发光、外发光
等增加图形的质感和细节
拟物化风格圆角直尺图标设计
本章总结
n什么是拟物化风格设计？
n拟物化启动图标设计的流程是什么？n启动图标的设计原则是什么？
n拟物化和扁平化设计，哪一个更好？
本章作业
本章作业
n完成本节课所有的演示案例、课堂练习
n临摹下列拟物化风格图标
l拟物化风格金属保险箱图标设计
l拟物化风格湿度计图标设计
n请教员根据班级情况布置预习。
《UI设计》课件——6.2 App界面图标设计
1 绘制圆角矩形
2 绘制形状
3 设置渐变颜色
App界面图标设计
6.2.1 认识App界面图标
2
图标是一组具有高度浓缩性、能快捷传达信息、便于记忆的图形，该图形既可以是图像，也 可以是文本或Logo。在设计图标时，要注重图标美观性和实用性，保证图标符合App界面的需求。
6.2.2 App界面图标类型
3
图标作为App界面中不可或缺的部分，是App界面设计的重点。从表达形式而言，图标可分 为拟物化图标、扁平化图标、2.5D图标3种类型。
6.2.3 App界面图标设计要点
4
在进行App界面设计时，除了需要掌握图标的类型外，还需要掌握App界面图标的设计要点。
具备识别性
具备共性 和差异性
风格统一
6.2.4 设设计“书画应用”2.5D图标，在设计时先绘制图标形状，然后绘制毛笔形状，完成后 的效果不但简洁美观，而且主题鲜明，其具体操作如下。
拟物化图标设计制作步骤
拟物化图标制作步骤
1.新建背景图层，填充颜色（Alt+Delete）
2.椭圆工具（U）绘制圆形，直接选择工具（A）分别横排和竖排的点，右键—自由变换点，宽、高分别缩小到80%。
3.为圆角矩形添加斜面浮雕、内阴影、光泽、渐变叠加、投影图层样式，参数如图：
4.椭圆工具（U）+Shift绘制正圆，为圆形添加斜面浮雕、渐变叠加图层样式，参数如图：
5.复制图层（Ctrl+J），Ctrl+T等比例缩小一些（Shift+Alt+鼠标拖拽），将图层不透明度调为20%
6.复制图层（Ctrl+J），Ctrl+T再缩小一些（Shift+Alt+鼠标拖拽）。
7.再次复制图层（Ctrl+J），Ctrl+T缩小一些（Shift+Alt+鼠标拖拽），添加内阴影、渐变叠加图层样式，参数如下：
8.再次复制图层（Ctrl+J），Ctrl+T缩小（Shift+Alt+鼠标拖拽），添加投影图层样式，参数如下：
9.再次复制图层（Ctrl+J），Ctrl+T缩小一些（Shift+Alt+鼠标拖拽），添加描边、颜色叠加图层样式，参数如下：
10.文字工具（T）输入文字。
幼儿园小动物风向标制作案例
幼儿园小动物风向标制作案例幼儿园小动物风向标制作案例主题：幼儿园小动物风向标制作案例要求：1.案例字数在1500字左右。
2.案例采用简明扼要的风格，不要包含任何网址链接和图片。
3.用优美的排版格式输出。
案例：为了帮助幼儿了解方向，以及让幼儿感受到自然的美好，我在幼儿园制作了小动物风向标，并且得到了幼儿们的喜爱和欢迎。
首先，我准备了材料：彩纸、绳子、胶水、剪刀、铅笔等。
然后按照以下步骤进行制作：1.制作小动物模板。
我选择了幼儿园中比较常见的小动物形象，如小猫咪、小狗狗、小鸟儿等，然后用铅笔在彩纸上面画出它们的形状，尽可能放大。
接着，用剪刀沿着铅笔线剪出小动物的形状，并把它们放在一起。
2.画出方向。
在彩纸上面用铅笔画出“东、西、南、北”四个方向，然后用彩笔或钢笔加深轮廓线，使它们更加醒目。
3.将小动物与方向组合。
将小动物形状和方向标志组合在一起，使用胶水将它们黏在一起。
此时小动物的头应该指向北方，也就是风向标的朝向。
4.制作针头。
拿一张金属片，用剪刀将它剪成一个小箭头形状。
然后使用胶水将金属箭头粘在风向标的中心位置。
这个箭头就是我们的针头，能够指示风向。
5.绑定绳子。
最后，用绳子将风向标挂在地上或固定在建筑物上。
风吹过来的时候，针头就会指示风的方向。
这样就完成了一个简单而有趣的小动物风向标。
它能够帮助幼儿了解方向，还能让他们感受到自然的美好。
此外，风向标的形状和颜色也能够引起幼儿的兴趣和好奇心，增加他们对自然的观察和探索。
在创意课堂上，我还让幼儿自己尝试制作风向标，让他们在手工制作的过程中增加了动手能力和想象力。
总之，幼儿园小动物风向标制作是一项有趣而有益的活动，为幼儿的成长和学习带来了新的体验和启示。
UI设计中的扁平化与拟物化视觉传达解析
UI设计中的扁平化与拟物化视觉传达解析随着移动互联网时代的到来，用户界面设计(UI设计)越来越受到关注。
在UI设计中，扁平化与拟物化是两种常见的视觉传达风格。
它们分别代表着设计中的两种不同趋势，都有着自己的特点和优势。
本文将分析扁平化与拟物化的设计风格，探讨它们在UI设计中的应用和优缺点。
一、扁平化设计1. 扁平化设计概述扁平化设计是指在UI设计中去掉繁杂的立体效果，将界面元素简化为二维平面，突出简洁、清晰、直观的设计风格。
扁平化设计在一定程度上遵循了“简约至上”的设计理念，强调简洁、明了的设计风格。
这种设计理念的提出来源于对用户体验，用户界面的关注和追求，要求设计师在设计界面时应当更注重用户体验。
扁平化设计最大的特点就是简洁和直观。
它去掉了繁杂的阴影、渐变、立体效果等，使得界面元素更加纯粹、简洁。
扁平化设计中的颜色和图标尺寸都相对较大，这可以使用户更容易地将注意力聚焦在重要的界面元素上。
扁平化设计侧重于图形和文字的表现，更多地强调了内容的价值和信息的传达。
扁平化设计的优点在于简洁、直观、便于理解和操作。
这样的设计风格使得用户更容易地找到需要的信息，提高了用户的使用效率。
扁平化设计也更适合移动设备，它的简洁风格可以使得用户在小屏幕上更方便地操作。
扁平化设计也存在一些缺点，比如界面元素缺乏层次感，容易导致用户在界面中丧失方向感。
加之扁平化设计对颜色、图标的运用要求较高，如果设计不当，可能会使得界面显得单调乏味。
二、拟物化设计拟物化设计是以模仿真实世界物体的形态和行为为目标而设计的。
在拟物化设计中，界面元素呈现出仿真的阴影、质感和动画效果，使得界面元素更具有真实的视觉效果。
拟物化设计的提出在一定程度上弥补了扁平化设计在层次感和真实感上的不足，也更符合用户对界面真实性的期待。
2. 拟物化设计的特点拟物化设计最大的特点就是真实感和层次感。
通过添加阴影、质感和动画效果，拟物化设计可以使得界面元素更加贴近真实世界的感觉。
老年群体智能手机界面图标的拟物化设计研究
老年群体智能手机界面图标的拟物化设计研究通过对老年群体使用智能手机的情况调研，基于老年群体对手机界面图形的普遍认知，探究适合于老年群体使用的智能手机界面的拟物化图标。
根据老年群体的生理需求与心理需求提出合理的设计观点：高明度、长波长的色彩配合更具象更直观的图形打造的拟物化图标更适合于老年群体。
标签：拟物化设计;界面图标设计;适老性图标（Icon），原本是要指宗教的画像或是雕塑[1]，如今也被应用在信息化领域。
但在手机界面设计中，图标是开启用户使用应用的钥匙，在界面交互中起着关键的作用。
不同系统的手机界面图标设计均有一定的一致性，以便于各个背景用户在一定程度上都能认知。
同时，各个相同含义图标设计都有一定的差异性以凸显各自产品的个性。
2013年，苹果系统ios7开启了设计的扁平化潮流。
扁平化的设计去掉了多余的装饰，让每个图标、界面都更加符号化，更加抽象。
这不仅节约了学习成本与制作成本，而且更有效的突出了内容。
扁平化风格的兴起是社会快速发展的必然趋势。
一、老年群体对智能手机界面图标使用的需求经过调查显示，配有手机的老年群体在使用手机的过程中多多少少都存在着问题：不认识一些简化的图标、手机反馈不够不知自己是否点击图标成功、信息层级太多等。
这些问题都需要我们根据老年群体的生理需求与心理需求作出研究，并在使用功能与视觉上作出结论进行设计。
经调查，本文中的老年群体定位于75岁以上的城市老人，这类老年人大多退休已久，对科技产品了解相对较少。
（一）老年群体的生理需求当人的年龄逐步增大，身体各项机能会逐步减弱。
当人进入70岁以后，脑细胞数量和重量都会急速减少，是得老年人的反应变慢、学习能力不如以前。
同时还有老年人的部分记忆力也会衰退，尤其是长期记忆力在我们的界面设计中，应降低老年使用者的长时记忆负荷并提供相应的辅助提醒。
60岁的老年人的视力仅仅是30岁的青年人视力水平的百分之六十，随着年龄的增大，老年群体的是敏感度会降低，晶状体会变硬且灵活性降低，导致调节其本身的形状以观看近处事物的能力。
UI界面设计_南京邮电大学中国大学mooc课后章节答案期末考试题库2023年
UI界面设计_南京邮电大学中国大学mooc课后章节答案期末考试题库2023年1.剪影图标只能作为功能类图标的设计风格。
参考答案:错误2.简化对称性原则通过抽象简化对象来感知对象的整体，是icon设计的重要依据，因此icon设计必须严格遵循，确保绝对对称。
参考答案:错误3.信息产品原型设计分为低保真、中高保真和高保真设计。
参考答案:正确4.轻拟物图标的设计特点是有形多色。
参考答案:错误5.图标是整个产品的点睛之笔，它也可以影响一款产品的形象和气质。
参考答案:正确6.当沉浸在虚拟现实产品的场景中，我们不会在意界面的表现形式，可能会产生界面好像“不可见”的感觉，这是因为界面设计得太糟糕了。
参考答案:错误7.下列特征不能体现界面易用性的是：参考答案:功能丰富8.不同页面间相同的功能、相同的内容要使用同一个图标、控件、文本来表达，这能体现界面设计的原则。
参考答案:一致性_用户中心_易用性9.IOS 8中文规范字体选用了苹方字体，IOS 9中文规范字体选用常州华文的黑体-简，英文和数字的规范字体都Helvetial字体。
参考答案:错误10.下图页面设计作品属于什么风格【图片】参考答案:立体风格11.拟物设计仿效生活中真实物品的形态,通过附加高光、肌理、材质等效果对真实物品进行再现，追求高度还原真实物体。
参考答案:正确12.在设计实践中，提升产品的易用性做法正确的有。
参考答案:设置系统的状态可见，让用户知道系统当前执行任务的进程。
_优化产品的功能，将常用功能放在优势位置。
_使系统对用户的操作给予适当的反馈。
13.设计应该使人们在使用产品的过程中不仅体验到功能上的满足，更能够获得精神的愉悦，这是指界面设计的。
参考答案:致美性原则14.标签就是分类信息的名称，命名标签只要简洁就行。
参考答案:错误15.扁平风格设计具有以下优点：参考答案:扁平化的图形和图标具有很强的识别性和统一性。
_扁平化的界面具有良好的可读性和易读性。
最全PPT图标大全
如何选择合适的图标
根据主题选择
选择与PPT主题相关的图 标，以确保观众能够轻松 理解其含义。
简洁明了
选择简洁、易懂的图标， 避免使用过于复杂或难以 辨认的图标。
风格统一
确保所选图标与PPT的整 体风格相协调，以保持视 觉一致性。
图标颜色搭配原则
与背景色对比
选择与背景色形成鲜明对比的图标颜 色，以确保图标清晰可见。
语音通话
电话形状，代表语音通话或打电话
04
社交表情符号
笑脸
黄色的圆形脸，眼睛和嘴巴呈弯曲形状，代 表开心或愉快
哭脸
黄色的圆形脸，眼睛和嘴巴呈下弯形状，代 表伤心或难过
生气
红色的圆形脸，眉毛呈倒八字形，代表愤怒 或生气
惊讶
黄色的圆形脸，眼睛和嘴巴呈圆形张开，代 表惊讶或震惊
04
CATALOGUE
生活类图标
与主题色搭配
色彩协调
遵循色彩搭配原则，如使用相邻色、 互补色等，使图标与PPT整体色彩和 谐统一。
将图标颜色与PPT的主题色相搭配， 以增强视觉效果。
图标大小设置建议
根据版面调整
根据PPT版面大小和布局，适当 调整图标大小，以确保其清晰可
见且不影响阅读。
保持一致性
在同一PPT中，尽量保持各个图 标大小一致，以维护视觉平衡。
休闲娱乐
电影
电影票、放映机、爆米花 等
运动健身
各种球类、瑜伽垫、哑铃 等运动器材
音乐
唱片、耳机、麦克风等
旅游度假
行李箱、相机、地图、酒 店等
交通出行
公共交通
公交车、地铁、火车、飞 机等
04
交通设施
红绿灯、路标、加油站等
《小图标汇总》课件
美观性
总结词
图标设计应注重美观和艺术性，提升用户体验和视觉享受。
详细描述
美观的图标能够吸引用户的注意力，提高用户的满意度和忠诚度。在设计中，应注重图标的比例、对称、对比和 节奏等美学要素，使图标在视觉上更加和谐、美观。同时，应避免过于复杂或过于简单的设计，保持图标的平衡 和层次感。
03
小图标设计风格
导出规范
总结词
导出为矢量格式，确保图标质量。
详细描述
将小图标导出为矢量格式（如SVG），以确保图标的清 晰度和质量。矢量格式的图标可以任意缩放而不失真， 适用于各种尺寸和分辨率的需求。
06
小图标发展趋势
个性化趋势
定制化需求增加
随着消费者对个性化需求的提高，小图标设计也越来 越注重满足用户的定制化需求，从颜色、形状、风格 等方面进行个性化定制。
Adobe Illustrator 提供丰富的图形编 辑工具，支持多种矢量图形绘制和编 辑操作，如描边、填充、透明度等。
Sketch
01
专为UI/UX设计而 生
Sketch是一款专为UI/UX设计而 生的矢量绘图软件，适用于Mac 操作系统。
02
丰富的符号库和样 式库
Sketch内置丰富的符号库和样式 库，方便用户快速创建可复用的 UI组件。
详细描述
选择与品牌调性一致的颜色，确保图标在各 种背景色中都能清晰易识别。同时，应避免 使用过于花哨的颜色，以免干扰图标的辨识
度。
尺寸规范
总结词
提供多种尺寸以适应不同场景需求。
详细描述
根据使用场景的不同，提供多种尺寸的小图标。例如， 在移动端应用中，需要提供适应不同屏幕密度的尺寸； 在网页设计中，需要提供适应不同容器宽度的尺寸。
UI设计 —创意表达与实践教学课件2-2
【 扁平化图标的常用设计技法】
1、常规基础图标。不添加任 何的渐变、阴影、高光等体现 图标透视感的图形元素，而是 通过极其简约的基本形状图形、 符号等表现图标主题。
2、为剪影图标加底。
3、彩色拼贴图标。
4、折纸风格图标。
5、长投影图标。
6、透明质感图标。
7、渐变伪扁平轻质感图标。
写实图标的绘制
写实图标，以拟物为基础进行图形创意，强调图标极强的真实感与质感表现。拟物化设计是 为了模拟真实的物理世界。通常，这需要设计的在线应用的形式看起来像真实世界的变体， 比如像电子合成器软件，做的像键盘。这种界面的设计方式，在过去几年的界面设计风格中 占据了主导的地位。但是写实图标并不是画得跟照片一样，而是让创造的图标比较逼真，又 超越真实，比如圆形的蜡烛台、木质的便签条、发光质感的信封等。
投影式图标完成图
四种扁平化风格的播放器图标完成
【绘制扁平化相机图标实例】
新建文档并绘制圆角矩形
为圆角矩形添加图层样式
绘制镜头部分
绘制相机顶部与红点
扁平化相机图标完成图
Thanks
比、大小不同的字号，让设计中重要 的信息放在首要位置，不重要的元素 有所弱化。这样的设计让使用者可以 很容易地将注意力集中在产品和信息 上，而不会被设计界面中其他的视觉 元素所干扰，从而突出核心信息和操 作，这些都能够增强设计的可读性。
扁平化蔬菜图标设计
3、简洁清晰 简洁的设计总是让人喜爱的。在一
扁平化金融图标设计
【 扁平化设计的优点】
1、快速而高效 快速运转的现代社会，时
间就是金钱，信息的更新 之快是互联网时代需要有 效高效地传递信息。这是 扁平化设计出现一个重要 的基因，也是很多交互设 计为什么选择扁平化设计 的原因之一。
幻灯片PPT常用图标(超多超实用)不看后悔
补充文字信息
图标可以作为文字信息的补充，帮 助观众更好地理解和记忆内容。
引导观众思路
使用图标可以引导观众的思路，帮 助他们更好地跟随演讲者的节奏。
增强观众记忆
加深印象
独特的图标可以让观众对 PPT中的信息留下更深刻 的印象。
提高辨识度
图标可以增加PPT的辨识 度，让观众更容易记住演 讲者的内容。
与主题相符
图标设计应与PPT的主题和内容相符， 反映演讲的核心观点和关键信息。
在一套PPT中，尽量保持图标的风格 和色彩一致，以营造统一的视觉效果。
根据不同的主题和领域，选择相应的 图标风格和元素，如科技、教育、医 疗等。
色彩搭配
图标设计应注重色彩搭配，选择 与主题和背景相协调的颜色。
使用鲜艳的色彩可以突出图标的 重要性，吸引观众的注意力。
幻灯片PPT常用图标 (超多超实用)不看后 悔
• 图标在PPT中的作用与重要性 • 常见PPT图标类型及特点 • PPT图标设计原则与技巧 • PPT图标应用场景举例 • PPT图标制作工具推荐及使用教
程
目录
• PPT图标素材库分享与下载指南 • 总结：掌握PPT图标运用，提升
演示效果
目录
01
分享了图标在PPT设 计中的实际应用案例
演示了如何插入、编 辑和美化PPT图标
强调图标在PPT中的重要性
图标能够直观、简洁地表达信息，提高观众的理解和记忆效率 图标能够丰富PPT的视觉元素，提升演示的吸引力和专业度
图标能够辅助文字表达，使演示内容更加清晰、有条理
鼓励大家积极尝试并运用到实际中
在日常工作中，多尝试使用不同的图标来表达信息，提高PPT的视觉效果