如何记录/映射嵌入式应用程序的GUI转换和状态

Question

我一直在开发一个GUI应用程序。在QtQuick，QML，C++中。

这是一个嵌入式应用程序，不是网站

短问题

如何记录我的GUI流程，并绘制所有屏幕和组件在其中使用的地图。

现在我用单词

make a rough sctech using box and lines --> Make it a picture --> Paste in excel --> use hyperlinks to track transitions.

但这既不专业，又费时。

详细问题

文档化的主要目的是使其他程序员能够轻松地理解设计，轻松地开发C++代码。

我想记录一下我的GUI，就像它应该回答以下问题一样

1.How many screens do I have,
2.What is the relation between them
3.How the flow is happening
4.What are the components should I create and such basic questions.

由于我使用的是QML，所以GUI逻辑与C++代码是分开的。

我见过有人提到State transition charts，wireframing和UML。

它是否适合嵌入式应用程序，它是否正确的轨道？

我想在没有压力的情况下快速完成文档处理。

最好举个例子。

谢谢！！

Answer 1

我建议创建一个状态机图。这是状态转换图的UML术语。每个屏幕都是状态；当应用程序显示屏幕X时，应用程序处于状态X。转换指定用户如何从一个屏幕导航到另一个屏幕。您可以根据用户导航所采取的操作来标记转换，但如果您只想概述屏幕及其关系，则可以省略这些标签。请参阅我的论文我们应该建立哪些UML模型？中的图13和图14，或者查看www.agilemodeling.com上的UI流程图。

为了模拟屏幕中的组件，我建议为每个屏幕提供一个单独的线框草图。有关更多信息，请参阅usability.gov

Answer 2

我建议使用金属丝框。UML (例如企业架构师)提供了适当的配置文件，您可以在其中显示图表上的屏幕，并将它们链接到例如MVC模型。请注意，虽然有线帧主要用于Web设计，但它可以很好地应用于嵌入式系统(例如，手机是只具有web访问权限的嵌入式系统)。