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

第一章:Axure安装与汉化(略)
第二章:主要功能详解
小楼:苏苏,下面我们进入这个软件的主要功能的讲解。你一定要仔细了解每一个功能的用途,这对之后原型制作会有很大的帮助。
苏苏:哦,好的。刚才汉化没看清楚,楼哥,你能再讲一遍吗?
小楼:擦……
1.    快捷功能区终于解决了汉化问题,打开了软件界面。首先看到的第一部分就是顶部的快捷功能区。
Axure这款软件的风格和Office系列软件的风格十分相像,软件的顶部把一些常用功能的快捷按钮全部集成在这里。(图14)

(图14)
这一部分需要先有一个大概的了解,不用着急全部记下来。因为,在后面的操作中会经常用到,会越来越熟练使用它们。
2.    站点地图小楼:首先,我们来看站点地图。
苏苏:好!
小楼:你打开百度地图做什么……
站点地图,与我们常用的地图无关。Axure中的站点地图,会包含整个原型中所有的页面。在站点地图中我们可以方便的搭建原型结构与页面层级关系。
2.1.  站点地图功能站点地图位于软件的左上位置,它的作用是管理整个原型中的所有页面,也能够进行页面的添加、删除、命名等操作。当我们双击一个页面名称的时候,这个页面会打开在主编辑区,新建页面里面是空的,页面的内容是我们自己来编辑的。当我们打开页面后,主编辑区上方也会出现相应的标签,供我们点击切换页面。(图15)

(图15)
每一个网站,甚至每一个功能模块都有自己的结构,就像大学里写毕业论文一样,首先要有一个提纲,这样可以帮助我们树立全局的观念,从整体出发,检验每一个部分所占的地位,相互之间是不是有逻辑关系。提纲能体现出作者的总体思路,优点在于易于掌握论文的结构全局,使论文层次清楚一目了然,只有论文层次一目了然,才能更好地写作论文。
我们在进行一个项目的原型开发之前,也要先有一个提纲,就是站点地图。我们在站点地图里去搭建整个项目的结构,梳理页面间的层级关系,在完成这个大的框架之后,再做具体的内容填充。这样,就能做出结构合理、思路清晰的原型。
2.2.  分析网站结构(思维导图)如果直接在站点地图中去搭建原型结构,并不是很方便。而且,页面间的逻辑关系以及页面中所包含的功能模块、元素也没有办法体现出来。
在这里我们需要另外一种软件参与进来,在我们搭建原型结构之前,先以图表的形式把我们大脑里面所想到的内容直观的体现出来。
思维导图软件就是我们当前所需要的。
Xmind是一款商业思维导图软件,但是它的基本功能是免费使用的。这里我们就使用Xmind6中文版,来帮助我们整理网站的结构图。
备注:关于这款软件的安装只需要默认安装就可以了,在这里不加赘述。
打开Xmind后,在模板中双击“中心主题”打开主编辑区(图16)。

(图16)
打开后的主编辑区现在只有一个【中心主题】,双击可以更改它的名称,一般就改成项目名称或者网站名称。
在Xmind中有以下快捷键便于我们操作:
1、 在中心主题上按【回车键】可以添加子主题;
2、 在任意子主题上按【回车键】可以在下方添加同级主题,按【shift+回车键】可以在上方添加同级主题;
3、 在任意主题上按【Insert键】可以添加子主题,按【Delet键】删除当前主题及其子主题。
4、 在任意主题上按【Ctrl+L键】可以添加该主题与其他主题的关联。
拖动主题,可以调整主题的位置和层级关系,另外,我们可以在任何一个主题上点右键,设置当前菜单以下的图表结构,一般我们会使用逻辑图。(图17)

(图17)
苏苏:那怎么才能做出一个网站结构图呢?
小楼:在没有需求的情况下,我们不太容易构思一个网站,咱们就以“知乎网“为例,来研究一下这个网站的结构,来形成一个网站结构图。
首先,我们看到的是知乎的首页,里面包含了上方的登录注册的模块、下方的动态信息、底部的版权信息、专题链接还有移动客户端下载链接(图18)。

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

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

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

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

(图22)
这样就把网站结构和页面内容全部都归纳了出来。除了这些之外,还有其它的页面我们也能够通过这种方式,全部整理出来,形成一个完整的网站结构图。
不过,有时候,一个页面还会有它的下级页面或者叫子页面,比如话题的首页,右侧有一个话题广场的按钮,这个按钮点击后会跳转到话题广场页(图23)。

(图23
相对于话题首页来说,话题广场页就是它的子页面,所以,在网站结构图中话题广场页是包含在话题首页的下级主题中(图24)。
我们点击每个页面后面的收起按钮,把页面内容部分先隐藏掉,剩下的就是网站的页面结构了(图24)。

(图24)
2.3.  创建网站结构苏苏:楼哥,这步做完是不是就能够在Axure的站点地图里面创建页面了?
小楼:是的,如果是通过需求分析来做一个项目,就是要把自己通过对需求的理解,借助思维导图软件,一点一点把大脑里面的想到的内容整理成像这样的网站结构图,搭建好页面的层级以及功能上的逻辑关系,然后把它作为参考去完成原型的开发。当然,这个图也不是尽善尽美了,它的作用是帮助我们最大程度上避免原型开发过程中出现的错误,如果在之后发现这个图还有不够完善的地方还可以进行后续的修改。
备注:以上为作者总结的经验方法,不是行业的规范或标准做法,仅供参考,欢迎指正!
下面,我们根据刚才做好的网站结构图把站点地图搭建出来。其中一些权重和关联性较低的页面可以统一放到一个文件夹中进行管理。(图25)

(图25)
备注:在站点地图中可以通过右键添加同级菜单、子菜单以及用来存放一组页面的文件夹;还有通过拖拽页面来调整页面的层级关系等等。
{本节任务:找一个简单的网站去进行分析,进行练习结构图的整理。}
[br]

关键字:Axure, Axure教程, 页面, 站点


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部