整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
PM完成Axure原型評(píng)審后，一定不能忘記備份這些原型html，后續(xù)可能需要查詢以及技術(shù)撕逼。
希望通過Axure原型的幾種使用場(chǎng)景，讓初級(jí)PM對(duì)它的來龍去脈有個(gè)清晰的了解。而不是停留在“我知道”“大概會(huì)用”的水平。
PM會(huì)經(jīng)常修改AxureRP源文件，然后生成不同的原型。
但是對(duì)外評(píng)審的原型應(yīng)該是唯一的。
并且該版本的產(chǎn)品需求文檔PRD就是這個(gè)原型。
請(qǐng)注意兩者不能混為一談。
一般來說我們是在Axure生成原型Html的時(shí)候，自動(dòng)在瀏覽器中打開了原型并查看。
但是如何打開已備份在電腦中的原型呢，很多初級(jí)PM摸不著頭腦了。其實(shí)也不復(fù)雜，如果你學(xué)會(huì)一點(diǎn)html網(wǎng)頁的知識(shí)。
請(qǐng)進(jìn)入該原型對(duì)應(yīng)的目錄，比如APP名稱V2.0版，我們會(huì)發(fā)現(xiàn)存在data、file、images、plugins、resources等文件夾，以及很多html網(wǎng)頁。請(qǐng)找到start.html，然后雙擊打開就是你熟悉的原型啦。
當(dāng)原型評(píng)審后，PM需要將原型放到網(wǎng)上供所有團(tuán)隊(duì)成員進(jìn)行設(shè)計(jì)和編程。
不管是放到內(nèi)網(wǎng)展示，還是外網(wǎng)展示。其本質(zhì)都是將Axure原型的所有文件都上傳到服務(wù)器，包括所有的html文件，圖片文件，js文件，css文件。不能缺少任何文件，否則就無法正常顯示。
如果你只是修改了某個(gè)頁面，也切記生成并將所有文件上傳一遍，而不僅僅是該頁面對(duì)應(yīng)的html文件。因?yàn)槠鋵?duì)應(yīng)的js，css文件，圖片文件也可能被修改
上傳之后然后把對(duì)應(yīng)的原型網(wǎng)址發(fā)給其他團(tuán)隊(duì)成員即可查看。
由于Axure原型是由html+js+cs組成的文件，我們?cè)谏傻臅r(shí)候?qū)⑺麄兎胖迷谥付夸洝?/p>
嘉定我們將該產(chǎn)品的所有原型存放于D://PM/APP名稱，那么建議以“APP名稱V1.0版”的格式命名，并生成原型。
當(dāng)然你也可以繼續(xù)壓縮之后存起來，不過就不太方便后續(xù)的查詢。
有時(shí)候我們需要回退版本的時(shí)候，需要把舊版本的原型也拿出來。那么請(qǐng)用舊版本的原型html去替換當(dāng)下的原型目錄。
不過不太建議這樣，還不如新增一個(gè)版本來處理。
由于Axure生成的原型，是以Html文件進(jìn)行索引內(nèi)容的。而Html是以你在Axure中新建的頁面來作為基礎(chǔ)的。如果你畫Axure原型的時(shí)候是以你產(chǎn)品中的頁面來進(jìn)行命名和創(chuàng)建的。那么我們可以通過搜索“頁面名稱”關(guān)鍵詞去查詢你想要查詢的頁面。
如果你使用的搜索工具支持搜索文件內(nèi)內(nèi)容，比如Windows下面的everthing，Mac自帶的spotlight。那么可以通過搜索“頁面內(nèi)文字”關(guān)鍵詞去查詢你想要查詢的相關(guān)頁面。
不過我更建議你進(jìn)入到具體版本的原型html文件夾里面進(jìn)行搜索，而不是進(jìn)行全局搜索。
以上就是Axure原型的使用場(chǎng)景。請(qǐng)一定要理解Axure原型的本質(zhì)是html+js+css，每次生成原型的時(shí)候會(huì)在本地生成目錄并寫入這些文件。
浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號(hào)langzisay，個(gè)人微信nuanai88。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 unsplash，基于 CC0 協(xié)議
家好！我是一名UX設(shè)計(jì)師，希望可以與共同喜歡探索用戶體驗(yàn)的朋友們一起成長(zhǎng)！我會(huì)不定期地更新一些有關(guān)用戶體驗(yàn)方面的文章。本文主要分享：無需ui和前端制作個(gè)人網(wǎng)站，只需一個(gè)Axure就能搞定！
越來越多的人想要?jiǎng)?chuàng)建自己的個(gè)人網(wǎng)站，把自己平時(shí)工作的總結(jié)和收藏分享出來，整理到自己的個(gè)人網(wǎng)站中，不僅能幫助同行互相學(xué)習(xí)，更是自己能力的體現(xiàn)。我自己用axure做了一個(gè)個(gè)人網(wǎng)站，以本網(wǎng)站為例，來為大家講解如何用axure做出高保真的個(gè)人網(wǎng)站。
如果后期維護(hù)量較頻繁的，還是建議正常開發(fā)網(wǎng)站，并且需要有后臺(tái)進(jìn)行日后維護(hù)。axure制作網(wǎng)站只適合維護(hù)量較小且簡(jiǎn)單的網(wǎng)站。
在正文開始前，先給大家看一下網(wǎng)站的效果（http://uxgao.com），覺得不錯(cuò)的童鞋可以繼續(xù)往下看哦！
所謂的后臺(tái)維護(hù)指得就是需要開發(fā)一個(gè)官網(wǎng)后臺(tái)，日常通過后臺(tái)上傳新文章、新內(nèi)容等信息。axure只能做出展示效果，所以該場(chǎng)景下不適用axure制作網(wǎng)站。
首先axure制作的網(wǎng)站導(dǎo)出的html文件較大，相比正常前端開發(fā)出來的網(wǎng)站要大好多。如果網(wǎng)站整體頁面較多，或單獨(dú)某一個(gè)頁面內(nèi)容／圖片較多。網(wǎng)站加載較慢，所以該場(chǎng)景下不適合用axure制作網(wǎng)站。
現(xiàn)在大多數(shù)復(fù)雜的動(dòng)效和交互都是用h5、css3做的，過去我們可能還會(huì)看到網(wǎng)站上有flash或AE做的動(dòng)效。目前大多數(shù)都是用flash、AE做出效果后，前端轉(zhuǎn)換成代碼實(shí)現(xiàn)。從而讓網(wǎng)站瀏覽更加流暢。如果再axure里加復(fù)雜的動(dòng)效和交互，那么絕對(duì)會(huì)影響網(wǎng)站的加載速度，從而大大降低了網(wǎng)站的瀏覽效率。
本網(wǎng)站做的效果是內(nèi)容區(qū)域?qū)挾裙潭ǎ尘皩挾茸赃m應(yīng)。
（1）內(nèi)容區(qū)域?qū)挾?/strong>
考慮到主流的顯示器分辨率，我設(shè)置的內(nèi)容區(qū)域?qū)挾葹?200px。所有內(nèi)容和圖片都要放在這1200px以內(nèi)。可在頁面中拉一個(gè)參考線，拉到橫坐標(biāo)1200的位置。在做設(shè)計(jì)的時(shí)候從最左側(cè)開始就可以了，不需要給左側(cè)留出空間，下一條會(huì)講到頁面居中的方法。
（2）整體頁面居中
之所以上一條說到不給左側(cè)留空間，是因?yàn)槲覀円秧撁嬖O(shè)置成居中對(duì)齊。選擇項(xiàng)目－頁面樣式編輯，在頁面排版中選擇第二個(gè)，居中對(duì)齊。選擇這個(gè)選項(xiàng)后，在axure畫圖時(shí)頁面依然是在最左側(cè)，在瀏覽器預(yù)覽時(shí)整個(gè)頁面就會(huì)居中顯示。
（3）背景寬度自適應(yīng)
如果網(wǎng)站一個(gè)頁面的背景都是同一個(gè)顏色，那么直接在當(dāng)前頁面點(diǎn)擊一下空白處，然后選擇樣式－背景顏色，選擇自己需要的顏色。
如果一個(gè)頁面不同模塊有不同的背景色，那么我們需要用動(dòng)態(tài)面板來實(shí)現(xiàn)。首先拉一個(gè)動(dòng)態(tài)面板，高度設(shè)置到你需要的高度，寬度隨意，不過為了方便在這個(gè)模塊上加內(nèi)容，建議寬度拉倒跟網(wǎng)頁內(nèi)容寬度一樣，比如1200px。然后在樣式里設(shè)計(jì)你需要的背景顏色，然后勾選100%寬度。在瀏覽器預(yù)覽后，該模塊的背景色就是自適應(yīng)各個(gè)分辨率了。
我做的導(dǎo)航效果是固定在瀏覽器頂部，之所以要固定在瀏覽器頂部，是因?yàn)轫撁鎯?nèi)容較多時(shí)，用戶滾動(dòng)到下面后，直接就可以看到導(dǎo)航并進(jìn)行操作。
制作過程：
（1）拉一個(gè)動(dòng)態(tài)面板，導(dǎo)航的高度即為動(dòng)態(tài)面板的高度，寬度拉到1200px。（寬度一定要拉倒內(nèi)容區(qū)域的寬度，因?yàn)橐趧?dòng)態(tài)面板里面放導(dǎo)航的內(nèi)容）
（2）設(shè)置動(dòng)態(tài)面板背景顏色（即為導(dǎo)航背景顏色），勾選100%寬度。
（3）在屬性中選擇固定到瀏覽器，勾選固定到瀏覽器窗口，水平固定選擇居中，垂直固定選擇上。最下面的始終保持頂部，如果沒有其它內(nèi)容需要覆蓋在導(dǎo)航上就勾選上，我的導(dǎo)航右側(cè)有一個(gè)二維碼需要覆蓋在導(dǎo)航上，所以我的沒有勾選。（沒有勾選的要注意設(shè)計(jì)完所有頁面時(shí)，要把導(dǎo)航的動(dòng)態(tài)面板放到圖層最上層。）
導(dǎo)航文字：導(dǎo)航的文字需要放在動(dòng)態(tài)面板里，文字需要有3種狀態(tài)，當(dāng)前頁面狀態(tài)、鼠標(biāo)懸停狀態(tài)、正常狀態(tài)。
banner的圖是整個(gè)網(wǎng)站中最大的圖片，這里不建議大家直接把banner圖放到axure文件里，既不能自適應(yīng)，又影響了加載速度。
純色背景banner制作過程：
非純色背景banner制作過程：
所有可點(diǎn)擊的圖形按鈕、文字按鈕都需要有3種狀態(tài)，正常狀態(tài)、鼠標(biāo)懸停狀態(tài)、鼠標(biāo)按下狀態(tài)。
在屬性－交互樣式設(shè)置中設(shè)置鼠標(biāo)懸停和鼠標(biāo)按下的效果。
我做的二維碼效果是鼠標(biāo)懸停在導(dǎo)航右側(cè)二維碼圖標(biāo)時(shí)，由上向下推出二維碼，鼠標(biāo)離開時(shí)，由下向上收回二維碼。
制作過程：
（1）拉一個(gè)動(dòng)態(tài)面板里面放二維碼圖片，放到圖標(biāo)下面的位置上。
（2）選擇固定到瀏覽器，水平固定選擇居中（根據(jù)網(wǎng)站尺寸，調(diào)整邊距），垂直固定選擇上，勾選始終保持頂部。
（3）給導(dǎo)航動(dòng)態(tài)面板中的二維碼圖標(biāo)加兩個(gè)事件，如圖：
網(wǎng)站中有一些文章、推薦等模塊，點(diǎn)擊后跳轉(zhuǎn)的是非本網(wǎng)站中的鏈接，我們需要對(duì)可點(diǎn)擊的區(qū)域加點(diǎn)擊事件，鏈接到外部鏈接，并且在瀏覽器新窗口打開。具體操作如圖：
1. 能用文本盡量少插入圖片
比如banner上的文字，推薦里面的各種文字等，盡量不用以圖片的形式放進(jìn)來。嘗試用axure進(jìn)行排版。
2. 注意細(xì)節(jié)
既然是高保真，就不能做的像低保真那樣粗糙，整個(gè)網(wǎng)站的字體、字號(hào)、間距、顏色等細(xì)節(jié)問題。都要像ui設(shè)計(jì)一樣注重細(xì)節(jié)。
3. 交互效果統(tǒng)一
可點(diǎn)擊的區(qū)域，比如文章，鼠標(biāo)懸停的時(shí)候要有一個(gè)變化，比如外發(fā)光、描邊等效果。要遵循設(shè)計(jì)原型，給用戶每一個(gè)操作都有及時(shí)的反饋。
4. 圖片壓縮
盡量把用到的每一張圖都進(jìn)行壓縮，前提是保證圖片質(zhì)量不會(huì)被看出來降低。
5. 購買域名
這個(gè)大家可以自行選擇，去騰訊云、阿里云購買，哪個(gè)便宜買哪個(gè)。域名后綴盡量選擇常見的，比如cn、com等。前面的字母可以以自己名字開頭拼音或全拼來選擇。
這個(gè)我也不太懂，是朋友幫忙搞的，用的是github，大家可以上網(wǎng)搜一下。不用花錢買服務(wù)器，這里有一個(gè)注冊(cè)與使用的教學(xué)希望可以幫到大家，鏈接：https://blog.csdn.net/p10010/article/details/51336332
上傳完去域名后臺(tái)管理解析一下就可以嘍！
作者：高杰，微信號(hào)公眾號(hào)：UX設(shè)計(jì)師高杰，從事交互設(shè)計(jì)和用戶體驗(yàn)工作。
本文由 @高杰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Pexels，基于 CC0 協(xié)議
文將介紹如何制作Axure高保真數(shù)據(jù)可視化原型，供大家參考和學(xué)習(xí)。
高保真數(shù)據(jù)可視化原型設(shè)計(jì)，稱得上是Axure高階水平。
數(shù)據(jù)可視化在原型設(shè)計(jì)中是一個(gè)重要的分支，但是對(duì)于Axure使用者具有一定要求。清晰的數(shù)據(jù)可視化原型可以減少與需求方和研發(fā)工程師等的溝通成本，且可具象。
Axure本身具有高級(jí)交互的能力，結(jié)合數(shù)據(jù)可視化的方式，以低成本的方式，達(dá)到預(yù)期的演示的效果，本文介紹如何制作Axure高保真數(shù)據(jù)可視化原型。
在Axure操作界面中，拖入一個(gè)Inline Frame（中文：內(nèi)聯(lián)框架）。
Axure本身可生成HTML頁面，本質(zhì)上而言，只要帶有實(shí)例圖的為HTML文件，并可正常訪問即可。至于HTML是以何種方式制作生成，不做限制。
點(diǎn)擊進(jìn)入圖后，所示頁面如下圖。左側(cè)為折線圖效果對(duì)應(yīng)的代碼，右側(cè)是折線圖的效果。可以在左側(cè)修改代碼，運(yùn)行后可在右側(cè)查看修改后的效果（此處不做贅述）。
點(diǎn)擊頁面右下角的“Download”按鈕，下載折線圖的HTML頁面。
使用任意一種代碼編輯器（筆者喜歡用komodo），打開html頁面，修改html頁面代碼中自帶的api。如果發(fā)現(xiàn)運(yùn)行后html報(bào)錯(cuò)api過期時(shí)，需要自行創(chuàng)建api，將其進(jìn)行替換。
創(chuàng)建一個(gè)新的文件夾（本文命名其為：axure and excharts），文件夾的位置沒有要求。將下載的HTML頁面，放置在文件夾中。
雙擊拖入Axure操作界面的內(nèi)聯(lián)框架（Inline Frame），選擇“l(fā)ink to an external url or file”（選擇一個(gè)外部的urd或文件），輸入HTML頁面所在的位置及名稱（如本文：D:\Desktop\axure and echarts\line-simple.html），如下圖所示：
點(diǎn)擊生成html頁面按鈕：
將生成html文件的目錄，更改為上文創(chuàng)建的文件夾。如下圖：
點(diǎn)擊確認(rèn)后，“axure and echarts”文件夾中會(huì)存在axure生成的html頁面和html頁面。同時(shí)，會(huì)自動(dòng)打開一個(gè)html頁面，可查看效果，如下圖：
這樣，我們就通過一個(gè)簡(jiǎn)單的例子，在Axure中實(shí)現(xiàn)了數(shù)據(jù)可視化效果。
筆者在本文中分享的是實(shí)現(xiàn)的方法，但是實(shí)際應(yīng)用過程中，通過一款數(shù)據(jù)可視化產(chǎn)品的視角去實(shí)操，會(huì)讓你有意想不到的效果，特別是在Axure顏色、布局、交互等能力的加持下。
作者：魚日，公眾號(hào)：issnail
本文由 @魚日 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
