[发明专利]一种基于状态图的软件界面原型设计方法与工具

说明书

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

技术领域

本发明涉及界面交互设计技术领域，具体为一种基于状态图的软件界面原型设计方法与工具。

背景技术

原型设计是交互设计师与产品经理、软件开发工程师沟通的工具，是一个软件产品面市之前的一个框架设计。然而现在市面的原型设计，只是关注于用户界面的样式，以及简单的页面跳转动作。开发一个功能完整且稳定的软件，只有包含页面样式的静态设计图，没有代表软件系统状态变化的原型设计，是远远无法完成一个具有复杂的界面交互逻辑的软件系统的开发的。现阶段软件工程师在开发前，通常只有软件界面的设计图，每每需要与产品经理、交互设计师反复交流确认，才能了解原型设计图中，与界面交互相关的信息，进而通过一系列的逻辑判断语句，来实现软件界面交互的效果。缺乏一种交互设计师、产品经理、软件开发工程师通用的界面交互设计方法与工具。

发明内容

本发明的目的在于提供一种基于状态图的软件界面原型设计方法与工具，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：一种基于状态图的软件界面原型设计方法，具体包括以下步骤：

设计代表状态图的JSON格式的数据结构：将一个软件系统的所有界面交互行为与形态变化，抽象成一个状态图，并设计了一种特定JSON格式的数据结构，用于描述一个软件系统的状态图；

JSON数据生成可视化编辑界面：使用Web技术，将这种代表软件系统状态图JSON数据与生成可视化的、可编辑的原型界面交互绑定，用户在可视化界面上设计软件界面操作的原型，并导出、导入代表软件系统状态图的JSON数据。

优选的，所述设计代表状态图的JSON格式的数据结构具体为：整个软件系统的状态图是由一系列的有限状态机组成的，而一个有限状态机是由一系列的状态组成，且一个状态可以且仅可以通过触发规定的事件才能跳转到另一个状态，界面交互即触发事件，进而变更状态图当前生效的状态，状态的变更引起软件界面重渲染，使得软件系统界面呈现的形态与状态图当前生效的状态一致。

优选的，所述一个软件系统当前所处的形态，是由抽象化的状态所描述的，且严格遵循SingleSourceofTruth的原则。

优选的，在所述一系列的有限状态机中，一个简单有限状态机至少包含一个至多个状态，其中的某一个状态为有限状态机的初始状态，可以指定某个状态的type为final来定义该状态为终止状态，终止状态无可触发的事件，普通状态可以通过规定事件类型以及事件触发成功后有限状态机进入的活动状态。

优选的，在所述一系列的有限状态机中，还包括复杂的有限状态机，对于具备父子层级关系的状态，采用了等级状态机，对于具备兄弟平行关系的状态，采用了平行状态，对于需要保存访问历史信息的状态，采用了历史状态机。

优选的，在所述复杂的有限状态机中，软件系统进入某一个活动状态，可能还需要一定的条件，才能触发事件，进入下一个状态，采用了依赖注入的设计原则，在软件系统内非状态信息的额外背景信息，及状态变更的条件。