WireFrame.cc、在线框图绘制工具是非常简单主义的框图绘制应用,不仅容易使用,而且界面也很漂亮。操作简单直观,输出物也很有魅力。
WireFrame.cc与Mockflow等在线原型工具相似,但Wireframe.cc更简洁,控制也基本简单,支持网页和手机纵横版三种模板。
1.线框图的定义。
线框图是WEB页面的素描,显示了导航系统的框架,或者每个页面内容的基本信息。线框图可以作为项目成员,
客户分析讨论的视觉工具可以从页面设计的需求、概念到框架图的过程中使用。
线框图的主要功能之一是定义页面模板的布局。
2、什么是线框图?
线框图是矩形、菱形、线条等一系列基本图形,设计页面基本框架、定义页面包含的内容、各内容的布局
这些内容可以是标志、导航、目录菜单、统一的顶部、底部、品牌、内容等。
3、线框图为什么有效?
只需要最小的技能就可以创建页面原型。允许快速反复测试设计。着重于网站是如何工作和展示的,而不是视觉美感,避免在开发初期落入细节的误区。项目初期可交给客户审查,减少艺术设计阶段的重复工作量。
4、线框图处理什么?
当项目组提交站设计原型时,用户、客户和设计者倾向于可视化原型的具体要素,忽视原型页面。
结构和布局等。线框图试图分离网站的视觉感觉、工作和阅读形式,避免干扰美丽要素的页框分析。
线框图应包含哪些元素:
a、关键页面元素及其位置:头部、底部、导航、内容对象、品牌元素、产品列表等。
b、分组:边栏、导航栏、内容区域等。
c、标签:页面标题、导航链接、内容对象头部等。
d、标签和伪文字:在线框图中放置示范性标签和文字。
5.那些页面必须制作线框图
简单来说:首页和模板。
详细的说法是,需要客户认可的页面和主页完全不同的布局和内容。
以下页面应设置线框图(包括但不限于此列):
首页、各子网站或者栏目展示页、内容页模板、讨论页、搜索结果页、产品列表页、产品详情页、结账流程及其他流程页、我的账号首页和模板页、404错误页。
6、线框图的设计细节。
线框图的设计细节取决于项目处于那个阶段。
线框图有抽象视图、低保真度、高保真度三个等级
抽象视图:只展示基本的页面元素和功能名称,不涉及内容和功能细节,不涉及页面排版。
低保真度:只列出每个页面所需的头部、底部、导航类型、内容对象等,涉及到基本的排版布局。
高保真度:与最终设计非常接近,包括导航要素的尺寸和位置、标签、标题、清晰明确的布局。
7、标签和文字展示。
目前有两种观点。一个是建议使用伪文字。因为读者不会受到内容的干扰。另一个是在线框图中反映代表性的内容,捕捉长标签和动态文字引起的问题,更接近实际使用。
8.你需要颜色吗?
在线框图中,颜色应保守使用,原因简单,视线容易被有颜色的要素吸引,影响整体布局逻辑的理解。
一般来说,不使用颜色,读者不是页面的设计美感,而是重点考虑页面的设计逻辑。因此,一般线框图最好是黑色、灰色和白色。
网址入口:http://wireframe.cc/