绘制一个线框图是你在制作一个网站前必须要经历的过程。线框图能够帮助你合理的组织并简化你内容和元素,
是网站内容布局的基本视觉表现方式
,是网站开发过程中一个重要的步骤。
一、线框图的好处:
- 让项目组成员在初期就可以对网站有个清晰明了的认知
- 能激发设计师想象力,使其在创作过程中有更多发挥空间
- 给开发者提供一个清晰的架构,让他们知道他们需要编写的功能模块
- 让每个页面的跳转关系都变得清晰明了
- 很容易的改变页面布局
二、绘制线框图的工具:
- 手绘:纸、笔
- 流程图或思维导图工具:Visio、Mindmap、MindManager
- 原型绘制软件:Balsamiq
、Axure
- 图形软件:Photoshop、Illustrator
- HTML工具:Dreamweaver
三、线框图实例:
1、简单纸面原型:
这是Broad Reach Retail Partners网站的简单纸面原型
2、低保真的HTML原型
:没加任何风格的网站内容陈列
3、低保真的布局原型
:界面布局线框图,由Jesse Bennett-
Chamberlain
设计
4、线框图原型:A preliminary mockup of a social conferencing tool built on
Tiddlywiki
for use at Le Web 3. The notes to accompany it are at
tiddleleweb.tiddlyspot.com
. Wireframe by
Phil Hawksworth.
5、线框图原型:This one is based on advanced use of a blog publishing system (WordPress). By
Mattheiu Mingassson or Activeside Internet Strategies and Consulting
.
6、线框图:A wireframe for the Embrace Pet Community
, by Jesse Bennett-Chamberlain of31Three
.
7、线框图:
A wireframe with color and images. Author page wireframe by Bokhandel
.
8、线框图:
另一个带色彩的线框图.
By Mattheiu Mingassson of Activeside Internet Strategies and Consulting
.
四、最佳范例要点:
- 简单设计
- 灰度模式展现:灰度有助于把注意力集中在产品功能层面和布局层面,如果直接加图片和颜色,容易让人陷入对色彩细节的判断中忽略掉功能层面更本质的东西。
- 线框图用网站地图串联起来
- 专注于理想结果
- 等同于真实分辨率尺寸
- 一开始就计划好内容和元素
五、要避免的问题:
- 内容太多,重点不突出
- 强调颜色和设计
- 过多的设计细节
另外,介绍一个专门讲线框图的网站:Wireframe Magazine
分享到:
相关推荐
### Axure快速原型设计知识点概览 #### 一、入门篇 ##### 第一章:介绍 **1.1 认识Axure RP** Axure RP是一款强大的原型设计...通过掌握上述知识点,你可以更高效地完成原型设计任务,提升产品设计的质量和效率。
线框图是设计的初步草图,用于描绘页面结构和基本元素的位置;原型则更进一步,展示了交互和动态效果;用户流程图则帮助我们理解用户在使用过程中的步骤,确保设计顺畅无阻。 在设计过程中,需遵循人机交互(HCI)...
它允许用户通过简单的拖放操作来创建交互式的 wireframes(线框图)和prototypes(原型),并支持自定义各种动态行为,如按钮点击、页面跳转等。这对于在项目初期快速建立并演示产品概念非常有帮助。 在“流程图”...
ElementUI是阿里巴巴旗下的饿了么团队开发的一套开源UI框架,它为Vue.js提供了一系列易于使用、美观的组件,如表格、按钮、提示、下拉菜单等,大大简化了前端开发流程。其组件设计简洁、响应式,适合构建企业级后台...
无论是初创公司还是大型企业,都能从中受益,因为它简化了设计流程,加速了产品的迭代开发。 总结来说,Axure RP作为一款专业级的原型设计工具,凭借其易用性、灵活性和强大的功能,已成为许多专业人士的首选。它...
这款软件集成了线框图、流程图、原型和规格文档的制作功能,大大简化了产品设计流程。下面将详细介绍Axure RP 8的安装过程及相关知识点。 首先,下载Axure RP 8的安装包后,我们需要进行安装。在Windows操作系统上...
Axure RP 8是一款在IT行业中广泛使用的原型设计软件,专为产品经理、设计师以及开发人员设计,以快速...在产品设计流程中,Axure RP 8扮演着关键角色,帮助团队节省时间,减少误解,提高产品的最终质量和用户满意度。
它们不仅简化了设计流程,而且有助于确保产品设计的一致性和专业性,让设计师能够更专注于创新和用户体验的优化,而不是基础组件的搭建。在实际工作中,熟练运用这类模板,无疑会提升整个团队的生产力和项目成功率。
1. **线框图设计**:Axure RP 9 提供了丰富的预定义组件库,包括按钮、表单、图像、文本等,用户可以通过拖放操作快速构建网页或应用的线框图,这大大简化了初期设计过程。 2. **交互原型**:软件支持添加动态面板...
Axure RP Extension for Chrome是一款专为产品经理和设计者设计的谷歌浏览器插件,它使得用户能够在Chrome浏览器上直接查看和...无论你是产品经理还是设计师,这款插件都能让你的工作更加高效,提升你的产品设计流程。
Axure RP是由Axure Software Solution公司开发的一款原型设计工具,它允许设计师通过拖拽和放置预设的组件来快速构建产品原型,并可以生成交互式的线框图、流程图和规格文档,大大简化了设计流程。而元件库则是Axure...
总的来说,“LIB008 - Axure数据可视化图表组件库”是Axure9用户的一个宝贵资源,它集成了各种数据可视化图表,简化了设计流程,提升了设计质量。通过熟练运用这个组件库,设计师们可以更好地将复杂的数据转化为直观...
Axure RP是一款强大的原型设计工具,广泛应用于产品设计、用户体验设计以及软件开发流程中,特别适合创建线框图、交互原型和规格说明。 元件库通常包含各种类型的UI元素,如按钮、表单控件、图标、导航条、页眉和...
Chrome Axure插件是针对网页设计师和产品经理们的一款实用工具,尤其对于那些使用Axure RP进行原型设计的用户而言,它极大地提升了工作效率和协作体验。Axure是一款强大的原型设计软件,能够帮助用户快速创建交互式...
Axure RP是一款广泛应用于产品经理、交互设计师和UI设计师的工具,它支持快速创建线框图、流程图、原型和规格说明,而部件库则进一步提升了其功能。 在"描述"中提到,Axure部件库适用于版本5.5及以上的Axure RP用户...
总的来说,Axure RP 是一款不可或缺的产品设计工具,它简化了原型设计流程,提高了团队协作效率,是每个产品经理和设计师都应该了解和掌握的技能之一。通过这个提供的安装包,你可以免费体验和使用这款优秀的软件,...
总的来说,这个"AXure工具包rar工具包"对于从事产品设计和原型制作的人员来说,是一份非常有价值的资源集合。它不仅提供了丰富的设计元素,简化了设计流程,还可能包含了一些实用的设计技巧和最佳实践,有助于提升...
总之,AXURE RP 8.0作为一款强大的原型设计工具,不仅简化了设计流程,提高了工作效率,还能有效促进团队间的沟通与协作,是IT行业中产品经理、设计师和开发者的得力助手。通过深入理解和熟练运用AXURE RP 8.0,你将...
原型设计是产品开发流程中的基石,它能够有效地沟通设计理念,减少后期修改的成本。 在设计原型时,Axure是一款广泛使用的工具,它提供了丰富的组件库,使得设计师可以快速搭建页面结构,添加交互行为,模拟真实...
4. **流程图和线框图**:除了页面设计,Axure RP还提供了绘制流程图的功能,帮助设计师梳理用户流程,清晰表达产品逻辑。 5. **自动生成规范文档**:完成设计后,Axure RP能自动生成HTML原型和规格文档,这些文档...