1 背景

       现在各种购物节横行，想必各位的女友都是各种买买买。为构建和谐社会和家庭，作为程序猿和产品汪的我，决定要干点东西，防止女友买买买。

       具体来说，先制作天猫首页高保真原型，达到以假乱真的程度，然后是修改host文件，把天猫的域名绑定到发布的原型文件。这样，在浏览器中打开天猫页面时，就会跳转到天猫首页的高保真原型文件。“哇哈哈哈，在原型中当然是没做页面跳转和登录之类的功能啦，然后使用的人就会怀疑是不是网络问题或服务问题或者以为电脑中毒了，总之就是不能和不敢买买买。”我就是这样想的。

       然而…然而…在购物这件事情上，不能低估女人的洪荒之力……………

2 注：下面只重点分享天猫首页高保真原型

3 先睹为快，截图全局来看看

天猫原型-全局图

4 心得分享

       1 从粗到精迭代：先整体布局，分出各个模块栏目，作出页面结构分析。

       2 开始时，别纠结细节，别纠结细节，别纠结细节

       3 先完成，后完善，再完美

5 天猫首页-页面结构（截图非完整结构）

天猫首页-页面结构（部分）

6 天猫首页原型的技巧、难点或亮点

       1 布局和ui逼真，先睹为快

       2 实现回到顶部功能：使用window.Scrolly 实现根据滚动条显隐元件

       3 实现广告栏轮转-solider特效：广告栏背景随广告图改变背景色；广告栏背景自适应100%宽度。截图gif中，注意侧边的背景变化：

广告栏背景随广告图改变背景色

       4 实现各个栏目背景自适应100%宽度。<见上面的gif>

       5 实现侧边工具栏和浮动工具栏的固定和适应高度/宽度。<见原型>

       6 实现菜单导航栏鼠标经过显示二级条目，精力有限，只做了前2个菜单导航

菜单导航栏

7 说明

       1 高保真原型通常只用于项目演示，而在内部沟通和产品迭代中，低保交互原型足可满足沟通和消除歧义的目的。

       2 在这个天猫首页的高保真原型中，并没有把所有的交互都实现了，这次主要是axure的技巧练手和总结输出。

8 下载原型来看看

      1 原型使用axure8.0制作，要查看原型源文件，请使用8.0版打开。

      2 云盘中有源文件和发布出来的源文件。

       · 目录说明：

目录说明

       · 没有安装axure，可通过发布文件查看，打开的文件如下图：

查看发布文件的入口

      3 下载链接

       · 链接: http://pan.baidu.com/s/1nug4si9

       · 密码: cnd3

*难点如何实现就不详细说了吧。不说了，跪键盘去了。