Axure教程:實(shí)現(xiàn)商品分享功能

2 評(píng)論 3737 瀏覽 19 收藏 9 分鐘

本文介紹了如何實(shí)現(xiàn)商品分享功能的Axure教程,并具體從預(yù)覽圖,到所需原件,再到操作步驟進(jìn)行了分析。

導(dǎo)語(yǔ)

該案例是基于電商平臺(tái),當(dāng)對(duì)商品進(jìn)行分享時(shí)的原型制作。該原型內(nèi)包含的元件比我之前的所有教程中元件的總和還要多。但在操作的復(fù)雜度上卻并不是最難的,只要邏輯思路清晰,將元件命好名字,歸好類。一名產(chǎn)品小白在一個(gè)小時(shí)內(nèi)也能夠輕松完成。

預(yù)覽圖

(1)點(diǎn)擊分享前

(2)點(diǎn)擊分享后

(3)點(diǎn)擊“復(fù)制鏈接”

(4)點(diǎn)擊“圖文分享”后

(5)點(diǎn)擊“保存圖片”

預(yù)覽地址:https://gwblot.axshare.com

所需元件

由于該原型內(nèi)所包含的元件過(guò)多,為避免本文篇幅過(guò)長(zhǎng),我在這里就不對(duì)每一個(gè)元件進(jìn)行詳細(xì)的陳列,就說(shuō)一下我的大致分類。至于詳細(xì)的每個(gè)元件則可以通過(guò)對(duì)照著原型預(yù)覽地址去一一對(duì)應(yīng)。

(1)首先第一層共兩類

  • 內(nèi)容面板
  • 分享矩形

1)內(nèi)容面板:

2)分享矩形:

(2)第二層共三個(gè)面板

  • 圖文面板
  • 圖文分享面板
  • 分享操作面板

1)圖文面板:

2)分享操作面板:

3)圖文分享面板:

(3)分享操作面板下又分兩個(gè)面板

  • 基礎(chǔ)分享操作面板
  • 分享平臺(tái)操作面板

1)基礎(chǔ)分享操作面板:

2)分享平臺(tái)操作面板:

以上就是我所從大到小我的所有分類情況,一個(gè)清晰的分類,不僅有利于自己將來(lái)在原型里面增添新的元件,也便于其他產(chǎn)品人的查看。

操作步驟

這篇文章里,對(duì)于簡(jiǎn)單的操作我就不進(jìn)行詳細(xì)講解,如有不懂的可以觀看我以前的文章,也可以評(píng)論留言我再給你進(jìn)行解答。在這里我也是從最外層到最里層來(lái)講解每一層的內(nèi)容的設(shè)計(jì)。

(1)“分享”矩形的交互

(2)內(nèi)容面板

1)圖文分享面板在最上層并隱藏。

2)分享操作面板取消勾選“自動(dòng)調(diào)整為內(nèi)容尺寸”

3)圖文面板擺放美觀,無(wú)需操作。

(3)圖文面板

1)設(shè)置“點(diǎn)擊圖片提示語(yǔ)”矩形。

2)設(shè)置“鏈接已復(fù)制提示語(yǔ)”矩形并隱藏。

3)覆蓋圖文的熱區(qū)交互:

(4)圖文分享面板

1)設(shè)置“圖文保存提提示語(yǔ)”矩形并隱藏。

2)“×”處熱區(qū)的交互:

3)“保存圖片”按鈕的交互:

(5)分享操作面板

1)“取消”矩形的交互:

2)分享平臺(tái)操作面板的交互:

這里的拖動(dòng)操作如果想詳細(xì)了解,可以觀看我的另一篇文章:《 ?Axure教程:實(shí)現(xiàn)分類欄拖動(dòng)效果》,這篇文章詳細(xì)介紹了如何實(shí)現(xiàn)菜單欄的拖動(dòng)效果,如有不懂可以在評(píng)論區(qū)留言,我會(huì)為你解答。

3)基礎(chǔ)分享操作操作面板擺放美觀,無(wú)需操作。

(6)完工,按F5預(yù)覽原型看看

小記

  1. 該原型案例引用了我之前發(fā)布的文章里面的案例,感興趣的小白或是對(duì)這篇文章的操作步驟有點(diǎn)看不懂的小白可以進(jìn)入我的主頁(yè)去看看詳細(xì)的操作步驟。
  2. 該原型案例其實(shí)也算是對(duì)前面的幾個(gè)案例的一個(gè)總結(jié),綜合使用。正所謂“千里之行始于足下”,因?yàn)橛辛饲懊娴姆e累才有了現(xiàn)在這個(gè)較大的原型。
  3. 在之前的每一篇文章里,我?guī)缀醵紡?qiáng)調(diào)了關(guān)于每一個(gè)在畫布內(nèi)的元件命好名的重要性,我的截圖內(nèi)也基本有對(duì)每一個(gè)不管大或小的元件進(jìn)行命名。在這里我想再?gòu)?qiáng)調(diào)一遍要對(duì)每一個(gè)元件命好名,這樣我們才能有一個(gè)非常清晰的“紋路”。
  4. 在這里我還要提一個(gè)概念——“分類”,對(duì)元件進(jìn)行一個(gè)好的分類可以更好地幫助我們管理整個(gè)原型,就像我從外到內(nèi)共分三層,每層下面再進(jìn)行細(xì)分,當(dāng)我過(guò)十天再看原型時(shí),就能夠很快重新掌握整個(gè)原型了。

 

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

題圖來(lái)自 Unsplash ,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 這原型能力。。 再努力吧

    來(lái)自北京 回復(fù)
    1. 好的。努力奮斗中 ??

      來(lái)自廣東 回復(fù)