白社會(huì)界面交互設(shè)計(jì)規(guī)范

1、搜狐白社會(huì)界面交互規(guī)范白社會(huì)界面交互設(shè)計(jì)規(guī)范2010-4-16初稿第一章概述11. 目的12. 適用范圍13. 適用群體1第二章原則11. 宗旨12. 真實(shí)世界隱喻原則13. 有效反饋原則24. 簡(jiǎn)潔明了原則25. 一致性原則3第三章產(chǎn)品通用規(guī)范31. 頁(yè)面結(jié)構(gòu)32. 內(nèi)容區(qū)33. 頁(yè)面Title84. 交互行為85. 操作反饋11第四章組件交互細(xì)則11第一節(jié)信息輸入121. 表單組合122. 下拉層143. 權(quán)限設(shè)置15第二節(jié)導(dǎo)航161. 面包屑導(dǎo)航162. TAB導(dǎo)航173. 翻頁(yè)導(dǎo)航18第三節(jié)信息展示181. 頭像和人名182. 信息列表203. 日期時(shí)間22第四節(jié)消息提示231. 通知

2、消息體232. 對(duì)話框25第五節(jié)社交271. 評(píng)論272. 回復(fù)283. 轉(zhuǎn)發(fā)284. 分享29第六節(jié)富交互291. 富文本輸入292. 好友選擇313. 文本編輯334. 照片處理34第七節(jié)操作按鈕36第八節(jié)特殊情況處理371. 空用戶，空內(nèi)容372. 有用戶，空內(nèi)容373. 有用戶，隱私內(nèi)容38搜狐白社會(huì)界面交互規(guī)范第一章概述1 .目的在產(chǎn)品設(shè)計(jì)初期，進(jìn)行了部分功能的交互設(shè)計(jì)之后，將用戶與界面之間的交互行為總結(jié)歸納出來(lái)并加以延展，從而形成設(shè)計(jì)規(guī)范，籍以幫助我們統(tǒng)一現(xiàn)有的交互設(shè)計(jì)，并指導(dǎo)后繼開展的交互設(shè)計(jì)工作。在產(chǎn)品開發(fā)過(guò)程中，給不同部門的相關(guān)人員提供統(tǒng)一的規(guī)范指導(dǎo)，使溝通與合作順利有效進(jìn)行

3、，以實(shí)現(xiàn)產(chǎn)品界面的規(guī)范化。2 .適用范圍除游戲外的所有白社會(huì)服務(wù)應(yīng)用界面。3 .適用群體參與產(chǎn)品的設(shè)計(jì)人員以及運(yùn)營(yíng)和測(cè)試人員。第二章原則原則就是軍規(guī)、法規(guī)，指導(dǎo)我們?cè)诮换ピO(shè)計(jì)中需要遵守的最基本的設(shè)計(jì)準(zhǔn)則。效仿”有法可依、有法必依、執(zhí)法必嚴(yán)、違法必究”的方針，先把這個(gè)"法"建立起來(lái)，做到有法可依。當(dāng)然，交互設(shè)計(jì)原則也像其他法律一樣，同樣會(huì)遇到在某些情況下某條原則和另外某條原則沖突或度的多少不好把握的問(wèn)題，這就需要在執(zhí)行過(guò)沖中靈活運(yùn)用，不能過(guò)于教條和死板，要發(fā)揮設(shè)計(jì)師的聰明才智，判定應(yīng)該如何取舍和堅(jiān)持。把握用戶的目標(biāo)為宗旨，任何時(shí)候協(xié)調(diào)良好的界面都無(wú)需給規(guī)范制度讓步，而界面設(shè)計(jì)

4、的最高境界是沒有界面。1 .宗旨不讓用戶思考交互設(shè)計(jì)的目的就是讓用戶不知道交互設(shè)計(jì)的存在，在不知不覺中完成任務(wù)。其根本原則就是在用戶和機(jī)器交互時(shí)，不讓用戶進(jìn)行任務(wù)核心目標(biāo)之外的任何無(wú)意義思考，一切以"下意識(shí)”的方式完成?；?quot;不讓用戶思考”的基本原則，可以發(fā)展出下面幾個(gè)大原則，每個(gè)大原則中又有一些小原則進(jìn)行詳細(xì)約定。2 .真實(shí)世界隱喻原則不讓用戶思考，首要做的就是一切盡量以用戶已經(jīng)熟知的方式進(jìn)行設(shè)計(jì)，那么用戶最熟知的方式，就是來(lái)源于真實(shí)的世界。2.1 設(shè)計(jì)重用原則再真實(shí)的模仿在目前的技術(shù)水平也很難完全還原，所以多少要在計(jì)算機(jī)世界種創(chuàng)造出一些真實(shí)世界沒有的東西。但這些都已經(jīng)經(jīng)

5、歷了前人無(wú)數(shù)次的總結(jié)，而且被用戶們所習(xí)以為常,形成了很好的"模式"。所以，這里說(shuō)的真實(shí)世界隱喻中最好的原則就是設(shè)計(jì)重用。這里有一些關(guān)于設(shè)計(jì)模式的總結(jié)文章，值得讀一讀：10UsefulWebApplicationInterfaceTechniques»10UsefulTechniquesToImproveYourUserInterfaceDesigns«12UsefulTechniquesForGoodUserInterfaceDesign»«12StandardScreenPatterns»2.2 自然語(yǔ)言原則老的設(shè)計(jì)來(lái)自于

6、重用，新的設(shè)計(jì)來(lái)自于自然語(yǔ)言。把自己想象成屏幕后面的電腦，應(yīng)該如何與用戶溝通？真實(shí)世界的相似事情，應(yīng)該如何進(jìn)行？設(shè)計(jì)時(shí)，不妨兩個(gè)人一個(gè)扮演電腦，一個(gè)扮演用戶，交互一下，會(huì)發(fā)現(xiàn)很多可行的設(shè)計(jì)方案。比如邀請(qǐng)注冊(cè)引導(dǎo)流程，可以想象成真實(shí)世界中某人邀請(qǐng)某人參加一個(gè)party,從主人發(fā)送邀請(qǐng)函，到被邀請(qǐng)者收到邀請(qǐng)來(lái)到會(huì)場(chǎng)，主人前來(lái)迎接，進(jìn)行賓客登記，主人介紹其他朋友給他認(rèn)識(shí)，被邀請(qǐng)者自我介紹，主人介紹party各個(gè)部分的內(nèi)容這樣一個(gè)流程下來(lái)，直到被邀請(qǐng)者可以自主的在party中活動(dòng)和交流，算是完成了整個(gè)邀請(qǐng)、注冊(cè)、引導(dǎo)流程。再比如sophie曾經(jīng)舉過(guò)的windows和mac對(duì)窗口最大化最小化的設(shè)計(jì)對(duì)比，

7、哪種更自然，更像是真實(shí)世界可能發(fā)生的效果？關(guān)于自然語(yǔ)言原則，臭魚的一篇文章也提到“自然語(yǔ)言法”，可以讀一讀。2.3 默認(rèn)狀態(tài)原則3 .有效反饋原則a.鍵盤可用原則b.及時(shí)反饋原則c.默認(rèn)焦點(diǎn)原則d.防止重復(fù)操作原則e.可反悔原則f.交互區(qū)統(tǒng)一原則g.位置固定原則4.簡(jiǎn)潔明了原則a.主次分明原則b. 5色3主原則c. 去除干擾原則d.邏輯清晰原則e.層次清晰原則2搜狐白社會(huì)界面交互規(guī)范f.相關(guān)較近、無(wú)關(guān)較遠(yuǎn)原則g.知道我在哪原則h.最少點(diǎn)擊原則i.操作流最短原則5. 一致性原則a.同類一致原則b.異類不同原則c.元素最少化原則第三章產(chǎn)品通用規(guī)范1 .頁(yè)面結(jié)構(gòu)為確保產(chǎn)品的布局形式統(tǒng)一，根據(jù)目前的交

8、互設(shè)計(jì)總結(jié)出產(chǎn)品的框架結(jié)構(gòu)。在后續(xù)添加的服務(wù)或欄目，都以此框架為基礎(chǔ)，在相應(yīng)區(qū)域進(jìn)行添加或設(shè)置?？傮w界面分為5各區(qū)域：導(dǎo)航區(qū)、工具區(qū)、內(nèi)容區(qū)、聲明區(qū)、聯(lián)絡(luò)區(qū)Logo行航班總體結(jié)構(gòu)圖（三-1）內(nèi)容區(qū)是信息展示和用戶完成相應(yīng)操作的主要窗口，根據(jù)不同使用場(chǎng)景。內(nèi)容區(qū)分為：首頁(yè)、主頁(yè)、應(yīng)用類頁(yè)、參與類頁(yè)。2.1首頁(yè)首頁(yè)是用戶登錄后的界面，也是寸土寸金的黃金地段，每個(gè)想在首頁(yè)提供快捷入口的應(yīng)用或服務(wù)都需謹(jǐn)慎，在相應(yīng)分區(qū)下進(jìn)行添加刪除。攫黑SN5記力q ifjt.。檸如.*二小用口身m.2*yM .*IiIF時(shí)鼾*lowilIX g4M,卜，. J IGrtFrQjrE越.E<& Tcdd

9、LW干 F才早由f?：A=S 和啕 笄門并：- 好甚a壬a 格不好47首頁(yè)圖（三-2.1）2.2 王頁(yè)主頁(yè)是用戶個(gè)人的首頁(yè)或者是他人的首頁(yè)，此模式適用于各種用戶的主界面，以及主頁(yè)個(gè)TAB下的頁(yè)面。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.陽(yáng)沖Rr&saFi亙郛匚會(huì).“HSftAiH M 3，目擊向q自目:央書工5

10、*.-，； 二譽(yù)干開鼓¥自淳必用事可狂領(lǐng)密福主頁(yè)圖（三-2.2）2.3 應(yīng)用類頁(yè)2.3.1 用戶自身的應(yīng)用類適用于自己的檔案、日志、照片、好友、短消息等頁(yè)面。【應(yīng)用規(guī)則】頭部表明這是哪個(gè)應(yīng)用，并有這個(gè)應(yīng)用最重要的操作；第一級(jí)分類使用tabs導(dǎo)航方式；第二級(jí)分類使用sidebar導(dǎo)航的方式，比如inbox；如果分類層級(jí)較多，可以加入面包屑導(dǎo)航，比如照片；如果需要補(bǔ)充性導(dǎo)航或提示引導(dǎo)等，可以在右側(cè)添加sidebar,比如通知請(qǐng)求的分類;授犯fNS 出口中人£二呼女眩rm，.通k叵旦5 中*0:fl1|<.&01IE££目 Nartzdue日陽(yáng)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-二小評(píng)心，r -打串H訴»l'：Sfi-*:叩i7云三自身應(yīng)用頁(yè)圖（三-2.3.1）2.3.2 用戶他人的應(yīng)用類適用于他人的檔案、日志、照片、好友等頁(yè)面?！緫?yīng)用規(guī)則】頭部表明這是從屬于某人的

12、內(nèi)容，并介紹出是哪個(gè)應(yīng)用；如果有很強(qiáng)烈的內(nèi)容分類，比如某人的相同好友、某人的全部好友，可用tabs導(dǎo)航;如果有較多的層級(jí)關(guān)系，可用面包屑導(dǎo)航；學(xué)IB婚也H iKfflNdhEEp 旌9rie Firfipwr市4二五日區(qū)泰州yr iCye'5i左李出堀三二屈宴T鼻日小荀wijm靠£Nrrrfjr!Txiw芝.5S*X& 癮-除»± F EG工口*中一不5,ECDFK ttC>吁金衣-乳:敦?fù)?Toepen* 3|Satel Emeed 修Qtprpir Tirdh，淤屋!A iWIWJrltW三男二金黑.，:步、短事工唬及雷古Dr-rftoF

13、, PwmiwffX干產(chǎn)書=由空話苫M 黑七在不暮：用戶他人應(yīng)用頁(yè)圖（三-2.3.2)2.4參與類頁(yè)考慮到參與型應(yīng)用（游戲娛樂類）的特殊性（反復(fù)參與） 目前應(yīng)用到的應(yīng)用有投票、真心話、打死也不說(shuō)。，特給出此類應(yīng)用的內(nèi)容布局,【應(yīng)用規(guī)則】放棄了之前頭部的小頭像和個(gè)人主頁(yè)鏈接；加入了面包屑，為了能夠找到別人的列表頁(yè)；頭部導(dǎo)航跟我看自己的一致，方面來(lái)回跳轉(zhuǎn)，參與游戲娛樂;三三三三： ?一二”1. 一：二二二二二 P 二一二 i “ T 叁，i -!.一抄朦SN5M貫小入生受JT&0g序期和參與類頁(yè)圖（三-2.4）3 .頁(yè)面Title每個(gè)頁(yè)面都有自己的名稱，產(chǎn)品中頁(yè)面較多。在此制定一個(gè)統(tǒng)一的命

14、名規(guī)則，避免命名的紊亂。3.1 總體規(guī)則采用"XXX（空格）-（空格）搜狐SNS”3.2 BaseAppXXX采用App名字，例如注冊(cè)、首頁(yè)、好友、站內(nèi)信、通知、請(qǐng)求、邀請(qǐng)、隱私設(shè)置、賬號(hào)設(shè)置等.大部分就是頁(yè)面頂上小圖標(biāo)后面帶的應(yīng)用名稱；登錄頁(yè)特殊處理，直接采用"歡迎來(lái)到搜狐SNS"來(lái)彳title;個(gè)人首頁(yè)特殊處理，XXX采用人名，比如"李池明-搜狐SNS",看自己的就是自己的名字，看別人就是別人的名字；看別人的應(yīng)用時(shí)，XXX采用別人人名+應(yīng)用的形式，比如"李偉的好友-搜狐SNS"。3.3 SystemAppXXX統(tǒng)一采用頁(yè)

15、面頂上小圖標(biāo)后面帶的應(yīng)用名稱；考慮到應(yīng)用都采用ajax加載方式，應(yīng)用內(nèi)不再做title區(qū)分；看別人的應(yīng)用時(shí)，XXX采用別人人名+應(yīng)用的形式，比如"李偉的日志-搜狐SNS"。4 .交互行為界面中具有交互行為的文字或圖片，都應(yīng)該在鼠標(biāo)指針移過(guò)可點(diǎn)擊區(qū)域時(shí)可點(diǎn)擊區(qū)域的視覺變化，用以說(shuō)明該對(duì)象是可操作的以及何時(shí)可以進(jìn)行操作。對(duì)象對(duì)鼠標(biāo)指針移動(dòng)的響應(yīng)必須即時(shí)有效；響應(yīng)形式必須明確清晰；（如：鼠標(biāo)移過(guò)按鈕，按鈕有被按下的效果）交互反饋表現(xiàn)必須保持高度的一致，同等功能和操作的元素反饋形式必須相同；（如：鼠標(biāo)指向鏈接文字時(shí)都做同樣的變化）在鼠標(biāo)指針移開時(shí)對(duì)象必須即時(shí)恢復(fù)原來(lái)狀態(tài)。產(chǎn)品中的交

16、互行為有較多，產(chǎn)品里的交互形式較多，下面羅列目前已有的交互行為并就特殊要求的行為作補(bǔ)充說(shuō)明，其余不作說(shuō)明的交互行為遵循界面中交互行為的反饋形式。4.1 輸入4.2 點(diǎn)擊4.3 切換4.4 劃過(guò)鼠標(biāo)劃過(guò)區(qū)域背景高亮，常用于表狀內(nèi)容體，內(nèi)容過(guò)長(zhǎng)較分散，為了使內(nèi)容標(biāo)齊，采用鼠標(biāo)劃過(guò)，背景高亮。如：好友管理列表、站內(nèi)信列表4.5 關(guān)閉4.6 加載內(nèi)容塊加載：預(yù)加載的內(nèi)容塊先空白，在中間先出現(xiàn)大loading圖片，加載完后顯示全部?jī)?nèi)容；信息條加載：預(yù)加載的信息條先空白出一行，居左出現(xiàn)小loading圖片，加載完后顯示該信息條內(nèi)容4.7 提交提交按鈕：點(diǎn)擊，按鈕disabled,文字變?yōu)?quot;提交/

17、保存/發(fā)表中"，提交成功后，恢復(fù)原樣單輸入框+提交按鈕：點(diǎn)擊提交后，輸入框和按鈕disabled,按鈕變?yōu)?quot;提交中",提交成功后恢復(fù)4.8 拖放用戶可以用鼠標(biāo)抓取一個(gè)對(duì)象，并將它從一個(gè)指定位置移動(dòng)到另外一個(gè)指定位置的操作，我們定義為拖放”。拖放能簡(jiǎn)單，直觀，快速地幫助用戶實(shí)現(xiàn)布局排序等操作。如夢(mèng)幻城游戲界面中建造房屋。拖放遵循所見即所得的操作原則，使整個(gè)交互過(guò)程可視化，大大降低了用戶由于誤操作所帶來(lái)的不便，同時(shí)也增加了用戶參與互動(dòng)的娛樂性。drao handle to1dr3g handle to movedraghandletomove3拖放圖示（三-4.8）【

18、設(shè)計(jì)意圖】讓用戶簡(jiǎn)單、直觀、快速的達(dá)到移動(dòng)對(duì)象的目的；增加用戶參與互動(dòng)的娛樂性；通過(guò)單一性設(shè)備鼠標(biāo)直接完成操作任務(wù);遵循所見即所得的操作原則，讓用戶的操作過(guò)程可見，減少出錯(cuò)幾率?！緫?yīng)用規(guī)范】單條拖放：鼠標(biāo)劃過(guò)：拖動(dòng)區(qū)域有響應(yīng)變化，且鼠標(biāo)變?yōu)槭中?；鼠?biāo)點(diǎn)擊不松并拖拽：拖動(dòng)區(qū)域邊緣高亮，且區(qū)域半透明；提供是否可移動(dòng)到該處拖動(dòng)至目標(biāo)：周圍元素讓出空位，用高亮的虛線標(biāo)出目標(biāo)位置，的視覺反饋；目標(biāo)位置后松手：插入目標(biāo)位置，且其它元素自動(dòng)排列；拖動(dòng)至其它非目標(biāo)位置：松手后回復(fù)原位置。多條拖放：鼠標(biāo)點(diǎn)擊：?jiǎn)螕艏せ钸x中元素，元素周圍高亮，再次單擊此元素或其它元素，取消選擇,選中其它元素按住Alt鍵點(diǎn)擊：?jiǎn)螕?/p>

19、多個(gè)元素，同時(shí)高亮，顯示多個(gè)元素都被選中，再次點(diǎn)擊選中元素時(shí)，取消選擇拖拽：跟單條時(shí)一致5 .操作反饋包括級(jí)別定義和各級(jí)別交操作反饋規(guī)范主要用于用戶進(jìn)行一個(gè)操作之后的提示和引導(dǎo),互的定義。5.1 級(jí)別定義分為如下幾個(gè)級(jí)別：成功通知：主要是由于用戶操作并得到成功結(jié)果的通知及引導(dǎo)一級(jí)提示：主要是由于用戶操作不符合條件所得到的反饋，比如表單填寫不充分等二級(jí)提示：主要是由于用戶操作符合條件但遇到規(guī)則限制造成的，比如重復(fù)操作，達(dá)到好友上限等錯(cuò)誤提示：主要是由于用戶操作遇到了服務(wù)器端異常導(dǎo)致的，比如服務(wù)器宕機(jī)，數(shù)據(jù)庫(kù)連接不上等5.2 各級(jí)別交互定義成功通知：直接顯示結(jié)果頁(yè)面上顯示成功提示（3秒后消失）di

20、alog通知一級(jí)提示：即時(shí)驗(yàn)證，單項(xiàng)文字提醒dialog提示，逐項(xiàng)列舉未完成條件二級(jí)提示：頁(yè)面上顯示限制提示（不消失）dialog提示，列舉限制條件錯(cuò)誤提示：dialog提示，列舉錯(cuò)誤信息之前是機(jī)器語(yǔ)言，現(xiàn)優(yōu)化為用戶語(yǔ)言dialog詳細(xì)定義：標(biāo)題：出錯(cuò)了內(nèi)容：啊哦.白社會(huì)運(yùn)轉(zhuǎn)出現(xiàn)了點(diǎn)小問(wèn)題，請(qǐng)稍等片刻再嘗試一下按鈕：確定第四章組件交互細(xì)則第一節(jié)信息輸入1.表單組合表單組合”，是含有預(yù)定義的區(qū)域用以輸入信息的一種表單形式，它通常具有較好的數(shù)據(jù)組織結(jié)構(gòu)并且易于查看。用戶通過(guò)表單組合”輸入并提交信息，從而完成指定功能，例如，用戶注冊(cè)，寫站內(nèi)信，個(gè)人設(shè)置等。一個(gè)對(duì)于用戶的操作具有指導(dǎo)性，可以從簡(jiǎn)潔流暢

21、完成任務(wù)的角度提升用戶體驗(yàn)的表單組合”，將更有利于提高表單組合”的完成率。性”朝至r三Q生日：遺圣年份二|他擇年份二梅揮年份二|r這是陰歷生日而軍;降迪T民旗:陶呈民族三人生階段;僻人生階屋一二電話號(hào)培：|-|V電話號(hào)碼正確例如存|麒肖表單組合（四-1）【設(shè)計(jì)意圖】使輸入表單”的設(shè)計(jì)對(duì)于用戶更具指導(dǎo)性；從簡(jiǎn)潔流暢完成任務(wù)的角度提升用戶體驗(yàn)。【組成】輸入表單由標(biāo)簽、輸入域、提示信息、反饋信息和表單命令組成，如下圖所示。其中，一個(gè)標(biāo)簽及其相應(yīng)的輸入域可稱為一個(gè)表單項(xiàng)。標(biāo)簽：相應(yīng)的輸入域的名稱；輸入域：允許用戶輸入、編輯、選擇的區(qū)域，其表現(xiàn)形式可為文本框、下拉選擇框、單選

22、/復(fù)選框等（輸入域中的控件要合理使用，請(qǐng)參見windows用戶經(jīng)驗(yàn)）；提示信息：出現(xiàn)在用戶輸入之前，起提示作用的信息。通過(guò)對(duì)輸入規(guī)則，輸入目的，輸入后果或?qū)δ硞€(gè)標(biāo)簽意義進(jìn)一步解釋等信息的表達(dá)，對(duì)用戶的輸入進(jìn)行有針對(duì)性的提示，從而幫助用戶完成輸入。反饋信息：出現(xiàn)在用戶輸入完成之后，針對(duì)用戶的輸入，反饋給用戶的信息。在用戶完成輸入后，通過(guò)對(duì)用戶已輸入信息的校驗(yàn)，反饋給用戶校驗(yàn)結(jié)果（對(duì)錯(cuò)），若用戶輸入出錯(cuò)，則反饋給用戶出錯(cuò)原因，修改建議等，從而幫助用戶及時(shí)、準(zhǔn)確的修改錯(cuò)誤輸入。表單命令：對(duì)整個(gè)表單進(jìn)行操作的一個(gè)或一組命令。常見的有完成“、提交“、重置”、退出”等。表單項(xiàng)標(biāo)塞輸入域提丁格息提交信息表單

23、命令表單組合命名示例圖（四-1.1)【應(yīng)用規(guī)范】標(biāo)簽的命名要簡(jiǎn)明、易懂，使用社會(huì)化語(yǔ)言，而不是機(jī)器語(yǔ)言；一個(gè)表單項(xiàng)中的標(biāo)簽和輸入域在視覺表現(xiàn)上要為一體，不能造成用戶閱讀表單的障礙；表單項(xiàng)不超過(guò)51時(shí)，表單的完成率最高。如果表單項(xiàng)超過(guò)20項(xiàng)，在無(wú)特殊要求的情況下，要讓用戶分步完成，并且提供進(jìn)度指示。進(jìn)度指示要指明用戶當(dāng)前位置，距離完成本表單還有幾步，進(jìn)度指示要使用戶在填寫表單的過(guò)程中始終可見；要合理利用整個(gè)表單的空間，輸入域的大小要盡可能的顯示出用戶的所有輸入內(nèi)容；若表單項(xiàng)進(jìn)行了分組，那么分組標(biāo)志應(yīng)清晰標(biāo)示分組。例如，使用分組線，分組框；若表單項(xiàng)存在必填項(xiàng)和選填項(xiàng)，那么在視覺上必須加以區(qū)分，例如

24、，必填項(xiàng)以星號(hào)標(biāo)識(shí),必填項(xiàng)和選填項(xiàng)分組顯示，并標(biāo)注說(shuō)明；當(dāng)判斷出用戶出錯(cuò)或存在無(wú)效輸入時(shí)，不要清空用戶原來(lái)的的輸入，以便用戶參考修改。【對(duì)齊規(guī)則】表單項(xiàng)目名居右對(duì)齊；表單內(nèi)容居左對(duì)齊；表單中提示性內(nèi)容另起一行，左對(duì)齊，使用淺色字；驗(yàn)證信息緊跟著表單內(nèi)容顯示，默認(rèn)使用圖標(biāo)+文字;按鈕跟表單內(nèi)容一起左對(duì)齊【提示反饋】必填項(xiàng)為空狀態(tài)的交互處理：在必填項(xiàng)為空時(shí)，統(tǒng)一不用文字進(jìn)行提示，采用點(diǎn)擊按鈕后，輸入框紅閃的交互效果。文字超出時(shí)的交互處理：對(duì)于文字超出的狀態(tài)，通過(guò)限定輸入框的最大輸入字?jǐn)?shù)，不能繼續(xù)輸入或粘貼對(duì)于多表單提交的處理方式：當(dāng)多表單提交時(shí)，由于表單長(zhǎng)度過(guò)高，可能會(huì)看不到為空的狀態(tài)。同時(shí)，可能

25、是多項(xiàng)輸入框都需要提示，所以采用彈出對(duì)話框，分項(xiàng)列出錯(cuò)誤信息。如例：1 .日志標(biāo)題不能少于2個(gè)字2 .日志內(nèi)容不能為空對(duì)于對(duì)話層里表單提交的處理方式：由于對(duì)話層內(nèi)不可彈出新的提示層，所以當(dāng)出現(xiàn)錯(cuò)誤時(shí)，直接在錯(cuò)誤的輸入框下顯示錯(cuò)誤信息。對(duì)于服務(wù)器端返回的錯(cuò)誤提示：關(guān)閉現(xiàn)有的提示層，出現(xiàn)新的錯(cuò)誤提示層。例：好友加滿時(shí)彈出新的提示層。2 .下拉層下拉層用于在某模塊有多條數(shù)據(jù)，但在界面中只顯示一個(gè)標(biāo)題或代表的情況。這種組件形式的優(yōu)點(diǎn)是可以保證主界面的簡(jiǎn)潔性，同時(shí)又能承載較多數(shù)據(jù)量；不足之處是交互不是很便利，數(shù)據(jù)有一定的隱蔽性。所以在使用時(shí)謹(jǐn)慎權(quán)衡其利弊。目前產(chǎn)品中有兩種下拉形式：下拉菜單和下拉列表。一

26、個(gè)好的下拉層可以讓界面非常簡(jiǎn)潔，還能提供豐富便利的交互行為。消息(4)UMiamL性巨alsoeommMtedoriiherstatus.L：-5='：JinjiangZhangcomnnentedonycMurstatus.二三一：£：工VivianLeedisccommentedonherstatus.口一下w二口VivianLeealsocommentedonLynnChai'sstatus,k建私I港可以看到我的個(gè)人喈素:I好友的好友原存I關(guān)閉中國(guó)cornmentedonyourstatus12hanaoii下拉層示例圖(四-2)2.1 下拉菜單常用于選擇性的

27、項(xiàng)目，即選擇一項(xiàng)后即可；一般為點(diǎn)擊后觸發(fā)，也會(huì)有個(gè)別情況是鼠標(biāo)滑過(guò)觸發(fā);選擇某一項(xiàng)后或者鼠標(biāo)點(diǎn)擊菜單外，菜單消失。冏埸私設(shè)置冏應(yīng)用-殳道冏聊天設(shè)置下拉菜單圖（四-2.1）2.2 下拉列表常用于瀏覽型或設(shè)置型項(xiàng)目，即打開下拉后需要瀏覽或設(shè)置操作;點(diǎn)擊后觸發(fā)；再次點(diǎn)擊觸發(fā)位置或者設(shè)置完畢，菜單才消失。消息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.".?：二二二嶷補(bǔ)港可以看學(xué)俄的個(gè)人檔案：|好友的好友*關(guān)閉|中國(guó)comnentEdonyourstetLis,1：-.5=r-下拉列表圖（四-2.2）3 .權(quán)限設(shè)置常用于選擇權(quán)限設(shè)置的地方，如隱私設(shè)置、日志瀏覽權(quán)限、照片專輯瀏覽權(quán)限等。存在于頁(yè)面上，個(gè)別情況存在彈出對(duì)話框中，如個(gè)人檔案中的聯(lián)系信息設(shè)置。應(yīng)用規(guī)范如圖示:平時(shí)逸株怛至郃三就用尸.外度肢外度的丹及、長(zhǎng)好求、賢自己HT：i i：!F.聞作自定二酒工附，立:具=打不縣川乩蘭定義前當(dāng)世療鼻定支設(shè)置：iHl定E,她通回?zé)燇?/p>

29、收彎，回酎點(diǎn)擊*遇世白江 文諛直",再再FT開面尾酊界M由苒匚工工派直權(quán)限設(shè)置圖（四-3）第二節(jié)導(dǎo)航1 .面包屑導(dǎo)航應(yīng)用于標(biāo)注當(dāng)前操作所在具體位置的設(shè)計(jì)中，讓用戶清晰的知道自己的位置，不至于迷路”，同時(shí)提供便捷的通道，方便用戶切換到其他相關(guān)頁(yè)面，圖形化面包屑還提供一鍵回到較高層次的服務(wù)，幫助那些通過(guò)搜索或者深層次鏈接進(jìn)入到特殊但是不合適頁(yè)面的用戶?！驹O(shè)計(jì)意圖】防止用戶在瀏覽過(guò)程中迷失；同時(shí)提供多入口，方便用戶隨時(shí)到達(dá)目標(biāo)位置;方便用戶定位在頁(yè)面中的位置；合理的有效的利用空間，整合地址欄和面包屑的功能于一體；面包屑顯示用戶的當(dāng)前位置，幫助用戶理解所處位置與整個(gè)網(wǎng)站的關(guān)系?！窘M成】用戶名

30、稱的總>臬個(gè)為（>某個(gè)'XXffiKK面包屑導(dǎo)航圖（四-二-1）【應(yīng)用規(guī)范】面包屑與地址欄合二為一；路徑關(guān)系要正確，路徑文本要與上下文相一致；在層級(jí)之間必須使有一個(gè)含義簡(jiǎn)單明確的分隔符；面包屑的最末級(jí)，不再提供分隔符。2 .TAB導(dǎo)航TAB是利用網(wǎng)頁(yè)小空間展現(xiàn)大量信息的一種形式，并為用戶清晰的指示出當(dāng)前所處的位置。一般情況下，當(dāng)在分類標(biāo)題數(shù)為2-10個(gè)，且標(biāo)題數(shù)不經(jīng)常改變時(shí)，可以使TABTAB的使用可以幫助用戶在大量信息中導(dǎo)航。activedTAB導(dǎo)航圖（四-二-2）【設(shè)計(jì)意圖】在一系列可選標(biāo)題中為用戶清晰的指明當(dāng)前位置?？蓭椭脩粼诖罅啃畔⒅袑?dǎo)航?！緫?yīng)用規(guī)范】頁(yè)簽的表現(xiàn)形

31、式可以多種多樣，但分類標(biāo)題的關(guān)聯(lián)內(nèi)容應(yīng)在視覺上連接到當(dāng)前激活的頁(yè)簽，并保持一致的設(shè)計(jì)風(fēng)格，如使用相同的顏色，同一個(gè)邊框，指示箭頭等。使用相同顏色的表現(xiàn)風(fēng)格，為典型的頁(yè)簽表現(xiàn)形式；頁(yè)簽標(biāo)題文字最好保持在5個(gè)中文字符以內(nèi)，或1,2個(gè)英文單詞，并且頁(yè)簽寬度應(yīng)能保證完整顯示出標(biāo)題文字；同一時(shí)間只有一個(gè)頁(yè)簽處于激活狀態(tài)；激活的頁(yè)簽應(yīng)提供視覺反饋，如：高亮當(dāng)前選擇，標(biāo)題文字字體顏色改變等；頁(yè)簽應(yīng)盡量單行顯示，如實(shí)在顯示不下，可考慮使用下拉菜單或其他解決方案。3 .翻頁(yè)導(dǎo)航數(shù)字翻頁(yè)模式應(yīng)用于列表數(shù)據(jù)條目較多，文章篇幅較長(zhǎng)的設(shè)計(jì)中，來(lái)對(duì)數(shù)據(jù)和篇幅進(jìn)行更好的展示。根據(jù)頁(yè)碼數(shù)的不同情況，數(shù)字翻頁(yè)控件有如下幾種形式

32、，在設(shè)計(jì)過(guò)程中酌情選擇。1、頁(yè)53數(shù)已知2、頁(yè)碼數(shù)'于等于512345下一頁(yè)上一頁(yè),123415下一頁(yè)上一頁(yè)1234S12 3 4 - 6 下一頁(yè)3 2 3 4 6 下頁(yè) 上一1 - 3 4 5 $ 下一頁(yè) 上一頁(yè)12 3 4下一頁(yè)上頁(yè)1-1 m 14 15 *,* mo下頁(yè)上一頁(yè) 1 - 2Z 28 29 J0下一頁(yè)上.一頁(yè)下一頁(yè)卜一貢L頁(yè)日數(shù)已知2、頁(yè)衛(wèi)數(shù)等于后L頁(yè)母數(shù)已知2,頁(yè)用數(shù)大于61、頁(yè)嗎數(shù)未知翻頁(yè)導(dǎo)航圖（四-二-3）【應(yīng)用規(guī)范】頁(yè)碼數(shù)已知的情況，使用前三種頁(yè)碼數(shù)未知的情況，使用第四種頁(yè)碼數(shù)為1時(shí)，不顯示分第三節(jié)信息展示1.頭像和人名頭像和人名是白社會(huì)中用戶必不可少的標(biāo)示,

33、根據(jù)不同頁(yè)面有不同的組合使用情況。目前制定出了一下組合形式和各種形式下的尺寸規(guī)范。頭像和人名的交互反饋形式參見：三-3交互行為。1.1頭像:用于個(gè)人主頁(yè)上，最大170*200;用于Home的頭像位置，固定80*80;用于最常用出現(xiàn)的頭像或頭像+名字，固定48*48;用于右側(cè)的好友列表上，固定40*40。4舞*府用干苴E用F黑偌soso應(yīng)月于帶頭像應(yīng)用于1 項(xiàng)個(gè)人頭像加地辦或表蛤他打個(gè)勢(shì)呼 殆怙匕消.目給他。砌友頭像（四-三-1.1）1.2頭像+人名+狀態(tài):用于垂直列表；用于單獨(dú)呈現(xiàn)某個(gè)用戶用戶名稱往事如俎隨風(fēng)敢去臺(tái)用戶隹除往事如煙，隨風(fēng)散去往事如煙.隨說(shuō)散去用戶包彌往事如妞逋風(fēng)散去頭像+人名+

34、 狀態(tài)（四-三-1.2）1.3頭像+人名：用于橫向列表或多行;用于群組呈現(xiàn)用戶。用戶名稱用戶名稱頭像+人名（四-三-1.3）2.信息列表根據(jù)信息產(chǎn)品中多數(shù)信息的展示都是以列表形式提供給用戶，是用戶最主要的信息獲取源。不同的信息，我們歸納了如下幾種信息情況的信息列表，并對(duì)相應(yīng)形式做了圖示說(shuō)明。列表的交互反饋形式參見：三-3交互行為。2.1 Newsfeed歹U表-'I李，西朗白天不睡覺，虹t不工作-1.：函£判明E天不睡品，晚上不工作-1«：W-宜逐*匣手泡叫撰寫了日志13;10港北京移動(dòng)送無(wú)值卡洋如攻晦第一步：門開活動(dòng)頁(yè)面卜 npnamobile.cc rn<

35、vA/aciivity/'ca rn Ival/xunhaoind&x,加人手機(jī)號(hào)和圖書全史Newsfeed列表（四-三-2.1）2.2Minifeed列表I*李池明白天不蠱覺，晚上不工作-18:10李旭明白天不捶覺,晚上不工作1-1E£李池明提寫了日志1一北京移動(dòng)送充值卡詳招攻唱第一步；打開活動(dòng)頁(yè)面http;/www,bjnchinamobiI顯示方式:單行圖示UfOKSm3詳細(xì)顯示4二工工H李池明上傳了2張照片到我的生活Minifeed列表（四-三-2.2）2.3評(píng)論列表帛口司M爾干片呢，好素羽-豆必爾干算呢.好累那你呢.好素啊變春總顯示更妾$蔡評(píng)論，.書巴爾干訪

36、泥,好景我習(xí)跳爾干南用,好累那你昆.好景二河評(píng)論列表（四-三-2.3）2.4留言列表生傳留言;01-031810'冊(cè)爾干演呢.好景陰朧爾干嘛呢.好累那你呢r好事啊二春居留言：我就要買叩3000,咋不服啊提杰里雷言!剪了頭你們就不認(rèn)識(shí)我了留言列表（四-三-2.4）2.6feed規(guī)則當(dāng)前條數(shù)內(nèi)，多人對(duì)同一主體內(nèi)容進(jìn)行相同操作的feed,合并主語(yǔ)顯示；常用于參與型app,比如投票、真心話、說(shuō)秘密格式：小明，小王，小張參與了真心話+1+1=?+2小時(shí)前當(dāng)前條數(shù)內(nèi)，某人對(duì)同一app下同一主體進(jìn)行多次操作的feed,只顯示最近一條；常用于操作型app,比如評(píng)論、標(biāo)記；格式：小明對(duì)日志xxxxxxx

37、xxxx進(jìn)行了評(píng)論2小時(shí)前當(dāng)前條數(shù)內(nèi)，某人對(duì)同一app下不同主體進(jìn)行多次操作的feed,合并后面的主體；常用于修改或添加型app,比如好友、個(gè)人檔案、應(yīng)用；格式：小明加了小張，小王，小劉為好友2小時(shí)前當(dāng)前條數(shù)內(nèi)，某人在同一app下產(chǎn)生UGC內(nèi)容，如果相似，只顯示最近的n條；常用于UGC型app,比如日志、照片、分享；格式：小明在專輯XXXXXXXXX）沖上彳專了7張新照片2小時(shí)前3.日期時(shí)間產(chǎn)品中有很多時(shí)間提示信息，根據(jù)不同的使用場(chǎng)景，歸納出如下幾種時(shí)間形式。在后續(xù)的設(shè)計(jì)中，可以根據(jù)使用場(chǎng)景從中選取相應(yīng)形式。正序長(zhǎng)版：2009年1月15日2:30pm正序短版：2009-1-158:30am倒序

38、：<2秒剛剛2秒-59秒2-59秒前1分鐘-59分59秒1-59分鐘前1小時(shí)-23小時(shí)59分59秒1-23小時(shí)前1天-6天23小時(shí)59分59秒1-6天前1周-3周6天23小時(shí)59分59秒1-3周前1月-1月3周6天23小時(shí)59分59秒1月前>2月xxxx年xx月xx日Feed時(shí)間顯示：時(shí)間線1）小時(shí)線：在今天范圍內(nèi)，按照每小時(shí)劃分的線。0:001:002:003:004:005:0019:0020:0021:0022:0023:002）日期線：分為昨天、本周、上周、本月、上月、很久以前Feed時(shí)間1）今天：顯示為xx:xx,例如6:56am2）昨天：顯示為xx:xx,例如0:30a

39、m3）昨天以前：顯示為xx月xx日xx:xx,例如12月1日11:23am評(píng)論時(shí)間評(píng)論的時(shí)間始終顯示xx月xx日xx:xx,例如12月1日1:23pm第四節(jié)消息提示1 .通知消息體1.1 通知列表通知消息體盡量簡(jiǎn)短，不顯示用戶操作的評(píng)論或留言的內(nèi)容，但可以顯示通知的對(duì)象。例如真心話里，不要顯示"他的真心告白是：我愛好讀書'"通知消息體盡量使用主動(dòng)語(yǔ)式，主語(yǔ)為某人。例如：1 .某人對(duì)你的某件東西做了什么樣的事情。例如：張小敏對(duì)你的日志XXXXX發(fā)表了評(píng)論張小敏在一張照片中提到了你查看2 .某人和你做了怎樣的事情例如：張小敏也加你為好友張小敏跟你交換了真心話：XXX通知

40、盡量引導(dǎo)用戶到最終頁(yè)，進(jìn)行下一步操作。在消息體中，如果操作的最終對(duì)象是名詞，則直接在該對(duì)象上加鏈接。如果通知中沒有最終對(duì)象，則在后面添加明確的"查看"或“閱讀”等鏈接。例如：1 .消息體：”張小敏對(duì)劉小賀的日志XXX發(fā)表了評(píng)論""XXX"需要加鏈接，不需要添加其它的引導(dǎo)操作2 .消息體：”張小敏給你留言了查看“需要添加"查看"作為引導(dǎo)鏈接人名和鏈接的左右都有空格，第一個(gè)字是鏈接時(shí)，不需要左空格。1.2 通知合并規(guī)則1.2.1 同一個(gè)人對(duì)同一個(gè)內(nèi)容發(fā)生的相同操作，只顯示最后一條。常用于評(píng)論的通知例如：小A評(píng)論了你的日志 小A評(píng)

41、論了你的日志 小A評(píng)論了你的日志 只顯示最近一條XXXXXXXX分鐘前XXXXXXXX分鐘前XXXXXXXX吩鐘前1.2.2 不同人對(duì)同一個(gè)內(nèi)容發(fā)生的相同操作，合并主語(yǔ)顯示。常用于評(píng)論、真心話、照片標(biāo)記的通知例如：小A評(píng)論了你白日志XXXXXXXX分鐘前小B評(píng)論了你白日志XXXXXXXX分鐘前小C評(píng)論了你白日志XXXXXXXX吩鐘前合并為：小A小B小C評(píng)論了你的日志XXXXXXXX分鐘前小A跟你交換了真心話XXXXXXXXXXXX3鐘前小B跟你交換了真心話XXXXXXXXXXXX分鐘前小C跟你交換了真心話XXXXXXXXXXXX8鐘前合并為：小A小B小C跟你交換了真心話XXXXXXXXXXXX

42、3鐘前小A標(biāo)記了你的照片3分鐘前小B標(biāo)記了你的照片5分鐘前小C標(biāo)記了你的照片8分鐘前合并為：小A小B小C標(biāo)記了你的照片3分鐘前1.2.3 收到同一類型的請(qǐng)求的通知。常用于游戲和加好友的請(qǐng)求例如：小A申請(qǐng)加你為好友處理3分鐘前小B申請(qǐng)加你為好友處理5分鐘前小C申請(qǐng)加你為好友處理8分鐘前合并為：小A小B小C申請(qǐng)加你為好友處理3分鐘前1.3 通知面板通知狀態(tài)分為未點(diǎn)擊未見過(guò)、未點(diǎn)擊已見過(guò)、已點(diǎn)擊、已刪除4種狀態(tài)。1.3.1 未點(diǎn)擊未見過(guò)默認(rèn)在頭部有紅泡提醒數(shù)目，點(diǎn)擊觸發(fā)面板后紅泡消失，且通知面板里的未見過(guò)通知有黃退效果。1.3.2 未點(diǎn)擊已見過(guò)由狀態(tài)一轉(zhuǎn)變而來(lái)，存在于通知面板中，無(wú)紅泡，無(wú)黃退效果。

43、1.3.3 已點(diǎn)擊凡是通過(guò)在通知面板中或者通知匯總頁(yè)中，點(diǎn)擊過(guò)通知中的鏈接的，為已點(diǎn)擊狀態(tài)。已點(diǎn)擊的通知即從通知面板中消失，但還存在于通知匯總頁(yè)中1.3.4 已刪除凡是通過(guò)在通知面板中或者通知匯總頁(yè)中，刪除成功的，為已刪除狀態(tài)。已刪除即從下拉面板和通知匯總頁(yè)都消失通知面板顯示一和二狀態(tài)通知匯總頁(yè)顯示一、二、和三狀態(tài)2.對(duì)話框采用彈出層形式的對(duì)話框，用于對(duì)主界面操作進(jìn)行強(qiáng)調(diào)或補(bǔ)充的一種交互形式。目前產(chǎn)品中有如下幾種對(duì)話框，當(dāng)使用某種對(duì)話框時(shí)，請(qǐng)遵循相應(yīng)的規(guī)范。2.1 確認(rèn)框常用于刪除或批量操作，再次確認(rèn)使用。交互規(guī)則：直接顯示對(duì)話框，點(diǎn)擊按鈕后直接消失。標(biāo)題：操作+目標(biāo)，例如刪除日志，刪除照片專

44、輯，解除好友關(guān)系.按鈕：確定+取消確認(rèn)框（四-四-2.1）2.2 操作框常用于進(jìn)一步操作，入口較小，但操作步驟較多時(shí)，比如加好友，設(shè)隱私等。交互規(guī)則:直接顯示對(duì)話框，確認(rèn)完畢后，變?yōu)橥ㄖ?。?biāo)題：操作+目標(biāo)，一般為入口的名字，例如新建照片專輯，修改真心話，添加選項(xiàng).按鈕：保存（行為）+取消，行為例如加為好友，添加，分享.2.3通知框常用于確認(rèn)框和操作框的確認(rèn)后，通知用戶結(jié)果，按鈕立即消失，如果不點(diǎn)擊按鈕，1秒后漸隱消失。標(biāo)題：沿用之前操作框的標(biāo)題般只有一個(gè)按鈕。交互規(guī)則：點(diǎn)擊按鈕：關(guān)閉2.4提示框常用于表單提交后的驗(yàn)證，通知用戶哪些信息不完整或者操作步驟不對(duì)。使用1、2、3的序號(hào)排列多條信息提

45、示標(biāo)題：提示按鈕：確定提示框（四-四-2.4）2.5未保存提示框常用于表單未保存就跳轉(zhuǎn)的提示，提示用戶未保存信息是否需要保存。標(biāo)題：未保存+目標(biāo)，例如未保存日志，未保存?zhèn)€人檔案，未保存隱私設(shè)置按鈕：保存+不保存+取消快捷鍵：支持鍵盤的enter操作框上的主操作，一般為"確定""保存"等，支持鍵盤的 esc操作框上的取消/關(guān)閉操作，一般為"取消""關(guān)閉XX”等。第五節(jié)社交讓用戶直觀簡(jiǎn)便的對(duì)主題或內(nèi)容進(jìn)行評(píng)鑒和發(fā)表評(píng)論,同時(shí)讓用戶在使用中獲得良好交1.評(píng)論互效果。產(chǎn)品中有兩種狀態(tài)：未激活、激活。1.1 未激活狀態(tài)存在于一般界面的

46、話題或內(nèi)容下方，默認(rèn)有“添加評(píng)論”文字提示周嵐；今定天氣不錯(cuò)適合造謠M顯示竽郅1Q條押你周嵐4月14日才盯,用 回復(fù) 不要造謠添力掰論未激活評(píng)論（四-五-1.1）1.2 激活狀態(tài)點(diǎn)擊表情當(dāng)鼠標(biāo)點(diǎn)擊輸入框后，評(píng)論框被激活，呈現(xiàn)如下形式。文本域中可輸入評(píng)論內(nèi)容,展開表情集合。周嵐：今天天氣不錯(cuò),適當(dāng)造謠3星示金都10條評(píng)沱周嵐4月“日。,47加7回復(fù)不要造謠激活評(píng)論（四-五-1.2.1）I周嵐:今天天氣不錯(cuò)，適合造謠7蕾4月4日933am-回要至.,二用激活評(píng)論輸入表情（四-五-122）2.回復(fù)回復(fù)是針對(duì)某人的發(fā)言進(jìn)行回復(fù)，因此每個(gè)回復(fù)都有一個(gè)對(duì)象?；貜?fù)與評(píng)論使用的是同一控件，考慮回復(fù)的特殊性，在

47、點(diǎn)擊回復(fù)時(shí)，輸入框中自動(dòng)帶出回復(fù)的對(duì)象，其余交互形式與評(píng)論相同。10.05am -便松-轉(zhuǎn)發(fā)王蔣 4Kle日 IQUSnr 昨天去蘇州了，親愛的.R王然4月14日10；杜子？快來(lái)？回復(fù)回復(fù)王毅：-回復(fù)顯示全部5條評(píng)論回復(fù)（四-五-2）3.轉(zhuǎn)發(fā)占焦點(diǎn)的確認(rèn)對(duì)話框。對(duì)話框的交互規(guī)范遵循對(duì)話框交互規(guī)則。轉(zhuǎn)發(fā)是對(duì)某主題或內(nèi)容進(jìn)行轉(zhuǎn)發(fā)到自己的一句話中,這里的交互是點(diǎn)擊轉(zhuǎn)發(fā)后，彈出獨(dú)對(duì)話框中的內(nèi)容為：確認(rèn)問(wèn)題+轉(zhuǎn)自人用戶名+文章標(biāo)題回復(fù)（四-五-3）4.分享分享是對(duì)將好友或者其他有聯(lián)通的文章，分享到自己的分享分類下。點(diǎn)擊分享后，彈出獨(dú)占焦點(diǎn)的分享對(duì)話框。對(duì)話框的交互規(guī)范遵循對(duì)話框交互規(guī)則。對(duì)話框中的內(nèi)容為

48、：分享理由+分享標(biāo)題分享（四-五-4）第六節(jié)富交互1 .富文本輸入主要應(yīng)用于帶表情的輸入，如產(chǎn)品中的評(píng)論、回復(fù)等。形式如圖示，交互行為遵循各自元素的交互規(guī)則。1.1 帶表情的輸入框常用于狀態(tài)更新的輸入框掛點(diǎn)爸久百招的手?jǐn)S空了.以物的辱殳點(diǎn)、dr表情藺人支享技襄情帶表情的輸入框（四-六-1.1）1.2帶表情的輸入?yún)^(qū)域常用于評(píng)論的輸入?yún)^(qū)域和留言的輸入?yún)^(qū)域。升級(jí)：默認(rèn)設(shè)置2行的高度，當(dāng)內(nèi)容超過(guò) 1行后自動(dòng)增加1行高度，以此類推帶表情的輸入域（四-六-1.1）1.3 智能輸入?yún)^(qū)域組件:用于：狀態(tài)更新、評(píng)論、站內(nèi)信、分享理由、真心話、說(shuō)秘密、投票描述要求：1）輸入?yún)^(qū)域高度會(huì)隨著內(nèi)容的多少伸展，保證始終空

49、出一行的高度，沒有右側(cè)滾動(dòng)條2）能限制最大輸入字?jǐn)?shù)，多余字?jǐn)?shù)將不能繼續(xù)輸入3）無(wú)字符輸入時(shí)不能提交（包括空格、換行）4）回車是換行，ctrl+回車是提交5）支持表情插入2 .好友選擇目前尋找好友有三種渠道：查找、系統(tǒng)推薦可能認(rèn)識(shí)的人、尋找MSN/Email聯(lián)系人,三種形式相輔相成，滿足用戶的不同需求，提供較好的用戶體驗(yàn)。2.1 查找【設(shè)計(jì)意圖】查找好友渠道可滿足用戶只有范圍沒有既定目標(biāo)，通過(guò)詢問(wèn)系統(tǒng)形式來(lái)找到好友。目前有三種查詢方式：找同事、找同學(xué)、找同城好友?！窘M成】由輸入框和三個(gè)方式算選鏈接組成。如圖：沿找同事找同學(xué)找同城好友好友查找（四-六-2.1）【應(yīng)用規(guī)范】未激活狀態(tài)下，輸入框有提示

50、性文字?？稍谳斎肟蜉斎胄彰W(xué)校、公司;激活后提示文字消失，可在輸入框完成輸入操作；如輸入關(guān)鍵字有相應(yīng)結(jié)果則點(diǎn)擊查找后進(jìn)入結(jié)果頁(yè)；如沒有查詢結(jié)果則出提示文字“沒有找到相關(guān)結(jié)果，試試用其他方式查找”2.2 系統(tǒng)推薦可能認(rèn)識(shí)的人【設(shè)計(jì)意圖】滿足用戶隨機(jī)添加好友的情況，系統(tǒng)根據(jù)用戶的資料給他推薦可能相識(shí)的人?！窘M成】直接展示用戶列表。包括用戶頭像、用戶名、推薦理由、加為好友的快捷操作。如圖:你可能認(rèn)識(shí)的人處李瑞，保的白EWI的事人I加琳f(shuō)式£,岸在一起字可+加為科鬣渡蘇昌ft你卻能在：i位共同將寂加力好友一 遑禮偉£7 你和他有L位共同好去E>Al 4工必行發(fā)42*-在一起

51、掌./加知拉宜塞黑01匹潸可請(qǐng)何群呼你和他前1位共同好苴 +加粉中發(fā)渡劉摘方和他有2位拌同好友+加知盧友濫嚴(yán)胖胖也一旦宇+加為好友溫目附本歸和她有2隹將同好友+ DILWF 壺B*壬停*忖捫岫后可反R同不罡+加為期衷懦窿中你本地有:聯(lián)同疆發(fā)SSC + m為旺其豆姜小惠你更他真呼同/光+加為好友蠡盛乂你知恰有2隹共同好交+理力好友怎呈金星r' 你乳有二位共同奸ar 尸K +加為好支好友列表（四-六-2.2）【應(yīng)用規(guī)范】點(diǎn)擊頭像和用戶名，進(jìn)入用戶的個(gè)人主頁(yè)；點(diǎn)擊加為好友的快捷操作，彈出加好友的對(duì)話框。2.3 尋找MSN/Email聯(lián)系人【設(shè)計(jì)意圖】方便用戶把MSN里的好友，或者是Email中的聯(lián)系人邀請(qǐng)到系統(tǒng)中來(lái)?！窘M成】MSN和Email兩種渠道的單選按鈕、賬號(hào)輸入框、密碼輸入框、尋找MSZ/EniHi唯系人MSMO匚用由I晶自社合不含存儲(chǔ)你的密碼Ji靚I心使用MSN找好友（四-六-2.3.1）、尋靛MSZ/Email屐系人QMSMEmail郵箱：|_仰密嗚：匚晶白社會(huì)不會(huì)存儲(chǔ)行的宓碣，請(qǐng)放心使用Email找好友（四-六-2.3.2）【應(yīng)用規(guī)范】默認(rèn)狀態(tài)下是MSN方式；登錄MSN或者登錄Email后展示，展示好友中已經(jīng)入駐白社會(huì)的聯(lián)系人和還未入駐白社會(huì)的聯(lián)系人；選中未入住的聯(lián)系人前的