整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好！我是一名UX設(shè)計(jì)師，希望可以與共同喜歡探索用戶體驗(yàn)的朋友們一起成長！我會不定期地更新一些有關(guān)用戶體驗(yàn)方面的文章。本文主要分享：無需ui和前端制作個人網(wǎng)站，只需一個Axure就能搞定！
越來越多的人想要創(chuàng)建自己的個人網(wǎng)站，把自己平時工作的總結(jié)和收藏分享出來，整理到自己的個人網(wǎng)站中，不僅能幫助同行互相學(xué)習(xí)，更是自己能力的體現(xiàn)。我自己用axure做了一個個人網(wǎng)站，以本網(wǎng)站為例，來為大家講解如何用axure做出高保真的個人網(wǎng)站。
如果后期維護(hù)量較頻繁的，還是建議正常開發(fā)網(wǎng)站，并且需要有后臺進(jìn)行日后維護(hù)。axure制作網(wǎng)站只適合維護(hù)量較小且簡單的網(wǎng)站。
在正文開始前，先給大家看一下網(wǎng)站的效果（http://uxgao.com），覺得不錯的童鞋可以繼續(xù)往下看哦！
所謂的后臺維護(hù)指得就是需要開發(fā)一個官網(wǎng)后臺，日常通過后臺上傳新文章、新內(nèi)容等信息。axure只能做出展示效果，所以該場景下不適用axure制作網(wǎng)站。
首先axure制作的網(wǎng)站導(dǎo)出的html文件較大，相比正常前端開發(fā)出來的網(wǎng)站要大好多。如果網(wǎng)站整體頁面較多，或單獨(dú)某一個頁面內(nèi)容／圖片較多。網(wǎng)站加載較慢，所以該場景下不適合用axure制作網(wǎng)站。
現(xiàn)在大多數(shù)復(fù)雜的動效和交互都是用h5、css3做的，過去我們可能還會看到網(wǎng)站上有flash或AE做的動效。目前大多數(shù)都是用flash、AE做出效果后，前端轉(zhuǎn)換成代碼實(shí)現(xiàn)。從而讓網(wǎng)站瀏覽更加流暢。如果再axure里加復(fù)雜的動效和交互，那么絕對會影響網(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)。可在頁面中拉一個參考線，拉到橫坐標(biāo)1200的位置。在做設(shè)計(jì)的時候從最左側(cè)開始就可以了，不需要給左側(cè)留出空間，下一條會講到頁面居中的方法。
（2）整體頁面居中
之所以上一條說到不給左側(cè)留空間，是因?yàn)槲覀円秧撁嬖O(shè)置成居中對齊。選擇項(xiàng)目－頁面樣式編輯，在頁面排版中選擇第二個，居中對齊。選擇這個選項(xiàng)后，在axure畫圖時頁面依然是在最左側(cè)，在瀏覽器預(yù)覽時整個頁面就會居中顯示。
（3）背景寬度自適應(yīng)
如果網(wǎng)站一個頁面的背景都是同一個顏色，那么直接在當(dāng)前頁面點(diǎn)擊一下空白處，然后選擇樣式－背景顏色，選擇自己需要的顏色。
如果一個頁面不同模塊有不同的背景色，那么我們需要用動態(tài)面板來實(shí)現(xiàn)。首先拉一個動態(tài)面板，高度設(shè)置到你需要的高度，寬度隨意，不過為了方便在這個模塊上加內(nèi)容，建議寬度拉倒跟網(wǎng)頁內(nèi)容寬度一樣，比如1200px。然后在樣式里設(shè)計(jì)你需要的背景顏色，然后勾選100%寬度。在瀏覽器預(yù)覽后，該模塊的背景色就是自適應(yīng)各個分辨率了。
我做的導(dǎo)航效果是固定在瀏覽器頂部，之所以要固定在瀏覽器頂部，是因?yàn)轫撁鎯?nèi)容較多時，用戶滾動到下面后，直接就可以看到導(dǎo)航并進(jìn)行操作。
制作過程：
（1）拉一個動態(tài)面板，導(dǎo)航的高度即為動態(tài)面板的高度，寬度拉到1200px。（寬度一定要拉倒內(nèi)容區(qū)域的寬度，因?yàn)橐趧討B(tài)面板里面放導(dǎo)航的內(nèi)容）
（2）設(shè)置動態(tài)面板背景顏色（即為導(dǎo)航背景顏色），勾選100%寬度。
（3）在屬性中選擇固定到瀏覽器，勾選固定到瀏覽器窗口，水平固定選擇居中，垂直固定選擇上。最下面的始終保持頂部，如果沒有其它內(nèi)容需要覆蓋在導(dǎo)航上就勾選上，我的導(dǎo)航右側(cè)有一個二維碼需要覆蓋在導(dǎo)航上，所以我的沒有勾選。（沒有勾選的要注意設(shè)計(jì)完所有頁面時，要把導(dǎo)航的動態(tài)面板放到圖層最上層。）
導(dǎo)航文字：導(dǎo)航的文字需要放在動態(tài)面板里，文字需要有3種狀態(tài)，當(dāng)前頁面狀態(tài)、鼠標(biāo)懸停狀態(tài)、正常狀態(tài)。
banner的圖是整個網(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)時，由上向下推出二維碼，鼠標(biāo)離開時，由下向上收回二維碼。
制作過程：
（1）拉一個動態(tài)面板里面放二維碼圖片，放到圖標(biāo)下面的位置上。
（2）選擇固定到瀏覽器，水平固定選擇居中（根據(jù)網(wǎng)站尺寸，調(diào)整邊距），垂直固定選擇上，勾選始終保持頂部。
（3）給導(dǎo)航動態(tài)面板中的二維碼圖標(biāo)加兩個事件，如圖：
網(wǎng)站中有一些文章、推薦等模塊，點(diǎn)擊后跳轉(zhuǎn)的是非本網(wǎng)站中的鏈接，我們需要對可點(diǎn)擊的區(qū)域加點(diǎn)擊事件，鏈接到外部鏈接，并且在瀏覽器新窗口打開。具體操作如圖：
1. 能用文本盡量少插入圖片
比如banner上的文字，推薦里面的各種文字等，盡量不用以圖片的形式放進(jìn)來。嘗試用axure進(jìn)行排版。
2. 注意細(xì)節(jié)
既然是高保真，就不能做的像低保真那樣粗糙，整個網(wǎng)站的字體、字號、間距、顏色等細(xì)節(jié)問題。都要像ui設(shè)計(jì)一樣注重細(xì)節(jié)。
3. 交互效果統(tǒng)一
可點(diǎn)擊的區(qū)域，比如文章，鼠標(biāo)懸停的時候要有一個變化，比如外發(fā)光、描邊等效果。要遵循設(shè)計(jì)原型，給用戶每一個操作都有及時的反饋。
4. 圖片壓縮
盡量把用到的每一張圖都進(jìn)行壓縮，前提是保證圖片質(zhì)量不會被看出來降低。
5. 購買域名
這個大家可以自行選擇，去騰訊云、阿里云購買，哪個便宜買哪個。域名后綴盡量選擇常見的，比如cn、com等。前面的字母可以以自己名字開頭拼音或全拼來選擇。
這個我也不太懂，是朋友幫忙搞的，用的是github，大家可以上網(wǎng)搜一下。不用花錢買服務(wù)器，這里有一個注冊與使用的教學(xué)希望可以幫到大家，鏈接：https://blog.csdn.net/p10010/article/details/51336332
上傳完去域名后臺管理解析一下就可以嘍！
作者：高杰，微信號公眾號：UX設(shè)計(jì)師高杰，從事交互設(shè)計(jì)和用戶體驗(yàn)工作。
本文由 @高杰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Pexels，基于 CC0 協(xié)議
為一個產(chǎn)品經(jīng)理，雖說會畫原型不是萬能的，但不會畫原型，是萬萬不能的。但，這篇文章不是講如何畫原型的~以某種方式更高效的打開原型，拉近與程序猿哥哥之間的距離，拒絕撕逼，用原型說話，讓溝通更簡單，更高效~
1. 這篇文章主要是講什么的？
這篇文章滿滿的技術(shù)干貨，主要分為兩個部分：第一，如何利用github上傳原型，生成鏈接；第二，如何將APP原型放進(jìn)手機(jī)，做成一個高仿原生APP？
2. Axure不是有自帶的原型生成網(wǎng)址的功能嗎(www.share.axure.com)，為什么要用github？
是，Axure是有自帶將原型發(fā)布到Axure的功能，但，根據(jù)個人經(jīng)驗(yàn)來看，其打開的速度實(shí)在太慢了，稍微沒點(diǎn)耐心的人，還以為是你原型畫的有問題呢。所以作為一個注重用戶的體驗(yàn)的產(chǎn)品汪的我們，應(yīng)該最好是能規(guī)避這種事情的發(fā)生~
github好處多多，本汪將在下面的章節(jié)中具體說明
3. 把原型放進(jìn)手機(jī)，做成一個高仿原生APP，具體是什么樣的呢？
簡單地說，就是讓桌面有應(yīng)用圖標(biāo)，點(diǎn)進(jìn)去可以有各種操作，生成這樣的一個高保真APP原型。
話不多說，先上圖（你能分辨的出此桌面哪一個APP只是個原型demo嗎？）
1、github是一個面向開源以及私有軟件項(xiàng)目的托管平臺，很多公司的技術(shù)團(tuán)隊(duì)都使用git或svn來管理代碼，產(chǎn)品汪使用github會程序猿哥哥感覺你更專業(yè)~
2、github可以隨時提交新版本以及回退到歷史版本，使原型也有版本控制，再也不擔(dān)心給錯原型,同時每一版本的原型都有記錄，方便和程序猿哥哥討（si）論（bi）需求是否滿足~
3、github是免費(fèi)的，快速的，不用你租服務(wù)器發(fā)布項(xiàng)目等等復(fù)雜操作，入門成本相對較低，并且功能基本能滿足PM的要求~
Step 1：注冊一個github的賬號
網(wǎng)址：https://github.com/
填寫個人基本信息，即可完成注冊~
Step 2：創(chuàng)建項(xiàng)目
在登錄了之后，會跳轉(zhuǎn)到如下的界面，可通過“start a project”或者右上方“+”號下面的“New repository”創(chuàng)建項(xiàng)目。
跳轉(zhuǎn)至下一頁面，填寫項(xiàng)目的名稱，注意，項(xiàng)目名稱（如下APP_Demo）一定要是英文，因?yàn)檫@個名稱就是后面生成鏈接時鏈接的名字，所以中文字符無法識別，會被統(tǒng)一成“-”
Step 3：下載安裝git客戶端
github是服務(wù)端，要想把本地項(xiàng)目代碼上傳到網(wǎng)上，還需要使用一個git客戶端。
點(diǎn)擊set up desktop下載git客戶端，然后安裝并登錄。
另外，有一個個人的小小經(jīng)驗(yàn)，在官網(wǎng)下載后的GitHubSetup.exe，由于安裝過程也是需要聯(lián)網(wǎng)的，可能會由于一些未知的原因無法安裝成功，所以我當(dāng)時是使用的朋友發(fā)給我的github離線包。
如果在安裝過程中遇到問題的朋友，可以下載離線版的github哦~
本小汪貼心給出網(wǎng)盤地址：鏈接：http://pan.baidu.com/s/1o7UzCoy 密碼：afom
Step 4：copy項(xiàng)目到本地
將剛剛在服務(wù)器端創(chuàng)建的項(xiàng)目copy到本地，這樣才能成功將本地項(xiàng)目代碼上傳到服務(wù)器。
操作如下：
這時會彈出瀏覽文件夾，也就是選擇將該項(xiàng)目復(fù)制到你本地的哪個文件夾下，我一般會有一個固定放置github項(xiàng)目的文件夾。并且系統(tǒng)會自動生成克隆的項(xiàng)目，所以我的項(xiàng)目克隆最終文件的絕對地址是D:\GitHub\APP_Demo（搞清楚克隆項(xiàng)目的本地地址非常重要，因?yàn)槲覀冃枰谙乱徊街袑⒃臀募傻皆撃夸洠?/p>
Step 5：將axure原型生成到本地目錄
Step 6：提交到服務(wù)器端
在axure原型文件生成以后，我們再回到git客戶端，會發(fā)現(xiàn)上側(cè)出現(xiàn)了“539 uncommitted changes”,表示有539個未提交的改變。這是因?yàn)槲覀儗xure原型生成到了github的本地目錄里面而產(chǎn)生的改變，git可以實(shí)時獲取到。這是我們點(diǎn)擊提交到服務(wù)器“commit to master”，并且點(diǎn)擊右上角“Sync”進(jìn)行同步
上傳成功后，系統(tǒng)會有提示，同時還會給你一個“undo”撤銷的選擇。并且在“history”里面，我們可以查看到本次提交的版本。
Step 7：生成網(wǎng)頁鏈接
右擊該項(xiàng)目，點(diǎn)擊View on GitHub ，可以看到本次版本修改的變動。
點(diǎn)擊Setting，往下滑動，直到看到“GitHub Pages”
這樣就可以得到原型的網(wǎng)址了（如上圖Your site is published at http://……..(被我馬賽克掉了~)）
這樣你就可以很順暢的瀏覽你的原型網(wǎng)站了，不用擔(dān)心像share.axure.com上面那樣卡到?jīng)]脾氣~
Step optional：版本更新
上文中也提到了，利用github來發(fā)布原型的一大好處就是可以隨時提交新版本以及回退到歷史版本，使原型也有版本控制，再也不擔(dān)心給錯原型,同時每一版本的原型都有記錄。
那么接下來我們順便來演示一下這個功能有多方便吧~
假設(shè)我們現(xiàn)在對原型做了一些修改，只需要在axure中點(diǎn)擊“在HTML中重新生成當(dāng)前頁面”即可（但注意，要保證重新生成的頁面地址沒有改動過，仍然是APP_Demo在本地磁盤所在目錄）
若是有很多頁面改動，可以直接將新版本覆蓋到老版本所在的目錄即可。
這時我們重新返回到git客戶端，可看到上方出現(xiàn)了“26 uncommitted changes”，按照同樣的老方法，將改變提交到服務(wù)器，并且點(diǎn)擊右上角“Sync”進(jìn)行同步，如下圖
再次點(diǎn)擊“View on GitHub”可以看到這次版本的改變
再打開原網(wǎng)址，發(fā)現(xiàn)之前原型所做的修改已經(jīng)更新發(fā)布，體現(xiàn)在該網(wǎng)址上面。
到此為止，一個可以與程序猿哥哥討（si）論（bi）需求，討論原型的高大上神器就完成了~
但是，如果你想要把這個原型演示給老板，客戶，以及其他任何可以展（zhuang）示（bi）的地方呢，最好還是把原型放進(jìn)手機(jī)里，做成一個好像真的APP一樣！這樣才能更好的說服老板，客戶等等~
有動畫有交互，這樣才能像真的一樣。否則就算放進(jìn)手機(jī)里了，也還是不像真的APP~
所以，課余時間比較多的孩子，可能多練習(xí)練習(xí)高保真原型的制作，雖說產(chǎn)品經(jīng)理是一個重思維的工作，但是“工欲善其事必先利其器”，有一個能夠說服人心的高保真原型，提前讓人看到成果，這可能比你苦口婆心對著程序猿說“求求程序猿哥哥幫忙做下這個需求吧，最后一個了”要來得更加有效率~
事先百度下適合各種型號的手機(jī)的原型尺寸（邏輯分辨率）是多少？
這里給出一些常見的：
也就是說，如果你有一個iphone7，375*667就可以鋪滿全屏。
但是，請注意，由于Axure導(dǎo)出的原型在iOS上處理status bar時有問題，需要在高度上減去status bar的高度20，就為375*647，所以保證原型的高寬為375和647,另外請保證你的原型圖起點(diǎn)是在其x軸，y軸都在（0,0）處，這樣才能保證原型剛好平鋪手機(jī)屏幕，否則若是起點(diǎn)不在（0,0）處，雖然原型尺寸是剛好平鋪手機(jī)屏幕，但由于起點(diǎn)（0,0）處，原型有可能就處于手機(jī)瀏覽器中央，仍然不能滿足需求。如圖在axure中設(shè)置如下
在axure中點(diǎn)擊“生成HTML”，點(diǎn)擊“移動設(shè)備”設(shè)置相關(guān)參數(shù)如圖，其中主屏圖標(biāo)也即應(yīng)用將會呈現(xiàn)在手機(jī)桌面上的樣式，IOS啟動畫面設(shè)置也即啟動應(yīng)用時的頁面。
特別注意，完成相關(guān)參數(shù)設(shè)置后，還是需要到git客戶端去commit這些changes到服務(wù)器端，才能生效
本文上部分已有大篇幅講述，本部分不再贅述
在safari中打開原型鏈接，也就是我們part 1部分做好的高保真原型鏈接。點(diǎn)擊手機(jī)下方“close”關(guān)掉導(dǎo)航，并點(diǎn)擊iPhone自帶功能“添加到主屏幕”，具體如下圖
這時，我們可以看到手機(jī)桌面已經(jīng)多個一個名叫“成長吧”的應(yīng)用，進(jìn)入原型，這時候的原型已經(jīng)適配了手機(jī)的尺寸，躺在桌面的icon，絲毫不會有人看得出這只是個原型~如下圖所示
這才是原型打開的正確方式，拒絕撕逼，用原型說話，讓溝通更簡單，更高效~
制作高保真原型，生成網(wǎng)頁鏈接，更新版本，生成手機(jī)適配原型等等，雖然看起來很酷炫很方便，但也請各位產(chǎn)品汪不可本末倒置哦，在時間充足并且個人興趣濃厚，或者在某些場合必須提前畫出高保真原型用以打動老板，打動客戶等場合才建議花時間做這些操作。重思維，多分析多觀察，不為畫原型而畫原型，原型只是溝通方式的一種，并非產(chǎn)品經(jīng)理的全部，與各位產(chǎn)品經(jīng)理共勉~
作者：Jolin，微信公眾號：iPM0223（歡迎關(guān)注），產(chǎn)品新人，武漢大學(xué)，目前任職京東大數(shù)據(jù)與人工智能部門_技術(shù)研發(fā)產(chǎn)品經(jīng)理實(shí)習(xí)生，歡迎各位批評指正~
本文由 @Jolin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
1 模擬丁香園的高保真原型
在一般的開發(fā)工作之前，我們通常會設(shè)計(jì)產(chǎn)品原型，大部分為axure繪制的線框圖作為產(chǎn)品的PRD文檔，供UI和開發(fā)進(jìn)行前期工作，但是有的時候客戶、領(lǐng)導(dǎo)想在開發(fā)之前，看到產(chǎn)品的概貌，就必須做產(chǎn)品的高保真原型進(jìn)行模擬，這時如果做出來的原型能運(yùn)行在手機(jī)端，那再好不過，如圖1(注：上圖是仿照丁香園的家庭用藥，做的一個高保真原型，算是免費(fèi)給丁香園打廣告，是不是考慮給我點(diǎn)廣告費(fèi)?哈哈)。
原型制作軟件有挺多，不過個人使用之后，最后還是依然堅(jiān)持使用Axure,優(yōu)點(diǎn)頗多，也可能是先入為主，這個教程Axure也是必須軟件之一，適配為iphone5s。
1、 首選是制作高保真原型，如圖2：
圖2 高保真的原型圖
(注：高保真原型最好不要用太多內(nèi)部框架嵌套，加載速度有點(diǎn)慢，還是用動態(tài)面板慢慢做，層級多了要有耐心)
iOS的屏幕尺寸目前是有限的幾種，原型尺寸要和其一致。比如iphone5s視網(wǎng)膜下像素為640*1136(The default full screen size of the iPhone 5 is 320 x 568 px (w x h).就是說320*568已經(jīng)可以鋪滿全屏，不過，由于Axure導(dǎo)出的原型在iOS上處理status bar時有問題，需要在高度上減去status bar的高度20，就為320*548，所以保證原型的高寬為320和548,如圖3整體高度為548px：
圖3 高寬為320*548
2、 F8進(jìn)行生成設(shè)置，設(shè)置如下圖4：
圖4 配置設(shè)置
按照上圖，設(shè)置參數(shù)(注：不過閃屏頁面一直無法出現(xiàn)，這個問題我也沒得到解決，有解決的可以回復(fù)我)
3、生成原型文件，上傳到axureshare或者放置在EasyWebSevr的根目錄下，用本機(jī)IP替代電腦名稱，獲得完整路徑。(不清楚的點(diǎn)擊上期內(nèi)容如何用EasyWebSvr搭建axure本地環(huán)境)
4、復(fù)制生成的html中原型鏈接，選擇without Sitemap,如圖5：
圖5 復(fù)制鏈接
5、在safari中粘貼鏈接，并打開，已經(jīng)可以看到和屏幕寬度的界面，并添加到主屏幕，如圖6：。
圖6 添加到主屏幕
6、可以通過桌面的快捷icon，進(jìn)入原型，這個時候已經(jīng)適配了手機(jī)，躺著桌面的icon,絲毫不會讓人看得出是原型，下圖7：
圖7 test桌面icon快捷啟動
end!
我拿公司的產(chǎn)品原型按步驟做了下，可以實(shí)現(xiàn)的喲！還把公司程序員給忽悠了一下。小編給大家把細(xì)節(jié)補(bǔ)充一下：
1. 使用axureshare比EasyWebSevr要方便
2. 在得到鏈接后，需要使用iphone手機(jī)上的safari瀏覽器
3. 一定要記住你設(shè)置的文件密碼喲！訪問鏈接時需要輸入的。
文章來源：Axure中文網(wǎng)
小編微信：chizhenwei
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
