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

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