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

  1. 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
  2. 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  3. 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  4. 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  5. 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  6. 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  7. 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多

搜狐白社会界面交互规范

白社会界面交互设计规范

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加载方式

文档评论(0)

135****8227 + 关注
实名认证
文档贡献者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档