本书处于 开放评论 状态。希望获得来自读者的更多反馈以完善内容。阅读时,如果遇到一些文字内容需要求助,可以采用如下方式与我互动: 先用鼠标选择文本 在释放鼠标左键时将会有 annotate 弹窗,点击弹窗上的 ,如果已经注册的话,可以直接留言评论,否则先注册再留言。 你也可以点击页面右上角的 符号,可以看到其他人的留言评论。

6.2 系统原型(原型系统)开发

6.2.1 概念内涵

需求不确定或定义错误是导致软件开发项目失败的重要原因之一。需求确认(Requirments Vlidation)的目标是确保软件要实现的需求与用户实际需求相一致,但这个过程十分复杂,很难一次性产生正确且完整的需求规格(Requirments Specification),为此有必要采用快速原型开发法开发系统原型,来给用户展示概念,尽早发现需求错误,找到可行解决方案,并发现缺失的重要需求。

系统原型或原型系统(System prototyping) 是指待开发或交付软件系统的一种初始形态,在此形态下,软件系统具有初始的交互界面或基本的功能模块,能够满足用户基本的人机交互和功能需求。在原型系统基础上,用户与系统开发人员间不断反复迭代,将软件系统的界面、功能及使用体验打磨臻于至善。原型系统的开发过程如图 6.2 示意:

原型系统的开发流程

图 6.2: 原型系统的开发流程

从上图可以看到,系统原型的开发客户分为四步骤:

1. 确定用户的基本需求

由用户提出对新系统的基本要求,如功能、界面的基本形式、所需要的数据、应用范围、运行环境等,开发者根据这些信息估算开发该系统所需的费用,并建立简明的系统模型。

2. 构造初始原型

系统开发人员在明确了对系统基本要求和功能的基础上,依据计算机模型,以尽可能快的速度和尽可能多的开发工具来建造一个结构仿真模型,即快速原型构架。之所以称为原型构架,是因为这样的模型是系统总体结构,子系统一上部分的高层模型。由于要求快速,这一步骤要尽可能使用一些软件工具和原型制造工具,以辅助进行系统开发。

3. 运行、评价、修改原型

快速原型框架建造成后,就要交给用户立即投入试运行,各类人员对其进行试用、检查分析效果。由于构造原型中强调的事快速,省略了许多细节,一定存在许多不合理的部分。所以,在试用中要充分进行开发人员和用户之间的沟通,尤其是要对用户提出的不满意的地方进行认真细致的反复修改、完善,直到用户满意为止。

4. 形成最终交付物

如果用户和开发者对原型比较满意,则将其作为正式原型。经过双方继续进行细致的工作,把开发原型过程中的许多细节问题逐个补充、完善、求精,最后形成一个适用的系统交付物。

原型系统开发过程中的注意要点如下:

  • 并非所有的需求在系统开发以前都能准确地说明

要想详细而地定义任何事情都是有困难的。实际上,用户很善于叙述其目标、对象以及他们想要前进的大致方面,但对于他们要如何实现那些事情的细节却不甚清楚和难以确定。

  • 需要有快速的系统建造工具

原型的修正和完善需要有快速的系统建造工具支持,只有快速系统生成工具,才能使应用系统得以快速模型化,而且能快速地进行修改。没有快速系统建造工具,原型不能得到快速修改完善,原型法就失去存在的基础。

  • 项目参加者之间通常都存在通信上的障碍

对于开发人员通信上障碍的排除,不是试图将每一个项目参加者都培养成职业的系统定义人员,而是让每个人以一种易于接受的方式去理解规格说明。从常识上来理解,一个具体的工作原型,由于其直观性、报考性而能够担当和胜任这一任务。

  • 需要实际的、可供用户参与的系统模型

文字和静态图形是一种比较好的通信工具,然而其的缺点是缺乏直观的、感性的特征,因而往往不易理解对象的全部含义。交互式原型系统能够提供生动活泼的规格说明,用户见到的是一个“活”的、运行着的系统。理解纸面上的系统和操作运行在机器上的系统,其差别是十分显著的。

  • 需求一旦确定,就可以遵从严格的方法

原型法是确定需求策略,它快速地、选代地建立终系统工作模型,对问题定义采用启发的方式,由用户作出响应——实际上是一种报考定义技术。但同时,原型法的采纳并不排除和放弃严格方法的运用,一旦通过建立原型并在演示中得到明确的需求定义后,即可运用行之有效的结构化方法来完成系统的开发。

  • 大量的反复是不可避免的、必要的,应该加以鼓励

应该鼓励用户改进他们的系统,改进建议的产生是来自经验的发展。 在“需求分析”、“原型设计”两个阶段中,开发者和用户一起为想象中的系统的某些主要部分定义需求和规格说明,并由开发者在规格说明级用原型描述语言构造一个系统原型。 而在演示原型期间,用户可以根据他所期望的系统行为来评价原型的实际行为。如果原型不能满意地运行,用户能立刻找出问题和不可接受的地方,并与开发者重新定义需求。该过程一直持续到用户认为该原型能成功地体现想象中的系统的主要部分功能为止。

6.2.2 案例:使用 Mockplus 设计电商管理系统客户端原型

近年来,随着电商行业的飞速发展,一款功能全面的电商管理系统,不仅可以帮助各大电商平台高效管理店铺,同时还可以节省不少人力、物力、财力。

在设计电商管理原型系统之前,我们首先需要尽可能全面地总结该款应用系统所有的业务场景和用户的使用场景。这个过程可以绘制业务流程图等进行梳理,使业务逻辑条理清晰化。

梳理好了系统业务逻辑之后,需要选择一款简单高效的界面原型设计工具,来快速完成原型的搭建,以节省在产品原型阶段投入的时间成本。此处推荐使用 Mockplus 经典版(https://www.mockplus.cn/rp?hmsr=bdtg68&renqun_youhua=451667&bd_vid=10086027459349572076) 原型设计工具搭建一款电商管理系统的客户端原型。

  1. Mockplus 设计的电商管理系统客户端原型

这套电商管理系统客户端原型属于中高保真原型,包含登录注册、系统首页、商品管理、订单管理、财务管理、数据分析、系统设置七个部分,共计22个页面。此款原型采用了经典的左右结构框架,配合卡片式设计,展示了较为完整的电商管理系统结构。如图 6.3 和 图 ?? 示意原型的界面总览和交互演示效果。在线预览地址:https://run.mockplus.cn/UxZbZA8AcFNmNImb/index.html

电商管理系统原型文件截图

图 6.3: 电商管理系统原型文件截图

电商管理系统界面交互截图

图 6.4: 电商管理系统界面交互截图

  1. 使用 Mockplus 设计开发电商管理系统客户端原型的技巧
  • 使用快速格子完成卡片式设计

电商管理系统所包含的信息往往多而复杂,如果使用常规排版,则会造成信息堆积,无论是查看还是管理都十分不便。在设计此款原型时,我们采用了卡片式设计,使原型的美观度和实用性都得到了有效提升。

卡片式设计主要是将文字标题、小标题和图片等元素进行整合,以卡片的形式来呈现,便于用户浏览,也可以让整体设计更加具有层次感,如图 6.5 所示:

使用快速格子完成卡片式设计效果

图 6.5: 使用快速格子完成卡片式设计效果

配合Mockplus经典版的快速格子功能,可以快速完成商品管理等页面的原型设计。

① 首先将商品图片、价格信息、物品名称、编辑、删除等元素,放置在白色矩形中,合并为组。 ② 为白色矩形添加圆角,使卡片看起来更加柔和; ③ 选中编辑好的组,使用快速格子功能复制出其他卡片; ④ 拖动边框,调整卡片之间的间距; ⑤ 点击图片,使用图片填充功能,可以使页面呈现效果更加丰富。

设计操作如 图 6.6 所示:

使用快速格子完成卡片式设计操作

图 6.6: 使用快速格子完成卡片式设计操作

  • 使用图表组件搭建数据分析页面

在数据分析等页面,我们使用了柱状图、条形图、曲线图、饼图、环形进度条等组件,来完成了财务管理、数据分析等信息模块的搭建。

使用图表组件搭建数据分析页面

图 6.7: 使用图表组件搭建数据分析页面

在使用图标组件时,可以配合圆形、线条等组件,增加图表组件的呈现样式:

① 双击图表组件,可以修改数据、颜色等信息; ② 在设计浏览量模块时,我们可以使用线段组件搭建坐标轴,为折线图添加数据参考; ③ 在设计用户男女比例模块时,我们可以使用线段和原型,让饼状图组件更具设计感。

使用图表组件搭建数据分析页面

图 6.8: 使用图表组件搭建数据分析页面

此款客户端原型功能完整,交互流畅,无论是从页面结构还是色彩搭配,都极具参考意义,相关模板可以点击链接下载: