Axure教程:高級交互頂部欄

5 評論 6942 瀏覽 42 收藏 5 分鐘

今天給大家分享如何制作頂部導航欄,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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 沒顯示高亮條的原因找到了,高度也要是設置的= =

    來自上海 回復
  2. 用9做的,按步驟來,同樣高亮條出現問題,它出現又消失了,請問能知道這是什么問題嗎

    來自上海 回復
  3. 這個想法挺好的,不過高亮條的事件中, 不能有隱藏。 否則就是直接隱藏,而不是慢慢隱藏的效果! 本人親測

    來自上海 回復
  4. 高亮條的效果沒有出來 ??

    來自陜西 回復
    1. 跟著教程一步步做可以的

      來自福建 回復