2.1 使用Xmind进行项目结构梳理
楼老师，怎么做一个完整的原型项目啊？我觉得做一个页面很简单，但是做一个完整的项目，却一点思路都没有呀！
嗯，我们做原型都不是上来就直接做页面，需要先有整个项目结构的搭建。
从产品角度来说，产品原型就是另一种形式的产品需求文档。一般来说，做一个产品需求文档，都要先搭建项目结构。做原型也一样，有了项目结构才能搭建原型的页面结构，而有了页面之后，才能去组织页面内容，添加功能逻辑。
图2-1
在搭建项目结构之前需要为项目考虑一个合适的布局结构。
以Web端为例，可以将页面划分为上、中、下、左、右5部分。
上：是指页面头部部分，一般包含站点名称、Logo和导航菜单等。
中：是指页面水平或垂直方向中部的部分，一般是页面主体内容部分。
下：是指页面底部部分，一般包含版权信息、公司信息、导航信息及友情链接等。
左：是指页面左侧边栏，一般是导航菜单或内容列表。
右：是指页面右侧边栏，一般是推荐内容、分类目录、标签列表、广告模块及其他一些杂项。
一个Web站点并非一定包含以上5部分，可以根据需求进行组合搭配，呈现多种不同的布局类型。例如，新浪微博用户首页的布局包含了所有5部分（图2-1），而新浪微博内容详情页，只包含了4部分（图2-2）。
图2-3所示是作者的网站（www.iaxure.com）采用的布局，也是包含4部分。
图2-2
图2-3
有了布局结构，就能进一步搭建项目的结构。在项目结构中，主要页面的组成都围绕这种布局创建。还是以作者的网站（www.iaxure.com）为例，看看项目结构是什么样的（图2-4）。
楼老师，这个图是用什么画的呀？也是Axure吗？
这个图是用思维导图软件画的，软件名称为Xmind。
那你能教教我怎么用吗？
好吧！你先把这款软件下载下来，默认安装即可。
Xmind是一款商业思维导图软件，但是它的基本功能是免费使用的。这里使用的是Xmind 7中文版。
图2-4
打开Xmind 7后，在【空白图】列表中向下拉动右侧滚动条，选择【逻辑图（向右）】选项（图2-5）。
图2-5
在弹出的选择风格窗口中选择自己喜欢的风格，单击【新建】按钮，打开工作界面（图2-6）。
图2-6
打开后的工作界面只有一个【中心主题】，双击可以更改它的名称，一般改成项目名称或者网站名称（图2-7）。
在Xmind中有以下组合键。
（1）在中心主题上按<Enter>键可以添加子主题。
（2）在任意子主题上按< Enter >键可以在下方添加同级主题，按<Shift>+<Enter>组合键可以在上方添加同级主题。
（3）在任意主题上按<Insert>键可以添加子主题，按<Delete>键删除当前主题及其子主题。
（4）在任意主题上按<Ctrl>+<L>组合键可以添加该主题与其他主题的关联。
（5）使用鼠标拖动主题，可以调整主题的位置和层级关系。
图2-7
说明
本书所有操作均基于Window系统，出现的所有组合键，如果有使用<Ctrl>键，Mac系统下一般对应为<Command>键，此后不再特别说明。