Axure學習筆記整理1-設定下拉框、列表框和元件文字內容
我一直認為Axure的使用是做產品經理必備的基礎技能之一,所以從一開始轉行做產品經理就在熟悉和試圖挖掘更多的Axure使用技巧。
本篇以及後面幾篇文章都希望較簡單的方式完成簡單的互動設計。事先說明一下,我不是專門做互動設計的,只是因為平時工作中個人覺得可以少量使用互動讓原型圖設計更為流暢。最近打算將學習資料整理一下給到需要的人檢視。
1.設定下拉框、列表框和元件文字內容
第一步,拖拽一個下拉框、列表框、矩形和三個文字標籤;
如下圖:
第二步,分別給下拉框、列表框和矩形命名為xialai、liebiao、juxing1;
第三步,給下拉框和列表框設定內容:分別選中下拉框和列表框,然後點選滑鼠右鍵--選擇‘編輯列表項’--點選‘編輯多項’分別輸入‘內容一、內容二、內容三’或輸入在實際工作中要用到的下拉選項內容;
第四步,最關鍵的步驟:分別選中下拉框和列表框-》點選右邊互動頁面的‘新增用例’進入用例編輯頁面-》點選‘新增條件’進入條件設立頁面,最後如下圖進行設定:
注:描述那裡是根據上面的設定自動出來的。不需要改動。
第五步:設定矩形的互動。
相關推薦
Axure學習筆記整理1-設定下拉框、列表框和元件文字內容
我一直認為Axure的使用是做產品經理必備的基礎技能之一,所以從一開始轉行做產品經理就在熟悉和試圖挖掘更多的Axure使用技巧。 本篇以及後面幾篇文章都希望較簡單的方式完成簡單的互動設計。事先說明一下,我不是專門做互動設計的,只是因為平時工作中個人覺得可以少量使用互動讓原型圖設計更為流暢。最近打
C#學習筆記整理1--資料型別
什麼是資料型別(Data Type) A data type is a homogeneous collection of values, effectively presented, equiipped with a set of operations wh
Axure學習筆記整理3-掃描棒自動輪播效果
一般來說,現在的移動端開發都會引入身份證和銀行卡OCR掃描,這個也是在註冊和填寫個人資訊的時候非常必要的流程。簡單的原型設計只需要點選進入掃描頁即可。但我對這個掃描互動還是比較感興趣,所以做了一個比較簡單的掃描自動輪播的互動: 掃描棒自動輪播效果: 第一步:準備一個引導頁
Axure學習筆記整理6-彈出效果
彈出效果應用比較廣泛,比如側邊選單欄、加號彈窗、點擊向上彈出視窗。其實互動用例都差不多。 例:先製作以下兩個形狀:分別命名為‘滑鼠移入’和‘彈窗內容’; 隱藏‘彈窗內容’,並對‘滑鼠移入’部件做互動-滑鼠移入時-顯示-形狀‘彈窗內容’-淡入淡出500毫秒;再新增互動用例’滑鼠移出時‘-
Axure學習筆記整理5-燈箱效果
燈箱效果: 拖拽4張小圖片分別命名為1/2/3/4,如下圖; 拖拽一個圖片部件轉換為動態面板命名為big-img,新增state1、state2、state3、state4並分別雙擊進去放好跟之前的1/2/3/4相同的圖片;如下圖: 對名稱為1 圖片做互動:’滑鼠單擊時‘-設
Axure學習筆記整理4-實現APP頁面上下滑動(垂直滾動條)
這裡有個比較簡單的互動方法用來實現頁面上下滑動的效果: 1、拖拽一個動態面板設定高度667,寬度375,雙擊進入state1,拖拽一些部件組成頁面,要超過動態面板本身的667尺寸;如下面這個state1的圖片: 2、在state1中選擇除了頂部狀態列的剩餘部分,剩餘部分選擇’轉換為動態面板
Axure學習筆記整理4-實現APP頁面上下滑動及彈回效果
相對於其他互動效果,Axure製作app頁面的上下滑動效果還是比較簡單的。 為了使效果顯著一點,先做一款簡單的原型如下。 第一步,將下面框起來的部分要做滑動的內容選好,點選滑鼠右鍵‘轉化為動態面板’,並把這個動態面板命名為‘介面內容’; 第二步,選中‘介面內容’動態面板,選擇
Axure學習筆記整理3-掃描框自動輪播效果
一般來說,現在的移動端開發都會引入身份證和銀行卡OCR掃描,這個也是在註冊和填寫個人資訊的時候非常必要的流程。簡單的原型設計只需要點選進入掃描頁即可。但我對這個掃描互動還是比較感興趣,所以做了一個比較簡單的掃描自動輪播的互動: 掃描棒自動輪播效果: 第一步:準備一個引導頁或掃一掃圖示按鈕,隨
Axure學習筆記整理2-Banner輪播圖製作(包括自動輪播及手動輪播)
覺得下面這個分享挺好,我就不重複做了。 另外,我在原文中添加了一個小點,關於輪播導致的圓點顏色變化的設定。請看第3章第2部分的紅色字型。 謝謝原作者的分享。以下為原文連結。 轉載至:https://www.jianshu.com/p/628a22c1f653 &nb
深度學習筆記整理-pycharm環境下開發及執行
1. 關於軟體安裝: Anaconda---->>>安裝python3.6 package---->>>安裝pycharm IDE------->>>配置interpretation
JS學習筆記 - fgm練習 - 輸入法下拉框 三元表示式
<script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; var oUl = document.get
js學習筆記(二)下拉選單項選擇並跳轉
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE>
Tomcat學習筆記【1】--- WEB服務器、JavaEE、Tomcat背景
javascrip http .cn 目的 java log 進行 瀏覽器 靜態資源 本文主要講學習Tomcat需要知道的基礎知識。 一 Web服務器 Web服務器可以解析HTTP協議。當Web服務器接收到一個HTTP請求,會返回一個HTTP響應,例如送回一個HTML頁面。
【 C/C++學習筆記整理】--2.break與return0、常用函式的用法
5.break和return 0 的區別 break 是跳出迴圈,執行迴圈體的外的程式;return 0 是結束程式,返回到main函式 6.sort()函式的用法 sort(begin,end,cmp),cmp引數可以沒有,如
Android學習筆記整理(8)--Activity的顯式意圖和隱式意圖
Android中Intent尋找目標元件的方式分為兩種,一種是顯式意圖,另一種是隱式意圖1.顯式意圖在通過Intent啟動Activity時,需要明確指定啟用元件的名稱。在程式中,如果需要在本應用中啟動
Qt學習筆記(1)---QT5利用事件過濾器實現在控制元件上繪圖
首先,感謝 作者:一去丶二三裡 部落格地址:http://blog.csdn.net/liang19890820 Qt中要在控制元件中繪製圖像,需要重寫paintevent函式,本文通過EventFilter(事件過濾器)來實現在控制元件上的圖形繪製。 .h檔案 #
Bootstrap -- 下拉選單、輸入框組、導航選單
Bootstrap -- 下拉選單、輸入框組、導航選單 1. 下拉選單 可以使用帶有各種大小按鈕的下拉選單:.btn-lg、.btn-sm 或 .btn-xs。 實現下拉選單: <!DOCTYPE html> <html> <head> <
集下拉重新整理、自動載入和側滑選單的RecyclerView基本實現原理
目錄 目錄 前言 結尾 前言 現在這個功能的框架也挺多的了。之所以要寫是因為這個框架是自己親手實現的。說起來有點小激動,這是我正經寫出來的第一個框架。對於”不要重複造輪子”這句話,我一直不是太認同,得從不同的維度看。如果從使用上
Kafka學習筆記(1)----Kafka的簡介和Linux下單機安裝
1. Kafka簡介 Kafka is a distributed,partitioned,replicated commit logservice。它提供了類似於JMS的特性,但是在設計實現上完全不同,此外它並不是JMS規範的實現。kafka對訊息儲存時根據Topic進行歸類,傳送訊息者成為Produ
學習“javaScript+CSS+DIV實現下拉選單,實現表格變色”內容的筆記
實現下拉選單 <!DOCTYPE html> <html> <head> <title>下拉選單示例</title> <script language="javaScript">