线框图基础Part1 中,我们了解了线框图的定义、线框图的类型,用户体验设计的5个层级等等。

线框图基础Part2 中,我们细致的介绍了一些重要的点,像是F型模式,“动作引导”,自解释性等等。

在“线框图基础系列”的最后一篇文章中,我们来看看关于线框图的更多信息。

线框图的重要性

  1. 有效表达概念和想法
  2. 易于创作,足够及时
  3. 支持前期的可用性测试
  4. 易于迭代和改变

1-6

线框图的关注点

  1. 内容UI元素 的识别和整理
  2. __信息和动作__的识别在应用程序中如何表现
  3. 以可以加快理解的方式来__放置和组织__信息
  4. 屏幕 / 页面导航:用户在使用应用程序时,如何导航
  5. 信息架构: 信息流 或者说 当前数据的信息层级 是什么?屏幕上展示的信息中,哪个应该是最重要的?
  6. 描述所有的用例和场景

线框图禁忌

  1. 不要使用颜色。使用不同的程度的灰色来描述区别,而不是通过色彩来区分它们。
  2. 不要使用图像。图像使人们从手头的任务分心。为了指出在这个地方应该有一个图片,你可以使用一个矩形来代替,然后在矩形中,打个叉(画个“X”)。
  3. 只使用常规的字体。字体不是线框图要讨论的东西。不过在线框图中,你可能还是需要使用不同的字号来区别各种标题和内容,以表达页面上文字信息的层级。

<< 线框图基础 - Part 2

关于作者:

Abhishek Jain

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