一种用户界面原型图形的配置系统及配置方法与流程

本发明涉及ux设计技术领域，具体涉及一种用户界面原型图形的配置系统及配置方法。

背景技术：

如今，随着以用户为中心的设计理念不断加强，越来越多的产品专注于寻找最佳的设计方案。随着行业技术和方法论的发展，终端应用程序也越来越复杂，终端的种类也越来越多：移动终端，tv端，嵌入式终端，各种浏览器等。传统的交互设计方式只能静态描述，不能还原应用场景，这使得设计师与研发人员之间存在着沟通困难的问题。

技术实现要素：

为了克服上述技术缺陷，本发明提供了一种用户界面原型图形的配置系统及配置方法，该配置方法能完全模拟对应终端的交互方式，还原用户交互场景，大大减少了开发人员与ux设计师的沟通障碍。

为了达到上述技术效果，本发明提供了一种用户界面原型图形的配置系统，其特征在于，包括门户网站、ui组件库和基础动效库；

所述门户网站用于展示所述ui组件库和所述基础动效库的默认样式，以及代码实现并提供创建用户界面原型操作平台；

所述ui数据库用于提供创建用户界面原型的控件单元，用于构建用户界面原型图形；

所述基础动效库用于提供用户界面原型的动画效果。

进一步的技术方案为，所述ui组件库包括移动端组件库、tv端组件库和pc端组件库；

所述移动端组件库，包含一套符合移动端ui设计规范的基础控件，并提供触摸屏的交互方式，用于创建移动端及嵌入式终端用户界面原型；

所述tv端组件库，包含一套符合tv端ui设计规范的基础控件，并提供遥控器的交互方式，用于创建tv端用户界面原型；

所述pc端组件库，包含一套符合pc端ui设计规范的基础控件，提供鼠标及键盘的交互方式，用于创建pc端用户界面原型。

进一步的技术方案为，所述门户网站提供创建用户界面原型操作平台，用户可在所述门户网站通过拖拽或按钮添加及删除组件，并编辑已添加组件样式及动效。

进一步的技术方案为，所述门户网站提供切换主题风格功能，用户可以使用不同的风格来创建用户界面原型。

本发明还提供了一种用户界面原型图形的配置方法，包括以下步骤：

s1：设计师登录门户网站；

s2：选择要使用的风格：主题颜色和主题动效；

s3：设计师拖拽组件，绘制用户界面原型图形；

s4：对组件单元进行编辑；

s5：完成用户界面原型图形绘制，导出原型设计稿。

本发明与现有技术相比，具有如下有益效果：与传统的静态交互设计稿相比，使用本配置方法设计的原型稿中，会包含特定终端的交互方式及动画效果，能完全模拟对应终端的交互方式，还原用户交互场景，大大减少了开发人员与ux设计师的沟通障碍；本配置方法中不仅提供了pc端和移动端的组件库与动效库，还包含完整的tv端及嵌入式终端组件库与动效库，大大提高了tv端及嵌入式终端应用程序交互原型设计效率和开发效率。

附图说明

图1为本发明提供的用户界面原型图形的配置系统的示意图；

图2为本发明提供的用户界面原型图形的配置方法的流程图；

图3为本发明提供的用户界面原型图形的配置系统中ui组件库的组成示意图。

具体实施方式

实施例1

如图1所示，本专利实施例提供了一种用户界面原型图形的配置系统，其中包括：ui组件库101，基础动效库111，门户网站121；

所述ui组件库101，提供创建用户界面原型的控件单元，用于构建用户界面原型图形。

所述基础动效库111，用于提供用户界面原型的动画效果。

所述门户网站121，用于展示所述组件库及所述基础动效库的默认样式，及代码实现，并提供创建用户界面原型操作平台。

其中所述ui组件库101包括移动端组件库102，tv端组件库103，pc端组件库104。所述移动端组件库102，提供触摸屏的交互方式，用于创建移动端及嵌入式终端用户界面原型；所述tv端组件库103，提供遥控器的交互方式，用于创建tv端用户界面原型；所述pc端组件库104，提供鼠标及键盘的交互方式，用于创建pc端用户界面原型。所述基础动效库111可以自由的与所述ui组件库101相组合，生成所需要的控件。所述门户网站121，提供创建用户界面原型操作平台。设计师可在所述门户网站121通过拖拽或按钮添加及删除组件，并编辑已添加组件样式及动效。同时所述门户网站121提供切换主题风格功能，可以使用不同的风格来创建用户界面原型。

如图2所示，本专利提供基于所述组件库及动效库的界面原型图形的配置方法，包括以下步骤：

s1：设计师登录门户网站

s2：选择要使用的风格：主题颜色和主题动效；

s3：设计师拖拽组件，绘制用户界面原型图形；

s4：对组件单元编辑微调，达到理想效果；

s5：完成用户界面原型图形绘制，导出原型设计稿；

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

技术特征：

技术总结
本发明公开了一种用户界面原型图形的配置系统及配置方法，该系统包括门户网站、UI组件库和基础动效库；门户网站用于展示所述UI组件库和所述基础动效库的默认样式，以及代码实现并提供创建用户界面原型操作平台；UI数据库用于提供创建用户界面原型的控件单元，用于构建用户界面原型图形；基础动效库用于提供用户界面原型的动画效果。该配置方法能完全模拟对应终端的交互方式，还原用户交互场景，大大减少了开发人员与UX设计师的沟通障碍。

技术研发人员：林建;彭世伟;石磊
受保护的技术使用者：四川长虹电器股份有限公司
技术研发日：2018.11.14
技术公布日：2019.03.01