Axure新手养成计划(连载01)

Axure书籍 小楼一夜听春语 73017℃ 0评论

《AxureRP7.0新手养成计划》

简介

小楼是一家IT外包公司的产品设计经理。因为工作需求,向老板提出的用人申请。结果,老板把一个大学实习生苏苏安排进了公司,让小楼通过培养新人来增加人力。无奈之下,小楼只好争取在最短的时间内教会新人使用原型工具AxureRP7.0,让她能够独立工作,分担部门工作压力。就这样,小楼开始了一个Axure新手养成计划。

为保证最好学习效果,请按正文顺序学习。

 

抱诚守真,鼎力之作; 倾尽所有,授业解惑; 细枝末节,面面俱到; 理论实操,完美结合。

第一章:Axure安装与汉化(略)

第二章:主要功能详解

小楼:苏苏,下面我们进入这个软件的主要功能的讲解。你一定要仔细了解每一个功能的用途,这对之后原型制作会有很大的帮助。

苏苏:哦,好的。刚才汉化没看清楚,楼哥,你能再讲一遍吗?

小楼:擦……

1.    快捷功能区

终于解决了汉化问题,打开了软件界面。首先看到的第一部分就是顶部的快捷功能区。

Axure这款软件的风格和Office系列软件的风格十分相像,软件的顶部把一些常用功能的快捷按钮全部集成在这里。(图14)

14

(图14)

这一部分需要先有一个大概的了解,不用着急全部记下来。因为,在后面的操作中会经常用到,会越来越熟练使用它们。

2.    站点地图

小楼:首先,我们来看站点地图。

苏苏:好!

小楼:你打开百度地图做什么……

站点地图,与我们常用的地图无关。Axure中的站点地图,会包含整个原型中所有的页面。在站点地图中我们可以方便的搭建原型结构与页面层级关系。

2.1.  站点地图功能

站点地图位于软件的左上位置,它的作用是管理整个原型中的所有页面,也能够进行页面的添加、删除、命名等操作。当我们双击一个页面名称的时候,这个页面会打开在主编辑区,新建页面里面是空的,页面的内容是我们自己来编辑的。当我们打开页面后,主编辑区上方也会出现相应的标签,供我们点击切换页面。(图15)

15

(图15)

每一个网站,甚至每一个功能模块都有自己的结构,就像大学里写毕业论文一样,首先要有一个提纲,这样可以帮助我们树立全局的观念,从整体出发,检验每一个部分所占的地位,相互之间是不是有逻辑关系。提纲能体现出作者的总体思路,优点在于易于掌握论文的结构全局,使论文层次清楚一目了然,只有论文层次一目了然,才能更好地写作论文。

我们在进行一个项目的原型开发之前,也要先有一个提纲,就是站点地图。我们在站点地图里去搭建整个项目的结构,梳理页面间的层级关系,在完成这个大的框架之后,再做具体的内容填充。这样,就能做出结构合理、思路清晰的原型。

2.2.  分析网站结构(思维导图)

如果直接在站点地图中去搭建原型结构,并不是很方便。而且,页面间的逻辑关系以及页面中所包含的功能模块、元素也没有办法体现出来。

在这里我们需要另外一种软件参与进来,在我们搭建原型结构之前,先以图表的形式把我们大脑里面所想到的内容直观的体现出来。

思维导图软件就是我们当前所需要的。

Xmind是一款商业思维导图软件,但是它的基本功能是免费使用的。这里我们就使用Xmind6中文版,来帮助我们整理网站的结构图。

备注:关于这款软件的安装只需要默认安装就可以了,在这里不加赘述。

打开Xmind后,在模板中双击“中心主题”打开主编辑区(图16)。

16

(图16)

打开后的主编辑区现在只有一个【中心主题】,双击可以更改它的名称,一般就改成项目名称或者网站名称。

在Xmind中有以下快捷键便于我们操作:

1、 在中心主题上按【回车键】可以添加子主题;

2、 在任意子主题上按【回车键】可以在下方添加同级主题,按【shift+回车键】可以在上方添加同级主题;

3、 在任意主题上按【Insert键】可以添加子主题,按【Delet键】删除当前主题及其子主题。

4、 在任意主题上按【Ctrl+L键】可以添加该主题与其他主题的关联。

拖动主题,可以调整主题的位置和层级关系,另外,我们可以在任何一个主题上点右键,设置当前菜单以下的图表结构,一般我们会使用逻辑图。(图17)

17

(图17)

苏苏:那怎么才能做出一个网站结构图呢?

小楼:在没有需求的情况下,我们不太容易构思一个网站,咱们就以“知乎网“为例,来研究一下这个网站的结构,来形成一个网站结构图。

首先,我们看到的是知乎的首页,里面包含了上方的登录注册的模块、下方的动态信息、底部的版权信息、专题链接还有移动客户端下载链接(图18)。

18

(图18)

我们就可以把首页的内容归纳出来,形成一个图表。(图19)

19

(图19)

然后,在首页点击一条用户话题,进入话题的内容页面。这个页面也有它的结构组成。头部是带搜索功能的导航栏,左侧是主要内容区,右侧是侧边栏,底部是版权信息和专题链接。(图20)

20

(图20)

备注:对于新手,关于Web页面布局也需要了解一下,网上有很多资料,比如常见的16种Web页面布局图(图21)。

21

(图21)

页面的头部和底部并不是话题页面专有的,所我习惯把它们单独放到公共模块。而页面中间部分的内容区和侧边栏是话题内容页独有的,我们把它的内容总结出来。(图22)

22

(图22)

这样就把网站结构和页面内容全部都归纳了出来。除了这些之外,还有其它的页面我们也能够通过这种方式,全部整理出来,形成一个完整的网站结构图。

不过,有时候,一个页面还会有它的下级页面或者叫子页面,比如话题的首页,右侧有一个话题广场的按钮,这个按钮点击后会跳转到话题广场页(图23)。

23

(图23

相对于话题首页来说,话题广场页就是它的子页面,所以,在网站结构图中话题广场页是包含在话题首页的下级主题中(图24)。

我们点击每个页面后面的收起按钮,把页面内容部分先隐藏掉,剩下的就是网站的页面结构了(图24)。

24

(图24)

2.3.  创建网站结构

苏苏:楼哥,这步做完是不是就能够在Axure的站点地图里面创建页面了?

小楼:是的,如果是通过需求分析来做一个项目,就是要把自己通过对需求的理解,借助思维导图软件,一点一点把大脑里面的想到的内容整理成像这样的网站结构图,搭建好页面的层级以及功能上的逻辑关系,然后把它作为参考去完成原型的开发。当然,这个图也不是尽善尽美了,它的作用是帮助我们最大程度上避免原型开发过程中出现的错误,如果在之后发现这个图还有不够完善的地方还可以进行后续的修改。

备注:以上为作者总结的经验方法,不是行业的规范或标准做法,仅供参考,欢迎指正!

下面,我们根据刚才做好的网站结构图把站点地图搭建出来。其中一些权重和关联性较低的页面可以统一放到一个文件夹中进行管理。(图25)

25

(图25)

备注:在站点地图中可以通过右键添加同级菜单、子菜单以及用来存放一组页面的文件夹;还有通过拖拽页面来调整页面的层级关系等等。

{本节任务:找一个简单的网站去进行分析,进行练习结构图的整理。}


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure新手养成计划(连载01)

喜欢 (472)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(14)个小伙伴在吐槽
  1. 楼老师幸苦啦 学习了..
    wowo2015-08-21 10:11 回复
  2. 不错
    bruce2015-09-15 11:51 回复
  3. 爱小楼
    妮妮2015-09-17 22:13 回复
  4. [谨遵楼嘱,好好练习][Xmind] 先画了石墨, 在线文档,这个界面简洁,好下手. 然后画了云起.初页, 云来,易企秀. 顺便对了一下这三个HTML5页面场景的使用. 个人感受: 1 云起.初页基本可以放弃了, 页面拖沓, 场景少, 不友好,不过如果要做轻量级APP还是可以用下的. 2 云来和易企秀, 还可以, 但是都需要发布, app不好用. 且目前云来还没有android app [请教楼老] 1 规划站点图时,实际使用如何把握详细度, 以大功能块区分, 还是要详细到每个页面功能 2 HTML5 上述三个,和MAKA, 或者还有其他的. 有没有特别好用的推荐.
    雪海2015-09-23 14:14 回复
    • 规划站点图时主要是规划页面间的层级关系,根据大的功能模块对页面进行归纳划分,细化到页面即可,至于每个页面的功能可以在页面原型图上展示,就无需在站点图细化出来。
      任性的杂草2016-05-05 11:12 回复
  5. 太好啦
    良生少木2015-09-30 14:00 回复
  6. 非常好 对我们新人太有帮助了 小楼老师辛苦了 🙄
    猫客2015-10-22 23:19 回复
  7. 好有用! 谢谢楼哥~ 幽默风趣~
    idingyi2015-11-16 17:31 回复
  8. 帮助好大 刚接触产品真是蒙的状态
    妍妍2016-02-16 20:46 回复
  9. 我竟无言以对。
    95272016-02-23 10:00 回复
  10. 小楼老师辛苦,值得好好学一下!!!
    天青色等烟雨2016-03-28 11:28 回复
  11. 我是个学生,感觉老师讲的很好,浅显易懂。 🙄 🙄
    vogue2016-03-29 19:04 回复
  12. 万分感谢
    何阿淼2016-04-20 23:51 回复
  13. 哈哈哈
    liyebai2016-10-14 15:47 回复