白社会界面交互设计规范

1、搜狐白社会界面交互规范白社会界面交互设计规范2010-4-16初稿第一章概述11. 目的12. 适用范围13. 适用群体1第二章原则11. 宗旨12. 真实世界隐喻原则13. 有效反馈原则24. 简洁明了原则25. 一致性原则3第三章产品通用规范31. 页面结构32. 内容区33. 页面Title84. 交互行为85. 操作反馈11第四章组件交互细则11第一节信息输入121. 表单组合122. 下拉层143. 权限设置15第二节导航161. 面包屑导航162. TAB导航173. 翻页导航18第三节信息展示181. 头像和人名182. 信息列表203. 日期时间22第四节消息提示231. 通知

2、消息体232. 对话框25第五节社交271. 评论272. 回复283. 转发284. 分享29第六节富交互291. 富文本输入292. 好友选择313. 文本编辑334. 照片处理34第七节操作按钮36第八节特殊情况处理371. 空用户，空内容372. 有用户，空内容373. 有用户，隐私内容38搜狐白社会界面交互规范第一章概述1 .目的在产品设计初期，进行了部分功能的交互设计之后，将用户与界面之间的交互行为总结归纳出来并加以延展，从而形成设计规范，籍以帮助我们统一现有的交互设计，并指导后继开展的交互设计工作。在产品开发过程中，给不同部门的相关人员提供统一的规范指导，使沟通与合作顺利有效进行

3、，以实现产品界面的规范化。2 .适用范围除游戏外的所有白社会服务应用界面。3 .适用群体参与产品的设计人员以及运营和测试人员。第二章原则原则就是军规、法规，指导我们在交互设计中需要遵守的最基本的设计准则。效仿”有法可依、有法必依、执法必严、违法必究”的方针，先把这个"法"建立起来，做到有法可依。当然，交互设计原则也像其他法律一样，同样会遇到在某些情况下某条原则和另外某条原则冲突或度的多少不好把握的问题，这就需要在执行过冲中灵活运用，不能过于教条和死板，要发挥设计师的聪明才智，判定应该如何取舍和坚持。把握用户的目标为宗旨，任何时候协调良好的界面都无需给规范制度让步，而界面设计

4、的最高境界是没有界面。1 .宗旨不让用户思考交互设计的目的就是让用户不知道交互设计的存在，在不知不觉中完成任务。其根本原则就是在用户和机器交互时，不让用户进行任务核心目标之外的任何无意义思考，一切以"下意识”的方式完成。基于"不让用户思考”的基本原则，可以发展出下面几个大原则，每个大原则中又有一些小原则进行详细约定。2 .真实世界隐喻原则不让用户思考，首要做的就是一切尽量以用户已经熟知的方式进行设计，那么用户最熟知的方式，就是来源于真实的世界。2.1 设计重用原则再真实的模仿在目前的技术水平也很难完全还原，所以多少要在计算机世界种创造出一些真实世界没有的东西。但这些都已经经

5、历了前人无数次的总结，而且被用户们所习以为常,形成了很好的"模式"。所以，这里说的真实世界隐喻中最好的原则就是设计重用。这里有一些关于设计模式的总结文章，值得读一读：10UsefulWebApplicationInterfaceTechniques»10UsefulTechniquesToImproveYourUserInterfaceDesigns«12UsefulTechniquesForGoodUserInterfaceDesign»«12StandardScreenPatterns»2.2 自然语言原则老的设计来自于

6、重用，新的设计来自于自然语言。把自己想象成屏幕后面的电脑，应该如何与用户沟通？真实世界的相似事情，应该如何进行？设计时，不妨两个人一个扮演电脑，一个扮演用户，交互一下，会发现很多可行的设计方案。比如邀请注册引导流程，可以想象成真实世界中某人邀请某人参加一个party,从主人发送邀请函，到被邀请者收到邀请来到会场，主人前来迎接，进行宾客登记，主人介绍其他朋友给他认识，被邀请者自我介绍，主人介绍party各个部分的内容这样一个流程下来，直到被邀请者可以自主的在party中活动和交流，算是完成了整个邀请、注册、引导流程。再比如sophie曾经举过的windows和mac对窗口最大化最小化的设计对比，

7、哪种更自然，更像是真实世界可能发生的效果？关于自然语言原则，臭鱼的一篇文章也提到“自然语言法”，可以读一读。2.3 默认状态原则3 .有效反馈原则a.键盘可用原则b.及时反馈原则c.默认焦点原则d.防止重复操作原则e.可反悔原则f.交互区统一原则g.位置固定原则4.简洁明了原则a.主次分明原则b. 5色3主原则c. 去除干扰原则d.逻辑清晰原则e.层次清晰原则2搜狐白社会界面交互规范f.相关较近、无关较远原则g.知道我在哪原则h.最少点击原则i.操作流最短原则5. 一致性原则a.同类一致原则b.异类不同原则c.元素最少化原则第三章产品通用规范1 .页面结构为确保产品的布局形式统一，根据目前的交

8、互设计总结出产品的框架结构。在后续添加的服务或栏目，都以此框架为基础，在相应区域进行添加或设置。总体界面分为5各区域：导航区、工具区、内容区、声明区、联络区Logo行航班总体结构图（三-1）内容区是信息展示和用户完成相应操作的主要窗口，根据不同使用场景。内容区分为：首页、主页、应用类页、参与类页。2.1首页首页是用户登录后的界面，也是寸土寸金的黄金地段，每个想在首页提供快捷入口的应用或服务都需谨慎，在相应分区下进行添加删除。攫黑SN5记力q ifjt.。柠如.*二小用口身m.2*yM .*IiIF时鼾*lowilIX g4M,卜，. J IGrtFrQjrE越.E<& Tcdd

9、LW干 F才早由f?：A=S 和啕 笄门并：- 好甚a壬a 格不好47首页图（三-2.1）2.2 王页主页是用户个人的首页或者是他人的首页，此模式适用于各种用户的主界面，以及主页个TAB下的页面。IBffiSNS力力土力好互妆丹子券二，：." I1 r t'pRi.'PAnTOM CbrqKUij e F-s-fea a jet D»lr Firl'irrSuperI -th 岫n;此0"y.13e. Ttrdh 整建.1"卜 41 tfiDKT.阳冲Rr&saFi亘郛匚会.“HSftAiH M 3，目击向q自目:央书工5

10、*.-，； 二誉干开鼓¥自淳必用事可狂领密福主页图（三-2.2）2.3 应用类页2.3.1 用户自身的应用类适用于自己的档案、日志、照片、好友、短消息等页面。【应用规则】头部表明这是哪个应用，并有这个应用最重要的操作；第一级分类使用tabs导航方式；第二级分类使用sidebar导航的方式，比如inbox；如果分类层级较多，可以加入面包屑导航，比如照片；如果需要补充性导航或提示引导等，可以在右侧添加sidebar,比如通知请求的分类;授犯fNS 出口中人£二呼女眩rm，.通k叵旦5 中*0:fl1|<.&01IE££目 Nartzdue日阳I

11、Wm& Fonfipafiti日 Mat's mur IDlrH1P HSS E gB Be*ng 爪 6HK工 Kupg Fii Am* - QctDaJpRaM- 且ju Tl.IMtlWMMUlft,品1的T G%f MmfcTsnJi脚刀之 晤硼专谓Q Nirbai;FlF'面ke器n拧.> 立 > *ot-r+.i.- .r.;«r-二小评心，r -打串H诉»l'：Sfi-*:叩i7云三自身应用页图（三-2.3.1）2.3.2 用户他人的应用类适用于他人的档案、日志、照片、好友等页面。【应用规则】头部表明这是从属于某人的

12、内容，并介绍出是哪个应用；如果有很强烈的内容分类，比如某人的相同好友、某人的全部好友，可用tabs导航;如果有较多的层级关系，可用面包屑导航；学IB婚也H iKfflNdhEEp 旌9rie Firfipwr市4二五日区泰州yr iCye'5i左李出堀三二屈宴T鼻日小荀wijm靠£Nrrrfjr!Txiw芝.5S*X& 瘾-除»± F EG工口*中一不5,ECDFK ttC>吁金衣-乳:敦击-Toepen* 3|Satel Emeed 修Qtprpir Tirdh，淤屋!A iWIWJrltW三男二金黑.，:步、短事工唬及雷古Dr-rftoF

13、, PwmiwffX干产书=由空话苫M 黑七在不暮：用户他人应用页图（三-2.3.2)2.4参与类页考虑到参与型应用（游戏娱乐类）的特殊性（反复参与） 目前应用到的应用有投票、真心话、打死也不说。，特给出此类应用的内容布局,【应用规则】放弃了之前头部的小头像和个人主页链接；加入了面包屑，为了能够找到别人的列表页；头部导航跟我看自己的一致，方面来回跳转，参与游戏娱乐;三三三三： ?一二”1. 一：二二二二二 P 二一二 i “ T 叁，i -!.一抄朦SN5M贯小入生受JT&0g序期和参与类页图（三-2.4）3 .页面Title每个页面都有自己的名称，产品中页面较多。在此制定一个统一的命

14、名规则，避免命名的紊乱。3.1 总体规则采用"XXX（空格）-（空格）搜狐SNS”3.2 BaseAppXXX采用App名字，例如注册、首页、好友、站内信、通知、请求、邀请、隐私设置、账号设置等.大部分就是页面顶上小图标后面带的应用名称；登录页特殊处理，直接采用"欢迎来到搜狐SNS"来彳title;个人首页特殊处理，XXX采用人名，比如"李池明-搜狐SNS",看自己的就是自己的名字，看别人就是别人的名字；看别人的应用时，XXX采用别人人名+应用的形式，比如"李伟的好友-搜狐SNS"。3.3 SystemAppXXX统一采用页

15、面顶上小图标后面带的应用名称；考虑到应用都采用ajax加载方式，应用内不再做title区分；看别人的应用时，XXX采用别人人名+应用的形式，比如"李伟的日志-搜狐SNS"。4 .交互行为界面中具有交互行为的文字或图片，都应该在鼠标指针移过可点击区域时可点击区域的视觉变化，用以说明该对象是可操作的以及何时可以进行操作。对象对鼠标指针移动的响应必须即时有效；响应形式必须明确清晰；（如：鼠标移过按钮，按钮有被按下的效果）交互反馈表现必须保持高度的一致，同等功能和操作的元素反馈形式必须相同；（如：鼠标指向链接文字时都做同样的变化）在鼠标指针移开时对象必须即时恢复原来状态。产品中的交

16、互行为有较多，产品里的交互形式较多，下面罗列目前已有的交互行为并就特殊要求的行为作补充说明，其余不作说明的交互行为遵循界面中交互行为的反馈形式。4.1 输入4.2 点击4.3 切换4.4 划过鼠标划过区域背景高亮，常用于表状内容体，内容过长较分散，为了使内容标齐，采用鼠标划过，背景高亮。如：好友管理列表、站内信列表4.5 关闭4.6 加载内容块加载：预加载的内容块先空白，在中间先出现大loading图片，加载完后显示全部内容；信息条加载：预加载的信息条先空白出一行，居左出现小loading图片，加载完后显示该信息条内容4.7 提交提交按钮：点击，按钮disabled,文字变为"提交/

17、保存/发表中"，提交成功后，恢复原样单输入框+提交按钮：点击提交后，输入框和按钮disabled,按钮变为"提交中",提交成功后恢复4.8 拖放用户可以用鼠标抓取一个对象，并将它从一个指定位置移动到另外一个指定位置的操作，我们定义为拖放”。拖放能简单，直观，快速地帮助用户实现布局排序等操作。如梦幻城游戏界面中建造房屋。拖放遵循所见即所得的操作原则，使整个交互过程可视化，大大降低了用户由于误操作所带来的不便，同时也增加了用户参与互动的娱乐性。drao handle to1dr3g handle to movedraghandletomove3拖放图示（三-4.8）【

18、设计意图】让用户简单、直观、快速的达到移动对象的目的；增加用户参与互动的娱乐性；通过单一性设备鼠标直接完成操作任务;遵循所见即所得的操作原则，让用户的操作过程可见，减少出错几率。【应用规范】单条拖放：鼠标划过：拖动区域有响应变化，且鼠标变为十字形；鼠标点击不松并拖拽：拖动区域边缘高亮，且区域半透明；提供是否可移动到该处拖动至目标：周围元素让出空位，用高亮的虚线标出目标位置，的视觉反馈；目标位置后松手：插入目标位置，且其它元素自动排列；拖动至其它非目标位置：松手后回复原位置。多条拖放：鼠标点击：单击激活选中元素，元素周围高亮，再次单击此元素或其它元素，取消选择,选中其它元素按住Alt键点击：单击

19、多个元素，同时高亮，显示多个元素都被选中，再次点击选中元素时，取消选择拖拽：跟单条时一致5 .操作反馈包括级别定义和各级别交操作反馈规范主要用于用户进行一个操作之后的提示和引导,互的定义。5.1 级别定义分为如下几个级别：成功通知：主要是由于用户操作并得到成功结果的通知及引导一级提示：主要是由于用户操作不符合条件所得到的反馈，比如表单填写不充分等二级提示：主要是由于用户操作符合条件但遇到规则限制造成的，比如重复操作，达到好友上限等错误提示：主要是由于用户操作遇到了服务器端异常导致的，比如服务器宕机，数据库连接不上等5.2 各级别交互定义成功通知：直接显示结果页面上显示成功提示（3秒后消失）di

20、alog通知一级提示：即时验证，单项文字提醒dialog提示，逐项列举未完成条件二级提示：页面上显示限制提示（不消失）dialog提示，列举限制条件错误提示：dialog提示，列举错误信息之前是机器语言，现优化为用户语言dialog详细定义：标题：出错了内容：啊哦.白社会运转出现了点小问题，请稍等片刻再尝试一下按钮：确定第四章组件交互细则第一节信息输入1.表单组合表单组合”，是含有预定义的区域用以输入信息的一种表单形式，它通常具有较好的数据组织结构并且易于查看。用户通过表单组合”输入并提交信息，从而完成指定功能，例如，用户注册，写站内信，个人设置等。一个对于用户的操作具有指导性，可以从简洁流畅

21、完成任务的角度提升用户体验的表单组合”，将更有利于提高表单组合”的完成率。性”朝至r三Q生日：遗圣年份二|他择年份二梅挥年份二|r这是阴历生日而军;降迪T民旗:陶呈民族三人生阶段;僻人生阶屋一二电话号培：|-|V电话号码正确例如存|麒肖表单组合（四-1）【设计意图】使输入表单”的设计对于用户更具指导性；从简洁流畅完成任务的角度提升用户体验。【组成】输入表单由标签、输入域、提示信息、反馈信息和表单命令组成，如下图所示。其中，一个标签及其相应的输入域可称为一个表单项。标签：相应的输入域的名称；输入域：允许用户输入、编辑、选择的区域，其表现形式可为文本框、下拉选择框、单选

22、/复选框等（输入域中的控件要合理使用，请参见windows用户经验）；提示信息：出现在用户输入之前，起提示作用的信息。通过对输入规则，输入目的，输入后果或对某个标签意义进一步解释等信息的表达，对用户的输入进行有针对性的提示，从而帮助用户完成输入。反馈信息：出现在用户输入完成之后，针对用户的输入，反馈给用户的信息。在用户完成输入后，通过对用户已输入信息的校验，反馈给用户校验结果（对错），若用户输入出错，则反馈给用户出错原因，修改建议等，从而帮助用户及时、准确的修改错误输入。表单命令：对整个表单进行操作的一个或一组命令。常见的有完成“、提交“、重置”、退出”等。表单项标塞输入域提丁格息提交信息表单

23、命令表单组合命名示例图（四-1.1)【应用规范】标签的命名要简明、易懂，使用社会化语言，而不是机器语言；一个表单项中的标签和输入域在视觉表现上要为一体，不能造成用户阅读表单的障碍；表单项不超过51时，表单的完成率最高。如果表单项超过20项，在无特殊要求的情况下，要让用户分步完成，并且提供进度指示。进度指示要指明用户当前位置，距离完成本表单还有几步，进度指示要使用户在填写表单的过程中始终可见；要合理利用整个表单的空间，输入域的大小要尽可能的显示出用户的所有输入内容；若表单项进行了分组，那么分组标志应清晰标示分组。例如，使用分组线，分组框；若表单项存在必填项和选填项，那么在视觉上必须加以区分，例如

24、，必填项以星号标识,必填项和选填项分组显示，并标注说明；当判断出用户出错或存在无效输入时，不要清空用户原来的的输入，以便用户参考修改。【对齐规则】表单项目名居右对齐；表单内容居左对齐；表单中提示性内容另起一行，左对齐，使用浅色字；验证信息紧跟着表单内容显示，默认使用图标+文字;按钮跟表单内容一起左对齐【提示反馈】必填项为空状态的交互处理：在必填项为空时，统一不用文字进行提示，采用点击按钮后，输入框红闪的交互效果。文字超出时的交互处理：对于文字超出的状态，通过限定输入框的最大输入字数，不能继续输入或粘贴对于多表单提交的处理方式：当多表单提交时，由于表单长度过高，可能会看不到为空的状态。同时，可能

25、是多项输入框都需要提示，所以采用弹出对话框，分项列出错误信息。如例：1 .日志标题不能少于2个字2 .日志内容不能为空对于对话层里表单提交的处理方式：由于对话层内不可弹出新的提示层，所以当出现错误时，直接在错误的输入框下显示错误信息。对于服务器端返回的错误提示：关闭现有的提示层，出现新的错误提示层。例：好友加满时弹出新的提示层。2 .下拉层下拉层用于在某模块有多条数据，但在界面中只显示一个标题或代表的情况。这种组件形式的优点是可以保证主界面的简洁性，同时又能承载较多数据量；不足之处是交互不是很便利，数据有一定的隐蔽性。所以在使用时谨慎权衡其利弊。目前产品中有两种下拉形式：下拉菜单和下拉列表。一

26、个好的下拉层可以让界面非常简洁，还能提供丰富便利的交互行为。消息(4)UMiamL性巨alsoeommMtedoriiherstatus.L：-5='：JinjiangZhangcomnnentedonycMurstatus.二三一：£：工VivianLeedisccommentedonherstatus.口一下w二口VivianLeealsocommentedonLynnChai'sstatus,k建私I港可以看到我的个人喈素:I好友的好友原存I关闭中国cornmentedonyourstatus12hanaoii下拉层示例图(四-2)2.1 下拉菜单常用于选择性的

27、项目，即选择一项后即可；一般为点击后触发，也会有个别情况是鼠标滑过触发;选择某一项后或者鼠标点击菜单外，菜单消失。冏埸私设置冏应用-殳道冏聊天设置下拉菜单图（四-2.1）2.2 下拉列表常用于浏览型或设置型项目，即打开下拉后需要浏览或设置操作;点击后触发；再次点击触发位置或者设置完毕，菜单才消失。消息Vivian Lee alee commented on her status, 1/5 3C|0Vivian Lee also commented onL Tin Chsi's i切See AJVivianLeealsoCDmiTEntEdonhersiatus.2Sseen-匚sago

28、Ji-",i-="icZlOT'i'ro'yourstatus.".?：二二二嶷补港可以看学俄的个人档案：|好友的好友*关闭|中国comnentEdonyourstetLis,1：-.5=r-下拉列表图（四-2.2）3 .权限设置常用于选择权限设置的地方，如隐私设置、日志浏览权限、照片专辑浏览权限等。存在于页面上，个别情况存在弹出对话框中，如个人档案中的联系信息设置。应用规范如图示:平时逸株怛至郃三就用尸.外度肢外度的丹及、长好求、贤自己HT：i i：!F.闻作自定二酒工附，立:具=打不县川乩兰定义前当世疗鼻定支设置：iHl定E,她通回烟笥

29、收弯，回酎点击*遇世白江 文谀直",再再FT开面尾酊界M由苒匚工工派直权限设置图（四-3）第二节导航1 .面包屑导航应用于标注当前操作所在具体位置的设计中，让用户清晰的知道自己的位置，不至于迷路”，同时提供便捷的通道，方便用户切换到其他相关页面，图形化面包屑还提供一键回到较高层次的服务，帮助那些通过搜索或者深层次链接进入到特殊但是不合适页面的用户。【设计意图】防止用户在浏览过程中迷失；同时提供多入口，方便用户随时到达目标位置;方便用户定位在页面中的位置；合理的有效的利用空间，整合地址栏和面包屑的功能于一体；面包屑显示用户的当前位置，帮助用户理解所处位置与整个网站的关系。【组成】用户名

30、称的总>臬个为（>某个'XXffiKK面包屑导航图（四-二-1）【应用规范】面包屑与地址栏合二为一；路径关系要正确，路径文本要与上下文相一致；在层级之间必须使有一个含义简单明确的分隔符；面包屑的最末级，不再提供分隔符。2 .TAB导航TAB是利用网页小空间展现大量信息的一种形式，并为用户清晰的指示出当前所处的位置。一般情况下，当在分类标题数为2-10个，且标题数不经常改变时，可以使TABTAB的使用可以帮助用户在大量信息中导航。activedTAB导航图（四-二-2）【设计意图】在一系列可选标题中为用户清晰的指明当前位置。可帮助用户在大量信息中导航。【应用规范】页签的表现形

31、式可以多种多样，但分类标题的关联内容应在视觉上连接到当前激活的页签，并保持一致的设计风格，如使用相同的颜色，同一个边框，指示箭头等。使用相同颜色的表现风格，为典型的页签表现形式；页签标题文字最好保持在5个中文字符以内，或1,2个英文单词，并且页签宽度应能保证完整显示出标题文字；同一时间只有一个页签处于激活状态；激活的页签应提供视觉反馈，如：高亮当前选择，标题文字字体颜色改变等；页签应尽量单行显示，如实在显示不下，可考虑使用下拉菜单或其他解决方案。3 .翻页导航数字翻页模式应用于列表数据条目较多，文章篇幅较长的设计中，来对数据和篇幅进行更好的展示。根据页码数的不同情况，数字翻页控件有如下几种形式

32、，在设计过程中酌情选择。1、页53数已知2、页码数'于等于512345下一页上一页,123415下一页上一页1234S12 3 4 - 6 下一页3 2 3 4 6 下页 上一1 - 3 4 5 $ 下一页 上一页12 3 4下一页上页1-1 m 14 15 *,* mo下页上一页 1 - 2Z 28 29 J0下一页上.一页下一页卜一贡L页日数已知2、页卫数等于后L页母数已知2,页用数大于61、页吗数未知翻页导航图（四-二-3）【应用规范】页码数已知的情况，使用前三种页码数未知的情况，使用第四种页码数为1时，不显示分第三节信息展示1.头像和人名头像和人名是白社会中用户必不可少的标示,

33、根据不同页面有不同的组合使用情况。目前制定出了一下组合形式和各种形式下的尺寸规范。头像和人名的交互反馈形式参见：三-3交互行为。1.1头像:用于个人主页上，最大170*200;用于Home的头像位置，固定80*80;用于最常用出现的头像或头像+名字，固定48*48;用于右侧的好友列表上，固定40*40。4舞*府用干苴E用F黑偌soso应月于带头像应用于1 项个人头像加地办或表蛤他打个势呼 殆怙匕消.目给他。砌友头像（四-三-1.1）1.2头像+人名+状态:用于垂直列表；用于单独呈现某个用户用户名称往事如俎随风敢去台用户隹除往事如烟，随风散去往事如烟.随说散去用户包弥往事如妞逋风散去头像+人名+

34、 状态（四-三-1.2）1.3头像+人名：用于横向列表或多行;用于群组呈现用户。用户名称用户名称头像+人名（四-三-1.3）2.信息列表根据信息产品中多数信息的展示都是以列表形式提供给用户，是用户最主要的信息获取源。不同的信息，我们归纳了如下几种信息情况的信息列表，并对相应形式做了图示说明。列表的交互反馈形式参见：三-3交互行为。2.1 Newsfeed歹U表-'I李，西朗白天不睡觉，虹t不工作-1.：函£判明E天不睡品，晚上不工作-1«：W-宜逐*匣手泡叫撰写了日志13;10港北京移动送无值卡洋如攻晦第一步：门开活动页面卜 npnamobile.cc rn<

35、vA/aciivity/'ca rn Ival/xunhaoind&x,加人手机号和图书全史Newsfeed列表（四-三-2.1）2.2Minifeed列表I*李池明白天不蛊觉，晚上不工作-18:10李旭明白天不捶觉,晚上不工作1-1E£李池明提写了日志1一北京移动送充值卡详招攻唱第一步；打开活动页面http;/www,bjnchinamobiI显示方式:单行图示UfOKSm3详细显示4二工工H李池明上传了2张照片到我的生活Minifeed列表（四-三-2.2）2.3评论列表帛口司M尔干片呢，好素羽-豆必尔干算呢.好累那你呢.好素啊变春总显示更妾$蔡评论，.书巴尔干访

36、泥,好景我习跳尔干南用,好累那你昆.好景二河评论列表（四-三-2.3）2.4留言列表生传留言;01-031810'册尔干演呢.好景阴胧尔干嘛呢.好累那你呢r好事啊二春居留言：我就要买叩3000,咋不服啊提杰里雷言!剪了头你们就不认识我了留言列表（四-三-2.4）2.6feed规则当前条数内，多人对同一主体内容进行相同操作的feed,合并主语显示；常用于参与型app,比如投票、真心话、说秘密格式：小明，小王，小张参与了真心话+1+1=?+2小时前当前条数内，某人对同一app下同一主体进行多次操作的feed,只显示最近一条；常用于操作型app,比如评论、标记；格式：小明对日志xxxxxxx

37、xxxx进行了评论2小时前当前条数内，某人对同一app下不同主体进行多次操作的feed,合并后面的主体；常用于修改或添加型app,比如好友、个人档案、应用；格式：小明加了小张，小王，小刘为好友2小时前当前条数内，某人在同一app下产生UGC内容，如果相似，只显示最近的n条；常用于UGC型app,比如日志、照片、分享；格式：小明在专辑XXXXXXXXX）冲上彳专了7张新照片2小时前3.日期时间产品中有很多时间提示信息，根据不同的使用场景，归纳出如下几种时间形式。在后续的设计中，可以根据使用场景从中选取相应形式。正序长版：2009年1月15日2:30pm正序短版：2009-1-158:30am倒序

38、：<2秒刚刚2秒-59秒2-59秒前1分钟-59分59秒1-59分钟前1小时-23小时59分59秒1-23小时前1天-6天23小时59分59秒1-6天前1周-3周6天23小时59分59秒1-3周前1月-1月3周6天23小时59分59秒1月前>2月xxxx年xx月xx日Feed时间显示：时间线1）小时线：在今天范围内，按照每小时划分的线。0:001:002:003:004:005:0019:0020:0021:0022:0023:002）日期线：分为昨天、本周、上周、本月、上月、很久以前Feed时间1）今天：显示为xx:xx,例如6:56am2）昨天：显示为xx:xx,例如0:30a

39、m3）昨天以前：显示为xx月xx日xx:xx,例如12月1日11:23am评论时间评论的时间始终显示xx月xx日xx:xx,例如12月1日1:23pm第四节消息提示1 .通知消息体1.1 通知列表通知消息体尽量简短，不显示用户操作的评论或留言的内容，但可以显示通知的对象。例如真心话里，不要显示"他的真心告白是：我爱好读书'"通知消息体尽量使用主动语式，主语为某人。例如：1 .某人对你的某件东西做了什么样的事情。例如：张小敏对你的日志XXXXX发表了评论张小敏在一张照片中提到了你查看2 .某人和你做了怎样的事情例如：张小敏也加你为好友张小敏跟你交换了真心话：XXX通知

40、尽量引导用户到最终页，进行下一步操作。在消息体中，如果操作的最终对象是名词，则直接在该对象上加链接。如果通知中没有最终对象，则在后面添加明确的"查看"或“阅读”等链接。例如：1 .消息体：”张小敏对刘小贺的日志XXX发表了评论""XXX"需要加链接，不需要添加其它的引导操作2 .消息体：”张小敏给你留言了查看“需要添加"查看"作为引导链接人名和链接的左右都有空格，第一个字是链接时，不需要左空格。1.2 通知合并规则1.2.1 同一个人对同一个内容发生的相同操作，只显示最后一条。常用于评论的通知例如：小A评论了你的日志 小A评

41、论了你的日志 小A评论了你的日志 只显示最近一条XXXXXXXX分钟前XXXXXXXX分钟前XXXXXXXX吩钟前1.2.2 不同人对同一个内容发生的相同操作，合并主语显示。常用于评论、真心话、照片标记的通知例如：小A评论了你白日志XXXXXXXX分钟前小B评论了你白日志XXXXXXXX分钟前小C评论了你白日志XXXXXXXX吩钟前合并为：小A小B小C评论了你的日志XXXXXXXX分钟前小A跟你交换了真心话XXXXXXXXXXXX3钟前小B跟你交换了真心话XXXXXXXXXXXX分钟前小C跟你交换了真心话XXXXXXXXXXXX8钟前合并为：小A小B小C跟你交换了真心话XXXXXXXXXXXX

42、3钟前小A标记了你的照片3分钟前小B标记了你的照片5分钟前小C标记了你的照片8分钟前合并为：小A小B小C标记了你的照片3分钟前1.2.3 收到同一类型的请求的通知。常用于游戏和加好友的请求例如：小A申请加你为好友处理3分钟前小B申请加你为好友处理5分钟前小C申请加你为好友处理8分钟前合并为：小A小B小C申请加你为好友处理3分钟前1.3 通知面板通知状态分为未点击未见过、未点击已见过、已点击、已删除4种状态。1.3.1 未点击未见过默认在头部有红泡提醒数目，点击触发面板后红泡消失，且通知面板里的未见过通知有黄退效果。1.3.2 未点击已见过由状态一转变而来，存在于通知面板中，无红泡，无黄退效果。

43、1.3.3 已点击凡是通过在通知面板中或者通知汇总页中，点击过通知中的链接的，为已点击状态。已点击的通知即从通知面板中消失，但还存在于通知汇总页中1.3.4 已删除凡是通过在通知面板中或者通知汇总页中，删除成功的，为已删除状态。已删除即从下拉面板和通知汇总页都消失通知面板显示一和二状态通知汇总页显示一、二、和三状态2.对话框采用弹出层形式的对话框，用于对主界面操作进行强调或补充的一种交互形式。目前产品中有如下几种对话框，当使用某种对话框时，请遵循相应的规范。2.1 确认框常用于删除或批量操作，再次确认使用。交互规则：直接显示对话框，点击按钮后直接消失。标题：操作+目标，例如删除日志，删除照片专

44、辑，解除好友关系.按钮：确定+取消确认框（四-四-2.1）2.2 操作框常用于进一步操作，入口较小，但操作步骤较多时，比如加好友，设隐私等。交互规则:直接显示对话框，确认完毕后，变为通知框。标题：操作+目标，一般为入口的名字，例如新建照片专辑，修改真心话，添加选项.按钮：保存（行为）+取消，行为例如加为好友，添加，分享.2.3通知框常用于确认框和操作框的确认后，通知用户结果，按钮立即消失，如果不点击按钮，1秒后渐隐消失。标题：沿用之前操作框的标题般只有一个按钮。交互规则：点击按钮：关闭2.4提示框常用于表单提交后的验证，通知用户哪些信息不完整或者操作步骤不对。使用1、2、3的序号排列多条信息提

45、示标题：提示按钮：确定提示框（四-四-2.4）2.5未保存提示框常用于表单未保存就跳转的提示，提示用户未保存信息是否需要保存。标题：未保存+目标，例如未保存日志，未保存个人档案，未保存隐私设置按钮：保存+不保存+取消快捷键：支持键盘的enter操作框上的主操作，一般为"确定""保存"等，支持键盘的 esc操作框上的取消/关闭操作，一般为"取消""关闭XX”等。第五节社交让用户直观简便的对主题或内容进行评鉴和发表评论,同时让用户在使用中获得良好交1.评论互效果。产品中有两种状态：未激活、激活。1.1 未激活状态存在于一般界面的

46、话题或内容下方，默认有“添加评论”文字提示周岚；今定天气不错适合造谣M显示竽郅1Q条押你周岚4月14日才盯,用 回复 不要造谣添力掰论未激活评论（四-五-1.1）1.2 激活状态点击表情当鼠标点击输入框后，评论框被激活，呈现如下形式。文本域中可输入评论内容,展开表情集合。周岚：今天天气不错,适当造谣3星示金都10条评沱周岚4月“日。,47加7回复不要造谣激活评论（四-五-1.2.1）I周岚:今天天气不错，适合造谣7蕾4月4日933am-回要至.,二用激活评论输入表情（四-五-122）2.回复回复是针对某人的发言进行回复，因此每个回复都有一个对象。回复与评论使用的是同一控件，考虑回复的特殊性，在

47、点击回复时，输入框中自动带出回复的对象，其余交互形式与评论相同。10.05am -便松-转发王蒋 4Kle日 IQUSnr 昨天去苏州了，亲爱的.R王然4月14日10；杜子？快来？回复回复王毅：-回复显示全部5条评论回复（四-五-2）3.转发占焦点的确认对话框。对话框的交互规范遵循对话框交互规则。转发是对某主题或内容进行转发到自己的一句话中,这里的交互是点击转发后，弹出独对话框中的内容为：确认问题+转自人用户名+文章标题回复（四-五-3）4.分享分享是对将好友或者其他有联通的文章，分享到自己的分享分类下。点击分享后，弹出独占焦点的分享对话框。对话框的交互规范遵循对话框交互规则。对话框中的内容为

48、：分享理由+分享标题分享（四-五-4）第六节富交互1 .富文本输入主要应用于带表情的输入，如产品中的评论、回复等。形式如图示，交互行为遵循各自元素的交互规则。1.1 带表情的输入框常用于状态更新的输入框挂点爸久百招的手掷空了.以物的辱殳点、dr表情蔺人支享技襄情带表情的输入框（四-六-1.1）1.2带表情的输入区域常用于评论的输入区域和留言的输入区域。升级：默认设置2行的高度，当内容超过 1行后自动增加1行高度，以此类推带表情的输入域（四-六-1.1）1.3 智能输入区域组件:用于：状态更新、评论、站内信、分享理由、真心话、说秘密、投票描述要求：1）输入区域高度会随着内容的多少伸展，保证始终空

49、出一行的高度，没有右侧滚动条2）能限制最大输入字数，多余字数将不能继续输入3）无字符输入时不能提交（包括空格、换行）4）回车是换行，ctrl+回车是提交5）支持表情插入2 .好友选择目前寻找好友有三种渠道：查找、系统推荐可能认识的人、寻找MSN/Email联系人,三种形式相辅相成，满足用户的不同需求，提供较好的用户体验。2.1 查找【设计意图】查找好友渠道可满足用户只有范围没有既定目标，通过询问系统形式来找到好友。目前有三种查询方式：找同事、找同学、找同城好友。【组成】由输入框和三个方式算选链接组成。如图：沿找同事找同学找同城好友好友查找（四-六-2.1）【应用规范】未激活状态下，输入框有提示

50、性文字。可在输入框输入姓名、学校、公司;激活后提示文字消失，可在输入框完成输入操作；如输入关键字有相应结果则点击查找后进入结果页；如没有查询结果则出提示文字“没有找到相关结果，试试用其他方式查找”2.2 系统推荐可能认识的人【设计意图】满足用户随机添加好友的情况，系统根据用户的资料给他推荐可能相识的人。【组成】直接展示用户列表。包括用户头像、用户名、推荐理由、加为好友的快捷操作。如图:你可能认识的人处李瑞，保的白EWI的事人I加琳f式£,岸在一起字可+加为科鬣渡苏昌ft你却能在：i位共同将寂加力好友一 遑礼伟£7 你和他有L位共同好去E>Al 4工必行发42*-在一起

51、掌./加知拉宜塞黑01匹潸可请何群呼你和他前1位共同好苴 +加粉中发渡刘摘方和他有2位拌同好友+加知卢友滥严胖胖也一旦宇+加为好友温目附本归和她有2隹将同好友+ DILWF 壶B*壬停*忖扪岫后可反R同不罡+加为期衷懦窿中你本地有:联同疆发SSC + m为旺其豆姜小惠你更他真呼同/光+加为好友蠡盛乂你知恰有2隹共同好交+理力好友怎呈金星r' 你乳有二位共同奸ar 尸K +加为好支好友列表（四-六-2.2）【应用规范】点击头像和用户名，进入用户的个人主页；点击加为好友的快捷操作，弹出加好友的对话框。2.3 寻找MSN/Email联系人【设计意图】方便用户把MSN里的好友，或者是Email中的联系人邀请到系统中来。【组成】MSN和Email两种渠道的单选按钮、账号输入框、密码输入框、寻找MSZ/EniHi唯系人MSMO匚用由I晶自社合不含存储你的密码Ji靓I心使用MSN找好友（四-六-2.3.1）、寻靛MSZ/Email屐系人QMSMEmail邮箱：|_仰密呜：匚晶白社会不会存储行的宓碣，请放心使用Email找好友（四-六-2.3.2）【应用规范】默认状态下是MSN方式；登录MSN或者登录Email后展示，展示好友中已经入驻白社会的联系人和还未入驻白社会的联系人；选中未入住的联系人前的