社交（SNS）网站的完整设计思路之3

 

5）画页面原型（技巧介绍）

 

 

 画页面原型，出前台界面表现。深有感概的是，感谢AXURE这个软件，让我们的工作全面提速。大家对AXURE应该很了解吧，网上还有AXURE的交流群。我打英文版以来用了近3年了，常用的就是哪些功能。基于onmouse/onclick/onfous以及onload一些交互。要是做些TAG或菜单动态样式，就可以邮件又以下它的轮换样式就好了。说到这，我就一些画页面的软件技巧略带讲解一下。

【图26】====================================================================

【图27】====================================================================

【图28】====================================================================

【图29】====================================================================

【图30】====================================================================

AXURE可能还会用到模拟“图片替换效果”、对于外调的交互效果，直接可以用inframe链接。补充一点，axure在画线框图的效果中，1）一定要注意把一些共同的元素作为“组件”或“模板”用，这样保存的文件会比较少；2）对一些原型效果微调的时候，可以组合多层形状，可以具体到“top=？、left=?”这样打开出来的页面不会因为绝对位置不一样，在演示的时候形成错位感。这里不一一说明。

我们根据最早的目录，开始进行圈子具体交互页面的拼魔方运动。大家也一起跟着试一下，如果给你3个小时，你能很高质的完成么？其实画的过程可以查漏补缺，对整个需求的用户体验设计起到一定的思考。

5）画页面原型，整理文档        这两天在做一个广告监控系统，所以就耽误了几天写SNS教程的时间。就刚刚看到的现状，顺便也总结了一下，产品人员不要满足于用工具，很多人真的很无聊，老是在网上一个劲的研究工具怎么用，工具用会了又怎么样。姑且把产品经理错误的划分为，“小成”和“大成”，掌握了一定的工具那也不算不成，我教产品新人的时候我也先让他们了解做产品需要哪些技能，掌握哪些工具，往往他们在一段时间喜洋洋后，我们会他们吃枣后打一棒子。

就教程【6】中讲到的，axure画交互页面原型只是占需求中很小的一部分，综合的分析一下，①业务逻辑→②系统实现逻辑③功能实现逻辑→④页面表现逻辑，（页面表现只是作为数据输出，和用户行为交互必不可少的界面而已。）

【图31】================================================================

【图32】================================================================

【图33】================================================================

页面不再一一举例，以下是我画圈子页面的次序安排，抛砖引玉，给大家提供参考。

1、创建圈子提及表单页

2、圈子申请、申请处理页

申请类型：用户申请交互、管理员交互申请交互（对应用户申请处理交互，管理员申请处理交互。）

3、圈子管理页

管理类型：基本信息管理、访问权限管理、成员管理、圈子公告

4、圈子列表页

类型：全部圈子+热门圈子、好友圈子、我的圈子（角色：我是创建者、我是管理员、我是成员、正在申请）

5、具体圈子首页

布局：圈子介绍+圈子公告   、latest话题+latest图片、圈子管理员（角色：创建者+管理员）+最新加入成员+最新到访成员

6、圈子话题

布局 latest20话题(字段：标题 +发布者 +浏览/回复数)  

7、圈子话题最终页

8、发表表发话题页

9、圈子照片

布局 latest30照片 （说明：圈子需要也要分相册，根据不同的情况定。）

10、圈子照片最终页

11、上传圈子照片

12、以及其它的邀请好友加入圈子等页面

图34】================================================================

当这个模块所有的页面完成以后，把各个按钮、链接都加上，然后F5快捷键生成页面，把自己当用户所有的页面都流程化的过一遍，看看哪快流程或页面布局不合理，再针对性的调整、完善一下模块功能逻辑或页面表现逻辑。特别是一些重要的地方，比如页面套标签需要注意的地方，你得加上合理的备注，这样就很清晰了。

写完以后，如果是有必要就写的需求，系统的整合到文档中作为版本管理。(SVN)

最后整体打包，你的SNS社区需求就可以交付讨论了。不管是大项目还是小产品，只要你掌握了产品的几点重要的原则，其实还是比较简单的。到最后无论做什么，只要原理相通，都小菜一碟！不过我有点体会，对原创的系统设计还是比较有挑战性的。所以我现在希望多做些多挑战性的项目。最后附上我做sns系统的截图，看一下伟大的产品经理吧，大家都是伟大的产品经理，加油！加油吧O(∩_∩)O哈哈~