整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Axure炫技:如何讓你的原型圖動起來

          不久我進入一家創業型公司,我開始發現,老板不看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進行制作打包即可

          二、制作原型圖步驟&方法

          2.1 第一步,設計草圖

          本篇文章主要是講如何讓原型圖動起來,所以不詳細說明原型圖怎么畫哈~

          畫一個帶殼的原型圖即可,然后將其他的原型圖按照需要顯示的順序,疊加在帶殼的原型圖上。

          2.2 第二步,設置事件

          將畫好的原型圖,設置事件

          2.3 第三步,視頻錄制

          開始錄屏了,為了視頻能夠流暢,錄屏之前將原型先導出來,然后再打開index.html

          打開QuickTime Player

          選擇新建屏幕錄制

          2.4 第四步,排序整理文件

          用數字排序后,直接導入視頻編輯軟件內方便合成視頻做排序

          2.5 第五步,加入交互、文字說明

          推薦用

          打開后,一個初始畫面

          點擊此按鈕將視頻導入

          然后將視頻拖入視頻編輯區域,在控件區域點擊T圖標,可選擇不同的文字樣式,選擇一款拖入“視頻編輯區域即可”

          文字編輯完后,是這個樣子就對了

          之后可以加一些轉場,切換頁面用(最常見的漸變)

          做到這個時候就差不多了

          2.6 第六步,附加音樂

          如果覺得原型圖視頻太枯燥可以加一點音樂,實在不知道加什么音樂可以去…(你的作品給誰看呢?客戶?老板?)那么你就去他們的朋友圈逛逛,有沒有分享的音樂,然后下載放入即可~(加音樂的方式與加文字的方式是一樣的)

          2.7 第七步,導出視頻

          點擊導出按鈕

          導出視頻并設置參數(一般選擇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設計原則,就能收獲好看的原型。

          我找到我剛學習產品時畫的原型圖,并按照下文的規范進行了優化,大家可看下對比效果:

          我們接下來說說如何快速畫出好看的原型,內容較多,建議收藏,隨手幫忙點個贊~

          01 原型圖要保證的原則

          1. 層級關系

          在原型中,我們要明顯區分出不同模塊、不同元素重要程度。這樣原型頁面才有節奏感。

          當層級關系不突出,對比不明顯,會將所有的信息混雜在一起,顯得凌亂。

          左側的原型層級關系太弱,沒有視覺重點,右側原型通過顏色、字體大小、使用分割線、調整間距大小等方法來達到層級劃分的效果。

          總結來看就是:突出重要元素,弱化次要元素。

          層級關系的劃分可以通過顏色、字號、字重、間距、分割線等方式。對應的層級關系可查看下圖:

          根據內容重要程度不同,選擇不同的顏色、字號、字重、間距即可,這些內容我們下邊會詳細介紹。

          2. 內容關聯性

          對于內容關聯性,我分為2個,一個是元素的關聯性,一個是填充內容的關聯性。

          1. 元素的關聯性:元素是指原型中的組件元素是指對界面元素內容進行分組,從視覺上將關聯內容合并在一組中,其最終目的也是為了劃分層級關系。
          2. 填充內容的關聯性:比如將文案按照真實內容進行填充;這個并不是必須要做的,你也可以直接用文字直接說明內容是什么。

          3. 設計一致性

          一致性是指原型中的組件內容保持一致,如字體相同、間距一致、各類組件相同,彈窗按鈕位置相同等。

          一致性讓原型界面非常規范,有了一致性,我們就可以直接復用各個組件,制定出組件庫,相同元素可直接復用,極大提高畫原型效率。

          4. 不要過度

          不要過度追求到像素級標準,不要過度添加裝飾性內容,不要過度追求動效。

          首先對自己的設計要求嚴格是好事,但是我們需要明確得是原型的作用,它不是UI設計稿,它是你表達想法的可視化界面。

          我不建議畫原型到像素級別,是指用字體10px還是11px,圓角用10px還是8px等等。幾個像素影響不到你的原型,摳像素是UI干的事,把摳像素的精力用在需求分析上會更有用。

          另外不要過度追求裝飾性內容,一個矩形就能表達出的內容,不建議為了更好的效果而添加復雜的個性化設計,原因就是費事。

          還有不要過度追求動效,添加太多的動效費時費力,投入產出低,比上邊提到的摳像素還要費事。

          一定不要陷入動效的陷阱里,過度追求高大上的動效內容。原型使用基礎的頁面跳轉、隱藏/顯示、動態面板就可以了。

          02 掌握基本的設計規范

          對于UI設計搞都有自己的設計規范,而對于原型設計,也是同樣的。

          但是原型的設計規范不需要像UI設計稿那么嚴格。我們接著看看有哪些規范:

          1. 尺寸

          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。

          2. 顏色

          原型盡量使用黑白灰。在Axure的顏色色板里的黑白灰完全可以滿足原型的使用,不建議自己單獨弄一套顏色規范。

          我將我常用的黑白灰顏色提取出來后,我們看下:

          顏色從左到右以及變淡,在頁面中表達的層級關系也依次降低。

          在頁面中層級最高、重要程度最高的,使用最左側的純黑,次重要內容使用灰色,依次遞減。

          顏色的選擇也受底色的影響,上邊的例子通過白色底進行設計的,對于其它底色,我們可以在調整,選擇不同顏色進行對比突出。

          對于遮罩的顏色,我們可以選擇純黑,調整為50%透明度。

          有些文章說不建議使用純黑,但是我認為純黑能更好的體現出層級關系,大家可以根據自己需要來調整。

          具體使用什么顏色,我們不建議嚴格按照色號,只要能夠通過顏色區分出層級即可。

          除了基本的黑白灰外,我認為原型中也是可以添加顏色的,像基本的語義色。

          另外像按鈕、tab頁選中狀態、復選框、單選等組件的選中狀態,也是可以添加顏色的。

          但是不要使用色調較高的顏色,而是采用色調適中,不刺眼的顏色。

          如果你們公司有自己的品牌色,你可以找UI要下,使用到自己的原型中。

          很多文章說,原型圖中不要添加顏色,會影響到UI設計,高級的UI設計師是不會被影響的。

          3. 字體、字號、字重、行間距

          原型中使用1種字體就夠了,你可以使用Axure默認的Arial字體。

          如果你想更好看一點,推薦使用蘋方字體,然后將蘋方字體設置為默認字體。

          如果你沒有安裝蘋方字體,文末有獲取方式,安裝好字體后,重啟Axure即可,然后將蘋方字體設置為默認字體。

          Axure默認字體設置方式:項目-元件樣式管理-字體-選擇蘋方。

          字號是指字體大小,常用大小為20px、18px、16px、14px、12px、10px。

          字重是指字體重量,就是細體、中等還是加粗,經常用的是中等與加粗,細體沒用過。

          不同字號、不同字重也是用來區分不同層級關系的。

          我們需要把顏色+字號+字重組合,就能得到一套完整的文字層級關系。

          我建議如下:

          • 一級標題:20px、加粗,顏色#000000
          • 主標題:18px、選擇性加粗,顏色#000000
          • 次標題:16px、選擇性加粗,顏色#000000
          • 小標題:14px、選擇性加粗,顏色#000000
          • 正文:14px、選擇性加粗,顏色#000000/#333333
          • 輔助文字:14px/12px,不加粗,顏色#333333/#555555
          • 次級文字:12px/10px,不加粗,顏色#555555/#7F7F7F

          示例如下:

          不需要特意去記,在畫原型時,根據層級關系與實際效果再去調整。

          行間距:在Axure9中使用不同字體、字號時,會自動調整行間距。我們可以直接按照Axure9自動的行間距大小即可。

          如果你想更好看些,可以按照字號大小的1.5倍調整行間距,如正文14px字號對應行間距為21px。

          當字體內容較多時,可適當調大行間距。

          還有字間距,可以不用管,如果你想更好看,自己手動調整看效果即可。

          3. 間距、對齊、分割、分布

          一個好看的原型一定是要有間距、對齊的。

          為了保證內容的可讀性,體現出留白,以及層級關系,我們在畫原型時一定要把間距和對齊同時考慮到。

          1)安全間距

          在畫原型前,我們先在原型兩側保留安全距離。可以選擇10px,或者20px。

          移動端我一般選擇10px,可以通過拉出標尺線,或者放寬度為10px的熱區進行限制。

          2)具體間距

          不同模塊間的間距:推薦使用10px、20px,間距可按照10的倍數進行調整。

          模塊內各種間距:我分為3個,分別是模塊內間距、子模塊間距、子模塊內元素間距。

          對于模塊內的間距,建議只關注上下左右的間距。左右間距相同,上下間距相同。

          移動端大小推薦10px/15px/20px,但是不需要特別標準,在滿足對齊后,間距能夠區分出每組關系即可。

          PC端可選擇性放大到20px、40px。

          子模塊間距:不建議摳像素,能分出層級即可。

          可直接選中每個子模塊,然后水平分布/垂直分布讓保證間距相同,但需要保證間距能達到分組的效果。

          如果你想摳像素,可按照5px的倍數調整。

          子模塊內元素組件間距:不同元素間的間距我一般不關注,只要間距能達到分出層級的效果:相關元素靠近,不相關元素間距稍微大點。

          你也可以按照5px的倍數進行調整,但是不建議這樣做,沒必要去摳像素。真要細摳的話,那你就不是畫原型了,你是在搞UI了。

          在Axure9中我們可以設置【標尺·網格·輔助線】勾上顯示網格、元件對齊。

          【元件對齊設置】中勾上元件對齊、邊緣對齊,垂直與水平設置為5像素。

          這樣就可以顯示出間距大小,并能自動吸附對齊。

          5. 對齊

          對齊是一個原型中最基本的要求,就算你的字體、間距等都不規范,但是有了對齊,原型也會看起來好看很多。

          對齊分為居左對齊、垂直居中對齊、居右對齊、頂部對齊、水平居中對齊、底部對齊。

          在Axure中,可直接選中要對齊的組件,點擊頂部導航欄,即可自動對齊;對齊時以第一個選中的組件為標準進行對齊。

          同時在Axure9的設置中,把網格對齊、輔助線、元件對齊都勾上,這樣就可以自動對齊。

          有些對齊原則可以直接參考(以下內容引用Antdesign):

          1)表單類對齊

          冒號對齊(右對齊)能讓內容鎖定在一定范圍內,讓用戶眼球順著冒號的視覺流,就能找到所有填寫項,從而提高填寫效率。

          2)文案類對齊

          如果頁面的字段或段落較短、較散時,需要確定一個統一的視覺起點。

          3)數字類對齊

          為了快速對比數值大小,建議所有數值取相同有效位數,并且右對齊。

          6. 分布

          分布是指在垂直分布、水平分布,將組件內容按照相同間距排列。

          當有相同內容≥3可考慮使用自動分布,比如多個icon排列時,可以直接使用水平分布。

          使用自動分布時,建議不考慮的具體間距。

          在實際畫原型時,經常會將對齊與分布一起使用。

          7. 分割方式

          使用分割的作用還是突出層級關系,將相同內容在視覺上分組。

          分割的方法有留白分割、線性、色塊分割(也叫面性分割)。

          • 留白分割:就是我們上邊提到的“間距”,相同組的內容減少間距,不同組的內容拉大間距。
          • 分割線:使用水平線、或者垂直線進行分割,可用于模塊分割、子模塊分割。
          • 色塊分割(面性分割):可以理解為粗的分割線。常可用于分割不同模塊。

          在不同模塊間我們考慮采用色塊分割。這時需要考慮不同模塊分割大小的一致性。色塊間距可按照10的倍數進行設計進行設置。

          色塊分割是指一種視覺效果,我們在畫原型時,并不是非要拖個矩形進行分割。

          我們可以通過灰色底+白色底實現。通過顏色對比實現色塊分割的效果。

          同一模塊內的子模塊可以考慮大間距留白,或者是分割線。使用優先級是留白分割>分割線。畢竟畫原型時少個元素,就少些工作量。

          (有分割線,放大看)

          分割線粗細為1px,顏色建議使用#F2F2F2。

          另外分割線樣式通欄分割線、內嵌分割線、居中分割線。我們簡單介紹下,大家了解即可,具體使用哪個對原型影響不大。

          • 通欄分割線:也叫全出血分割線,用于分隔完全獨立的模塊。
          • 內嵌分割線:當在同一模塊內的有重復的子模塊內容,如圖文列表,或者是聯系人列表時,使用內嵌分割線,分割線從文字部分開始進行對齊。
          • 居中分割線:分隔線在頁面內居中對齊。

          8. 陰影

          畫原型時,不建議添加陰影,太費勁。

          如果你想好看,可以使用這個陰影:色號#000000,透明度20%,X:0 ,Y:1 模糊:4。

          9. 圓角

          在原型中,具體用圓角還是直角對原型的沖擊不大。

          如果想效果更好,可以根據圓角和直角的特性來判斷:

          • 圓角:柔和、友好、識別度高,設計感強,活潑調性
          • 直角:正式、嚴肅、專業性強、沖突性強,冷系調性

          推薦添加圓角,像Banner、按鈕、封面、圖片、頭像等都可以適當添加圓角。

          具體圓角的大小,不需要特別嚴格,選擇元件后,通過拖動小三角標即可。

          也可以按照半徑5px的倍數,根據元素面積越大,圓角半徑越大進行調整。

          10. 圖標

          對于icon的使用,我有以下建議:

          • 剛開始畫原型時,先不使用icon,使用文字、占位符或者圓形代替,最終原型確定后再替換icon。
          • icon要表意清晰明確,好理解。
          • 使用多個icon時,盡量選擇風格一致的icon,如果使用線性圖標,就全部使用線性圖標。推薦使用iconfont網站、iconpark網站,iconpark可以調整icon的線段粗細、風格、顏色,但是圖標種類有限。iconfont更豐富,也支持按照不同風格篩選。
          • 使用svg矢量圖,別讓icon失真。在iconfont或者iconpark中復制svg代碼,粘貼到Axure中,然后變換圖片為SVG形狀。這樣就可以修改icon顏色、調整大小也不會失真。
          • 使用icon調整大小時同比例縮放擴大,別讓iocn變形。

          11. 文案

          文案在畫原型時就直接敲出來了,很多時候原型中的文案會使用到線上中,我們在畫原型時,可以直接敲出好點的文案。

          具體建議如下:

          • 填充的文案內容盡量貼合實際場景,并考慮使用實際內容填寫文案。對于日期時間、數字我們可以隨便敲出來,但是可別寫出“2月31日”、“17點知道77分88秒”。
          • 提示文案要簡潔精煉,字數不宜太多。
          • 語法使用動詞+名詞,如“添加用戶”“編輯信息”,且語序要保持一致,而不是“添加用戶”“信息編輯”。
          • 數字使用阿拉伯數字,如“3天后開啟活動”。而不是“三天后開啟活動”。
          • 別采用負面詞語,像“你沒資格參與活動”,改為“簽到完成后即可參與活動,立即簽到”。
          • 文案內容傳達積極的暗示,如“剩余70%未學”修改為“已學完30%”。
          • 當出現報錯提示時,要讓用戶知道為什么錯、如何解決。別彈出個“error ”。
          • 使用專業名詞要確定名詞的準確性,另外也要考慮到名詞的大小寫規范,是iOS,而不是ios。
          • 別有錯別字,如“登錄”,不是“登陸”;“請稍后重試”而不是“請稍侯重試”;“請稍侯,馬上回來”而不是“請稍后,馬上回來”。
          • 提示內容句尾別加標點,“今日預約已滿,可預約明天”而不是“今日預約已滿,可預約明天。”,但是可以加表達委婉的符號,比如“~”。
          • 第二人稱可以使用“你”,而不是“您”。
          • 文案語氣可以根據場景、人群、產品調性選擇不同的語氣,如果是年輕化的產品,可以使用活潑的語氣;如果你老年人產品,語氣就正式嚴肅。

          12. 圖片

          畫原型時,不需要添加具體圖片,使用占位符、或者矩形圖代替即可,如果覺得表達不清楚,可以添加文字補充。

          在使用占位符/矩形代替圖片時,我們可以直接調整一個差不多的尺寸,如果想更好點,可以按照一定比例調整。

          常見的比例有:

          • 16:9,常使用于視頻封面、照片封面。
          • 3:2或4:3,常用與圖片封面,圖文列表封面、banner等。畫原型時建議使用3:2,在相同寬度下,比4:3的高度更小,能留更多面積讓我們畫原型。
          • 1:1,常用于用戶頭像、商品主圖等。

          13. 動效

          不過過度追求動效。關于使用動效我有以下小建議:

          看原型的使用對象是誰,選擇性的添加動效。

          可以添加簡單的效果,如鏈接跳轉,隱藏/顯示,切換動態面板、垂直滾動、水平滾動。

          對于頁面切換,PC端產品建議將每個頁面單獨畫出,添加鏈接跳轉到新頁面,有利于寫一體化需求文檔。

          App端頁面較少時,可直接平鋪在Axure畫布中,通過箭頭表達跳轉關系。

          建議動態面板僅用于交互展示,不要在動態面板的頁面中添加需求文檔說明,沒人喜歡點擊你的原型去找你的需求。

          當用動態面板時,建議先把動態面板的所有頁面都畫好,然后在放入動態面板內。

          動態面板中盡量別在加動態面板,修改時每個人動態面板去找很費勁。

          對于動態面板中的頁面進行切換時,可選擇性添加Axure自帶的切換動畫以及動效效果。效果建議選擇“緩進緩出”。

          使用隱藏顯示時:最好選中:置于頂層,避免被遮擋。可選擇性添加顯示與隱藏的動效,效果可選擇“逐漸”,時間選擇300ms

          對于選擇日期、選擇日期等,如果沒有好的組件,可直接使用axure自帶的文本框,修改不同類型。

          對于中繼器、函數這種高級交互,不建議在畫原型時使用。其它高級動效也不建議在畫原型中使用,當然你可以自己學著玩。

          03 總結

          再分享一張幾年前做的會員落地頁項目的原型圖與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 協議


          主站蜘蛛池模板: 亚洲欧美国产国产综合一区| 熟妇人妻AV无码一区二区三区| 精品福利一区二区三区| 国产亚洲情侣一区二区无| 国产精品无码一区二区三区不卡| 日韩高清国产一区在线| 免费萌白酱国产一区二区三区| 精品免费国产一区二区三区| 亚洲蜜芽在线精品一区| 久久久久人妻精品一区二区三区| 国产av福利一区二区三巨| 免费一区二区视频| 国产人妖视频一区二区破除| 无码少妇A片一区二区三区| 国产福利一区二区三区| 奇米精品视频一区二区三区| 久久久精品人妻一区二区三区 | 久久se精品一区二区影院| 亚洲.国产.欧美一区二区三区| 人妻体内射精一区二区三区| 亚洲国产精品自在线一区二区| 国产免费无码一区二区 | 中文字幕日韩丝袜一区| 国产激情无码一区二区| 久久婷婷久久一区二区三区| 国产精品无圣光一区二区| 久久99热狠狠色精品一区| 久久精品国产亚洲一区二区| 久久亚洲综合色一区二区三区| 国产激情无码一区二区app| 日韩电影一区二区| 在线视频一区二区| 亚洲午夜精品一区二区麻豆| 99国产精品欧美一区二区三区| 精品一区狼人国产在线| www一区二区三区| 国产成人精品一区二区三区免费| 日韩av无码一区二区三区| 无码中文字幕人妻在线一区二区三区| 国产麻豆精品一区二区三区| 秋霞鲁丝片一区二区三区|