tp钱包官网版app正版|icon设计风格有哪些

作者： tp钱包官网版app正版

2024-03-14 13:04:16

LOGO设计_猪八戒网

全国首页我是雇主发外包买服务找兼职人员买商标专利热门推荐服务服务服务商案例搜索或发布外包项目需求LOGO设计视频剪辑PPT设计海报设计包装设计卡通形象动画制作3D建模网页设计网站建设软件开发在线作图APP开发小程序开发公众号开发必读攻略：如何让您的需求能更快速匹配到心仪的服务商？查看攻略我是服务商接外包项目主动投标，按项目金额成交赚钱立即获客开店卖服务封装服务，按服务定价售卖服务赚钱免费开店成为云员工成为兼职人员，上传案例和服务赚钱填写技能更多经营模式了解平台经营模式详情点击了解数字市场八戒公采八戒企业管家APP猪八戒APP智能精准推荐快速匹配人才立即下载八戒企业管家APP管理企业资产规避经营风险立即下载猪八戒小程序扫一扫，无需下载体验更轻盈八戒企业管家小程序扫码即用企业智能服务专家猪八戒微信公众号随时掌握一手资讯我的猪八戒我的需求我的订单我的合同我的私信我的发票客服|反馈帮助中心规则中心雇主PLUS八戒客推广服务商工作台商机大厅店铺服务管理我的商机我的订单我的客户八戒推广学习中心规则中心生意通会员登录注册服务服务案例需求服务商商标专利版权搜索或发布需求发布需求发布需求发布需求发布需求发布需求发布需求大家在搜“ logo设计 logo商标查询商标报价公司核名视频剪辑 PPT设计 ”

猪八戒网满足企业需求创造品牌价值让每一个品牌都更出色立即发布需求快速获得原创的logo设计获取验证码请输入正确的手机号请输入正确的验证码请输入至少10个汉字立即发布需求740万+入驻人才2630万+

服务企业100万+解决需求18年专注企服LOGO设计，让品牌更具生命力

我们有原创设计，独具匠心，一笔一划赋予LOGO个性与使命

互联网

餐饮美食

教育培训

酒店服务

医疗养生

食物生鲜

立即发布设计需求 >>

一张表格看懂：为什么找LOGO设计，上猪八戒网就够了

专注品牌设计18年，为雇主提供更经济，高效的一站式品牌设计服务

把您的需求交给猪八戒 >>企业服务流程各个环节，在线客服实时回您排忧解难发布需求平台专业顾问快速为您对接需求，匹配设计师获取设计方案设计师梳理您的需求，通过市场调研，针对您的需求做定制化设计方案设计稿修改设计师根据设计方案，输出设计结果，并修改到您满意为止作品确认交付确定设计师提供的终稿，输出效果图及源文件

专注设计18年，我们用实力说话

100000+设计案例，专注所以更专业

坚持原创，恰到好处的LOGO设计，让LOGO成为企业精神象征

信任，让我们满足您的企业需求>>

专业的设计人才，更值得我们拥有

精选10万+设计人才，为您精准匹配需求，品质更有保障

我有需求，帮我匹配专业人才 >>精选服务，总有一款套餐适合您专属定制服务，让您的品牌脱颖而出企服放心购，爽约必有赔商家全认证服务商100%实名认证官方把关，核实身份服务有标准按品类服务标准验收交付可靠有保障资金更安全平台担保交易验收后付款七天不开工全退款爽约必有赔交付/完工/守时保障源码/原创/注册保证猪八戒网，更多企业的选择740万+入驻服务商2630万+服务企业650种+服务种类17年专业服务业务产品八戒财税八戒知产八戒科技八戒国际八戒公采创业园区八戒云员工服务|支持平台保障新人指南新人福利雇主帮助中心服务商学习中心支付方式规则|反馈规则中心平台信息公示区隐私保护政策客服|反馈八戒110举报交易纠纷调解室关于我们公司信息公司资质取经历程业务范畴联系我们办公地点更多推荐雇主PLUS雇主外包项目大厅八戒企业管家服务商PLUS八戒客推广八戒用工合伙人关注猪八戒网猪八戒APP猪八戒微信公众号八戒企业管家APP八戒企业管家小程序热门业务八戒知识产权八戒财税八戒科技服务八戒问答全部频道外包项目大厅热门服务外包服务大全热门案例八戒公采工位出租八戒工场会员八戒大赛八戒数字交易市场城市查询重庆北京深圳上海广州成都杭州武汉南京西安Copyright 2005-2022 zbj.com 版权所有渝ICP备10202274号-4 渝B2-20080005渝公网安备 50019002500154号猪八戒股份有限公司互联网违法和不良信息举报电话：023-88390110 邮箱：110@zbj.com 信用重庆国家企业信用信息公示系统(重庆)

6种UI设计常用的图标设计风格-即时设计

设计社区

我们的优势

设计教程

帮助中心

图标太多分不清楚？可能是最全面的图标设计类型和风格总结！ - 优设网 - 学设计上优设

菜单

优设网uisdc.com

优设网 - 学设计上优设

首页

设计文章

热门频道

设计导航

培训课程

教程与灵感

设计服务

联系优设

关于我们

文章投稿

铁粉权益

字体授权

意见反馈

广告商务

尊享

加入【优设领航者俱乐部】

尊享全年高价值服务加速收益

大咖指引职场加薪大咖领航新机会新收入AIGC实战加速受益大厂AIGC实战经验分享优质链接人脉链接企业/达人/设友线下链接流量赋能名利双收1000W+流量助力影响力提升

加入领航者俱乐部

领取更多高价值实用特权

投稿

搜索

您还未登录

登录后即可体验更多功能

立即登录

文章收藏资源下载提问答疑我要投稿

图标太多分不清楚？可能是最全面的图标设计类型和风格总结！

2019/06/18

编辑： DD作者： IDfor阅读 12.0w 评论有奖阅读本文需 17 分钟

收藏 1558 点赞 87

图标理论图标设计图标风格

本文收录于专题

图标设计

共收录39篇

1为什么我的图标这么酷炫，总监却说不合格？图标检验2如何将品牌基因融入到产品设计中？这是高级设计师的方法！品牌基因法3可直接转代码！超实用的免费SVG图标管理工具: SVGSUS图标管理

查看本专题

首页设计文章图标设计详情

编者按：图标类型千变万化，实际上万变不离「线性、面性、线面结合」3个方面，再结合「透明度、渐变、颜色叠加、质感、多维空间」等表达方式设计而成。本文将近 6000 字，一篇就可以了解全部设计风格！

图标是 UI 设计中极为重要的一个环节，我们在做每个界面的设计几乎都会涉及到图标的表达，出色的图标设计可以让界面表达更加精致、有趣。

图标的设计往往也体现着设计师的基本功，因此除了日常多画提升对图标造型的把控力外，我们也更需要了解和学习图标设计的趋势类型，从而帮助我们提高在设计中的效率。

基于自我学习的目的，平时在浏览一些设计网站时也会做相对应的收集。因此本文主要对于图标设计的「类型、风格」进行了整理，以及自己对于每种图标类型的思考。

图标的类型划分

设计网站上的图标可以说是多种多样，不同类型的图标都有着独特的魅力。例如，线性图标简洁轻量、面性图标厚重直接，当然同一种类型的图标也具有很多不同的表现形式。

因此基于本人对图标的理解，大致划分为三类：线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。

线性图标

使用轻量的线条勾勒的图标，整体感受也趋向于精致、细致而具有锐度感。不同的线条表现具有不同的视觉感受，细线轻量、直线硬朗、曲线柔美。

1. 线型图标基础分析及想法

粗细对比

粗细不同，图标的力度和重量感就会有差异。粗线的图标，视觉关注力来说会更加突出，但较于细线的图标也会显得粗壮、厚重。细线的图标，精致、透气、秀美。

但在设计时需要依据「整体的 UI 风格」来决定线的粗细，而并非单纯的考虑图标的关注度，反而更需要考虑图标与界面整体的平衡感。

柔度对比

直角与圆角决定了外形的感知和风格的走向，如下图对比中看出，圆角越大图形越趋向于可爱柔美（如下右图），圆角越小则越直接、硬朗和阳刚（如下左图）。因此刚或柔或中间值完全取决于早期对于整体风格的定调。

繁简对比

除了轻量化和简洁之外，图标的识别性也是极为重要。如下左图，「过度简洁」导致图标失去该有的识别度而出现歧义，而下右图的元素叠加使得图标稍显复杂。在繁与简的平衡中，应该保持在不影响图标识别度的情况下，最大限度的提升图标的简洁程度。

特征的识别度

除了简洁程度，也需要考虑图标该有的特征。例如下图「评论」图标的案例，当我把图标中的「三个点」去掉时，图标依旧具有「对话/评论」的表意，而当我把下面的「箭头」去掉保留「三个点」时，则会出现歧义，它可以被表意为「更多」的意思，因此在设计图标时需要对于表意做精准把握，避免歧义出现。

保持图标的特征美感

如下面的「心形」图标，下左图是我们具有普识性的图标，与圆形组合之后依然保持着原有的形态美感。但我们不时也会看到第三种设计，整体外形虽然保持着爱心，但为了与整体风格「一致」强行对外轮廓进行切割，与原图形在美感上则稍微有些出入，这也是我们需要思考的关键点。

组合型比例

组合型的比例会影响到图标的精致程度，准确的「比例值」能让整体的造型趋向平衡，更具有美感。如下图案例尝试了两组不同比例的效果，这里以图标窄边作为「基准值」进行尝试。当内形为外形的 1 : 2 时（下图2），图标的整体视觉效果较为平衡；当大于 1 : 2 并接近 4 : 3 时，图标内部结构会显得过于饱满。而小于 1 : 2 并接近 4 : 1 时（下图3）则会产生稀疏不紧凑的效果。（这里的比例只是案例需要，实际设计以最终的视觉感知为准）

2. 线性类型拓展

基础的理论，结合延展的应用，可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。通过以下案例，可以看看线型图标设计类型的多样性。

极简风格

整体风格极为简约，没有多余的线条，通过线条还原图形的本质，外形「简单」却具有很强的识别性，在视觉感知上轻松、干净。

极简的风格图标在于对图形的把控，多一笔可能显得复杂，少一笔可能影响识别程度。以上图为例，图标的组合元素保持在 2 个左右，整体较为干净。

实际应用：Instagram、Airbnb、Facebook、Twitter

双色

相较于「纯色的图标」更具表现力，细节上也会更加丰富，形态感知上多了一层变化。结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。

同色系：同为冷色系、暖色系或同一色系的表达形式。如下图案例，以暗色为主色，亮色点缀提亮，使得图标具有一种高光提亮的感觉。

另一组案例是亮色主色结合暗色，整体图标效果还算可以，但较亮的颜色没有应用在图标的关键特征上，使得图标第一眼的感知稍有减弱。

对比互补色：颜色跨度更大，层次更加分明。如下图案例，红色与蓝色的撞色之后相比单色的图标更加出彩和具有记忆点。

实际案例：腾讯动漫我的页面

透明度变化

本质上与上面一种为一个类型的设计，通过透明度的叠加和变化，提升图标的层次感和空间感，降低图标的压迫性。

实际案例：爱奇艺9宫格图标

渐变层次叠加

渐变带出了图标的质感，结合「不同深度」或「不同饱和度」的变化，让图标更具有细节和层次。

黑白+品牌色

黑白色作为主色调，结合品牌色作为点缀色。与常规的黑白图标相比，既产生了变化，同时兼顾了品牌色的透出。

实际案例：大众点评攻略页面图标

线性渐变

结合渐变的颜色，丰富了整个图标的视觉表达，并提升了图标的视觉冲击力和设计感。案例结合黑白背景作为尝试，白底：粗线比细线的视觉效果相对较好，渐变也能较为清晰地被表达；黑底：细线比粗线的视觉效果显示得更加精致和具有锐度感。

实际案例：网易考拉、NAVER

一笔成形

此类图标在视觉表达上具有较高的线性流畅度和设计感，关注点在于整组图标的「开口起始点」设定上需保持一致。例如，「从左到右」或「从右到左」形成一体化的连贯线条，开口起始点不一致会影响整组图标的一致性，应用在页面时也会显得杂乱。

断点图标

与上一种较为类似，但没有连贯度的要求。在线形图标基础上面，寻找一个缺口来打破「全包边图标」的沉闷感，使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小，另外需要控制开口个数避免过多导致图标外形过于零碎。

实际案例：腾讯体育、京东

面性图标

面性图标比线性图标更能表达出图标的力量感和重量感，比线性图标会更加容易吸引用户目光。在识别度上，面性图标更加依赖于外轮廓的清晰度，因此在设计时对于外形的打磨是重中之重，清晰的外轮廓可以帮助提高识别度。

1. 面型图标基础分析及想法

轮廓对比

轮廓的差异会体现出不同的气质，如下图的左边和右边的区别，一个气质较为直接硬朗，另一个则较为柔美可爱。流畅的外形可以让面形图标的整体更加简洁、规整，如下图中间的图标在轮廓的处理上则显得比较碎，整体外轮廓造型的连贯度有所欠缺。

镂空对比

适当的镂空除了补充了图形的识别度之外，还提升了面性图标的设计细节。另外需要控制好镂空部分与整体的外形比例，过小或过大都可能影响图标的平衡感。如下图的中间和右边，镂空过小对图标的辨识度并没有多大作用，没有镂空则少了一些透气感。

形体对比

形态上的差异也会具有不一样的视觉感知。以「星」和「心」为案例，单独形体与组合之后的形体相比视觉感知更直观些，而组合形的图标相对会精致一些，多了一些层次。在日常设计中的经验是：越小的图标形体应该越简单，因此建议单体出现较好；若图标的尺寸足够大时可采用组合型的设计，补充图标的细节。

繁简对比

设计面性图标时，对于多余细节的管理也很重要。随着细节的增加，块面切割过多，会使得整体图标变得过于零碎（如下右图）。保持简约的设计提高图标的识别度，在关键的特征细节上做补充（如下中间图的相机闪光灯）。

2. 面性图标类型拓展

面性图标在设计时也可以结合各种不同的表达方式，来提升图标的质感和创意，而非只是简单的填充颜色。

单色面+点缀色

整体的外形使用统一的颜色，结合图标的属性感知使用不同的颜色进行点缀，通过点缀色提亮了图标的视觉效果，达到既统一又具有差异化。

多彩双色

通过对比色、邻近色的搭配来营造整体的图标氛围，提升了图标的层次和丰富度，双色的表达也增添了图形的趣味性。在日常使用的 APP 中极为常见，简单且容易出效果。

微质感渐变

微弱的渐变提升了图标的质感。渐变的方向会影响整体图标的视觉效果，因此可以根据不同设计的需要进行调整。如下图案例：

实际案例：全民K歌

透明度/灰度变化

透明度/灰度的变化，让原来单色的图标变得更加具有层次感和空间感，设计细节更加丰富，降低了单色面性图标的厚重感。

实际案例：企鹅FM我的页面

透明度变化+渐变

渐变的设计提升了面性图标的质感，从颜色上具有一定的丰富度。在渐变的基础上对组合型做透明度差异化，使得图标具有了层次感。

透明叠加的图标+渐变的背景

此类图标常常被应用在 UI 界面中的列表或者顶部入口的位置。

实际案例：全民K歌点歌页面

颜色叠加穿透

图标透明叠加之后产生了交错的负形，叠加出第三个面。虽然整体设计依然保持着扁平化，但却多了一份层次感，并且增加了图标的细节。

实际案例：百度网盘

渐变层次叠加

整体的效果与透明度变化的图标较为接近，通过渐变的深浅变化，使得形状的衔接处出现了明暗对比，因此图标也具有了厚度感和层次感。

实际案例：NAVER、掌上生活

高斯模糊

此类图标基本没有在 APP 中看到，与「透明度变化」或「颜色叠加」相比都更具层次感和空间感，同时图标也具有较强的设计感。

线面结合

结合了线性和面性的优点，既保持了面性的重量感，同时具有线性的精致、细腻。因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控，不同比例可以呈现出不同的视觉感知。

1. 线面结合图标的基础分析及想法

线面比例

线面比例的差异，图形呈现出来的张力也会有不同的感受。基于中间填充的图标形态尝试了三种不同的比例，从下图中可以看出，当填充与外形窄边比为 1 : 3 时（左图）图标呈现往内收的感觉；填充与外形窄边比为 1 : 2 时（中间）图标整体较为平衡；当填充与外形窄边比为 2 : 3（大于1:2）时（右图）整体具有外扩趋势。

组合形式

线面可以通过不同的组合形式进行绘制。基于不同的组合形态可以设计出多种多样的线面图标，不同的组合形式会体现出不同的设计风格，因此在设计时尽量多发散思考，寻找出适合你的组合方式。

繁简对比

线面结合本身就由两种形式组合，因此在设计的时候更需要对整体造型进行把控，单体（线和面）造型必须保持较高的简洁程度，这样最终组合形成的图标才不会过于复杂（左图），若本身形态过于复杂，则会降低图标的辨识度和视觉美观度。

2. 线面结合图标类型拓展

线面结合的图标集合了线性和面性的优点，在设计方式上也继承了两者的优点。设计方式也是基于以上两种的结合，因此可以结合出更多设计的可能性。

黑白线+面性品牌色

与「线性+品牌色」的做法较为接近，统一的线性颜色叠加品牌色的透出。

实际案例：好好住、soul

线面双色

基于线面的基础上，在线和面的颜色上做差异。具体做法与线性或面性的双色接近。

线面结合-阴阳

线和面的结合按 50% 的比例进行设计，依据上下、左右、居中等基础方式的结构化设计，整体图标的视觉效果较为跳跃，非常规。

线面双色+错位

在双色图标的基础上，线和面按照统一的「百分比」进行缩放，并进行透视和位移的设计，整体呈现出来的是一种交错叠加的视觉效果，相比普通的线面双色更加丰富。

实际案例：闲鱼底部tab、脸球底部tab

线面错位+渐变

基于上一种风格，对面或者线的颜色进行渐变设计，丰富了图标的质感和颜色更加细腻。

线面透明度变化

与「线面透明度变化」的设计方式大致一样。如下图案例，「弱线强面」的第一识别度较弱，而「弱面强线」的外形识别度较高，也更符合图标的表达。

实际案例：新浪微博、腾讯新闻

基于三种基础的类型表达，可以拓展出多种多样的设计形式。除了以上的案例之外，还收集了一些其他的设计。

线面结合 - 插画

整体比较偏向插图的感觉，细节和元素较多，常见于一些 APP 的空白页设计。

线面结合 - 卡通插画

整体感觉比较可爱、卡通、二次元，常见于一些二次元或漫画类的 APP。

面性 - 渐变强质感

整体风格的光影质感会比较强烈，常在一些活动运营或小游戏的界面出现。

面性 - 扁平写实

整体感觉比较扁平，细节的丰富度与现实感知接近。

线面+渐变插画

整体风格比较偏向绚丽多彩的颜色风格，质感和细节较为丰富。

写实风格

3D质感图标

由于 C4D 的制作成本相对较高，目前较少在常规的 APP 中看到。但 3D 作为一个主流的设计趋势，在时间和能力允许的情况下需要多做这方面的尝试。

等距的线面结合

等距的设计，让原本线面的图标丰富了层次，并具有立体透视的感觉。

除了以上这些之外，我们在实际场景中也会发现一些较为特别的图标设计。

Facebook 更多页面的列表图标

整体风格偏向插画风+渐变质感。由于更多的页面为纯列表的设计，因此整个页面在图标的设计上做了很大胆的尝试，与常规的单色图标相比更具有吸引力。为了区别不同的业务，系统性质的功能图标做了色调的区分。

APP Store 游戏和新APP界面下的类别列表图标

整体为具象化扁平风格的设计表达，图标的颜色还原了最基本的现实感知。

iOS 系统办公类软件的起始页面图标

整体风格比较偏商务简约，具象的图形表达+轻微的渐变质感。

QQ手机版中延展的功能图标

整体风格偏向轻写实+微弱渐变。每个图标都具有丰富的细节表达，色调方面基于业务属性结合品牌色进行了区分，整体既统一又具有差异化。

大众点评顶部入口的图标

整体风格偏向写实+强渐变+炫光感，每个图标都具有丰富的细节表达。

旅法师营地

游戏、二次元类的 APP，因此在图标的设计上也偏向细节较为丰富的插画风格。

哔哩哔哩动漫

图标风格偏向卡通插画，选中态与默认态的设计较为巧妙。

总结

本文的重点在于透过这些设计类型或者技法的了解，帮助我们在日常设计中提升输出效率。图标虽然作为 UI 设计的基础，却有很深的学问，精致的图标更是可以起到点睛的作用，提升界面的质感和氛围。

图标的种类远远不止本文所提到的这些内容，但是万变不离其宗，都是「线性、面性、线面结合」再结合「透明度、渐变、颜色叠加、质感、多维空间」等等的表达方式而设计出来的。

我们除了需要掌握这些内容之外，还需要提升图标设计的造型能力，更需要日积月累的练习和思考，从量到质的变化。

欢迎关注作者的微信公众号：「IDfor」

文章 25

人气 107.7w

腾讯高级设计师

+关注作者

收藏 1558 点赞 87

复制本文链接

文章为作者独立观点不代表优设网立场，未经允许不得转载。

继续阅读本文相关话题

图标理论图标设计图标风格

全部AIGCUI网页平面手绘电商交互产品下载神器职场学AIAI导航

107.7w人气

25文章

+关注

查看主页

1 爆肝整理！大厂设计师都在用的品牌设计指南2 爆肝整理！10个章节掌握大厂都在用的色彩设计指南

本文3套知识9图

1/243D 图标设计！24 组 Midjourney 礼物图标案例大赏！ 3D图标1/9AIGC 实战应用！8 组设计感十足直播图标（附提示词） AIGC1/7即拿即用！Midjourney 生成 3D 图标关键词灵感！ 3D图标

文章目录

你即将学会交互细节的知识这10个设计细节我不说你肯定不知道，但是看完你肯定会点赞！2.9w 人阅读上一篇你即将学会头像设置的知识研究数十个热门 APP后，我来教你如何做好「设置头像」功能2.5w 人阅读下一篇

发评论！每天赢奖品

点击登录后，在评论区留言，系统会随机派送奖品

2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助联系我们

本期奖品

优设私房课无门槛优惠券

已累计诞生 492 位幸运星

查看获奖名单

发表评论

已发布31条

以上留言仅代表用户个人观点，不代表优设立场

评论就这些咯，让大家也知道你的独特见解

立即评论

阅读相关文章

程远

2018/11/26阅读 7.0w

图标设计

万字干货！设计师必须学会的图标技巧

编者按：本文高达一万字，从图标的起源、定义到基础的设计方法总结无一不包，还有大量的案例帮你理解布尔运算，是新人设计师学习图标设计的必备干货！一、图标的定义一说到图标，我想您一...

图标设计填充图标 37分钟阅读

酸梅干超人

2019/03/07阅读 11.1w

图标设计

从零开始画图标系列：超全面的基础知识

在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。网上现存不少...

UI 设计图标设计 14分钟阅读

程远

2017/02/27阅读 9.7w

用品牌基因法做图标设计，这是高级UI设计师才会的手法！

编者按：给界面做图标，如何做才能有理有据呢？今天这篇好文的作者总结了工作中的一些经验，帮你制作出有说服力的图标。欢迎关注作者的微信公众号：「菜心设计铺」在看这篇文章之前你需要...

ICON品牌基因法 7分钟阅读

程远

2018/06/06阅读 3.4w

图标设计

腾讯设计师总结的图标设计五维自检法

@菜心设计铺：最近在做图标的优化调整，虽然改动不大，但在复盘的时候还是总结出很多心得，在这里和大家分享一下。图标是界面设计中最重要的元素之一，也是我们 UI设计师必备的技能...

ICON品牌 8分钟阅读

陈子木

2018/09/26阅读 7.4w

图标设计

最出彩的APP图标，都会经历这样9个关键设计步骤

对于移动端APP 而言，图标始终还是最重要的「门面」，它直接关联着产品的品牌价值，图标是否具备良好的可用性，将会直接影响到品牌和产品本身。图标设计的讲究很多，而 APP 图标...

App图标ICON 9分钟阅读

优设推荐官精选热门话题logo设计文章 271设计圈干货文章 188网页设计文章 986用户体验文章 953

学AIAI导航

取消

最新趋势入站必看设计入门进阶提升热门资源Midjourney会上瘾的AI绘画工具AI智能绘画让AI助你一臂之力300个AI工具实用AI智能神器大全Blender称心如意的3D设计法宝Figma令设计师爱不释手HMI设计指南车载设计教科书直播间设计生意都在直播间啦Stable Diffusion最强开源AI绘画工具优设热榜每日必读的行业消息教你做字库每个公司都可有字库设计服务一站式数字创意服务平台求职面试为你用心整理的技巧B端设计开始探索B端设计3D设计技巧与工具全揭秘520个必看设计网站精选全球设计站点9图！入站必刷优设重磅设计知识频道AI自学网专业全面的AI平台热门产品揭秘60秒学1个热门产品亮点免费图库高质量的免费可商用图片私单报价谢绝帮个忙优设年度榜单全年好内容一网打尽每日一问你的问题这里有答案自学就上优优网优设旗下自学网站优设主编人气好文设计风向标设计师书单2023年设计书籍推荐最新免费字体最值得收藏的频道活动大赛这个奖杯等你来拿推荐！设计专题相见恨晚的宝藏专题设计软件自学免费自学就上优优网200篇自学文章设计自学有关的一切经验设计师禁忌不可抄袭！注重版权平面设计入门指南和经验技巧配色技巧看完这里成高手Behance学设计离不开的网站设计神器推荐！超人气分类作品集包装请重视你的敲门砖IP设计人人都想做IP设计方法论开始加速成长吧设计心理学助你做更好的设计灵感及审美提升让创意如万斛泉源设计模型你离总监又近了一步掌握设计流程重要的事情说3遍设计规范条条框框的大学问改版设计实战案例和方法大揭秘设计趋势不落窠臼之法设计评审教你应对设计评审述职报告工作总结是一门学问设计思维成长从转变思维开始职业晋升方法加薪晋级看这里AI绘画课优设爆款课程零基础3D角色建模完整建模全流程Blender 3D建模课快速掌握3D建模优设课堂火什么看这里AIGC创意视觉班优设顶尖名师亲授UI设计实战班全能UI必修设计课程3D高阶提升大师班涨薪必备技能AIGC干货AI的热门资源都在这优设标题黑全网下载高达590W次配色神器不用为配色发愁9G素材大礼包优优教程网倾情整理配色导航人气很高的配色导航175款国潮插画笔刷PS与iPad都能使用作品集封面帮你掌握作品集封面设计免费字体导航全是可商用的字体设计师下载频道今年这里会好好运营样机素材高品质样机素材Similarsites大名鼎鼎的找相似网站短视频短视频资源神器设计插件设计师必备法宝年度AIGC工具推荐超级创作者觉醒继续阅读

万字干货！设计师必须学会的图标技巧

Just a moment...

a moment...Enable JavaScript and cookies to conti

史上最全的图标类型和设计风格总结 - 25学堂

全部

ui设计模板

app设计模板

App ui kit

网页设计模板

website templates

后台管理模板

Admin and dashboard templates

线框图

Wireframes

特效工具

PS动作

Phootoshop Actions

图层样式

Layer Styles

LR预设

Lightroom Presets

设计插件

Design addons

平面模板

图标

背景图

平面图形

插画

样机

字体

笔刷

3d模型

PPT模板

视频模板

源码模板

材质贴图

Materials & textures

wordpress模板

wordpress

视频教程

courses

免费素材

在线简历

设计素材

设计文章

设计素材

首页

设计素材

设计文章

素材专题

在线简历

网页设计模板

图标

插画

平面图形

样机模型

后台管理模板

ppt模板

ps动作

视频模板

字体

笔刷

加入VIP会员

UI界面设计

史上最全的图标类型和设计风格总结

七*

2019-06-20

53421

图标是 UI 设计中极为重要的一个环节，我们在做每个界面的设计几乎都会涉及到图标的表达，出色的图标设计可以让界面表达更加精致、有趣。图标的设计往往也体现着设计师的基本功，因此除了日常多画提升对图标造型的把控力外，我们也更需要了解和学习图标设计的趋势类型，从而帮助我们提高在设计中的效率。基于自我学习的目的，平时在浏览一些设计网站时也会做相对应的收集。因此本文主要对于图标设计的「类型、风格」进行了整理，以及自己对于每种图标类型的思考。图标的类型划分设计网站上的图标可以说是多种多样，不同类型的图标都有着独特的魅力。例如，线性图标简洁轻量、面性图标厚重直接，当然同一种类型的图标也具有很多不同的表现形式。因此基于本人对图标的理解，大致划分为三类：线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。线性图标使用轻量的线条勾勒的图标，整体感受也趋向于精致、细致而具有锐度感。不同的线条表现具有不同的视觉感受，细线轻量、直线硬朗、曲线柔美。 1. 线型图标基础分析及想法粗细对比粗细不同，图标的力度和重量感就会有差异。粗线的图标，视觉关注力来说会更加突出，但较于细线的图标也会显得粗壮、厚重。细线的图标，精致、透气、秀美。但在设计时需要依据「整体的 UI 风格」来决定线的粗细，而并非单纯的考虑图标的关注度，反而更需要考虑图标与界面整体的平衡感。柔度对比直角与圆角决定了外形的感知和风格的走向，如下图对比中看出，圆角越大图形越趋向于可爱柔美（如下右图），圆角越小则越直接、硬朗和阳刚（如下左图）。因此刚或柔或中间值完全取决于早期对于整体风格的定调。繁简对比除了轻量化和简洁之外，图标的识别性也是极为重要。如下左图，「过度简洁」导致图标失去该有的识别度而出现歧义，而下右图的元素叠加使得图标稍显复杂。在繁与简的平衡中，应该保持在不影响图标识别度的情况下，最大限度的提升图标的简洁程度。特征的识别度除了简洁程度，也需要考虑图标该有的特征。例如下图「评论」图标的案例，当我把图标中的「三个点」去掉时，图标依旧具有「对话/评论」的表意，而当我把下面的「箭头」去掉保留「三个点」时，则会出现歧义，它可以被表意为「更多」的意思，因此在设计图标时需要对于表意做精准把握，避免歧义出现。保持图标的特征美感如下面的「心形」图标，下左图是我们具有普识性的图标，与圆形组合之后依然保持着原有的形态美感。但我们不时也会看到第三种设计，整体外形虽然保持着爱心，但为了与整体风格「一致」强行对外轮廓进行切割，与原图形在美感上则稍微有些出入，这也是我们需要思考的关键点。组合型比例组合型的比例会影响到图标的精致程度，准确的「比例值」能让整体的造型趋向平衡，更具有美感。如下图案例尝试了两组不同比例的效果，这里以图标窄边作为「基准值」进行尝试。当内形为外形的 1 : 2 时（下图2），图标的整体视觉效果较为平衡；当大于 1 : 2 并接近 4 : 3 时，图标内部结构会显得过于饱满。而小于 1 : 2 并接近 4 : 1 时（下图3）则会产生稀疏不紧凑的效果。（这里的比例只是案例需要，实际设计以最终的视觉感知为准） 2. 线性类型拓展基础的理论，结合延展的应用，可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。通过以下案例，可以看看线型图标设计类型的多样性。极简风格整体风格极为简约，没有多余的线条，通过线条还原图形的本质，外形「简单」却具有很强的识别性，在视觉感知上轻松、干净。极简的风格图标在于对图形的把控，多一笔可能显得复杂，少一笔可能影响识别程度。以上图为例，图标的组合元素保持在 2 个左右，整体较为干净。实际应用：Instagram、Airbnb、Facebook、Twitter 双色相较于「纯色的图标」更具表现力，细节上也会更加丰富，形态感知上多了一层变化。结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。同色系：同为冷色系、暖色系或同一色系的表达形式。如下图案例，以暗色为主色，亮色点缀提亮，使得图标具有一种高光提亮的感觉。另一组案例是亮色主色结合暗色，整体图标效果还算可以，但较亮的颜色没有应用在图标的关键特征上，使得图标第一眼的感知稍有减弱。对比互补色：颜色跨度更大，层次更加分明。如下图案例，红色与蓝色的撞色之后相比单色的图标更加出彩和具有记忆点。实际案例：腾讯动漫我的页面透明度变化本质上与上面一种为一个类型的设计，通过透明度的叠加和变化，提升图标的层次感和空间感，降低图标的压迫性。实际案例：爱奇艺9宫格图标渐变层次叠加渐变带出了图标的质感，结合「不同深度」或「不同饱和度」的变化，让图标更具有细节和层次。黑白+品牌色黑白色作为主色调，结合品牌色作为点缀色。与常规的黑白图标相比，既产生了变化，同时兼顾了品牌色的透出。实际案例：大众点评攻略页面图标线性渐变结合渐变的颜色，丰富了整个图标的视觉表达，并提升了图标的视觉冲击力和设计感。案例结合黑白背景作为尝试，白底：粗线比细线的视觉效果相对较好，渐变也能较为清晰地被表达；黑底：细线比粗线的视觉效果显示得更加精致和具有锐度感。实际案例：网易考拉、NAVER 一笔成形此类图标在视觉表达上具有较高的线性流畅度和设计感，关注点在于整组图标的「开口起始点」设定上需保持一致。例如，「从左到右」或「从右到左」形成一体化的连贯线条，开口起始点不一致会影响整组图标的一致性，应用在页面时也会显得杂乱。断点图标与上一种较为类似，但没有连贯度的要求。在线形图标基础上面，寻找一个缺口来打破「全包边图标」的沉闷感，使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小，另外需要控制开口个数避免过多导致图标外形过于零碎。实际案例：腾讯体育、京东面性图标面性图标比线性图标更能表达出图标的力量感和重量感，比线性图标会更加容易吸引用户目光。在识别度上，面性图标更加依赖于外轮廓的清晰度，因此在设计时对于外形的打磨是重中之重，清晰的外轮廓可以帮助提高识别度。 1. 面型图标基础分析及想法轮廓对比轮廓的差异会体现出不同的气质，如下图的左边和右边的区别，一个气质较为直接硬朗，另一个则较为柔美可爱。流畅的外形可以让面形图标的整体更加简洁、规整，如下图中间的图标在轮廓的处理上则显得比较碎，整体外轮廓造型的连贯度有所欠缺。镂空对比适当的镂空除了补充了图形的识别度之外，还提升了面性图标的设计细节。另外需要控制好镂空部分与整体的外形比例，过小或过大都可能影响图标的平衡感。如下图的中间和右边，镂空过小对图标的辨识度并没有多大作用，没有镂空则少了一些透气感。形体对比形态上的差异也会具有不一样的视觉感知。以「星」和「心」为案例，单独形体与组合之后的形体相比视觉感知更直观些，而组合形的图标相对会精致一些，多了一些层次。在日常设计中的经验是：越小的图标形体应该越简单，因此建议单体出现较好；若图标的尺寸足够大时可采用组合型的设计，补充图标的细节。繁简对比设计面性图标时，对于多余细节的管理也很重要。随着细节的增加，块面切割过多，会使得整体图标变得过于零碎（如下右图）。保持简约的设计提高图标的识别度，在关键的特征细节上做补充（如下中间图的相机闪光灯）。 2. 面性图标类型拓展面性图标在设计时也可以结合各种不同的表达方式，来提升图标的质感和创意，而非只是简单的填充颜色。单色面+点缀色整体的外形使用统一的颜色，结合图标的属性感知使用不同的颜色进行点缀，通过点缀色提亮了图标的视觉效果，达到既统一又具有差异化。多彩双色通过对比色、邻近色的搭配来营造整体的图标氛围，提升了图标的层次和丰富度，双色的表达也增添了图形的趣味性。在日常使用的 APP 中极为常见，简单且容易出效果。微质感渐变微弱的渐变提升了图标的质感。渐变的方向会影响整体图标的视觉效果，因此可以根据不同设计的需要进行调整。如下图案例：实际案例：全民K歌透明度/灰度变化透明度/灰度的变化，让原来单色的图标变得更加具有层次感和空间感，设计细节更加丰富，降低了单色面性图标的厚重感。实际案例：企鹅FM我的页面透明度变化+渐变渐变的设计提升了面性图标的质感，从颜色上具有一定的丰富度。在渐变的基础上对组合型做透明度差异化，使得图标具有了层次感。透明叠加的图标+渐变的背景此类图标常常被应用在 UI 界面中的列表或者顶部入口的位置。实际案例：全民K歌点歌页面颜色叠加穿透图标透明叠加之后产生了交错的负形，叠加出第三个面。虽然整体设计依然保持着扁平化，但却多了一份层次感，并且增加了图标的细节。实际案例：百度网盘渐变层次叠加整体的效果与透明度变化的图标较为接近，通过渐变的深浅变化，使得形状的衔接处出现了明暗对比，因此图标也具有了厚度感和层次感。实际案例：NAVER、掌上生活高斯模糊此类图标基本没有在 APP 中看到，与「透明度变化」或「颜色叠加」相比都更具层次感和空间感，同时图标也具有较强的设计感。线面结合结合了线性和面性的优点，既保持了面性的重量感，同时具有线性的精致、细腻。因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控，不同比例可以呈现出不同的视觉感知。 1. 线面结合图标的基础分析及想法线面比例线面比例的差异，图形呈现出来的张力也会有不同的感受。基于中间填充的图标形态尝试了三种不同的比例，从下图中可以看出，当填充与外形窄边比为 1 : 3 时（左图）图标呈现往内收的感觉；填充与外形窄边比为 1 : 2 时（中间）图标整体较为平衡；当填充与外形窄边比为 2 : 3（大于1:2）时（右图）整体具有外扩趋势。组合形式线面可以通过不同的组合形式进行绘制。基于不同的组合形态可以设计出多种多样的线面图标，不同的组合形式会体现出不同的设计风格，因此在设计时尽量多发散思考，寻找出适合你的组合方式。繁简对比线面结合本身就由两种形式组合，因此在设计的时候更需要对整体造型进行把控，单体（线和面）造型必须保持较高的简洁程度，这样最终组合形成的图标才不会过于复杂（左图），若本身形态过于复杂，则会降低图标的辨识度和视觉美观度。 2. 线面结合图标类型拓展线面结合的图标集合了线性和面性的优点，在设计方式上也继承了两者的优点。设计方式也是基于以上两种的结合，因此可以结合出更多设计的可能性。黑白线+面性品牌色与「线性+品牌色」的做法较为接近，统一的线性颜色叠加品牌色的透出。实际案例：好好住、soul 线面双色基于线面的基础上，在线和面的颜色上做差异。具体做法与线性或面性的双色接近。线面结合-阴阳线和面的结合按 50% 的比例进行设计，依据上下、左右、居中等基础方式的结构化设计，整体图标的视觉效果较为跳跃，非常规。线面双色+错位在双色图标的基础上，线和面按照统一的「百分比」进行缩放，并进行透视和位移的设计，整体呈现出来的是一种交错叠加的视觉效果，相比普通的线面双色更加丰富。实际案例：闲鱼底部tab、脸球底部tab 线面错位+渐变基于上一种风格，对面或者线的颜色进行渐变设计，丰富了图标的质感和颜色更加细腻。线面透明度变化与「线面透明度变化」的设计方式大致一样。如下图案例，「弱线强面」的第一识别度较弱，而「弱面强线」的外形识别度较高，也更符合图标的表达。实际案例：新浪微博、腾讯新闻基于三种基础的类型表达，可以拓展出多种多样的设计形式。除了以上的案例之外，还收集了一些其他的设计。线面结合 – 插画整体比较偏向插图的感觉，细节和元素较多，常见于一些 APP 的空白页设计。线面结合 – 卡通插画整体感觉比较可爱、卡通、二次元，常见于一些二次元或漫画类的 APP。面性 – 渐变强质感整体风格的光影质感会比较强烈，常在一些活动运营或小游戏的界面出现。面性 – 扁平写实整体感觉比较扁平，细节的丰富度与现实感知接近。线面+渐变插画整体风格比较偏向绚丽多彩的颜色风格，质感和细节较为丰富。写实风格 3D质感图标由于 C4D 的制作成本相对较高，目前较少在常规的 APP 中看到。但 3D 作为一个主流的设计趋势，在时间和能力允许的情况下需要多做这方面的尝试。等距的线面结合等距的设计，让原本线面的图标丰富了层次，并具有立体透视的感觉。除了以上这些之外，我们在实际场景中也会发现一些较为特别的图标设计。 Facebook 更多页面的列表图标整体风格偏向插画风+渐变质感。由于更多的页面为纯列表的设计，因此整个页面在图标的设计上做了很大胆的尝试，与常规的单色图标相比更具有吸引力。为了区别不同的业务，系统性质的功能图标做了色调的区分。 APP Store 游戏和新APP界面下的类别列表图标整体为具象化扁平风格的设计表达，图标的颜色还原了最基本的现实感知。 iOS 系统办公类软件的起始页面图标整体风格比较偏商务简约，具象的图形表达+轻微的渐变质感。 QQ手机版中延展的功能图标整体风格偏向轻写实+微弱渐变。每个图标都具有丰富的细节表达，色调方面基于业务属性结合品牌色进行了区分，整体既统一又具有差异化。大众点评顶部入口的图标整体风格偏向写实+强渐变+炫光感，每个图标都具有丰富的细节表达。旅法师营地游戏、二次元类的 APP，因此在图标的设计上也偏向细节较为丰富的插画风格。哔哩哔哩动漫图标风格偏向卡通插画，选中态与默认态的设计较为巧妙。总结本文的重点在于透过这些设计类型或者技法的了解，帮助我们在日常设计中提升输出效率。图标虽然作为 UI 设计的基础，却有很深的学问，精致的图标更是可以起到点睛的作用，提升界面的质感和氛围。图标的种类远远不止本文所提到的这些内容，但是万变不离其宗，都是「线性、面性、线面结合」再结合「透明度、渐变、颜色叠加、质感、多维空间」等等的表达方式而设计出来的。我们除了需要掌握这些内容之外，还需要提升图标设计的造型能力，更需要日积月累的练习和思考，从量到质的变化。原文作者：IDfor

图标设计

线性图标

面性图标

图标分类

UI界面设计

设计风格讲解之——酸性美学设计风格

UI界面设计

2021新发布iPhone 13 mini, iPhone 13, iPhone 13 Pro, iPhone 13 Pro Max尺寸规格对比

UI界面设计

Dribbble顶尖的图标设计大神的作品分享

每天更新，全站高品质素材免费下载！

申请VIP会员

模板

App设计模板

网页设计模板

后台管理模板

线框图模板

视频模板

PPT/keynote模板

杂志画册模板

海报模板

平面模板

精选app模板

平面素材

图标

插画

平面图形

背景图

字体

mockups样机

UI 样机

包装样机

服装样机

动画样机

插件

PS动作

LR预设

图层样式

笔刷

Procreate笔刷

设计插件

前端资源

Wordpress模板

3d模型

视频教程

设计文章

交互

网页

平面

工具

灵感

教程

其它

设计规范

设计尺寸规范

屏幕尺寸规范

iOS 12 GUI设计规范

iOS 13 GUI设计规范

设计尺寸规范大全

Android界面设计规范

联系我们

关于我们

友情链接

设计导航

APP模板精选

APP包装展示素材

iPhone手机模型素材

procreate笔刷下载

keynote模板下载

UI设计交流群：165107258

官网客服QQ： 420273343

微信号: lingganqiang (灵感墙)

公众号：25学堂

闽公网安备35021102001811号 · 闽ICP备20009973号-2

设计师必看的图标（icon）设计指南 - 知乎

设计师必看的图标（icon）设计指南 - 知乎切换模式写文章登录/注册设计师必看的图标（icon）设计指南扬扬图标设计是UI设计中非常重要的环节，因为除了文字和图片的排版之外，在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标。图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。本文尽量将图标进行系统一些的介绍说明，当然仅一篇文章是不可能面面俱到包含所有知识点。内容比较基础，主要以设计概念和设计思路为主，对图标相关的内容进行组织梳理和分类，便于小伙伴们建立图标的概念体系。过程中也有针对几种典型的图标结构进行实操代练，想要把图标设计的更好，这就需要我们在平时勤加练习外，还要进行深度的思考，希望我的这篇梳理可以给大家带来帮助。1.1 图标的定义图标，也称为icon或Picoto，是计算机世界对现实世界的隐喻和概括，代表软件产品中的功能及操作。它的本质是一种符号，它采用对这个世界的隐喻，来指代功能，含义，用途等。图标做为国际通用性语言，生活中随处可见，例如商场导视中收银台图标、出口图标、卫生间图标等，日常手机里使用的那些App图标，如微信、电话、短信等。的确，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富，有线的、有面的、还有拟物的等。如果粗浅划分的话，UI设计中常见的图标大致分为2大类，第一类我们称之为「标志性图标」，比如手机中应用启动图标；第二类我们称之为「功能性图标」，这类图标经常出现于 App 或网站中，用于功能性指示引导或操作。1.2 图标的重要性对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。在不少 UI 界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性。它有以下几点好处：全球通用：Windows,iOS, etc., 中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样；节约空间：如果在一个图标能够表述清楚含义的时候，比如用一个叉就可以不用写「关闭」；快速定位：图标可以用它独特的形状或者颜色让人快速定位到一个功能；上下文的定位：比如小飞机的图标单独放出来不确定是什么，但是在和收件箱在一起它就可以认为是发件箱了。1.3 发展历程如你所知，图标、标识都不是界面设计师所创造的概念，它的存在可以追溯到人类文明诞生之初，在漫长的历史长河当中，早期用来传达信息的图标演变为系统的文字，而在地图、图书、壁画和建筑等各种各样的地方，还存在着用来代表和传达特定概念的图标和标识。随着技术的发展，计算机诞生了，而显示器的出现，也为图形化界面的诞生，铺平了道路。20世纪70年代，施乐在位于帕罗奥托的研究所当中，诞生了最早的拥有图形化界面的电脑，著名的「 Xerox Alto」。这款昂贵的概念机最终并没有走进大众的视野，但是它的后续机型施乐之星在1981年问世，并且成为了计算机史上的重要里程碑，而Xerox Alto 对于乔布斯和比尔盖茨的启发，更是引发了计算机历史上最著名的一场战争：苹果VS微软，Windows 对抗 Macintosh。当然这都是后话。来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年，苹果借由Macintosh，首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大，全新的样式使得它在信息传达的功能性上有了明显的提升。从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦——拟物图标的质感、光影会分散用户的注意力，形成「视觉噪声」。于是UI设计师开始探索更新的表现形式来设计界面中的图标。如微软引领的Metro风格图标设计和Google引领的长投影风格的图标设计，但由于它们的表现形式太过于抽象，缺乏情感的传递，并没有获得用户的青睐。在此之后，越来越多的图标开始借由灵活而强大的数字技术而诞生，并且基于不同的需求而演化出不同的分支和风格。许多操作系统和工具开始预制一些成体系的图标，诞生基于种种需求，越来越多的自制的、重设计的图标，逐步进入了我们的视野。图标类型很多，我们可以用不同的方式来划分它们。图标的类型2.1 拟物图标由于人们都是通过以往的认知来理解新事物，所以基于这一点，早期应用界面必然要采用拟物风格，以便于人们的理解和操作。是一个由实物 → 符号的发展历程。例如「保存」图标就是将「软盘」符号化之后形成的图形，「软盘」是「保存」图标的实体。但随着时间的推移，人们逐渐将长期接触的符号本身作为一种新的实体，在大家的眼里，它不再是一个具象事物的抽象符号，而是直接当成一个实体来使用，甚至这个符号的实体已经淡出历史，但人们还在习惯性使用这个符号。更具体点来说，拟物设计就是追求模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等各种效果对实物进行再现（也可适当程度变形和夸张）；扁平化设计就是摒弃以上对效果（尤其是高光、阴影等能造成透视感的效果）的追求，转而通过抽象、简化、符号化的设计元素来表现。你还记得曾经熬夜画写实图标的日子嘛～上千个图层不在话下有木有！但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。再者，大家都熟悉的事物其实非常有限，而 APP 的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被取代。2.2 扁平图标区别于拟物化更加接近于真实的实物，扁平化则是简化真实的物体，进行平面化的表现。2013年，苹果推出了iOS7 开启了拟物向扁平转变的风潮。扁平化的概念最核心的地方就是：去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化的概念。扁平图标风格发展的后期，由于它们表现形式太过于抽象、缺乏情感的传递，也没有获得大众的青睐，这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。也许当满世界都是扁平化后，拟物化的设计却又变得更显眼了呢？最近流行的新拟物风格就是最好的证明。2.3 微扁平、轻拟物从扁平风格发展至现在，图标慢慢开始发展到微扁平轻拟物的方向，相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。2.4 线性图标线性图标是由直线、曲线、点在内等元素组合而成的图标样式，通过线来塑造轮廓。线性图标具有辨识度高，清晰，简约易识别等优点，线性图标不会对页面造成太多的视觉干扰。缺点是：线性图标的创作空间较少，太复杂的线性图标对识别性产生较大的困扰。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。直角线条的icon显得专业严谨，圆角粗线条的 ICON 显得饱满而可爱。2.5 面性图标面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。面形图标具有表意能力强，细节丰富，情绪感强，视觉突出，创作空间大等优点。面性图标可以让用户迅速定位图标位置，预知点击后的状态。但是面性图标在页面中不可过多出现，否则会造成页面臃肿，难分主次，用户视觉疲劳。2.5 文字图标文字图标是指用文字直接表示特定含义的图标符号。由于文字本身就是一种演化而来的符号，英文的首字母或者词语关键字本身也具备很强的信息浓缩性，因此在某些场景下，采用文字或字符作为图标，是一种很不错的表现手法。比如「提示」图标，使用一个圆圈包裹一个英文字母「i」，表示 information，表示「注释信息」的含义；比如停车场直接使用「Parking」中的首字母「P」，这些都是比较约定俗称的使用方式。还有一些场景，很难用象形或者表意的方式进行表达，那么就很适合使用文字符号，例如京东/天猫某些商品具备「正品保证」的标识，这个概念太抽象了，很难用象形去概括，创造新的表意符号又很难被大众接受，这时「正」字就很适合作为这个场景特定的图标符号，作为针对中国用户群体的产品图标，简单粗暴且有效。如果可能的话，尽量避免在图标中使用文字。因为图标应该是全球性的。如果你确实需要文字图标(例如货币符号等等)，那么请你自己绘制，而不是直接使用字体。2.6 " 新拟物 "风格图标苹果在 WWDC20 搞了个大新闻：macOS 将与 iOS 统一步调，从X86 平台迁移至ARM 平台，并从macOS 10迭代为macOS 11。这 20 年一遇的 Mac 大版本更新被称为Big Sur。macOS Big Sur是第一个将 " 新拟物 " 设计投入大规模商用的操作系统，这可视为 " 新拟物 "在实用化道路上的首次胜利。值得一提的是，在 Big Sur 的 " 外观 " 设置里，多了一项名为" 自适应强调色 "的选项。苹果将主题色的指定权留给开发者，这是否暗示新一代 App 在光影上会有更丰富的效果？" 新拟物 " 设计的精髓在于对光线的绝妙运用。它把光效拿捏在 " 扁平 " 与 " 拟物 " 之间，进而打造一种全新的视觉体验。不同于传统的拟物，" 新拟物 "虽然将符合物理规律的光影效果引入界面，但它所模拟的材质是自然界不存在的。换句话说，" 新拟物 " 是将真实光线用于虚拟对象，而 " 拟物 " 是还原实际物品在特定光照下的效果；由于整个设计界将不得不考虑新拟物风格，围绕该风格的可能性将会有爆炸性的发展，并且这种新的数字空间设计理念如何能够合理地适用于用户界面设计和功能性将取得更大的突破。与以往一样，第三方应用将比苹果更大胆、更快速地推动这一风格——这也是我们将会真正开始解锁新拟物优势的时候。产品应用图标有不同的风格，这些风格有可能偏拟物，也有可能很扁平，有可能很抽象，也可能很具象。通过不同的设计风格可以更加标新立异，从而被用户记住。因此能在第一时间赢得用户的好感和记忆非常重要，将产品图标设计的好看且容易被人记住就成了非常重要的任务。应用图标的风格主要有以下几种。3.1 中文文字图标中文是我们的母语，每一个汉字都令人记忆深刻，文字也是最直白的信息，而且不容易被曲解，所以很多国内的产品都会使用文字作为自己的产品图标。中文设计模式即字体设计，提取应用名称中的一个或多个汉字，进行设计变形，变形后的字体图形具有产品属性的外貌特征。常见中文图标又分为单字、多字和字加图形的几种类型。3.1.1 单字提取产品名称中最具代表性的文字，通过对笔画及整体骨架进行字体设计，以达到符合产品特性和视觉差异化的目的。其优点是可以直截了当的传递产品信息，识别性强。3.1.2 多字多字图标设计要注意的是整体的协调性和可读性，一般为2-3个字，最多两行（四个字）排列。其优点是更加直接的告诉用户产品名称，达到品牌推广的目的，减轻用户记忆成本。其缺点是如果图标上的文字和下面的辅助文字完全一样，会显得重复啰嗦，像介绍了两遍自己一样。3.1.3 字加图形组合文字加辅助图形的组合，也是常见的产品图标设计方法，相比纯文字图标，显得更加丰富有独特的产品的气质和属性。需要注意的是做好文字和辅助图形间的平衡。3.2 英文字母图标英文设计与中文设计的设计模式相似，通常是提取应用名称的首字母融合产品的功能卖点或行业属性进行创意加工，新的字母图形依旧保持本身的识别性。3.2.1 单字母通常提取英文首字母进行设计，由于英文字母本身结构简洁，稍加改动就很容易达到设计感于识别性兼备的产品图标。需要注意的是英文字母本来就少，都用字母很容易创意雷同，难以形成差异化。3.2.2 多字母提取产品全称或几个单词的首字母组合而成，形成独有的产品简称，方便用户记忆。3.2.3 字母加图形组合字母加图形组合的设计形式比较广泛，图形分为几何图形和通过提炼的图形。通过字母与图形进行创意加工，可以使应用图标视觉表现更加饱满。3.3 数字图标直接用数字做应用图标的相对较少，但是数字识别性强，易于传播的特点。利用数字进行设计能给人亲和力。难点是怎样与品牌形成强关联性。3.4 特殊符号图标由于符号本身的含义会对产品属性有一定限制，所以特殊符号在应用图标的设计案例中相对较少。如“$”符号可代表与金钱有关联性的产品，无法运用在与此属性无关的产品上。不过也正是由于自身属性强的特点，可以很好的诠释关联的产品属性。除了中英文图标，还有图形类图标比较常见。这种类型的设计模式的优点就是直观醒目和简洁大方，视觉冲击力强。常见的有以下几种：3.5 几何图形几何图形的设计模式给人简约、现代、个性等视觉感受，从单个具象图形到复杂的空间感营造，几何图形的表现形式非常丰富。不同的形状给人的情感表达不同，如三角形给人传达个性、稳定、现代、时尚等，添加圆角后又会更加亲民、可爱。我们可以结合产品特征，合理的选择适合的形状图形进行创意。此类型较考验设计师的图形创意能力。3.6 单双形/剪影单双形是指应用图标只展示单个或两个的剪影图形。通常有两种设计方式，在深色背板上使图形反白，背景可以是单色也可以是渐变色；在浅色的背板上让图形填充颜色，图形可以是单色也可以是渐变色。这种设计模式的优点是简洁明确，易于用户在众多的应用图标阵列中快速找到目标。3.7 线形线形的设计模式分为两种设计方式，在深色的背板上让图标反白，背景可以是单色也可以是渐变色；在浅色的背板上让图标填充颜色，图标可以是单色也可以是渐变色，或是其他视觉效果。纤细的线框图形传递出简洁轻快的气质，适合于文艺、清新的应用，在界面设计时保持这种干净明快的风格，才能与应用图标设计表里如一。线性风格一定注意不可太细，如果做得太细，在手机上看会非常尖锐，显得不易点击。例如airbnb，它的背景是一个微渐变，线性风格曲线组成“A”，同时是一个小蜜蜂。3.8 动物图形/剪影动物作为图标设计元素是比较常见的方式之一，通过提取动物整体形象或者局部特征部位作为设计元素，背景填充单色或渐变色，简洁明了。动物给人的印象比较可爱，有助于加深用户对产品的印象。常见的表现形式有剪影、线性描边风格、面性风格等。3.9 卡通形象卡通风格的产品图标会让用户更有好感，一个可爱的卡通形象有助于加深用户对产品的印象。很多决策者会认为卡通是一种低龄的审美，这种想法其实是错误的。卡通可以说是一种各年龄层都能接受的风格，如腾讯就是以一个企鹅作为品牌形象开始拓展自己的版图。3.10 正负形以正形为底突出负形特征，以负形表达产品属性，传递产品信息。例如NPR One，图标中的负形图形是对话气泡，告诉我们这是一个媒体或社交的应用，而正形图形强调产品气质。3.11 白色渐变白色渐变的设计模式与透明白色相似，都是通过白色不透明度来构建出图形的立体控件感，它比单纯的剪影图形更加具有质感，这种质感带给了我们视觉上的享受。例如印象笔记·圈点，它是一只白色的鹅毛形象，垂直的线型渐变使鹅毛富有了生命力一般，显得更加轻柔。3.12 彩色渐变色彩比任何图形都更能抓住用户的注意力，同时色彩更加具有情绪，能传递出应用的产品气质。比起白色渐变图形，彩色渐变图形的色彩表现更加丰富。多种颜色进行渐变衔接的时候要注意色相的对比，营造空间感。应用图标的背景和图形的色彩要拉开对比，一般为白色或浅色背景。3.13 无无，即没有设计。除了背板什么也没有。虽然这类设计模式比较独特，但我们并不鼓励，因为用户很难从一个颜色上得到有用的信息。例如“黄油相机”的图标设计成一块黄油的样子已深入人心了。应用图标尺寸规格4.1 iOS应用图标iOS6及之前的版本，应用图标的圆角半径都可以通过1/4圆绘制出来，即绘制标准的圆角矩形即可，主屏幕应用图标为114*114px，使用20px圆角半径，App store应用图标为512*512px，使用90px圆角半径等。从iOS7开始，主屏幕应用图标调整为120*120px，并且不再是标准的圆角矩形，而是某种连续曲线，接近于26-27px圆角半径。我们把两个圆角曲线放大重叠后进行对比，其中灰色线框为标准圆角矩形绘制的圆角，红色为iOS平滑圆角，它与圆角矩形拥有相同的对角线锚点，区别在于其曲线稍微向中心收紧。事实上，我们很难在Retina屏幕上区分这么席位的差别，因此设计师在绘制iOS应用图标时不必过分纠结它的圆角，直接绘制成直角矩形交给开发同学即可，如果应用图标需用于展示，可以绘制120*120px圆角矩形、27px圆角半径代替。4.2 安卓应用图标安卓应用图标同样需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六种。设计师提供给程序员的同样是直角矩形，然后程序员通过代码进行切割使其变成圆角图标。4.3 iOS应用图标设计流程在我之前的设计作品中，有个“影记”的摄影社区APP，本篇我们就以此为产品案例抛砖引玉来学习一个iOS应用图标的绘制过程。4.3.1 寻找隐喻隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为，即人们看到某样东西或听到某件事情能够马上在大脑中形成联想。例如说到摄影，马上就能想到相机、快门、闪光灯、暗房等。然后通过这些联想词，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩作为产品图标的主要造型。4.3.2 竞品分析应用市场各类产品不胜其数，在同类应用中存在大量相似的应用图标设计，如何保持应用图标的唯一识别性非常重要。唯一识别性不单单指图形与其他应用有所差异，避免创意撞车，让用户在脑中形成思维模式，它还指图形表意是否清晰，是否符合用户的心里预期。4.3.3 提取关键词根据收集的图片，创建情绪版，结合自己的产品提取关键词，然后就知道在接下来的设计中应该突出什么。我们从“影记”中可提取首字母“Y”，相机中的“快门”“信号灯”“开关机”，并依次将关键词描绘成下列图形。4.3.4 抽象图形确立了首字母“Y”、“快门/开关机”和“信号灯”作为应用图标的主图形，接下来将绘制好的3个图形相结合，即完成初步设想。4.3.5 图标栅格线使用iOS应用图标栅格线作为设计一句有助于建立和谐的图标绘制比例，并与iOS系统保持统一，下图为iOS系统天气应用使用了图标栅格线。将图形放置在图标栅格上调整大小并注意图形与其比例协调。4.3.6 丰富细节通过上面图形组合已基本完成应用图标的设计，接下来我们还应从颜色、质感、背板等着手丰富图形的细节，建立起应用的产品气质。“影记”作为摄影师分享佳作平台，摄影师们用的器材颜色大多以黑色为主，因此酷酷的黑色更适合作为应用的主色。然后，白色的信号灯过于普通，使用相机本身发出的橘红色灯光作为信号灯的颜色，使其更加具有动感和活力。整体像「消息气泡」的造型暗示可以在这里进行摄影交流。4.3.7 多场景测试将120*120px应用图标设计稿放大至1024*1024px，交付开发提交至App Store上架，正确的图标设计稿应是直角矩形，iOS会自动应用一个圆角遮罩将图标的4个角遮住，假如图标设计稿自带圆角，就有可能露出图标透明区域。△ 注：上图非实际大小，仅表明不同分辨率下的比例关系此外，应用图标还会以不同的分辨率出现在不同场景中，例如在iPhone 8plus上需@3x的图，即将120px的图标放大至1.5倍；而在iPhone7的设置页需要58px的图，就需要将120px的图缩小。将大图缩小成小图时，一些细节就会丢失，使画面变得模糊，因此设计师应对小尺寸图标进行席位调整，去除不必要的装饰元素，以确保应用图标在小分辨率应用场景下也能保持清晰的识别度。APP中的功能图标除了产品图标，还有一种图标被称为功能（或系统）图标，功能图标指的是担负一定功能和含义的图形，一般来说需要像文字一般地被人迅速理解，所以表达方式上不适合特别复杂，如微信底部四个系统图标就使用了比较简洁的线性风格。功能图标在UI设计中占据非常重要的作用，几乎存在于每一个应用界面中，无论是在导航栏、工具栏或标签栏，还是在首页、详情页或个人中心页，都随处可见功能图标的身影。功能图标具有明确的表意功能，其作用在于替代文字或辅助文字来指引用户进行快速导航，它具有图形化的符号，比文字更加直观，符合普罗大众的认知习惯，有助于用户形成记忆思维，提高应用的易用性。同时设计精致、风格统一的功能图标提升了产品视觉效果，不但给用户带来视觉上的愉悦感，还带来了良好一致的使用体验。在 @1x 一倍图设计模式下，以 24px 为网格基准的话，常使用的图标粗细有：1px 、1.5px、2px、3px，1.5的粗细常用于高倍屏，如近几年旗舰机的手机屏幕或者 retina电脑屏，否则像素渲染会比较模糊。5.1 图标栅格图标栅格被用来促进图标的一致性，以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统，令所有的设计保持协调、一致和美学的视觉特征。5.1.1 像素栅格基于像素划分的像素栅格是最基础的栅格系统。在绘制图标时，我们总是希望将对象对齐到每一个像素，特别是直线。因为像素对齐不仅仅可以更好地渲染，还能让图标更加整洁、舒服。下图展示了Sketch 中像素对齐和没对齐图标之间的差异：左：像素不对齐右：像素对齐可以在绘制图标之前就先设置好栅格，在Sketch和Figma中都有相似的设置。Material Design官网给出了图标的辅助网格，为设计师绘制小图标提供一致的标准。图标网格通常包含三部分内容：活动区域，修饰区域，关键线形状。我们以此为例进行介绍。活动区域：是指图标主要内容的绘制区域，通常而言图标图形的主体都在该区域内。修饰区域：是指用于承载部分图标的一些出格图形，某些视觉占比较小的图形可以延伸到修饰区域，但不能超出网格范围。关键线形状：关键线形状是网格的基础。有4种关键线形状，利用这些核心形状作为向导，你可以在产品图标的设计中保持一致的视觉比例。如 Material Deisgn 的图标网格中，活动区域宽度为 20dp，修饰区域宽度为 2dp，4 种关键形状分别对齐于 20pd和 18dp 和 16dp的边缘，对齐于像素。上图为基于网格和关键线形状绘制图标的示例：如左侧「剪切板」图标，整体核心图形部分以网格中的正方矩形为模板，顶部的挂钩图形视觉面积较小，部分内容伸入修饰区域。右侧「相机」图标以长方矩形为模板。5.1.2 视觉栅格除了像素栅格，还有视觉栅格。视觉栅格可以帮助我们找出图标的中心在哪里，以及人眼能感知到它有多大。圆形和弧形物体看起来会比正方形更小。因此我们应该在绘制图标时设定一个固定大小的容器，这样它们在导出时就都是相同的尺寸了。添加内边距可以让图标在视觉上看起来更加平衡，避免以后开发时还需要重新调整。5.1.3 视觉重量绘制图标不光要满足物理上大小统一，还要实现视觉上大小统一。设计师要懂得调节图标大小以避开视觉上的觉错。UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。如果把它们做成高斯模糊效果，你就会发现它们具有相同的视觉重量，因为它们变成或多或少相同的斑点效果。根据图标形状，将它们放在相应的框架中。你就会发现，方形图标比三角形或细长图标更紧凑。5.2 图标绘制细节清晰是图标的基本要素，在sketch中，参数不要有小数点，让图标占满像素网格。因为计算机不能识别小数点，导出图标时计算机会把不能识别参数的部分拉伸填满像素网格，导致图标出现虚边。如果为图标设置1像素的边框，边框应该使用外部或内部的描边样式，但是不建议居中描边样式，居中描边的1px边框，虽然在放大它们的时候，它们看起来很清晰。但在100%比例大小显示的时候，它们会模糊，如下图：根据像素的网格线来设置一条线的起点和终点，会让你的图标看起来更清晰。通常情况下，线的倾斜角度在45°，30°，60°的时候，清晰度会比一些不常见的角度效果会更好，比如13.7°，81°等等。所以，尽量避免用这些奇怪的数值。从一套图标中最复杂的那个开始来设计通常是最有效的，因为它会帮助我们定义相同的视觉重量，让所有的图标视觉重量保持一致。因为当图标具有不同的细节层次时，更复杂的图标会吸引用户更多的注意力，而且视觉上看上去更重。5.3 图标的基本元素5.3.1 大小一致性是设计图标的关键，在绘制时，一定要确保所有的图标都相同大小。在UI界面设计中，网格的大小必须要是4或12的倍数。@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕，界面中通常使用的图标尺寸24*24px、48*48px。通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的产品图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。5.3.2 描边和填充没有什么比看到一个填充图标和一个线性图标放在一起更让人抓狂的了。确保你的图标风格一致是非常非常重要的。比如你想用填充图标来表示选中状态，那么请一定要确保你的其他图标风格一致，只有少量的变化。通常，填充图标具有更高的可识别性，而描边图标更方便添加细节。并且在选择你哪种风格更合适的时候，也别忘了考虑品牌定位和风格。如果你要绘制描边图标，那么需要保证所有的笔画都是相同的粗细，并且笔画之间的间距不要比笔画本身更细。当我们绘制线性图标的填充版本时，首先需要考虑如何简化线条。理想情况下，填充图标类似于阴影，而不是直接翻转颜色。绘制填充图标的描边版本，需要确定好线条的粗细，以及在保证清晰度的情况下可以添加多少细节。5.3.3 颜色如果是功能图标，那么最好只使用一种颜色:黑色。否则你的组件可能变得过于复杂，不利于和其他设计师协作。而对于营销图标，出于品牌宣传的目的，你可能会想要使用两种颜色，个人认为图标最好是单一颜色的，3种或3种以上颜色的东西都是插图，而不是图标。5.4 功能图标的风格常见的功能性图标风格大致有三种：线性图标、面形图标和扁平化图标。但其实我们可以将「扁平化图标」可以看作是「线性图标」和「面型图标」的一种组合形式，所以归根到底，基础的图标风格有两大类：「线性图标」和「面型图标」；5.4.1 线性图标线性图标是通过线条来表现物体的轮廓，它比面形图标更能塑造优美的外观，且作为贯穿图标绘制的线条本身就是一种设计语言，因此绘制整套线性图标会更加统一，具有整体感。例如twitter和微信底部的tab图标等。在一个场景下的几个同等重要的图标，如果线条粗细不一致，会给人一种权重上存在差异的感觉。所以，在绘制线型图标时，通常会使用统一粗细的线条。常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。圆角粗线条的 ICON 显得饱满而可爱，个别 App 的底部标签栏图标采用粗线条设计，但粗线条的 ICON 图形较为极简才适用。线性图标根据样式还可以分为：双色线性图标、线面填充图标、线性渐变图标。5.4.2 面形图标面形图标是以面为主要表现形式的图标。在「微信」底部标签栏中，为选中的图标是线性图标，而选中的图标则是面形图标，同时颜色会变成微信的品牌绿色再次暗示用户选中状态。面形图标占用的面积要比线性图标多，所以更加显眼。实际上，苹果在新的设计规范中也建议开发者在APP底部标签栏中全部使用面形图标，是否处于点击态通过改变填充图标的颜色进行区别。这是因为填充图标看上去像可点击的。面性图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。基于最基本的「线性图标」和「面型图标」，通过不同的形态和风格的组合，再结合丰富的表现手法，就可以设计出形形色色的图标风格了。比如：不同粗细线条线性图标的组合，或者面面组合，或者线面组合。大家在设计图标的时候，需要根据自己的产品特征、受众和使用场景，去选择适合自己的表现形式。6.1 图标绘制方法图标的绘制方式主要有两种：布尔运算和贝塞尔曲线。6.1.1 布尔运算布尔指的是乔治·布尔，19世纪的一位数学家，为了纪念布尔在符号逻辑运算中的杰出贡献，所以将这种运算称为布尔运算。布尔运算听起来比较难，但其实非常简单，布尔运算采用的数字逻辑推演法，主要有数字逻辑的联合、相交、相减。设计师在使用软件过程中引用了这种逻辑运算方法，对应到设计软件中，就有：合并形状、减去顶层形状、与形状区域交叉、排除重叠形状。例如两个圆形相减可以得到一个月亮的造型，这就是布尔运算。合并形状：将两个形状合并为一个，取的是交集；减去顶层形状：用底层图形减去顶层图形所得最终图形；与形状区域相交：得到的形状是两个图形重叠的部分，取的是交集；排除重叠形状：简单理解就是减去两个图形重叠的部分，与「与形状区域相交」相反；基本上通过布尔运算，我们能绘制出常见的大部分图标了，但有时我们需要针对某些线条进行单独的调整，又或者我们需要打造一套手绘风的矢量图标，这个时候就需要用到贝塞尔曲线了。6.1.2 贝塞尔曲线贝塞尔曲线适用于二维图形绘制的数学曲线。1962年法国工程师皮埃尔·贝塞尔（Pierre Bézier）所发表。他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线是绘制矢量图形时的重要工具，使用钢笔工具画出的所有图形一般来说都是贝塞尔曲线组成的。贝塞尔曲线包括：节点、控制点、控制线、曲线这几个基本概念。矢量图形便是由这几个基本概念构成的。图形由基础节点作为支撑构成，控制点和节点之间的线段称为控制线，控制线就像皮筋一样，调整控制点的位置，可以改变曲线的形状，就像被皮筋（控制线）拉扯一样。节点包括 4 种基础属性类型，一种是没有控制点和控制线的「直线节点」；另一种是「镜像关联节点」，这种节点控制其中一侧的控制点，另一侧的控制点会发生镜像变化，适合绘制对称结构的曲线；再有一种是「无关联节点」，即节点两侧的控制点可以各自自由控制它们那一侧的曲线而不互相影响；最后一种是「不对称关联节点」，这种类型下，节点两侧的控制点和节点会永远保持在同一条直线上，但是却不会对称控制线的长度。在 Sketch 中，我们可以在选中节点后通过快捷键 1 / 2 / 3 / 4 来快速切换当前节点的类型，加快绘制效率。6.1.3 钢笔工具绘制自由贝塞尔曲线常用的工具便是钢笔工具，钢笔工具也是所有矢量软件的核心工具。它的使用对于新手可能稍微薇有点复杂，但是一但上手，会非常方便。The Bézier Game 这个是一个非常不错的练习钢笔工具的网站，以游戏的形式练习钢笔工具，通关的时候你对钢笔工具就已经轻车熟路了。绘制实战这里选择了几个比较典型的图标，简单演示下绘制方法和各自的绘制思路：6.1.4 面性眼睛：布尔运算相交 / 相减 / 合并形状绘制一个正圆，然后复制这个正圆形，通过布尔运算「与形状区域相交」得到眼睛外轮廓，再绘制两个圆通过「相减」与合并形状得到眼睛造型。位置定位：旋转 / 相减这个图标由两个大小圆形相减，得到环形，再绘制一个和大圆半径相等的正方形，和圆环左、下对齐，最后逆时针旋转45度完成。WIFI：相加 / 相减 / 旋转绘制多个圆通过布尔运算的相加减得出三个圆圈嵌套“靶子造型，再绘制一个正三角形，和靶子图形相交得到Wi-Fi图标。齿轮：旋转 / 相减通过两个图形的布尔运算得到环形，然后绘制一个梯形，复制一个镜像，将其对齐环形两端，复制梯形编组并旋转复制三次（45度），最后合并全部形状完成。铃铛：相加 / 相减由3个矩形组成铃铛主体，铃铛顶部圆顶结构通过设置全圆角所得，铃铛底部的半圆使用圆形和矩形进行布尔运算，完成。6.1.5 线性放大镜：旋转 / 相加绘制一个正圆和一条线，用对齐工具将其居中对齐，编组后逆时针旋转45度即可。时钟：钢笔 / 剪刀工具绘制一个正圆和一个矩形，使圆形的左下角对齐圆形中心，用钢笔工具在矩形左边和下边增加两个锚点，再用剪刀工具减去多余的线条即可。注意指针的长短关系。雨伞：相减 / 剪刀工具绘制一个正圆，再绘制一个矩形与其相减得到伞顶，然后绘制一个矩形，通过剪刀工具减去多余部分，得到伞架，完成。相机：合并绘制一个矩形和一个梯形，通过合并得到相机主体，再绘制一个正圆完成相机镜头部分，完成。爱心：相加 / 旋转绘制两个正圆和一个直径与圆形等宽的正方形，然后逆时针旋转45度所得。6.2 制定规范无规矩不成方圆，规矩的出现可以让一切杂乱的东西变得合理，统一起来。在设计上也是如此，规范具有统一输出，指引细节、便于查看的好处，规范就是一组图标中的规矩，所有图标的绘制都按照规矩来，最终的成品就会显得井然有序。小小的图标是由很多图形元素组成的，在这些图标中，元素的一致性是建立一个共同视觉于洋的关键。熟悉这些元素可以更容易地理解每个图标和他们之间细微的差异，也将帮助我们学会图标设计的底层结构，依次是笔画末端、圆角、留白、笔触、内部角、禁绘区。在制定规范时，我们通常先绘制出一个符合业务风格的图标，然后根据这一个图标定制后续的图标规范，依次按照上述图标元素进行规范。如果是渐变填充图标还要规定它的渐变角度，光影角度等。在一组中的图标需要在这些图形属性中进行统一，这样的图标虽然形状不一样但是在视觉上看起来是属于同一系列的。制定规范的三个过程：拆分细节：将图标中的细节元素（圆角、笔画末端等）进行分解，并在规范中制定细节元素的使用法则。风格定位：根据产品调性，业务属性在规范中制定相应的色彩、质感风格。功能划分：不同功能（金刚区和标签栏等）的图标要区分开来，功能相近的包括色彩、质感应该采取相近性。图标设计规范6.3 图标管理和交付完成图标后需要进行视觉检视，避免任何多余的线条或形状，保证尽可能整洁。检查所有线条是否都在标准框架内，让其他人帮忙来检查你的图标是否整洁是非常有必要的。对图标精心设计评审，合格后再加入资源库，这样避免多人同时修改而造成混乱。文件格式是导出图标的关键。不同的人需要的文件格式也不同，如果你为外部合伙人提供图标，那么可能会提供1x、2x和3x.的png文件，以适应多种设备。而对于开发和其他设计人员，则通常需要导出.svg文件，这些文件可以在设计程序中编辑，并且可以通过代码在应用程序或浏览器中绘制。当导出SVG时，代码应该尽可能简洁。选择Figma的另一个重要原因是它有超小的SVG导出，并且还能自动优化。图标资源管理工具：Nucleo或许你能做出完美无瑕的图标，但如果不能让它们产品中发挥作用的话，那将毫无意义。所以在你开始设计之前，可以和开发人员谈谈，他们能告诉你图标交付的要求，这将改变你的一些选择，比如图标的粗细或大小。问问其他设计师过去做过什么，以确保你们没有重复工作。你还可以和市场运营人员聊一下，看看他们在日常物料中缺少什么。总之，多向别人寻求反馈、建议和帮助。他们会激励你发现更好的想法，并让你了解自己应该做什么。一套完整的图标设计规范是有必要的。6.4 线性or面性设计中，我们应该是用「线性图标」还是「面性图标」呢？其实二者没有太明显的选择优劣，很多场景下已经越来越模糊，但总的来说，还是有一些法则可以作为参考：常用的手法：在App的底部导航栏，选中状态使用面型图标，而非选中状态使用线性图标；16px左右的小图标慎用线性图标，线性图标在16px下，可排布像素的区域较小，这个时候线性图标不容易设计；面型图标比起线性图标，除装饰性外具备更强的视觉信息层次感，更具引导性，比如金刚区功能图标、IOS设置界面，使用面型图标；车载等系统界面，更适合用面型图标，面型图标的视觉面积较大，短时间内更加容易识别；线性图标看起来通常会更加细腻精致，适合比较精致简洁的设计或者女性化产品设计；功能图标在UI设计中占据非常重要的作用，几乎存在于每一个应用界面中，无论是在导航栏、工具栏或标签栏，还是在首页、详情页、或个人中心页，都随处可见功能图标的身影。功能图标具有明确的表意功能，起作用在于替代文字或辅助文字来指引用户进行快速导航，它具有图形化的符号，比文字更加直观，符合普罗大众的认知习惯，有助于用户形成记忆思维，提高应用的易用性。同时，设计精美、风格统一的功能图标提升了产品视觉效果，不但给用户带来视觉上的愉悦感，还带来良好一致的使用体验。7.1 线性图标使用场景在iOS所有原生应用的导航栏和工具栏都采用了2px线框的图标设计，很多APP产品的标签栏都选择用线性风格的图标设计。无疑，线性图标可以减少视觉干扰，让用户集中在产品核心功能上，同时轻量化的视觉语言也与扁平化的设计风格更为融合。它比面形图标更能塑造优美的外观，且线条本身就是一种设计语言，因此绘制整套线性图标会更加统一，具有整体感。通常，在UI设计中，线性图标很少和背板同时存在，因为线条的图形视觉表现力较弱，容易埋没在背景色中，但也不是必须的，如果掌握好一定的规则，一些简单的线性图标和背板的组合也会很协调。7.2 面形图标使用场景面形图标具有广泛适用性，通常在运动、时尚类应用的标签栏出现。由于面形图标的视觉占比最大化，具有强烈的视觉表现力，一般用于应用界面的主要功能入口，以方便用户快速寻找。功能入口的面形图标通常分为反白和正形两种类型。反白即在彩色背板上显示白色的图标，正形即图标直接填充色彩且无背板。在带有背板的图标设计时要注意图标与背板的尺寸比例，虽没有严格的绘制标准，但从整体视觉效果上考虑，图标尺寸最好不低于背板直径但1/2，最大不超过背板直径的0.618(黄金比例)，同时还要考虑所有图标的视差一致。7.3 扁平图标的使用场景扁平化图标实际上是线性图标和面形图标的一种组合形式，这种类似插画感觉的图形一开始多用于引导页、空状态也的情感化设计，后来逐渐在标签栏、首页主要功能入口也出现了扁平化图标的身影。精致的扁平化图标令人赏心悦目，拉近了与用户之间的距离，从而建立起良好的用户印象。我们了解了 icon 的基本知识，那么如何设计一个好的 icon 呢？怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。我们可以从以下五个方面来检验，分别是：识别性，规范性、统一性、呼吸感与品牌感。8.1 识别性图标就是帮助用户理解信息，所以识别性（也可以说是可访问性）是一个图标最重要的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑。我们检测图标的可读性通常要将图标的背景色底板在黑色和白色之间进行切换对比，不论是黑色还是白色的背景都可以看清图标的全部细节，还需要确保图标中的每一种颜色都是可见的。第二就是将图标拿到强光下进行观察，在强光下是否可以看清图标的主题结构，图标是否有足够的辨识度。图标识别性可以分为两类，分别是含义识别和视觉识别。含义识别：是视觉语言是否可替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。视觉识别：图标的大小，颜色，线条的粗细，这些影响视觉识别的因素识别性是否高。8.2 规范性规范性也是做好一个图标的基础，我们要保证图标在视觉大小的一致性，图标饱满度、遵循同一种规律，细节统一性。视觉大小的一致性：在相同尺寸的基础上分析形状间的视觉差异，来审视视觉上是否统一，如一样尺寸大小的圆和方形的视觉大小就不一致，那么我们可以规定它的最大尺寸，进而在尺寸规范中适当调整，使得视觉大小达到统一；饱满度：常用的衡量方法就是正负形衡量法，在图标所占区域的矩形框中，看图标的正形的面积是否还可以增加；相同规律：同一套图标必须是以同种风格呈现的，例如是否全部使用了圆角或直角的风格，圆角大小、绘制风格是否一致；细节统一：包括像素是否对齐、圆角、描边粗细是否统一的问题；8.3 统一性在绘制多个类型相同的图标时，我们需要注意这一套图标合集需要在视觉上保持统一性。在一整套产品中，会有很多种图标，但是图标的功能不一样，所表达的内容也不同。这时，图标一致性的意义就体现出来了，根据格式塔原理中的相似性原则：人们会将如元素彼此相似的东西感知为一组。这也意味着如果具有相同功能、含义和层次结构级别的元素，则应在视觉上保持统一匹配。图标内容的统一会让用户明白相似的图标所代表的的功能也相同，而且在视觉上也更加和谐美观。因此我们在绘标后还需检查线条的粗细比重，边角的大小，配色方案，细节层次和设计元素在整个合集中是否是不变且一致的。8.4 呼吸感呼吸感的意思就是适当留白。不管是图标还是界面，适当的留白可以突出主体内容，让内容具备易看性。在图标的绘制过程中，我们应该注意图标元素之间的间距不宜过近，元素也不宜过多。图标是一个物体的简略缩影，目的是为了表达内容，让用户快速理解，太过复杂的细节会影响图标的识别速度。因此在图标的绘制过程中应该删除所有无法传达图标意义的元素，避免使图标变得太过复杂难以识别。8.5 品牌感品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。那么，该如何提升品牌感，打造属于自己App的独特风格呢？品牌基因为我们提供了一些线索，这是近年来非常流行的一种趋势。我们都知道图标在APP设计中的重要性，但是打开许多APP你会发现他们的图标设计都非常普通，似乎是在图标网站上下载的素材。虽然一些优秀的设计师在进行图标设计师加入一些诸如圆角、断线等设计语言，但是仍逃脱不了与其他APP设计雷同、毫无个性的通病，使得UI看上去普通、不精致，缺少产品气质。那么，该如何打造属于自己APP的独特风格呢？品牌基因为我们提供了一些线索。它是由平面设计中的VIS（视觉识别系统）引入的一种设计策略，通过对品牌形象进行延生设计形成一套完整的视觉符号。每一个APP都有其品牌形象，代表了与众不同的气质。接下来，我们就来学习如何利用品牌基因进行图标设计。9.1 提取品牌图形通常一个App的第一个tab是首页，是用户进入App后看到的第一个页面，最常见的图标设计是一个小房子的图形。首页是App中最重要的页面，承载了整个产品的核心功能，是用户浏览最多的地方，因此使用一个让人印象深刻的品牌图形作为“首页”图标是必要的，不但使App内外形成了视觉联系，同时也二次传递了品牌形象，加强了用户对App的良好印象。例如网易云音乐的首页标签就直接使用了它的品牌图形，其优点不言而喻。但是请注意，这种设计策略并不适合于所有的App，当第一个tab被赋予特定功能，就不可使用品牌图形，否则用户会难以理解。例如微信第一个tab是聊天列表，此时使用气泡就比品牌图形更加合适。还有另外一种情况。通常一个App的最后一个tab是个人中心，即“我的”。如果App的品牌图形是动物图形，也可以使用其整体或局部图形来作为「个人中心」的入口图标。9.2 提取品牌色彩色彩也是图标设计中重要的构成元素之一，合理协调的色彩搭配让用户在浏览页面时感觉舒服。从品牌形象中提取色彩作为图标设计的依据，可以给用户带来由内而外一致的视觉体验。在设计时提取品牌色彩可适当调整色彩的饱和度，明度，既可以将图形整体填充色彩（例如微信），也可以局部填充色彩，还可以填充为图标背景色，使图标之间形成色彩上的关联。直播应用Bigo Live的品牌色是青蓝色，在标签栏的图标设计上（选中态）将图形局部元素填充青蓝渐变色，活泼清爽的搭配带给用户轻快的感觉，与整体品牌调性高度一致。9.3 提取设计语言在VI设计中通常提取辅助图形作为设计元素，这在图标设计中同样适用，当所有的图标都具备了相同的设计元素，他们就构成了一套完整的视觉符号。例如飞猪的品牌图形就很特别，猪的头部轮廓是由大写字母F演变成的翅膀造型，因此可以看到“我的”小人图标的也使用了类似的轮廓，这样他们就形成了某种视觉联系。9.4 提取产品气质品牌形象决定了产品的气质，而产品的气质决定了吸引什么样的用户。就如当我们第一次看到一个人的时候，往往会根据他的外貌形象特征，产生一个大致的印象，这就是一个人的气质。APP也同样，例如传递传统手工艺人社交的「东家」，其产品流淌着古朴、温润、精致的人文气息，它将宋体汉字的笔画进行拆解组合，创造出具有东方韵味且极具形式感的图标设计。9.5 拆分品牌名称App标签栏图标最常见的形式是图形加文字的组合，由于文字本身就能传达最直接的含义，因此图形的识别性并不那么重要了，我们就可以在其视觉表现形式上赋予更多创意和个性。MONO是一款阅读类App，它的标签栏图标直接将品牌名称中的4个字母拆分成4个图形。虽然每个字母与其对应的功能模块本身并没有直接联系，但加上标签文字的辅助也不会造成阅读困难，而且产品本身的用户人群就是比较能接受新鲜事物的年轻人，因此这样的创意反而给App设计加分了。9.6 展开形象联想我们日常使用的众多App大多数都有着相同的功能模块：首页、发现、动态、我的等，因此也就出现了很多雷同的图标设计。比如“首页”是尖顶房子，“发现”是眼睛，“动态”是气泡，如果有差别也只是设计风格的差异，有的直角有的圆角，有的线性有的面形。这样的设计没有品牌归属感，试一下将这些图标单独拿出来就无法判断它是谁，它从哪儿来？优秀的设计师不仅要具备将图标绘制精美的能力，还要具备丰富的设计想象力，不拘泥于设计规范的条条框框，有时候打破规则才能设计出优秀的图标。“首页”除了小房子我们还可以想到什么？马蜂窝的做法就很巧妙，“首页”图标是“蜂巢”，而蜂巢是马蜂的房子，这样的设计与品牌形象紧密相连，简直完美！不过最新的改版好像已经改没了。总之，要想在绘制整套图标时建立统一风格，就要从外观和颜色上确立主风格，在局部寻求个性特征，将两者结合，并融合产品属性和符合用户定位，先在脑海中构思出清晰的概念，然后在稿纸上绘制草图，最后确立一个最佳方案上机完成，只有不断地思考和打磨才能创作出最佳的设计方案。写在最后图标设计是UI设计中非常重要的环节，因为除了文字和图片的排版之外，在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标。在尺寸有限的界面上，小小的 icon 可以更加简单高效的表达含义，传递给用户正确和友好的指引。建议每位UI设计师在平时做大量的练习尝试各种不同的风格，以满足不同的业务需求。OK，图标设计指南就分享到这里，希望对大家有所帮助。因为篇幅较长，几经修改，有细节不严谨的地方，欢迎斧正，感谢阅读。编辑于 2021-10-04 11:53UI设计师设计图标设计赞同 39添加评论分享喜欢收藏申请

5大图标设计风格，也是未来的趋势走向 | 设计达人

设计达人

爱设计，爱分享。

视觉设计 » 5大图标设计风格，也是未来的趋势走向

5大图标设计风格，也是未来的趋势走向

10月 3, 2019

发表于: 视觉设计.

Sponsor

前面我们分享过有关UX和UI的设计趋势，但这只是一个大方向，都说细节决定成败，UI中的图标就是很重要的一个细节。今天我们再细化一下谈谈关于图标设计的趋势，通过色彩、图形、风格及一些上线APP进行研究，从中提取一些适用于未来设计风格，下面是图标设计的5大风格，无论是设计风格还是动效，都值得我们学习。

1. 双色渐变图标（Duoton icon）

2019年渐变色流行了一整年，那么2020年双色渐变设计依然持续是一个大趋势，因为单一的色调无法满足产品所需，双色调图标的特点就是色彩对比鲜明，青春活力，这种相比单色调图标，更适合应用于一些主流偏年轻化产品，因此设计师还可以通过设计色彩打动用户，提升产品竞争力，工具化产品也可以使用这样有层次的图标，不过使用时，需要对色彩进行克制使用。因此，如果您希望自己的设计界面脱颖而出，可以去大胆的使用双色调色彩。

a. 双色调多层质感(弥散渐变，直投影，混合模式)

b. 双色调混合模式叠加

2. 单色渐变透明图标（Alpha icon）

Alpha icon 图标风格最大特点就是单色带透明渐变，通过弱透明度来制造视觉层次，如果是纯白色，就会显得图标平庸了一些，这种图标运用范围可以是界面中空场景或者一些关键模块的主功能图标。

如下图左侧大卡片上面图标应用思路。

3. 层叠式图标（Cascade icon）

层叠式图标，相比于纯白色线条图标，它带来一种更舒适的质感，其设计方法是通过穿插层叠的手法，将日常我们所见到的单一的线条图标，变得更具有视觉层次感，当然这种图标使用场景一般会是在功能说明性页面，功能介绍等。

4. 品牌植入（Brand icon）

品牌植入一直是非常大趋势，包括今年我们所看到两大厂的品牌更新IBM和UBER等，都是将品牌核心符号植入设计中，我想这样的思路在2020年将持续会是一个重要表达产品气质和记忆点手法打造思路之一，因为用户已经很熟悉目前图标模式，如何能创新区别其他产品，那么融入品牌将是一个不错的选择~品牌的融入技巧有高低之分，需要设计师去巧妙设计

图标与IBM字母基因某些地方保持一致性，点击查看此视频。

同样多邻国在前段时间更新品牌，并将其LOGO特征符号植入字体中。

5. 动态图标（Motion icon）

动态图标是一个能提升产品体验的方法之一，也是微交互中的一种，它可以增加产品趣味性，Facebook在评论入口的表情动画就运用了动态图标，包括苹果Apple Pay支付成功图标动画，Google Assistant智能助手，Messenger中的打招呼动画等等我们可以逐渐发现动态图标比静态图标的表达性更强，更受到青睐，随着硬件升级，这种动态图标运用逐渐在越来越多场景可见到。

看看整个表情动画，点击查看动画视频。

看完是不是觉得特别有趣好玩。表情更接近我们生活。

再来个Apple pay支付动态效果，点击查看视频演示。

其他类型图标动画

OutLook中的日历图标动画

总结

在整个互联网大趋势下，研究图标将来的风格走向，做好未雨绸缪，希望以此为开端，大家能发现更好的设计趋势风格，融入产品设计里面，当然趋势是好的，我们运用时候更多需要从产品本身定位出发，产品性格去合理运用设计趋势，提升产品设计品质。

作者：LoveXiaoTao，微信号：UX-Talk

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

与 UI、UI设计、图标、图标设计、设计趋势、设计风格相关的文章

起点读书APP福利中心设计总结

表情设计与优化（雪球APP表情设计升级过程）

6个B端设计参考网站，解决B端设计参考太难找的难题

8年经验UI设计师告诉你：UI设计主要工作流程是什么

UI设计用这些工具，效率提升不止一倍

UI设计师要知道的：移动端UI尺寸适配指南 (已更新至iPhone 15)

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

« 插画：单身女的日常（快来看看这有没有你）

折页设计没那么难——9款折页图赏 »

{ 发表评论 }

点击这里取消回复。

姓名 (必填)

邮件 (必填)

网站

分类目录AI绘画教程

优秀设计资源

视觉设计

设计作品

设计工具

交互设计

用户体验

HTML & CSS

设计杂谈

产品设计

美工兼职接单

页面在线AI绘画

设计导航

设计书籍

关于

推荐书籍

艺术的故事艺术与审美入门之书

DON'T MAKE ME THINK设计师必看

《移动应用UI设计模式》手机APP设计

《设计心理学全四册》高阶技能！

JavaScript权威指南(第5版)只能说牛X

《见微知著》Web用户体验入门书籍

UI设计中图标类型指南 - 知乎

UI设计中图标类型指南 - 知乎切换模式写文章登录/注册UI设计中图标类型指南越努力越幸运爱设计的小透明　　图标是 UI 设计中极为重要的一个环节，我们在做每个界面的设计几乎都会涉及到图标的表达，出色的图标设计可以让界面表达更加精致、有趣。图标的设计往往也体现着设计师的基本功，因此除了日常多画提升对图标造型的把控力外，我们也更需要了解和学习图标设计的趋势类型。　　一、存在意义　　UI设计中，icon是重要组成部分，相对于使用文字，icon表达会让效果更清晰。　　对于信息传播和视觉效果表达都有重要意义。　　图片对比　　1.纯文字与图标使用对比，图标从视觉上更简洁易识别，阅读性更强　　2.纯文字与文字+图标，这里举两个例子　　金刚区去掉图标后，页面缺少icon点缀，显得很枯燥，目前的UI视觉设计中，也是设计手法是不允许的。　　选用的是百词斩个人中心，即使原页面icon存在感也是选用的视觉感偏弱的线性图标，在去掉后，页面层次感和阅读性就降低很多，可以尝试仅仅从icon找某个功能，一定会比仅文字快，时间成本会相对降低，也说明了设计icon时，尤其是说明性和交互性图标，准确度要高。　　如果原设计是面性图标对比感受会更明显。　　二.多纬度分类　　图标应用广泛，单一从风格分类是无法做到全面了解的，广度和深度也达不到全面认识，概念也不清晰。针对这一问题，我以广度为横轴，将它分为功能，表现形式和设计风格三大类，逐个纵向挖深。　　功能分类　　按功能分类：交互性图标，装饰性图标和说明性图标。　　1.交互性图标　　具有双向信息传递能力，不仅可以向用户传递某种信息，引导帮助用户执行特定操作，同时也允许用户向程序传递控制信息，从功能重要程度来讲，它的重要性是最高的。比如：登陆注册按钮，开关按钮，数量按钮，点赞，转发分享等都属于交互性图标。　　2.装饰性图标　　主要为了提高页面设计性，加深个性化设计风格，与此同时，提升用户线上体验感，迎合受众群的偏好，提升设计亲和度。常见的比如：符合节日需求时，线上活动呼应，图标个性化。比如：页面升级，空页面，奖励，用户等级等都属于装饰性图标。　　3.说明性图标　　阐明信息图标类型，区分不同功能或内容的视觉标记;简单的说，就是对功能的解释说明。常见的比如：表现行业特性时，金刚区或个别功能区icon设计;面向不同用户群体时，选择风格设计，早教类APP与健康类APP对比就很明显。　　首页图标也都属于，以美团为例子，它结合了线性图标，渐变面形图标，将金刚区分为三部分，增强页面的层次感和识别度。　　表现形式分类　　按表现形式分类：象形图标，隐喻图标，工具图标和混合图标　　1.象形图标　　起初，UI设计中图标类型指南设计师为了保证高识别度，降低学习引导成本，写实性icon对生活的映射更贴切，用户也会将其与实物相联系。ios相当长一段时间流行 “Skeumorphic设计理念”，它就属于超写实设计。并且认为只要有可能，在应用上增加现实的、物理的纬度，与现实越相像，操作越相同，就越容易使用户理解运作模式，接受度就越高。　　2.隐喻图标　　两种不相关但却有着某种相似特质的事物用icon的方式链接起来，达到记忆和使用目的。比如：设置与工具，云端与云，购物与袋子，会员与钻石或皇冠等等。　　3.工具图标　　主要以行业类别为分类，使用范围广泛，大众或行内人士识别度高，且被长期使用。比如：建筑行业，医疗行业，化工行业等等。　　4.混合图标　　也就是前三种的结合，目的在于达到不同的视觉效果和应用结构。前段时间追波很流行的MBE粗描边风格icon就是综合图标的产物，多表达设计师个人设计风格或适用某类设计感较强的软件。　　设计风格分类　　按设计风格分类：面性图标，线性图标，扁平图标，拟物图标，2.5D图标和桌面应用图标　　1.面性图标　　使用范围最广，稳定性强，区分页面层次感更高。设计UI页面时，使用也要从页面层级关系和产品功能角度考虑具体运用。面性图标的分类也有很多，不仅仅只有常规的，还有多色，渐变，不透明叠加，插画，扁平投影等等。　　2.线性图标　　使用感更轻盈，精致度更高，简约风格页面使用最多，也是当下流行的风格之一。除了常见的纯色线状图标之外，还分双色或多色，多种粗细结合，缺口型，渐变，描边不透明叠加等等。　　3.扁平图标　　其实就是线+面，面+面。变现方式多样，拓展性强，更个性化，年轻化一些，相同，同样设计风格的icon，在更换颜色后就能体现和传达不一样的信息。　　4.拟物图标，2.5D图标和桌面应用图标　　三、运用场景与选择图标　　运用场景的选择一定是在设计风格确定后，进行选择使用的，不能把icon运用场景和设计风格下的图标概念混淆(你细品)。使用图标的前提一定是风格类型一致，判断风格一致的方法就是看图标设计风格分类和绘制原则。　　主要运用的场景分为5种：顶部导航栏，底部标签栏，金刚区，交互区，分类列表　　1.顶部导航栏　　UI页面顶部主要以轻便为主，不易过重，图标使用也以简单简洁为主，不能太抢眼，起到便捷引导作用，准确表达，一般使用单图标，不结合文字。　　2.底部标签栏　　位于主页页面底部，利于用户页面切换，图标数量一般控制在3～5个为宜，采用图标结合文字的方式体现产品功能。　　3.金刚区　　之所以称之为金刚区，是因为它一般位于主页中部位置，在banner或搜索栏之下，是产品主要功能区的核心集中位置，为子板块做引流，用户流量40%～58%都是来自于金刚区，它占用首屏位置大概在22%～25%之间，采用图标结合文字的方式体现产品功能。　　4.分类列表　　一般都是瀑布流排列，宫格排列，色块排列，统一页面风格，准确表达，利用用户定位功能模块。　　5.交互功能区　　这就是交互性图标使用最多的地方，收藏，点赞，刷新，搜索等等。　　五、写给设计师　　1.图标的使用同样需要前期思考：分析用户，功能信息，竞品分析和行业经验。(和个人中心设计原则是一样的思维模式　　2. 图标设计需要在遵循原则的情况下进行个性化创作，与辨识度和适用性相结合，不断提升用户使用体验感和信息感知速度，准确传达信息。　　3.多分析思考，积累知识，提高自己对运用的敏感性，一起加油吧～发布于 2020-08-24 17:00图标UI视觉设计AAA数字艺术教育赞同 2添加评论分享喜欢收藏申请

UI设计中图标类型有哪些？ - 知乎

UI设计中图标类型有哪些？ - 知乎首页知乎知学堂发现等你来答切换模式登录/注册用户界面用户界面设计UI设计师UI设计中图标类型有哪些？关注者7被浏览50,459关注问题写回答邀请回答好问题添加评论分享8 个回答默认排序即时设计已认证账号关注主要有三类：一、功能图标，有明确的功能含义，比如 App 页面顶部状态栏，底部导航栏的图标。这里面最常见的风格，就是线性和面性图标。下面这个视频，是线性面性图标的绘制规范和方法。二、装饰类图标，有丰富的视觉细节，引导用户的视线，比如金刚区图标。下面两个视频，讲了两种装饰类图标的绘制方法。三、启动图标，主要是把品牌 logo 融入到图标中。为了方便大家在设计、开发和创作过程中使用优质的图标素材，我整理了八种不同风格的免费开源图标资源，供大家自由下载、使用和进行二次创作。这些资源涵盖了各种主题和用途，无论你是设计师、开发者还是创意爱好者，都能在其中找到适合自己项目的完美图标。快来看看吧！一、线面图标点击领取→百度智能小程序图标库还有一套不得不提的。百度智能小程序发布的新版图标库，大概有 1000 多个，种类异常丰富，覆盖各种场景，除了设计小程序外，移动端和 Web 端都会用到，可引用到资源库并在创作时直接使用。书籍影音、互动社交、交通出行、生活服务、政务服务等等，还提供了彩色和线型两种风格，适用范围更广，实用性高。Arco Design 图标库字节团队打磨 3 年的 Arco Design 企业级设计系统官方图标库，提供了通用、编辑、影音、方向、交互及提示等 6 大类共计 263 个图标，覆盖各种日常设计场景，可一键引用到资源库中随时搜索并拖拽复用，帮助你快速完成创作。这是份将近 300 个图标的 Arco Design 图标库，基本覆盖了功能层面的大多常规分类，而且图标精致度够高，用它们做出来的 UI 绝对不会差。点击领取→TDesign 图标库腾讯内部近 300 名设计师与开发者共同打造的企业级设计体系图标库，其中包含了适用于多种场景的 231 个图标，有方向、文本编辑、媒体控制、文件管理等常用功能模块和一些品牌 logo，整体风格统一，实用性高。Remix 线性图标库/面性图标库点击领取→Remix面性图标库点击领取→Remix线性图标库Remix Icon 是一套面向设计师和开发者的开源图标库。质量很高，风格中性大气，分为“线性图标”和“面型图标”两种。图标库能覆盖的范围和种类很多，包括建筑、商务、沟通、设计、扩展、设备、文件、编辑、媒体、地图、系统、金融、生活、用户、天气以及企业logo图标。而且，图标分类明确、整理详细，丰富的内容还能满足绝大多数的功能需求，非常推荐~560+ Zwicon 通用线性图标https://js.design/community?category=detail&type=resource&id=60d31f6a333c5ce7ab0bfa7f&source=zhqa&plan=iengu这是一套由 zwoelf 创作的通用线性图标，包含了「金融」、「设备」、「文件」、「媒体」等常用的26类图标。图标整体给人的感觉精致、圆润、外形简单，但是风格性很强，整体性也很强。更不错的是，在实际使用过程中，可以根据自己的需求，在现有资源的基础上将图标修改为双色、线面结合等风格，可拓展性也大大增强了。二、毛玻璃图标点击领取→3d blender 磨砂毛玻璃分享者：秋月的设计资料夹三、拟物风图标点击领取→轻拟物设计毛玻璃icon分享者：小肥爱小胥点击领取→轻拟物化图标分享者：吴小雷四、3D效果点击领取→C4D磨砂玻璃科技3D图标分享者：Freedom五、像素风点击领取→像素风格界面图标设计分享者：徐润z六、抽象风点击领取→几何图标分享者：Yancy Min七、卡通风点击领取→3D卡通立体小清新图标分享者：有点小洋气八、手绘风点击领取→手绘书本学习用品类卡通小图标分享者：东边的冬天如果想寻找更多风格和样式的图标，在「即时设计」网站里也有海量优质的 APP 图标资源也可供你下载使用噢。即时设计资源广场-免费图标编辑于 2023-06-30 12:23赞同添加评论分享收藏喜欢收起越努力越幸运爱设计的小透明关注　　图标是 UI 设计中极为重要的一个环节，我们在做每个界面的设计几乎都会涉及到图标的表达，出色的图标设计可以让界面表达更加精致、有趣。图标的设计往往也体现着设计师的基本功，因此除了日常多画提升对图标造型的把控力外，我们也更需要了解和学习图标设计的趋势类型。　　一、存在意义　　UI设计中，icon是重要组成部分，相对于使用文字，icon表达会让效果更清晰。　　对于信息传播和视觉效果表达都有重要意义。　　图片对比　　1.纯文字与图标使用对比，图标从视觉上更简洁易识别，阅读性更强　　2.纯文字与文字+图标，这里举两个例子　　金刚区去掉图标后，页面缺少icon点缀，显得很枯燥，目前的UI视觉设计中，也是设计手法是不允许的。　　选用的是百词斩个人中心，即使原页面icon存在感也是选用的视觉感偏弱的线性图标，在去掉后，页面层次感和阅读性就降低很多，可以尝试仅仅从icon找某个功能，一定会比仅文字快，时间成本会相对降低，也说明了设计icon时，尤其是说明性和交互性图标，准确度要高。　　如果原设计是面性图标对比感受会更明显。　　二.多纬度分类　　图标应用广泛，单一从风格分类是无法做到全面了解的，广度和深度也达不到全面认识，概念也不清晰。针对这一问题，我以广度为横轴，将它分为功能，表现形式和设计风格三大类，逐个纵向挖深。　　功能分类　　按功能分类：交互性图标，装饰性图标和说明性图标。　　1.交互性图标　　具有双向信息传递能力，不仅可以向用户传递某种信息，引导帮助用户执行特定操作，同时也允许用户向程序传递控制信息，从功能重要程度来讲，它的重要性是最高的。比如：登陆注册按钮，开关按钮，数量按钮，点赞，转发分享等都属于交互性图标。　　2.装饰性图标　　主要为了提高页面设计性，加深个性化设计风格，与此同时，提升用户线上体验感，迎合受众群的偏好，提升设计亲和度。常见的比如：符合节日需求时，线上活动呼应，图标个性化。比如：页面升级，空页面，奖励，用户等级等都属于装饰性图标。　　3.说明性图标　　阐明信息图标类型，区分不同功能或内容的视觉标记;简单的说，就是对功能的解释说明。常见的比如：表现行业特性时，金刚区或个别功能区icon设计;面向不同用户群体时，选择风格设计，早教类APP与健康类APP对比就很明显。　　首页图标也都属于，以美团为例子，它结合了线性图标，渐变面形图标，将金刚区分为三部分，增强页面的层次感和识别度。　　表现形式分类　　按表现形式分类：象形图标，隐喻图标，工具图标和混合图标　　1.象形图标　　起初，UI设计中图标类型指南设计师为了保证高识别度，降低学习引导成本，写实性icon对生活的映射更贴切，用户也会将其与实物相联系。ios相当长一段时间流行 “Skeumorphic设计理念”，它就属于超写实设计。并且认为只要有可能，在应用上增加现实的、物理的纬度，与现实越相像，操作越相同，就越容易使用户理解运作模式，接受度就越高。　　2.隐喻图标　　两种不相关但却有着某种相似特质的事物用icon的方式链接起来，达到记忆和使用目的。比如：设置与工具，云端与云，购物与袋子，会员与钻石或皇冠等等。　　3.工具图标　　主要以行业类别为分类，使用范围广泛，大众或行内人士识别度高，且被长期使用。比如：建筑行业，医疗行业，化工行业等等。　　4.混合图标　　也就是前三种的结合，目的在于达到不同的视觉效果和应用结构。前段时间追波很流行的MBE粗描边风格icon就是综合图标的产物，多表达设计师个人设计风格或适用某类设计感较强的软件。　　设计风格分类　　按设计风格分类：面性图标，线性图标，扁平图标，拟物图标，2.5D图标和桌面应用图标　　1.面性图标　　使用范围最广，稳定性强，区分页面层次感更高。设计UI页面时，使用也要从页面层级关系和产品功能角度考虑具体运用。面性图标的分类也有很多，不仅仅只有常规的，还有多色，渐变，不透明叠加，插画，扁平投影等等。　　2.线性图标　　使用感更轻盈，精致度更高，简约风格页面使用最多，也是当下流行的风格之一。除了常见的纯色线状图标之外，还分双色或多色，多种粗细结合，缺口型，渐变，描边不透明叠加等等。　　3.扁平图标　　其实就是线+面，面+面。变现方式多样，拓展性强，更个性化，年轻化一些，相同，同样设计风格的icon，在更换颜色后就能体现和传达不一样的信息。　　4.拟物图标，2.5D图标和桌面应用图标　　三、运用场景与选择图标　　运用场景的选择一定是在设计风格确定后，进行选择使用的，不能把icon运用场景和设计风格下的图标概念混淆(你细品)。使用图标的前提一定是风格类型一致，判断风格一致的方法就是看图标设计风格分类和绘制原则。　　主要运用的场景分为5种：顶部导航栏，底部标签栏，金刚区，交互区，分类列表　　1.顶部导航栏　　UI页面顶部主要以轻便为主，不易过重，图标使用也以简单简洁为主，不能太抢眼，起到便捷引导作用，准确表达，一般使用单图标，不结合文字。　　2.底部标签栏　　位于主页页面底部，利于用户页面切换，图标数量一般控制在3～5个为宜，采用图标结合文字的方式体现产品功能。　　3.金刚区　　之所以称之为金刚区，是因为它一般位于主页中部位置，在banner或搜索栏之下，是产品主要功能区的核心集中位置，为子板块做引流，用户流量40%～58%都是来自于金刚区，它占用首屏位置大概在22%～25%之间，采用图标结合文字的方式体现产品功能。　　4.分类列表　　一般都是瀑布流排列，宫格排列，色块排列，统一页面风格，准确表达，利用用户定位功能模块。　　5.交互功能区　　这就是交互性图标使用最多的地方，收藏，点赞，刷新，搜索等等。　　五、写给设计师　　1.图标的使用同样需要前期思考：分析用户，功能信息，竞品分析和行业经验。(和个人中心设计原则是一样的思维模式　　2. 图标设计需要在遵循原则的情况下进行个性化创作，与辨识度和适用性相结合，不断提升用户使用体验感和信息感知速度，准确传达信息。　　3.多分析思考，积累知识，提高自己对运用的敏感性，一起加油吧～发布于 2020-08-24 17:21赞同 6添加评论分享收藏喜欢

LOGO设计_猪八戒网

服务企业100万+解决需求18年专注企服LOGO设计，让品牌更具生命力

我们有原创设计，独具匠心，一笔一划赋予LOGO个性与使命

互联网

餐饮美食

教育培训

酒店服务

医疗养生

食物生鲜

立即发布设计需求 >>

一张表格看懂：为什么找LOGO设计，上猪八戒网就够了

专注品牌设计18年，为雇主提供更经济，高效的一站式品牌设计服务

专注设计18年，我们用实力说话

100000+设计案例，专注所以更专业

坚持原创，恰到好处的LOGO设计，让LOGO成为企业精神象征

信任，让我们满足您的企业需求>>

专业的设计人才，更值得我们拥有

精选10万+设计人才，为您精准匹配需求，品质更有保障

Follow

tp钱包官网版app正版|icon设计风格有哪些

tp钱包官网版app正版|icon设计风格有哪些

LOGO设计_猪八戒网

6种UI设计常用的图标设计风格-即时设计

图标太多分不清楚？可能是最全面的图标设计类型和风格总结！ - 优设网 - 学设计上优设

Just a moment...

史上最全的图标类型和设计风格总结 - 25学堂

设计师必看的图标（icon）设计指南 - 知乎

5大图标设计风格，也是未来的趋势走向 | 设计达人

UI设计中图标类型指南 - 知乎

UI设计中图标类型有哪些？ - 知乎

LOGO设计_猪八戒网

最近的新闻

您可能喜欢的文章

tokenpocketapp手机版下载|屎币属于什么链

苹果怎么下载比特派钱包|货币汇率下跌是升值还是贬值

比特派怎么下载苹果手机

怎么联系比特派钱包客服

小米手机怎么安装比特派

比特派钱包怎么安装app

比特派的TRX怎么获得