浅谈互联网产品原型设计

廖家莉

摘要：信息化高速发展的今天，越来越多的互联网产品，以前有软件用就非常知足了，现在不仅有很多软件用还可以自己定制软件。定制软件前我们一般先进行原型设计，就像飞机、房屋的建设成本都比较高，在建之前我们一般会先画模型，做模型。产品原型是产品面市之前的一个框架设计，是利用纸笔或者工具快速勾勒出的产品的大致结构。产品原型设计可以非常快速地完成页面的排版布局，有一个大致的页面效果，再加一些交互动作可以使之更加形象生动。原型设计方便和用户以及开发人员之间的交流，不仅可以提高项目开发的工作效率和降低成本，还可以有效地避免重要元素被忽略，也可以阻止一些不合理的假设。不管是大型项目还是小型项目，项目开发流程都是先进行需求分析，再研发并测试。以前进行需求分析的称为需求分析师，主要出相关文档;近几年称为产品经理，产品经理的职责非常多，开发前期需要负责市场分析、用户需求分析、综合各部分的意见和建议，画出产品原型;开发中期需要跟进产品与技术部紧密交流，确保产品实现进度和质量;开发后期需要进行产品服务、协调相关部门进行网站的维护、产品优化以及市场营销等。该文主要讲述项目开发流程、产品原型体现方法、Axure RP8工作界面及主要功能。

关键词：Axure;原型设计;项目开发流程;产品

中图分类号：TP311 文献标识码：A

文章编号：1009-3044（2020）03-0283-02

产品原型是将页面的基本结构、页面的排版布局、功能模块、元素、人机交互的动作等，通过线框描述的方法在纸上或者使用工具画出来，可以更具体、更生动地表现出来。现在客户有了更多需求，想用更独特的方式实现，但只用语言沟通交流做出来的产品可能达不到客户预期的效果还需要返工。我们可以使用产品的原型设计向客户演示，更直观地向客户讲解产品原型的预期效果，可以快速地挖掘出用户的真实需求，再做项目，这样做出来的项目和客户预期的更接近，可以降低开发成本。项目开发人员也可以根据设计原型进行沟通，明确项目需求，可以提高开发效率。但产品原型并不是一个可以投入使用的软件，只有基本的效果而已。产品原型又分为草图原型、低保真原型、高保真原型。草图原型就是在纸上画出大概的需求，没有交互，不便于交流。低保真原型美观上和交互效果上还很欠缺，但可以快速构建产品大致結构，提供基本交互效果，方便和用户以及开发人员之间的交流。高保真原型就是和真实产品很接近，可以模拟出真实软件的界面及交互效果，只是不是连接的数据库，但可以模拟数据的增删改查。高保真原型需要投入大量的时间和精力。接下来，我浅谈一下项目开发流程、Axure RP8工作界面及主要功能。

1 项目开发流程

项目开发会涉及很多成员，如需求分析师、产品经理、美工、UI设计师、前端开发人员、后台开发人员、架构师、软件测试员、技术总监等。一般项目开发分为三大步，需求分析、项目开发、软件测试。下面我简单描述下这三个环节：

1.1 需求分析

需求分析是非常重要的环节，需求分析又分很多步骤。第一步，需求分析，先和客户交流，了解客户需求，了解产品需要实现哪些功能及主要任务流程，并写相关需求文档。如果是公司内部研发就头脑风暴，进行市场分析，分析将研发的产品需要实现哪些功能及主要流程。第二步，画思维导图，将用户描述的信息用图呈现出来，主要包含产品的各个功能模块及其逻辑关系等。第三步，画流程图，画出每一步具体是怎么操作实现的，可以阻止一些不切实际的想法。第四步，页面架构设计，也就是整个项目需要有哪些页面。第五步，页面布局设计，页面布局设计又分为总体结构布局设计和导航设计。首先确定总体结构布局设计，然后确定导航是水平导航还是垂直导航，最后确定每一个功能模块放置的位置。第六步，低保真原型设计，低保真原型设计就是利用相关设计工具制作出简单的软件原型。其实，需求分析前还有一步非常重要的过程就是竞品分析，分析同行做得比较好，比较成熟的部分，分析同行有哪些功能，怎么实现的。第七步，原型评审，项目组成员都需要参加，开会讨论该原型是否符合要求。不同角色关注的问题都不同，前端关注的是美观、如何操作简单，后台开发人员关注的是怎么实现更简单，总监关注的是产品周期，测试人员关注的是项目的功能是否齐全，所以产品经理一定要考虑周全。一般原型评审通过后需求分析阶段就结束了，签署相关文件就进入下一阶段项目开发。但有些客户还会要求画高保真原型。

1.2 项目开发

项目开发又分前端设计和后台开发，以前前端设计根据美工使用Photoshop出的设计图做相应的静态网页，现在有原型设计，可以直接按照产品原型做静态网页。现在前端有很多框架，前端设计之前一定要考虑好用什么框架，一般框架确定之后都不会再更改，如果想更改会非常麻烦。框架就像修房子时的基本架构，架构都搭建好了，后面还想更改的话，一般情况下都是推倒重建。现在不仅有很多浏览器，移动设备也普及了，前端开发还得考虑兼容性和响应式布局。前端做好后，再是后台开发，后台开发分很多语言，有asp.net、php、Java等，先选择用什么技术，再选择用什么框架。后台开发也有很多框架，一般先搭好框架，再分配每个成员做哪一个模块，督促整个项目开发周期。团队项目开发过程会涉及项目整合，可以用SVN，SVN可以将所有成员的代码自动整合在一起，能看到每次是谁更新了，更新的内容可以高亮显示出来。如果出错了，还可以还原到某个节点。项目开发完成后是软件测试。

1.3 软件测试

软件测试也是非常重要的环节，软件测试是保证软件质量的重要手段。软件测试不仅仅是找错误，还需要分析错误产生的原因，如何进行改进。一般软件测试都不让开发人员测试，由于思维定式开发人员很难找到自己的错误。测试需要有测试需求分析、业务流程分析、测试用例设计、测试用例评审、测试用例的更新和完善。软件测试又分黑盒测试和白盒测试。黑盒测试也就是功能测试，白盒测试就是内部结构测试、逻辑测试。有些项目开发测试周期比开发周期都长。

1.4 小结

实际开发过程中，一个公司一般会几个项目同时推进，由于项目的开发周期短，人手等问题。有时会由多人共同完成一个产品原型，需求分析阶段主要由产品经理和美工设计交流，出产品原型和需求文档。开发人员等不及需求文档，直接看产品原型就进行后续开发。需求阶段其实还应该有数据分析，写数据字典，有些产品经理或需求分析师可能对数据库不太了解，会让后台开发人员完成。开发完成后，测试工作可能还会交给产品经理来做。

2 Axure RP8工作界面及主要功能

2.1 产品原型体现方法

产品原型的体现方法有很多，主要可以通过纸质、word、Vl-SiO、Axure等工具来实现。其中用纸质实现的话，可以快速地画出页面的大致效果，还可以用来记录设计师的瞬间灵感，但纸质的原型可能只有设计师本人才看得懂，不适于向客户进行展示，不便于后续的交流讨论、研发设计、备案等，还得转换成电子文档，比较麻烦。因此纸质的原型适合项目小、工期短、用户需求少的产品;使用Word進行原型设计的话，可以使用文本框、图片、形状、图表等工具，画出一个简单的产品原型。Word简单，使用方便，效果丰富，但word画出的原型交互效果不好，几乎没有任何的交互效果;VISiO的话，也可以画原型，但更适合画流程图;一般画原型都使用的是原型设计的专用工具，比如Axure、墨刀、mockup screen等。用专用工具不仅有丰富的控件，还可以做出更好的交互效果。其中Axure RP是其中的佼佼者。

2.2 Axure RP8工作界面及主要功能

Axure RP是一款快速实现、准确表达、带有交互效果且容易上手的原型设计工具。一旦掌握了一定的开发技巧后，加上一个良好的规划，那么很多东西都可以信手拈来。Axure的主要功能为：绘制网站架构图、绘制流程图、使用元件绘制出简单的原型、可以添加交互用例及样式、输出HTML网站、输出word规格文档等。其中word文档中包含目录、网页原型、注释等很多内容。

Axure RP8软件界面大致可以分为8个区域，分别为菜单栏、工具栏、工作区域、页面面板、元件面板、母版面板、检视面板、概要面板。其中文件菜单除了有新建、保存、打开等基本功能，还可以新建团队项目。发布菜单可以生成HTML文件和Word说明书。工具栏非常快捷方便，工具栏中可以自定义工具栏，工具栏中有钢笔工具和Photoshop的类似，可以绘制路径、形状等，工具栏中还有对齐方式，样式工具栏等。页面面板用来显示软件页面，可以看到产品的大致结构及页面间的关系。页面结构采用树形菜单，层级分明，结构清晰，可以对页面进行增加、移动、删除等基本操作，还可以自动生成网站的架构图。元件面板又分基本元件、表单元件、菜单和表格元件、标记元件、流程图元件、图标元件。元件面板可以自定义元件库以及载人外部元件库。基本元件是最常用的，矩形元件可以快速绘制网页布局。动态面板用得非常多，可以用来实现简单的交互效果。中继器可以绑定数据，用来实现数据的增删改查功能。表单元件可以配合变量使用，实现值的传递等。流程图元件可以和工具栏中的连接及箭头使用绘制出流程图。还有很多的图标元件也都非常实用。母版面板可以设计共用部分，重复利用，提高开发效率。比如导航、版权信息等可以使用母版实现，还可以将母版一键添加到所有页面中，或删除母版，以及控制母版位置等。检视面板可以给元件命名、添加交互效果、注释，以及编辑样式和交互样式设置等。其中交互效果有很多事件，如载入时、鼠标单击、移入、移出等事件。配置的动作也有很多，如打开链接、设置显示隐藏、设置文本、设置图片、设置启用禁用、设置元件样式大小等动作，还可以添加变量、使用表达式、使用函数，添加条件等。概要面板不仅可以看到页面使用了哪些元件，还可以管理动态面板，如快速添加、复制、删除动态面板状态等。

3 结束语

Axure RP就其本身而言，其实仅仅是一个工具，大部分人都可以很快学习并掌握之，但要画出好的原型，会用只是一个最基本要求，关键是要有良好的原型开发思维。也就是说画原型的重点不是技术，而是思维，除了要有整体规划之外，还需要充分结合实际业务需求，在理解需求的基础上进行开发。画产品原型前一定要对行业非常了解，市场分析很重要，现在互联网产品太多了，市场分析可以体现产品的价值。在公司产品经理的地位是比较高的，很多人说公司里最大的产品经理是老板。产品经理分不同的级别，初级的是产品助理，主要画原型设计;中级的是产品经理，会负责原型评审会议的组织;高级的则是产品总监，会负责多条产品开发的进度。在开发项目过程中，需求分析是最重要的，需求分析就像修房子时打的地基，地基都不稳的话，后面修得再高再好都有可能塌。地基不好的话，我们可以重新打，如果地基都没打好就开始修的话，后面维护起来非常麻烦，到时再重建的话成本就不是一般的高。地基打好修好后还需要检查是否安全以免人员伤亡。所以说项目开发时，需求分析是第一步也是最重要的一步，如果没有需求分析直接开发，开发效率将非常慢，会出现边做边改，边做边想的现象。如果需求分析都出错了，对于后续开发会有很大影响，很有可能返工，不仅会提高成本，还可能使得项目延期上线。需求分析可以降低开发成本及提高开发效率。需求分析后是项目开发，项目开发完成后还需要进行测试再上线使用。

参考文献：

[l]刘刚.Axure RP8原型设计图解视频教程：Web+App[M].北京：人民邮电出版社，2017.

[2]张晓景.Axure RP 8互联网产品原型设计：微课版[M].北京：人民邮电出版社，2018.