PM完成Axure原型評審后,一定不能忘記備份這些原型html,后續可能需要查詢以及技術撕逼。
希望通過Axure原型的幾種使用場景,讓初級PM對它的來龍去脈有個清晰的了解。而不是停留在“我知道”“大概會用”的水平。
PM會經常修改AxureRP源文件,然后生成不同的原型。
但是對外評審的原型應該是唯一的。
并且該版本的產品需求文檔PRD就是這個原型。
請注意兩者不能混為一談。
一般來說我們是在Axure生成原型Html的時候,自動在瀏覽器中打開了原型并查看。
但是如何打開已備份在電腦中的原型呢,很多初級PM摸不著頭腦了。其實也不復雜,如果你學會一點html網頁的知識。
請進入該原型對應的目錄,比如APP名稱V2.0版,我們會發現存在data、file、images、plugins、resources等文件夾,以及很多html網頁。請找到start.html,然后雙擊打開就是你熟悉的原型啦。
當原型評審后,PM需要將原型放到網上供所有團隊成員進行設計和編程。
不管是放到內網展示,還是外網展示。其本質都是將Axure原型的所有文件都上傳到服務器,包括所有的html文件,圖片文件,js文件,css文件。不能缺少任何文件,否則就無法正常顯示。
如果你只是修改了某個頁面,也切記生成并將所有文件上傳一遍,而不僅僅是該頁面對應的html文件。因為其對應的js,css文件,圖片文件也可能被修改
上傳之后然后把對應的原型網址發給其他團隊成員即可查看。
由于Axure原型是由html+js+cs組成的文件,我們在生成的時候將他們放置在指定目錄。
嘉定我們將該產品的所有原型存放于D://PM/APP名稱,那么建議以“APP名稱V1.0版”的格式命名,并生成原型。
當然你也可以繼續壓縮之后存起來,不過就不太方便后續的查詢。
有時候我們需要回退版本的時候,需要把舊版本的原型也拿出來。那么請用舊版本的原型html去替換當下的原型目錄。
不過不太建議這樣,還不如新增一個版本來處理。
由于Axure生成的原型,是以Html文件進行索引內容的。而Html是以你在Axure中新建的頁面來作為基礎的。如果你畫Axure原型的時候是以你產品中的頁面來進行命名和創建的。那么我們可以通過搜索“頁面名稱”關鍵詞去查詢你想要查詢的頁面。
如果你使用的搜索工具支持搜索文件內內容,比如Windows下面的everthing,Mac自帶的spotlight。那么可以通過搜索“頁面內文字”關鍵詞去查詢你想要查詢的相關頁面。
不過我更建議你進入到具體版本的原型html文件夾里面進行搜索,而不是進行全局搜索。
以上就是Axure原型的使用場景。請一定要理解Axure原型的本質是html+js+css,每次生成原型的時候會在本地生成目錄并寫入這些文件。
浪子,業務型PM,浪子PRD系列51prd.com,公眾號langzisay,個人微信nuanai88。
本文由 @浪子 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 unsplash,基于 CC0 協議
輯導讀:對于 Axure原型工具,很少有產品經過系統學習,一般都是直接上手,邊摸索邊學習,這直接導致很多快捷操作被忽視。筆者在日常工作中總結出以下小技巧,希望對各位有幫助。
之前整理了2期Axure的使用技巧,大約有36個技巧,具體可查看下邊的文章:
產品必會的Axure使用技巧(第一彈)
產品必會的Axure使用技巧(第二彈)
最近在使用Axure時又整理了幾個我覺得比較實用的技巧,今天把第三彈分享給各位。
我使用的Axure8示例,不過在Axure9中同樣可用。
格式刷可以用來復制樣式
先選擇需要復制樣式的控件,然后在點擊鋼筆旁邊的“更多”,點擊選擇格式刷
然后選擇需要復制樣式的目標控件,點擊“應用”,就可以將樣式復制過來。
不過在Axure9中,可以直接右鍵復制樣式
Axure中自帶了流程圖元件,很多產品經理喜歡直接在Axure中畫流程圖,但是在畫泳道圖時,Axure沒有提供泳道圖的樣式。
不過我們也可以畫出泳道圖樣式,就是使用“表格”,調整一下表格數量就可以了。
在之前的第一彈中說過這個,不過這次還是想再說一遍。
在做列表需求時,經常需要畫列表,不過Axure的表格我用不慣,所以每次都直接在Excel里把列表字段寫出來。
然后直接在復制到Axure里,就可直接把Excel表格復制過來。
不過復制過來會有幾個問題:
1、樣式不能復制。只有復制表格后,在手動調整樣式。
2、合并單元格不能復制,主要是Axure不支持合并單元格。
選中需要修改的表格,然后直接修改寬度與高度,即可批量修改選中表格的尺寸。
如果想修改個別表格,按照ctrl鍵,再選中即可。接著修改寬度與高度,就可直接修改選中表格的尺寸了。
最近領導要求給原型頁面上加上編號,然后發現一個很快速的方法。
先選中一個頁面重命名,然后在重命名狀態下,使用鍵盤上下鍵,進到下個頁面時還是重命名狀態,就可以直接重命名了。
在生成html文件后,點擊生成html文件夾內的start.html或者index.html查看時,會出現安裝插件的提示。
直接安裝插件這個方法就不說了,不過有2個快速的解決方法:
1.直接點擊要查看的單個頁面。不直接點擊start.html、index.html等入口。
2.修改源代碼,繞過提示。
打開start.html或index.html的代碼
刪除下方標的代碼,然后保存,重新點擊點擊入口打開,就ok了。
最近安排手下的實習生去畫原型,最后需要合并在其它源文件中。
他是直接復制粘貼過去的,頁面少這樣沒啥問題,要是頁面多了,一個個復制粘貼也挺費勁的。
我們可以直接使用“文件”下的“從RP文件導入”
選擇需要導入的RP源文件后,然后在勾選需要導入的頁面,一直Next就行了。
Axure也支持替換、查找文字,直接Ctrl+f。
當出現字段批量替換時,就不用一個個去找了。不過在替換后,不支持撤銷,替換錯了也影響不大,再替換回來就行了。
第三彈先到這,我在整理整理其它的Axure小技巧,湊夠一篇文章再分享給各位。
本文由 @王大鹿 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
起Axure,做產品的朋友再熟悉不過了,它是我們在日程工作中最常見的原型制作軟件之一,今天分享的文章,主要是教大家如何使用Axure打造簡單的個人網站,不會編程我們依然可以做網站。
演示地址:https://vip.uedart.com/demo/UEDART_019/index.html
接下去將分為幾個步驟去闡述:
舉個例子,我構建的是一個小型個人展示站
包含以下主要內容:網址導航、常用工具、實用資源、案例展示,通過思維導出對其內容進行
整理如下圖所示:
因為我們是利用Axure去制作網站,在我們平時工作的流程常常是,原型-設計-前端-開發,而這里我們只需進行原型和設計,這里將不再有前后關系,為了節約時間,我們可以把Axure當做設計工具,直接進行頁面設計,里面所需的圖片素材可以用ps輔助設計。
創建一個項目文件夾用來整理此網站涉及到的全部資源素材
采用的是藍色調,可以看下我的主色、輔助色的配色如下
導航布局如下,采用了頂部導航的方式,設置了動態面板并將此轉化成母版用于多個頁面
如下圖所示,有懸停效果和點擊跳轉的設置
網址導航欄目的左側菜單設置,滑塊移動位置的y坐標按具體位置設置,每個元素都要設置
左側導航在滾動時觸發具體欄目類別,采用的是熱區范圍來觸發,當窗口滾動時觸發相應的類別選中
布置完畢將柵格去除(紫紅色是1200px寬度的邊界)
拿網址導航頁做示例,每個單元模塊標題,網址卡片、左側導航的排布盡可能規范統一,立馬包含了各種元素的基本規范如:字體大小、顏色、寬度、懸停交互效果點擊跳轉效果
合理利用中繼器做頁面的數據關聯
常用工具與實用資源頁面,采用了中繼器來制作,在中繼器的微型數據表中,插入對應字段后,關聯每項參數的內容(對元件名稱進行命名),以后增加一條數據對應改變其內容即可。
如下圖包含了圖片,標簽,標題,詳情描述幾個內容,在中繼器中就要有相應的字段來進行控制
(1)我們需要一個域名,可以到阿里云萬網去購買https://wanwang.aliyun.com/,我選擇的域名是uedart.com的域名;
(2)我們還需要一個服務器,我選擇的是海外云虛擬機,不需要備案可以在阿里云進行購買;
(3)都準備好之后,我們要做的是按照阿里云的步驟進行虛擬機的設置布局,下載Filezilla進行關聯,將我們axure生成的文件進行上傳,上傳之后,我們再進行域名的解析,即可通過域名對我們的網站進行外網訪問。
可以將index和start的html刪除,復制第一個頁面的html改名成index重新上傳即可
至此通過以上5個步奏,我們利用Axure完成了一個小型網站設計與制作,當然這并不是一個傳統意義上的網站開發,只是借此向大家介紹下,利用Axure的html生成,我們可以簡單的處理一個網站的制作,如果只是個人的網站,且不需要過多的復雜功能,此方法足以滿足各位的需求,大家也可以利用這樣發方式來制作自己的網站。
謝謝大家的觀看!
本文由 @時光若刻 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議
*請認真填寫需求信息,我們會在24小時內與您取得聯系。