【摘要】在做淘寶WEB頂部的導航欄的過程中遇到一個問題，雖然后來解決了，但是總覺得會有更好的辦法，下面小JAY分享一下制作原型過程中的經(jīng)歷。

淘寶頂部導航條：

在原網(wǎng)頁上面，當鼠標移到用戶名那一塊區(qū)域時候，會彈出一個面板，具體如下所示：

先來說說我開始的設(shè)計思路：

（1）用戶名（等級顯示）可用標簽來做；

（2）在這一塊區(qū)域加上圖片熱區(qū)，用來實現(xiàn)鼠標移上去的交互動作：

具體實現(xiàn)如下：將面板做成動態(tài)面板，并且默認隱藏；

鼠標移動到圖片熱區(qū)，顯示動態(tài)面板；

鼠標移出圖片熱區(qū)，再次隱藏動態(tài)面板

It‘s so easy！

可是原本以為簡單幾下設(shè)置就可以完成的原型，卻被下面幾個問題卡住了：

（1）怎么實現(xiàn)鼠標移上去背景顏色的改變（明顯鼠標移上去背景顏色變白色）；

（2）怎么實現(xiàn)鼠標從用戶名區(qū)域到面板區(qū)域，面板仍然顯示，也許你會說很簡單，在面板上設(shè)置一個鼠標移上時顯示動態(tài)面板的交互動作。但是，你移不上去?。。。?！

因為你必然要設(shè)置鼠標移出用戶名區(qū)域隱藏面板，那么在向下移動的瞬間，鼠標正好移出面板區(qū)域，面板已經(jīng)消失，在面板上設(shè)計的任何交互動作都是失效，

看著這些問題，瞬間感覺原來交互設(shè)計真沒那么簡單，就是這兩個問題困擾了我一上午，不過功夫不費有心人，最終還是想出了辦法：

針對問題

（1）我在用戶名區(qū)域不僅用標簽，而且還使用了一個透明無框的矩形框，并設(shè)置其在圖片熱區(qū)的下一層，然后設(shè)置選中的交互樣式，即可解決

（2）既然不能移動到面板上面，那么我可以增加一個中間過渡的元件，幫助鼠標移動到面板上

問題全部解決了，自己的收獲也是蠻大的，交互設(shè)計不是想想的那么簡單，其中考驗?zāi)愕倪壿嬎季S的能力不容小覷，還有在做原型之前要多花時間仔細審查我們想要實現(xiàn)的效果，不要粗心大意，否則的話不僅效率低下，而且可能要重頭再來，得不償失??！

本文為作者@PM_XJay 投稿發(fā)布，轉(zhuǎn)載請注明來源于人人都是產(chǎn)品經(jīng)理并附帶本文鏈接