Axure教程:高級交互頂部欄
今天給大家分享如何制作頂部導航欄,enjoy~
當設計者使用導航或者自定義一些導航結構時,請注意:
- 盡可能提供標識、上下文線索,避免用戶迷路;
- 保持導航樣式和行為一致或者減少導航數量,降低用戶學習成本;
- 盡可能減少頁面間的跳轉(例如:一個常見任務需要多個頁面跳轉時,請減少至一到兩次),讓用戶移動距離保持簡短。
- 一級類目建議在 2-7 個以內。標題長度長 2-6 個。
一、交互方式分析
(1)當鼠標的懸浮、點擊選中時,導航字體顏色由【淺灰色】變為【白色】。
(2)鼠標點擊選中時,高亮條移動到相應位置,且由小變大。
(3)鼠標移入個人中心,【子菜單】先下拉彈出顯示;鼠標移出個人中心,【子菜單】上拉隱藏;
二、交互講解一:鼠標的懸浮、點擊選中
(1)選頂部欄所有菜單選項,在其【屬性】欄中的交互樣式,設置鼠標懸浮和選中時,字體顏色的變化,顏色設置為白色#ffffff。
(2)設置選項組名稱,暫命名為:頂部;(這是為了實現導航只選中一個的效果)
三、交互講解二:高亮條移動
1、高亮條的移動,主要是利用元件的隱藏位移及顯示;
2、選中某一個導航菜單,選擇【鼠標點擊時】交互事件,添加隱藏事件,勾選【高亮】;
3、設置【高亮】矩形的寬度尺寸為2,錨點為中心,主要是使其變??;如下:
4、移動【高亮】至絕對位置,X軸[[This.x+10]]、Y軸[[Target.y]];如下圖所示:
5、添加等待事件,事件110毫秒;
6、設置【高亮】矩形的寬度尺寸為80,主要是使其變大;同上;
7、設置當前元件This為選中狀態true;
詳細交互事件如下所示:
四、交互講解三:個人中心子菜單彈出
選中【個人中心】,添加【鼠標移入時】事件:選中【子導航】,可見性設置為【顯示】效果,動畫為:向下滑動,時間:200秒,切記,更多選項為:彈出效果。
如下所示:
作者:火星人~艾斯,公眾號:艾斯的Axure峽谷
本文由 @火星人~艾斯 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
沒顯示高亮條的原因找到了,高度也要是設置的= =
用9做的,按步驟來,同樣高亮條出現問題,它出現又消失了,請問能知道這是什么問題嗎
這個想法挺好的,不過高亮條的事件中, 不能有隱藏。 否則就是直接隱藏,而不是慢慢隱藏的效果! 本人親測
高亮條的效果沒有出來 ??
跟著教程一步步做可以的