1、QQ会员网站全解剖,Sylvia Nong 敌营侦查报告,本文结构,臆测篇他们是怎么规划内容的？结构-功能主义 抽丝篇我是怎样解读该网结构的？以功能为单位,画脑图 察微篇交互设计有啥闪光之处？5个遵守设计原则的细节,他们是怎样规划内容的？,功能是动态的，结构是静态的， 而在结构的框架中生成， 根据功能规则而生存的是内容结构功能学派,他们是怎样规划内容的？,Q1 谁用这个网站？ QQ会员 + 非会员 Q2 针对这几类人，网站需要怎样的功能？,特权信息通知,交流,他们是怎样规划内容的？,根据功能的页面布局,我是怎样解读该网结构的？,功能1 特权通知结构（到3级页面）,3级,3级,3级,3级,2级,
2、2级,2级,2级,我是怎样解读该网结构的？,功能2 会员交流结构,官方活动(会员活动),会员之间交流(会员社区),四个频道 游戏(在线) QQ(在线) 生活(线下) 购物(线下),2级,2级,2级,导航,我是怎样解读该网结构的？,功能3 吸引新会员 信息类 注册功能类,会员介绍 信息类,功能类 会员注册按钮 Link to P,导航,2级,2级,2级,导航、首页、 每页,我是怎样解读该网结构的？,按功能划分内容结构脑图一张:,我是怎样解读该网结构的？（首页*）,引导性内容,引导性内容,新闻性内容,广告性内容,引导性内容 主导航条（上） 便捷导航条（左） 搜索框（右上） 登陆及帮助条（右顶） L
3、OGO（左顶）新闻性内容 大力宣传的活动（图片） 最新消息 各频道最新消息 QQ频道更新 网站更新（左下）广告性内容 用户注册/登录BAR 开通会员BAR 热门搜索推荐注* 为未登陆时截的图. 这几天有改版,现在广告性内容和左导航位置调转了.增加了会员交流的内容,四个特权分开显示,不再用标签选择,交互设计有啥闪光之处？,非常别致的导航 在页面表达原则中,有一点非常重要 “ Let users know where they are (让用户知道自己身处何地)” QQ会员的导航设计绝对是个亮点.,如上图: 我可以很清楚的知道1. 我在哪一个层级? 二级页面 2. 我在这一个层级的什么位置? 在生
4、活特权中的介绍页面,与此页面平级的页面有哪些 3. 这页面的内容是什么? (见导航条下面的黄色banner),交互设计有啥闪光之处？,B. 明显的效果反馈 在页面表达原则中,有一点 A clear feedback is needed after user behaviors (操作后有明显反馈)在VIP网站中,鼠标HOVER状态时,边缘会出现明显阴影.(因浏览器而异) 提示: 你已经在作用范围内了!这是其他网站很少有,却是很必要的. 不然CSS和FLASH上为何要对HOVER有特别操作呢?,交互设计有啥闪光之处？,C. 可伸缩的便捷性导航 有一个设计原则, less is better(更少
5、就是更好). 在不需要的时候把占空间的东西收起来,是我的生活信条之一. 首页导航究竟是将特权全部罗列?还是把热推的特权作为快捷方式列出来呢? 聪明的设计师解决了这看似存在的”空间矛盾” 方法就是-当当当当, 请看下图!,交互设计有啥闪光之处？,D. 半透明的Layer (效果因浏览器而异) 有些同学向我抱怨很讨厌layer,因为总是挡住一些他们感兴趣的东西. 那么,这个半透明的Layer又如何呢? 这里又遵守了一个设计技巧: 当在空间上叠加的时候,便捷性要向可找性(findability)妥协.,交互设计有啥闪光之处？,E. 帮助页面设计之前的交互主要在首页和导航，这个帮助页面,也是别具匠心:
6、它严格遵守了以下设计原则中:最常用的要放在最容易找的地方 FAQ最好有搜索引擎(不可能让一个心急着解决问题的人去在文字的海洋里苦苦寻找吧!) 内容多时,一定要分类!对比以下号称产品团队国内第一的QQ邮箱的帮助,就能发现VIP站在客服界面上更为出色!,改进与疑惑,看左上图,为什么游戏特权介绍要单独于主页,且放在处处可见的导航上呢? 我是冲着装扮来的,不care啥介绍,为什么之间还要有强硬介绍?看左下图, 为什么我已经是VIP6了,而且2013年才到期, 开通会员的图标还是无所不在? 是不是可以改进呢?不同的explorer,交互效果差距很大,是不是也可以改进呢?,END,以上均为本人根据自己知识和可获取的资料作出的判断,一家之言,欢迎切磋!,
