如何優雅的用Axure裝逼?高保真原型心得分享
去年一直想寫的Axure小技巧分享,終于還是動手寫了,今天主要給大家分享關于axure高保真原型的一些東東。
本文核心內容點:
– 啥是高保真原型?(附簡單說明原型)
– Axure可以畫出什么水準的高保真?(給示例,開啟裝逼模式)
– 高保真原型圖技巧:
– 啥時候上高保真?適用場景 and 不適用場景
啥是高保真原型 ?
啥是原型,從事互聯網的同學,肯定非常熟悉,特別是產品崗同學。如果不是,那如下簡單講原型和高保真原型的:
原型:即產品草圖。從產品流程來看,將想法形成草圖原型,原型再有設計師形成效果圖,程序猿們根據需求和效果圖開發,出來的軟件樣子就是和效果圖差不多。原型在過程中就是產品最終形態的骨架。
低/中/高保真:根據圖的粗糙程度劃分,以最終效果圖為參照。保真程度越高,離最終效果圖越接近。
Axure:工具只是實現想法的工具。在眾多的原型軟件中,最廣泛使用的就是Axure了。
Axure可以畫出啥水準的高保真?
在這里一圖勝過千言,以下分享自己畫過低/中/高保真原型截圖。
低保真:最輕松和省時間的原型,粗獷的風格讓我們只重視結構和流程,原型不在乎太多設計細節。
– 示例1:一個App官網下載頁的低保真原型,我們甚至可以成為結果圖,突出了這個需要哪一些元素。
– 示例2:wap版本下載頁,同樣低保真,突出結構和元素。
中保真:這類原型最常見,低保真不容易描述產品最終樣子,高保真容易干擾設計師,中保真匯集了各類有點,也是比較常用的。
– 示例3:本示例圖為微信酒店訂房下的系列頁面,中保真對比低保真,更能體現了交互細節和產品流程。
– 示例4:這是一個”邀請好友注冊獲取獎勵“的流程,采用中保真并強調了多個頁面的交互流程。
高保真:對比中低保真,高保真可以稱之為效果圖了,如果加深細節可以直接對著開發咯,換句話說,高保真更強調細節。
– 示例5:在校期間做的校園助手小項目,和同學的第一個5000+用戶的項目,簡直無以言必的自豪感。由于組內無設計同學,于是要求用Axur直接先畫出類似最終效果的高保真,最后再開發。圖中除了素材,其他都是使用Axure直接繪制出來。
– 示例6:在校期間某日看到了多年未更新的老版36Kr,根據自己興趣畫了新版效果圖,也是可以直接通過Axure繪制出來。
– 示例7:近期眾包某App中“我的”頁面。
高保真的特殊技巧
高保真原型圖技巧:
– 核心內功:目標清晰/理解設計規范
– 畫圖習慣:像素對齊/用淺色/上素材
核心:
目標清晰:不管采用低中高的原型,核心目標是交互稿就是想法的表達,產品流程的表達??梢圆捎谩澳繕?、堆疊、排序”方式來表達。目標指的是頁面目的,流程目的,都是為了實現某些需求。堆疊指的是為了滿足目的,一個新聞詳情頁需要哪些元素?一個登錄頁需哪些元素?建議先用思維導圖或者手繪出基本包含的元素,先把包含的元素列出來,不在乎樣式,正如HTML編碼里面的”內容/樣式/結構“,堆疊考慮的是內容和結構。等列出這個頁面的所有元素,那就可以開始排列了,這就涉及涉及規范和畫圖習慣了。
了解設計規范:了解不同類型產品的設計規范是很有必要的。比如IOS、Android、Web設計規范,或者某個產品常用頁面設計方法。沒人會把登錄按鈕放在賬戶密碼框的上面,了解設計規范的目標是調整好頁面結構,將頁面元素合理的擺放。推薦《UI設計模式》和《Web信息架構》這兩本書,總結了移動端和Web端常用的頁面設計知識。
習慣:
繪圖習慣直接影響到了畫出來的效果,如果想輕松畫出顏值較高的原型,那么可以遵守以下細節。
控制組件到素級級別:低保真原型比較粗糙是因為不在乎細節,啥事細節,就是一個頁面內元素的寬高圓角等。所以畫高保真原型時候,最常用習慣就是計算和定義組件的寬高等屬性。 比如App基礎背景頁面我們可以定義為320×480(Iphone4s的對半比例)、360×640(720P屏幕的對半)等其他比例,然后在此基礎上,定義狀態欄高度20PX像素,xxx欄高度44Px,幾乎就是按照設計規范給的來畫組件了,自定義組件一般取10px的倍數,如狀態欄這類組件盡量復用。
善用對齊功能:對齊在Axure里面非常重要,善用Axure自帶對齊功能!
1)不同組件間距盡量對齊相同,或者10px的倍數規律。
2)2個元素間關系善用向左/右對齊,居中對齊,頁面內元素間必須存在對齊關系(左右居中)
3) 3個元素以上,善用間距對齊。
淺色為主,慎用深色:在組件顏色選擇上,盡量采用淺色,首先是深色顯得比較重,建議關鍵組件采用深色。
圖標等采用真實素材:在低保真中,涉及圖片圖標等素材用占位符,而畫高保真時,我們可以替換為真實素材。圖標可以去Iconfont下載尋找,圖片盡量找真是素材替換。
有興趣適當配色:在不影響設計師的前提下,可以嘗試配色,但是交付設計師的交互稿最好不帶顏色。
啥時候上高保真?
并不是任何時候都適用于高保真原型,哪些場景下比較適合使用呢?
**適用場景**:
1. 不干擾設計師的前提下,想要盡量接近產品最終效果。
2. 涉及會議演示。
3. 做好方案對B/C端用戶直接展示,越保真效果越好。
**非適用場景**
1. 產品流程還在探索期,此期強調流程而不是細節,建議采用低保真。
2. 周期短,那還是重點表達清流程和適當的細節。
總結,高保真原型:
– 制作周期:較長,耗時間。
– 適用場景:流程清晰的前提下,想要接近或者定義最終效果。
**END**
Axure小心得,望能對親有所幫助,文筆粗糙請諒解,歡迎交流。
本文為作者@ygg(公眾號:yggtalk) 原創發布于人人都是產品經理社區,并經人人都是產品經理編輯,轉載請注明作者信息和本文鏈接。
這也叫高保真
學習了,謝謝
小公司的UI從用戶研究一直做到高保真,怎么破? ?
同問 視覺設計師 本來想用Axure畫原型圖 畫著畫著就成高保真。。。
是姚國華學長嗎????ygg?
寫的不錯 ??
可以請問下怎么在axure里使用Iconfont的圖標嗎 簡單說下步驟 謝謝
谷歌瀏覽器安裝一個插件,直接在iconfont復制到Axure就能用了
校友你好
有個問題一直困擾我,為嘛要把真是尺寸縮小一半?
湖南工業大學的朋友,挺不錯!
移動端設計你用px作為單位?
高保真所用的時間是低保真所用時間的N多倍,對于產品經理來說,用低保真把功能邏輯說清楚,設計的事情交給設計,開發的工作交給開發,剩下的時間用來思考,思考產品的方向,思考產品細節,去學習社會和人性的心理,比你把時間花在高保真上面劃算得多。當然,如果你的部門是匯報型部門,那請把高保真技能點滿,越保真你可以越會得到上級的夸獎,但是你會離你的產品越來越遠,這是實話。(何為匯報型部門,就是你的上級是定期向別人匯報的,喜歡讓你做東西給別人講,自己什么都不干還以為高保真很快就可以做出來,覺得soeasy的,那很不好意思的告訴你,如果你想踏踏實實做好產品,請趕緊離開,這是實話。)如果你的時間都用來做原型了,那誰來思考產品?你的上級嗎,還是開發,還是設計?nonono,你是產品經理,決定這一切的在你自己。所以,想好了,高保真原型能不做盡量不要做,如果你的設計師是一個上進的設計師,他肯定更加喜歡你的低保真。—寫給各位剛入門產品經理,懷著想提高產品技能的心思來看這篇文章的各位,把做高保真的時間用來思考你的產品,學會思考是產品經理的核心競爭力。
說的有道理
不影響,高保真不單單是給上級看,給團隊看,也是讓產品經理自己思考產品細節的一個機會
時間成本
我覺得你說的對,高保真的原型可以低成本檢驗產品的邏輯是否正確,如果后面開發做好了才發現做的不對,那給團隊帶來是更大的時間成本。
確實是這樣,今天在我離職之際,項目經理還在給我說大多數產品經理做的都是高保真原型,我話都不想和他說了
一看就是大廠的 說話真刁鉆
I can’t agree with more.產品重在解決問題的思路、流程、邏輯,不在于原型設計,原型設計僅是工作環節的一個小部分,不必耽誤太多時間,當然時間充足的情況下盡可能美觀
好厲害啊,學習了
非常感謝,因為您的推薦在看移動應用UI設計模式 這本書,感覺產品經理都需要看一下,系統的學習一下產品設計的基礎內容,非常感謝,對我來說,收獲良多。
好厲害啊,學習了
贊~\(≧▽≦)/~
摟住透露了學校和電話信息啊
??
請問在Axure8中,高保真添加那么多元素如何解決程序嚴重卡頓問題 ??
換臺好電腦
配置已經是mac pro 了…軟件原因。你試下畫原型邏輯地圖,各種卡翔
mac pro又不好。
不用mac愧對標題裝逼二字了。ps:項目中不建議用beta 8 ,多圖嚴重打字卡頓,和電腦性能無關。
親 標題配圖是編輯大人加的,我并沒有用8,8確實坑。
為校友點贊 ??
?? 贊
發現校友一枚呢,求認識
贊!
謝謝!
謝謝分享,謝謝