用Axure改进微信公众号的页面模板

2018-11-01 08:47:20 织梦安装使用
  • 文章介绍
Axure大师 Axure大师

微信公众号后台提供了一套页面模板。不少公众号用这套模板生成的页面作为自己的文章目录页面。


这套模板很经典,但有些千篇一律,而且不适合展示图片。我这个公众号以产品设计为主,产品原型的图片比文字更重要。所以我用axure设计了一套适合我的公众号内容的页面模板。


总体思路

我的文章有三种——案例、教程、其他产品设计相关的文章。页面分成三个tab——案例、教程、杂谈。

案例主要是手机App的原型设计,直接展示原型图片最直观。最适合展示图片的列表形式是瀑布流。所以,这个tab页用瀑布流的形式,手机的原型竖着放,PC的原型横着放(见下面图片)。

教程里面还有一些小技巧、常见问题等等。适合做成卡片的形式,把不同内容区分开。卡片上需要显示教程的标题和主要内容。由于内容比较抽象,所以文字比图片更合适。

杂谈就是杂七杂八的文章,以浏览为主。所以这个tab页适合只展示标题等少量文字,加上背景图片吸引一下眼球就足够了。图片可以加上彩色的蒙层,显得整齐。



切换TAB

实现TAB切换的方法有几种。这次,我尝试了切换内部框架(inline frame)和切换动态面板两种方法。我发现在用内部框架的时候拖拽页面是有bug的,拖拽动作经常被识别为点击,莫名其妙的页面就跳转了。所以,下面介绍怎么用动态面板实现切换TAB的效果。

1、建立动态面板,添加三个状态(state)

2、在“状态”里摆好按钮,按钮上放hot spot控件

3、在控件上设置切换面板状态的动作

4、用以上方法做好三个“状态”里的每个按钮



瀑布流

瀑布流里的卡片可以设置一个倒角,看起来棒棒哒。在axure 8里面有一个新功能——可以任意选择给四个角中哪几个设置倒角。(如下图红圈)



其他

“教程和杂谈”摆好布局就行了。在文章列表上用hot spot控件设置点击跳转到文章页面的动作——open link。

杂谈页面上的图片加上矩形控件,设置好矩形的透明度和颜色。设置颜色的时候可以找一个配色网站,或者直接参考现成的App。这里推荐一个配色的网站http://www.peise.net/tools/web/。


资源分享

原型的RP文件在这里http://pan.baidu.com/s/1cp0402。大家可以下载自己研究。原型效果可以点击阅读原文查看。


如果有任何问题欢迎留言跟我交流。觉得有用可以给朋友分享。谢谢大家。


查看更多文章,请长按关注公众号——Axure大师。


    阅读原文
    阅读原文

    上一篇: 公众号开发消息管理之模板消息 ..

    下一篇: 雷石帮KTV独家定制微信公众号模板..

    相关文档推荐

    精品模板推荐

     2020-07-29   18166  0金币下载

     2020-07-27   65338  0金币下载

     2020-07-27   65333  0金币下载

     2020-06-22   57995  0金币下载

     2020-06-13   62585  0金币下载

     2020-06-13   62587  0金币下载

    专业的织梦模板定制下载站,在线购买后即可下载!

    商业源码

    跟版网模板,累计帮助5000+客户企业成功建站,为草根创业提供助力!

    立刻开启你的建站之旅
    
    QQ在线客服

    服务热线

    织梦建站咨询