整合營(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)頁(yè)的知識(shí)。
請(qǐng)進(jìn)入該原型對(duì)應(yīng)的目錄，比如APP名稱V2.0版，我們會(huì)發(fā)現(xiàn)存在data、file、images、plugins、resources等文件夾，以及很多html網(wǎng)頁(yè)。請(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è)頁(yè)面，也切記生成并將所有文件上傳一遍，而不僅僅是該頁(yè)面對(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中新建的頁(yè)面來作為基礎(chǔ)的。如果你畫Axure原型的時(shí)候是以你產(chǎn)品中的頁(yè)面來進(jìn)行命名和創(chuàng)建的。那么我們可以通過搜索“頁(yè)面名稱”關(guān)鍵詞去查詢你想要查詢的頁(yè)面。
如果你使用的搜索工具支持搜索文件內(nèi)內(nèi)容，比如Windows下面的everthing，Mac自帶的spotlight。那么可以通過搜索“頁(yè)面內(nèi)文字”關(guān)鍵詞去查詢你想要查詢的相關(guān)頁(yè)面。
不過我更建議你進(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é)議
起Axure，做產(chǎn)品的朋友再熟悉不過了，它是我們?cè)谌粘坦ぷ髦凶畛Ｒ姷脑椭谱鬈浖唬裉旆窒淼奈恼拢饕墙檀蠹胰绾问褂肁xure打造簡(jiǎn)單的個(gè)人網(wǎng)站，不會(huì)編程我們依然可以做網(wǎng)站。
演示地址：https://vip.uedart.com/demo/UEDART_019/index.html
接下去將分為幾個(gè)步驟去闡述：
舉個(gè)例子，我構(gòu)建的是一個(gè)小型個(gè)人展示站
包含以下主要內(nèi)容：網(wǎng)址導(dǎo)航、常用工具、實(shí)用資源、案例展示，通過思維導(dǎo)出對(duì)其內(nèi)容進(jìn)行
整理如下圖所示：
因?yàn)槲覀兪抢肁xure去制作網(wǎng)站，在我們平時(shí)工作的流程常常是，原型-設(shè)計(jì)-前端-開發(fā)，而這里我們只需進(jìn)行原型和設(shè)計(jì)，這里將不再有前后關(guān)系，為了節(jié)約時(shí)間，我們可以把Axure當(dāng)做設(shè)計(jì)工具，直接進(jìn)行頁(yè)面設(shè)計(jì)，里面所需的圖片素材可以用ps輔助設(shè)計(jì)。
創(chuàng)建一個(gè)項(xiàng)目文件夾用來整理此網(wǎng)站涉及到的全部資源素材
采用的是藍(lán)色調(diào)，可以看下我的主色、輔助色的配色如下
導(dǎo)航布局如下，采用了頂部導(dǎo)航的方式，設(shè)置了動(dòng)態(tài)面板并將此轉(zhuǎn)化成母版用于多個(gè)頁(yè)面
如下圖所示，有懸停效果和點(diǎn)擊跳轉(zhuǎn)的設(shè)置
網(wǎng)址導(dǎo)航欄目的左側(cè)菜單設(shè)置，滑塊移動(dòng)位置的y坐標(biāo)按具體位置設(shè)置，每個(gè)元素都要設(shè)置
左側(cè)導(dǎo)航在滾動(dòng)時(shí)觸發(fā)具體欄目類別，采用的是熱區(qū)范圍來觸發(fā)，當(dāng)窗口滾動(dòng)時(shí)觸發(fā)相應(yīng)的類別選中
布置完畢將柵格去除（紫紅色是1200px寬度的邊界）
拿網(wǎng)址導(dǎo)航頁(yè)做示例，每個(gè)單元模塊標(biāo)題，網(wǎng)址卡片、左側(cè)導(dǎo)航的排布盡可能規(guī)范統(tǒng)一，立馬包含了各種元素的基本規(guī)范如：字體大小、顏色、寬度、懸停交互效果點(diǎn)擊跳轉(zhuǎn)效果
合理利用中繼器做頁(yè)面的數(shù)據(jù)關(guān)聯(lián)
常用工具與實(shí)用資源頁(yè)面，采用了中繼器來制作，在中繼器的微型數(shù)據(jù)表中，插入對(duì)應(yīng)字段后，關(guān)聯(lián)每項(xiàng)參數(shù)的內(nèi)容（對(duì)元件名稱進(jìn)行命名），以后增加一條數(shù)據(jù)對(duì)應(yīng)改變其內(nèi)容即可。
如下圖包含了圖片，標(biāo)簽，標(biāo)題，詳情描述幾個(gè)內(nèi)容，在中繼器中就要有相應(yīng)的字段來進(jìn)行控制
（1）我們需要一個(gè)域名，可以到阿里云萬網(wǎng)去購(gòu)買https://wanwang.aliyun.com/，我選擇的域名是uedart.com的域名；
（2）我們還需要一個(gè)服務(wù)器，我選擇的是海外云虛擬機(jī)，不需要備案可以在阿里云進(jìn)行購(gòu)買；
（3）都準(zhǔn)備好之后，我們要做的是按照阿里云的步驟進(jìn)行虛擬機(jī)的設(shè)置布局，下載Filezilla進(jìn)行關(guān)聯(lián)，將我們axure生成的文件進(jìn)行上傳，上傳之后，我們?cè)龠M(jìn)行域名的解析，即可通過域名對(duì)我們的網(wǎng)站進(jìn)行外網(wǎng)訪問。
可以將index和start的html刪除，復(fù)制第一個(gè)頁(yè)面的html改名成index重新上傳即可
至此通過以上5個(gè)步奏，我們利用Axure完成了一個(gè)小型網(wǎng)站設(shè)計(jì)與制作，當(dāng)然這并不是一個(gè)傳統(tǒng)意義上的網(wǎng)站開發(fā)，只是借此向大家介紹下，利用Axure的html生成，我們可以簡(jiǎn)單的處理一個(gè)網(wǎng)站的制作，如果只是個(gè)人的網(wǎng)站，且不需要過多的復(fù)雜功能，此方法足以滿足各位的需求，大家也可以利用這樣發(fā)方式來制作自己的網(wǎng)站。
謝謝大家的觀看！
本文由 @時(shí)光若刻 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議
起Axure，做產(chǎn)品的朋友再熟悉不過了，它是我們?cè)谌粘坦ぷ髦凶畛Ｒ姷脑椭谱鬈浖唬裉旆窒淼奈恼拢饕墙檀蠹胰绾问褂肁xure打造簡(jiǎn)單的個(gè)人網(wǎng)站，不會(huì)編程我們依然可以做網(wǎng)站。
接下去將分為幾個(gè)步驟去闡述：
舉個(gè)例子，我構(gòu)建的是一個(gè)小型個(gè)人展示站
包含以下主要內(nèi)容：網(wǎng)址導(dǎo)航、常用工具、實(shí)用資源、案例展示，通過思維導(dǎo)出對(duì)其內(nèi)容進(jìn)行
整理如下圖所示：
因?yàn)槲覀兪抢肁xure去制作網(wǎng)站，在我們平時(shí)工作的流程常常是，原型-設(shè)計(jì)-前端-開發(fā)，而這里我們只需進(jìn)行原型和設(shè)計(jì)，這里將不再有前后關(guān)系，為了節(jié)約時(shí)間，我們可以把Axure當(dāng)做設(shè)計(jì)工具，直接進(jìn)行頁(yè)面設(shè)計(jì)，里面所需的圖片素材可以用ps輔助設(shè)計(jì)。
創(chuàng)建一個(gè)項(xiàng)目文件夾用來整理此網(wǎng)站涉及到的全部資源素材
采用的是藍(lán)色調(diào)，可以看下我的主色、輔助色的配色如下
導(dǎo)航布局如下，采用了頂部導(dǎo)航的方式，設(shè)置了動(dòng)態(tài)面板并將此轉(zhuǎn)化成母版用于多個(gè)頁(yè)面
如下圖所示，有懸停效果和點(diǎn)擊跳轉(zhuǎn)的設(shè)置
網(wǎng)址導(dǎo)航欄目的左側(cè)菜單設(shè)置，滑塊移動(dòng)位置的y坐標(biāo)按具體位置設(shè)置，每個(gè)元素都要設(shè)置
左側(cè)導(dǎo)航在滾動(dòng)時(shí)觸發(fā)具體欄目類別，采用的是熱區(qū)范圍來觸發(fā)，當(dāng)窗口滾動(dòng)時(shí)觸發(fā)相應(yīng)的類別選中
布置完畢將柵格去除（紫紅色是1200px寬度的邊界）
拿網(wǎng)址導(dǎo)航頁(yè)做示例，每個(gè)單元模塊標(biāo)題，網(wǎng)址卡片、左側(cè)導(dǎo)航的排布盡可能規(guī)范統(tǒng)一，立馬包含了各種元素的基本規(guī)范如：字體大小、顏色、寬度、懸停交互效果點(diǎn)擊跳轉(zhuǎn)效果
合理利用中繼器做頁(yè)面的數(shù)據(jù)關(guān)聯(lián)
常用工具與實(shí)用資源頁(yè)面，采用了中繼器來制作，在中繼器的微型數(shù)據(jù)表中，插入對(duì)應(yīng)字段后，關(guān)聯(lián)每項(xiàng)參數(shù)的內(nèi)容（對(duì)元件名稱進(jìn)行命名），以后增加一條數(shù)據(jù)對(duì)應(yīng)改變其內(nèi)容即可。
如下圖包含了圖片，標(biāo)簽，標(biāo)題，詳情描述幾個(gè)內(nèi)容，在中繼器中就要有相應(yīng)的字段來進(jìn)行控制
（1）我們需要一個(gè)域名，可以到阿里云萬網(wǎng)去購(gòu)買https://wanwang.aliyun.com/，我選擇的域名是uedart.com的域名；
（2）我們還需要一個(gè)服務(wù)器，我選擇的是海外云虛擬機(jī)，不需要備案可以在阿里云進(jìn)行購(gòu)買；
（3）都準(zhǔn)備好之后，我們要做的是按照阿里云的步驟進(jìn)行虛擬機(jī)的設(shè)置布局，下載Filezilla進(jìn)行關(guān)聯(lián)，將我們axure生成的文件進(jìn)行上傳，上傳之后，我們?cè)龠M(jìn)行域名的解析，即可通過域名對(duì)我們的網(wǎng)站進(jìn)行外網(wǎng)訪問。
可以將index和start的html刪除，復(fù)制第一個(gè)頁(yè)面的html改名成index重新上傳即可，查看我制作完畢的網(wǎng)址http://uedart.com/#g=1&p=網(wǎng)址導(dǎo)航&c=1
至此通過以上5個(gè)步奏，我們利用Axure完成了一個(gè)小型網(wǎng)站設(shè)計(jì)與制作，當(dāng)然這并不是一個(gè)傳統(tǒng)意義上的網(wǎng)站開發(fā)，只是借此向大家介紹下，利用Axure的html生成，我們可以簡(jiǎn)單的處理一個(gè)網(wǎng)站的制作，如果只是個(gè)人的網(wǎng)站，且不需要過多的復(fù)雜功能，此方法足以滿足各位的需求，大家也可以利用這樣發(fā)方式來制作自己的網(wǎng)站。
謝謝大家的觀看！
本文由 @時(shí)光若刻 原創(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)系。
