用Axure RP做整体原型设计的步骤

信息架构确定了之后,就需要对每一个页面进行元素的排版,排版之前,一般都会先对页面进行一个布局设计的考虑。我们需要对这些内容块进行一定的设计布局,这里的布局结构取决于设计人员对内容编排的把握,不同的布局会产生不同的效果。

其实这个应该较早的提出来,因为已经发布过很多关于用Axure RP设计原型实例的文章,不过大部分都是关于单个功能或者交互效果的演示实例,而没有将其串联起来形成一个整体,比如一个网站或者是一个互联网产品。用 Axure RP设计一个实例的步骤和用其设计一个整体产品的步骤还是不一样的,所侧重的点不一样,实例更侧重于功能点或交互效果的表现,整体产品则需要将各个实例串 联起来,形成一个功能或效果集合,达到集中展示。因此整体的产品更侧重于信息架构,布局展示,实例合并,整体效果聚合等方面,本文就结合自己的工作经验, 简单的介绍一下如何用Axure RP设计完整的产品。

  1、确定信息架构

  信息架构对于一个整体 产品而言是非常重要的,犹如现在盖房子时的地基和框架结构,整个结构决定了将来的房型样子,及房子是否稳固。而WEB产品的信息架构则决定了产品未来的功 能导航结构,是一个底层框架的作用,因此非常重要,地基不稳,安能盖高楼?那么如何来确定信息架构呢?

  一般来讲,我们在做需求分析的时 候,都会把几个主要的功能点抓出来,这几个功能点就可以浓缩一下形成产品的初步信息架构。比如要做一个合同管理的功能,要求实现合同信息管理,合同履约管 理,合同统计报表等功能,这里列出来的功能点就可以拿来做信息架构。再比如我们要做一个会员管理的功能,注册和登录是必不可少的功能点,那么就可以将其列 为会员管理下的两个基本信息架构。其实每个网站产品最终确定下来的一级导航栏里面的各个栏目就是一个网站的信息架构了。

  那么用Axure RP如何来管理信息架构呢?Axure RP提供了一个非常方便操作的站点地图面板(Sitemap)来管理页面结构,结构菜单采用树形菜单,层级分明,结构清晰,还能自动生成框架结构图,非常方便。关于站点地图面板的使用,详情可参见《Axure RP介绍–站点地图面板》里面的介绍。这里简单的以一个企业网站的首页内容为例。

  

  2、确定页面布局

   信息架构确定了之后,就需要对每一个页面进行元素的排版,排版之前,一般都会先对页面进行一个布局设计的考虑。通常我们做WEB产品设计的时候,都会遵 循一些已有产品总结出来的布局结构,比如三行三列布局,三行两列布局等,再如左导航右内容的形式,左内容右导航的形式等,这些都是大的布局结构,是整体页 面的布局排版。细分到具体页面内容的时候,就需要对每一个内容块的展示位置进行布局,如企业网站首页的一般内容有图片新闻,通知通告,公司新闻,产品介 绍,产品展示等等,我们需要对这些内容块进行一定的设计布局,这里的布局结构取决于设计人员对内容编排的把握,不同的布局会产生不同的效果。如电子商务网 站,对内容块和广告块的布局排版就非常讲究,因为不一样的布局,所带来的用户点击量和转化率是不一样的。这种情况下,即对某一类产品的布局把握不好的时 候,可以参照已有成熟产品的内容布局,因为它们已经有运营数据在支持。

  在用Axure RP做布局设计的时候,可以用默认组件库里面的占位符组件来设计(关于占位符组件的使用,参照这里),先将需要设计的区块用占位符布局,然后标上文字标示,以此来表示这里将来需要设计放置的内容。这个步骤基本决定了一个页面的布局。

  

  3、内容完善

   页面布局布的就是内容块,当决定了某块内容的放置位置之后,就可以一块一块的完善设计内容,使其接近于最终产品的展示样式。这个时候就是要用到各个实例 效果的时候了,比如图片新闻,我们可以用幻灯片效果来做,比如产品展示,我们可以用跑马灯效果来做,具体采用什么样的交互效果来实现内容块要求展示的内 容,取决于产品设计人员的把握和用户的需求及用户体验,其中用户体验是比较大的一块,就拿幻灯片效果来说,是否需要设计数字导航键,是否需要自动播放,是 否需要设计缩略图等等,这些都需要仔细考虑之后再做决定,这个可以在设计产品时候多多讨论沟通,多看看别人的设计效果。譬如电子商务网站首页的Flash 图片轮播效果,其实就是幻灯片效果,各个电商网站的设计大同小异,就完全可以借鉴参考。

  这里用Axure RP来设计的实例介绍,前面讲的比较多了,用到的是Axure RP的核心功能,如组件的组合使用,动态面板的灵活应用等等,需要去发挥设计人员自己的想象力和创造力,现在网络上有的这些效果也都是人想出来的,并不是一开始就有的。

  

   经过这样三个步骤的设计,一个中低保真度的产品页面原型就算完成了,逐步的完成所有页面的设计之后,这个产品的原型设计也就告一段落了。如果要设计高保 真度的原型,可能还需要UI设计人员的介入,提供一套接近最终产品效果的UI效果,然后切换到原型上去。基本上按照这样三个步骤来做原型设计,不会有什么 大的问题,前提是产品的需求已经基本确定,要是连框架都还没有定下来,也就是说第一步都还不能做,那是没有办法开始做原型设计的。

时间: 2024-10-18 21:43:27

用Axure RP做整体原型设计的步骤的相关文章

Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板)

Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板) 2018年4月16日luodonggan Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最新模板) 文章作者分享了一种基于设备模板的移动端原型设计方法,相信能够对你的原型设计工作带来帮助,值得马克. 在使用Axure设计移动端原型的应用方面,我总结出了两种常用的方法.第一种是更适合在移动端进行演示的设计方法,大家可以参考我之前已经分享过的一篇教程:使用Axure打造最佳的移动端交互原型教程

Axure RP Pro 7.0 汉化步骤

1.下载汉化包.解压. 2.首先关闭正在运行的Axure RP Pro 7.0 . 3.复制Lang文件夹到 安装Axure RP Pro 7.0 的目录下.

原型设计实践

      在教师管理系统这个项目中.開始学习并使用Axure进行原型设计.虽然如今能够用Axure来进行一些简单的界面设计和交互设计.仍认为自己掌握的仅仅是Axure强大功能的微小的一部分.       提到原型设计.不得不提一个词:UCD(User Centered Design). 即以用户为中心的设计,是在设计过程中以用户体验作为设计决策的中心,强调用户优先.       我们开发软件产品的第一步就是需求分析.在需求分析阶段常常出现的问题就是:       1.用户描写叙述的需求和开发者

推荐两个界面原型设计工具--GUIDesignStudio 和 Mockups For Desktop

前段时间,有幸参加一次高级软件架构师的培训,授课老师介绍了两个很好玩的界面原型设计工具:GUIDesignStudio 和 Mockups For Desktop,现分享一下,截图说明,洗洗眼球,权当娱乐. 以前在做界面原型设计的时候(不多,但有时候要做的),印象中多数用Visio或者一些UML工具来大致描述一下,效果及交互性较差,不知您是否做过这方面的工作,不管有没有,我们来了解下这两个比较有意思的东西吧.GUIDesignStudio 运行后,随便画上几个控件,界面如下: 运行设计好的内容后

干货!所有常用的原型设计工具都在这里了

本文列举了20余款当前国内外比较火爆的原型设计工具.我把它们分为以下五类: 1. 交互原型设计工具(仅限页面交互) 2. 手机原型工具 3. 网页原型工具 4. 静态原型工具 5. 动态原型工具(组件和页面交互) 交互原型设计工具(仅限页面交互) 这一类工具主要是建立页面之间的交互.其本身不能进行组件的制作和设计,需要从其它地方(例如:PS,本地)导入设计图,对已有的设计图创建热点,进行交互设计. Invision - 一款很好的制作原型交互演示的工具.你可以从本地.Dropbox.Google

分享比较热门的原型设计工具

交互设计师的一项重要工作就是进行产品原型设计(Prototype Design).而产品原型设计最基础的工作,就是画出站点的大体wireframe(框架图)并结合批注.大量的说明以及流程图等,将自己的产品原型完整而准确的表述给产品.UI.重构/开发工程师等等,并通过沟通反复修改prototype 直至最终确认,然后进入后续的设计开发流程. 要完成以上复杂的设计和沟通工作,需要一个好的原型设计工具.这里就目前常用的和比较热门的工具来分享一下:Word(产品经理比较常用)Fireworks(交互组内

关于原型设计

一.原型的出现: >过去的软件功能单一,没有太多的业务. >现在的软件功能复杂,用户需求多. >挖掘用户的实际需求. >项目组之间降低沟通成本. 二.原型的分类: 1.草图原型,描述产品大概需求,记录瞬间灵感 2.低保真原型,展示系统的大致结构和基本交互效果 3.高保真原型,视觉上和体验上几乎接近真实产品 三.产品原型设计工具发展历程: 1.白板上或者草纸上手绘. 上手快,可以瞬间记录创意或灵感,可以及时进行修改,但是它难以表达软件的整体流程和交互效果. 2.使用画图工具. 包括用

了解原型设计的工具

原型设计的工具有哪些 交互原型设计工具(仅限页面交互) 这一类工具主要是建立页面之间的交互.其本身不能进行组件的制作和设计,需要从其它地方(例如:PS,本地)导入设计图,对已有的设计图创建热点,进行交互设计. Invision - 一款很好的制作原型交互演示的工具.你可以从本地.Dropbox.Google Drive和Box上传图片.使用拖拽快速创建热点.它的分享.协作.评论功能也很方便. Chianco- 一款轻量级的交互原型设计工具.拖一拖鼠标, 快速创建交互:内置多种转场和触发效果,点一

常用的原型设计工具

本文列举了20余款当前国内外比较火爆的原型设计工具.我把它们分为以下五类: 1. 交互原型设计工具(仅限页面交互) 2. 手机原型工具 3. 网页原型工具 4. 静态原型工具 5. 动态原型工具(组件和页面交互) 交互原型设计工具(仅限页面交互) 这一类工具主要是建立页面之间的交互.其本身不能进行组件的制作和设计,需要从其它地方(例如:PS,本地)导入设计图,对已有的设计图创建热点,进行交互设计. Invision - 一款很好的制作原型交互演示的工具.你可以从本地.Dropbox.Google