使用 Axure绘制原型

答案 Axure是最常用的原型制作工作之一。无须任何HTML/CSS/JavaScript基础,你都可以使用Axure制作出具备良好交互效果的原型图。本系列笔记以金乌的《Axure RP7 网站和APP原型制作从入门到精通》一书为参考教材,系统地学习一下Axure这款原型工具软件及其背后的设计思想。 开

使用 Axure绘制原型

Axure是最常用的原型制作工作之一。无须任何HTML/CSS/JavaScript基础,你都可以使用Axure制作出具备良好交互效果的原型图。本系列笔记以金乌的《Axure RP7 网站和APP原型制作从入门到精通》一书为参考教材,系统地学习一下Axure这款原型工具软件及其背后的设计思想。

开篇之前先提几个基础问题:

(1)什么是用户体验设计?什么是交互设计?什么是视觉设计?它们之间有着怎样的关系?

(2)什么是 UE ?什么是 UX ?User Experience?Usability?衡量“用户体验”有哪些指标和要素?怎么理解“可用性”?

(3)线框图、原型、视觉稿这三者有哪些区别?使用场景是怎样的?

线框图: 低保真图,通常以“黑白灰”线条来表达,制作速度快。

原型图: 中高保真图,可以代表最终的产品,用于在利益相关者之间的沟通。

视觉稿: 高保真图,具备良好的视觉效果。

在大多数的公司中,企业对产品经理和用户体验设计师并没有明确的界限,甚至你可以把二者看成相同性质的角色。

产品经理“斡旋”于开发工程师、系统功能、视觉设计、用户、业务逻辑、项目经理、投资人之间,协调资源并推动产品的发展。作为产品经理,必须深刻理解利益相关者的视角(他们到底想要什么)并与其密切沟通,以营造无障碍的协作环境,让产品在可控范围内推进发展。

身为产品经理,我们必须综合表达许多不同的信息,而这些信息常常会相互矛盾或冲突。我们不仅要熟悉业务流程,要了解技术约束、资源约束等,要了解用户体验对软件程序性能的影响,还要反复地做用户研究和数据分析等。我们要在纷乱的多条件模式下找到至关重要的平衡,并创建出最佳的可行的用户体验。

事实上,任何工具都不过是一种为了实现产品目标的手段而已,Axure同样只是一款工具,在工作中最重要的元素恰恰不是这些工具,而是你本人和你的思想。

1、Axure工作台上常用功能区域划分

菜单栏、工具栏、站点地图、部件面板、母版面板、部件交互和注释面板、部件属性和样式面板、部件管理面板、页面属性面板(包含页面注释、页面交互和页面样式3个选项卡)。 视图 > 重置视图 ,可以重置Axure工作台。

(1) 站点地图 :用于增加、删除和组织原型中的页面。

(2) 部件面板 :用于管理Axure内建的部件库、第三方部件库、自定义的部件库。

2、Axure有哪些内置的常用部件?

线框图就是由一系列的部件组合而成,这和前端页面是一样的,页面由一系列的UI组件组合而成。不同的部件有着不同的功能属性,绘制原型的过程中要恰当选用这些部件。

3、对Axure部件可以执行哪些操作?

4、页面样式 Page Style 有哪些常用的操作?

5、Axure中的交互基础

在Axure中创建 交互 Interactions需要包含以下3个构造模块,分别是: 事件 Events、 用例 Cases、 动作 Actions。交互是由事件触发的,事件是用来执行动作的;交互设计的目的把静态的元素变成动态的,以提升产品的用户体验。

交互是Axure中的构建模块,用来把静态的线框图转换为可交互的HTML原型。每一个 交互 都是由3个最基本的单元构成,即 什么时候When(事件) 在哪里Where(用例) 做什么What(动作)

(1) 事件Events(When) :交互在什么时候发生?交互由事件Events来驱动。在Axure中的事件可以分为两大类,其一是页面事件,其二是部件事件。一个事件中可以包括多个用例,多用例根据条件判断来决定执行哪一条用例路径。

(2) 用例Cases(Where) :用例是用户与应用程序或网站之间交互流程的抽象表达,每个用例中可以封装一个独立的路径。通常情况下,我们让原型按主路径来执行动作,但是为了响应用户的不同操作或其它条件,我们还需要制作可选路径来执行其它动作。Axure中的用例,正是用来给事件Event创建不同的执行路径。 一个事件中可以包含一个或多个用例(多用例时需要根据条件逻辑来判断执行),一个用例又包含一个或多个动作。事实上,你可以把用例看成动作Actions的容器

(3) 动作Actions(What) :动作是由用例定义的对事件的响应。Axure中的动作分为六大类,分别是链接、元部伯、变量、中继器和杂项。

axure和墨刀的区别是什么?制作原型怎么选择?

学习axurerp可以分为以下几个阶段:

一、新手级:

是指刚刚接触原型设计,这个时期主要是打基础。先熟悉AxureRP的工作台,有哪些功能及组件,以及一些基本的操作,弄清楚每个组件是干什么用的。

在新手阶段,主要还是以熟悉为主,可以去网上找点前人总结的经验。再者就是要自己尝试着去用一遍里面的功能,可以做一些简单的页面原型,可以是没有任何交互的,也可以是带点交互的。

二、学徒级:

等到熟悉了AxureRP的所有功能之后,要开始实际应用其去设计一般的中低保真的原型了。光知道组件怎么用了还不够,还要配合交互事件,交互动作,条件判断,甚至是变量一起去实现某个交互的功能。如果说新手阶段是打基础的阶段,那么这个阶段其实就是一个融会贯通的过程,把所掌握的知识活学活用,真正的结合起来去实现一个整体的原型设计要求,这样才能掌握AxureRP的核心功能。

这个阶段的学习前期主要是模仿为主,首先要能看懂别人做的原型实例,看看人家是怎么设计的,然后依样画葫芦,自己动手做一个。

三、大师级

AxureRP自身所带的交互事件和动作已经能实现现有产品层面上的大部分交互效果,只要做基本上都可以用原型来实现。这个阶段可以试着做一些实现起来比较困难的实例,并可以尝试着开始做一些整站或者整体产品的效果,前面都大多停留在单个页面,单个实例的原型设计上,这里就要求能完成更整体的效果,出来的是一个产品的完整的原型。

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

大家都知道,制作原型的工具软件有很多,Axure和墨刀就是其中的两个!很多新手在入门制作原型的时候往往会很是纠结到底选择Axure还是选择墨刀!其实,Axure和墨刀各有各的好,那么我们接下来就来分析一下Axure和墨刀的区别是什么,方便大家选择~axure:Axure作为一款专业的快速原型设计软件,其实在功能上是十分齐全的,并且交互的样式也比较多样,主要是通过动态面板、函数、中继器等几个模块就几乎可以实现任何常见的交互效果,所以说Axure在制作PC端原型图上是占有非常强大的优势的;除此之外,Axure还拥有强大的编辑功能,使得你所制作的原型更具生动化!你还可以将常用的交互和组件进行打包!Axure界面共有九大版块,使用者可以有更好的制作原型体验!还有一个很值得说的点,就是Axure有自带的元件库,如果你想要制作更多的原型而想要用到其它样式的元件库的话,那么是可以自行导入进去使用的!不过,很多新手在初次学习使用Axure时,可能就会因为Axure的功能比较多而往往会比较头晕不知道怎么操作!墨刀:墨刀,也是原型图制作软件,拥有着PC端、手机端、网页版这几个方面,可以让你随时随地可以产品原型设计制作!墨刀和Axure不一样的点是:墨刀主要是用于移动端的app原型制作!其控件的拖拉、大小的调整,都会自然去匹配相应的母版大小,可以说是比较人性化的了。再者,墨刀提供了强大的共享创建功能,方便用户的手机上预览原型。墨刀不好的点就是在交互效果、控件组合、操作面板的选择等等方面上都没有Axure灵活,内置交互效果包括点击、滑动、滚动等,做高保真原型的时候也不大够用;另外,效果切换因为是采用连线的方式,有时会让用户产生错乱的感觉。所以说制作复杂的原型的时候,选择Axure可能就会相对来说要比墨刀好~而且现在的产品经理在制作原型的时候也是普遍使用的是Axure,Axure无论是在功能上还是工作效率上都要强大一些!最重要的是Axure很是能够锻炼一个人的设计思维~总的来说,Axure和墨刀其实就类似与Photoshop和手机的美图秀秀一样,一个在功能上更强化,一个在使用上更简便~至于选择哪一款原型软件,主要还是要根据你所要设计制作的原型来决定~

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理,本文部分文字与图片资源来自于网络,转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请立即通知我们,情况属实,我们会第一时间予以删除,并同时向您表示歉意,谢谢!

图片声明:本站部分配图来自人工智能系统AI生成,国外stocksnap摄影无版权图库。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国外贸事业出一份力,发布内容不收取任何费用也不接任何广告!
 

  • 热门焦点
  • 四川省眉山市仁寿县彰加镇梧桐街邮编是多少

    邮编查询为您提供四川省眉山市仁寿县彰加镇梧桐街邮编,四川省眉山市仁寿县彰加镇梧桐街的邮编,四川省眉山市仁寿县彰加镇梧桐街的邮政编码,四川省眉山市仁寿县彰加镇梧桐街的邮政编码是多少,四川省眉山市仁寿县彰加镇梧桐街的邮政编码查询,四川省眉山市仁寿县彰加镇梧桐街的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县里仁乡万春村邮编是多少

    邮编查询为您提供四川省眉山市仁寿县里仁乡万春村邮编,四川省眉山市仁寿县里仁乡万春村的邮编,四川省眉山市仁寿县里仁乡万春村的邮政编码,四川省眉山市仁寿县里仁乡万春村的邮政编码是多少,四川省眉山市仁寿县里仁乡万春村的邮政编码查询,四川省眉山市仁寿县里仁乡万春村的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县付加镇青洋村邮编是多少

    邮编查询为您提供四川省眉山市仁寿县付加镇青洋村邮编,四川省眉山市仁寿县付加镇青洋村的邮编,四川省眉山市仁寿县付加镇青洋村的邮政编码,四川省眉山市仁寿县付加镇青洋村的邮政编码是多少,四川省眉山市仁寿县付加镇青洋村的邮政编码查询,四川省眉山市仁寿县付加镇青洋村的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县禄加镇六皇村邮编是多少

    邮编查询为您提供四川省眉山市仁寿县禄加镇六皇村邮编,四川省眉山市仁寿县禄加镇六皇村的邮编,四川省眉山市仁寿县禄加镇六皇村的邮政编码,四川省眉山市仁寿县禄加镇六皇村的邮政编码是多少,四川省眉山市仁寿县禄加镇六皇村的邮政编码查询,四川省眉山市仁寿县禄加镇六皇村的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县黑龙滩镇开元村邮编是多少

    邮编查询为您提供四川省眉山市仁寿县黑龙滩镇开元村邮编,四川省眉山市仁寿县黑龙滩镇开元村的邮编,四川省眉山市仁寿县黑龙滩镇开元村的邮政编码,四川省眉山市仁寿县黑龙滩镇开元村的邮政编码是多少,四川省眉山市仁寿县黑龙滩镇开元村的邮政编码查询,四川省眉山市仁寿县黑龙滩镇开元村的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县洪峰乡金鸡村邮编是多少

    邮编查询为您提供四川省眉山市仁寿县洪峰乡金鸡村邮编,四川省眉山市仁寿县洪峰乡金鸡村的邮编,四川省眉山市仁寿县洪峰乡金鸡村的邮政编码,四川省眉山市仁寿县洪峰乡金鸡村的邮政编码是多少,四川省眉山市仁寿县洪峰乡金鸡村的邮政编码查询,四川省眉山市仁寿县洪峰乡金鸡村的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县文宫镇文高路邮编是多少

    邮编查询为您提供四川省眉山市仁寿县文宫镇文高路邮编,四川省眉山市仁寿县文宫镇文高路的邮编,四川省眉山市仁寿县文宫镇文高路的邮政编码,四川省眉山市仁寿县文宫镇文高路的邮政编码是多少,四川省眉山市仁寿县文宫镇文高路的邮政编码查询,四川省眉山市仁寿县文宫镇文高路的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县彰加镇禹王村邮编是多少

    邮编查询为您提供四川省眉山市仁寿县彰加镇禹王村邮编,四川省眉山市仁寿县彰加镇禹王村的邮编,四川省眉山市仁寿县彰加镇禹王村的邮政编码,四川省眉山市仁寿县彰加镇禹王村的邮政编码是多少,四川省眉山市仁寿县彰加镇禹王村的邮政编码查询,四川省眉山市仁寿县彰加镇禹王村的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县钟祥镇红旗路邮编是多少

    邮编查询为您提供四川省眉山市仁寿县钟祥镇红旗路邮编,四川省眉山市仁寿县钟祥镇红旗路的邮编,四川省眉山市仁寿县钟祥镇红旗路的邮政编码,四川省眉山市仁寿县钟祥镇红旗路的邮政编码是多少,四川省眉山市仁寿县钟祥镇红旗路的邮政编码查询,四川省眉山市仁寿县钟祥镇红旗路的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县江心街邮编是多少

    邮编查询为您提供四川省眉山市仁寿县江心街邮编,四川省眉山市仁寿县江心街的邮编,四川省眉山市仁寿县江心街的邮政编码,四川省眉山市仁寿县江心街的邮政编码是多少,四川省眉山市仁寿县江心街的邮政编码查询,四川省眉山市仁寿县江心街的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县视高镇油顶村邮编是多少

    邮编查询为您提供四川省眉山市仁寿县视高镇油顶村邮编,四川省眉山市仁寿县视高镇油顶村的邮编,四川省眉山市仁寿县视高镇油顶村的邮政编码,四川省眉山市仁寿县视高镇油顶村的邮政编码是多少,四川省眉山市仁寿县视高镇油顶村的邮政编码查询,四川省眉山市仁寿县视高镇油顶村的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县先锋街邮编是多少

    邮编查询为您提供四川省眉山市仁寿县先锋街邮编,四川省眉山市仁寿县先锋街的邮编,四川省眉山市仁寿县先锋街的邮政编码,四川省眉山市仁寿县先锋街的邮政编码是多少,四川省眉山市仁寿县先锋街的邮政编码查询,四川省眉山市仁寿县先锋街的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县钟祥镇青山村邮编是多少

    邮编查询为您提供四川省眉山市仁寿县钟祥镇青山村邮编,四川省眉山市仁寿县钟祥镇青山村的邮编,四川省眉山市仁寿县钟祥镇青山村的邮政编码,四川省眉山市仁寿县钟祥镇青山村的邮政编码是多少,四川省眉山市仁寿县钟祥镇青山村的邮政编码查询,四川省眉山市仁寿县钟祥镇青山村的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县禾加镇干井村邮编是多少

    邮编查询为您提供四川省眉山市仁寿县禾加镇干井村邮编,四川省眉山市仁寿县禾加镇干井村的邮编,四川省眉山市仁寿县禾加镇干井村的邮政编码,四川省眉山市仁寿县禾加镇干井村的邮政编码是多少,四川省眉山市仁寿县禾加镇干井村的邮政编码查询,四川省眉山市仁寿县禾加镇干井村的邮政编码快速查询。
    08-09
  • 四川省眉山市仁寿县大化镇红塔村邮编是多少

    邮编查询为您提供四川省眉山市仁寿县大化镇红塔村邮编,四川省眉山市仁寿县大化镇红塔村的邮编,四川省眉山市仁寿县大化镇红塔村的邮政编码,四川省眉山市仁寿县大化镇红塔村的邮政编码是多少,四川省眉山市仁寿县大化镇红塔村的邮政编码查询,四川省眉山市仁寿县大化镇红塔村的邮政编码快速查询。
    08-09