整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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 協議
家好！我是一名UX設計師，希望可以與共同喜歡探索用戶體驗的朋友們一起成長！我會不定期地更新一些有關用戶體驗方面的文章。本文主要分享：無需ui和前端制作個人網站，只需一個Axure就能搞定！
越來越多的人想要創建自己的個人網站，把自己平時工作的總結和收藏分享出來，整理到自己的個人網站中，不僅能幫助同行互相學習，更是自己能力的體現。我自己用axure做了一個個人網站，以本網站為例，來為大家講解如何用axure做出高保真的個人網站。
如果后期維護量較頻繁的，還是建議正常開發網站，并且需要有后臺進行日后維護。axure制作網站只適合維護量較小且簡單的網站。
在正文開始前，先給大家看一下網站的效果（http://uxgao.com），覺得不錯的童鞋可以繼續往下看哦！
所謂的后臺維護指得就是需要開發一個官網后臺，日常通過后臺上傳新文章、新內容等信息。axure只能做出展示效果，所以該場景下不適用axure制作網站。
首先axure制作的網站導出的html文件較大，相比正常前端開發出來的網站要大好多。如果網站整體頁面較多，或單獨某一個頁面內容／圖片較多。網站加載較慢，所以該場景下不適合用axure制作網站。
現在大多數復雜的動效和交互都是用h5、css3做的，過去我們可能還會看到網站上有flash或AE做的動效。目前大多數都是用flash、AE做出效果后，前端轉換成代碼實現。從而讓網站瀏覽更加流暢。如果再axure里加復雜的動效和交互，那么絕對會影響網站的加載速度，從而大大降低了網站的瀏覽效率。
本網站做的效果是內容區域寬度固定，背景寬度自適應。
（1）內容區域寬度
考慮到主流的顯示器分辨率，我設置的內容區域寬度為1200px。所有內容和圖片都要放在這1200px以內。可在頁面中拉一個參考線，拉到橫坐標1200的位置。在做設計的時候從最左側開始就可以了，不需要給左側留出空間，下一條會講到頁面居中的方法。
（2）整體頁面居中
之所以上一條說到不給左側留空間，是因為我們要把頁面設置成居中對齊。選擇項目－頁面樣式編輯，在頁面排版中選擇第二個，居中對齊。選擇這個選項后，在axure畫圖時頁面依然是在最左側，在瀏覽器預覽時整個頁面就會居中顯示。
（3）背景寬度自適應
如果網站一個頁面的背景都是同一個顏色，那么直接在當前頁面點擊一下空白處，然后選擇樣式－背景顏色，選擇自己需要的顏色。
如果一個頁面不同模塊有不同的背景色，那么我們需要用動態面板來實現。首先拉一個動態面板，高度設置到你需要的高度，寬度隨意，不過為了方便在這個模塊上加內容，建議寬度拉倒跟網頁內容寬度一樣，比如1200px。然后在樣式里設計你需要的背景顏色，然后勾選100%寬度。在瀏覽器預覽后，該模塊的背景色就是自適應各個分辨率了。
我做的導航效果是固定在瀏覽器頂部，之所以要固定在瀏覽器頂部，是因為頁面內容較多時，用戶滾動到下面后，直接就可以看到導航并進行操作。
制作過程：
（1）拉一個動態面板，導航的高度即為動態面板的高度，寬度拉到1200px。（寬度一定要拉倒內容區域的寬度，因為要在動態面板里面放導航的內容）
（2）設置動態面板背景顏色（即為導航背景顏色），勾選100%寬度。
（3）在屬性中選擇固定到瀏覽器，勾選固定到瀏覽器窗口，水平固定選擇居中，垂直固定選擇上。最下面的始終保持頂部，如果沒有其它內容需要覆蓋在導航上就勾選上，我的導航右側有一個二維碼需要覆蓋在導航上，所以我的沒有勾選。（沒有勾選的要注意設計完所有頁面時，要把導航的動態面板放到圖層最上層。）
導航文字：導航的文字需要放在動態面板里，文字需要有3種狀態，當前頁面狀態、鼠標懸停狀態、正常狀態。
banner的圖是整個網站中最大的圖片，這里不建議大家直接把banner圖放到axure文件里，既不能自適應，又影響了加載速度。
純色背景banner制作過程：
非純色背景banner制作過程：
所有可點擊的圖形按鈕、文字按鈕都需要有3種狀態，正常狀態、鼠標懸停狀態、鼠標按下狀態。
在屬性－交互樣式設置中設置鼠標懸停和鼠標按下的效果。
我做的二維碼效果是鼠標懸停在導航右側二維碼圖標時，由上向下推出二維碼，鼠標離開時，由下向上收回二維碼。
制作過程：
（1）拉一個動態面板里面放二維碼圖片，放到圖標下面的位置上。
（2）選擇固定到瀏覽器，水平固定選擇居中（根據網站尺寸，調整邊距），垂直固定選擇上，勾選始終保持頂部。
（3）給導航動態面板中的二維碼圖標加兩個事件，如圖：
網站中有一些文章、推薦等模塊，點擊后跳轉的是非本網站中的鏈接，我們需要對可點擊的區域加點擊事件，鏈接到外部鏈接，并且在瀏覽器新窗口打開。具體操作如圖：
1. 能用文本盡量少插入圖片
比如banner上的文字，推薦里面的各種文字等，盡量不用以圖片的形式放進來。嘗試用axure進行排版。
2. 注意細節
既然是高保真，就不能做的像低保真那樣粗糙，整個網站的字體、字號、間距、顏色等細節問題。都要像ui設計一樣注重細節。
3. 交互效果統一
可點擊的區域，比如文章，鼠標懸停的時候要有一個變化，比如外發光、描邊等效果。要遵循設計原型，給用戶每一個操作都有及時的反饋。
4. 圖片壓縮
盡量把用到的每一張圖都進行壓縮，前提是保證圖片質量不會被看出來降低。
5. 購買域名
這個大家可以自行選擇，去騰訊云、阿里云購買，哪個便宜買哪個。域名后綴盡量選擇常見的，比如cn、com等。前面的字母可以以自己名字開頭拼音或全拼來選擇。
這個我也不太懂，是朋友幫忙搞的，用的是github，大家可以上網搜一下。不用花錢買服務器，這里有一個注冊與使用的教學希望可以幫到大家，鏈接：https://blog.csdn.net/p10010/article/details/51336332
上傳完去域名后臺管理解析一下就可以嘍！
作者：高杰，微信號公眾號：UX設計師高杰，從事交互設計和用戶體驗工作。
本文由 @高杰 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
文將介紹如何制作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小時內與您取得聯系。
