QQ会员网站深入剖析.ppt

QQ会员网站「全解剖」 Sylvia Nong 敌营侦查报告sylvialove7@ 本文结构 臆测篇——他们是怎么规划内容的？ 结构-功能主义 抽丝篇——我是怎样解读该网结构的？ 以功能为单位,画脑图 察微篇——交互设计有啥闪光之处？ 5个遵守设计原则的细节 他们是怎样规划内容的？ 功能是动态的，结构是静态的， 而在结构的框架中生成， 根据功能规则而生存的是内容 ——结构功能学派 他们是怎样规划内容的？ Q1 谁用这个网站？ QQ会员 + 非会员 Q2 针对这几类人，网站需要怎样的功能？ 特权信息通知 交流 目标用户 功能 会员 1.通知必威体育精装版特权 2.会员交流 非会员 3.会员介绍、会员注册 全部用户 4.导航、帮助 他们是怎样规划内容的？ 根据功能的页面布局 我是怎样解读该网结构的？ 功能1 特权通知结构（到3级页面） 功能1 特权通知 生活特权 购物特权 QQ特权 游戏特权 Online privilege Offline privilege 更重要，故放左边 a 介绍 b 头像 c 壁纸 d 安全 e 产品 a 介绍 b 试玩 C 装扮 a 介绍 b电影 c 机票 d 手机充值 a 介绍 b QQ商城 c 特卖 d 返利 3级 3级 3级 3级 2级 2级 2级 2级 我是怎样解读该网结构的？ 功能2 会员交流结构 功能 2 会员交流 与其他会员交流 与产品经理交流 官方活动(会员活动) 会员之间交流(会员社区) 四个频道 游戏(在线) QQ(在线) 生活(线下) 购物(线下) 2级 2级 2级 导航 我是怎样解读该网结构的？ 功能3 吸引新会员 信息类 注册功能类 功能3 吸引新会员 成长体系 5p 特权与功能 2p 会员介绍 信息类 功能类 会员注册按钮 Link to P 会员开通与管理 3p 导航 2级 2级 2级 导航、首页、 每页 我是怎样解读该网结构的？ 按功能划分内容结构脑图一张: 我是怎样解读该网结构的？（首页*） 引导性内容 引导性内容 新闻性内容 广告性内容 引导性内容 主导航条（上） 便捷导航条（左） 有哪些信誉好的足球投注网站框（右上） 登陆及帮助条（右顶） LOGO（左顶） 新闻性内容 大力宣传的活动（图片） 必威体育精装版消息 各频道必威体育精装版消息 QQ频道更新 网站更新（左下） 广告性内容 用户注册/登录BAR 开通会员BAR 热门有哪些信誉好的足球投注网站推荐 注* 为未登陆时截的图. 这几天有改版,现在广告性内容和左导航位置调转了.增加了会员交流的内容,四个特权分开显示,不再用标签选择 交互设计有啥闪光之处？ 非常别致的导航 在页面表达原则中,有一点非常重要 “ Let users know where they are (让用户知道自己身处何地)” QQ会员的导航设计绝对是个亮点. 如上图: 我可以很清楚的知道 1. 我在哪一个层级? 二级页面 2. 我在这一个层级的什么位置? 在[生活特权]中的介绍页面,与此页面平级的页面有哪些 3. 这页面的内容是什么? (见导航条下面的黄色banner) 交互设计有啥闪光之处？ B. 明显的效果反馈 在页面表达原则中,有一点 A clear feedback is needed after user behaviors (操作后有明显反馈) 在VIP网站中,鼠标HOVER状态时,边缘会出现明显阴影.(因浏览器而异) 提示: 你已经在作用范围内了! 这是其他网站很少有,却是很必要的. 不然CSS和FLASH上为何要对HOVER有特别操作呢? 交互设计有啥闪光之处？ C. 可伸缩的便捷性导航 有一个设计原则, less is better(更少就是更好). 在不需要的时候把占空间的东西收起来,是我的生活信条之一. 首页导航究竟是将特权全部罗列?还是把热推的特权作为快捷方式列出来呢? 聪明的设计师解决了这看似存在的”空间矛盾” 方法就是----当当当当, 请看下图! 交互设计有啥闪光之处？ D. 半透明的Layer (效果因浏览器而异) 有些同学向我抱怨很讨厌layer,因为总是挡住一些他们感兴趣的东西. 那么,这个半透明的Layer又如何呢? 这里又遵守了一个设计技巧: 当在空间上叠加的时候,便捷性要向可找性(findability)妥协. 交互设计有啥闪光之处？ E. 帮助页面设计 之前的交互主要在首页和导航，这个帮助页面,也是别具匠心:它严格遵守了以下设计原则中: 最常用的要放在最容易找的地方 FAQ最好有有哪些信誉好的足球投注网站引擎(不可能让一个心急着解决问题的人去在文字的海洋里苦苦寻找吧!) 内容多时,一定要分类!