Axure教程:實(shí)現(xiàn)商品分享功能
本文介紹了如何實(shí)現(xiàn)商品分享功能的Axure教程,并具體從預(yù)覽圖,到所需原件,再到操作步驟進(jìn)行了分析。
導(dǎo)語
該案例是基于電商平臺(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)所包含的元件過多,為避免本文篇幅過長,我在這里就不對(duì)每一個(gè)元件進(jìn)行詳細(xì)的陳列,就說一下我的大致分類。至于詳細(xì)的每個(gè)元件則可以通過對(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è)清晰的分類,不僅有利于自己將來在原型里面增添新的元件,也便于其他產(chǎn)品人的查看。
操作步驟
這篇文章里,對(duì)于簡(jiǎn)單的操作我就不進(jìn)行詳細(xì)講解,如有不懂的可以觀看我以前的文章,也可以評(píng)論留言我再給你進(jìn)行解答。在這里我也是從最外層到最里層來講解每一層的內(nèi)容的設(shè)計(jì)。
(1)“分享”矩形的交互
(2)內(nèi)容面板
1)圖文分享面板在最上層并隱藏。
2)分享操作面板取消勾選“自動(dòng)調(diào)整為內(nèi)容尺寸”
3)圖文面板擺放美觀,無需操作。
(3)圖文面板
1)設(shè)置“點(diǎn)擊圖片提示語”矩形。
2)設(shè)置“鏈接已復(fù)制提示語”矩形并隱藏。
3)覆蓋圖文的熱區(qū)交互:
(4)圖文分享面板
1)設(shè)置“圖文保存提提示語”矩形并隱藏。
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ǔ)分享操作操作面板擺放美觀,無需操作。
(6)完工,按F5預(yù)覽原型看看
小記
- 該原型案例引用了我之前發(fā)布的文章里面的案例,感興趣的小白或是對(duì)這篇文章的操作步驟有點(diǎn)看不懂的小白可以進(jìn)入我的主頁去看看詳細(xì)的操作步驟。
- 該原型案例其實(shí)也算是對(duì)前面的幾個(gè)案例的一個(gè)總結(jié),綜合使用。正所謂“千里之行始于足下”,因?yàn)橛辛饲懊娴姆e累才有了現(xiàn)在這個(gè)較大的原型。
- 在之前的每一篇文章里,我?guī)缀醵紡?qiáng)調(diào)了關(guān)于每一個(gè)在畫布內(nèi)的元件命好名的重要性,我的截圖內(nèi)也基本有對(duì)每一個(gè)不管大或小的元件進(jìn)行命名。在這里我想再強(qiáng)調(diào)一遍要對(duì)每一個(gè)元件命好名,這樣我們才能有一個(gè)非常清晰的“紋路”。
- 在這里我還要提一個(gè)概念——“分類”,對(duì)元件進(jìn)行一個(gè)好的分類可以更好地幫助我們管理整個(gè)原型,就像我從外到內(nèi)共分三層,每層下面再進(jìn)行細(xì)分,當(dāng)我過十天再看原型時(shí),就能夠很快重新掌握整個(gè)原型了。
本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash ,基于 CC0 協(xié)議
這原型能力。。 再努力吧
好的。努力奮斗中 ??