wireframe

 

 

1. 线框图的定义

线框图是WEB页面的草图，展示了导航系统的骨架，或者每一页的内容的基本信息。线框图可以作为和项目成员、
客户分析讨论的视觉工具，从页面设计的需求、概念到架构图的过程中，都可以使用。

线框图的一个主要职能是界定页面模版的布局。

2. 什么是线框图？

线框图是通过一系列的基本图形，如矩形、菱形、线条来设计页面的基本框架、界定页面包含的内容、各内容的排版，
这些内容可以是Logo、导航、目录菜单、统一的顶部、底部、名牌、内容等等。

3. 线框图为什么会有效？

1. 只需要最小的技能就可以创建页面原型。
2. 允许对设计进行快速的反复测试。
3. 聚焦网站是如何工作和展示，而不是视觉的美感，避免在开发早期落入细节的误区。
4. 在项目早期就可以交付给客户审核，减少美工在设计阶段的反复工作量。

4. 线框图处理什么？

当项目组提交一份网站的设计原型出来时，用户、客户和设计者会倾向可视化的原型具体元素而相对忽视原型的页面
结构和排版等。线框图尝试将网站的视觉感受和工作及阅读形式分离出来，避免美观的元素的页面框架的分析造成干扰。

线框图应该包含哪些元素：

1. 关键的页面元素及其位置：头部、底部、导航、内容对象、品牌元素、产品列表等。
2. 分组：边栏、导航栏、内容区域等等。
3. 标签：页面标题、导航链接、内容对象的头部等。
4. 标签和伪文字：在线框图中放置示范性的标签和文字。

5. 那些页面应该制作线框图？

简单而言：主页和模板。

详细的说法是：任何需要客户批准的、和主页有着截然不同的排版和内容的页面。

下列这些页面应该设计线框图（包含但不限于此列）：

1. 主页。
2. 各子站点或主栏目的展示页。
3. 内容页面模板。
4. 讨论页。
5. 搜索结果页。
6. 产品列表页。
7. 产品详细页面。
8. 结账流程及其他流程页面。
9. 我的账号主页和模板页面。
10. 404 错误页。

6. 线框图的设计详细程度

线框图的设计详细程度依赖于项目处于那个阶段。

线框图有三类级别：

1. 抽象视图
2. 低保真度
3. 高保真度

抽象视图：仅展示基本的页面元素和功能名称，不涉及该内容和功能的细节，不涉及页面排版。
低保真度：只列出每页所需的头部、底部、导航类型、内容对象等，涉及基本的排版布局。
高保真度：和最终的设计非常接近，包含导航元素的尺寸和位置、标签、标题、清晰明确的排版布局。

7. 标签和文字的展示

目前而言有两种观点，一种是建议使用伪文字，因为这样阅读者不会被内容干扰。另一种则是寻求
线框图中反映有代表性的内容，这样可以捕捉到长标签和动态文字引起的问题，更加贴近实际使用。

8. 是否需要颜色？

在线框图中，颜色应该被保守的使用，原因很简单，视线容易被有颜色的元素所吸引而影响了对整体
布局逻辑的理解。

一般而言，不使用颜色会让读者着重于思考页面的设计逻辑而不是页面的设计美感。

所以一般线框图都是黑、灰和白三种颜色为好。

http://www.strangesystems.net/archives/000005.php