Axure学习笔记：手机APP微信读书原型设计.pdf

Axure 学：手机 APP 微信读书原型设计
最近在学 Axure，周末做了个案例练练手，选了腾讯新出的微信读书，主要考虑这是 版，所
以功能不是那么复杂。做完之后回顾了一下自己的制作过程，既算是做一个总结，也希望能给同样正
在学习的新手带来一点帮助。就我个人来说，对于工具的学习，无论是某一个软件，还是某一门程序
语言，都是比较习惯先找个资料看一下基础的介绍，然后就开始做一个稍微复杂点的案例，在案例中
快速学习，遇到不懂的再去查资料。这样不仅可以帮助我们快速的掌握工具，而且可以体会到这项工
具的实际用法。
下面大概介绍一下我这个原型的制作。
0. 站点地图
制作原型之前最好先构思一下自己的原型框架，然后建出站点地图，这样可以帮助自己理清逻辑，
当然，实际制作的过程中可以不断对产品地图进行修改的。
1. 手机框架（即我的站点地图中的微信读书）
对与 APP 的原型制作不同于网站，网站是很多网页完整的刷新，而 APP，我们既要看到一个手机，
又要看到里面的内容，而手机外壳最好是不要进行刷新的，这个可以借助内部框架部件来实现。如下
图所示，只要在手机外壳中间拖入一个内部框架，然后设置 框架目标页 到登录页面，设置从不显示
滚动条 和 隐藏边。
2. 登录
登录界面的实现也比较简单，给登录处添加单击跳转链接即可。有一点比较特殊的是，我在上面
设置了一个隐藏的动态面板“登录失败”，然后页面载入时会判断一个 LoginResult 的值，决定是否
让其显示一秒后消失，这个变量值来源于后一个界面的微信登录，如果用户点击取消而导致的跳转回
登录界面就会触发动态面板的显示。动态面板的显示隐藏功能在本原型中用的很多，后面大家可以仔
细体会一下它的用法。
3. 底边栏
在主界面的四个页面中我们将要用到这个原型中一个很重要的母版 底边框，所以我们需要先将
这个母版做好。底边栏的实现是排列了四个图片部件，然后对每个都设定选中时的图标。
然后在 发现、书架、想法、我四个页面添加页面载入时事件选中其中某一个部件，并且将其设
置为禁用。这里有个小技巧是可以如下图所示将四个部件设置为选项组，这样同一时间将只能有一个
处于选中状态，设置页面载入时事件时就只需要将对应的设定为选中，而不需要去将其它的设定为未
选中了。
4. 发现
发现界面主要展示目前你的好友正在读的书籍，可以通过向左向右划动来查看更多。该功能的实
现是使用动态面板的“向右滑动时”和“向左滑动时”，配合切换效果中的“向右滑动”和“向左滑
动”，具体用例信息见下图。
. 书籍简介
在发现界面中点击书籍封