画好线框图的20个步骤

对于任何一个开发项目来说最大的错误可能就是没有计划。最近,有些人认为开始前无需计划,一个优秀的开发者需要的是随机应变。我敢肯定这样的做法最后注定是要失败的。 线框图是计划中的第一步也是最重要的一步。这是将创意转换成客户使用的程序的第一步。本文将要带你了解线框图整个的流程; 包括涉及参与人员,工具等,以便您能够更好的制作计划。

1) 了解自己的目标 作为一个开发人员我想大家都有马上坐下来开始编码的冲动。通常最初的想法都很简单,那么你真的可以坐下直接开始吗? 答案是否定的,项目很少有那么简单的,任何有经验的人都知道这样做将会有很多这样的那样的问题等着你。 一个线框图可以有效的提供您的工作效率。修改计划内容远比在工作开始后在更正要来得更容易。 这个过程也有助于对项目更深的理解。事先作出计划,提出问题、意见,以便解决问题。 最终制定一个工作计划,规划设计者,开发者,工程师以及项目经理各自的工作内容,并且要保证各个环节的配合。

2) 重功能,轻外观 计划展示的效果不同主要体现在所采用工具的多样性。其实从根本上说都是介绍有关功能部分的应用,例如,一个网页将有3个文本框和2个按钮。 这是功能而不是形式。 在Howard Baines我们严格按照这一原则进行,并且我们的线框图只包括一些功能要素(线框,按钮,下拉菜单等) 。我们忽略任何视觉和布局的东西。其他人可能会做的更多一些,包括了布局和其他视觉的元素。这取决于你自己。

3) 积累自身经验 并不一定要求您具备设计和开发的能力,而需要的是在网页应用或者网站上的经验。当然经验越丰富越好,并且你不需去理解关系型数据库只要画线框。

4) 确定负责人 确保有人对整个计划负责。他们负责跟进和管理反馈,变化等。如果一个项目,那么通常负责人是发起人,因为他们更清楚目标所在。如果为客户提供服务,我们将会负责计划的进程。不管是谁,只要有人负责。

5) 涉及每个人 也许不是第一次会议,必须在纸上锁定一个简单的方案并且是涉及关键利益者的想法。很少,参与的人们加快设计进程。同时,线框图的开发涉及你的团队和客户团队。例如,你正在用你现有的数据库整合你的应用程序或者网站,然后确保数据库所有者可以检测所有数据库中的数据字段在你把他们加入到你的线框之前。收集用户的传真号码如果无处存放是不好的。同水平的设计师对用户体验有很好的理解,并且在早期流动时会存在潜在的问题。

6) 完成期限 预先留出时间和交付期限,对保持项目运行是非常重要的。最初线框图会议可以是一天或是几天,具体取决于应用程序的大小,但都需设定一个时期并且坚持下去。会后按记录跟进,以保持项目进程。

7) 保持清洁 如果一个特别的网页要求两个文本框和一个按钮,那么只要有这些即可,不多不少。

8) 避免设计的线框图太多 线框图只要阐述如何达到所需功能,不包括任何介绍和设计的内容。应尽量避免任何有关设计的内容,这样很容易分散客户的注意力。例如:为了更生动而增加一些蓝色,那么有可能需要半小时的时间 去解释关于蓝色的用意。这些设计的内容应该是设计师的工作。

9) 记住用户界面不是用户体验 想一些使用的介绍方法是极其诱人,比如AJAX 。注意:线框图是关于功能元素而不是方案展示或者互动的方法。为了更直观的展示应用,应尽量避免AJAX ,应侧重于线框图。

10) 想想用户 这是很显然的,但是在规划线框图过程中还是很容易忽略这一点。我们的重点是功能,但是同样要考虑用户的体验。例如,如果你做了一个三页长的注册表单,可能发现很多人都是无法完成的。

11) 不要懒惰 我们常听到:登陆页面是简单,可以不用写在线框图内。确保线框图包

含计划的所有内容。在项目的末尾你应该有一个详细的说明。每一步都不应被忽略。

12) 将线框图分成几个部分 一个网站地图或者应用被经常分为几个部分,比如新闻,产品,和用户账户。这样做更容易理解。

13) 页面的数量 一个网页的应用往往包含了若干程序; 结算就是一个很好的例子。通常是线性的,但是有时用户会选择不同步骤,例如跳过一步。显然你文档中的一些页面和页面中的标签(例如点击按钮) 让用户跳转。

14) 重复性 应用中的一致性可以有效地帮助用户,开发和设计者。组的重复元素是一件好事。例如,无论用户输入一个地址,将会是同样的地方在同样的命令。在规划线框图时就可以将其表示出来。

15) 全部检查是有意义的 最终文档应该让任何人都能简单的操作。如果只是一个开发可以理解你的线框图,那么肯定是有问题的。最后问一下对这个项目什么都没有做的人,他们是否能理解。

16) 广告也是功能 很多网站都有收费广告,这可能和google 的广告一样简单,但他是功能而不是设计,所以也包括在内。

17) 这不仅仅是公开网站 很多网站有一个管理区域用来管理内容,浏览注册用户概况,重设密码等。这个功能许多人都用不到,但是也很重要。很多时候这可能包含一些不公开的数据(例如用户账户启用按钮) 。这对于开发在设计数据库时是很重要的信息。

18) 知道什么时候结束 确保所有的利益相关者有机会去给反馈,但不把这种锻炼成画西斯廷教堂。 通常情况下,可以说三步就能把工作确定下来。第一,把想法写在纸上; 第二,从其他人那里得到反馈意见,比如,开发和设计者; 第三,定稿。

19) 选择正确的工具 用纸和笔比用电脑更能抓住你的想法和创意。 一旦你开始设计你的文档我们建议使用你更喜欢的工具。例如,开发者可以用Microsoft Visio,项目经理用

PowerPoint ,设计者用Adobe Fireworks。

我认为线框图应该是一篇文档而不仅仅是交互交流(像设计,可能被分散注意力) 因此设计html 可能不是最好的。 有很多线框图的工具,例如Balsamiq 提供环境帮助很快的增加和自定义普遍的界面元素。他们可以给它一个手绘的感觉,提供一个视觉工具而不是真正开始的设计。

20) 考虑相依性 每个人都知道一个购物车的流程是什么吧? 因此很容易画成线框图并且放在一边。如果你用第三方支付工具例如PayPal? 那么也许影响部分网站的工作。研究相依性,做出相应的修改。这在开始时更容易做到。

希望这篇文章可以提供一个清晰的画线框的思路,谁参与,如何完成,工具如何使用,最后的输出怎么样。最终的事情是,好的完整的线框可以节省你的时间。

对于任何一个开发项目来说最大的错误可能就是没有计划。最近,有些人认为开始前无需计划,一个优秀的开发者需要的是随机应变。我敢肯定这样的做法最后注定是要失败的。 线框图是计划中的第一步也是最重要的一步。这是将创意转换成客户使用的程序的第一步。本文将要带你了解线框图整个的流程; 包括涉及参与人员,工具等,以便您能够更好的制作计划。

1) 了解自己的目标 作为一个开发人员我想大家都有马上坐下来开始编码的冲动。通常最初的想法都很简单,那么你真的可以坐下直接开始吗? 答案是否定的,项目很少有那么简单的,任何有经验的人都知道这样做将会有很多这样的那样的问题等着你。 一个线框图可以有效的提供您的工作效率。修改计划内容远比在工作开始后在更正要来得更容易。 这个过程也有助于对项目更深的理解。事先作出计划,提出问题、意见,以便解决问题。 最终制定一个工作计划,规划设计者,开发者,工程师以及项目经理各自的工作内容,并且要保证各个环节的配合。

2) 重功能,轻外观 计划展示的效果不同主要体现在所采用工具的多样性。其实从根本上说都是介绍有关功能部分的应用,例如,一个网页将有3个文本框和2个按钮。 这是功能而不是形式。 在Howard Baines我们严格按照这一原则进行,并且我们的线框图只包括一些功能要素(线框,按钮,下拉菜单等) 。我们忽略任何视觉和布局的东西。其他人可能会做的更多一些,包括了布局和其他视觉的元素。这取决于你自己。

3) 积累自身经验 并不一定要求您具备设计和开发的能力,而需要的是在网页应用或者网站上的经验。当然经验越丰富越好,并且你不需去理解关系型数据库只要画线框。

4) 确定负责人 确保有人对整个计划负责。他们负责跟进和管理反馈,变化等。如果一个项目,那么通常负责人是发起人,因为他们更清楚目标所在。如果为客户提供服务,我们将会负责计划的进程。不管是谁,只要有人负责。

5) 涉及每个人 也许不是第一次会议,必须在纸上锁定一个简单的方案并且是涉及关键利益者的想法。很少,参与的人们加快设计进程。同时,线框图的开发涉及你的团队和客户团队。例如,你正在用你现有的数据库整合你的应用程序或者网站,然后确保数据库所有者可以检测所有数据库中的数据字段在你把他们加入到你的线框之前。收集用户的传真号码如果无处存放是不好的。同水平的设计师对用户体验有很好的理解,并且在早期流动时会存在潜在的问题。

6) 完成期限 预先留出时间和交付期限,对保持项目运行是非常重要的。最初线框图会议可以是一天或是几天,具体取决于应用程序的大小,但都需设定一个时期并且坚持下去。会后按记录跟进,以保持项目进程。

7) 保持清洁 如果一个特别的网页要求两个文本框和一个按钮,那么只要有这些即可,不多不少。

8) 避免设计的线框图太多 线框图只要阐述如何达到所需功能,不包括任何介绍和设计的内容。应尽量避免任何有关设计的内容,这样很容易分散客户的注意力。例如:为了更生动而增加一些蓝色,那么有可能需要半小时的时间 去解释关于蓝色的用意。这些设计的内容应该是设计师的工作。

9) 记住用户界面不是用户体验 想一些使用的介绍方法是极其诱人,比如AJAX 。注意:线框图是关于功能元素而不是方案展示或者互动的方法。为了更直观的展示应用,应尽量避免AJAX ,应侧重于线框图。

10) 想想用户 这是很显然的,但是在规划线框图过程中还是很容易忽略这一点。我们的重点是功能,但是同样要考虑用户的体验。例如,如果你做了一个三页长的注册表单,可能发现很多人都是无法完成的。

11) 不要懒惰 我们常听到:登陆页面是简单,可以不用写在线框图内。确保线框图包

含计划的所有内容。在项目的末尾你应该有一个详细的说明。每一步都不应被忽略。

12) 将线框图分成几个部分 一个网站地图或者应用被经常分为几个部分,比如新闻,产品,和用户账户。这样做更容易理解。

13) 页面的数量 一个网页的应用往往包含了若干程序; 结算就是一个很好的例子。通常是线性的,但是有时用户会选择不同步骤,例如跳过一步。显然你文档中的一些页面和页面中的标签(例如点击按钮) 让用户跳转。

14) 重复性 应用中的一致性可以有效地帮助用户,开发和设计者。组的重复元素是一件好事。例如,无论用户输入一个地址,将会是同样的地方在同样的命令。在规划线框图时就可以将其表示出来。

15) 全部检查是有意义的 最终文档应该让任何人都能简单的操作。如果只是一个开发可以理解你的线框图,那么肯定是有问题的。最后问一下对这个项目什么都没有做的人,他们是否能理解。

16) 广告也是功能 很多网站都有收费广告,这可能和google 的广告一样简单,但他是功能而不是设计,所以也包括在内。

17) 这不仅仅是公开网站 很多网站有一个管理区域用来管理内容,浏览注册用户概况,重设密码等。这个功能许多人都用不到,但是也很重要。很多时候这可能包含一些不公开的数据(例如用户账户启用按钮) 。这对于开发在设计数据库时是很重要的信息。

18) 知道什么时候结束 确保所有的利益相关者有机会去给反馈,但不把这种锻炼成画西斯廷教堂。 通常情况下,可以说三步就能把工作确定下来。第一,把想法写在纸上; 第二,从其他人那里得到反馈意见,比如,开发和设计者; 第三,定稿。

19) 选择正确的工具 用纸和笔比用电脑更能抓住你的想法和创意。 一旦你开始设计你的文档我们建议使用你更喜欢的工具。例如,开发者可以用Microsoft Visio,项目经理用

PowerPoint ,设计者用Adobe Fireworks。

我认为线框图应该是一篇文档而不仅仅是交互交流(像设计,可能被分散注意力) 因此设计html 可能不是最好的。 有很多线框图的工具,例如Balsamiq 提供环境帮助很快的增加和自定义普遍的界面元素。他们可以给它一个手绘的感觉,提供一个视觉工具而不是真正开始的设计。

20) 考虑相依性 每个人都知道一个购物车的流程是什么吧? 因此很容易画成线框图并且放在一边。如果你用第三方支付工具例如PayPal? 那么也许影响部分网站的工作。研究相依性,做出相应的修改。这在开始时更容易做到。

希望这篇文章可以提供一个清晰的画线框的思路,谁参与,如何完成,工具如何使用,最后的输出怎么样。最终的事情是,好的完整的线框可以节省你的时间。


相关文章

  • 12算法与程序框图
  • 邗 江 职 业 技 术 教 育 中 心 教 案 一.引言: 说起算法,大家有可能觉得有点陌生,但事实上,我们几乎每天都会和它打交道,例如,青菜的价格是4.8元/kg,买了1.2kg, 如果我们用计算器计算该付多少钱,我们做法是: 第一步 按 ...查看


  • 算法的概念
  • 算法的概念--知能阐释 一.知识精讲 1.算法的含义 算法可以理解为由基本运算及规定的运算顺序所构成的完整的解题步骤,或看成按要求设计好的有限的确切的计算序列,并且这样的步骤或序列能够解决一类问题. 说明:(1)算法一般是机械的,有时要进行 ...查看


  • 程序框图教案
  • §程序框图 授课人:从化三中黄林城 教学目标: 1.知识与技能:通过设计流程图来表达解决问题的过程,了解流程图的三种基本逻辑结构:顺序结构.条件分支结构.循环结构.理解掌握后两种,能设计简单的流程图. 2.过程与方法:通过模仿.操作和探索, ...查看


  • 监控系统运行测试报告
  • 图像模块测试报告 1 概述 XX 系统图像模块主要实时采集舱外设备的视频图像,集中在视频监视主机监视器显示并存储监视画面,是确保设备安全运行的一种辅助手段.图像模块包括摄像头.视频网关.工控机等单元. 2 测试依据 技术指标测试需要按照&l ...查看


  • 人教版高二年级算法案例的教学设计
  • 人教版高二年级"算法案例--辗转相除法与更相减损术"的教学设计 松滋市贺炳炎中学 袁文 [email protected] 1. 内容和内容解析 (1)内容: 本节内容选自人教版普通高中课程标准实验教科书必修3第一章第3节 ...查看


  • [循环结构]教学设计
  • <循环结构>教学设计 一.教学内容分析 <循环结构>是人民教育出版社课程教材研究所编著的<普通高中课程标准试验教科书数学3(必修)>(A版)中§1.1.2的第二课时的内容.(1)算法是高中数学课程中的新内 ...查看


  • 软件工程-顺序图
  • 北京建筑工程学院 理学院 实验报告 课程名称 软件工程 实验名称 顺序图 实验地点 网三小 日期 2102-10-9 姓名 王杰 班级 信09-1 学号 [1**********]11 指导教师 张长伦 王恒友 成 绩 通过本次试验使学生掌 ...查看


  • 北京市朝阳区高三学习目标与检测(理)讲义复习第三章答案
  • 第三章 算法初步 3.1 算法与程序框图 二.复习要点 1.在数学中,现代意义上的"算法"通常是指可以用计算机来解决的某一类问题的程序或步骤,这些程序和步骤必须是明确和有效的,而且能够在有限步之内完成.比如解方程的算法. ...查看


  • 算法与程序框图
  • 算法与程序框图 1.算法与程序框图 (1)算法 ①算法通常是指按照一定规则解决某一类问题的明确和有限的步骤. ②应用:算法通常可以编成计算机程序,让计算机执行并解决问题. (2)程序框图 定义:程序框图又称流程图,是一种用程序框.流程线及文 ...查看


热门内容