DAY2_前端入门准备篇（二）
今日任务：
（一）、绘制Bootstrap官网线框图
（二）、绘制VCG官网的高保真原型图
（三）、总结
今日学习的成果图供大家可以借鉴参考~
注释：在Day1_前端入门准备篇（一）中我们已经安装好Axure。（安装渠道：1、可以在官网下载，需要注册网上一搜一大把。2、微信搜索公众号“软件安装管家”，回复“Axure”选择对应的版本就可以下载了，无需注册，直接就是破译版的，强推！！）
（一）、绘制Bootstrap官网线框图
一、为什么要绘制线框图？
进行网站或者小程序或者App开发之前，你首先要对自己即将开发的产品有一个大致的框架。就如同说起穿衣着装，你的脑海里会有一个概念，上半身穿某件衣服，下半身配某条裤子，脚上穿某双鞋子。然后将衣服裤子鞋子穿上看是否合适，能否搭配。那么线框图就是这样一个很基本的概念，帮助开发人员完成界面的布局设置。
一个完整的产品进行开发之前，最早产生的模型是线框图，接着是原型图，然后是高保真原型图，最后才是产品开发。
故而在准备工作时我们先得有线框图、原型图然后再进行开发。
二、如何绘制线框图？
将通过对Bootstrap官网进行线框图还原
1、打开Axure软件，对界面进行熟悉。（如果以后想往“产品经理”发展的小伙伴可以花点时间去网上看看教学视频，一个小时就能上手）
2、打开Bootstrap官网，查看网页结构，可以看出整体可以分为四个板块。
- 导航菜单栏
- 两个主体框架
- 底部菜单栏
这是自己绘制完整了的Bootstrap官网线框图，仅供参考链接
3、各版块的具体绘制。xiankuangtu
- 导航菜单栏
底部最大的框架是一个动态面板，中间文字部分是一个水平 - 第一个主体
- 第二个主体
- 底部菜单栏
（二）、绘制VCG官网的高保真原型图
一、准备素材
- 图片（网页上面的图片）
- 文字
二、绘制原型图并且添加交互
成品如下链接
1、第一部分如下图所示：
难点：轮播效果图链接这是一个关于Axure如何设置轮播效果图的经验，大家可以学习。
轮播图主要是接住动态面板，可以设置不同的状态，再根据设置界面载入时，切换不同的状态，如何可以加一些延时效果，整体的轮播就完成啦！
2、第二部分展示图如下：
难点：“立即注册”鼠标移入时颜色会发生变化。那么我们可以在立即注册这个按钮上面添加一个热区，通过控制热区来对按钮进行控制。
3、第三部分如下图所示：
难点：当鼠标经过文字或图片时，对应的文字和背景颜色会发生改变。这个效果是可以通过热区实现的。
4、第四部分如下图所示：
难点：在于鼠标经过“查看更多”时，箭头会像右移动，当鼠标离开“查看更多”时，箭头会回到原位。实现方法是通过对箭头设置交互属性，有一个属性叫做“移动”，设置对应的移动像素即可实现。
5、第五部分如下图所示：
难点：下面的小图片是一个无限轮播的图片，和上面第一部分的轮播是类似的，注意这里的切换速度慢一点，呈现的效果更佳。
6、第六部分如下图所示：
难点：在于文本框获取焦点时，外面的边框会变粗，有一个获取焦点的效果。解决方法：防止两个大小相同的矩形，边框粗细程度不同，获取焦点时显示边框粗的隐藏边框细的即可。
7、第七部分如下图所示：
难点在于鼠标移到图片上方时，图片会变大，离开时，图片又缩小。解决方案：动态面板。将图片放置于动态面板中，设置交互，鼠标移入时，设置原件大小（增大），移出时（还原）即可。
（三）、总结
今天的内容比较多，对于高保真的讲解比较粗略，只罗列了关键的难点步骤，如果大家关于Axure在绘制高保真原型图时有什么其它问题可以自行百度或者看教学视频，也可以私信博主哦~我看见了一定都会回复大家的！！
来源：oschina
链接：https://my.oschina.net/u/4414726/blog/4671769