整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好！我是一名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 協議
為一個產品經理，雖說會畫原型不是萬能的，但不會畫原型，是萬萬不能的。但，這篇文章不是講如何畫原型的~以某種方式更高效的打開原型，拉近與程序猿哥哥之間的距離，拒絕撕逼，用原型說話，讓溝通更簡單，更高效~
1. 這篇文章主要是講什么的？
這篇文章滿滿的技術干貨，主要分為兩個部分：第一，如何利用github上傳原型，生成鏈接；第二，如何將APP原型放進手機，做成一個高仿原生APP？
2. Axure不是有自帶的原型生成網址的功能嗎(www.share.axure.com)，為什么要用github？
是，Axure是有自帶將原型發布到Axure的功能，但，根據個人經驗來看，其打開的速度實在太慢了，稍微沒點耐心的人，還以為是你原型畫的有問題呢。所以作為一個注重用戶的體驗的產品汪的我們，應該最好是能規避這種事情的發生~
github好處多多，本汪將在下面的章節中具體說明
3. 把原型放進手機，做成一個高仿原生APP，具體是什么樣的呢？
簡單地說，就是讓桌面有應用圖標，點進去可以有各種操作，生成這樣的一個高保真APP原型。
話不多說，先上圖（你能分辨的出此桌面哪一個APP只是個原型demo嗎？）
1、github是一個面向開源以及私有軟件項目的托管平臺，很多公司的技術團隊都使用git或svn來管理代碼，產品汪使用github會程序猿哥哥感覺你更專業~
2、github可以隨時提交新版本以及回退到歷史版本，使原型也有版本控制，再也不擔心給錯原型,同時每一版本的原型都有記錄，方便和程序猿哥哥討（si）論（bi）需求是否滿足~
3、github是免費的，快速的，不用你租服務器發布項目等等復雜操作，入門成本相對較低，并且功能基本能滿足PM的要求~
Step 1：注冊一個github的賬號
網址：https://github.com/
填寫個人基本信息，即可完成注冊~
Step 2：創建項目
在登錄了之后，會跳轉到如下的界面，可通過“start a project”或者右上方“+”號下面的“New repository”創建項目。
跳轉至下一頁面，填寫項目的名稱，注意，項目名稱（如下APP_Demo）一定要是英文，因為這個名稱就是后面生成鏈接時鏈接的名字，所以中文字符無法識別，會被統一成“-”
Step 3：下載安裝git客戶端
github是服務端，要想把本地項目代碼上傳到網上，還需要使用一個git客戶端。
點擊set up desktop下載git客戶端，然后安裝并登錄。
另外，有一個個人的小小經驗，在官網下載后的GitHubSetup.exe，由于安裝過程也是需要聯網的，可能會由于一些未知的原因無法安裝成功，所以我當時是使用的朋友發給我的github離線包。
如果在安裝過程中遇到問題的朋友，可以下載離線版的github哦~
本小汪貼心給出網盤地址：鏈接：http://pan.baidu.com/s/1o7UzCoy 密碼：afom
Step 4：copy項目到本地
將剛剛在服務器端創建的項目copy到本地，這樣才能成功將本地項目代碼上傳到服務器。
操作如下：
這時會彈出瀏覽文件夾，也就是選擇將該項目復制到你本地的哪個文件夾下，我一般會有一個固定放置github項目的文件夾。并且系統會自動生成克隆的項目，所以我的項目克隆最終文件的絕對地址是D:\GitHub\APP_Demo（搞清楚克隆項目的本地地址非常重要，因為我們需要在下一步中將原型文件生成到該目錄）
Step 5：將axure原型生成到本地目錄
Step 6：提交到服務器端
在axure原型文件生成以后，我們再回到git客戶端，會發現上側出現了“539 uncommitted changes”,表示有539個未提交的改變。這是因為我們將axure原型生成到了github的本地目錄里面而產生的改變，git可以實時獲取到。這是我們點擊提交到服務器“commit to master”，并且點擊右上角“Sync”進行同步
上傳成功后，系統會有提示，同時還會給你一個“undo”撤銷的選擇。并且在“history”里面，我們可以查看到本次提交的版本。
Step 7：生成網頁鏈接
右擊該項目，點擊View on GitHub ，可以看到本次版本修改的變動。
點擊Setting，往下滑動，直到看到“GitHub Pages”
這樣就可以得到原型的網址了（如上圖Your site is published at http://……..(被我馬賽克掉了~)）
這樣你就可以很順暢的瀏覽你的原型網站了，不用擔心像share.axure.com上面那樣卡到沒脾氣~
Step optional：版本更新
上文中也提到了，利用github來發布原型的一大好處就是可以隨時提交新版本以及回退到歷史版本，使原型也有版本控制，再也不擔心給錯原型,同時每一版本的原型都有記錄。
那么接下來我們順便來演示一下這個功能有多方便吧~
假設我們現在對原型做了一些修改，只需要在axure中點擊“在HTML中重新生成當前頁面”即可（但注意，要保證重新生成的頁面地址沒有改動過，仍然是APP_Demo在本地磁盤所在目錄）
若是有很多頁面改動，可以直接將新版本覆蓋到老版本所在的目錄即可。
這時我們重新返回到git客戶端，可看到上方出現了“26 uncommitted changes”，按照同樣的老方法，將改變提交到服務器，并且點擊右上角“Sync”進行同步，如下圖
再次點擊“View on GitHub”可以看到這次版本的改變
再打開原網址，發現之前原型所做的修改已經更新發布，體現在該網址上面。
到此為止，一個可以與程序猿哥哥討（si）論（bi）需求，討論原型的高大上神器就完成了~
但是，如果你想要把這個原型演示給老板，客戶，以及其他任何可以展（zhuang）示（bi）的地方呢，最好還是把原型放進手機里，做成一個好像真的APP一樣！這樣才能更好的說服老板，客戶等等~
有動畫有交互，這樣才能像真的一樣。否則就算放進手機里了，也還是不像真的APP~
所以，課余時間比較多的孩子，可能多練習練習高保真原型的制作，雖說產品經理是一個重思維的工作，但是“工欲善其事必先利其器”，有一個能夠說服人心的高保真原型，提前讓人看到成果，這可能比你苦口婆心對著程序猿說“求求程序猿哥哥幫忙做下這個需求吧，最后一個了”要來得更加有效率~
事先百度下適合各種型號的手機的原型尺寸（邏輯分辨率）是多少？
這里給出一些常見的：
也就是說，如果你有一個iphone7，375*667就可以鋪滿全屏。
但是，請注意，由于Axure導出的原型在iOS上處理status bar時有問題，需要在高度上減去status bar的高度20，就為375*647，所以保證原型的高寬為375和647,另外請保證你的原型圖起點是在其x軸，y軸都在（0,0）處，這樣才能保證原型剛好平鋪手機屏幕，否則若是起點不在（0,0）處，雖然原型尺寸是剛好平鋪手機屏幕，但由于起點（0,0）處，原型有可能就處于手機瀏覽器中央，仍然不能滿足需求。如圖在axure中設置如下
在axure中點擊“生成HTML”，點擊“移動設備”設置相關參數如圖，其中主屏圖標也即應用將會呈現在手機桌面上的樣式，IOS啟動畫面設置也即啟動應用時的頁面。
特別注意，完成相關參數設置后，還是需要到git客戶端去commit這些changes到服務器端，才能生效
本文上部分已有大篇幅講述，本部分不再贅述
在safari中打開原型鏈接，也就是我們part 1部分做好的高保真原型鏈接。點擊手機下方“close”關掉導航，并點擊iPhone自帶功能“添加到主屏幕”，具體如下圖
這時，我們可以看到手機桌面已經多個一個名叫“成長吧”的應用，進入原型，這時候的原型已經適配了手機的尺寸，躺在桌面的icon，絲毫不會有人看得出這只是個原型~如下圖所示
這才是原型打開的正確方式，拒絕撕逼，用原型說話，讓溝通更簡單，更高效~
制作高保真原型，生成網頁鏈接，更新版本，生成手機適配原型等等，雖然看起來很酷炫很方便，但也請各位產品汪不可本末倒置哦，在時間充足并且個人興趣濃厚，或者在某些場合必須提前畫出高保真原型用以打動老板，打動客戶等場合才建議花時間做這些操作。重思維，多分析多觀察，不為畫原型而畫原型，原型只是溝通方式的一種，并非產品經理的全部，與各位產品經理共勉~
作者：Jolin，微信公眾號：iPM0223（歡迎關注），產品新人，武漢大學，目前任職京東大數據與人工智能部門_技術研發產品經理實習生，歡迎各位批評指正~
本文由 @Jolin 原創發布于人人都是產品經理。未經許可，禁止轉載。
1 模擬丁香園的高保真原型
在一般的開發工作之前，我們通常會設計產品原型，大部分為axure繪制的線框圖作為產品的PRD文檔，供UI和開發進行前期工作，但是有的時候客戶、領導想在開發之前，看到產品的概貌，就必須做產品的高保真原型進行模擬，這時如果做出來的原型能運行在手機端，那再好不過，如圖1(注：上圖是仿照丁香園的家庭用藥，做的一個高保真原型，算是免費給丁香園打廣告，是不是考慮給我點廣告費?哈哈)。
原型制作軟件有挺多，不過個人使用之后，最后還是依然堅持使用Axure,優點頗多，也可能是先入為主，這個教程Axure也是必須軟件之一，適配為iphone5s。
1、 首選是制作高保真原型，如圖2：
圖2 高保真的原型圖
(注：高保真原型最好不要用太多內部框架嵌套，加載速度有點慢，還是用動態面板慢慢做，層級多了要有耐心)
iOS的屏幕尺寸目前是有限的幾種，原型尺寸要和其一致。比如iphone5s視網膜下像素為640*1136(The default full screen size of the iPhone 5 is 320 x 568 px (w x h).就是說320*568已經可以鋪滿全屏，不過，由于Axure導出的原型在iOS上處理status bar時有問題，需要在高度上減去status bar的高度20，就為320*548，所以保證原型的高寬為320和548,如圖3整體高度為548px：
圖3 高寬為320*548
2、 F8進行生成設置，設置如下圖4：
圖4 配置設置
按照上圖，設置參數(注：不過閃屏頁面一直無法出現，這個問題我也沒得到解決，有解決的可以回復我)
3、生成原型文件，上傳到axureshare或者放置在EasyWebSevr的根目錄下，用本機IP替代電腦名稱，獲得完整路徑。(不清楚的點擊上期內容如何用EasyWebSvr搭建axure本地環境)
4、復制生成的html中原型鏈接，選擇without Sitemap,如圖5：
圖5 復制鏈接
5、在safari中粘貼鏈接，并打開，已經可以看到和屏幕寬度的界面，并添加到主屏幕，如圖6：。
圖6 添加到主屏幕
6、可以通過桌面的快捷icon，進入原型，這個時候已經適配了手機，躺著桌面的icon,絲毫不會讓人看得出是原型，下圖7：
圖7 test桌面icon快捷啟動
end!
我拿公司的產品原型按步驟做了下，可以實現的喲！還把公司程序員給忽悠了一下。小編給大家把細節補充一下：
1. 使用axureshare比EasyWebSevr要方便
2. 在得到鏈接后，需要使用iphone手機上的safari瀏覽器
3. 一定要記住你設置的文件密碼喲！訪問鏈接時需要輸入的。
文章來源：Axure中文網
小編微信：chizhenwei
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
