Axure RP 8 入门手册 – 第2章

AxureRP8书籍 小楼一夜听春语 3941℃ 0评论

第2章         创建项目结构

第1节         使用Xmind进行项目结构梳理

第2节         根据思维导图搭建原型页面结构

第2章         创建项目结构

 

第1节           使用Xmind进行项目结构梳理

u0木子春:楼老师,怎么做一个完整的原型项目啊?我觉得做一个页面很简单,但是做一个完整的项目,却一点思路都没有呀!

 

u2小楼:嗯,我们做原型都不是上来就直接做页面。需要先有整个项目结构的搭建。

 

从产品角度来说,产品原型就是另一种形式的产品需求文档。一般来说,做一个产品需求文档,都要先项目结构。做原型也一样,有了项目结构我们才能搭建原型的页面结构,而有了页面之后,才能去组织页面内容添加功能逻辑。

不过,在搭建项目结构之前我们要先为项目考虑一个合适的布局结构。

以Web端为例,可以将页面简单的划分为上、中、下、左、右5个部分。

上:是指页面头部部分,一般包含站点名称、Logo和导航菜单等。

中:是指页面水平或垂直方向中部的部分,一般是页面主体内容部分。

下:是指页面底部部分,一般包含版权信息、公司信息、导航信息以及友情链接等。

左:是指页面左侧边栏,一般是导航菜单或内容列表。

右:是指页面右侧边栏,一般是推荐内容、分类目录、标签列表、广告模块以及其它一些杂项。

一个Web站点并非一定包含以上所有5个部分,可以根据需求进行组合搭配,呈现多种不同的布局类型。比如,新浪微博用户首页的布局包含了所有5个部分(图2-1),而新浪微博内容详情页,只包含了4个部分(图2-2)。

%e5%9b%be2-1

(图2-1)

%e5%9b%be2-2

(图2-2)

下面就是我的网站(www.iaxure.com)采用的布局,也是包含了4个部分。(图2-3)

%e5%9b%be2-3

(图2-3)

有了布局结构,我们就能够进一步搭建项目的结构。在项目结构中,主要页面的组成都围绕这种布局创建。还是以我的网站(www.iaxure.com)为例,我们看看项目结构是什么样的。(图2-4)

%e5%9b%be2-4

(图2-4)

u0木子春:楼老师,这个图是用什么画的呀?也是Axure吗?

 

u2小楼:这个图呀!是用思维导图软件画的,软件名称叫Xmind。

 

u0木子春:那你能教教我怎么用吗?

 

u2小楼:好吧!你先把这款软件下载下来,安装就默认安装好了。

 

Xmind是一款商业思维导图软件,但是它的基本功能是免费使用的。这里我使用的是Xmind 7中文版。

打开Xmind 7后,在【空白图】列表中向下拉动右侧滚动条,找到并选择【逻辑图(向右)】。(图2-5)

%e5%9b%be2-5

(图2-5)

         在弹出的选择风格界面中选择自己喜欢的风格,点击【新建】按钮,打开工作界面。(图2-6)

%e5%9b%be2-6

(图2-6)

打开后的工作界面现在只有一个【中心主题】,双击可以更改它的名称,一般就改成项目名称或者网站名称。(图2-7)

%e5%9b%be2-7

(图2-7)

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

1、在中心主题上按<Enter>键可以添加子主题;

2、在任意子主题上按< Enter >键可以在下方添加同级主题,按<shift+ Enter >键可以在上方添加同级主题;

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

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

5、使用鼠标拖动主题,可以调整主题的位置和层级关系。

说明:本书所有操作基于Window系统,在本书中出现的所有的快捷键中,如果有使用<Ctrl>键,Mac系统下一般对应为<Command>键,此后不再特别说明。

第2节           根据思维导图搭建原型页面结构

木子春:楼老师,有了项目结构图,就可以制作原型了吧?

小楼:是的,如果项目结构没有什么问题了,就可以根据项目结构中的页面组成搭建原型的页面结构了。你看,根据我网站的项目结构,搭建的页面结构是这样的。(图2-8)

%e5%9b%be2-8

(图2-8)

         在页面管理面板中,可以点击面板右上方的图标添加文件夹与页面。文件夹用于页面分类,将相同类别的页面文件同一个文件夹中。

在页面管理面板中,文件夹与页面可以调整层级和顺序关系,一般通过拖动来操作,也可以通过在文件夹或者页面上点击<鼠标右键>,在菜单中进行调整。

根据项目结构,文章页是通过在首页中点击文章列表中的标题打开的,它是首页的子页面。所以,在图2-8中,我将文章页放置在首页下一级的位置。

特别说明:原型页面使用中文命名,在浏览器中查看时可能出现页面无法打开的问题,本节中页面使用中文命名,是为了表达原型页面结构与项目结构的关系。建议读者在实际应用中,使用英文小写字母命名,命名中可以包含数字和下划线“_”。

木子春:楼老师,我明白啦!谢谢你!我去好好研究研究。

小楼:哎….哎……,还没爆照呢!


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

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

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

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


转载请注明:Axure原创教程网 » Axure RP 8 入门手册 – 第2章

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. -0-正好需要了解架构相关,感谢。
    啾咪2016-12-02 16:58 回复