![fb5f878675feec02aebf6ec1ac0bd683.png](https://i-blog.csdnimg.cn/blog_migrate/fb1cadf3a7c85d23a99619fcc144f60e.jpeg)
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](https://i-blog.csdnimg.cn/blog_migrate/de8e50c6a4b12a4c5a6db5d9300d19a1.jpeg)
2、搜索页
https://u.wechat.com/MHvnaADWJDHRT7S7sFWT9fQ (二维码自动识别)
3、专题页
![5ab1d2eb6d992301509066df6f013475.png](https://i-blog.csdnimg.cn/blog_migrate/b0de9adf7a706d3a49784fa740c26a7d.jpeg)
4、推荐作家页
![77694d54d3750dac7b820ce78fa7217d.png](https://i-blog.csdnimg.cn/blog_migrate/9040d2b3418c55375218c78451037131.jpeg)
5、作家详细页
![9a875e7ba0158dd306ec477ed0052b44.png](https://i-blog.csdnimg.cn/blog_migrate/31e7c722ea3a3d0e56c62e30724f34b3.jpeg)
6、PM快报页
![1c7bf4a81dfdccb259d8e4f12698f8cb.png](https://i-blog.csdnimg.cn/blog_migrate/b3c0bf5380779df4fb87bcf783cead8a.jpeg)
7、文章页
![fd756645c2c0a6b582c2a5d0f96d0703.png](https://i-blog.csdnimg.cn/blog_migrate/df6e4dab5206a9323d46ede55317e841.jpeg)
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](https://i-blog.csdnimg.cn/blog_migrate/f93cc8fa6de109356c61cbff25be4357.png)
2、首页轮播图组合
轮播图只需要在中继器内倒入图片即可,方便使用,点击图片能跳转至对应文章页。
点击跳转之后,该文章的阅读量会+1,在我的浏览记录内会新加这条浏览记录。
![4160ab26b310df054a49dc7c04c62043.png](https://img-blog.csdnimg.cn/img_convert/4160ab26b310df054a49dc7c04c62043.png)
2、中部内容中继器
2.1分类查看
![8b672f302bc947b518107703574eca22.png](https://i-blog.csdnimg.cn/blog_migrate/b522dfd21da1cd12d2db71dc30b8db2f.png)
2.2加载更多文章
![f54ca2c9fcf7f5de9ac303ce100b7fb3.png](https://i-blog.csdnimg.cn/blog_migrate/f6965dcefdf1b38de70acdbdd3e7a0ff.png)
2.3点击查看文章
点击跳转之后,该文章的阅读量会+1,在我的浏览记录内会新加这条浏览记录。
下图点击前阅读量为6789,点击后到文章页可以看到变为6790,这种细节处理的很好
![6aeb00a0b8b67c4055f26c2555029cf1.gif](https://i-blog.csdnimg.cn/blog_migrate/93222535fd4aad7adb0a2c571519ab44.gif)
2.4点击查看作者详细信息
点击作者名字或作者头像,可跳转至该作者的详细页面
![d6fd77254d17891e731981ae5bc3d242.png](https://i-blog.csdnimg.cn/blog_migrate/0e83aef705e33e49748a5787a578849f.png)
3、底栏原件
底栏主要是网站介绍和其它网站链接,这里我们的交互是点击跳转至外部网站。
这里友情链接是用中继器制作的,所以维护也很方便,这要写网站名和地址就可以了。
4、圈子原件
圈子可以放一些QQ群、微信二维码、app二维码,你们可以加入一些产品经理相关的群或者加我微信。
![3593db642744bd5fcec05face6157297.png](https://i-blog.csdnimg.cn/blog_migrate/0fc9e023fe8d45633af3d99aa2fb76f1.png)
4、浮动广告栏中继器
这里是用中继器做的浮动广告栏,到指定位置就会出现,鼠标单击时可以跳转到指定页面。维护简单,也是填写中继器导入图片和填写跳转地址即可。
![ac07e161f1556f0c7efc3dd04bac407a.png](https://i-blog.csdnimg.cn/blog_migrate/dd6af2a550567eaa7d66568251fe85e3.png)
5、推荐作家中继器
5.1订阅、取消订阅效果
点击可以切换订阅,联动交互效果到后面的推荐作家页,作家详细页和我的订阅,大家可以自己查看,交互做的很细致。
![1720ddda874b4d2cc1294b62ab06a5d8.png](https://i-blog.csdnimg.cn/blog_migrate/bb2cc430c5cd3521648b6db9fc882280.png)
5.2查看更多
可以查看更多推荐作者,大家可以看到,张三在首页内已订阅,到推荐作家页面也是已订阅的状态
![8c9645d185391b00700dacea969330d4.png](https://i-blog.csdnimg.cn/blog_migrate/9a042ab3d6698db8635a61a03b86b79b.png)
5.3查看作者
可以查看该作者详细信息,大家可以看到,张三在首页内已订阅,到作家详细页也是已订阅的状态
![d7f1b2097160b1fdbce497c0abcf8e87.gif](https://i-blog.csdnimg.cn/blog_migrate/d4d2fd20f2f5c390e1f68f66ab7ec09e.gif)
6、热点文章中继器
点击文章,跳转到对应的文章页,该文章的阅读量会+1,并且在我的浏览记录内会新加这条浏览记录。
![112e9d1b95c520dabd00422296ec493b.gif](https://i-blog.csdnimg.cn/blog_migrate/6b925990fd72076c2656f1b46173ca2b.gif)
7、浮动栏
可查看app的二维码,这里用我个人微信二维码代替了。
点击上箭头,可以回到顶端。
![4d0d59fea0d7e4d5e96d391b654572b7.png](https://i-blog.csdnimg.cn/blog_migrate/055a18812da7bfb4425a445c1d9e9525.png)
8、搜索原件
8.1进入搜索页
![afff1e566a45b3e8e71debb42292aab4.png](https://i-blog.csdnimg.cn/blog_migrate/3968abf6b89aad46f4276f99d40ae73d.png)
8.2模糊搜索
![7dd11331a974c6592ccd723a26d42c78.gif](https://i-blog.csdnimg.cn/blog_migrate/3951126de736ef3502cd5c368ca10f75.gif)
8.3常用推荐搜索
![5de66198c6afa9453de5e4da75f95ee2.png](https://i-blog.csdnimg.cn/blog_migrate/ed18948e7272616798c02b63e4a8a52f.png)
9、热门专题中继器
9.1热门专题中继器进入对应专题页
![7ecca083fd9225e7ff395f53d7ec9081.png](https://i-blog.csdnimg.cn/blog_migrate/23c7f723c4255845f722632331bca4e2.png)
9.2顶端导航栏进入对应专题页
![8320e9114e83ae2b79284eb64322e17b.png](https://i-blog.csdnimg.cn/blog_migrate/14b2fe8ecd321c37626e718b8e472b82.png)
10、推荐作家页面中继器
10.1进入推荐作家页面
除了可以在推荐作家点击更多作家进入推荐作家页面之外,也可以点击顶端导航栏进入。
![4d967d5a54fd0d3c0a5eff9ef8146e67.png](https://i-blog.csdnimg.cn/blog_migrate/997421e140597d7133c718f364578cbd.png)
10.2订阅、取消订阅效果
同样这里订阅和取消订阅也会联动交互效果到首页的推荐作家中继器,作家详细页和我的订阅,大家可以自己查看,交互做的很细致。
![9541405d8c31cec2f40c9c6ff0f9b868.png](https://i-blog.csdnimg.cn/blog_migrate/c9375b088cd3129fb28b1bee69e5aa24.png)
10.3点击跳转至查看作家页面
点击作家头像和名字,可以进入该作家的详细页面,可以看到这里李四是已订阅的,进入作家详细页也是已订阅。
![3a6adc87e44ef43d57805a677a1a032d.png](https://i-blog.csdnimg.cn/blog_migrate/83370776419fb09134adc900111db8b1.png)
10.4作家详细页的订阅和取消订阅
在作家详细页面订阅或取消订阅,会联动交互至推荐作家中继器、以后后面的我的订阅页面,大家可以体验下效果
![eb649716863055198770529a043d193a.png](https://i-blog.csdnimg.cn/blog_migrate/33cf3873b0c17dc338afbfc9baceb4a0.png)
10.5点击文章跳转至指定文章
点击文章名,可以跳转至对应文章。联动交互此文章阅读量+1,我的浏览记录里也会有此文章记录。
![d4308f610c3038a044e26edbcec3e165.png](https://i-blog.csdnimg.cn/blog_migrate/b979d0318e0389f5b63cb640abe38001.png)
11、PM快报
![5374bfd2a710c9b8af98feba05bbc819.png](https://i-blog.csdnimg.cn/blog_migrate/1912b21619ef1a54bc6f0da03c992775.png)
12、文章页
12.1进入文章页
![3c4037f521b541d428f1f8b4f448db30.png](https://i-blog.csdnimg.cn/blog_migrate/a20a250ceefbe2686bf235b7d594be2f.png)
12.2从文章页进入作者详情页
点击作者头像或名字可以进入作者详情页。
![777778d422ae9016d01a338991c81fe5.png](https://i-blog.csdnimg.cn/blog_migrate/0ddf7a0fa02be8ef4fce954bb877b8d6.png)
12.3点赞、取消点赞、收藏、取消收藏
点赞、取消点赞、收藏、取消收藏,会联动至中部浏览器,大家可以自己查看点赞数和收藏数,然后在我的收藏和我的点赞都会出现该条记录。
![c492437842f28895d7a5753d28e006d1.gif](https://i-blog.csdnimg.cn/blog_migrate/88508e2bb86a22dcc75e64de77e9689e.gif)
13、赞赏原件
![9a3e80347da3efe40dac48d8f4d92a38.gif](https://i-blog.csdnimg.cn/blog_migrate/2c2bef509c7bec668b5a6811eaf07a35.gif)
14、评论原件
每篇文章能记录不同的评论,而且自己评论过的文章还能在我的评论页看到。
![6510413e256d138615a262702103797f.png](https://i-blog.csdnimg.cn/blog_migrate/d4cc99a92d06466d7786c5e70607199d.png)
可以通过顶端导航栏进入我的页
![f474f7869e41aef33b17a55891364a97.png](https://i-blog.csdnimg.cn/blog_migrate/c3fa7fbae868d977c3aed39fc5fcef81.png)
16、菜单中继器
点击菜单可以切换不同内容
![b0b91b71180730abf94137a8016a7e83.png](https://i-blog.csdnimg.cn/blog_migrate/afa0714ca8d902457c4d178507fc459b.png)
17、文章中继器
如果文章已发布,点击文章名可查看已发布文章
![3193ca1c7ad2ed8d8846a7d156f18128.png](https://i-blog.csdnimg.cn/blog_migrate/f627b009d0828d0bbfc1413fbf453558.png)
18、我的收藏中继器
18.1查看收藏文章
同样点击文章名可进入文章页,进入后可以看到在收藏标志是已收藏,这种细节做得很好
![e3fd8d6716b536b1da08419ac6aec92a.png](https://i-blog.csdnimg.cn/blog_migrate/fedfad954eea8ef8d62953614c9ef27f.png)
18.2取消收藏
点击删除按钮可以取消收藏该文章,在文章详情页也可以看到收藏标志显示未收藏,大家可以自己体验一下哈。
![d292a0e274cb71827f86de707b5ec409.png](https://i-blog.csdnimg.cn/blog_migrate/f48cff28e1bd3d234ebf590f5dac6eaf.png)
19、我的评论中继器
19.1查看评论文章
同样点击文章名可进入文章页,进入后可以看到文章有我的评论,且评论内容一致,这种细节做得很好。
![4b65a2fbdf8e10bb84b7550fa6f31cd0.png](https://i-blog.csdnimg.cn/blog_migrate/06baf070726d2dcaba5ca478270b71f3.png)
19.2取消评论
点击删除按钮可以取消对该文章的评论,在文章详情页也可以该条评论取消了,大家可以自己体验一下哈。
![80e144af883122816d974c6d5c88d35f.png](https://i-blog.csdnimg.cn/blog_migrate/b388f83fd03117e58ab5a29dba7c6b21.png)
20、我的订阅中继器
20.1查看订阅作者
点击作者名字或头像可以进入该作者的详细页,在详细页可以看到订阅状态是已订阅,这也是细节。
![680709de3928b766342f08cc1825ebc5.png](https://i-blog.csdnimg.cn/blog_migrate/4420e4b72c9cca50d2ee3f355fbfffb2.png)
20.2取消订阅
点击取消订阅后,可以联动交互到作家详细页,推荐作家页、推荐作家中继器取消订阅,大家可以去尝试一下。
![2832055e8839e70e8891b99af8c93ba0.png](https://i-blog.csdnimg.cn/blog_migrate/8fb4463477bab3954719c3c2f9104091.png)
21、我的点赞
21.1查看点赞文章
同样点击文章名可进入文章页,进入后可以看到该文章点赞状态为已点赞,这种细节做得很好。
![3b2c9dc2c06e1df9c9fd4c3981956b04.png](https://i-blog.csdnimg.cn/blog_migrate/11b39ae4cf73f147ebf9fdb8e0f994b7.png)
21.2取消点赞
点击删除按钮可以取消点赞该文章,在文章详情页也可以看到未点赞,而且文章的点赞数会少一,大家可以自己体验一下哈。
![492affc8176e69db2d3419f52625f1bd.png](https://i-blog.csdnimg.cn/blog_migrate/f464115d9c46b4a2506fe94851f5aa99.png)
22、通知中心中继器
22.1查看通知
![a4ef60388f6b15242d89dcaacb62be5b.png](https://i-blog.csdnimg.cn/blog_migrate/6a02e1322d0b38452ef5558d9ab785d9.png)
22.2点击文章查看文章
![63c1ffab6dc42261314cfaceba28487c.gif](https://i-blog.csdnimg.cn/blog_migrate/50ff570c039794de1b42e9cda18e93ea.gif)
23、浏览记录中继器
23.1点击文章名查看文章
![a9e346ef608659d6db23eee3417363a5.png](https://i-blog.csdnimg.cn/blog_migrate/adab10517fd0c18865396cc3efd3aab2.png)
23.2删除浏览记录
![50a76b8aed5fa5acf249884a7c40e2af.png](https://i-blog.csdnimg.cn/blog_migrate/470da1c7501b3d06b661e1224f59db1a.png)
24、资料设置
设置我的资料,可以看到,更新之后右上角名称马上改变了,其他地方名字也会改变,例如文章页,作者页,中部内容中继器,推荐作家中继器等等,欢迎大家来体验。
![4a10b29d59d39ed6ba6db3093e0559f4.png](https://i-blog.csdnimg.cn/blog_migrate/946edf9878fb732214e06947919b691f.png)
25、修改密码
密码不正确、错误、位数不足都会有相应的提示。初始密码是abcd1234。修改后的密码只有你知道哦,如果忘记密码的话请按f5刷新页面。
25.1密码为空时
![6ad7b755b7fea3ecf4fc59fda01d70e3.png](https://i-blog.csdnimg.cn/blog_migrate/70a8e1bda0df3a1af03806489f9a0afe.jpeg)
25.2原密码不正确时
![8954a5a91d9d05b9b348c8c4b4dec53d.png](https://i-blog.csdnimg.cn/blog_migrate/25ca570b4b3bc213197ad58cb0b667dd.jpeg)
25.3新密码为空时
![f39b8c3e18a542eb2e8da5a490c31d27.png](https://i-blog.csdnimg.cn/blog_migrate/5197364675aa4476759e40ee503636a4.jpeg)
25.4新密码格式错误时
![c198033e239510e40b37e0191423e5f8.png](https://i-blog.csdnimg.cn/blog_migrate/cf31553d3f1d0be7d4ac4132dd14fbd0.jpeg)
25.5两次新密码不一致时
![90f44fc9f732d60ae520314115013eae.png](https://i-blog.csdnimg.cn/blog_migrate/61841bdeb545be38d44218082225705c.jpeg)
25.6新密码和旧密码一致时
![ff2b04b52c6aed0ac1b82621cc3087ce.png](https://i-blog.csdnimg.cn/blog_migrate/5ac1bb05f35b25968f10ebe4e1d9e12b.jpeg)
25.7成功修改时
![10f1cf731fcdf37e8d9e7f1941f1bdd1.png](https://i-blog.csdnimg.cn/blog_migrate/475055945eea411547eae5d63a7d52a4.jpeg)
最后,感谢您长得这么好看还看完了我的文章,上面的介绍只是部分的效果,具体的话欢迎您到演示页面体验,谢谢。