入门:如何应用AxureRP做原型设计

什么是原型呢?这个在之前介绍为什么需要进行原型设计当中有提到,原型是产品的最初形态,确认用户对产品界面和操作功能可用性的需求,高保真的原型接近于产品的最终形态,但仍只是原型。产品原型简单的说就是产品设计成形之前的一个大体框架,对网站来讲,就是将页面模块、元素进行粗放式的排版和布局,深入一些,还会加入一些交互性的元素,使其更加具体、形象和生动。

什么是原型呢?这个在之前介绍为什么需要进行原型设计当中有提到,原型是产品的最初形态,确认用户对产品界面和操作功能可用性的需求,高保真的原型接近于产品的最终形态,但仍只是原型。产品原型简单的说就是产品设计成形之前的一个大体框架,对网站来讲,就是将页面模块、元素进行粗放式的排版和布局,深入一些,还会加入一些交互性的元素,使其更加具体、形象和生动。

一般在进行主要页面原型设计之前,设计师需要了解设计需求,如果身兼了需求分析或产品分析等角色,设计过程就会稍微简单一些,因为已经了解了从用户需求到转化成可实现需求的整个过程,否则的话至少需要产品负责人员提供一份功能清单才能开始设计,最好就是能参与到用户需求的调研里面,这样在设计的过程当中就不容易出现设计人员和需求人员对需求理解上的偏差,减少一些沟通的成本。

用AxureRP来做原型设计的优点应该看的很多了,快速,可交互等等,这里主要结合AxureRP自身的一些功能说明其在原型设计过程当中的应用。借用别人的一张图,主要从交互设计中涉及的三个主要步骤进行说明:就是先设计一个初始的主要页面原型,定义页面流程图,最后再完善原型的过程。

入门:如何应用AxureRP做原型设计

一、 主要页面原型

个人建议在开始设计之前,先手绘一份草图,用来确认上面提到的与需求人员之间的理解差异,这份草图应有一个大致的轮廓,列出主要的功能,有一个很粗的页面布局等等,另外前期的时候不要加入太多的视觉设计,因为这个只是初始化方案,后面应该还会有比较大的改动,且不应该让视觉效果抢了原本要说明演示的交互效果的风头;再者我认为毕竟设计师和专业的美工还是有差异,视觉设计再好看,到后期美工制作的时候可能根本不按这个风格来设计,就浪费时间,还不如省下时间用在以一些交互设计设计方案的推敲上,达到一个最优方案的状态。

开始设计之后就要注意重复页面的重用了,这个AxureRP的模板管理(Master)功能能够满足,就是将某一部分页面,预计后面其他页面会用到的,就先做好模板,这个越早做越好,可以省掉很大一部分设计时间,例如页首,页尾,标记,ICON等。之前也有介绍过使用模板管理的好处,就不再重复介绍。如果只是简单的两三个小页面的功能,可以不用这个功能,但如果页面上的交互比较复杂,且页面数量,元素数量较多的情况下,个人建议还是使用模板管理功能,基本上如果是设计网站或者一个完整的产品的话,肯定都是比较复杂的,如果能在前期就引入模板,后面的设计速度会大大加快,且页面的结构也会更优化,能够提高页面加载速度。

入门:如何应用AxureRP做原型设计

二、 页面流程图

在确定主要页面之后,就可以定义页面流程了。页面流程图有利于向大家展示自己的想法,也有利于思路的整理。可参加之前介绍AxureRP案例时提供的一共以流程图方式来说明登录注册功能的例子。通过页面流程图,可以整理页面的交互行为,在向他人展示的时候,也可以一目了然的看出需要的操作步骤是多少步。

页面与页面间的流程图可以用AxureRP的站点地图面板里面的自动生成流程的图的功能,要使用这个功能,就需要在设计之初就建立好页面的层级结构,比如一般都有首页,然后在首页下面按主要功能模快可能会分成几个页面,再在这些页面下建立各自的功能子页面,这样就是三层结构,自动生成出来的页面流程图结构也会很清晰,但前提就是要设计好结构,例如按页面分层次,按功能分层次等。

页面的流程图就复杂一些,涉及到一些操作的业务规范和要求,这个就要求设计人员要熟悉用户需求的,并且还要熟悉一些常见的操作流程,一般都是递进式的设计,就是第一步是怎样的,第二步是怎样的,每个步骤之间按顺序从上到下或者从左往右,可以设计成一个页面,也可以设计成一个页面内的多个标签,在设计前要先有构思和大体布局的想法,这样在设计时就不会出错,可以在页面内或者定义一个流程图页面把流程图单独画出来,可以在设计的过程当中做参照。

入门:如何应用AxureRP做原型设计

三、 完善原型

页面的主要页面和页面流程确定之后,就可以完善原型了。这时主要是一些细节的工作,包括前期设计页面的完善,以及一些交互功能的定义等等,也可以适当的加入一些视觉的东西,但还是不宜加入太多。

至于如何去完善原型,可以参照之前的一些介绍AxureRP的文章,参照里面做示例应用时的方式,完善页面上的提示,注释,交互操作等,可能用到得AxureRP的功能也会很多,也会用到一些高级技巧,这里不做过多介绍,可参考实例。需要注意的就是AxureRP的主旨是快速的原型设计,因此在设计过程当中不必太过追求技术效果,一些复杂的交互效果,如果有现成的实例可以用的就借用一下,如果没用,建议就画一个简单的,然后做一下详细的说明,毕竟做复杂的设计会耗掉相当多的时间。

AxureRP只是一种原型设计工具而已,做交互设计最重要的还是想法,工具只是用来帮实现想法的。不必过于追求技术,不必过于追求视觉表现。把握好整个产品方向的同时,应专注于交互流程、页面内交互、布局结构的创新和优化。

转载请注明:木卫艾欧网

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/2480/

(0)
Smiler李想Smiler李想
上一篇 2015-01-01 10:07
下一篇 2015-01-02

相关推荐

  • Mockplus原型交互跟我做之12–使用滚动区组件实现页面滚动

    Mockplus使用滚动区组件实现页面滚动

    2016-07-18
  • 在熟练使用2B铅笔前,请不要打开Axure

    在互联网产品领域,Axure已成为产品经理、产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解我们的产品;但从另一方面讲,Axure绑架了我们的思维,让很多产品经理和设计师养成了“无Axure不设计”的恶习,忽略了用户故事、功能规格和信息架构,甚至走入“为了用Axure而用的误区”,导致了资源的大量浪费和产品的硬伤。因此,提醒为Axure着迷的产品经理:在熟练使用2B铅笔前,请不要打开Axure。

    2015-01-01
  • Axure官方教程中文版第6课:条件、值及变量-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(6).MP4 新建文件 1、添加一张图片和按钮 2、添加条件保证文本框不为空 3、文本框的变量值 4、添加打开“Page1”的动作 5、添加文本字段为空的第二个…

    2015-01-26
  • 交互设计前的预备知识

    进行交互设计之前需要一些预备知识: 预备知识一:能看懂思维导图:下图是艾欧学堂的思维导图 在思维导图中可以清晰明确的看到我们的栏目规划,和内容方向那么原型设计基于此开展设计,如果有一份完整的需求说明书…

    原型设计教程 2014-09-27
  • 【Mockplus教程】复制/克隆

    复制是将页面复制到内存中,克隆是直接创建一个和原页面内容一样的新页面。 1. 复制 选中需要复制的页面,鼠标右键单击,弹出的菜单中选择“复制”, 然后在需要粘贴的位置鼠标右击,在弹出的菜单中选择“粘贴”。 2. …

    Mockplus 2015-09-10
  • 视频网站APP设计原型图

    最近据GEO媒体报道,关于中国国内网络视频APP洞察分析的分析报告表。 该报告调查了华东和华北地区的约1亿用户,分析了各家视频App 3月的使用情况。数据显示,用户使用视频App高峰是在午休时间和睡觉前,即每天的13…

    2015-12-21
  • 018. 内部框架——axure线框图部件库介绍

    网页框架代码<iframe border=0 name=lantk src="要嵌入的网页地址" width=400 height=400 allowTransparency scrollbars=yes frameBorder="0"></iframe>      看到上面这段代码,很多人肯定认出这是htm…

    2014-09-12
  • 苹果用户怎么部署Axure环境-imac&axure

    iMac安装各种必备软件,当然少不了Axure这个吃饭的软件 下载地址在页面底部 ★ 汉化方法: 首先退出正在运行中的 Axure (如果您正在使用). 将 lang.rar 文件解压, 得到 default 文件. ★ Windows版 ① 复制 default 文…

    2014-12-10
  • 8种移动APP导航设计模式大对比

    本文转自用户体验联盟 当我们确定了移动APP的设计需求和APP产品设计流程之后,开始着手设计APP界面UI或是APP原型图啦。这个时候我们都要面临的第一个问题就是如何将信息以最优的方式组合起来? 也许我们对比和了解…

    原型设计教程 2014-10-24
  • 【Mockplus官方教程】mockplus为什么在Windows XP上无法安装?

    此前微软官方已经声明不再维护Windows XP系统, Mockplus出于长远考虑,决定不支持XP系统以腾出精力积极支持Windows 7 / 8 / 10。 对于还在使用Windows XP系统的用户,可以使用Mockplus  Web轻便版来做原型设计。 …

    2015-07-31