线框图基础 - Part 1 中,我们了解了线框图的定义,种类,以及用户体验设计的5个层次等。在这篇文章中,我们将在开始线框图工作之前,先了解一些重要的原则。

1. F形模式

人们任何阅读网页?不,他们不阅读。 —— Jacob Nielsen

人们 扫视 网页。

F形模式描述了大部分用户在面对块状内容时的视点热区。

1

重点:

  • 使网页文本易于被用户扫视。
  • 使用粗体的标题和子标题。
  • 当你想分开内容时,使用带圆点项目符号的列表。圆点项目符号易于扫视。
  • 根据等级来决定内容的次序和位置。

2.行为引导(Call to Action)*

*译注:也有翻译成“行为召唤”的。

“行为引导”是为网站最重要或主要任务设计的按钮或动作。

“行为引导”有助于使最终用户明白他们下一步该做什么,以及每次的点击会将他们带向何方。

2-3

通过这些方法来达到行为引导的效果:

  • 选择最终用户熟悉的词汇,而不是商业界的行话
  • 位置
  • 色彩
  • 大小
  • 减少次数

例如:

3-2

4-1

5-1

3.自解释性(Affordance)

根据 Norman(1988), 自解释性是一种设计方法:如果对象被建议如何使用,那么从视觉上,它就应该提示它的功能和用法。

好的设计是直观的,而好的自解释性帮助设计直观。
6

例如:

现实世界中的自解释性

7

数字世界的自解释性,例如:按钮、文本框

8

在下一篇文章中,我们将学习“创建低/中保真线框图”。

<< 线框图基础 - Part 1
线框图基础 - Part 3 >>

关于作者:

Abhishek Jain

原文链接:
http://www.uxness.in/2016/05/wireframing-basics-part-2.html