整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Axure生成的原型html如何使用和備份

          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沒有提供泳道圖的樣式。

          不過我們也可以畫出泳道圖樣式,就是使用“表格”,調整一下表格數量就可以了。

          三、快速表格

          1. 復制表格

          在之前的第一彈中說過這個,不過這次還是想再說一遍。

          在做列表需求時,經常需要畫列表,不過Axure的表格我用不慣,所以每次都直接在Excel里把列表字段寫出來。

          然后直接在復制到Axure里,就可直接把Excel表格復制過來。

          不過復制過來會有幾個問題:

          1、樣式不能復制。只有復制表格后,在手動調整樣式。

          2、合并單元格不能復制,主要是Axure不支持合并單元格。

          2. 快速調整表格行高行寬

          選中需要修改的表格,然后直接修改寬度與高度,即可批量修改選中表格的尺寸。

          如果想修改個別表格,按照ctrl鍵,再選中即可。接著修改寬度與高度,就可直接修改選中表格的尺寸了。

          四、快速重命名

          最近領導要求給原型頁面上加上編號,然后發現一個很快速的方法。

          先選中一個頁面重命名,然后在重命名狀態下,使用鍵盤上下鍵,進到下個頁面時還是重命名狀態,就可以直接重命名了。

          五、不安裝插件預覽

          在生成html文件后,點擊生成html文件夾內的start.html或者index.html查看時,會出現安裝插件的提示。

          直接安裝插件這個方法就不說了,不過有2個快速的解決方法:

          1.直接點擊要查看的單個頁面。不直接點擊start.html、index.html等入口。

          2.修改源代碼,繞過提示。

          打開start.html或index.html的代碼

          刪除下方標的代碼,然后保存,重新點擊點擊入口打開,就ok了。

          六、導入Axure

          最近安排手下的實習生去畫原型,最后需要合并在其它源文件中。

          他是直接復制粘貼過去的,頁面少這樣沒啥問題,要是頁面多了,一個個復制粘貼也挺費勁的。

          我們可以直接使用“文件”下的“從RP文件導入”

          選擇需要導入的RP源文件后,然后在勾選需要導入的頁面,一直Next就行了。

          七、替換、查找

          Axure也支持替換、查找文字,直接Ctrl+f。

          當出現字段批量替換時,就不用一個個去找了。不過在替換后,不支持撤銷,替換錯了也影響不大,再替換回來就行了。

          八、總結

          第三彈先到這,我在整理整理其它的Axure小技巧,湊夠一篇文章再分享給各位。

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

          題圖來自Unsplash,基于CC0協議

          起Axure,做產品的朋友再熟悉不過了,它是我們在日程工作中最常見的原型制作軟件之一,今天分享的文章,主要是教大家如何使用Axure打造簡單的個人網站,不會編程我們依然可以做網站。

          演示地址:https://vip.uedart.com/demo/UEDART_019/index.html

          接下去將分為幾個步驟去闡述:

          1. 這些我們必須知道的小知識

          • axure是可以生成html文件的,這為我們使用它來制作網站提供了可能性
          • axure只能搭建小型的個人網站 ,他不具備數據庫,比較適合做展示類的網站
          • 和普通網站構建一樣,我們需要購買域名和購置虛擬服務器

          2. 利用xmind思維導圖,對我們要構建的網站進行知識整理

          舉個例子,我構建的是一個小型個人展示站

          包含以下主要內容:網址導航、常用工具、實用資源、案例展示,通過思維導出對其內容進行

          整理如下圖所示:

          3. 整理好了內容所需,接下去我們進入制作部分

          因為我們是利用Axure去制作網站,在我們平時工作的流程常常是,原型-設計-前端-開發,而這里我們只需進行原型和設計,這里將不再有前后關系,為了節約時間,我們可以把Axure當做設計工具,直接進行頁面設計,里面所需的圖片素材可以用ps輔助設計。

          創建一個項目文件夾用來整理此網站涉及到的全部資源素材

          對網站全局配色、字體、樣式進行布局

          采用的是藍色調,可以看下我的主色、輔助色的配色如下

          利用母版進行top導航的設計

          導航布局如下,采用了頂部導航的方式,設置了動態面板并將此轉化成母版用于多個頁面

          設置導航頻道的點擊效果與跳轉

          如下圖所示,有懸停效果和點擊跳轉的設置

          網址導航欄目的左側菜單設置,滑塊移動位置的y坐標按具體位置設置,每個元素都要設置

          左側導航在滾動時觸發具體欄目類別,采用的是熱區范圍來觸發,當窗口滾動時觸發相應的類別選中

          利用柵格系統對網站進行布局

          布置完畢將柵格去除(紫紅色是1200px寬度的邊界)

          每個元件盡可能的規范,再進行下一步

          拿網址導航頁做示例,每個單元模塊標題,網址卡片、左側導航的排布盡可能規范統一,立馬包含了各種元素的基本規范如:字體大小、顏色、寬度、懸停交互效果點擊跳轉效果

          合理利用中繼器做頁面的數據關聯

          常用工具與實用資源頁面,采用了中繼器來制作,在中繼器的微型數據表中,插入對應字段后,關聯每項參數的內容(對元件名稱進行命名),以后增加一條數據對應改變其內容即可。

          如下圖包含了圖片,標簽,標題,詳情描述幾個內容,在中繼器中就要有相應的字段來進行控制

          4. 制作完畢,接下去要解決的是如何把生成的網站,能讓其它人進行訪問

          (1)我們需要一個域名,可以到阿里云萬網去購買https://wanwang.aliyun.com/,我選擇的域名是uedart.com的域名;

          (2)我們還需要一個服務器,我選擇的是海外云虛擬機,不需要備案可以在阿里云進行購買;

          (3)都準備好之后,我們要做的是按照阿里云的步驟進行虛擬機的設置布局,下載Filezilla進行關聯,將我們axure生成的文件進行上傳,上傳之后,我們再進行域名的解析,即可通過域名對我們的網站進行外網訪問。

          5. 可能遇到的問題,工具欄明明在生成的時候關閉了,上傳之后還是出現了

          可以將index和start的html刪除,復制第一個頁面的html改名成index重新上傳即可

          總結

          至此通過以上5個步奏,我們利用Axure完成了一個小型網站設計與制作,當然這并不是一個傳統意義上的網站開發,只是借此向大家介紹下,利用Axure的html生成,我們可以簡單的處理一個網站的制作,如果只是個人的網站,且不需要過多的復雜功能,此方法足以滿足各位的需求,大家也可以利用這樣發方式來制作自己的網站。

          謝謝大家的觀看!

          本文由 @時光若刻 原創發布于人人都是產品經理。未經許可,禁止轉載。

          題圖來自 Unsplash,基于 CC0 協議


          主站蜘蛛池模板: 国产午夜精品一区二区三区小说| 无码人妻AV免费一区二区三区| 精品一区二区三区无码视频| 亚洲综合无码一区二区痴汉 | 日韩AV在线不卡一区二区三区| 国产视频一区二区在线观看| 亚洲A∨精品一区二区三区| 国产在线观看一区二区三区精品| 国产亚洲福利精品一区| 国产91久久精品一区二区| 国产福利一区视频| 丰满人妻一区二区三区视频53| 久久久久99人妻一区二区三区 | 亚州AV综合色区无码一区| 日韩一区二区三区视频| 国产亚洲无线码一区二区| 国产精品揄拍一区二区| 人妻内射一区二区在线视频| 午夜福利av无码一区二区| 精品国产一区二区三区| 久久精品综合一区二区三区| 亚洲AV无码一区二区三区在线| 国产91精品一区| 人妻激情偷乱视频一区二区三区| 亚洲AV无码一区二区一二区| 中日韩一区二区三区| 亚洲一本一道一区二区三区| 在线视频一区二区三区三区不卡| 国产精品高清一区二区三区不卡 | 亚洲欧洲一区二区| 日本免费一区二区三区最新vr| 亚洲无线码在线一区观看| 久久精品无码一区二区三区不卡 | 日韩最新视频一区二区三| 国产成人一区二区精品非洲| 91精品国产一区二区三区左线| 精品视频在线观看一区二区三区| 亚洲一区二区三区久久久久| 国产一区二区精品尤物| 国产伦精品一区二区三区免费下载| 亚洲国产一区在线|