不久我進入一家創業型公司,我開始發現,老板不看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小時內與您取得聯系。