咨询热线

+86-0000-96877

网站公告 诚信为本:市场永远在变,诚信永远不变。
资讯中心

INFORMATION

联系我们

+86-0000-96877

地址:这里是您的公司地址
电话:+86-0000-96877
传真:+86-0000-96877
邮箱:这里是您公司的邮箱地址

查看更多

888sl首页>>当前位置:888.sl集团-888sl首页 > 888sl首页 >

“百度一下你就知道”搜索首页原型设计Axure80教

时间:2019-05-07    点击量:

更多:

  百度作为最大的中文搜索引擎,在某种程度上,有点学习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),一旦点击按钮,设置回滚操作。

  通过以上的讲解,我已经实现了以上的功能,希望各路大神能给出指导意见,大家一起加油!

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

网站首页 888sl 888.sl集团 888sl首页 案例展示 在线留言 联系我们
地址:这里是您的公司地址  电话:+86-0000-96877  传真:+86-0000-96877
2002-2011 888.sl集团 版权所有  技术支持:织梦58  ICP备案编号:ICP备********号  统计代码放置