tft每日頭條

 > 圖文

 > axurerp8怎樣實現頁面交互效果

axurerp8怎樣實現頁面交互效果

圖文 更新时间:2024-09-15 19:14:52

提到Axure,這可是絕大多數PM童鞋靠着吃飯的家夥事兒。Axure被很多人定義為一個以交互見長的原型設計工具。很多初入坑甚至入坑甚久的PM為畫出炫酷的原型挖空了心思。我想這對Axure的初衷一定是有誤解。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)1

先來看看百度百科對Axure的定義:

Axure RP是美國Axure Software Solution公司旗艦産品,是一個專業的快速原型設計工具,讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖流程圖原型規格說明文檔。作為專業的原型設計工具,它能快速、高效的創建原型,同時支持多人協作設計版本控制管理。

由此歸納出,Axure更應該是一個文檔工具。它擁有豐富的卻被很多PM忽視的文檔撰寫功能。或許因為浮躁的市場導向,緻使很多PM片面的将Axure當作交互工具來用,甚至模糊了産品工作的邊界,為了堆砌而堆砌,反而顯得很不專業。

作者總結以下非交互功能,希望可以抛磚引玉。如果還可以引發大家對Axure文檔功能的重視,便再好不過了。

一、notes:控件和頁面注釋

越來越多的PM開始用Axure來寫PRD,但行内并不存在約定成俗的文檔規範。作者目前為止見過的Axure版PRD中,大部分采用原型 旁邊文字标注的方法來表達産品邏輯。其實,notes才是Axure官方推薦的邏輯标注方式。

Axure官網對notes的介紹:

控件注釋和頁面注釋是與控件和頁面關聯的文本元數據。它們可以用來記錄規範,将控件和頁面與項目需求、文檔更改、以及與團隊成員進行溝通。注釋字段可以被命名,有一些不同類型的注釋字段可采用文本、選擇列表、數字和日期,而頁面隻有文本類型注釋字段。

首先選中要準備标注的控件,然後在右側檢視器的notes(漢化為說明)選項卡中進行文本輸入。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)2

點擊「自定義字段」可以添加更多的字段類型,以便規範條理進行邏輯注釋。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)3

有兩種方式可以展示注釋,一種是選擇側邊欄的NOTES選項卡,另一種是點擊有添加注釋的控件右上角藍色的腳注圖标即可展示。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)4

二、團隊協作功能

Axure被一些童鞋吐槽的很大一部分原因是「無」團隊協作功能,以至于很多童鞋狠心抛棄Axure轉向了新生代的墨刀此類的協作功能突出的原型工具。其實,Axure很早已經具備了協同工作和在線發布的能力,隻是由于操作門檻相對較高而已。

這個功能大家可以配合Axhub這個網站使用,操作門檻會被極大程度的降低。

Axure支持将原型文件一鍵上傳到自己的SVN空間中,可以實時預覽。首先選擇「團隊」,再選擇「從當前文件創建團隊項目」

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)5

在SVN選項卡中輸入自己的SVN地址即可提交上傳。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)6

三、版本控制管理

基于上面提到的團隊協作功能,用戶每次提交的更新Axure都會有詳細的更改記錄。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)7

操作路徑為:「團隊」然後「浏覽團隊項目曆史記錄」

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)8

四、草圖效果

在樣式選項卡一欄,有草圖/頁面效果功能,可以設置手繪風格的「扭曲度」,默認是0,數字越大畫出的線越扭曲。線框圖瞬間變為手繪風格。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)9

草圖效果:

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)10

五、如何生成無導航欄的預覽效果

很簡單,把生成的html文件的第一個頁面名稱改成index,然後把文件夾裡所有的start相關的頁面全部删除掉就可以了。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)11

無導航欄的預覽效果:

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)12

六、流程圖功能

一站式流程圖功能,從此告别第三方流程圖工具,極大節約時間成本。Axure的V8.1.0.3352版本将之前的19個流程圖圖标增加到了37個,甚至有技術層面的圖标類型可供調用。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)13

更新後的圖标庫:

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)14

七、頁面快照

先選擇「頁面快照」元件,點擊快照可以引用任何一個頁面,以此來繪制頁面流程圖。在預覽模式中,點擊快照可以快速定位到所引用的頁面。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)15

八、一鍵生成頁面流程圖

在需要生成流程圖的頁面組上右鍵,選擇「生成流程圖」,頁面流程圖就生成了。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)16

生成的頁面流程圖:

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)17

九、為原型添加LOGO

點擊「發布」「生成html文件」

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)18

然後選擇「标志」,便可以導入你的logo圖片以供在預覽原型時展示。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)19

預覽後展示的LOGO:

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)20

十、标尺輔助線

在原型設計繪制過程中經常需要對齊,通過在左側或上部的标尺上點擊并拖動,便可拉出一條輔助線。

axurerp8怎樣實現頁面交互效果(你居然不知道Axure這10種非交互功能)21

以上也隻是一部分,畢竟Axure已經走過16個年頭,肯定隐藏很多我們未挖掘出來的長尾功能。如果大家有用到作者未提到的貼心功能,不妨留言,互相學習。

作者:産品範,産品範,O2O新零售電商産品經理

本文由 @産品範 原創發布于人人都是産品經理。未經許可,禁止轉載

題圖來自 Unsplash ,基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved