html页面的设计图

Question

我的项目正在开发一个只有简单html页面的网站。要启动项目，我必须先做设计文档，因为我无法理解应该使用哪种UML图？

Answer 1

不，您不需要拥有UML文档，但是，如果使用得当，我会非常有帮助。

对我有很多帮助的三种图表是：

[1]（对象和）类图

从这开始。在简单的HTML页面的情况下，它非常容易。只需通过课程绘制您的网站将要具有的每个特定页面。

在这个例子中，我们有一个带有“Main”页面（index.html）的网站商店， 和“产品”页面。对于静态HTML页面， 你可以跳过“属性”，“方法”。

..............................................
..+----------------+..+--------------------+..
..| * : MainPage   |..| * : ProductsPage   |..
..+----------------+..+--------------------+..
..|                |..|                    |..
..|                |..|                    |..
..|                |..|                    |..
..+----------------+..+--------------------+..
..............................................

[2]活动图（“U.M.L. Flowchar”）

当您的用户点击页面上的链接时，该链接将进入下一页？

......................
.........(O)..........
..........|...........
..........|...........
..........v...........
..+----------------+..
..|  Enter         |..
..|  (MainPage);   |..
..|                |..
..+----------------+..
..........|...........
..........|...........
..........v...........
..+----------------+..
..|  ClickLink     |..
..| (CatalogPage); |..
..|                |..
..+----------------+..
..........|...........
..........|...........
..........v...........
..+----------------+..
..|  Enter         |..
..| (CatalogPage); |..
..|                |..
..+----------------+..
..........|...........
..........|...........
..........v...........
.........(X)..........
......................

[3]序列图

它们类似于活动图，但是更复杂， 它们更像是一个二维图。

只有在您理解它们的情况下才能使用它们。

.........................................................................
......+--------------+.....+--------------+........+-----------------+...
......| * : User     |.....+ * : MainPage +........| * : CatalogPage |...
......+-------+------+.....+------+-------+........+--------+--------+...
..............|...................|.........................|............
............+-+-+...............+-+-+.....................+-+-+..........
....start().|   |...enter().....|   |.....................|   |..........
.(O)=======>+   +==============>+   |.....................|   |..........
............|   |...............|   |..Show().............|   |..........
............|   |...............|   +===+.................|   |..........
............|   |...............|   |...!.................|   |..........
........+---+   |<--------------|   +<==+.................|   |..........
........|...|   |...............|   |.....................|   |..........
........|...|   |.ClickLink.....|   |.....................|   |..........
........|...|   |...("Catalog").|   |.......enter().......|   |..Show()..
........+-->+   +==============>+   +====================>+   +===+......
............|   |...............|   |.....................|   |...!......
............|   |...............+-+-+.....................|   |...!......
...finish().|   |.........................................|   |...!......
.( )<-------+   +<----------------------------------------+   +<==+......
............|   |.........................................|   |..........
............+-+-+.........................................+---+..........
.........................................................................

注意：在此示例中，用户（“actor”）将其显示为块类。

请记住，不要使用U.M.L.图，如果你不理解它们， 它会让你的工作变得困难，而不是帮助你。

干杯。

Answer 2

在大多数情况下，用例将帮助您确定至少功能要求。活动图可以很好地绘制用户与网站的交互。此后，您可以使用序列图或组件图。类图通常会出现较晚。

但基本上，选择完全取决于你。 UML不设置或要求任何进程约束。这些图表只是对同一主题提供了不同的观点。只需掌握一本UML书籍，就可以得到第一印象，哪种图表类型最适合什么;从你的问题看来，那里缺少基础知识（因为你没有指出你已经做过的任何研究）。

请记住，UML不是您唯一的选择。也许思维导图会做。这取决于你的任务。