本文介紹了如何實(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é)議