Axure學習筆記整理6-彈出效果
彈出效果應用比較廣泛,比如側邊選單欄、加號彈窗、點擊向上彈出視窗。其實互動用例都差不多。
例:先製作以下兩個形狀:分別命名為‘滑鼠移入’和‘彈窗內容’;
隱藏‘彈窗內容’,並對‘滑鼠移入’部件做互動-滑鼠移入時-顯示-形狀‘彈窗內容’-淡入淡出500毫秒;再新增互動用例’滑鼠移出時‘-隱藏-形狀‘彈窗內容’-淡入淡出500毫秒;
側邊選單欄彈出效果:
先拖拽以下部件,上面’我的選單‘命名為manu,下面部件可組合並轉換為動態面板後命名為submanu;
可以雙擊進去submanu的state1進行互動樣式設定,設定manu1、manu2、manu3、manu4’滑鼠懸停‘時字型顏色變為紅色等;
對manu做互動-滑鼠移入時-顯示動態面板submanu-逐漸-500ms-彈出效果。注:如果要對submanu裡面的部件做互動樣式操作的就不要再對manu做滑鼠移出時的用例了,不然一移開manu彈窗就會消失了。
別忘了對submanu做下隱藏再去預覽效果哦。
相關推薦
Axure學習筆記整理6-彈出效果
彈出效果應用比較廣泛,比如側邊選單欄、加號彈窗、點擊向上彈出視窗。其實互動用例都差不多。 例:先製作以下兩個形狀:分別命名為‘滑鼠移入’和‘彈窗內容’; 隱藏‘彈窗內容’,並對‘滑鼠移入’部件做互動-滑鼠移入時-顯示-形狀‘彈窗內容’-淡入淡出500毫秒;再新增互動用例’滑鼠移出時‘-
Axure學習筆記整理4-實現APP頁面上下滑動及彈回效果
相對於其他互動效果,Axure製作app頁面的上下滑動效果還是比較簡單的。 為了使效果顯著一點,先做一款簡單的原型如下。 第一步,將下面框起來的部分要做滑動的內容選好,點選滑鼠右鍵‘轉化為動態面板’,並把這個動態面板命名為‘介面內容’; 第二步,選中‘介面內容’動態面板,選擇
Axure學習筆記整理3-掃描棒自動輪播效果
一般來說,現在的移動端開發都會引入身份證和銀行卡OCR掃描,這個也是在註冊和填寫個人資訊的時候非常必要的流程。簡單的原型設計只需要點選進入掃描頁即可。但我對這個掃描互動還是比較感興趣,所以做了一個比較簡單的掃描自動輪播的互動: 掃描棒自動輪播效果: 第一步:準備一個引導頁
Axure學習筆記整理5-燈箱效果
燈箱效果: 拖拽4張小圖片分別命名為1/2/3/4,如下圖; 拖拽一個圖片部件轉換為動態面板命名為big-img,新增state1、state2、state3、state4並分別雙擊進去放好跟之前的1/2/3/4相同的圖片;如下圖: 對名稱為1 圖片做互動:’滑鼠單擊時‘-設
Axure學習筆記整理3-掃描框自動輪播效果
一般來說,現在的移動端開發都會引入身份證和銀行卡OCR掃描,這個也是在註冊和填寫個人資訊的時候非常必要的流程。簡單的原型設計只需要點選進入掃描頁即可。但我對這個掃描互動還是比較感興趣,所以做了一個比較簡單的掃描自動輪播的互動: 掃描棒自動輪播效果: 第一步:準備一個引導頁或掃一掃圖示按鈕,隨
【C#學習筆記】網頁彈出提示框
app c# tar code script dfs 提示框 form pro using System; using System.Collections.Generic; using System.Linq; using System.Web; using
Eric6與pyqt5學習筆記 10【彈出視窗大全】
from PyQt5.QtWidgets import *from PyQt5.QtCore import Qt, pyqtSignal, QTimer, QThread # 後三個都是用於第二個視窗class MyWindow(QWidget): def _
Axure學習筆記整理4-實現APP頁面上下滑動(垂直滾動條)
這裡有個比較簡單的互動方法用來實現頁面上下滑動的效果: 1、拖拽一個動態面板設定高度667,寬度375,雙擊進入state1,拖拽一些部件組成頁面,要超過動態面板本身的667尺寸;如下面這個state1的圖片: 2、在state1中選擇除了頂部狀態列的剩餘部分,剩餘部分選擇’轉換為動態面板
Axure學習筆記整理2-Banner輪播圖製作(包括自動輪播及手動輪播)
覺得下面這個分享挺好,我就不重複做了。 另外,我在原文中添加了一個小點,關於輪播導致的圓點顏色變化的設定。請看第3章第2部分的紅色字型。 謝謝原作者的分享。以下為原文連結。 轉載至:https://www.jianshu.com/p/628a22c1f653 &nb
Axure學習筆記整理1-設定下拉框、列表框和元件文字內容
我一直認為Axure的使用是做產品經理必備的基礎技能之一,所以從一開始轉行做產品經理就在熟悉和試圖挖掘更多的Axure使用技巧。 本篇以及後面幾篇文章都希望較簡單的方式完成簡單的互動設計。事先說明一下,我不是專門做互動設計的,只是因為平時工作中個人覺得可以少量使用互動讓原型圖設計更為流暢。最近打
大前端學習筆記整理【一】CSS盒模型與基於盒模型的6種元素居中方案
概覽 CSS盒模型,規定了元素框來處理元素的 內容、內邊距、邊框和外邊距的方式 元素部分是指內容部分,也是最實際的內容,包圍內容的稱之為內邊距,內邊距外圍是邊框,邊框外圍就是外邊距;且外邊距是透明的,所以並不會阻擋其後的元素 * { margin: 0; padding: 0; }
JavaScript學習筆記整理Day5
數字類型 cal 數組排序 return 函數 屬性 scrip each 第一個 #數組 ##一:數組的定義 1. 數組是值的有序集合 2. 每一個值叫做一個元素 3. 每個元素在數組中都有一個位置,以數字表示,叫做索引。索引從0開始。 ##二:特
JavaScript學習筆記整理Day4
沒有 默認值 函數的調用 -- 復雜 簡潔 day4 打開 nts ##函數 ####函數是一段在一起,可以做某件事的程序。 ###優點:控制程序設計的復雜性 1. 提高軟件的開發可靠性 2. 提高軟件的開發效率 3. 提高軟件的可維護性
JavaScript學習筆記整理Day9
elements substr() 長度 開平 and ret val false index 一.JavaScript定時器: 1.單次定時:setTimeout(fn,time); 2.多次定時:setInterval(timer); 3.停止單次定時:cl
前端學習筆記2017.6.21-html是個什麽東西
向人 比較 htm 發送 書寫 文檔 輕量 文件名 這就是 html有兩種意思,html語言和html格式 html語言是一種面向人類的計算機語言,這是啥意思?人類用html這種語言描述出一個網頁的樣子,瀏覽器解析這個語言並展示出來。 html格式是一種文件格式,裏面存儲的
JavaScript學習筆記整理Day10
表達 所有 原子 驗證 code abc 表達式 color 步驟 一.正則表達式(規則表達式) 定義:使用單個字符串來描述、匹配一系列符合某個語法規則的字符串搜索模式 二.正則表達式的作用 操作字符串是正則的唯一作用(驗證用戶名,驗證電話號碼,驗證密碼等表單元
WPF學習筆記(2)——動畫效果按鈕變長
anim aud tor col log 筆記 wpf style 分享 說明(2017-6-12 11:26:48): 1. 視頻教程裏是把一個按鈕點擊一下,慢慢變長: 註意幾個方面: (1)RoutedEvent="Button.Click",這裏面要用Button,是
前端學習筆記2017.6.12 CSS控制DIV
banner 成像 個性化 logs 一個 style 切換 back 成了 前一篇文章中用div布局了豆瓣東西的頁面,如果用html代碼表示的話大概是這個樣子的 <!DOCTYPE html><html><head></head
python語言學習筆記整理
hello 如果 顏色 價格 姓名 識別 可變 等於 cat 什麽是程序? 程序等於數據結構加算法,那麽數據結構是一個靜態的東西,算法是一個動態的東西,我們用一個新的語言編寫這個程序,我們要考慮到語言也主要由數據結構和算法相關的東西,或靜態或動態的東西來構成,所以我們可以把
【python學習筆記】6.抽象
位置參數 name 默認參數 [] 順序 fun append 聲明 value 【python學習筆記】6.抽象 創建函數: 使用def語句定義函數,不用聲明參數類型,和返回值類型 def function_name(param1, param2):