Coursera 笔记

Module 01 · Designing Intuitive Front Ends and Mockup Design Principles直观前端与界面模型设计原则

Hands-on Lab: Create a Mockup Design for a Website using Draw.io动手实验：使用 Draw.io 创建网站界面模型

Coursera ↗

预计所需时间： 30 分钟

在本实验中，我们将介绍如何为一个展示流行流媒体平台病毒视频的网站创建用户界面。该界面将通过易于访问、易于阅读，并与更流行的网络、移动和平板设备兼容来帮助观众。我们还将实现线框设计，以展示界面屏幕之间的导航。

Draw.io 是一个免费的开源网站，用于创建图表、流程图、线框图和图示。该网站允许用户将文件保存到本地或云服务提供商。保存文件时，提供多种文件格式，例如 .png、.jpeg 和 .pdf。

目标

完成此实验后，您将能够：

  • 为网站创建用户界面
  • 设计用户友好的屏幕以增强可用性
  • 从线框图屏幕中说明用户导航

练习 1 : 设计用户界面

在本练习中，您将使用 Draw.io 设计用户界面。

  1. 首先，在您的浏览器中访问 https://draw.io。
  2. 接下来，当提示保存图表时，点击 稍后决定。
  3. 点击左侧形状面板中的方形图标。
  4. 绘制三个方形，以表示三个屏幕的用户界面。
  5. 点击顶部工具栏中的 矩形，为三个屏幕创建一个矩形，作为顶部导航栏。
  6. 接下来，创建三个矩形，并将它们放置在设计的底部，作为我们网站的底部链接。
  7. 再次使用矩形，在三个屏幕中的两个屏幕的左侧创建一个高矩形。这个矩形是额外网站链接的左侧导航栏。这两个屏幕将表示左侧的主页和右侧的管理页面。
  8. 再次使用矩形，在第三个屏幕的右侧创建一个高矩形。这表示视频播放界面页面上的其他视频和链接。
  9. 在视频播放屏幕上，放置一个矩形以表示用户选择的视频的播放区域。
  10. 接下来，在主页屏幕上，在顶部导航栏下方并靠左的右侧创建一个小而薄的矩形。该区域将用于代表来自流媒体网站（如 YouTube、Vimeo 和 TikTok）的病毒视频主题的不同按钮。
  11. 在主页屏幕上，在按钮区域下方创建六个占位符方形，以表示来自不同流媒体平台的不同病毒视频。
  12. 接下来，从工具栏中选择线条工具，并在主页屏幕的视频占位符底部行下绘制一条线。这条线将更具病毒性的视频与网站主页上的其余内容分开。
  13. 在管理屏幕上，创建一个方形以表示用户的头像或图像。
  14. 在管理屏幕上，创建一个矩形以表示用户的信息、订阅者数量、上传视频数量等。
  15. 最后，在管理屏幕上，在用户头像和信息区域下方添加一个最终矩形，以表示用户的播放列表、收藏的频道以及更多信息。

练习 2 : 将三个屏幕连接在一起

在本练习中，您将把屏幕连接在一起，以表示用户在使用网站时的屏幕导航。

  1. 首先，选择箭头图标，并从其中一个视频占位符连接到视频播放屏幕。当用户点击主页屏幕上的六个视频之一时，将显示包含所选视频的视频播放屏幕。
  2. 接下来，从主页屏幕添加一个箭头到管理页面屏幕。当用户点击顶部导航栏的右上角时，将显示管理屏幕页面。
  3. 接下来，从管理页面屏幕添加另一个箭头到视频播放页面屏幕。当用户点击视频或视频播放列表时，将显示视频播放屏幕页面。
  4. 最后，从视频播放页面屏幕的顶部导航栏左侧添加一个箭头到主页屏幕，以便用户点击网站徽标时返回网站的主页。

恭喜您！您已成功完成此实践实验，做得很好。您现在应该熟悉网站用户界面的设计。此外，您还学习了如何通过添加导航路径将不同的屏幕连接在一起，以表示用户的导航。

练习题

练习 3：创建和设计一个注册屏幕，以允许用户注册您的视频网站

  1. 点击左侧形状面板中的方形图标。
  2. 绘制一个方形，以表示注册屏幕的用户界面。
  3. 点击顶部工具栏中的矩形，为我们网站的顶部导航栏创建一个矩形。
  4. 接下来，创建一个矩形并将其放置在设计的底部，以便为我们的网站底部链接。
  5. 创建两个矩形并将它们放置在屏幕中间，上面的一个用于用户的电子邮件地址，下面的一个用于用户的密码。
  6. 最后，在电子邮件地址矩形下方创建并放置一个圆角矩形，以表示登录按钮。

恭喜您！您为用户创建了一个简单的用户界面，以便注册您的视频网站。

练习 4 : 创建和设计一个登录屏幕，以允许用户通过表单与您联系

  1. 点击左侧形状面板中的方形图标。
  2. 绘制一个方形，表示注册屏幕的用户界面。
  3. 点击顶部工具栏中的矩形，为我们网站的顶部导航栏创建一个矩形。
  4. 接下来，创建一个矩形并将其放置在设计的底部，以用于我们网站的底部链接。
  5. 在左侧创建并添加一个方形，用于列出您的联系信息，例如电话号码和重要的电子邮件地址。
  6. 接下来，添加两个矩形，用于用户的姓名和电子邮件地址。
  7. 创建并添加一个较大的矩形，以便用户可以包括他们可能有的任何评论。
  8. 最后，创建并添加一个圆角矩形作为表单按钮，以便用户可以发送他们的联系信息和评论。

恭喜！您成功创建并设计了一个联系表单的用户界面。

练习 5 : 创建和设计带分页功能的用户界面屏幕

  1. 点击左侧形状面板中的方形图标。
  2. 绘制一个方形以表示注册屏幕的用户界面。
  3. 点击顶部工具栏中的 矩形，为我们网站的顶部导航栏创建一个矩形。
  4. 接下来，创建一个矩形并将其放置在设计的底部，以表示我们网站的底部链接。
  5. 在左侧创建并添加三个方形，以表示您网站上的视频列表。
  6. 在方形旁边添加三个矩形，以提供有关每个视频的信息，例如视频标题、视频来源、每个视频的简要描述。
  7. 最后，在最后一个视频列表下方添加一个矩形，以表示用户可以点击查看其他视频列表的页码。

恭喜你！你成功为你的视频网站添加了分页功能。

作者

Corey Leong