搜狐白社会界面交互规范
白社会界面交互设计规范
2010-4-16初稿
第一章 概述 ........................................................................................................................ 1
1. 目的 ............................................................................................................................................... 1 2. 适用范围 ....................................................................................................................................... 1 3. 适用群体 ....................................................................................................................................... 1
第二章 原则 ........................................................................................................................ 1
1. 宗旨 ............................................................................................................................................... 1 2. 真实世界隐喻原则 ...................................................................................................................... 1 3. 有效反馈原则............................................................................................................................... 3 4. 简洁明了原则............................................................................................................................... 3 5. 一致性原则 ................................................................................................................................... 3
第三章 产品通用规范 .......................................................................................................... 3
1. 页面结构 ....................................................................................................................................... 3 2. 内容区 ........................................................................................................................................... 4 3. 页面Title ...................................................................................................................................... 9 4. 交互行为 ....................................................................................................................................... 9 5. 操作反馈 ..................................................................................................................................... 12
第四章 组件交互细则 ........................................................................................................13 第一节 信息输入 ................................................................................................................................ 13
1. 表单组合 ..................................................................................................................................... 13 2. 下拉层 ......................................................................................................................................... 16 3. 权限设置 ..................................................................................................................................... 17
第二节 导航 ......................................................................................................................................... 18
1. 面包屑导航 ................................................................................................................................. 18 2. TAB导航 ..................................................................................................................................... 19 3. 翻页导航 ..................................................................................................................................... 19
第三节 信息展示 ................................................................................................................................ 20
1. 头像和人名 ................................................................................................................................. 20 2. 信息列表 ..................................................................................................................................... 22 3. 日期时间 ..................................................................................................................................... 24
搜狐白社会界面交互规范
第四节 消息提示 .................................................................................................................................... 25
1. 通知消息体 ................................................................................................................................. 25 2. 对话框 ......................................................................................................................................... 27
第五节 社交 ............................................................................................................................................ 29
1. 评论 ............................................................................................................................................. 29 2. 回复 ............................................................................................................................................. 30 3. 转发 ............................................................................................................................................. 31 4. 分享 ............................................................................................................................................. 31
第六节 富交互 ........................................................................................................................................ 32
1. 富文本输入 ................................................................................................................................. 32 2. 好友选择 ..................................................................................................................................... 33 3. 文本编辑 ..................................................................................................................................... 35 4. 照片处理 ..................................................................................................................................... 37
第七节 操作按钮 .................................................................................................................................. 39 第八节 特殊情况处理 ........................................................................................................................ 39
1. 空用户，空内容 ........................................................................................................................ 39 2. 有用户，空内容 ........................................................................................................................ 39 3. 有用户，隐私内容 .................................................................................................................... 41
搜狐白社会界面交互规范
第一章 概述
1. 目的
在产品设计初期，进行了部分功能的交互设计之后，将用户与界面之间的交互行为总结归纳出来并加以延展，从而形成设计规范，籍以帮助我们统一现有的交互设计，并指导后继开展的交互设计工作。
在产品开发过程中，给不同部门的相关人员提供统一的规范指导，使沟通与合作顺利有效进行，以实现产品界面的规范化。
2. 适用范围
除游戏外的所有白社会服务应用界面。
3. 适用群体
参与产品的设计人员以及运营和测试人员。
第二章 原则
原则就是军规、法规，指导我们在交互设计中需要遵守的最基本的设计准则。效仿\有法可依、有法必依、执法必严、违法必究\的方针，先把这个\法\建立起来，做到有法可依。 当然，交互设计原则也像其他法律一样，同样会遇到在某些情况下某条原则和另外某条原则冲突或度的多少不好把握的问题，这就需要在执行过冲中灵活运用，不能过于教条和死板，要发挥设计师的聪明才智，判定应该如何取舍和坚持。
把握用户的目标为宗旨，任何时候协调良好的界面都无需给规范制度让步，而界面设计的最高境界是没有界面。
1. 宗旨
不让用户思考
交互设计的目的就是让用户不知道交互设计的存在，在不知不觉中完成任务。其根本原则就是在用户和机器交互时，不让用户进行任务核心目标之外的任何无意义思考，一切以\下意识\的方式完成。
基于\不让用户思考\的基本原则，可以发展出下面几个大原则，每个大原则中又有一些小原则进行详细约定。
2. 真实世界隐喻原则
1
搜狐白社会界面交互规范
不让用户思考，首要做的就是一切尽量以用户已经熟知的方式进行设计，那么用户最熟知的方式，就是来源于真实的世界。
2.1设计重用原则
再真实的模仿在目前的技术水平也很难完全还原，所以多少要在计算机世界种创造出一些真实世界没有的东西。但这些都已经经历了前人无数次的总结，而且被用户们所习以为常，形成了很好的\模式\。所以，这里说的真实世界隐喻中最好的原则就是设计重用。这里有一些关于设计模式的总结文章，值得读一读：
《10 Useful Web Application Interface Techniques》
《10 Useful Techniques To Improve Your User Interface Designs》 《12 Useful Techniques For Good User Interface Design》 《12 Standard Screen Patterns》
2.2自然语言原则
老的设计来自于重用，新的设计来自于自然语言。把自己想象成屏幕后面的电脑，应该如何与用户沟通？真实世界的相似事情，应该如何进行？设计时，不妨两个人一个扮演电脑，一个扮演用户，交互一下，会发现很多可行的设计方案。
比如邀请注册引导流程，可以想象成真实世界中某人邀请某人参加一个party，从主人发送邀请函，到被邀请者收到邀请来到会场，主人前来迎接，进行宾客登记，主人介绍其他朋友给他认识，被邀请者自我介绍，主人介绍party各个部分的内容......这样一个流程下来，直到被邀请者可以自主的在party中活动和交流，算是完成了整个邀请、注册、引导流程。 再比如sophie曾经举过的windows和mac对窗口最大化最小化的设计对比，哪种更
2
搜狐白社会界面交互规范
自然，更像是真实世界可能发生的效果？
关于自然语言原则，臭鱼的一篇文章也提到\自然语言法\，可以读一读。
2.3默认状态原则
3. 有效反馈原则
a. 键盘可用原则 b. 及时反馈原则 c. 默认焦点原则 d. 防止重复操作原则 e. 可反悔原则 f.
交互区统一原则 g. 位置固定原则
4. 简洁明了原则
a. 主次分明原则 b. 5色3主原则 c. 去除干扰原则 d. 逻辑清晰原则 e. 层次清晰原则 f.
相关较近、无关较远原则 g. 知道我在哪原则 h. 最少点击原则 i.
操作流最短原则
5. 一致性原则
a. 同类一致原则 b. 异类不同原则 c. 元素最少化原则
第三章 产品通用规范
1. 页面结构
为确保产品的布局形式统一，根据目前的交互设计总结出产品的框架结构。在后续添加的服务或栏目，都以此框架为基础，在相应区域进行添加或设置。
3
白社会界面交互设计地要求规范
