layui导航栏不跳转切换内容_Axure内容管理平台——原型分享+免费下载

fb5f878675feec02aebf6ec1ac0bd683.png

Hello,今天和大家分享内容分享平台的原型,里面的文章都是我发表在人人都产品经理上的,有兴趣也可以看一下哈。

这个原型是高保真高交互的,里面有8大页面,26个小元件,18个中继器元件。所以使用的话也是非常方便的,只需要看着说明填写中继器的表格就可以完成了。里面交互效果也是8个页面互相交互,效果很强大,你们也可以用来学习哈。

如果你喜欢这个原型的话,添加作者微信522073109,作者免费赠送给您,顺便当交个朋友

原型预览地址:https://www.pmdaniu.com/storages/117839/6861f21c208689934012ef1aec200157-69620/start.html#g=1&p=%E4%BA%A4%E4%BA%92%E6%95%88%E6%9E%9C%E8%AF%B7%E7%9C%8B%E6%AD%A4%E9%A1%B5

一、八大页面

1、首页

63d3b6962bf133416105dd540c864fb2.png

2、搜索页

https://u.wechat.com/MHvnaADWJDHRT7S7sFWT9fQ (二维码自动识别)

3、专题页

5ab1d2eb6d992301509066df6f013475.png

4、推荐作家页

77694d54d3750dac7b820ce78fa7217d.png

5、作家详细页

9a875e7ba0158dd306ec477ed0052b44.png

6、PM快报页

1c7bf4a81dfdccb259d8e4f12698f8cb.png

7、文章页

fd756645c2c0a6b582c2a5d0f96d0703.png

8、我的页

我的文章

https://u.wechat.com/MHvnaADWJDHRT7S7sFWT9fQ (二维码自动识别)

我的收藏

https://u.wechat.com/MHvnaADWJDHRT7S7sFWT9fQ (二维码自动识别)

我的评论

https://u.wechat.com/MHvnaADWJDHRT7S7sFWT9fQ (二维码自动识别)

我的订阅

https://u.wechat.com/MHvnaADWJDHRT7S7sFWT9fQ (二维码自动识别)

我的点赞

https://u.wechat.com/MHvnaADWJDHRT7S7sFWT9fQ (二维码自动识别)

通知中心

https://u.wechat.com/MHvnaADWJDHRT7S7sFWT9fQ (二维码自动识别)

浏览记录

https://u.wechat.com/MHvnaADWJDHRT7S7sFWT9fQ (二维码自动识别)

资料设置

https://u.wechat.com/MHvnaADWJDHRT7S7sFWT9fQ (二维码自动识别)

修改密码

https://u.wechat.com/MHvnaADWJDHRT7S7sFWT9fQ (二维码自动识别)

二、交互效果(需要在交互效果页才能看到整体交互效果!!!!)

这个原型的交互效果很多,下面我举例讲一下,欢迎大家来体验,记得要在交互效果页才有整体的交互效果。

1、顶端栏效果

c254a25f6aeeb234600cb484b9f907c1.png

2、首页轮播图组合

轮播图只需要在中继器内倒入图片即可,方便使用,点击图片能跳转至对应文章页。

点击跳转之后,该文章的阅读量会+1,在我的浏览记录内会新加这条浏览记录。

4160ab26b310df054a49dc7c04c62043.png

2、中部内容中继器

2.1分类查看

8b672f302bc947b518107703574eca22.png

2.2加载更多文章

f54ca2c9fcf7f5de9ac303ce100b7fb3.png

2.3点击查看文章

点击跳转之后,该文章的阅读量会+1,在我的浏览记录内会新加这条浏览记录。

下图点击前阅读量为6789,点击后到文章页可以看到变为6790,这种细节处理的很好

6aeb00a0b8b67c4055f26c2555029cf1.gif

2.4点击查看作者详细信息

点击作者名字或作者头像,可跳转至该作者的详细页面

d6fd77254d17891e731981ae5bc3d242.png

3、底栏原件

底栏主要是网站介绍和其它网站链接,这里我们的交互是点击跳转至外部网站。

这里友情链接是用中继器制作的,所以维护也很方便,这要写网站名和地址就可以了。

4、圈子原件

圈子可以放一些QQ群、微信二维码、app二维码,你们可以加入一些产品经理相关的群或者加我微信。

3593db642744bd5fcec05face6157297.png

4、浮动广告栏中继器

这里是用中继器做的浮动广告栏,到指定位置就会出现,鼠标单击时可以跳转到指定页面。维护简单,也是填写中继器导入图片和填写跳转地址即可。

ac07e161f1556f0c7efc3dd04bac407a.png

5、推荐作家中继器

5.1订阅、取消订阅效果

点击可以切换订阅,联动交互效果到后面的推荐作家页,作家详细页和我的订阅,大家可以自己查看,交互做的很细致。

1720ddda874b4d2cc1294b62ab06a5d8.png

5.2查看更多

可以查看更多推荐作者,大家可以看到,张三在首页内已订阅,到推荐作家页面也是已订阅的状态

8c9645d185391b00700dacea969330d4.png

5.3查看作者

可以查看该作者详细信息,大家可以看到,张三在首页内已订阅,到作家详细页也是已订阅的状态

d7f1b2097160b1fdbce497c0abcf8e87.gif

6、热点文章中继器

点击文章,跳转到对应的文章页,该文章的阅读量会+1,并且在我的浏览记录内会新加这条浏览记录。

112e9d1b95c520dabd00422296ec493b.gif

7、浮动栏

可查看app的二维码,这里用我个人微信二维码代替了。

点击上箭头,可以回到顶端。

4d0d59fea0d7e4d5e96d391b654572b7.png

8、搜索原件

8.1进入搜索页

afff1e566a45b3e8e71debb42292aab4.png

8.2模糊搜索

7dd11331a974c6592ccd723a26d42c78.gif

8.3常用推荐搜索

5de66198c6afa9453de5e4da75f95ee2.png

9、热门专题中继器

9.1热门专题中继器进入对应专题页

7ecca083fd9225e7ff395f53d7ec9081.png

9.2顶端导航栏进入对应专题页

8320e9114e83ae2b79284eb64322e17b.png

10、推荐作家页面中继器

10.1进入推荐作家页面

除了可以在推荐作家点击更多作家进入推荐作家页面之外,也可以点击顶端导航栏进入。

4d967d5a54fd0d3c0a5eff9ef8146e67.png

10.2订阅、取消订阅效果

同样这里订阅和取消订阅也会联动交互效果到首页的推荐作家中继器,作家详细页和我的订阅,大家可以自己查看,交互做的很细致。

9541405d8c31cec2f40c9c6ff0f9b868.png

10.3点击跳转至查看作家页面

点击作家头像和名字,可以进入该作家的详细页面,可以看到这里李四是已订阅的,进入作家详细页也是已订阅。

3a6adc87e44ef43d57805a677a1a032d.png

10.4作家详细页的订阅和取消订阅

在作家详细页面订阅或取消订阅,会联动交互至推荐作家中继器、以后后面的我的订阅页面,大家可以体验下效果

eb649716863055198770529a043d193a.png

10.5点击文章跳转至指定文章

点击文章名,可以跳转至对应文章。联动交互此文章阅读量+1,我的浏览记录里也会有此文章记录。

d4308f610c3038a044e26edbcec3e165.png

11、PM快报

5374bfd2a710c9b8af98feba05bbc819.png

12、文章页

12.1进入文章页

3c4037f521b541d428f1f8b4f448db30.png

12.2从文章页进入作者详情页

点击作者头像或名字可以进入作者详情页。

777778d422ae9016d01a338991c81fe5.png

12.3点赞、取消点赞、收藏、取消收藏

点赞、取消点赞、收藏、取消收藏,会联动至中部浏览器,大家可以自己查看点赞数和收藏数,然后在我的收藏和我的点赞都会出现该条记录。

c492437842f28895d7a5753d28e006d1.gif

13、赞赏原件

9a3e80347da3efe40dac48d8f4d92a38.gif

14、评论原件

每篇文章能记录不同的评论,而且自己评论过的文章还能在我的评论页看到。

6510413e256d138615a262702103797f.png

可以通过顶端导航栏进入我的页

f474f7869e41aef33b17a55891364a97.png

16、菜单中继器

点击菜单可以切换不同内容

b0b91b71180730abf94137a8016a7e83.png

17、文章中继器

如果文章已发布,点击文章名可查看已发布文章

3193ca1c7ad2ed8d8846a7d156f18128.png

18、我的收藏中继器

18.1查看收藏文章

同样点击文章名可进入文章页,进入后可以看到在收藏标志是已收藏,这种细节做得很好

e3fd8d6716b536b1da08419ac6aec92a.png

18.2取消收藏

点击删除按钮可以取消收藏该文章,在文章详情页也可以看到收藏标志显示未收藏,大家可以自己体验一下哈。

d292a0e274cb71827f86de707b5ec409.png

19、我的评论中继器

19.1查看评论文章

同样点击文章名可进入文章页,进入后可以看到文章有我的评论,且评论内容一致,这种细节做得很好。

4b65a2fbdf8e10bb84b7550fa6f31cd0.png

19.2取消评论

点击删除按钮可以取消对该文章的评论,在文章详情页也可以该条评论取消了,大家可以自己体验一下哈。

80e144af883122816d974c6d5c88d35f.png

20、我的订阅中继器

20.1查看订阅作者

点击作者名字或头像可以进入该作者的详细页,在详细页可以看到订阅状态是已订阅,这也是细节。

680709de3928b766342f08cc1825ebc5.png

20.2取消订阅

点击取消订阅后,可以联动交互到作家详细页,推荐作家页、推荐作家中继器取消订阅,大家可以去尝试一下。

2832055e8839e70e8891b99af8c93ba0.png

21、我的点赞

21.1查看点赞文章

同样点击文章名可进入文章页,进入后可以看到该文章点赞状态为已点赞,这种细节做得很好。

3b2c9dc2c06e1df9c9fd4c3981956b04.png

21.2取消点赞

点击删除按钮可以取消点赞该文章,在文章详情页也可以看到未点赞,而且文章的点赞数会少一,大家可以自己体验一下哈。

492affc8176e69db2d3419f52625f1bd.png

22、通知中心中继器

22.1查看通知

a4ef60388f6b15242d89dcaacb62be5b.png

22.2点击文章查看文章

63c1ffab6dc42261314cfaceba28487c.gif

23、浏览记录中继器

23.1点击文章名查看文章

a9e346ef608659d6db23eee3417363a5.png

23.2删除浏览记录

50a76b8aed5fa5acf249884a7c40e2af.png

24、资料设置

设置我的资料,可以看到,更新之后右上角名称马上改变了,其他地方名字也会改变,例如文章页,作者页,中部内容中继器,推荐作家中继器等等,欢迎大家来体验。

4a10b29d59d39ed6ba6db3093e0559f4.png

25、修改密码

密码不正确、错误、位数不足都会有相应的提示。初始密码是abcd1234。修改后的密码只有你知道哦,如果忘记密码的话请按f5刷新页面。

25.1密码为空时

6ad7b755b7fea3ecf4fc59fda01d70e3.png

25.2原密码不正确时

8954a5a91d9d05b9b348c8c4b4dec53d.png

25.3新密码为空时

f39b8c3e18a542eb2e8da5a490c31d27.png

25.4新密码格式错误时

c198033e239510e40b37e0191423e5f8.png

25.5两次新密码不一致时

90f44fc9f732d60ae520314115013eae.png

25.6新密码和旧密码一致时

ff2b04b52c6aed0ac1b82621cc3087ce.png

25.7成功修改时

10f1cf731fcdf37e8d9e7f1941f1bdd1.png

最后,感谢您长得这么好看还看完了我的文章,上面的介绍只是部分的效果,具体的话欢迎您到演示页面体验,谢谢。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值