制作淘宝WEB原型顶部导航条遇到的问题

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

【摘要】在做淘宝WEB顶部的导航栏的过程中遇到一个问题,虽然后来解决了,但是总觉得会有更好的办法,下面小JAY分享一下制作原型过程中的经历。

1430364429808

淘宝顶部导航条:

20150511220047363

在原网页上面,当鼠标移到用户名那一块区域时候,会弹出一个面板,具体如下所示:

20150512171945296

先来说说我开始的设计思路:

(1)用户名(等级显示)可用标签来做;

(2)在这一块区域加上图片热区,用来实现鼠标移上去的交互动作:

具体实现如下:将面板做成动态面板,并且默认隐藏;

鼠标移动到图片热区,显示动态面板;

鼠标移出图片热区,再次隐藏动态面板

It‘s so easy!

可是原本以为简单几下设置就可以完成的原型,却被下面几个问题卡住了:

(1)怎么实现鼠标移上去背景颜色的改变(明显鼠标移上去背景颜色变白色);

(2)怎么实现鼠标从用户名区域到面板区域,面板仍然显示,也许你会说很简单,在面板上设置一个鼠标移上时显示动态面板的交互动作。但是,你移不上去!!!!!

因为你必然要设置鼠标移出用户名区域隐藏面板,那么在向下移动的瞬间,鼠标正好移出面板区域,面板已经消失,在面板上设计的任何交互动作都是失效,

看着这些问题,瞬间感觉原来交互设计真没那么简单,就是这两个问题困扰了我一上午,不过功夫不费有心人,最终还是想出了办法:

针对问题

(1)我在用户名区域不仅用标签,而且还使用了一个透明无框的矩形框,并设置其在图片热区的下一层,然后设置选中的交互样式,即可解决

(2)既然不能移动到面板上面,那么我可以增加一个中间过渡的元件,帮助鼠标移动到面板上

问题全部解决了,自己的收获也是蛮大的,交互设计不是想想的那么简单,其中考验你的逻辑思维的能力不容小觑,还有在做原型之前要多花时间仔细审查我们想要实现的效果,不要粗心大意,否则的话不仅效率低下,而且可能要重头再来,得不偿失!!

 

本文为作者@PM_XJay 投稿发布,转载请注明来源于人人都是产品经理并附带本文链接

您的赞赏,是对我创作的最大鼓励。

评论( 7

登录后参与评论
  1. 不会做动态就做静态+淘宝链接+文字

    时间成本很宝贵的

    回复
  2. 把触发区(用户名)与弹出层做成一个动态面板,鼠标移上整个动态面板时,切换动态面板。

    回复
  3. 不会用条件么

    回复
    1. 回复

      求高人指点

    2. 回复

      有个鼠标的条件。

  4. 这文章也能上,怎么审核的

    回复
    1. 回复

      网站编辑就是想给我一个找到答案的机会,请不要怪编辑,怪我没有掌握

加载中