CN110502237A - 一种基于状态图的软件界面原型设计方法与工具 - Google Patents

一种基于状态图的软件界面原型设计方法与工具 Download PDF

Info

Publication number
CN110502237A
CN110502237A CN201910844885.6A CN201910844885A CN110502237A CN 110502237 A CN110502237 A CN 110502237A CN 201910844885 A CN201910844885 A CN 201910844885A CN 110502237 A CN110502237 A CN 110502237A
Authority
CN
China
Prior art keywords
state
interface
software
state diagram
json
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
CN201910844885.6A
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.)
Innovation Qizhi (guangzhou) Technology Co Ltd
Original Assignee
Innovation Qizhi (guangzhou) Technology 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 Innovation Qizhi (guangzhou) Technology Co Ltd filed Critical Innovation Qizhi (guangzhou) Technology Co Ltd
Priority to CN201910844885.6A priority Critical patent/CN110502237A/zh
Publication of CN110502237A publication Critical patent/CN110502237A/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

Abstract

本发明公开了界面交互设计领域的一种基于状态图的软件界面原型设计方法，具体包括以下步骤：设计代表状态图的JSON格式的数据结构：将一个软件系统的所有界面交互行为与形态变化，抽象成一个状态图，并设计了一种特定JSON格式的数据结构，用于描述一个软件系统的状态图；JSON数据生成可视化编辑界面：使用Web技术，将这种代表软件系统状态图JSON数据与生成可视化的、可编辑的原型界面交互绑定，用户在可视化界面上设计软件界面操作的原型，并导出、导入代表软件系统状态图的JSON数据，解决了交互设计师、产品经理、软件开发工程师关于用户界面交互逻辑的交流困难的问题，软件交互变得更加容易测试，测试工程师通过状态图清晰的了解整个软件的交互设计。

Description

一种基于状态图的软件界面原型设计方法与工具
技术领域
本发明涉及界面交互设计技术领域，具体为一种基于状态图的软件界面原型设计方法与工具。
背景技术
原型设计是交互设计师与产品经理、软件开发工程师沟通的工具，是一个软件产品面市之前的一个框架设计。然而现在市面的原型设计，只是关注于用户界面的样式，以及简单的页面跳转动作。开发一个功能完整且稳定的软件，只有包含页面样式的静态设计图，没有代表软件系统状态变化的原型设计，是远远无法完成一个具有复杂的界面交互逻辑的软件系统的开发的。现阶段软件工程师在开发前，通常只有软件界面的设计图，每每需要与产品经理、交互设计师反复交流确认，才能了解原型设计图中，与界面交互相关的信息，进而通过一系列的逻辑判断语句，来实现软件界面交互的效果。缺乏一种交互设计师、产品经理、软件开发工程师通用的界面交互设计方法与工具。
发明内容
本发明的目的在于提供一种基于状态图的软件界面原型设计方法与工具，以解决上述背景技术中提出的问题。
为实现上述目的，本发明提供如下技术方案：一种基于状态图的软件界面原型设计方法，具体包括以下步骤：
设计代表状态图的JSON格式的数据结构：将一个软件系统的所有界面交互行为与形态变化，抽象成一个状态图，并设计了一种特定JSON格式的数据结构，用于描述一个软件系统的状态图；
JSON数据生成可视化编辑界面：使用Web技术，将这种代表软件系统状态图JSON数据与生成可视化的、可编辑的原型界面交互绑定，用户在可视化界面上设计软件界面操作的原型，并导出、导入代表软件系统状态图的JSON数据。
优选的，所述设计代表状态图的JSON格式的数据结构具体为：整个软件系统的状态图是由一系列的有限状态机组成的，而一个有限状态机是由一系列的状态组成，且一个状态可以且仅可以通过触发规定的事件才能跳转到另一个状态，界面交互即触发事件，进而变更状态图当前生效的状态，状态的变更引起软件界面重渲染，使得软件系统界面呈现的形态与状态图当前生效的状态一致。
优选的，所述一个软件系统当前所处的形态，是由抽象化的状态所描述的，且严格遵循SingleSourceofTruth的原则。
优选的，在所述一系列的有限状态机中，一个简单有限状态机至少包含一个至多个状态，其中的某一个状态为有限状态机的初始状态，可以指定某个状态的type为final来定义该状态为终止状态，终止状态无可触发的事件，普通状态可以通过规定事件类型以及事件触发成功后有限状态机进入的活动状态。
优选的，在所述一系列的有限状态机中，还包括复杂的有限状态机，对于具备父子层级关系的状态，采用了等级状态机，对于具备兄弟平行关系的状态，采用了平行状态，对于需要保存访问历史信息的状态，采用了历史状态机。
优选的，在所述复杂的有限状态机中，软件系统进入某一个活动状态，可能还需要一定的条件，才能触发事件，进入下一个状态，采用了依赖注入的设计原则，在软件系统内非状态信息的额外背景信息，及状态变更的条件。
优选的，在所述JSON数据生成可视化编辑界面中，Web技术采用React+Redux框架的MVC设计理念，将描述状态图的JSON数据注入到Redux框架的模型中，并将每个状态下的事件注入为Redux的reducer，从而实现可视化界面始终作为JSON数据的UI可视化界面的实现。
优选的，还包括实现所述该种基于状态图的软件界面原型设计方法的工具，该工具包括JSON编辑器和可视化编辑器。
与现有技术相比，本发明的有益效果是：
1、解决了交互设计师、产品经理、软件开发工程师关于用户界面交互逻辑的交流困难重重，从静态设计图中梳理出界面交互逻辑，并将这些复杂的逻辑转化成的技术语言，并最终形成可执行的编程语言这一过程中的种种困难与沟通交流的问题；
2、利用状态图这种设计模式，将软件系统抽象成一系列的状态与事件后。抛弃了原有面向过程的开发过程，拥抱函数式编程；由原有的驱动式编程，替换成命令式编程简化了软件开发工程师的编程复杂度；
3、软件交互变得更加容易测试，测试工程师也可以通过状态图清晰的了解整个软件的交互设计。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明方法工作流程图；
图2为本发明JSON数据以及MVC生成的可视化编辑界面图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
请参阅图1，本发明提供一种技术方案：一种基于状态图的软件界面原型设计方法，具体包括以下步骤：
设计代表状态图的JSON格式的数据结构：将一个软件系统的所有界面交互行为与形态变化，抽象成一个状态图，并设计了一种特定JSON格式的数据结构，用于描述一个软件系统的状态图；
JSON数据生成可视化编辑界面：使用Web技术，将这种代表软件系统状态图JSON数据与生成可视化的、可编辑的原型界面交互绑定，用户在可视化界面上设计软件界面操作的原型，并导出、导入代表软件系统状态图的JSON数据。
其中，所述设计代表状态图的JSON格式的数据结构具体为：整个软件系统的状态图是由一系列的有限状态机组成的，而一个有限状态机是由一系列的状态组成，且一个状态可以且仅可以通过触发规定的事件才能跳转到另一个状态，界面交互即触发事件，进而变更状态图当前生效的状态，状态的变更引起软件界面重渲染，使得软件系统界面呈现的形态与状态图当前生效的状态一致。一个软件系统当前所处的形态，是由抽象化的状态所描述的，且严格遵循SingleSourceofTruth的原则。
在所述一系列的有限状态机中，一个简单有限状态机至少包含一个至多个状态，其中的某一个状态为有限状态机的初始状态，可以指定某个状态的type为final来定义该状态为终止状态，终止状态无可触发的事件，普通状态可以通过规定事件类型以及事件触发成功后有限状态机进入的活动状态。
在所述一系列的有限状态机中，还包括复杂的有限状态机，对于具备父子层级关系的状态，采用了等级状态机，对于具备兄弟平行关系的状态，采用了平行状态，对于需要保存访问历史信息的状态，采用了历史状态机。
在所述复杂的有限状态机中，软件系统进入某一个活动状态，可能还需要一定的条件，才能触发事件，进入下一个状态，采用了依赖注入的设计原则，在软件系统内非状态信息的额外背景信息，及状态变更的条件。
其中，在所述JSON数据生成可视化编辑界面中，Web技术采用React+Redux框架的MVC设计理念，将描述状态图的JSON数据注入到Redux框架的模型中，并将每个状态下的事件注入为Redux的reducer，从而实现可视化界面始终作为JSON数据的UI可视化界面的实现。
还包括实现所述该种基于状态图的软件界面原型设计方法的工具，该工具包括JSON编辑器和可视化编辑器。
实施例：如图2所示，分别为一个智能交通灯界面原型设计的JSON数据以及MVC生成的可视化编辑界面。
在本说明书的描述中，参考术语“一个实施例”、“示例”、“具体示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
以上公开的本发明优选实施例只是用于帮助阐述本发明。优选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书的内容，可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本发明的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本发明。本发明仅受权利要求书及其全部范围和等效物的限制。

Claims (8)

1.一种基于状态图的软件界面原型设计方法，其特征在于：具体包括以下步骤：
设计代表状态图的JSON格式的数据结构：将一个软件系统的所有界面交互行为与形态变化，抽象成一个状态图，并设计了一种特定JSON格式的数据结构，用于描述一个软件系统的状态图；
JSON数据生成可视化编辑界面：使用Web技术，将这种代表软件系统状态图JSON数据与生成可视化的、可编辑的原型界面交互绑定，用户在可视化界面上设计软件界面操作的原型，并导出、导入代表软件系统状态图的JSON数据。
2.根据权利要求1所述的一种基于状态图的软件界面原型设计方法，其特征在于：所述设计代表状态图的JSON格式的数据结构具体为：整个软件系统的状态图是由一系列的有限状态机组成的，而一个有限状态机是由一系列的状态组成，且一个状态可以且仅可以通过触发规定的事件才能跳转到另一个状态，界面交互即触发事件，进而变更状态图当前生效的状态，状态的变更引起软件界面重渲染，使得软件系统界面呈现的形态与状态图当前生效的状态一致。
3.根据权利要求2所述的一种基于状态图的软件界面原型设计方法，其特征在于：所述一个软件系统当前所处的形态，是由抽象化的状态所描述的，且严格遵循SingleSourceofTruth的原则。
4.根据权利要求3所述的一种基于状态图的软件界面原型设计方法，其特征在于：在所述一系列的有限状态机中，一个简单有限状态机至少包含一个至多个状态，其中的某一个状态为有限状态机的初始状态，可以指定某个状态的type为final来定义该状态为终止状态，终止状态无可触发的事件，普通状态可以通过规定事件类型以及事件触发成功后有限状态机进入的活动状态。
5.根据权利要求3所述的一种基于状态图的软件界面原型设计方法，其特征在于：在所述一系列的有限状态机中，还包括复杂的有限状态机，对于具备父子层级关系的状态，采用了等级状态机，对于具备兄弟平行关系的状态，采用了平行状态，对于需要保存访问历史信息的状态，采用了历史状态机。
6.根据权利要求5所述的一种基于状态图的软件界面原型设计方法，其特征在于：在所述复杂的有限状态机中，软件系统进入某一个活动状态，可能还需要一定的条件，才能触发事件，进入下一个状态，采用了依赖注入的设计原则，在软件系统内非状态信息的额外背景信息，及状态变更的条件。
7.根据权利要求1所述的一种基于状态图的软件界面原型设计方法，其特征在于：在所述JSON数据生成可视化编辑界面中，Web技术采用React+Redux框架的MVC设计理念，将描述状态图的JSON数据注入到Redux框架的模型中，并将每个状态下的事件注入为Redux的reducer，从而实现可视化界面始终作为JSON数据的UI可视化界面的实现。
8.根据权利要求1-7任一所述的一种基于状态图的软件界面原型设计方法，其特征在于：还包括实现所述该种基于状态图的软件界面原型设计方法的工具，该工具包括JSON编辑器和可视化编辑器。
CN201910844885.6A 2019-09-07 2019-09-07 一种基于状态图的软件界面原型设计方法与工具 Pending CN110502237A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910844885.6A CN110502237A (zh) 2019-09-07 2019-09-07 一种基于状态图的软件界面原型设计方法与工具

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910844885.6A CN110502237A (zh) 2019-09-07 2019-09-07 一种基于状态图的软件界面原型设计方法与工具

Publications (1)

Publication Number Publication Date
CN110502237A true CN110502237A (zh) 2019-11-26

Family

ID=68591334

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910844885.6A Pending CN110502237A (zh) 2019-09-07 2019-09-07 一种基于状态图的软件界面原型设计方法与工具

Country Status (1)

Country Link
CN (1) CN110502237A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111625233A (zh) * 2020-05-25 2020-09-04 天津中新智冠信息技术有限公司 状态图的配置方法、装置、设备及存储介质
WO2022140880A1 (zh) * 2020-12-28 2022-07-07 深圳元戎启行科技有限公司 有限状态机的控制方法、装置、计算机设备和存储介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102176200A (zh) * 2009-09-25 2011-09-07 南京航空航天大学 一种软件测试用例自动生成方法
CN104050087A (zh) * 2014-07-04 2014-09-17 东南大学 一种基于uml模型的软件架构正确性验证方法
CN104331211A (zh) * 2008-09-29 2015-02-04 费希尔-罗斯蒙特系统公司 用于配置和管理过程控制系统的动态用户界面
US9424168B2 (en) * 2012-03-20 2016-08-23 Massively Parallel Technologies, Inc. System and method for automatic generation of software test
CN106095679A (zh) * 2016-06-12 2016-11-09 南京大学 基于手绘识别的图形界面测试用例生成方法
CN106227667A (zh) * 2016-07-28 2016-12-14 南京大学 一种基于扩展的ifml的移动应用的测试用例生成方法
CN106569838A (zh) * 2016-11-18 2017-04-19 天津理工大学 基于qp框架的代码自动生成器
CN109871206A (zh) * 2019-03-14 2019-06-11 杭州安恒信息技术股份有限公司 Json树的视图化方法、装置、设备及可读存储介质

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104331211A (zh) * 2008-09-29 2015-02-04 费希尔-罗斯蒙特系统公司 用于配置和管理过程控制系统的动态用户界面
CN102176200A (zh) * 2009-09-25 2011-09-07 南京航空航天大学 一种软件测试用例自动生成方法
US9424168B2 (en) * 2012-03-20 2016-08-23 Massively Parallel Technologies, Inc. System and method for automatic generation of software test
CN104050087A (zh) * 2014-07-04 2014-09-17 东南大学 一种基于uml模型的软件架构正确性验证方法
CN106095679A (zh) * 2016-06-12 2016-11-09 南京大学 基于手绘识别的图形界面测试用例生成方法
CN106227667A (zh) * 2016-07-28 2016-12-14 南京大学 一种基于扩展的ifml的移动应用的测试用例生成方法
CN106569838A (zh) * 2016-11-18 2017-04-19 天津理工大学 基于qp框架的代码自动生成器
CN109871206A (zh) * 2019-03-14 2019-06-11 杭州安恒信息技术股份有限公司 Json树的视图化方法、装置、设备及可读存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
刘一田 等: "可视化Web设计器", 《计算机系统应用》 *
刘乐: "程序运行状态可视化技术研究", 《中国优秀硕士学位论文全文数据库信息科技辑》 *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111625233A (zh) * 2020-05-25 2020-09-04 天津中新智冠信息技术有限公司 状态图的配置方法、装置、设备及存储介质
WO2022140880A1 (zh) * 2020-12-28 2022-07-07 深圳元戎启行科技有限公司 有限状态机的控制方法、装置、计算机设备和存储介质

Similar Documents

Publication Publication Date Title
Emanueli Sergio Bandinelli? y Alfonso Fuggetta? Carlo Ghezzi Luigi Lavazza?
Kristensen et al. The practitioner’s guide to coloured Petri nets
Szekely Retrospective and challenges for model-based interface development
CN108664245A (zh) 一种基于json自描述结构的网页界面生成方法及装置
Ardis et al. Software product lines: a case study
CN110502237A (zh) 一种基于状态图的软件界面原型设计方法与工具
CN107908398A (zh) 基于React技术构建web应用的方法
CN101470601A (zh) 一种零编码生成应用软件的方法及生成平台
CN1987772A (zh) 通用界面设计接口系统及使用该系统的界面开发方法
CN101551742A (zh) 辅助构建面向服务应用系统的向导组件
CN108965274A (zh) Dbc文件的解析方法及装置
CN108228455A (zh) 一种软件控制危险分析方法
CN108920143A (zh) 一种用于人机交互软件的快速开发方法
CN109753281A (zh) 一种基于图形化编程的微电网能量管理策略可视化开发工具
Yang et al. A novel framework of using petri net to timed service business process modeling
Afzalian et al. Systematic supervisory control solutions for under-load tap-changing transformers
CN104504199B (zh) 基于工作流引擎的多时间尺度主动配电网交互仿真方法
EP2045679A1 (en) A system and method for checking the consistency of a production schedule within a manufacturing execution system
CN104820871A (zh) Tps交易量预测与阈值范围预测的可视化方法与系统
Palanque et al. Towards an integrated proposal for Interactive Systems design based on TLIM and ICO
Misra et al. A model-integrated information system for increasing throughput in discrete manufacturing
Gaskell et al. Executable specifications and CASE
Vogel-Heuser et al. Usability and benefits of UML for plant automation–some research results
CN102857571B (zh) 组合服务仿真方法及装置
Khan et al. Automated Transformation of Use Case Maps to UML Activity Diagrams.

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20191126