Summary

这节课整个教室只有8个学生

3个tutor贴心给feedback，今天这学费赚回本了！（

Learning Outcomes

在今天的应用课中，我们将通过网站界面的示例，识别并讨论视觉设计原则如何帮助用户理解界面。

• 识别视觉设计原则
• 理解界面中的格式塔（Gestalt）原则
• 为一个任务设计图标
• 练习对设计进行建设性的评审

视觉设计原则（20 分钟）

访问 American Express 网站：https://www.americanexpress.com/en-au/

• 针对课堂讲解过的每条视觉设计原则，在站点上各找一个不同的示例并讨论；若该原则在页面中出现，请提供裁剪后的截图。

  • 比例（Scale）
  • 层级（Hierarchy）
  • 平衡（Balance）
  • 对比（Contrast）
  • 重复（Repetition）
• 如果某一原则在站点上找不到合适示例，请讨论：若应用该原则，设计是否会更好？（请给出论证）

  

Gestalt Principles (20 mins)

访问 Medibank 网站：https://www.medibank.com.au/

为下列各一条格式塔原则寻找并讨论不同的实例：

• 相似性（Similarity）：外观相似的项目会被感知为一个整体/同一组。
• 延续性（Continuation）：人的视线会沿着元素的方向性流动把它们感知为一组。
• 共同区域（Common Region）：处在封闭边界内的对象，会被感知为一组。
• 接近性（Proximity）：位置接近的项目，会被感知为一个整体。
• 图底关系（Figure–Ground）：前景元素能从背景中被识别出来。

Secret Icon Design Challenge (15mins)

导师会为你的小组分配一个需要用图标表达的软件功能描述。

请用纸笔绘制3 个不同的图标概念草图。

• 本任务不允许查资料或参考范例
• 设计中仅使用 1 种颜色
• 每个图标中最多包含 3 个字母/数字
• 明确使用情境（具体应用与已知前提）

图标应当易于识别、有意义、有区分度、清晰且简洁——图标面积小，绘制不能过于复杂！

小组活动

对比并讨论组内每个人的不同设计，梳理各自优点，尝试把全组的最佳想法融合为一个图标设计。

• 每个人都必须提交一个设计
• 可以互相帮助，共同打磨彼此的方案
• 对比各成员的设计，选出 1 个代表方案向全班展示

图标设计规则提醒：

• 本任务不允许查资料或参考范例
• 设计中仅使用 1 种颜色
• 每个图标中最多3 个字母/数字
• 明确使用情境（具体应用与已知前提）

Guess the Icon!

将你们完成的图标展示给全班同学。

先以小尺寸展示，如有需要再放大。

其他小组能否猜中功能？

• 图标传达含义是否成功？
• 是否存在冲突或模糊的含义？
• 有哪些改进建议？
• 有无替代表达方式（曾否考虑过）？
• 是否需要美学层面的改进？

练习批评“糟糕设计”

当解释一个设计为什么对用户不友好时，你需要能够明确指出具体问题与具体原因。

1. 轮流描述该设计中的一个具体问题。
2. 指出被违反的特定原则/指南。
3. 结合 ISO 可用性的三项组件/度量来说明其影响。

   https://web.archive.org/web/20080224011057/http://paradisewithaview.com/