整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
不久我進入一家創業型公司，我開始發現，老板不看xxx.Html 原型圖的，老板只看視頻版本的原型圖，而給開發人員的原型圖就是xxx.Html的，所以每次做原型的時候我都會做兩套。一個簡單的視頻原型展示：
下面我來介紹一下，如何在Mac上制作視頻原型圖
一、使用工具介紹
二、制作原型圖步驟&方法
三、總結
Mac系統下使用工具： Axure、 Final cut pro / iMovie、QuickTime Player
Win系統下使用工具：Axure、繪聲繪影x6、xbox
先用Axure做原型并加上事件，然后用QuickTime Player/xbox進行錄屏，錄好后將視頻分類命名整理，最后用 Final cut pro或iMovie進行制作打包即可
本篇文章主要是講如何讓原型圖動起來，所以不詳細說明原型圖怎么畫哈~
畫一個帶殼的原型圖即可，然后將其他的原型圖按照需要顯示的順序，疊加在帶殼的原型圖上。
將畫好的原型圖，設置事件
開始錄屏了，為了視頻能夠流暢，錄屏之前將原型先導出來，然后再打開index.html
打開QuickTime Player
選擇新建屏幕錄制
用數字排序后，直接導入視頻編輯軟件內方便合成視頻做排序
推薦用
打開后，一個初始畫面
點擊此按鈕將視頻導入
然后將視頻拖入視頻編輯區域，在控件區域點擊T圖標，可選擇不同的文字樣式，選擇一款拖入“視頻編輯區域即可”
文字編輯完后，是這個樣子就對了
之后可以加一些轉場，切換頁面用(最常見的漸變)
做到這個時候就差不多了
如果覺得原型圖視頻太枯燥可以加一點音樂，實在不知道加什么音樂可以去…（你的作品給誰看呢？客戶？老板？）那么你就去他們的朋友圈逛逛，有沒有分享的音樂，然后下載放入即可~(加音樂的方式與加文字的方式是一樣的)
點擊導出按鈕
導出視頻并設置參數(一般選擇720p就可以了)
恭喜你大功告成，發了郵件后就等著漲工資吧
這個技能也不是產品經理必備的，不過我倒感覺挺加分的，比如一些外包公司，需要給客戶提供一些方案，這個時候給一個能動的原型不是更有勝算嗎？也方便客戶理解，對于外行人來說，畢竟看一個原型圖是比較費腦的，如果再配上設計師的高保真的UI做這個的話，效果更贊，比如
分享作品
作者：Bass，微信號：zouwei1228
本文由 @Bass 原創發布于人人都是產品經理。未經許可，禁止轉載。
評估一位產品新人的原型時，發現對方竟然不知道Axure的很多實用技巧，導致很多效果都是用極其復雜或者笨拙的方式實現。Axure是產品經理的必備工具之一，熟練使用axure可以提高畫原型的效率。那axure的這些實用技巧，你都知道嗎？
為避免他人也有同樣的問題，對Axure常用技巧做總結如下：
（1）點擊某些按鈕，或者鼠標懸浮時，顯示某些隱藏的元件，元件被覆蓋，這是因為元件層級太低，顯示元件的用例注意勾選置于頂層（見紅框）。
（2）可以批量居中頁面，不需要每個頁面都去設置一下居中樣式。點擊Project，再點擊Page Style Editor，在彈出窗口中設置Page Align居中即可。
（3）彈窗類動態面板N多，聚在頁面中央，且一層層覆蓋在一起，想要改某個，需要挨個找。這類面板可以錯落有致的放置在主頁面右邊，在Pin to Browser設置位置居中即可。
（4）Tab切換，所有Tab設置為選項組，給每個Tab設置點擊選中事件，這樣每次只有一個可以選中，選中和懸浮的樣式可以在Interaction Styles里設置。
（5）不需要添加一橫線，通過隱藏/顯示事件，實現下圖“年費會員”的效果。每個菜單一個矩形框，隱藏左、上、右邊線，下邊線設置為白色，在Interaction Styles里設置下邊線選中或者懸浮樣式。
（6）實現點擊時顯示，再次點擊時隱藏，用Toggle即可實現。
（7）沒有鎖定背景框，移動時添亂。可以點擊工具欄Lock鎖定不需要移動的元件。
（8）可以用動態面板的Scrollbar屬性實現拖動滾動條來查看容器中的元素。
（9）頁面比較大時，將鼠標的光標放置在編輯窗口中，按住鍵盤的空格鍵，就能看到鼠標的光標會切換成手狀。然后就可以用來抓著畫面任意滑動，而且不會對任何的部件造成影響。
（10）經常會遇到幾個部件重疊的情況，如何選擇下層部件呢？可以在部件管理窗口中直接選擇想要的部件，另外可以選擇最上層的部件之后，稍等會再點擊一次，就會選中下一層的部件。若選擇再下一層的部件，做相同操作。
（11）需要在水平方向或者垂直方向上移動部件，可以按住shift鍵，拖動部件左右或者上下移動，這樣可以直接平移部件。
（12）按住Ctrl鍵，拖動部件，可以快速復制部件。按住Ctrl+shift鍵，拖動部件，就會復制了一個新的部件，并將新部件進行平移。
（13）按住Ctrl鍵之后，將鼠標放在部件的邊緣，就能夠旋轉部件了。
（14）生成HTML原型文件時，在“Logo”里可以添加logo和標題語，這樣在導出的原型中，左上角會顯示添加的logo和標題語。
（15）當幾個部件組成一塊大的元件時，可使用組合快捷鍵Ctrl+G，這樣的好處是可以很方便地移動，不需要每次都全部選中后才移動。
（16）鎖定部件快捷鍵Ctrl+K后，部件鎖定后，不能被移動和復制，可以避開不需要復制的部件，提高效率。
（17）如何實現列表整行的點擊效果呢？拖動熱點控件到列表的記錄中，覆蓋列表的一行記錄，然后設置熱點的點擊事件，就可實現整塊的點擊效果。
（18）Axure代替viso來做流程圖，它提供了畫流程圖的控件，連線選擇連接模式，選中控件，按住左鍵，拖到鼠標至下一個控件。
（19）重復比較多的地方請盡量使用母板，最好是非固定位置的母板。模板有三種類型：一種是固定位置的母版，一種是可以隨意移動位置的母版，還有一種是可以隨意移動并且母版元素可以拆解的母版。這三種可以根據需要設置，在模板右鍵鼠標—>拖放行為，進行選擇。
（20）如果是團隊協作，使用Project，會使整個項目效率顯著提高且減少出錯。
最后強調一點經常被大家忽略的問題，沒有及時為組件和動態面板命名，用時，才手忙腳亂的添加，增加了維護原型的時間成本，切記，養成隨時命名的好習慣。
Axure有些實用技巧是在使用過程中不斷摸索出來的，多畫原型，和他人多多交流，多看前輩的demo，可以在短期內提高自己。
本次總結只針對近期所見，axure還有大量的實用技巧，歡迎大家分享。
本文由 @柒柒是80后 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
輯導語：一個高顏值的原型圖，能夠在一定程度上體現出你的專業度，起到錦上添花的作用。那么，要如何畫出高顏值的原型圖呢？本文作者對此作出了分析，一起來看一下吧。
最近有朋友要轉產品，自己在學習畫原型，怎么說呢，原型畫的確實差點意思。
雖說大多數內容臨摹出來了，但是還有很多可以優化的地方，像對齊、顏色、間距就處理的不好。
那我們需不需要畫出好看的原型？
我認為有必要！
高顏值的原型圖在一定程度上會體現出你的專業度。
如果你在面試的作品集中畫出好看的原型，加分；
如果你是新入職一家公司畫出好看的原型，加分；
如果給老板、客戶展示好看的原型，加分；
但是呢，要話說在前：好看的原型圖僅是錦上添花。
原型是將需求轉化成頁面功能，最重要的能夠表達出功能邏輯，讓產品經理能夠快速傳達出自己的想法，讓團隊成員能夠認識產品需求內容。
而好看的原型是在此基礎上對原型頁面進行視覺處理，讓看原型的人能夠獲得更好的體驗，畢竟“顏值即正義”。
畫出好看的原型并不復雜，我們只需要掌握基本的UI設計原則，就能收獲好看的原型。
我找到我剛學習產品時畫的原型圖，并按照下文的規范進行了優化，大家可看下對比效果：
我們接下來說說如何快速畫出好看的原型，內容較多，建議收藏，隨手幫忙點個贊~
在原型中，我們要明顯區分出不同模塊、不同元素重要程度。這樣原型頁面才有節奏感。
當層級關系不突出，對比不明顯，會將所有的信息混雜在一起，顯得凌亂。
左側的原型層級關系太弱，沒有視覺重點，右側原型通過顏色、字體大小、使用分割線、調整間距大小等方法來達到層級劃分的效果。
總結來看就是：突出重要元素，弱化次要元素。
層級關系的劃分可以通過顏色、字號、字重、間距、分割線等方式。對應的層級關系可查看下圖：
根據內容重要程度不同，選擇不同的顏色、字號、字重、間距即可，這些內容我們下邊會詳細介紹。
對于內容關聯性，我分為2個，一個是元素的關聯性，一個是填充內容的關聯性。
一致性是指原型中的組件內容保持一致，如字體相同、間距一致、各類組件相同，彈窗按鈕位置相同等。
一致性讓原型界面非常規范，有了一致性，我們就可以直接復用各個組件，制定出組件庫，相同元素可直接復用，極大提高畫原型效率。
不要過度追求到像素級標準，不要過度添加裝飾性內容，不要過度追求動效。
首先對自己的設計要求嚴格是好事，但是我們需要明確得是原型的作用，它不是UI設計稿，它是你表達想法的可視化界面。
我不建議畫原型到像素級別，是指用字體10px還是11px，圓角用10px還是8px等等。幾個像素影響不到你的原型，摳像素是UI干的事，把摳像素的精力用在需求分析上會更有用。
另外不要過度追求裝飾性內容，一個矩形就能表達出的內容，不建議為了更好的效果而添加復雜的個性化設計，原因就是費事。
還有不要過度追求動效，添加太多的動效費時費力，投入產出低，比上邊提到的摳像素還要費事。
一定不要陷入動效的陷阱里，過度追求高大上的動效內容。原型使用基礎的頁面跳轉、隱藏/顯示、動態面板就可以了。
對于UI設計搞都有自己的設計規范，而對于原型設計，也是同樣的。
但是原型的設計規范不需要像UI設計稿那么嚴格。我們接著看看有哪些規范：
1）手機端：寬375px，首屏高667px或者812px。
推薦375×667，因為UI設計稿也按照這個尺寸進行設計的。
雖然375×812尺寸在iOS機型中占的比例較多，UI設計稿也按照這個尺寸進行設計，但是我不建議使用。
原因是在這個機型中，狀態欄變成了44px、底部又有安全區域，對我們原型設計沒有任何好處。倒不如接著使用375×667。
為啥就是375×667這個尺寸，我簡單說下，了解即可。
在開發時，使用的單位是pt，在屏幕上顯示時，使用的單位是px。
UI設計使用375×667pt進行設計，最終在導出一倍圖@1x、二倍圖@2x、三倍圖@3x的切圖，就是將pt單位×1、×2、×3得到px單位的圖片，提供給開發，用于適配不同機型。
375×667這個尺寸在iOS所有的機型中處于中間尺寸，向上向下都能很好的適配，所以就選擇了它。安卓也是按照這個尺寸進行設計。
另外按照這個尺寸設計，我們在預覽原型時，在屏幕上也能顯示出全部內容。
在文章中提到的字號、間距等大小，都是基于375×667（1倍圖）來制定的。
2）PC端：建議寬1440px，首屏高度900。
對于PC端的原型尺寸可按照寬1440px，首屏高900px進行設計即可，側邊導航欄建議200px，頂部導航欄建議60px。
3）平板：首屏768×1024px。
原型盡量使用黑白灰。在Axure的顏色色板里的黑白灰完全可以滿足原型的使用，不建議自己單獨弄一套顏色規范。
我將我常用的黑白灰顏色提取出來后，我們看下：
顏色從左到右以及變淡，在頁面中表達的層級關系也依次降低。
在頁面中層級最高、重要程度最高的，使用最左側的純黑，次重要內容使用灰色，依次遞減。
顏色的選擇也受底色的影響，上邊的例子通過白色底進行設計的，對于其它底色，我們可以在調整，選擇不同顏色進行對比突出。
對于遮罩的顏色，我們可以選擇純黑，調整為50%透明度。
有些文章說不建議使用純黑，但是我認為純黑能更好的體現出層級關系，大家可以根據自己需要來調整。
具體使用什么顏色，我們不建議嚴格按照色號，只要能夠通過顏色區分出層級即可。
除了基本的黑白灰外，我認為原型中也是可以添加顏色的，像基本的語義色。
另外像按鈕、tab頁選中狀態、復選框、單選等組件的選中狀態，也是可以添加顏色的。
但是不要使用色調較高的顏色，而是采用色調適中，不刺眼的顏色。
如果你們公司有自己的品牌色，你可以找UI要下，使用到自己的原型中。
很多文章說，原型圖中不要添加顏色，會影響到UI設計，高級的UI設計師是不會被影響的。
原型中使用1種字體就夠了，你可以使用Axure默認的Arial字體。
如果你想更好看一點，推薦使用蘋方字體，然后將蘋方字體設置為默認字體。
如果你沒有安裝蘋方字體，文末有獲取方式，安裝好字體后，重啟Axure即可，然后將蘋方字體設置為默認字體。
Axure默認字體設置方式：項目-元件樣式管理-字體-選擇蘋方。
字號是指字體大小，常用大小為20px、18px、16px、14px、12px、10px。
字重是指字體重量，就是細體、中等還是加粗，經常用的是中等與加粗，細體沒用過。
不同字號、不同字重也是用來區分不同層級關系的。
我們需要把顏色+字號+字重組合，就能得到一套完整的文字層級關系。
我建議如下：
示例如下：
不需要特意去記，在畫原型時，根據層級關系與實際效果再去調整。
行間距：在Axure9中使用不同字體、字號時，會自動調整行間距。我們可以直接按照Axure9自動的行間距大小即可。
如果你想更好看些，可以按照字號大小的1.5倍調整行間距，如正文14px字號對應行間距為21px。
當字體內容較多時，可適當調大行間距。
還有字間距，可以不用管，如果你想更好看，自己手動調整看效果即可。
一個好看的原型一定是要有間距、對齊的。
為了保證內容的可讀性，體現出留白，以及層級關系，我們在畫原型時一定要把間距和對齊同時考慮到。
1）安全間距
在畫原型前，我們先在原型兩側保留安全距離。可以選擇10px，或者20px。
移動端我一般選擇10px，可以通過拉出標尺線，或者放寬度為10px的熱區進行限制。
2）具體間距
不同模塊間的間距：推薦使用10px、20px，間距可按照10的倍數進行調整。
模塊內各種間距：我分為3個，分別是模塊內間距、子模塊間距、子模塊內元素間距。
對于模塊內的間距，建議只關注上下左右的間距。左右間距相同，上下間距相同。
移動端大小推薦10px/15px/20px，但是不需要特別標準，在滿足對齊后，間距能夠區分出每組關系即可。
PC端可選擇性放大到20px、40px。
子模塊間距：不建議摳像素，能分出層級即可。
可直接選中每個子模塊，然后水平分布/垂直分布讓保證間距相同，但需要保證間距能達到分組的效果。
如果你想摳像素，可按照5px的倍數調整。
子模塊內元素組件間距：不同元素間的間距我一般不關注，只要間距能達到分出層級的效果：相關元素靠近，不相關元素間距稍微大點。
你也可以按照5px的倍數進行調整，但是不建議這樣做，沒必要去摳像素。真要細摳的話，那你就不是畫原型了，你是在搞UI了。
在Axure9中我們可以設置【標尺·網格·輔助線】勾上顯示網格、元件對齊。
【元件對齊設置】中勾上元件對齊、邊緣對齊，垂直與水平設置為5像素。
這樣就可以顯示出間距大小，并能自動吸附對齊。
對齊是一個原型中最基本的要求，就算你的字體、間距等都不規范，但是有了對齊，原型也會看起來好看很多。
對齊分為居左對齊、垂直居中對齊、居右對齊、頂部對齊、水平居中對齊、底部對齊。
在Axure中，可直接選中要對齊的組件，點擊頂部導航欄，即可自動對齊；對齊時以第一個選中的組件為標準進行對齊。
同時在Axure9的設置中，把網格對齊、輔助線、元件對齊都勾上，這樣就可以自動對齊。
有些對齊原則可以直接參考（以下內容引用Antdesign）：
1）表單類對齊
冒號對齊（右對齊）能讓內容鎖定在一定范圍內，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。
2）文案類對齊
如果頁面的字段或段落較短、較散時，需要確定一個統一的視覺起點。
3）數字類對齊
為了快速對比數值大小，建議所有數值取相同有效位數，并且右對齊。
分布是指在垂直分布、水平分布，將組件內容按照相同間距排列。
當有相同內容≥3可考慮使用自動分布，比如多個icon排列時，可以直接使用水平分布。
使用自動分布時，建議不考慮的具體間距。
在實際畫原型時，經常會將對齊與分布一起使用。
使用分割的作用還是突出層級關系，將相同內容在視覺上分組。
分割的方法有留白分割、線性、色塊分割（也叫面性分割）。
在不同模塊間我們考慮采用色塊分割。這時需要考慮不同模塊分割大小的一致性。色塊間距可按照10的倍數進行設計進行設置。
色塊分割是指一種視覺效果，我們在畫原型時，并不是非要拖個矩形進行分割。
我們可以通過灰色底+白色底實現。通過顏色對比實現色塊分割的效果。
同一模塊內的子模塊可以考慮大間距留白，或者是分割線。使用優先級是留白分割＞分割線。畢竟畫原型時少個元素，就少些工作量。
（有分割線，放大看）
分割線粗細為1px，顏色建議使用#F2F2F2。
另外分割線樣式通欄分割線、內嵌分割線、居中分割線。我們簡單介紹下，大家了解即可，具體使用哪個對原型影響不大。
畫原型時，不建議添加陰影，太費勁。
如果你想好看，可以使用這個陰影：色號#000000，透明度20%，X：0 ，Y：1 模糊：4。
在原型中，具體用圓角還是直角對原型的沖擊不大。
如果想效果更好，可以根據圓角和直角的特性來判斷：
推薦添加圓角，像Banner、按鈕、封面、圖片、頭像等都可以適當添加圓角。
具體圓角的大小，不需要特別嚴格，選擇元件后，通過拖動小三角標即可。
也可以按照半徑5px的倍數，根據元素面積越大，圓角半徑越大進行調整。
對于icon的使用，我有以下建議：
文案在畫原型時就直接敲出來了，很多時候原型中的文案會使用到線上中，我們在畫原型時，可以直接敲出好點的文案。
具體建議如下：
畫原型時，不需要添加具體圖片，使用占位符、或者矩形圖代替即可，如果覺得表達不清楚，可以添加文字補充。
在使用占位符/矩形代替圖片時，我們可以直接調整一個差不多的尺寸，如果想更好點，可以按照一定比例調整。
常見的比例有：
不過過度追求動效。關于使用動效我有以下小建議：
看原型的使用對象是誰，選擇性的添加動效。
可以添加簡單的效果，如鏈接跳轉，隱藏/顯示,切換動態面板、垂直滾動、水平滾動。
對于頁面切換，PC端產品建議將每個頁面單獨畫出，添加鏈接跳轉到新頁面，有利于寫一體化需求文檔。
App端頁面較少時，可直接平鋪在Axure畫布中，通過箭頭表達跳轉關系。
建議動態面板僅用于交互展示，不要在動態面板的頁面中添加需求文檔說明，沒人喜歡點擊你的原型去找你的需求。
當用動態面板時，建議先把動態面板的所有頁面都畫好，然后在放入動態面板內。
動態面板中盡量別在加動態面板，修改時每個人動態面板去找很費勁。
對于動態面板中的頁面進行切換時，可選擇性添加Axure自帶的切換動畫以及動效效果。效果建議選擇“緩進緩出”。
使用隱藏顯示時：最好選中：置于頂層，避免被遮擋。可選擇性添加顯示與隱藏的動效，效果可選擇“逐漸”，時間選擇300ms
對于選擇日期、選擇日期等，如果沒有好的組件，可直接使用axure自帶的文本框，修改不同類型。
對于中繼器、函數這種高級交互，不建議在畫原型時使用。其它高級動效也不建議在畫原型中使用，當然你可以自己學著玩。
再分享一張幾年前做的會員落地頁項目的原型圖與UI圖對比照。
（最左邊是我當時領導畫的，中間的是我改的，右邊的是UI設計稿）
其它的話，就是畫原型的首要前提是需求分析完整，功能架構劃分清晰，流程確定清晰。這些我們不在這說，之后在細聊。
另外不要糾結原型工具。
原型工具有很多：Axure，sketch，摹客，墨刀、xd，即時設計、碼前、MasterGo等。另外PPT、Excel也能畫。
你工作中使用的工具、工具的版本都不是你一個人能決定的，而是看公司要求，或者是其他同事使用的什么工具。
現在主流還是Axure，Axure的使用技巧你可以看我之前的文章：
《產品必會的30個Axure使用技巧》
《產品必會的Axure使用技巧-第二彈》
《產品必會的Axure使用技巧-第三彈》
另外一點，就是使用組件庫，頁面中的組件翻來覆去就那些，每次使用時直接拖拽組件庫即可，不用每次都畫。
我建議每個要畫原型的產品，都要有自己的組件庫。我也整理了Axure組件庫，文末提供了領取方式。
還有就是了解交互組件有哪些，以及交互設計原則。
對于原型中需要使用什么樣式的交互組件，大家可以看下這篇文章《產品經理必會的30個組件（匯總）》http://www.woshipm.com/pd/5423893.html。
本文由 @王大鹿 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
