白社会界面交互设计规范.docxVIP

搜狐白社会界面交互规范

白社会界面交互设计规范

2010-4-16初稿

TOC\h\z\t一级标题,1,二级标题,2,三级标题,3第一章 概述 1

1. 目的 1

2. 适用范围 1

3. 适用群体 1

第二章 原则 1

1. 宗旨 1

2. 真实世界隐喻原则 1

3. 有效反馈原则 2

4. 简洁明了原则 2

5. 一致性原则 3

第三章 产品通用规范 3

1. 页面结构 3

2. 内容区 3

3. 页面Title 8

4. 交互行为 8

5. 操作反馈 11

第四章 组件交互细则 11

第一节 信息输入 12

1. 表单组合 12

2. 下拉层 14

3. 权限设置 15

第二节 导航 16

1. 面包屑导航 16

2. TAB导航 17

3. 翻页导航 18

第三节 信息展示 18

1. 头像和人名 18

2. 信息列表 20

3. 日期时间 22

第四节消息提示 23

1. 通知消息体 23

2. 对话框 25

第五节社交 27

1. 评论 27

2. 回复 28

3. 转发 28

4. 分享 29

第六节富交互 29

1. 富文本输入 29

2. 好友选择 31

3. 文本编辑 33

4. 照片处理 34

第七节操作按钮 36

第八节 特殊情况处理 37

1. 空用户，空内容 37

2. 有用户，空内容 37

3. 有用户，隐私内容 38

搜狐白社会界面交互规范

PAGE1

相关较近、无关较远原则

知道我在哪原则

最少点击原则

操作流最短原则

一致性原则

同类一致原则

异类不同原则

元素最少化原则

产品通用规范

页面结构

为确保产品的布局形式统一，根据目前的交互设计总结出产品的框架结构。在后续添加的服务或栏目，都以此框架为基础，在相应区域进行添加或设置。

总体界面分为5各区域：导航区、工具区、内容区、声明区、联络区

总体结构图（三-1）

内容区

内容区是信息展示和用户完成相应操作的主要窗口，根据不同使用场景。

内容区分为：首页、主页、应用类页、参与类页。

2.1首页

首页是用户登录后的界面，也是寸土寸金的黄金地段，每个想在首页提供快捷入口的应用或服务都需谨慎，在相应分区下进行添加删除。

首页图（三-2.1）

2.2主页

主页是用户个人的首页或者是他人的首页，此模式适用于各种用户的主界面，以及主页个TAB下的页面。

主页图（三-2.2）

2.3应用类页

2.3.1用户自身的应用类

适用于自己的档案、日志、照片、好友、短消息等页面。

【应用规则】

头部表明这是哪个应用，并有这个应用最重要的操作；

第一级分类使用tabs导航方式；

第二级分类使用sidebar导航的方式，比如inbox；

如果分类层级较多，可以加入面包屑导航，比如照片；

如果需要补充性导航或提示引导等，可以在右侧添加sidebar，比如通知请求的分类；

自身应用页图（三-2.3.1）

2.3.2用户他人的应用类

适用于他人的档案、日志、照片、好友等页面。

【应用规则】

头部表明这是从属于某人的内容，并介绍出是哪个应用；

如果有很强烈的内容分类，比如某人的相同好友、某人的全部好友，可用tabs导航；

如果有较多的层级关系，可用面包屑导航；

用户他人应用页图（三-2.3.2）

2.4参与类页

考虑到参与型应用（游戏娱乐类）的特殊性（反复参与），特给出此类应用的内容布局，目前应用到的应用有投票、真心话、打死也不说。

【应用规则】

放弃了之前头部的小头像和个人主页链接；

加入了面包屑，为了能够找到别人的列表页；

头部导航跟我看自己的一致，方面来回跳转，参与游戏娱乐；

参与类页图（三-2.4）

页面Title

每个页面都有自己的名称，产品中页面较多。在此制定一个统一的命名规则，避免命名的紊乱。

3.1总体规则

采用XXX（空格）-（空格）搜狐SNS

BaseApp

XXX采用App名字，例如注册、首页、好友、站内信、通知、请求、邀请、隐私设置、账号设置等大部分就是页面顶上小图标后面带的应用名称；

登录页特殊处理，直接采用欢迎来到搜狐SNS！来做title；

个人首页特殊处理，XXX采用人名，比如李池明-搜狐SNS，看自己的就是自己的名字，看别人就是别人的名字；

看别人的应用时，XXX采用别人人名+应用的形式，比如李伟的好友-搜狐SNS。

SystemApp

XXX统一采用页面顶上小图标后面带的应用名称；

考虑到应用都采用ajax加载方式