整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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 協議
xure 原型變身 EXE 程序三步曲，簡單快捷的小竅門。
最近在研究如使用 H5 開發桌面應用，然后就在網上發現了 NW.js 這樣一個好東西，然后經過一番折騰之后，就實現了本文標題說的效果：讓 Axure 原型變身 .exe 程序，然后就可在任意的 Windows 平臺上運行了（當然還支持跨平臺，比如 Mac OS 和 Linux）。
將下載的 nwjs 的壓縮包進行解壓，解壓后的文件夾內會包含以下這些文件：
雙擊運行 nw.exe 應該會打開如下的一個窗口，說明已經 OK 了；如果不 OK 的話，可以上網搜索關于 NW.js 的相關問題及解決方法。
首先需要在生成的 HTML 文件夾下新建一個 package.json 文件，并且在文件中編輯以下內容：
{
“name”: “nw-demo”,
“main”: “index.html”
}
其中“index.html”根據你生成 HTML 文件的實際文件名來寫，另外 package.json 還可進行更多的配置來實現一些特定的效果，可上網自行搜索，在這里不做過多的說明。
然后將 HTML 文件和 package.json 文件一起打成 ZIP 壓縮包，注意打包前的文件應該是像下面這樣的目錄結構（包含 Axure 生成的 HTML 文件和 package.json 文件），直接對這些文件進行全選打包，不要對這些文件所在的文件夾進行打包。
之后再將 ZIP 壓縮包（為了便于說明，我這里用 test.zip 作為示例）的后綴名 .zip 修改成 .nw，這樣就變成了 test.nw，然后再將 test.nw 文件放到 nwjs 的目錄下，拖動 test.nw 文件到 nw.exe 上進行執行，正常來講是打開一個窗口顯示你之前做好的原型效果。
這個過程涉及到兩個步驟：
首先將之前做好的 test.nw 文件與 nw.exe 文件打包成一個 .exe 文件（比如命名為 test.exe），具體的操作是在 CMD 命令行中輸入如下命令，
copy /b E:\test\nw.exe+E:\test\test.nw E:\test\test.exe
其中的文件路徑根據實際路徑填寫，這時候會得到一個新的 test.exe 文件，此 .exe 文件在當前文件夾下是可以正常運行的，但是如果向要拷貝到其它地方去運行，則還需要第二次打包操作，也就是接下來要做的事情。
打開之前下載的 Enigma Virtual Box 程序（enigmavb.exe），界面應該是這樣的：
然后在 Enter Input File Name 處選擇上一步生成的 test.exe 文件，Enter Output Name 可以默認；
之后再點擊下面的 Add 按鈕，將 nwjs 文件夾（名稱不一定是 nwjs ，就是最開始第一步 NW.js 環境的那個文件夾）下除 nw.exe 和 test.nw 以及 test.exe 之外的所有文件加載上，然后點擊 Process ，等待執行成功即可，這時候會在相應的路徑下生成一個新的 .exe 文件（我們暫且叫做 newtest.exe），此時的 newtest.exe 文件即可在任意的 Windows 環境下運行了，你可以拷貝給你的小伙伴去 Show 一下。
順便給大家看一下我制作好的一個 .exe 程序的運行效果，可以看出來，這完全是一個 Windows 應用程序的窗口，而非瀏覽器窗口。
好了，整個過程算是完成了，總結一下就是 Axure 原型生成 HTML 文件后，借助兩個工具（NW.js 和 Enigma Virtual Box）將其打包成 .exe 文件，至于這種做法的實際意義是什么，暫且不進行討論，感興趣的小伙伴們可以去玩一下。
作者：大鵬，微信：urmagic，可一起交流原型設計等問題，歡迎騷擾。
本文由 @大鵬 原創發布于人人都是產品經理。未經許可，禁止轉載。
家好！我是一名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 協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
