发现王:发现生活点滴!

软件应用

当前位置:首页 > 文苑资讯 > 软件应用

图文讲述如何学Axure

        14年9月,在网易实习时,写下这个回答。

        到现在,已经工作快5年,大部分时间都在和Axure打交道,见过很多其它产品经理画的原型图,也读过一些相关的书。因此,有了一些新的思索,就想着要重新改写下,以免误人子弟。

        原答案,因为自己那时也是完全的不懂,叙述和思路都更贴近完全没有接触过Axure的新手们,这是优点,我不会丢掉。

原答案我也没有删除,上篇文章就能看到。

结构

  1. 基础学习

  2. PRD文档中的原型图

  3. 更快地输出原型图

  4. 一些可能的讨论

基础学习

        Axure RP,在19年4月26日已经发布了9.0正式版。

        自己9.0版本用得不多,也不推荐新手们做吃螃蟹的人。

        尤其考虑到经由9.0版本编辑保存后,就不能用更低版本软件打开,可能会在协作中出现问题。

        所以,这边提到的,默认是Axure 8.1版本。

        Axure RP 8.1正式版下载地址https://www.axure.com.cn/3510 安装和汉化说明

图标

        授权码可购买,或通过某些不推荐的渠道免费获取。

        安装并且汉化完成后,打开Axure。


        首先要说明的是:Axure是一款提供了足够多高阶功能,却又极其极其简单的软件。

        所以,不必担心说,Axure很难入门。

        就我自己的工作经历,可以这么武断地说——

        工作中,Axure用到的功能基本上只有:部件的选择,摆放和属性设置。

关于是否有必要用Axure来制作高保真原型,会在下面一些可能的讨论里提及。


部件的选择

        部件用到最多的是common(默认)、Forms(表单)、Flow(流程图)。



如何学习使用Axure ?

        可以随意拖到画布上看看。

        大部分的部件,都很好理解。不好理解的,类似Dynamic Panel(动态面板),Repeater(中继器)等,无视就好。

这里,再提下Placeholder(占位符):我个人很少用到占位符,感觉占位符的使用,更接近于,在输出原型图的过程中,因局部还不太确定,临时先占个位置。

        部件拖动到画布上,右上角还会出现灰色的圆,点击可以变为一些基本上用不到的图形。


如何学习使用Axure ?


部件的摆放

        部件的摆放,在技能上没什么要特别说明的,主要是一些常见布局的输入。

        不合理的部件摆放,不仅会影响转化,也会造成用户不好的体验。

        我有接触过开发中途转行做产品,原型图最大的问题就是:

        一旦不能完全照抄竞品,需要自己设计时,经常会搞出一些非常怪,或明显不合理的界面来。

        以下方法,也许会有帮助

    • 尝试用Axure临摹一些平时在使用的APP或网页

    • 页面分为几大块,各块又分别有哪些元素

    • 哪些你认为是优先级更高的,在什么位置

    • 了解一些ios,或Material Design的设计规范

        另,在这里稍微列下,在输出原型图过程中,常见的屏幕尺寸(个人习惯):

    • 移动端:720 × 1280 px

    • PC:1366 × 768 px

        可参考屏幕尺寸大小,自已去搜索吧。

        现在,拖一个720 × 1280px的矩形,作为手机屏,然后,去临摹一个自己喜欢的APP界面吧。也许你会在这一步放弃,因为临摹得不如意、丑,觉得没办法继续。只管继续下去!

        工作10年,很酷的产品,画的Axure也许也不好看。

        你不能期待自己一出手就完美,关键是完整地一次临摹,然后再一次,再一次。

        网上一些原型图,我觉得给了很不好的暗示——画的很精致——原型图从不以“美”作为主要追求目标。

如果需要一些建议,可以带上你临摹的原型图私信我,不过,不能保证一定回复。

        在临摹的过程中,自然而然,你会接触到部件的属性设置。

部件的属性设置

        不同的部件存在不同的属性,可以逐个设置,看画布里的部件发生了什么变化。

如何学习使用Axure ?


        这里也稍微提下图层的概念:

        有学习过Photoshop,或者做过稍复杂PPT的朋友,应该都比较好理解。

        位于上方的图层,会遮挡住下方图层。所以,代表手机屏幕的矩形,要放在最底部。


        OK,看到这里的朋友,你已经学会了Axure日常使用功能的绝大部分,是不是很简单?

        这里有一个小测试,尝试用Axure画一个红包,有很多方式,你可以试试:


如何学习使用Axure ?



小Tips

如何学习使用Axure ?


PRD文档中的原型图

        通过部件的选择、摆放和属性设置,最后在Axure画布上呈现的东西,就是原型图。

        原型图,是用来更好传达我们想法的。

        和用笔画的草图,你说的长篇累犊的话,本质上没有区别。区别只在于方式,以及方式所代表的好处。

        因此,使用原型图所追求的目标,也很明确——

    • 怎么更快

    • 怎么可以有尽量少的噪音(避免不明确,或歧义)


        这里,会涉及两大块的内容,分别对应主题:

    • PRD文档中的原型图:原型图应该遵循3个规范,能既快,又好地传达想法。

    • 更快地输出原型图:工作中,怎样的工作流可以提升原型图的输出速度,有没有其它小技巧可以提升效率?


        重申:下面所谈到的规范,只是基于个人的工作经验,并不是什么必须要遵循的原则,选择你觉得有益的方式来。

不过,目标一定是为了更快,更好。


      1.原型图不能自证其意的部分,需要附上说明。说明包括但不限于:

    • 文字

    • 参考图/参考链接,还能够帮助视觉同学确定风格

    • 流程图,对于较复杂的跳转或交互逻辑,尤有必要;涉及跳转的,一般会先给页面命名,然后在流程图里表述清楚。

    • 表格/树状图,对于可能存在的超多种情况。

如何学习使用Axure ?

        我惯常的方式,是会在原型图上,标注需详细说明的点,然后在原型图右侧,进行说明。

        2. 原型图避免涉及到颜色,只需要黑、白、灰、红。产品经理需要且有必要决定的只有部件的位置,和优先级。

    • 红:最高优先级,最突出强调

    • 灰和白:可用于强调,按钮相互间的优先级

如何学习使用Axure ?


    • 不同程度的灰:可用于展示按钮不可点击。

如何学习使用Axure ?


    • 黑色半透明:浮层,Toast

如何学习使用Axure ?

        3. 可以有icon,但没必要在原型图里加入图片。可以用文字描述图片的内容,或者在原型图旁边给出参考示例。

    • icon推荐一个网站:https://www.iconfont.cn/,可以直接搜索、下载、拖至画布,甚至可以选择icon的颜色。

    • 给出图片的参考,可以用花瓣,或Pinterest

更快地输出原型图

        在日常工作中,如何更快地输出原型图,是涉及到有没有福报的事情,大家都要重视。

        1、不要上来就打算输出原型图,可以考虑先用纸、笔画个大概的草图。

        a.有几个页面(调整的地方有几处)

        b.页面涉及什么功能

        c.页面大概的结构是?怎么布局?

        2、之前画过的原型图有留档,可复用的部分能直接粘贴过来

        3、自制部件库,或有网上比较好的部件库。

             自制部件库,可查看问题:如何制作自己的Axure库

        4、母板功能的使用。

一些可能的讨论

高保真原型是否有必要

        高保真原型的好处,在《启示录》或《精益创业实战》里,其实都有涉及。

        它不单是我在上面提到的,自证其意的最好方式,还是可能的:

        以最低成本来验证某产品是否可行的MVP版本

        不过,对于90%的互联网从业者,没有必要。原因在于:

    • 接触到的项目没那么大,能够直接开发一版作为MVP,而不必拿着高保真模型参与用户调研

    • 项目大多能在市场上找到参考,和视觉、开发之间有基本的共识

    • 坐得离视觉、开发够近

        不过,技多不会压身,想学的同学可以参考看这本书

        网站蓝图3.0

        声明:我没有看过这本。我5年前看的,是这本书的第1版,那本确实写得不错。


Sketch画原型是否更好

        我尝试过用Sketch画原型,也有了解到,一些知名互联网产品团队,都在用Sketch。

        不过,我不推荐。

        Sketch的好处显而易见

    • 好用的插件:包括标注、自动生成内容、icon、批量替换等等

    • 和设计、甚至开发之间,更顺畅的工作流

        但是,Sketch很有可能会模糊掉一个产品经理的主要职责——

        定义要开发的产品,而不是沉迷于某些细节。


作者:林涛涛
链接:https://www.zhihu.com/question/19892861/answer/31059703
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关内容

文章评论

表情

共 0 条评论,查看全部
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

评论排行榜