CN109408061A - 一种用户界面原型图形的配置***及配置方法 - Google Patents

一种用户界面原型图形的配置***及配置方法 Download PDF

Info

Publication number
CN109408061A
CN109408061A CN201811354639.4A CN201811354639A CN109408061A CN 109408061 A CN109408061 A CN 109408061A CN 201811354639 A CN201811354639 A CN 201811354639A CN 109408061 A CN109408061 A CN 109408061A
Authority
CN
China
Prior art keywords
user interface
interface prototype
prototype
component gallery
component
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201811354639.4A
Other languages
English (en)
Inventor
林�建
彭世伟
石磊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Sichuan Changhong Electric Co Ltd
Original Assignee
Sichuan Changhong Electric Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Sichuan Changhong Electric Co Ltd filed Critical Sichuan Changhong Electric Co Ltd
Priority to CN201811354639.4A priority Critical patent/CN109408061A/zh
Publication of CN109408061A publication Critical patent/CN109408061A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

一种用户界面原型图形的配置***及配置方法
技术领域
本发明涉及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：完成用户界面原型图形绘制，导出原型设计稿；
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (5)

1.一种用户界面原型图形的配置***，其特征在于，包括门户网站、UI组件库和基础动效库；
所述门户网站用于展示所述UI组件库和所述基础动效库的默认样式，以及代码实现并提供创建用户界面原型操作平台；
所述UI数据库用于提供创建用户界面原型的控件单元，用于构建用户界面原型图形；
所述基础动效库用于提供用户界面原型的动画效果。
2.根据权利要求1所述的用户界面原型图形的配置***，其特征在于，所述UI组件库包括移动端组件库、TV端组件库和PC端组件库；
所述移动端组件库，包含一套符合移动端UI设计规范的基础控件，并提供触摸屏的交互方式，用于创建移动端及嵌入式终端用户界面原型；
所述TV端组件库，包含一套符合TV端UI设计规范的基础控件，并提供遥控器的交互方式，用于创建TV端用户界面原型；
所述PC端组件库，包含一套符合PC端UI设计规范的基础控件，提供鼠标及键盘的交互方式，用于创建PC端用户界面原型。
3.根据权利要求1所述的用户界面原型图形的配置***，其特征在于，所述门户网站提供创建用户界面原型操作平台，用户可在所述门户网站通过拖拽或按钮添加及删除组件，并编辑已添加组件样式及动效。
4.根据权利要求1所述的用户界面原型图形的配置***，其特征在于，所述门户网站提供切换主题风格功能，用户可以使用不同的风格来创建用户界面原型。
5.一种用户界面原型图形的配置方法，其特征在于，包括以下步骤：
S1：设计师登录门户网站；
S2：选择要使用的风格：主题颜色和主题动效；
S3：设计师拖拽组件，绘制用户界面原型图形；
S4：对组件单元进行编辑；
S5：完成用户界面原型图形绘制，导出原型设计稿。
CN201811354639.4A 2018-11-14 2018-11-14 一种用户界面原型图形的配置***及配置方法 Pending CN109408061A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811354639.4A CN109408061A (zh) 2018-11-14 2018-11-14 一种用户界面原型图形的配置***及配置方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811354639.4A CN109408061A (zh) 2018-11-14 2018-11-14 一种用户界面原型图形的配置***及配置方法

Publications (1)

Publication Number Publication Date
CN109408061A true CN109408061A (zh) 2019-03-01

Family

ID=65473469

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811354639.4A Pending CN109408061A (zh) 2018-11-14 2018-11-14 一种用户界面原型图形的配置***及配置方法

Country Status (1)

Country Link
CN (1) CN109408061A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111061479A (zh) * 2019-12-20 2020-04-24 深圳前海环融联易信息科技服务有限公司 Ui规范管理方法、装置、计算机设备及存储介质
CN113535164A (zh) * 2021-06-11 2021-10-22 中电金信软件有限公司 一种前端界面的生成方法、装置、电子设备及存储介质

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170177310A1 (en) * 2015-12-22 2017-06-22 Sap Se Software development using re-usable software components
CN107808002A (zh) * 2017-11-13 2018-03-16 山东省农村信用社联合社 一种门户网站内容动态布局及发布的方法

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170177310A1 (en) * 2015-12-22 2017-06-22 Sap Se Software development using re-usable software components
CN107808002A (zh) * 2017-11-13 2018-03-16 山东省农村信用社联合社 一种门户网站内容动态布局及发布的方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
JILEGW: "墨刀教程：如何快速制作一个App原型？", 《HTTP://API.WOSHIPM.COM/RP/614989.HTML?SF=MOBILE》 *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111061479A (zh) * 2019-12-20 2020-04-24 深圳前海环融联易信息科技服务有限公司 Ui规范管理方法、装置、计算机设备及存储介质
CN113535164A (zh) * 2021-06-11 2021-10-22 中电金信软件有限公司 一种前端界面的生成方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
Jain et al. AngularJS: A modern MVC framework in JavaScript
Ijiri et al. Seamless integration of initial sketching and subsequent detail editing in flower modeling
CN109408786B (zh) 智能小说辅助创作***
CN102521120A (zh) 一种软件自动化测试***及方法
CN107766042A (zh) 一种基于csar的模型文件的可视化设计方法及装置
CN102981855A (zh) 基于模板的界面自动生成的方法及***
CN103927163A (zh) 插件框架处理装置及插件***
CN108597014A (zh) 一种基于可视化编程的跨平台渲染效果的编辑***
CN109408061A (zh) 一种用户界面原型图形的配置***及配置方法
CN103793135A (zh) 用户界面树形结构显示方法及***
CN107515771A (zh) 基于SpringMVC的API文档生成方法及***
CN104503769B (zh) 一种基于xml配置文件的字符点阵液晶界面实现方法
CN106250134B (zh) 单一性语言的代码自动生成方法
CN103414750A (zh) Web可视化编辑ANDROID的客户端应用的***及方法
CN1987772A (zh) 通用界面设计接口***及使用该***的界面开发方法
CN106484413B (zh) 文档编辑器及文档编辑方法
CN106294112A (zh) 基于互联网的实时多人计算机程序开发调试***与方法
CN109513212A (zh) 一种2d***ui、剧情编辑方法及***
CN109471580A (zh) 一种可视化3d课件编辑器及课件编辑方法
Horst et al. Engaging practices: Doing personalized media
CN104793927A (zh) 一种界面编辑方法及装置
Ramón et al. GUI Generation from Wireframes
Sabraoui et al. A MDA-based model-driven approach to generate GUI for mobile applications
CN101303663A (zh) 一种数字机顶盒软件开发模拟测试方法
CN108132779A (zh) 一种基于arinc661的可视化df的设计验证方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20190301

RJ01 Rejection of invention patent application after publication