如何優雅的用Axure裝逼?高保真原型心得分享

ygg
38 評論 178771 瀏覽 1953 收藏 11 分鐘

去年一直想寫的Axure小技巧分享,終于還是動手寫了,今天主要給大家分享關于axure高保真原型的一些東東。

本文核心內容點:
– 啥是高保真原型?(附簡單說明原型)
– Axure可以畫出什么水準的高保真?(給示例,開啟裝逼模式)
– 高保真原型圖技巧:
– 啥時候上高保真?適用場景 and 不適用場景

啥是高保真原型 ?

啥是原型,從事互聯網的同學,肯定非常熟悉,特別是產品崗同學。如果不是,那如下簡單講原型和高保真原型的:

原型:即產品草圖。從產品流程來看,將想法形成草圖原型,原型再有設計師形成效果圖,程序猿們根據需求和效果圖開發,出來的軟件樣子就是和效果圖差不多。原型在過程中就是產品最終形態的骨架。

低/中/高保真:根據圖的粗糙程度劃分,以最終效果圖為參照。保真程度越高,離最終效果圖越接近。

Axure:工具只是實現想法的工具。在眾多的原型軟件中,最廣泛使用的就是Axure了。

Axure可以畫出啥水準的高保真?

在這里一圖勝過千言,以下分享自己畫過低/中/高保真原型截圖。

低保真:最輕松和省時間的原型,粗獷的風格讓我們只重視結構和流程,原型不在乎太多設計細節。

– 示例1:一個App官網下載頁的低保真原型,我們甚至可以成為結果圖,突出了這個需要哪一些元素。

Screen Shot 2016-02-14 at 下午5.37.14

– 示例2:wap版本下載頁,同樣低保真,突出結構和元素。

Screen Shot 2016-02-14 at 下午5.44.03

中保真:這類原型最常見,低保真不容易描述產品最終樣子,高保真容易干擾設計師,中保真匯集了各類有點,也是比較常用的。

– 示例3:本示例圖為微信酒店訂房下的系列頁面,中保真對比低保真,更能體現了交互細節和產品流程。

中保真

– 示例4:這是一個”邀請好友注冊獲取獎勵“的流程,采用中保真并強調了多個頁面的交互流程。

Screen Shot 2016-02-14 at 下午6.09.08

高保真:對比中低保真,高保真可以稱之為效果圖了,如果加深細節可以直接對著開發咯,換句話說,高保真更強調細節。

– 示例5:在校期間做的校園助手小項目,和同學的第一個5000+用戶的項目,簡直無以言必的自豪感。由于組內無設計同學,于是要求用Axur直接先畫出類似最終效果的高保真,最后再開發。圖中除了素材,其他都是使用Axure直接繪制出來。

Screen Shot 2016-02-14 at 下午6.13.15

– 示例6:在校期間某日看到了多年未更新的老版36Kr,根據自己興趣畫了新版效果圖,也是可以直接通過Axure繪制出來。

Screen Shot 2016-02-14 at 下午6.16.33

Screen Shot 2016-02-14 at 下午6.17.06

– 示例7:近期眾包某App中“我的”頁面。

Screen Shot 2016-02-14 at 下午6.24.46

高保真的特殊技巧

高保真原型圖技巧:

– 核心內功:目標清晰/理解設計規范

– 畫圖習慣:像素對齊/用淺色/上素材

核心:

目標清晰:不管采用低中高的原型,核心目標是交互稿就是想法的表達,產品流程的表達??梢圆捎谩澳繕?、堆疊、排序”方式來表達。目標指的是頁面目的,流程目的,都是為了實現某些需求。堆疊指的是為了滿足目的,一個新聞詳情頁需要哪些元素?一個登錄頁需哪些元素?建議先用思維導圖或者手繪出基本包含的元素,先把包含的元素列出來,不在乎樣式,正如HTML編碼里面的”內容/樣式/結構“,堆疊考慮的是內容和結構。等列出這個頁面的所有元素,那就可以開始排列了,這就涉及涉及規范和畫圖習慣了。

Screen Shot 2016-02-14 at 下午8.08.43

了解設計規范:了解不同類型產品的設計規范是很有必要的。比如IOS、Android、Web設計規范,或者某個產品常用頁面設計方法。沒人會把登錄按鈕放在賬戶密碼框的上面,了解設計規范的目標是調整好頁面結構,將頁面元素合理的擺放。推薦《UI設計模式》和《Web信息架構》這兩本書,總結了移動端和Web端常用的頁面設計知識。

Screen Shot 2016-02-14 at 下午8.12.32

習慣:

繪圖習慣直接影響到了畫出來的效果,如果想輕松畫出顏值較高的原型,那么可以遵守以下細節。

控制組件到素級級別:低保真原型比較粗糙是因為不在乎細節,啥事細節,就是一個頁面內元素的寬高圓角等。所以畫高保真原型時候,最常用習慣就是計算和定義組件的寬高等屬性。 比如App基礎背景頁面我們可以定義為320×480(Iphone4s的對半比例)、360×640(720P屏幕的對半)等其他比例,然后在此基礎上,定義狀態欄高度20PX像素,xxx欄高度44Px,幾乎就是按照設計規范給的來畫組件了,自定義組件一般取10px的倍數,如狀態欄這類組件盡量復用。

Screen Shot 2016-02-14 at 下午7.50.08

善用對齊功能:對齊在Axure里面非常重要,善用Axure自帶對齊功能!

1)不同組件間距盡量對齊相同,或者10px的倍數規律。

2)2個元素間關系善用向左/右對齊,居中對齊,頁面內元素間必須存在對齊關系(左右居中)

3) 3個元素以上,善用間距對齊。

Screen Shot 2016-02-14 at 下午7.55.33_MarkMan

Screen Shot 2016-02-14 at 下午8.01.08

淺色為主,慎用深色:在組件顏色選擇上,盡量采用淺色,首先是深色顯得比較重,建議關鍵組件采用深色。

Screen Shot 2016-02-14 at 下午8.25.18

圖標等采用真實素材:在低保真中,涉及圖片圖標等素材用占位符,而畫高保真時,我們可以替換為真實素材。圖標可以去Iconfont下載尋找,圖片盡量找真是素材替換。

有興趣適當配色:在不影響設計師的前提下,可以嘗試配色,但是交付設計師的交互稿最好不帶顏色。

啥時候上高保真?

并不是任何時候都適用于高保真原型,哪些場景下比較適合使用呢?

**適用場景**:

1. 不干擾設計師的前提下,想要盡量接近產品最終效果。
2. 涉及會議演示。
3. 做好方案對B/C端用戶直接展示,越保真效果越好。

**非適用場景**

1. 產品流程還在探索期,此期強調流程而不是細節,建議采用低保真。
2. 周期短,那還是重點表達清流程和適當的細節。

總結,高保真原型:

– 制作周期:較長,耗時間。

– 適用場景:流程清晰的前提下,想要接近或者定義最終效果。

**END**

Axure小心得,望能對親有所幫助,文筆粗糙請諒解,歡迎交流。

 

本文為作者@ygg(公眾號:yggtalk) 原創發布于人人都是產品經理社區,并經人人都是產品經理編輯,轉載請注明作者信息和本文鏈接。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這也叫高保真

    來自湖南 回復
  2. 學習了,謝謝

    來自北京 回復
  3. 小公司的UI從用戶研究一直做到高保真,怎么破? ?

    來自貴州 回復
    1. 同問 視覺設計師 本來想用Axure畫原型圖 畫著畫著就成高保真。。。

      來自湖北 回復
  4. 是姚國華學長嗎????ygg?

    回復
  5. 寫的不錯 ??

    來自上海 回復
  6. 可以請問下怎么在axure里使用Iconfont的圖標嗎 簡單說下步驟 謝謝

    來自湖北 回復
    1. 谷歌瀏覽器安裝一個插件,直接在iconfont復制到Axure就能用了

      來自江蘇 回復
  7. 校友你好

    來自天津 回復
  8. 有個問題一直困擾我,為嘛要把真是尺寸縮小一半?

    來自北京 回復
  9. 湖南工業大學的朋友,挺不錯!

    來自上海 回復
  10. 移動端設計你用px作為單位?

    來自四川 回復
  11. 高保真所用的時間是低保真所用時間的N多倍,對于產品經理來說,用低保真把功能邏輯說清楚,設計的事情交給設計,開發的工作交給開發,剩下的時間用來思考,思考產品的方向,思考產品細節,去學習社會和人性的心理,比你把時間花在高保真上面劃算得多。當然,如果你的部門是匯報型部門,那請把高保真技能點滿,越保真你可以越會得到上級的夸獎,但是你會離你的產品越來越遠,這是實話。(何為匯報型部門,就是你的上級是定期向別人匯報的,喜歡讓你做東西給別人講,自己什么都不干還以為高保真很快就可以做出來,覺得soeasy的,那很不好意思的告訴你,如果你想踏踏實實做好產品,請趕緊離開,這是實話。)如果你的時間都用來做原型了,那誰來思考產品?你的上級嗎,還是開發,還是設計?nonono,你是產品經理,決定這一切的在你自己。所以,想好了,高保真原型能不做盡量不要做,如果你的設計師是一個上進的設計師,他肯定更加喜歡你的低保真。—寫給各位剛入門產品經理,懷著想提高產品技能的心思來看這篇文章的各位,把做高保真的時間用來思考你的產品,學會思考是產品經理的核心競爭力。

    來自廣東 回復
    1. 說的有道理

      來自北京 回復
    2. 不影響,高保真不單單是給上級看,給團隊看,也是讓產品經理自己思考產品細節的一個機會

      來自江蘇 回復
    3. 時間成本

      來自北京 回復
    4. 我覺得你說的對,高保真的原型可以低成本檢驗產品的邏輯是否正確,如果后面開發做好了才發現做的不對,那給團隊帶來是更大的時間成本。

      來自廣東 回復
    5. 確實是這樣,今天在我離職之際,項目經理還在給我說大多數產品經理做的都是高保真原型,我話都不想和他說了

      來自重慶 回復
    6. 一看就是大廠的 說話真刁鉆

      來自廣東 回復
    7. I can’t agree with more.產品重在解決問題的思路、流程、邏輯,不在于原型設計,原型設計僅是工作環節的一個小部分,不必耽誤太多時間,當然時間充足的情況下盡可能美觀

      來自廣東 回復
  12. 好厲害啊,學習了

    來自山東 回復
  13. 非常感謝,因為您的推薦在看移動應用UI設計模式 這本書,感覺產品經理都需要看一下,系統的學習一下產品設計的基礎內容,非常感謝,對我來說,收獲良多。

    來自四川 回復
  14. 好厲害啊,學習了

    來自廣東 回復
  15. 贊~\(≧▽≦)/~

    來自江西 回復
  16. 摟住透露了學校和電話信息啊

    來自荷蘭 回復
  17. ??

    來自廣東 回復
  18. 請問在Axure8中,高保真添加那么多元素如何解決程序嚴重卡頓問題 ??

    來自廣東 回復
    1. 換臺好電腦

      來自浙江 回復
    2. 配置已經是mac pro 了…軟件原因。你試下畫原型邏輯地圖,各種卡翔

      來自廣東 回復
    3. mac pro又不好。

      來自浙江 回復
    4. 不用mac愧對標題裝逼二字了。ps:項目中不建議用beta 8 ,多圖嚴重打字卡頓,和電腦性能無關。

      來自廣東 回復
    5. 親 標題配圖是編輯大人加的,我并沒有用8,8確實坑。

      來自廣東 回復
  19. 為校友點贊 ??

    來自北京 回復
  20. ?? 贊

    來自廣東 回復
  21. 發現校友一枚呢,求認識

    來自廣東 回復
  22. 贊!

    來自山東 回復
  23. 謝謝!

    來自上海 回復
  24. 謝謝分享,謝謝

    來自上海 回復