于 Axure原型工具,很少有產品經過系統學習,一般都是直接上手,邊摸索邊學習,這直接導致很多快捷操作被忽視。筆者在日常工作中總結出以下小技巧,希望對各位有幫助。
如果系統崩潰后,再次進入時,系統一般會提示恢復最近備份的文件。也可以通過文件→從“備份中恢復”找回最新的版本。
快捷鍵不需要刻意去記憶,經常使用就熟記于心
(1)重復的元件可以轉化成母版
對于多次重復使用的元件,每次修改一個地方,其它也挨個修改,這個時候我們可以使用“母版”。
使用到母版元件一樣的元件時,直接在母版區拖進畫布使用。
雙擊母版元件,就會進入到母版編輯窗口,修改后的元件會同步到所有母版元件。
注意:
(2)避免使用多余的控件
一個元件可以實現的效果,不要使用多個元件。
舉個例子:兩個看起來相同的“確認”按鈕,實際上下圖①只有一個矩形元件,而②是由文本框+矩形組成。雖然只多余的一個元件,但是之后只要需要對該元件做修改,就一定會出現多余的操作,非常影響效率。
(3)整合多個元件——組合,方便移動與調整尺寸
(4)隱藏的元件,設置交互顯示時,最好選中:置于頂層,避免被遮擋
(5)善用鎖定——不常移動的元件進行鎖定
鎖定不常移動的元件,比如背景頁,表頭。好處:避免誤移。
注意:鎖定后的元件,不能進行選中要注意哦!
(6)選項組命名——實現單選效果
將多個可選中的元件設置成選項組后,每次只能選中一個元件,其它元件自動取消選中。
注意:
(7)元件提示——鼠標懸浮時會顯示提示內容
步驟如下:
(8)文本框大法——共11種類型
拖拽文本框元件后,右側面板里可選擇不同的文本框類型,選擇不同的類型可以達到不同的效果。
如:密碼格式:輸入的內容會被隱藏
數字格式:只能輸入數字
文件格式:可以選擇文件
日期格式:可以直接選擇日期
另外,文本框里的預置文字,可以直接在右側“提示文字”框輸入。
(9)一個元件上添加多個事件
同一個元件會出現多種 case,如點擊登錄按鈕后出現的多種情況。雖然可以通過添加條件判斷來做區分,但是一般比較費時。不那么嚴格的情況下,我們可以將多個事件添加同一個元件上,對事件進行命名來區分。
操作如下:
(10)動態面板——固定到瀏覽器的某個位置
比如:將彈窗在屏幕中間顯示、導航固定在頂部。都可以通過固定到瀏覽器實現。
步驟如下:
(11)輔助線——快速對齊元件
輔助線分為兩種:頁面輔助線和全局輔助線。頁面輔助線只會在當前頁面出現,全局輔助線在每個頁面都會出現。
注意:輔助線過多時:布局→柵格和輔助線→取消顯示輔助線(或者刪除輔助線)。
(12)預覽原型時,點擊站點導航處的小箭頭,可以看到所有帶交互的元件
(13)合并多個 axure 文件
步驟:點擊文件→從RP文件導入→選擇文件→導入。
(14)拖動頁面名稱
鼠標選擇左側畫板里的頁面名稱,直接拖入畫布里,會出現頁面名稱的按鈕框,可以用來做流程圖,點擊頁面名稱按鈕框,會直接跳轉到對應頁面。
(15)快速實現頁面流程圖——頁面快照
拖動頁面快照到畫布里,選擇對應的頁面,會出現頁面預覽,點擊可進入對應頁面。
(16)實現點擊時顯示,再次點擊時隱藏,用切換(Toggle)即可實現
(17)實現鼠標滾動查看的效果
通過動態面板實現:鼠標右鍵→滾動條→自動顯示滾動條
(18)及時命名、規范命名
對要進行交互事件的元件和動態面板要及時命名,在之后的修改里會降低很大成本。另外命名也要規范化,避免出現重復、遺漏、忘記等情況。頁面元件過多時,找到元件就是一件很費時的事。自己可以整理出自己的命名法則。
(19)元件過多時選中的方法
1)透過上層元件選擇下層元件:多個元件重疊時,想選中下層元件,元件管理窗口直接找到,元件過多的時候可以通過搜索,這是命名的重要性就出現了。
2)選中上層元件,等1秒左右,在點擊一次,就會選中下一層元件
3) 使用“查找”功能:Ctrl+F,通過搜索元件里的文字來找到
(20)按住 Ctrl,將鼠標放在元件的邊緣,移動鼠標,就可以旋轉部件
(21)鼠標放在元件邊緣,按住 shift+鼠標左鍵,可以鎖定長寬比來放大縮小元件
(22)建立回收站文件夾
用來存放淘汰的頁面。但是生成 html 文件時,不要選擇生成回收站內容。
(23)記錄修改內容
新建一個空白頁面,記錄 rp 文件的改動,如改動時間,版本、修改內容、修改人等。
(24)找Icon必備網站:https://www.iconfont.cn/
搜索自己需要的Icon類型,點擊復制SVG,粘貼進Axure面板里,點擊鼠標右鍵,選擇“轉化成矢量圖”,就可以對Icon進行顏色的填充與修改了。
(25)靈感來源>>花瓣:https://huaban.com/
(26)原型尺寸大小(不唯一)
web 原型大小:1440×900/1200×900,app 原型尺寸:375×667
(27)建立自己的元件庫
前輩們已經整理了很多,我們可以直接使用外部元件,然后根據需要建立自己的元件庫。關注公眾號xsxh__hahaha,后臺發送“元件”即可獲得多個元件庫。
產品設計原型的目的是為了更好的傳達自己的想法。當自己的原型能夠滿足要求時,就不需要過度關注原型細致度。
本文由 @王帥帥 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
交互是Axure的顯著特征
有了Axure這一神器,產品、設計、運營等非開發崗位的同學,不用寫一行代碼,只需要通過幾步簡單的配置,就能夠實現前端工程師們平日里通過大量代碼實現的交互功能。Axure生成的Html文件之所以能夠被稱作為原型,而不僅僅是一個線框圖或者是草圖,就是因為其強大的交互基因,決定了它不是一款普通意義的界面設計工具。
交互是Axure中重要的構建模塊,用來將靜態的線框圖轉換為可交互的動態HTML文件。在Axure中,通過一個簡潔的、帶有指導提示的界面指令和邏輯指引就可以創建完整的交互,生成HTML原型時,Axure都會將這些交互轉換為瀏覽器可識別的編碼(JavaScript、HTML、CSS)。但是我們需要清楚的是,這些編碼并不是產品級別的,不能作為真正的產品使用。它只是實現了前端的視覺交互,但背后需要的后臺數據及相關服務,是無法提供給Axure使用的,這也是Axure最大的局限。
交互的定義
什么是交互?簡單通俗的講,就是誰在什么時候做了什么樣的事情。這個主體誰其實就是對應原型的元件和頁面;什么時候,狹義的理解是時間,在這里我們可以延伸理解為時機,對應原型中的事件;做了什么樣的事情,這是一個動態變化的過程,在原型中對應著動作。根據交互的定義,我們可以看出交互是由元件、事件、動作這3個最基本的元素構成。
Axure的事件可以分為自動觸發的事件和手動觸發的事件。
頁面交互
以頁面載入時事件為例,向大家簡單講解頁面事件的交互。
頁面交互說明
Axure 9.0頁面交互事件
元件交互
鼠標單擊跳轉就是最基本的元件交互事件,可以用于鼠標點擊時,也可以用于移動設備上的手指點擊時。我們以簡書的主導航(發現/關注/消息)跳轉為例,說明元件的交互過程。
元件交互說明
Axure 9.0元件交互事件
Axure 9.0元件交互樣式
用例是用戶與應用網站或應用程序之間操作流程的抽象表達,每個用例可以封裝成一個獨立的路徑。每個事件下可以有多個用例,當有多個用例存在時,需要為用例設置一些邏輯條件,執行不同的動作。下面我們以登錄為例,講解說明什么是用例。
通過這個交互案例,我們可以看出不同的條件下(賬號錯誤或密碼錯誤),點擊“登錄”按鈕時,提示信息是不一樣的。為了滿足這兩個不同的條件,我們就需要為“登錄”按鈕添加兩個不同的用例。
用例說明
添加用例
在設計區域選中元件,在右側交互面板中點擊新建交互,我們會看到該元件可用的事件列表,點擊其中的一個事件,點擊右側的用例圖標或者直接選擇想要添加的動作。
編輯用例
1. 用例說明:點擊事件名稱右側的用例圖標,在事件名稱下方可以編輯用例的名稱,并添加用例的邏輯條件。事件的第一個用例,默認沒有名稱,需要我們手動添加名稱。
2. 插入動作:鼠標點擊動作名稱,開始添加動作,支持添加多個動作。當我們準備插入第二個動作時,點擊用例下方的圓形十字架,開始插入更多動作。
3. 配置動作:動作選擇完畢后,我們還需要為動作進行一些規則或屬性的配置。比如,我們添加的動作是打開鏈接,在動作配置中,需要添加鏈接頁面并選擇頁面打開的方式(當前窗口、新窗口/新標簽、彈出窗口和父級窗口),最后點擊完成,動作配置完畢,整個用例添加完畢。
編輯用例
動作是交互事件中最重要的部分,交互效果的外在表象是通過動作反應出來的。因此,了解每個動作的用法與含義,對學習交互來說是十分必要的。下面我們來看一下,Axure 9.0為我們提供了哪些動作,以及這些動作的含義是什么。
鏈接動作
元件動作
中繼器動作
其他動作
文將介紹如何制作Axure高保真數據可視化原型,供大家參考和學習。
高保真數據可視化原型設計,稱得上是Axure高階水平。
數據可視化在原型設計中是一個重要的分支,但是對于Axure使用者具有一定要求。清晰的數據可視化原型可以減少與需求方和研發工程師等的溝通成本,且可具象。
Axure本身具有高級交互的能力,結合數據可視化的方式,以低成本的方式,達到預期的演示的效果,本文介紹如何制作Axure高保真數據可視化原型。
在Axure操作界面中,拖入一個Inline Frame(中文:內聯框架)。
Axure本身可生成HTML頁面,本質上而言,只要帶有實例圖的為HTML文件,并可正常訪問即可。至于HTML是以何種方式制作生成,不做限制。
點擊進入圖后,所示頁面如下圖。左側為折線圖效果對應的代碼,右側是折線圖的效果。可以在左側修改代碼,運行后可在右側查看修改后的效果(此處不做贅述)。
點擊頁面右下角的“Download”按鈕,下載折線圖的HTML頁面。
使用任意一種代碼編輯器(筆者喜歡用komodo),打開html頁面,修改html頁面代碼中自帶的api。如果發現運行后html報錯api過期時,需要自行創建api,將其進行替換。
創建一個新的文件夾(本文命名其為:axure and excharts),文件夾的位置沒有要求。將下載的HTML頁面,放置在文件夾中。
雙擊拖入Axure操作界面的內聯框架(Inline Frame),選擇“link to an external url or file”(選擇一個外部的urd或文件),輸入HTML頁面所在的位置及名稱(如本文:D:\Desktop\axure and echarts\line-simple.html),如下圖所示:
點擊生成html頁面按鈕:
將生成html文件的目錄,更改為上文創建的文件夾。如下圖:
點擊確認后,“axure and echarts”文件夾中會存在axure生成的html頁面和html頁面。同時,會自動打開一個html頁面,可查看效果,如下圖:
這樣,我們就通過一個簡單的例子,在Axure中實現了數據可視化效果。
筆者在本文中分享的是實現的方法,但是實際應用過程中,通過一款數據可視化產品的視角去實操,會讓你有意想不到的效果,特別是在Axure顏色、布局、交互等能力的加持下。
作者:魚日,公眾號:issnail
本文由 @魚日 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
*請認真填寫需求信息,我們會在24小時內與您取得聯系。