这是__线框图基础__系列的第一篇文章,在这一系列文章中,我们将学习线框图基础、设计原则,以及线框图的重要性等等。那么,让我们从理解 '线框图'开始吧。

线框图

线框图是页面的二维草图,它展示了信息等级,功能,以及页面的内容。

相较之于概念笔记(Concept Note),线框图是展示解决方案(想法和概念)的更好方式。

线框图包含的内容

主要元素以及他们的位置(header, footer, 导航, 内容等)、成组的信息(菜单链接,内容)、内容标识(导航链接标识,内容标识)、占位符,内容文本(图像,描述)

1-5

UX的5个层级

James Carrett 认为用户体验设计设计有五个层级:战略、范围、结构、框架__和__界面。线框图在第四层上发挥作用,就是“框架

2-2

线框图的类型

基于细节,展示,行为以及评价,线框图可以分为两类。

3-1

低保真线框图

简单的手绘,或者软件画的基本结构,包含了信息、占位符和导航。

工具:纸张,Balasmiq, MS Office

4

高保真线框图

细致的屏幕设计,拥有可点击的功能和交互。
信息展示有充分的细节。

工具:Axure, MS Office, Just in mind 等。

5

关于作者:

Abhishek Jain

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