Axure RP 9萌新修炼手册-第二章-创建项目(1)

第二章 创建项目

第一节 原型结构

任何事物都有组成结构,原型也不例外。

我们在绘制原型之前,应该先完成原型结构的搭建。

就好像写论文一样,先有大纲再细化内容。

对于新手来说,如何梳理一个原型的结构可能是面临的第一个难题。

在这里,我分享一下我梳理原型结构的方法,希望能够让大家能够快速解决这个问题。

实际上这个方法很简单,就像一个用户使用我们的产品一样,按照操作流程和层级去梳理。

梳理原型结构,我们需要借助另外一款工具:思维导图工具。

市面上所能见到的思维导图工具都可以,不限制具体哪一款。

如果没有接触过的话,我推荐使用Xmind这款工具。

这款工具可以直接通过Xmind中文官网下载:https://www.xmind.cn/download/

它不需要破解和购买授权,免费功能足够我们完成原型结构的梳理。

这款软件的安装和Axure类似,除了勾选同意软件许可协议和选择路径之外,全部点击【Next】按钮即可。

当我们完成软件的安装,并打开软件之后,选择【新建空白图】。(图2-1)

然后,在中心主题上点击鼠标右键,菜单中依次选择【结构 > 逻辑图(向右)】。(图2-2)

确定了图表的类型,我们就可以将大脑中虚构的产品结构转换为真实的原型结构图了。

在中心主题上我们写入产品名称,开始产品结构的梳理。

第一步,梳理产品包含的所有页面。

为了便于理解,此处以一个真实的网站为例。

提示:素材取自雷锋网的旗下网站“AI研习社(https://ai.yanxishe.com/)”,有可能因网站改版导致与当前内容产生差异,敬请理解!

我们先来看页面的顶部导航(图2-3)和底部导航(图2-4)。


在网站的导航菜单中,通过点击菜单项进入的页面均为一级页面,也就是我们需要梳理的第一部分内容。

分支主题上我们直接键入所有一级页面名称。(图2-5)

因为顶部导航中的“公开课”、“慕课”以及底部导航中的“关于我们”、“联系我们”都是外站链接,“APP下载”是下载链接,所以,这些都不是一级页面。

【操作】在中心主题上按<Enter/Tab/Insert>键,即可创建分支主题;在分支主题上按<Enter>键能够在下方添加同级分支主题,同时按下<Shift+Enter>则能够在上方添加同级分支主题。

当我们完成一级页面的梳理之后,再进行二级、三级页面的梳理。(图2-6)

【操作】在分支主题上按<Tab/Insert>键能够在后方添加新的子主题,在子主题上添加同级主题使用<Enter/Shift+Enter>键。

当所有层级的页面全部梳理完毕,我们就能够看到一个产品完整的框架结构,所形成的图表可以应用到产品相关的文档中。

第二步,梳理每个页面上分布的功能模块。

以“AI研习社”的“小组”页面为例。(图2-7)

页面内容中顶部导航、底部导航、侧边导航以及面包屑导航为整个网站的公共模块。

剩下的是页面独有的功能模块,包括:

  • 热门小组
  • 小组分类列表
  • 我加入的小组
  • 申请创建小组
  • 最新小组泡泡

我们把这些功能模块加入到我们的图表中。

为了避免混乱,页面的结构可以单独创建画布来完成。

在产品框架图的页面名称上点击鼠标右键,上下文菜单中选择【从主题创建新画布】。

这样的方式所创建的画布会与结构图中的页面名称带有超链接,点击页面名称后方的图标(C)能够直接跳转到页面所链接的画布。(图2-8)

【操作】从主题创建新画布,可以通过快捷键<Ctrl+Alt+T>来完成;如果想将某个页面名称与画布关联,可以通过在页面名称上点击鼠标右键,上下文菜单中选择“插入>超链接”,或者通过快捷键<Ctrl+H>打开设置窗口,在主题中选择相应的画布进行超链接的添加。
在“小组”画布中,我们先删除子级页面的分支主题,把功能模块的名称添加进来。(图2-9)

第三步,梳理模块的组成元素。

如果想依据结构图完成原型页面制作,仅仅细化到功能模块的层级是不够的,还需要在此基础上继续进行深入的梳理。

功能模块的下一层级是功能模块的组成元素。

例如,小组分类列表由标题和列表以及翻页功能组成。(图2-10)

而列表中又包含多个列表项,每个列表项包含小组的摘要信息以及详情链接。

所以,我们需要在功能模块的层级上继续细化深入,直到不能继续继续细化为止。(图2-11)

第四步,梳理模块的状态。

有些时候页面中的功能模块可能会包含不同的状态。
比如,导航栏中的用户模块包含未登录和已登录两种状态。(图2-12)

再比如,个人主页的编辑资料只会在“我的主页”中出现。(图2-13)

在不同的状态下,页面或者模块的元素是不同的。(图2-14与图2-15)

所以,在结构图中我们也要把不同的状态体现出来。

综上所述,我们在整理一个原型结构时,可以通过三个层级进行梳理,即:页面>模块>元素。

另外,在梳理过程中还要考虑到页面与模块不同状态对元素的影响。

本节思维导图源文件“AI研习社.xmind”,可关注公众号“chanpinban”后,回复“萌新手册”获取。


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

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

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


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第二章-创建项目(1)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 头像
    沙发
    2019-04-28 11:10 回复