图标_ICON设计

icon的设计理念
icon的设计理念是一种简洁、直观和可识别的图形符号，用来表示特定的概念、行为或功能。

它们通常用于用户界面（UI）设计中，在各种电子设备和应用程序中广泛应用。

首先，icon的设计理念是简洁性。

简洁的图形可以更容易被识别和理解。

它们通常由基本的几何形状和线条组成，避免使用太多细节或复杂的图案。

简洁的设计帮助用户更快地理解图标所代表的含义，并在界面中找到所需的功能或选项。

其次，icon的设计理念是直观性。

直观的图标应该能够以直接的方式与用户沟通，使用户能够迅速理解其含义，而不需要额外的说明或文字。

这要求图标的形状和颜色应与所代表的概念或功能相关联。

例如，一个放大镜的图标通常用于搜索功能，一个垃圾桶的图标通常用于删除操作。

此外，icon的设计理念是可识别性。

可识别的图标应该在不同的场景和尺寸下都能够被用户轻松识别。

这意味着图标应该在设计时考虑尺寸、比例和清晰度。

对于小尺寸的图标，要保持简洁性和直观性，并避免使用过多细节，以确保其在较小的空间中仍然能够清晰可辨。

此外，随着技术的发展和用户体验的重视，icon的设计理念还应该考虑到用户的情感与情绪。

最后，icon的设计理念也要考虑到品牌和风格的统一性。

在同一个应用程序或系统中，不同的图标应该遵循相同的风格和设
计语言，以确保整体的一致性和用户的熟悉感。

总的来说，icon的设计理念是简洁、直观、可识别和与品牌风格一致。

通过遵循这些设计原则，我们能够创造出能够更好地为用户服务的优秀图标。

6.2 数字APP图标常见尺寸与设计规范知识要点1.APP图标设计遵循的图标尺寸标准2.图标（iCON）设计规范3.按钮（Button）设计规范课程目标1.了解Android、ios系统图标的尺寸要求2.了解手机APP设计规范以及对于图片采用格式一、失之毫厘，谬以千里。

在手机APP图标设计中要严格遵循图标尺寸标准APP的图标（ICON）不仅指应用程序的启动图标，还包括状态栏、菜单栏或者是切换导航栏等位置出现的其他标识性图片，所以IOCN指的是所有这些图片的合集。

由于不同设备的屏幕密度不同，ICON也受这一密度制约。

a ndroid平台不同屏幕密度下图标的具体尺寸要求：在低、中、高和特高密度屏幕密度中，程序主界面、启动图标和菜单栏的尺寸分别为36X36、48X48、72X72、96X96；状态栏、列表显示、切换、标签和对话框尺寸为：24X24、32X32、48X48、72X72；根据不同屏幕密度来确定图标的具体尺寸，才能让用户得到更好的体验。

说过Android的图标。

iOS的图标，按手机、设备版本类型区分如下表不同版本的iPhone拥有不同尺寸分辨率的屏幕，所以其图标尺寸也有所区别。

APP Store中的启动图标无论哪个版本都是1024X1024；主屏幕图标1-3代为57X57，后面的为114X114；搜索图标1-3代为29X29,4-7普通版为58X58，plus版为87X87；标签栏1-3代为38X38，其他为75X75；工具栏和导航栏图标1-3代为30X30,4-7普通版本为44X44，plus为66X66。

需要提醒的是，在图标设计中请用栅格化系统进行设计。

如果设计尺寸为1024 x 1024 px，尽可能的采用黄金比例设计。

能让图标得到更好的显示效果。

二、手机APP设计规范指对整套APP界面进行视觉设计UI风格的统一，对界面元素的样式、颜色、图标按钮和大小设定统一的规范和使用原则。

方便以后协调合作和APP视觉迭代。

ui设计icon的标准尺寸全文共四篇示例，供读者参考第一篇示例：UI设计中的icon是界面设计中重要的元素之一，它可以为用户带来直观的信息传达和操作指引。

在UI设计中，对icon的尺寸要求是非常严格的，因为不同尺寸的icon会影响整个界面的美观性和使用性。

制定一套标准尺寸对于UI设计的统一性和规范性至关重要。

在UI设计中，icon的标准尺寸一般是根据设计风格和界面布局来确定的。

一般来说，icon的尺寸有16*16px、24*24px、32*32px、48*48px、64*64px等多种规格。

16*16px的icon主要用于工具栏、标签栏等窄小的区域，24*24px的icon适用于一般按钮、菜单等中等大小的区域，32*32px的icon适用于主要功能按钮、导航栏等大尺寸区域，48*48px和64*64px的icon一般用于主要功能区域和弹出框等大面积显示的区域。

在制作icon时，设计师应该根据实际需求选择合适的尺寸，同时保持icon的层次分明和清晰度。

对于小尺寸的icon，设计师需要考虑它在不同设备和不同分辨率下的显示效果，尽量避免因尺寸太小而导致细节模糊不清的问题。

对于大尺寸的icon，设计师则需要保持icon 的简洁明了，避免因尺寸太大而显得臃肿和不雅观。

除了尺寸外，icon的设计风格也是非常重要的。

在UI设计中，常见的icon设计风格有扁平化风格、卡通风格、逼真风格等。

设计师应该根据界面风格和用户喜好选择合适的设计风格，使icon与整体界面风格相匹配，达到统一和谐的视觉效果。

icon的标准尺寸不仅仅是一个数字，更是一个设计的思考和实践过程。

设计师需要考虑icon的实际应用场景、显示效果和设计风格，才能制作出符合UI设计要求和用户体验的高质量icon。

只有在不断实践和总结中，设计师才能更好地把握icon的尺寸标准，为用户带来更好的界面体验。

第二篇示例：UI设计icon作为用户界面设计中不可或缺的元素，起着非常重要的作用。

UI设计基础-icon图标设计我们今天来说一下基于布尔运算下怎么绘画设计一些icon图标，作为新手我们起初不应该起点太高，先不用自己设计图标，我们可以在网上找一下大师设计的图标进行临摹，等我们熟练掌握技巧以后再开始自己设计。

我们用网上的一张icon来做事例:就拿这张图片中的第一个小图标来演示首先第一步:分析图标:如图表示,图标放大后实际上是分为了两层,里边是一层外边一层,里边相对的比较简单,是一个圆环,不过在细节上我们要注意,里边的这个圆环在端口处是圆角,而不是有楞的边,外边的图形相对复杂一些,我们可以看成半圆环与正方形的结合.这里我们要注意的:在我们设计icon的时候要先确定它的边的像素,如这个临摹图就是4像素的.下面我们来说一下如何临摹一,外图绘制1,确定整体大小我们可以看得出来,这个icon实际上是一个圆形如图所示:我们查看它的信息,可以看到这个圆形的大小是44乘44的像素,这样我们就可以开始自己的临摹了.2,画外图层如图我们画一个44*44像素的圆:然后外层图形的宽当初我们看了是4像素,那么我们就可以再做一个小圆,让大圆与小圆之间的宽为4像素.当会出外图层大致轮廓后,我们知道,最开始外图层是由几个半圆环和矩形组成的,同样是查看半圆信息,其实是直径为22像素的圆,所以我们就可以先画出一个直径为22像素的圆.然后同样的步骤我们再在这个圆形当中做一个小圆,两个圆形的差距为4像素,最终的图形结果如图所示3,确定位置我们看临摹的原图,查看信息可以看出,上下两个圆的圆心是在一条直线上的,然后就是打圆环与小圆环之间的距离,他们其实是没有距离的,然后在布尔运算中,我们知道,这两个圆环其实应该是一个图层,下面我们就把这两个圆环的图层合并,得出来的效果图就是这样的.4,完成图形这个时候为了保证图形的规范我们要用到辅助线,下面是一个圆形了,我们看原图是有6个圆形的,下面我们可以用这种方法:首先将小圆的圆心移动到大圆圆心处,然后以最新的圆心为远点复制出六个圆,效果图如下.然后把没用的部分切掉,就成了最终的图形了.二,内图绘制绘制步骤跟外图一样,做一个圆环如图所示:然后就是缺口处的圆形切口,我们可以先用矩形工具绘制一个三角形,先切除一个有棱角的切口,如图所示:然后我们画一个4像素的小圆,盖在上面就形成了好了这个小图标基本也就完成了,从中我们将了一些特殊图形的绘制过程,当然这些过程都是在Photoshop上操作完成的,其中运用了很多布尔运算的原则,做icon图标如果我们是新手就要先从临摹别人的开始,当掌握了熟练的技巧以后再开始自己创造,这样是非常有效率的.本文档由承辉学院原创。

icon设计过程中需要注意的事项批评别人的作品比自己制作一个优秀的作品要容易得多。

但如果你使用一个有系统的方式去批评，列出项目清单并准备好插图，它就会被认为是个成熟的分析！在我看来，图标设计正经历着一个过渡阶段。

一方面，屏幕分辨率在增长，因此要提高图标品质。

另一方面，我们仍拥有好的旧款图素。

16X16乃至于更小的图标仍在被广泛使用。

所以，这里为大家介绍一下在图标设计中很容易被观察到的错误。

1.图标间差异不充分有时，在一套图标中，我们的一些图标看起来很像，这让人很难分辨出哪个是哪个。

如果你不注意说明，你会很容易把这些图标混在一起。

MacOS．．．．． X中的图标。

我经常把他们搞混以致选错程序。

问题在显示小图标时变得更严重。

2.图标中元素过多图标越简单、简洁，就越好。

把一个图标中的元素控制到尽可能少的数量是很可取的。

然而，微软的设计师们，受到windows vista新的图标设计特征的启示，决定设计巨大、肿胀的图标来证明他们拥有庞大的预算。

每个图标用复杂的构图给我们展现出微小的信息，问题在于在使用小图标时你无法搞清它在描述什么。

甚至使用在大图标时，有时也不是那么容易搞清图标的含义。

3.不必要的元素。

图标应该被轻松识读。

图标元素越少越好。

最好让整个图像具有相关性，而不是只是一部分。

因此，你必须注意使用这些图标的环境。

让我们看看数据库中图标的例子：一眼扫过，没什么问题。

但是如果这个应用程序（或者独立工具栏）仅仅与数据库有关，你可以（也理应）去掉不必要的部分。

含义没有丢失，可是图标更好辨识了。

这是个BeOS5图标中使用不必要元素的鲜活例子。

这里的对号绝对多余，另外，它们为什么是红色的？4.一套图标的风格缺乏一致性图标风格上的一致使得多个图标称为一套。

一致性可以是以下的任何一种。

色彩设计、透视、大小、绘画技巧或以上多种的结合。

如果一套中只有一些图标，那么设计者可以把一些规则记在脑中。

可是如果一套中有许多图标，或者有好几个设计者在绘制（比如制作操作系统的图标），那么就要制定一些特别的规则。

我觉得网站中含义说的很明白了：图形设计巧妙地将C、Y、M三种单词性演绎出人性化的动态优美图案，由C 演化的火苗升腾图形象征超英美容事业蒸蒸日上，燎原大地；由Y与M演化出禾苗的图形彰显超英美容事业欣欣向荣，生机无限。

整个图形火苗与禾苗的结合展现超英以人为本，创新发展的企业文化，红色预示企业正朝着红红火火的胜利顶端锐意进取、冲刺，充分展现团结、奋进、向上的企业观念。

但我个人看来，它更像一只手，不管做什么，都要靠自己的手。

而且是美容连锁起家，那么美容更是需要手，类似火焰的线条更加体现出手指线条的纤细，柔软，和优雅。

公司会用他们温柔且富有灵气的手，为广大百姓提供更舒适的美容服务。

VI标志标准制图和标志方格坐标制图该怎么去制作，如何区别？其实区别不是很大，前者更精准它的做法，后者侧重于在应用系统中大型霓虹灯广告之类的应用，为了方便数格子！作品释义:标志释义：磐石地产的标志是对传统文化经典的延续。

体现企业具有中国特色的国际定位。

标志整体结构恢弘大气，以纡回层迭交相互连的优美山石为基础突出表现了企业名称“磐石”的外在意义，“磐”又通“盘”，石上盘踞的螭龙象征着吉祥、美观和威严，使整个标志的造型既厚重沉稳又富于变化，达到庄重与生动的和谐，宏伟与精巧的统一，磐石上的龙正欲腾飞，代表着企业内在的创新和进取精神，勾勒出一个稳重可靠，与众不同的专业形象。

标志的简化运用型中利用层叠的山石纹路组成“磐”字造型，结构穿插交错又好似城市一隅景色，充分体现了企业的房地产行业特性。

标志slogan:"鸿渐于磐石之安者"——诗经《易·渐》，意为鸿鸟渐渐的飞到涯岸水畔的巨石之上，安然的筑巢生活。

寓意磐石地产的产品项目给人们带来安居乐业，健康舒适的生活享受。

体现了磐石地产在一个全新发展时期的广博态度，一个对永恒伙伴的郑重承诺。

远洋地产logo释义2008年08月07日星期四09:39品牌标志：标志释义:远洋地产的标志是对历史经典的延续，也是启迪未来成功的起点。

30款优秀LOGO设计及释义Castle Print一个打印机品牌，该Logo直截了当地体现了了企业的业务性质：利用减色模型，直指其打印行业背景，同时通过色彩的混合塑造出一个与其品牌相符的城堡（Castle）形象。

Ryan-Biggs负空间的运动使得这幅Logo有一种奇幻的效果，完全考验你的空间想象力！B和R两个字母代表了这个品牌，微微的倾斜让整个设计看起来更有深度和立体感。

色彩搭配极为简单—红色，赋予了Logo更广的使用范围。

One LeafOne Leaf, 顾名思义，即一片树叶。

以此为轴线，就呈现出了如此简洁巧妙的画面。

Greener设计师用粗细不同的灯芯体(San-serif)字体塑造出一种现代感。

该Logo不但层次感强，更重要的是可以用单一色调复制重现（这也是评判Logo好坏的重要标准之一）。

TalkmoreTalkmore字面意思是“多说点儿”。

设计师采用象征的手法，用英文中的单引号分别代替字母“a”和“e”，从而在图形上给予品牌最鲜活的注解。

Black Sparrow看上去很简单的图标，但在细节处理上却达到了极致。

从麻雀(即Black Sparrow的中文)的图案到字体，柔和的曲线与平滑的字体相得益彰，将完整的设计融入品牌表现。

Swannie Lake富有时代气息的Avenir字体配合平滑的图案，不但与该Logo完美贴合，而且增添了一许微妙的色彩。

Elara Systems先介绍一下，Elara Systems是一个动画和动态模型工作室，也必然要求2D和3D的结合。

体现在Logo上，就是大家所看到的效果：柔软弯曲的字体配上3D的字母“e”（即首字母），很好的创意。

Onwine完美的字体搭配独到的理念，Onwine Logo为我们展现出一个酿酒商的特质，无论是图案还是字体设计都无可挑剔。

Popp什么叫一气呵成？这幅Logo将基于同一字体的设计方法带上了全新的高度。

每个字母都包含字母“O”，只是做了细微的改动就成了“P”，独具匠心。

ICON设计的7个实用原则2.ConsiderYourAudience2.考虑您的用户Youwillhavedifferentconsiderationsifyou'redesigninganintranetforasmal lcompany,ratherthanforaproductthatmaybesoldinternationally.Whencreati ngiconsculturalconsiderationsareimportant.Symbolsmaydifferforcommonel ementsyoumayuseforyourdesigns.给一家小公司设计内部网页，会与设计"畅销世界的产品"考虑不同的东西。

设计图标时，文化是需要着重考虑的。

在不同文化中，就算是常见元素，含义也可能会有所不同。

TurboMilkhasanothergreatarticle;thisoneiscalled10MistakesinIconDesign.Init,theypointoutsomeclearexamplesofwheremanyicondesignsgowrong.They discussnationalandsocialcharacteristicsinpointsevenofthearticle."Itis alwaysnecessarytotakeintoaccounttheconditionsinwhichyouriconisgoingto beused.Animportantaspecthereisnationalcharacteristics.Culturaltraditi ons,surroundingsandgesturescandifferradicallyfromcountrytocountry."Th eygoontogiveanexampleofhowmailboxesdiffergreatlybetweencountries.Appl eusesthesameexampleinitsHumanInterfaceGuidelines.TurboMilk上还有一篇精彩的文章《图标设计的10种错误》，里边例举了一些图标设计中的常见错误。

ICON的设计反思和总结灵感比工具重要这里坦白一下，这次设计纯PPT制作，原因很多啦，试用版PS过期懒得下载，PS用得不够溜等等。

但是都不重要，之所以用PPT画，也有因为全能俊杰的启发。

其实用什么软件真的真的没那么重要，不是说你用AI或PS就有卵用。

设计师核心竞争力是对艺术灵感和商业用途的把握与平衡。

自己第一次尝试，0基础，遇到最大的问题不是能不能画出来，而是想出一个有点新意，能有实际用途的idea都特么太困难了，源自于缺少对设计的积累和美感的捕捉。

只能靠多看案例，多想原因，多练习绘制来提升。

ICON设计的一些总结元素的造型尽可能简洁和完整：让用户越快反应出背后的逻辑越好表达符合的认知习惯：不是所有设计风格都可以和一些元素相搭配，注意符合生活中的认知习惯，夸张和变换都要有个度色彩搭配协调：之前一位女神曾说道，大量黑底白字的视觉体验不好。

诸如还有红蓝搭配有闪烁感之类，这方面需要补一下色彩学的知识避免踩坑。

除此之外，低饱和度的颜色可以更显高档感，因为颜色越饱和，传递的情绪越强烈，越容易影响用户。

这里在第二思路的设计中，卡通铅笔的躯干用了低饱和的'蓝色。

当然，借用一些优秀设计的配色就比较简单，像楼主钟爱网易的红黑和京东的红白。

说实话，我还是蛮喜欢黑底白图的。

囧。

位置排列体会：这一点深有体悟，在第二种思路的绘制中，笔的倾斜角和文字摆放的位置很大关联，既要保证元素的重心尽可能靠近几何中心，又要排列好两块元素，十分麻烦。

ICON应该是一套具有适用性且互相协调的集合，这次尝试设计了公众号的ICON，接下来可能会把文章开头结尾的一些图标也绘好。

这样才是完整的视觉系统。

【ICON的设计反思和总结】。

icon的设计理念Icon的设计理念Icon（图标）是一种简洁而富有意义的视觉表示，能够在有限的空间内传递特定的信息，帮助用户进行快速的认知和反应。

在现代科技时代，图标已经成为我们生活中的常见元素，在各种设备、应用程序和网站上随处可见。

因此，设计良好的图标对于用户体验和品牌形象非常重要。

以下是几个常见的 icon 设计理念。

1. 简洁明了：优秀的图标设计应该是简单直接的，能够一眼看出其所代表的含义。

它们应当摒弃冗余的细节和复杂的构图，而是通过精简的形状和线条来传达信息。

简洁的图标更容易被用户理解和记忆，使用户在使用过程中更加高效。

2. 直观易懂：图标应该能够立即将其所代表的功能或意义传达给用户。

它们应该具有直观的表示方式，让用户无需思考就能理解。

例如，常见的垃圾桶图标代表着删除功能，放大镜图标代表着搜索功能。

通过充分利用人们对于形状和符号的视知觉记忆，设计师可以提供一个简单而有效的沟通工具。

3. 一致性和可识别性：在设计 icon 的时候，应该保持一定程度的一致性，以便用户在不同的环境中轻松识别并使用。

这意味着，无论是在不同的应用程序、操作系统还是网站上，图标的形状、颜色和风格应该保持一致。

一致的图标设计有助于用户建立记忆，减少学习和适应的困难。

4. 准确的表达：图标应该能够准确地传递出其所代表的功能或概念。

设计师应该仔细考虑图标的形状、颜色和配比，以确保它能够在小尺寸和低分辨率的情况下仍然清晰可辨，同时保持其表达的准确性。

设计师还应该避免使用具有多种解释的符号，以免造成歧义。

5. 色彩和比例的平衡：图标的颜色和比例是设计中重要的考虑因素。

颜色应该与所代表的功能或概念相匹配，并与品牌形象或应用程序的整体风格保持一致。

图标的比例应该与周围的元素相协调，不应过大或过小，从而使它们在用户界面中显眼但不突兀。

总之，优秀的图标设计应该注重简洁明了、直观易懂、一致性和可识别性、准确的表达以及色彩和比例的平衡。

icon设计标准
Icon设计标准可以根据以下几个方面来确定：
1. 尺寸：最小的图标大小通常为12×12px。

在此基础上，图标的大小可以通过将先前的数字加倍来创建。

常见的图标尺寸有小、中、大三个尺寸。

小图标包括12×12、16×16、24×24、32×32、48×48px；中等图标包括64×64、96×96、128×128、256×256px；大图标包括512×512、1024×1024px。

2. 像素完美度：具有完美像素的图标会呈现出清晰明快的线条和形状。

在创建图标时，应以100%的比例进行设计，以使图标像素看起来更加完美。

此外，通过进一步放大图标可以确保其准确性。

3. 分辨率：随着高分辨率显示器和Retina显示器的普及，对像素完美图标的要求可能会逐渐减少。

以上内容仅供参考，具体标准可以根据项目需求和目标受众进行调整。

英国图标设计理念Icon Design Concept in the UKIcon design is an essential element in the field of visual communication. It serves as a universal language that allows people from different cultures and backgrounds to understand and interpret information quickly and efficiently. In the United Kingdom, icon design has a unique aesthetic and philosophy that reflects the nation's identity and values.The British approach to icon design is characterized by simplicity, functionality, and elegance. Icons are designed to be clean and uncluttered, focusing on essential elements and avoiding unnecessary details. This minimalist style is inspired by the famous British design movement, such as the Bauhaus and the Swiss style. It aims to create icons that are visually appealing, easily recognizable, and harmonious with their surrounding environment.Functionality is another essential aspect of British icon design. Icons are created to convey information and facilitate user interaction with various systems and applications. Whether it's on a computer screen, a mobile device, or a physical sign, icons are carefully designed to be intuitive and user-friendly. This means that they should be instantly understandable and capable of guiding users without the need for additional instructions. The British icon design philosophy emphasizes the importance of clear and effective communication, ultimately enhancing user experience and usability.In terms of icon aesthetics, the UK embraces a diverse range ofstyles and influences. The country has a rich history of art and design, from classical sculpture to contemporary graphic design. British icon designers draw inspiration from this rich cultural heritage, combining traditional elements with modern trends. For instance, they may reference historical symbols or motifs and give them a contemporary twist, resulting in unique and visually compelling icons. This fusion between tradition and innovation is what sets British icon design apart and makes it stand out in the global design community.Furthermore, the UK's icon design philosophy is deeply connected to its values of inclusivity and diversity. Icons are designed to be accessible to everyone, regardless of age, language, or cultural background. British icon designers prioritize clear and unambiguous visual representations that can be understood universally, transcending barriers and fostering global communication. This commitment to inclusivity and diversity echoes the country's reputation for being open-minded and welcoming to people from all walks of life.In conclusion, the British approach to icon design is characterized by simplicity, functionality, elegance, and inclusivity. Icons are designed to be visually appealing, easily recognizable, and intuitive for users. The UK's rich cultural heritage and commitment to diversity also play a significant role in shaping its icon design philosophy. With its unique blend of tradition and innovation, British icon design continues to be highly regarded and influential in the global design community.。

icon类的构造方法
icon类的构造方法有很多种，以下是一些常见的方法：
1. img法：使用Photoshop软件进行切图和修图，实现设计师交给我们的设计稿。

设计师可能会给我们两种格式的图片，一种是psd的，可以使用PS剪切图层，一种是png的，使用PS抠图。

2. background法：给div设置背景图片。

需要注意的是，当div的大小比图片的大时，如果不设置no-repeat会连续出现背景图片。

3. 雪碧图：使用谷歌搜索css sprites generator，雪碧图代码生成器，然后把我们的图标上传，下载生成好的图片，使用生成的css代码，就会出现我们想要的图标了。

4. font法：有两种分支，一种是HTML，一种是css。

首先进入到阿里的iconfont的网站，找到我们想要的图标。

5. SVG：这是一种矢量图形格式，可以通过简单的图形和线条来创建复杂的图标。

以上方法仅供参考，建议根据实际需求选择合适的方法。

在很多APP首页的金刚区，动态icon是一个常见的设计。

由于几百像素的二维空间所能承载的静态图像信息实在有限，因此不得不借助时间这一维度，使二维静态icon化身为“三维”动态icon。

所以动态icon设计，本质上是对流动信息的感知设计。

有别于我们在做PPT时给各种元素添加的动态效果，PPT的动效往往是为了配合演讲的节奏而强调元素的存在和变化，因为运动的事物总是更容易吸引视线。

而动态icon除了比静态icon更容易引起注意以外，它本身还要具有自叙故事的能力。

讲故事是考验品牌拓展能力的一个硬技能，故事讲得好，就能快速占领用户心智。

这需要我们在设计前就规划好故事脚本，也就是信息流动的秩序。

梳理信息秩序并不难，按照常用的脚本可以分为几种类型：视觉引导、情感共鸣、品牌背书、利益点曝光、任务引导等。

在实际的项目中通常会结合以上的一类或两类。

超过两类会对信息秩序和动态时长都造成不小的挑战，尽量避免。

来看几个简单的例子。

01/ 随申办·考拉海购动态类型：情感共鸣 + 视觉引导上海的朋友应该对这个小笼包印象深刻，它就存在于我们每天都要出示健康码的APP-随申办首页。

设计一方面选择了上海的经典美食小笼包作为情感传递的视觉载体，增强用户启动首页后的情感归属和心理认同，赋予一个工具类APP以有趣的性格，拉近与用户的距离。

另一方面小笼包本身发挥了“播报员”的职能：在有新消息的时候会弹出提示红点，引导用户点击查看；没有新消息的时候，也作为一个动态视觉引导元素，实时提供天气预报等日常信息。

与此类似的还有考拉海购在首页推出的考拉乐园。

考拉乐园是一个类似之前美团“袋鼠快跑”的促活养成型小游戏，通过合并同类项完成升级。

视觉元素十分简要，一只考拉抱着装满商品的礼盒，是一个有温度的icon设计，但却并不能很精准地传递出其小游戏的属性。

在3秒时间内，通过重新编排信息流动的秩序，相信一定能有比这更好的方案。

02/ 饿了么·有道翻译动态类型：视觉引导2020年疫情严重期间，线上买菜的需求爆棚，饿了么在首页金刚区添加了买菜功能的入口。

icon设计规范Icon设计规范是指对于图标设计的相关规范和要求。

在设计一个符合规范的图标时，需要考虑到图标的形状、颜色、大小和细节等方面。

以下是一份关于Icon设计规范的详细解释，总共1000字：1.形状设计规范：图标的形状应该简洁明了，避免过于复杂的细节。

为了使图标在各种不同的尺寸下都能清晰可识别，形状应该有足够的对比度。

图标的边缘应该平滑，不应该存在锯齿状的边缘或模糊的边缘。

2.颜色设计规范：图标的颜色应该根据所代表的意义来选择。

应该避免使用过于鲜艳或过于暗淡的颜色，而是选择一些中性或饱和度适中的颜色。

同时，为了增强对比度和可读性，图标的前景色和背景色应该有相对较大的差异。

3.大小设计规范：图标在不同的使用场景和设备上，可能需要以不同的尺寸呈现。

因此，在设计图标时，需要考虑到不同尺寸下的视觉效果和清晰度。

在较小的尺寸下，可以将图标的细节和弧度简化，以确保图标的可识别性。

4.细节设计规范：图标的细节设计需要注意每个元素的间距和比例。

图标中的每个部分都应该有适当的空白，不应该过于拥挤。

同时，需要保持整个图标的比例和平衡，在缩小或放大尺寸时能够保持良好的形态。

5.一致性设计规范：为了保持品牌或应用程序的一致性，设计师需要遵循一致的设计风格和风格指南。

图标的样式、颜色和形状应该与整体设计风格相匹配，以增强整体的可读性和连贯性。

6.可识别性设计规范：图标的设计应该使人们能够迅速地理解它所代表的含义。

设计师应该选择一些易于理解和与内容相关的符号来代表每个图标的含义。

与此同时，应避免使用过于独特或不常见的符号，以免造成困惑。

7.易用性设计规范：在设计图标时，需要考虑到它们在用户界面中的使用方式。

图标应该设计成易于点击、滑动和触摸，并且在不同的交互状态下也能清晰地展示。

此外，设计师还应遵循相应的无障碍设计规范，以确保所有用户都能够轻松使用图标。

总结起来，Icon设计规范包括形状设计规范、颜色设计规范、大小设计规范、细节设计规范、一致性设计规范、可识别性设计规范和易用性设计规范。

icon配色方案在设计中，icon（图标）配色方案是非常重要的一环，它直接影响到用户对产品的视觉感受以及交互体验。

一个合理的icon配色方案可以提升产品的吸引力和可用性。

本文将探讨icon配色方案的选择与设计，并提供几种常见的配色方案供参考。

一、配色方案的选择原则在选择icon配色方案时，我们可以根据以下几个原则进行考虑：1.一致性: icon所采用的颜色应与产品整体的色彩风格保持一致，以确保整体视觉效果的统一性。

2.对比度：选取不同的色彩作为icon的主要颜色，使得icon在不同的背景色上能够清晰可辨。

3.品牌识别：在设计icon时，可以借鉴品牌的主色调，以强化品牌的识别度。

4.情感表达：颜色具有情感的表达功能，在设计icon时可以根据不同的情感类型选择相应的配色方案。

二、常见的icon配色方案1.单色配色方案单色配色方案是最简单和常见的方案之一，它使用的是同一种颜色，不同的明暗度或透明度来区分不同的功能或状态。

单色配色方案可以使icon看起来简洁、清晰，并且在各种背景色下都能够清晰可辨。

2.互补色配色方案互补色是指在色彩环上相对的两种颜色，它们具有对比鲜明的特点。

在互补色配色方案中，使用互补色作为icon的主要颜色，可以使icon更加醒目突出，吸引用户的注意。

3.类比色配色方案类比色是指在色彩环上相邻的颜色，它们具有类似的色调。

在类比色配色方案中，使用相邻的类比色作为icon的主要颜色，可以使icon看起来和谐、自然。

4.渐变色配色方案渐变色配色方案是指在icon中使用多个颜色的渐变过程。

渐变色的使用可以赋予icon柔和、流畅的视觉效果，增加视觉层次感。

5.黑白配色方案黑白配色方案是一种经典的配色方案。

使用黑白色调可以使icon看起来简洁、大方，并且不会受限于其他色彩的干扰。

三、icon配色方案的设计技巧除了选择适合的配色方案外，设计师还可以运用以下几个技巧来提高icon的设计质量：1.色彩搭配：在选择颜色时，可以使用配色工具，例如Adobe Color 等，根据色彩的互补性、相似性等原则进行搭配。