1、项目一了解产品原型设计项目一了解产品原型设计学习目标学习目标1.掌握原型设计的概念。掌握原型设计的概念。2.了解原型设计的意义。了解原型设计的意义。3.了解了解Axure RP的基本功能。的基本功能。1.1原型设计的概念原型设计的概念原型是一种行之有效、可操作性强的产品开发理念。其主要思想是在需求分析阶原型是一种行之有效、可操作性强的产品开发理念。其主要思想是在需求分析阶段先行开发一个与需求尽可能匹配的段先行开发一个与需求尽可能匹配的“简约版简约版”产品产品,然后通过需求分析沟通然后通过需求分析沟通,再再进行更改进行更改,以便准确地表达客户真实需求以便准确地表达客户真实需求,并最终实现产品的成
2、功开发。并最终实现产品的成功开发。Axure RP是一款快速原型设计工具是一款快速原型设计工具,它通过设计出的逼真的项目原型它通过设计出的逼真的项目原型,在软件开发前在软件开发前,真实地真实地体现并直观地展示该软件的效果与核心逻辑功能体现并直观地展示该软件的效果与核心逻辑功能,从而实现精确的需求分析。从而实现精确的需求分析。原型是用线框、图形描绘出的产品框架原型是用线框、图形描绘出的产品框架,也称线框图。线框图描绘的是页面功能也称线框图。线框图描绘的是页面功能结构结构,它不是设计稿它不是设计稿,也不代表最终布局也不代表最终布局,线框图所展示的布局线框图所展示的布局,最主要的作用是描述最主要的作
3、用是描述功能与内容的逻辑关系。原型设计是一种让用户提前体验产品、交流设计构想、功能与内容的逻辑关系。原型设计是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式展示复杂系统的方式,可以展现出交互设计的结果可以展现出交互设计的结果,当最终实现的时候当最终实现的时候,交互流程会交互流程会和原型保持一致和原型保持一致,如图如图1-1所示。所示。图图1-1基础手绘原型设计基础手绘原型设计原型是产品成型之前的一个框架勾勒和功能模拟原型是产品成型之前的一个框架勾勒和功能模拟,产品原型可以是简单的模拟产品原型可以是简单的模拟(低低保真原型保真原型):它基本停留在产品的外部特征和功能构架上它基本停留在产
4、品的外部特征和功能构架上,由简单的线框图构成由简单的线框图构成,用用于表现最初的设计概念和思路于表现最初的设计概念和思路,表达产品大致的框架。也可以是交互型模拟表达产品大致的框架。也可以是交互型模拟(高保高保真原型真原型):真实模拟产品最终的视觉效果、交互效果和用户体验真实模拟产品最终的视觉效果、交互效果和用户体验,不用编程即可完美不用编程即可完美展示网站成型之后的样子展示网站成型之后的样子,如图如图1-2所示。所示。图图1-2基础页面效果基础页面效果交互式原型是指尽可能贴合最终用户界面的高保真原型交互式原型是指尽可能贴合最终用户界面的高保真原型,可以真实地模拟用户和可以真实地模拟用户和界面的
5、交互。当一个按钮被按下的时候界面的交互。当一个按钮被按下的时候,相应的操作必须被执行相应的操作必须被执行,对应页面也必须对应页面也必须出现出现,尽可能地提供完整的产品体验。交互式原型囊括了产品该有的美学特征尽可能地提供完整的产品体验。交互式原型囊括了产品该有的美学特征,并并且尽量贴合最终版本。也就是说且尽量贴合最终版本。也就是说,它不涉及它不涉及HTML/CSS/JS,也不用考虑服务器端的也不用考虑服务器端的程序和数据库即可实现程序和数据库即可实现,如图如图1-3所示。所示。图图1-3手绘交互式原型设计手绘交互式原型设计原型设计的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、原型
6、设计的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师、架构师、程序开发工程咨询师、用户体验设计师、交互设计师、界面设计师、架构师、程序开发工程师等。师等。1.2原型设计的意义原型设计的意义原型设计是在项目前期阶段的重要设计步骤原型设计是在项目前期阶段的重要设计步骤,是在正式开始视觉设计或编码之前是在正式开始视觉设计或编码之前最具成本效益的可用性跟踪手段之一最具成本效益的可用性跟踪手段之一,主要以发现新想法和检验设计为目的主要以发现新想法和检验设计为目的,重点重点在于直观体现产品的主要界面风格以及结构在于直观体现产品的主要界面风格以
7、及结构,并展示主要功能模块以及各模块之并展示主要功能模块以及各模块之间的相互关系间的相互关系,不断确认模糊部分不断确认模糊部分,为后期的视觉设计和代码编写提供准确的产品为后期的视觉设计和代码编写提供准确的产品信息。信息。原型设计之于应用开发原型设计之于应用开发,是第一要素。它所起到的不仅是沟通的作用是第一要素。它所起到的不仅是沟通的作用,更有体现之更有体现之效。通过内容和结构展示效。通过内容和结构展示,以及粗略布局以及粗略布局,能够说明用户将如何与产品进行交互能够说明用户将如何与产品进行交互,体体现开发者及现开发者及UI设计师的想法设计师的想法,体现用户所期望看到的内容体现用户所期望看到的内容
8、,体现内容相对优先级体现内容相对优先级,等等等等,如图如图1-4所示。所示。一方面一方面,对设计师和开发者而言对设计师和开发者而言,原型是用来测试产品的绝妙工具原型是用来测试产品的绝妙工具,原型测试能够节原型测试能够节省大量的开发成本和时间省大量的开发成本和时间,可在确定交互界面之后再正式开发后端产品架构。另可在确定交互界面之后再正式开发后端产品架构。另一方面一方面,将原型提供给用户将原型提供给用户,并跟踪用户反馈并跟踪用户反馈,可以及时了解产品各个细节的功效可以及时了解产品各个细节的功效,并并且可以提升整个团队的积极性。且可以提升整个团队的积极性。图图1-4交互式页面效果交互式页面效果典型的
9、软件产品开发过程一般经历需求分析、产品方案、交互视觉设计、开发、典型的软件产品开发过程一般经历需求分析、产品方案、交互视觉设计、开发、测试、上线六个阶段测试、上线六个阶段,这六个阶段形成一个闭环这六个阶段形成一个闭环,每一环节称为一个每一环节称为一个“迭代迭代”。需。需求分析阶段决定一个产品或一个功能可做还是不可做求分析阶段决定一个产品或一个功能可做还是不可做;产品方案阶段为需求确认产品方案阶段为需求确认后后,产品经理进入细化产品方案设计环节产品经理进入细化产品方案设计环节,包括梳理功能、细化逻辑和排优先级等包括梳理功能、细化逻辑和排优先级等;交互视觉设计阶段用于更生动地表述需求交互视觉设计阶
10、段用于更生动地表述需求,交互设计师在充分理解产品目标客户、交互设计师在充分理解产品目标客户、场景和需求的基础上场景和需求的基础上,结合交互稿结合交互稿,使用视觉语言来完善每一个使用视觉语言来完善每一个UI的具体视觉细节的具体视觉细节;开发阶段是开发工程师依照产品需求文档、交互稿和视觉稿开发阶段是开发工程师依照产品需求文档、交互稿和视觉稿,将产品方案通过编将产品方案通过编程的方式真正实现出来程的方式真正实现出来;测试阶段为产品开发上线前经过的各类测试测试阶段为产品开发上线前经过的各类测试,产品通过测产品通过测试后试后,可对外上线供客户使用。可对外上线供客户使用。1.3Axure RP概述概述目前
11、目前,市面上有很多款产品原型图工具市面上有很多款产品原型图工具,如如Axure、Mockplus、墨刀等。现在、墨刀等。现在,很多很多原型设计工具都可以让设计者不使用编码原型设计工具都可以让设计者不使用编码(Objective C、Swift或者或者JavaScript)便便能迅捷高效地生产出可交互高保真原型能迅捷高效地生产出可交互高保真原型,且具备功能性和一定的动效且具备功能性和一定的动效动态可动态可交互原型的价值胜过千张静态图片。那么交互原型的价值胜过千张静态图片。那么,选用什么工具来完成快速原型绘制就选用什么工具来完成快速原型绘制就成了一个争论不断的话题成了一个争论不断的话题,从早些年用
12、户较多的从早些年用户较多的Visio到如今到如今Axure/OmniGraffle/Adobe Creative Suite遍地开花遍地开花,再加上在线工具再加上在线工具Balsamiq、Lucidchart或或Google Drive,思维导图工具思维导图工具XMind、Mindmanager或或MindNode,在不同的细分领域给了我们很多的选择。在不同的细分领域给了我们很多的选择。那么那么,哪个才是最好的原型设计工具呢哪个才是最好的原型设计工具呢?其实其实,在实际使用过程中在实际使用过程中,由于项目具体阶由于项目具体阶段、平台特性以及输出物展示对象的不同段、平台特性以及输出物展示对象的不
13、同,并没有哪个工具受到设计师一致认可并没有哪个工具受到设计师一致认可,每个都有各自的优势和缺陷。工具只是实现目标的一个手段每个都有各自的优势和缺陷。工具只是实现目标的一个手段,因此因此,选用何种工具选用何种工具完全基于个人的习惯及方便。完全基于个人的习惯及方便。其实一直以来其实一直以来,对于原型工具的使用对于原型工具的使用,业内存在两种不同的声音业内存在两种不同的声音:一种是号召大家手一种是号召大家手绘原型绘原型,表意清楚即可表意清楚即可;另一种是信奉另一种是信奉“工欲善其事工欲善其事,必先利其器必先利其器”,鼓励大家尝试各鼓励大家尝试各种原型工具软件。种原型工具软件。Axure RP便是首选
14、工具之一便是首选工具之一,Axure RP可以快速、高效地创建可以快速、高效地创建产品原型产品原型,特别是支持多人协作设计和版本控制管理的产品设计模式特别是支持多人协作设计和版本控制管理的产品设计模式,已经被很多已经被很多企业所接受。甚至在企业产品经理的招聘条件中企业所接受。甚至在企业产品经理的招聘条件中,“能够熟练使用能够熟练使用Axure”已经成已经成为基本要求之一。为基本要求之一。Axure RP是一款快速原型设计工具。是一款快速原型设计工具。Axure代表美国代表美国Axure Software Solution公公司司;RP则是则是Rapid Prototyping(快速原型快速原型
15、)的缩写。的缩写。Axure RP是该公司旗舰产品是该公司旗舰产品,是一个专业的快速原型设计工具是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的用让负责定义需求和规格、设计功能和界面的用户能够快速创建应用软件或户能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。网站的线框图、流程图、原型和规格说明文档。它不需要用户具备任何编程或写代码基础它不需要用户具备任何编程或写代码基础,就可以快速、高效地创建原型就可以快速、高效地创建原型,设计出设计出交互效果良好的产品原型交互效果良好的产品原型,常用于互联网产品设计、网页设计、常用于互联网产品设计、网页设计、UI设
16、计等领域。设计等领域。作为专业的原型设计工具作为专业的原型设计工具,它还能同时支持多人协作设计和版本控制管理。它还能同时支持多人协作设计和版本控制管理。Axure RP作为一款热门的原型设计工具作为一款热门的原型设计工具,可以完成很多纸和笔做不到的事情可以完成很多纸和笔做不到的事情,特别特别是高交互的页面是高交互的页面,用动画效果展现可以让人瞬间清楚你要表达的内容。用动画效果展现可以让人瞬间清楚你要表达的内容。Axure的可的可视化工作环境可以让用户以鼠标的方式轻松快捷地创建带有注释的线框图视化工作环境可以让用户以鼠标的方式轻松快捷地创建带有注释的线框图,不用不用进行编程进行编程,就可以在线框
17、图上定义简单连接和高级交互。就可以在线框图上定义简单连接和高级交互。本书以本书以8.0版本为例来介绍版本为例来介绍,软件界面如图软件界面如图1-5所示。所示。图图1-5Axure RP 8.0界面界面项目小结项目小结原型是产品成型之前的一个框架勾勒和功能模拟原型是产品成型之前的一个框架勾勒和功能模拟,产品原型可以是简单的模拟产品原型可以是简单的模拟(低低保真原型保真原型):它基本停留在产品的外部特征和功能构架上它基本停留在产品的外部特征和功能构架上,由简单的线框图构成由简单的线框图构成,用用于表现最初的设计概念和思路于表现最初的设计概念和思路,表达产品大致的框架。也可以是交互型模拟表达产品大致
18、的框架。也可以是交互型模拟(高保高保真原型真原型):真实模拟产品最终的视觉效果、交互效果和用户体验真实模拟产品最终的视觉效果、交互效果和用户体验,不用编程即可完美不用编程即可完美展示网站成型之后的样子。展示网站成型之后的样子。交互式原型是指尽可能贴合最终用户界面的高保真模型交互式原型是指尽可能贴合最终用户界面的高保真模型,可以真实地模拟用户和可以真实地模拟用户和界面的交互。当一个按钮被按下的时候界面的交互。当一个按钮被按下的时候,相应的操作必须被执行相应的操作必须被执行,对应页面也必须对应页面也必须出现出现,尽可能地提供完整的产品体验。尽可能地提供完整的产品体验。原型设计在整个产品流程中处于非常重要的位置。在进行原型设计之前原型设计在整个产品流程中处于非常重要的位置。在进行原型设计之前,需求或需求或是功能信息都相对抽象是功能信息都相对抽象,原型设计的过程就是将抽象信息转化为具象信息的过程原型设计的过程就是将抽象信息转化为具象信息的过程,之后的产品需求文档是对原型设计中的板块、界面、元素及它们之间的执行逻辑之后的产品需求文档是对原型设计中的板块、界面、元素及它们之间的执行逻辑的描述和说明。的描述和说明。感谢观看 THANKS!
