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

2 評(píng)論 14517 瀏覽 35 收藏 5 分鐘

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

1. 準(zhǔn)備素材

制作高保真原型,當(dāng)然需要大量圖標(biāo)啦,但這些圖表那里來呢?

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

  1. 用PhotoShop從頁(yè)面截圖上摳
  2. 解壓官方APK
  3. 網(wǎng)絡(luò)上找

這里強(qiáng)烈推薦用PhotoShop摳圖這種方式,摳一個(gè)圖標(biāo)小于30秒鐘,且隨用隨摳。解壓官方APK是能得到APK上用的一些原始圖片,但會(huì)發(fā)現(xiàn)解壓出來的圖片實(shí)在是太多了,反倒不好找自己想要的那張。

至于從網(wǎng)絡(luò)上找現(xiàn)成的,看著省時(shí)間,但其實(shí)這是最浪費(fèi)時(shí)間的做法。

2. 實(shí)施步驟

(1)確定布局結(jié)構(gòu)

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

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

(2)確定項(xiàng)目結(jié)構(gòu)

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

(3)確定頁(yè)面結(jié)構(gòu)

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

(這個(gè)圖可以大體顯示出頁(yè)面結(jié)構(gòu),但并不讓我滿意,第二版時(shí)會(huì)進(jìn)行優(yōu)化)

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

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

3. 小經(jīng)驗(yàn)分享

  • 先完成主體畫面,再添加特效。否則會(huì)糾結(jié)于如何制作特效,反倒影響自己的制作速度
  • 一定要確定頁(yè)面結(jié)構(gòu)及它們之間的引用關(guān)系,否則出現(xiàn)問題不好調(diào)試
  • 使用最簡(jiǎn)單的控件來完成原型,盡量不要使用高級(jí)控件;否則調(diào)試起來那是真心煩人,尤其 是處理交互事件時(shí)
  • 當(dāng)使用框架時(shí),確保每一個(gè)框架的大小都是相同的;否則很難統(tǒng)一坐標(biāo)系,會(huì)加大處理交互的難度
  • 框架會(huì)截?cái)嗤蟿?dòng)事件
  • 在頁(yè)面重新加載時(shí),通過變量設(shè)置頁(yè)面中的文本,會(huì)發(fā)現(xiàn)文本內(nèi)容往下串,但文本邊框卻保持原位

不知道我說的是啥?

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

4. 總結(jié)

第一點(diǎn),想說的是:

Axure是原型制作工具,并不是軟件開發(fā)平臺(tái)。所以在軟件上可實(shí)現(xiàn)的效果,在Axure上很可能是難以實(shí)現(xiàn)的,或者實(shí)現(xiàn)它的成本比在軟件上實(shí)現(xiàn)難度還大。

第二點(diǎn),想說的是:

正常情況下,從需求到產(chǎn)品原型需要經(jīng)歷如下階段:

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

從下往上,工作量與復(fù)雜度逐級(jí)上升,每一級(jí)都是下一級(jí)的基礎(chǔ)。

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

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

5. 參考資料

? 《Axure RP8入門手冊(cè)》

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

 

本文由 @遇清風(fēng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自網(wǎng)絡(luò)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 你這個(gè)屁等于沒放

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

    回復(fù)