关于原型设计及Axure 的入门

 

前言

公司项目需要进行梳理,优化用户体验和改进业务流程,由于之前没有产品经理及项目的原型设计稿,领导决定将这个任务交给我来完成。在此之前,一直是看别人的原型设计,没有自己做过原型设计,因此记录下该文章,引导和我一样的小白用户能快速入门。

工具下载

原型设计工具市面上有不少,也有在线编辑的,我这里选用的是最常见的Axure,提供AxureRP_8.0.0破解版下载地址 。

下载后,压缩包里面包含破解密钥。

设计

所谓的原型设计,是将用户的需求转化为设计模型的一种交互式设计成果。所以再做原型设计之前的必要功课,就是先了解产品的需求。在做原型设计之前,我已经做了2个版本的APP版本开发,所以对需求已经有了一定的了解。需要注意的是,往往原型设计工作是在coding之前展开,所以一定要详细的了解需求,才能做出更好的设计。

啰嗦完了就来介绍Axure的使用,打开Axure显示如图所示:

左上方的index 、page1、page2、page3是表示原型设计的页面,原型设计师由一个个页面和页面之间的交互组成。

左下方是元件,元件是组成页面的元素素材,可以自行导入元件库和素材。我这里是做APP的原型设计,所以从网上找了一个手机模型的元件导入进来。

中间空白区域,就是绘制原型的工作区。

右边的检视区域,是为原型页面添加交互和样式的工作区。

右下方的页面概要,显示页面设计的结构和元件。

我目前使用到的功能区大致就是这些,应该还有我所不知道的功能等待发现。

工作区介绍完后,接下来讲下如何进行绘制。

上面提到我导入了一个手机模型的元件,在元件列表中找到我的手机模型,直接拉入绘制工作区中,工作区中就会显示出手机模型。接下来可以拖入一些自带的元件,自行调整元件大小,让页面看起来更美观。

当你选中登录按钮后,右上方的检视区域可以进行属性和样式的编辑。右下方的概要,显示当前页面的整体结构。

添加用例可以定义各种动作下,应该执行哪些操作,具体动作包含如图中所示。

不过初入门时,一般我没有做得太过复杂,只是使用创建连接功能。点击创建连接功能会提示你选中一个目的页面。表示点击该按钮之后,会跳转到目的页面。从而实现了一个交互上的跳转功能。

最终绘制完成之后,可以按F5预览或者点击右上角的预览图标,会打开浏览器,显示当前编辑的内容,点击带有连接交互的按钮或者区域,会根据设定的动作,执行对应的功能。

 

结束语

原型设计再工具的支持下,其实变得很简单。但是产品设计精髓的地方不在于如何去画原型,而在于去转化业务流程,如何让让用户觉得体验更棒。这才是产品经理需要花费大量精力去做好的事情!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章