一种可变形图标制作方法和系统技术方案

本发明专利技术涉及可变形图标制作技术领域，提供一种可变形图标制作方法和系统，本发明专利技术的方法包括：通过获取图标库的许可与授权导入图标库，对导入的图标库中的图标进行结构设计；基于触发条件定义图标的状态，为每个图标的状态定义相应的变形规则；定义每个图标的状态对应的样式，监听图标状态对应的样式的变化，根据定义的变形规则更新图标的状态，获得可变形图标。本发明专利技术的可变形图标制作方法和系统，可以根据用户的具体需求和图标的应用场景对可变形图标的触发条件级变形规则进行定制化的精准设计，降低可变形图标的设计成本，提升可变形图标的用户体验，提高可变形图标的变形响应效率，实现图标跟随应用场景的自适应变形。实现图标跟随应用场景的自适应变形。实现图标跟随应用场景的自适应变形。

【技术实现步骤摘要】
一种可变形图标制作方法和系统


[0001]本专利技术涉及可变形图标制作
，尤其涉及一种可变形图标制作方法和系统。

技术介绍

[0002]随着计算机技术的发展和人们对用户体验的不断追求，可变形图标(Shape
‑
shifting icons)在操作系统、移动端应用以及游戏领域的应用越来越被广泛。可变形图标是一种能够通过动态变化来表现软件或应用程序不同功能状态的图标。这种图标能够帮助用户更直观地理解软件或应用程序的不同功能，提高用户的使用体验。
[0003]在可变图标的设计过程中，需要考虑到图标的不同状态，用户交互对应的功能变化，以及不同功能变化带来的视觉样式的变化。而实现可变形图标需要在程序中实现相应的状态切换和图形变化。在可变图标的应用过程中，一些用户难以理解可变图标不同状态之间的差异，进而难以理解可变形图标的含义。此外，如果可变形图标的变化过于频繁或复杂，也会对用户造成困扰。如何在设计和实现时充分考虑各种因素，给出合理可行的设计方案，以提高用户的使用体验，是领域内对可变图标的重要研究方向。
[0004]因此，如何在降低可变形图标设计难度的同时，提供一种根据用户需要自适应变形的图标并在不同场景下提供高效、一致、流畅的使用体验，成为亟待解决的技术问题。

技术实现思路

[0005]有鉴于此，为了克服现有技术的不足，本专利技术旨在提供一种可变形图标制作方法和系统。
[0006]根据本专利技术的第一方面，提供一种可变形图标制作方法，包括：
[0007]通过获取图标库的许可与授权导入图标库，对导入的图标库中的图标进行结构设计；
[0008]基于触发条件定义图标的状态，为每个图标的状态定义相应的变形规则；
[0009]定义每个图标的状态对应的样式，监听图标状态对应的样式的变化，根据定义的变形规则更新图标的状态，获得可变形图标。
[0010]优选的，本专利技术的可变形图标制作方法，对导入的图标库中的图标进行结构设计，包括：根据主题、功能以及交互逻辑方式对图标进行分类，将分类后的图标存储在相应的图标文件夹结构中，为图标文件夹结构中的图标设置对应的图标格式。
[0011]优选的，本专利技术的可变形图标制作方法，基于触发条件定义图标的状态，包括：基于触发条件对图标的正常状态、悬停状态、选中状态进行定义，所述触发条件包括用户操作、应用程序上下文。
[0012]优选的，本专利技术的可变形图标制作方法，所述变形规则包括：图标的颜色修改规则、图标的形状修改规则、图标的透明度修改规则及图标的动画效果修改规则。
[0013]优选的，本专利技术的可变形图标制作方法，定义每个图标的状态对应的样式，监听图
标状态对应的样式的变化，根据定义的变形规则更新图标的状态，包括：在HTML中通过CSS类选择器将图标的状态对应的样式定义为相应的CSS类，为图标添加一个与图标的默认状态对应的初始CSS类，监听触发图标状态发生变化的事件，根据监听到的触发事件进行相应CSS类的添加和/或移除。
[0014]优选的，本专利技术的可变形图标制作方法，定义每个图标的状态对应的样式，监听图标状态对应的样式的变化，根据定义的变形规则更新图标的状态，包括：在HTML中通过内联样式属性为图标的状态定义样式，为图标添加一个与图标的默认状态对应的内联样式，监听触发图标状态发生变化的事件，根据监听到的触发事件改变图标的内联样式属性。
[0015]优选的，本专利技术的可变形图标制作方法，定义每个图标的状态对应的样式，监听图标状态对应的样式的变化，根据定义的变形规则更新图标的状态，还包括：在HTML中通过CSS类选择器将图标的状态之间过渡的动画帧或关键帧定义为相应的CSS类，为图标添加一个与图标的默认状态对应的初始CSS类，监听触发图标状态发生变化的事件，根据监听到的触发事件进行相应CSS类的添加和/或移除，在对相应CSS类的添加和/或移除的过程中运行定义的动画帧或关键帧相关的动画。
[0016]优选的，本专利技术的可变形图标制作方法，还包括：为存储可变形图标的图标库创建可追溯数据文件，所述可追溯数据文件包括图标文件的命名规范文件、图标库的版本变更记录文件、图标的使用指南以及样式指南。
[0017]优选的，本专利技术的可变形图标制作方法，还包括：对获得的可变形图标进行响应性和兼容性测试，根据实测试结果调整图标的状态样式和变形规则。
[0018]根据本专利技术的第二方面，提供一种可变形图标制作系统，所述系统包括图标制作服务端，用于通过获取图标库的许可与授权导入图标库，对导入的图标库中的图标进行结构设计；基于触发条件定义图标的状态，为每个图标的状态定义相应的变形规则；定义每个图标的状态对应的样式，监听图标状态对应的样式的变化，根据定义的变形规则更新图标的状态，获得可变形图标。
[0019]根据本专利技术的第三方面，提供一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现本专利技术第一方面所述的方法。
[0020]本专利技术的可变形图标制作方法和系统，具有以下有益技术效果：
[0021]1.通过获取图标库的许可与授权导入图标库，对导入的图标库中的图标进行结构设计，通过基于触发条件定义图标的状态，为每个图标的状态定义相应的变形规则，可以根据用户的具体需求和图标的应用场景对可变形图标的触发条件级变形规则进行定制化的精准设计，降低可变形图标的设计成本，提升可变形图标的用户体验。
[0022]2.通过定义每个图标的状态对应的样式，监听图标状态对应的样式的变化，根据定义的变形规则更新图标的状态，获得可变形图标，提高可变形图标的变形响应效率，实现图标跟随应用场景的自适应变形。
[0023]3.通过定义不同的动画帧或关键帧，并将其应用于图标，实现通过CSS动画切换图标状态，使图标状态的切换更加平滑连贯。
[0024]4.通过为存储可变形图标的图标库创建可追溯数据文件，提高可变形图标的管理规范性。
附图说明
[0025]为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
[0026]图1为一种适用于本申请实施例的可变形图标制作方法的系统的示意图；
[0027]图2为根据本专利技术实施例的一种可变形图标制作方法的步骤流程图；
[0028]图3为本专利技术提供的设备的结构示意图。
具体实施方式
[0029]下面结合附图对本专利技术实施例进行详细描述。
[0030]需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合；并且，基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。
[0031]需要说明的是，下文描述在所附权利要求本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种可变形图标制作方法，其特征在于，所述方法包括：通过获取图标库的许可与授权导入图标库，对导入的图标库中的图标进行结构设计；基于触发条件定义图标的状态，为每个图标的状态定义相应的变形规则；定义每个图标的状态对应的样式，监听图标状态对应的样式的变化，根据定义的变形规则更新图标的状态，获得可变形图标。2.根据权利要求1所述的可变形图标制作方法，其特征在于，对导入的图标库中的图标进行结构设计，包括：根据主题、功能以及交互逻辑方式对图标进行分类，将分类后的图标存储在相应的图标文件夹结构中，为图标文件夹结构中的图标设置对应的图标格式。3.根据权利要求1所述的可变形图标制作方法，其特征在于，基于触发条件定义图标的状态，包括：基于触发条件对图标的正常状态、悬停状态、选中状态进行定义，所述触发条件包括用户操作、应用程序上下文。4.根据权利要求1所述的可变形图标制作方法，其特征在于，所述变形规则包括：图标的颜色修改规则、图标的形状修改规则、图标的透明度修改规则及图标的动画效果修改规则。5.根据权利要求1所述的可变形图标制作方法，其特征在于，定义每个图标的状态对应的样式，监听图标状态对应的样式的变化，根据定义的变形规则更新图标的状态，包括：在HTML中通过CSS类选择器将图标的状态对应的样式定义为相应的CSS类，为图标添加一个与图标的默认状态对应的初始CSS类，监听触发图标状态发生变化的事件，根据监听到的触发事件进行相应CSS类的添加和/或移除。6.根据权利要求1所述的可变形图标制作方法，其特征在于，定义每个图标的状态对应的样式，监听图标状态对应的样式的变化，根据定义的变形...

【专利技术属性】
技术研发人员：钱可炜，张林辉，
申请(专利权)人：中电云计算技术有限公司，
类型：发明
国别省市：