百度作为最大的中文搜索引擎，在某种程度上，有点学习google的简约至上的原则，但是给人的感觉还是不够彻底。今天，使用Axure 8.0花了一下午的时间基本重现了百度搜索主页的原型。作为一个深信产品可以改变世界的小白来说，去细致的研究一个网页时如何设计、如何实现交互的，会让自己明白很多设计中的小细节。实现的交互、功能点如下：
使用背景覆盖法和label部件重写糯米、新闻、hao123、地图、视频、贴吧、登录、设置，利用label的MouseOver这一功能实现鼠标移入加粗和变色的效果；
点击更多产品时，弹出二级菜单，鼠标能够进入二级菜单，当鼠标移出二级菜单时，二级菜单收回。这在任何网页，尤其是购物网站的导航中是很常见的。我们常使用的方法是将二级菜单做成动态面板，设置隐藏，然后显示效果设置为treat as flyout。
点击登录时，会出现登录界面。在这里我要讲一下Axture中的常用手法，点击出现某一界面，就是将这一界面隐藏（hidden），然后使用某一触发使其显示(show)，至于show的过程的动态效果则可以根据具体情景设置。
点击设置时，会出现二级菜单，在选择二级菜单选项时，字体颜色和背景颜色都会发生改变。这个是这一部分最难点的地方。首先使用如上所讲的treat as flyout实现二级菜单的显示。然后，使用矩形框进行对二级菜单选项进行重写，设置鼠标移入时（MouseOver），背景颜色发生改变，字体发生改变。
这里要重点讲的是，点击登录后跳转至用户个性化界面。此时，我们可以注意到登录的label标签已经转换为用户名了。这里，我们就用到了全局变量。首先，设置全局变量。点击项目（project）全局变量（global variables）。设置全局变量为username。当点击注册按钮时，将用户名文本框中的值传递给全局变量username，然后当用户个性化页面载入时，将登录label的文本值显示为username。这一过程就是变量传递的过程。
鼠标移入用户名时，会出现二级菜单，在选择二级菜单选项时，字体颜色和背景颜色都会发生改变，点击退出按钮时，退出百度账号；
工具栏：我的关注、推荐、导航、视频、购物，选中某一项时，为粉色，显示该项页面；但是鼠标移其余项时，则将其显示为灰色；
当鼠标向下滑动时，在浏览器的上方会出现顶部搜索框；在浏览器的右下角会出现回到顶部的按钮，一旦点击右下角处的回到顶部按钮时，网页就会自动回到最顶端，按钮随之消失；
固定意见反馈按钮到浏览器，点击意见反馈按钮时，出现意见反馈填写对话框；该对话框也是固定在页面的右下角；意见反馈对话框此处不再累赘，单击右上角关闭按钮即可将其关闭；
工具栏的设计：利用矩形框覆盖重写我的关注、推荐、导航、视频、购物，然后将其group。这是很关键的一部。group的作用就表明这五个部件已经构成了一个选项组，那么当某一部件选中时，其余部件都是不选中。基于这样原则的基础上个，设计MouseOver和Selected的交互效果。然后OnClick设计时，设计谁是被选中，谁是不被选中的。点击工具栏的不同导航时，还会出现不同的点击，显示不同的页面。呢么这又涉及到了动态面板的不同状态的显示的问题。此处不再累赘。这个建议Axtue初学者重点学习，因为这几乎在每一个网页中都会涉及到。
固定某一部件在浏览器的固定位置(Pin to browser)。这一功能是针对动态面板使用的。所以，要实现这样的效果，必须将部件转换成为动态面板。本案例中的回到顶部按钮、提意见按钮、意见反馈窗口、音乐电台、音乐电台播放器、顶部搜索框都是使用这样的原理和设计实现的。
鼠标向下移动时，出现顶部搜索框，按钮显示；点击回到顶部按钮时，回到顶部，按钮消失。这一交互效果是本部分的重点。在Axture中，Window.scrollY函数指的是鼠标向下移动的距离。我们可以设置逻辑条件，当鼠标向下移动一定的距离时，那么显示顶部搜索框和回到顶部按钮。如果鼠标向下移动的距离太小，则将这些部件隐藏。至于，回到顶部按钮的交互操作，我们需要借助顶部的一个辅助部件(hotspot)，一旦点击按钮，设置回滚操作。
人人都是产品经理（是以产品经理、运营为核心的学习、交流、分享平台，集媒体、培训、社群为一体，全方位服务产品人和运营人，成立9年举办在线+期，线+场，产品经理大会、运营大会20+场，覆盖北上广深杭成都等15个城市，在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监，他们在这里与你一起成长。
