`

使用线框图来简化你的产品设计流程

阅读更多

绘制一个线框图是你在制作一个网站前必须要经历的过程。线框图能够帮助你合理的组织并简化你内容和元素 是网站内容布局的基本视觉表现方式 ,是网站开发过程中一个重要的步骤。

一、线框图的好处:

  • 让项目组成员在初期就可以对网站有个清晰明了的认知
  • 能激发设计师想象力,使其在创作过程中有更多发挥空间
  • 给开发者提供一个清晰的架构,让他们知道他们需要编写的功能模块
  • 让每个页面的跳转关系都变得清晰明了
  • 很容易的改变页面布局

二、绘制线框图的工具:

  • 手绘:纸、笔
  • 流程图或思维导图工具:Visio、Mindmap、MindManager
  • 原型绘制软件:BalsamiqAxure
  • 图形软件:Photoshop、Illustrator
  • HTML工具:Dreamweaver

三、线框图实例:

1、简单纸面原型 这是Broad Reach Retail Partners网站的简单纸面原型

1 使用线框图来简化你的产品设计流程

2、低保真的HTML原型 :没加任何风格的网站内容陈列

2 使用线框图来简化你的产品设计流程

3、低保真的布局原型 :界面布局线框图,由Jesse Bennett- Chamberlain 设计

3 使用线框图来简化你的产品设计流程

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.

4 使用线框图来简化你的产品设计流程

5、线框图原型:This one is based on advanced use of a blog publishing system (WordPress). By Mattheiu Mingassson or Activeside Internet Strategies and Consulting .

5 使用线框图来简化你的产品设计流程

6、线框图A wireframe for the Embrace Pet Community , by Jesse Bennett-Chamberlain of31Three .

6 使用线框图来简化你的产品设计流程

7、线框图: A wireframe with color and images. Author page wireframe by Bokhandel .

7 使用线框图来简化你的产品设计流程

8、线框图: 另一个带色彩的线框图. By Mattheiu Mingassson of Activeside Internet Strategies and Consulting .

8 使用线框图来简化你的产品设计流程

四、最佳范例要点:

  • 简单设计
  • 灰度模式展现:灰度有助于把注意力集中在产品功能层面和布局层面,如果直接加图片和颜色,容易让人陷入对色彩细节的判断中忽略掉功能层面更本质的东西。
  • 线框图用网站地图串联起来
  • 专注于理想结果
  • 等同于真实分辨率尺寸
  • 一开始就计划好内容和元素

五、要避免的问题:

  • 内容太多,重点不突出
  • 强调颜色和设计
  • 过多的设计细节

另外,介绍一个专门讲线框图的网站:Wireframe Magazine

分享到:
评论

相关推荐

    Axure快速原型设计.pdf

    ### Axure快速原型设计知识点概览 #### 一、入门篇 ##### 第一章:介绍 **1.1 认识Axure RP** Axure RP是一款强大的原型设计...通过掌握上述知识点,你可以更高效地完成原型设计任务,提升产品设计的质量和效率。

    前台界面设计模型教程

    线框图是设计的初步草图,用于描绘页面结构和基本元素的位置;原型则更进一步,展示了交互和动态效果;用户流程图则帮助我们理解用户在使用过程中的步骤,确保设计顺畅无阻。 在设计过程中,需遵循人机交互(HCI)...

    axure画图工具

    它允许用户通过简单的拖放操作来创建交互式的 wireframes(线框图)和prototypes(原型),并支持自定义各种动态行为,如按钮点击、页面跳转等。这对于在项目初期快速建立并演示产品概念非常有帮助。 在“流程图”...

    Axure 使用ElementUI组件的 web后台管理

    ElementUI是阿里巴巴旗下的饿了么团队开发的一套开源UI框架,它为Vue.js提供了一系列易于使用、美观的组件,如表格、按钮、提示、下拉菜单等,大大简化了前端开发流程。其组件设计简洁、响应式,适合构建企业级后台...

    axure rp原型设计工具

    无论是初创公司还是大型企业,都能从中受益,因为它简化了设计流程,加速了产品的迭代开发。 总结来说,Axure RP作为一款专业级的原型设计工具,凭借其易用性、灵活性和强大的功能,已成为许多专业人士的首选。它...

    AxureRP8安装包

    这款软件集成了线框图、流程图、原型和规格文档的制作功能,大大简化了产品设计流程。下面将详细介绍Axure RP 8的安装过程及相关知识点。 首先,下载Axure RP 8的安装包后,我们需要进行安装。在Windows操作系统上...

    Axure RP 8

    Axure RP 8是一款在IT行业中广泛使用的原型设计软件,专为产品经理、设计师以及开发人员设计,以快速...在产品设计流程中,Axure RP 8扮演着关键角色,帮助团队节省时间,减少误解,提高产品的最终质量和用户满意度。

    AntDesign的Axure模板

    它们不仅简化了设计流程,而且有助于确保产品设计的一致性和专业性,让设计师能够更专注于创新和用户体验的优化,而不是基础组件的搭建。在实际工作中,熟练运用这类模板,无疑会提升整个团队的生产力和项目成功率。

    Axure RP 9 CHS V7.5 for 3719.rar

    1. **线框图设计**:Axure RP 9 提供了丰富的预定义组件库,包括按钮、表单、图像、文本等,用户可以通过拖放操作快速构建网页或应用的线框图,这大大简化了初期设计过程。 2. **交互原型**:软件支持添加动态面板...

    Axure谷歌浏览器插件

    Axure RP Extension for Chrome是一款专为产品经理和设计者设计的谷歌浏览器插件,它使得用户能够在Chrome浏览器上直接查看和...无论你是产品经理还是设计师,这款插件都能让你的工作更加高效,提升你的产品设计流程。

    ArmyAxure-yjk.zip

    Axure RP是由Axure Software Solution公司开发的一款原型设计工具,它允许设计师通过拖拽和放置预设的组件来快速构建产品原型,并可以生成交互式的线框图、流程图和规格文档,大大简化了设计流程。而元件库则是Axure...

    LIB008 - Axure数据可视化图表组件库(AxureUX整理).zip

    总的来说,“LIB008 - Axure数据可视化图表组件库”是Axure9用户的一个宝贵资源,它集成了各种数据可视化图表,简化了设计流程,提升了设计质量。通过熟练运用这个组件库,设计师们可以更好地将复杂的数据转化为直观...

    Axure元件库大全

    Axure RP是一款强大的原型设计工具,广泛应用于产品设计、用户体验设计以及软件开发流程中,特别适合创建线框图、交互原型和规格说明。 元件库通常包含各种类型的UI元素,如按钮、表单控件、图标、导航条、页眉和...

    chrome axure插件

    Chrome Axure插件是针对网页设计师和产品经理们的一款实用工具,尤其对于那些使用Axure RP进行原型设计的用户而言,它极大地提升了工作效率和协作体验。Axure是一款强大的原型设计软件,能够帮助用户快速创建交互式...

    Axure部件库

    Axure RP是一款广泛应用于产品经理、交互设计师和UI设计师的工具,它支持快速创建线框图、流程图、原型和规格说明,而部件库则进一步提升了其功能。 在"描述"中提到,Axure部件库适用于版本5.5及以上的Axure RP用户...

    AxureRP安装包(内含免费注册码)

    总的来说,Axure RP 是一款不可或缺的产品设计工具,它简化了原型设计流程,提高了团队协作效率,是每个产品经理和设计师都应该了解和掌握的技能之一。通过这个提供的安装包,你可以免费体验和使用这款优秀的软件,...

    AXure工具包rar工具包,可以直接下载,并有安装说明书。

    总的来说,这个"AXure工具包rar工具包"对于从事产品设计和原型制作的人员来说,是一份非常有价值的资源集合。它不仅提供了丰富的设计元素,简化了设计流程,还可能包含了一些实用的设计技巧和最佳实践,有助于提升...

    AXURE RP 8.0.zip

    总之,AXURE RP 8.0作为一款强大的原型设计工具,不仅简化了设计流程,提高了工作效率,还能有效促进团队间的沟通与协作,是IT行业中产品经理、设计师和开发者的得力助手。通过深入理解和熟练运用AXURE RP 8.0,你将...

    axure原型设计

    原型设计是产品开发流程中的基石,它能够有效地沟通设计理念,减少后期修改的成本。 在设计原型时,Axure是一款广泛使用的工具,它提供了丰富的组件库,使得设计师可以快速搭建页面结构,添加交互行为,模拟真实...

    axure7_33lc.com.zip

    4. **流程图和线框图**:除了页面设计,Axure RP还提供了绘制流程图的功能,帮助设计师梳理用户流程,清晰表达产品逻辑。 5. **自动生成规范文档**:完成设计后,Axure RP能自动生成HTML原型和规格文档,这些文档...

Global site tag (gtag.js) - Google Analytics