以微信為例:如何用Axure制作高保真原型?

2 評論 14542 瀏覽 35 收藏 5 分鐘

本文從準備素材到具體實施步驟,手把手教你如何用Axure制作高保真原型。

1. 準備素材

制作高保真原型,當然需要大量圖標啦,但這些圖表那里來呢?

我知道的有以下幾種方式:

  1. 用PhotoShop從頁面截圖上摳
  2. 解壓官方APK
  3. 網絡上找

這里強烈推薦用PhotoShop摳圖這種方式,摳一個圖標小于30秒鐘,且隨用隨摳。解壓官方APK是能得到APK上用的一些原始圖片,但會發現解壓出來的圖片實在是太多了,反倒不好找自己想要的那張。

至于從網絡上找現成的,看著省時間,但其實這是最浪費時間的做法。

2. 實施步驟

(1)確定布局結構

微信的頁面布局是由上中下三部分組成,如下圖:

如何用Axure制作高保真原型 - 以微信為例

(2)確定項目結構

如何用Axure制作高保真原型 - 以微信為例

(3)確定頁面結構

如何用Axure制作高保真原型 - 以微信為例

(這個圖可以大體顯示出頁面結構,但并不讓我滿意,第二版時會進行優化)

(4)具體制作每一個頁面

對于工具軟件,不用學太多,直接用起來就可以啦。如果對Axure不熟悉,可以看下參考資料部分內容。

3. 小經驗分享

  • 先完成主體畫面,再添加特效。否則會糾結于如何制作特效,反倒影響自己的制作速度
  • 一定要確定頁面結構及它們之間的引用關系,否則出現問題不好調試
  • 使用最簡單的控件來完成原型,盡量不要使用高級控件;否則調試起來那是真心煩人,尤其 是處理交互事件時
  • 當使用框架時,確保每一個框架的大小都是相同的;否則很難統一坐標系,會加大處理交互的難度
  • 框架會截斷拖動事件
  • 在頁面重新加載時,通過變量設置頁面中的文本,會發現文本內容往下串,但文本邊框卻保持原位

不知道我說的是啥?

哈哈,自己從頭做一遍就知道了。畢竟對于工具類軟件,需要掌握的理論不多,更多的是需要掉坑&實踐。

4. 總結

第一點,想說的是:

Axure是原型制作工具,并不是軟件開發平臺。所以在軟件上可實現的效果,在Axure上很可能是難以實現的,或者實現它的成本比在軟件上實現難度還大。

第二點,想說的是:

正常情況下,從需求到產品原型需要經歷如下階段:

如何用Axure制作高保真原型 - 以微信為例

從下往上,工作量與復雜度逐級上升,每一級都是下一級的基礎。

所以可以看出原型雖然是最后的產出,但只是冰山一角啦。

稍微嘮叨下,也是為了提醒自己不要為了做原型而做原型。

5. 參考資料

? 《Axure RP8入門手冊》

https://www.amazon.cn/dp/B071JWBFFF/ref=sr_1_1?ie=UTF8&qid=1542936742&sr=8-1&keywords=axure

? 小樓老師的Axure視頻

http://www.chanpinban.com/datum/1.html

 

本文由 @遇清風 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自網絡。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 你這個屁等于沒放

    來自四川 回復
  2. 說句那啥的,你這個所謂教程,就跟網上畫畫教程的笑話一樣。咱們先畫個輪廓,然后再添上細節,這個馬就畫好了。包餃子分為拌餡搟皮和包三個步驟,剩下的怎么和面怎么絞餡怎么才能把皮搟勻稱怎么包餃子不漏你們回家自學吧

    回復