【工具类】WireFrame.cc:在线线框图绘制工具

作品分类：工具类  框图  页面  内容  在线  框图  绘制  工具  WireFrame

WireFrame.cc:在线线框图绘制工具是款极简主义的线框图绘制的应用，不仅易用而且界面漂亮。操作简单、直观，输出物也非常吸引人。

WireFrame.cc跟Mockflow这些线上原型工具类似，但是Wireframe.cc要更简洁一些，控件也非常基本简单，支持网页和手机横竖版三种模版。

1、线框图的定义

线框图是WEB页面的草图，展示了导航系统的骨架，或者每一页的内容的基本信息。线框图可以作为和项目成员、

客户分析讨论的视觉工具，从页面设计的需求、概念到架构图的过程中，都可以使用。

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

2、什么是线框图?

线框图是通过一系列的基本图形，如矩形、菱形、线条来设计页面的基本框架、界定页面包含的内容、各内容的排版，

这些内容可以是Logo、导航、目录菜单、统一的顶部、底部、名牌、内容等等。

3、线框图为什么会有效?

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

4、线框图处理什么?

当项目组提交一份网站的设计原型出来时，用户、客户和设计者会倾向可视化的原型具体元素而相对忽视原型的页面

结构和排版等。线框图尝试将网站的视觉感受和工作及阅读形式分离出来，避免美观的元素的页面框架的分析造成干扰。

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

a、关键的页面元素及其位置:头部、底部、导航、内容对象、品牌元素、产品列表等。

b、分组:边栏、导航栏、内容区域等等。

c、标签:页面标题、导航链接、内容对象的头部等。

d、标签和伪文字:在线框图中放置示范性的标签和文字。

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

简单而言:主页和模板。

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

下列这些页面应该设计线框图(包含但不限于此列):

主页、各子站点或主栏目的展示页、内容页面模板、讨论页、搜索结果页、产品列表页、产品详细页面、结账流程及其他流程页面、我的账号主页和模板页面、404 错误页。

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

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

线框图有三类级别:抽象视图、低保真度、高保真度；

抽象视图:仅展示基本的页面元素和功能名称，不涉及该内容和功能的细节，不涉及页面排版。

低保真度:只列出每页所需的头部、底部、导航类型、内容对象等，涉及基本的排版布局。

高保真度:和最终的设计非常接近，包含导航元素的尺寸和位置、标签、标题、清晰明确的排版布局。

7、标签和文字的展示

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

8、是否需要颜色?

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

一般而言，不使用颜色会让读者着重于思考页面的设计逻辑而不是页面的设计X。所以一般线框图都是黑、灰和白三种颜色为好。