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

PM_XJay
7 评论 13297 浏览 3 收藏 4 分钟

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

淘宝顶部导航条:

20150511220047363

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

20150512171945296

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

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

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

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

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

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

It‘s so easy!

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

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

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

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

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

针对问题

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

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

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

 

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

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 不会做动态就做静态+淘宝链接+文字

    时间成本很宝贵的

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

    来自北京 回复
  3. 不会用条件么

    来自江苏 回复
    1. 求高人指点

      来自北京 回复
  4. 这文章也能上,怎么审核的

    来自广东 回复
    1. 网站编辑就是想给我一个找到答案的机会,请不要怪编辑,怪我没有掌握

      来自北京 回复
专题
16455人已学习12篇文章
有效的团队管理对于一个企业来说十分重要。本专题的文章分享了团队管理的方法。
专题
14469人已学习12篇文章
本专题的文章分享了SaaS产品的商业模式和产品定价。
专题
14537人已学习12篇文章
“产品架构能力”是B2B产品经理中泛指设计产品系统架构的能力,这是产品经理非常重要的一个能力。本专题的文章分享了产品架构的设计指南。
专题
13939人已学习11篇文章
生活中,难免会接到企业的一些外呼电话,无论是人工外呼还是AI外呼,其背后的外呼业务场景是什么?外呼系统包含哪些内容?本专题的文章分享了外呼系统的设计指南。
专题
16000人已学习14篇文章
痛点是什么?为什么用户会有痛点?如何抓住用户痛点?优先解决哪些用户痛点?本专题的文章分享了以上的问题详解。