DDR爱好者之家

制作淘宝WEB原型顶部导航条遇到的问题
技术教程 2024/11/23 jimmy
131 1536
DDR爱好者之家 Design By 杰米

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

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

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

淘宝顶部导航条：

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

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

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

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

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

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

（1）用户名（等级显示）可用标签来做；

（2）在这一块区域加上图片热区，用来实现鼠标移上去的交互动作：

具体实现如下：将面板做成动态面板，并且默认隐藏；

鼠标移动到图片热区，显示动态面板；

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

It‘s so easy！

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

（1）怎么实现鼠标移上去背景颜色的改变（明显鼠标移上去背景颜色变白色）；

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

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

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

针对问题

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

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

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

>> 查看更多相似文章
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米