搜狐白社會界面交互規(guī)范白社會界面交互設(shè)計(jì)規(guī)范2010-4-16初稿TOC\h\z\t"一級標(biāo)題,1,二級標(biāo)題,2,三級標(biāo)題,3"第一章 概述 相關(guān)較近、無關(guān)較遠(yuǎn)原則知道我在哪原則最少點(diǎn)擊原則操作流最短原則一致性原則同類一致原則異類不同原則元素最少化原則產(chǎn)品通用規(guī)范頁面結(jié)構(gòu)為確保產(chǎn)品的布局形式統(tǒng)一，根據(jù)目前的交互設(shè)計(jì)總結(jié)出產(chǎn)品的框架結(jié)構(gòu)。在后續(xù)添加的服務(wù)或欄目，都以此框架為基礎(chǔ)，在相應(yīng)區(qū)域進(jìn)行添加或設(shè)置。總體界面分為5各區(qū)域：導(dǎo)航區(qū)、工具區(qū)、內(nèi)容區(qū)、聲明區(qū)、聯(lián)絡(luò)區(qū)總體結(jié)構(gòu)圖（三-1）內(nèi)容區(qū)內(nèi)容區(qū)是信息展示和用戶完成相應(yīng)操作的主要窗口，根據(jù)不同使用場景。內(nèi)容區(qū)分為：首頁、主頁、應(yīng)用類頁、參與類頁。2.1首頁首頁是用戶登錄后的界面，也是寸土寸金的黃金地段，每個想在首頁提供快捷入口的應(yīng)用或服務(wù)都需謹(jǐn)慎，在相應(yīng)分區(qū)下進(jìn)行添加刪除。首頁圖（三-2.1）2.2主頁主頁是用戶個人的首頁或者是他人的首頁，此模式適用于各種用戶的主界面，以及主頁個TAB下的頁面。主頁圖（三-2.2）2.3應(yīng)用類頁2.3.1用戶自身的應(yīng)用類適用于自己的檔案、日志、照片、好友、短消息等頁面。【應(yīng)用規(guī)則】頭部表明這是哪個應(yīng)用，并有這個應(yīng)用最重要的操作；第一級分類使用tabs導(dǎo)航方式；第二級分類使用sidebar導(dǎo)航的方式，比如inbox；如果分類層級較多，可以加入面包屑導(dǎo)航，比如照片；如果需要補(bǔ)充性導(dǎo)航或提示引導(dǎo)等，可以在右側(cè)添加sidebar，比如通知請求的分類；自身應(yīng)用頁圖（三-2.3.1）2.3.2用戶他人的應(yīng)用類適用于他人的檔案、日志、照片、好友等頁面。【應(yīng)用規(guī)則】頭部表明這是從屬于某人的內(nèi)容，并介紹出是哪個應(yīng)用；如果有很強(qiáng)烈的內(nèi)容分類，比如某人的相同好友、某人的全部好友，可用tabs導(dǎo)航；如果有較多的層級關(guān)系，可用面包屑導(dǎo)航；用戶他人應(yīng)用頁圖（三-2.3.2）2.4參與類頁考慮到參與型應(yīng)用（游戲娛樂類）的特殊性（反復(fù)參與），特給出此類應(yīng)用的內(nèi)容布局，目前應(yīng)用到的應(yīng)用有投票、真心話、打死也不說。【應(yīng)用規(guī)則】放棄了之前頭部的小頭像和個人主頁鏈接；加入了面包屑，為了能夠找到別人的列表頁；頭部導(dǎo)航跟我看自己的一致，方面來回跳轉(zhuǎn)，參與游戲娛樂；參與類頁圖（三-2.4）頁面Title每個頁面都有自己的名稱，產(chǎn)品中頁面較多。在此制定一個統(tǒng)一的命名規(guī)則，避免命名的紊亂。3.1總體規(guī)則采用"XXX（空格）-（空格）搜狐SNS"BaseAppXXX采用App名字，例如注冊、首頁、好友、站內(nèi)信、通知、請求、邀請、隱私設(shè)置、賬號設(shè)置等大部分就是頁面頂上小圖標(biāo)后面帶的應(yīng)用名稱；登錄頁特殊處理，直接采用"歡迎來到搜狐SNS！"來做title；個人首頁特殊處理，XXX采用人名，比如"李池明-搜狐SNS"，看自己的就是自己的名字，看別人就是別人的名字；看別人的應(yīng)用時(shí)，XXX采用別人人名+應(yīng)用的形式，比如"李偉的好友-搜狐SNS"。SystemAppXXX統(tǒng)一采用頁面頂上小圖標(biāo)后面帶的應(yīng)用名稱；考慮到應(yīng)用都采用ajax加載方式，應(yīng)用內(nèi)不再做title區(qū)分；看別人的應(yīng)用時(shí)，XXX采用別人人名+應(yīng)用的形式，比如"李偉的日志-搜狐SNS"。交互行為界面中具有交互行為的文字或圖片，都應(yīng)該在鼠標(biāo)指針移過可點(diǎn)擊區(qū)域時(shí)可點(diǎn)擊區(qū)域的視覺變化，用以說明該對象是可操作的以及何時(shí)可以進(jìn)行操作。對象對鼠標(biāo)指針移動的響應(yīng)必須即時(shí)有效；響應(yīng)形式必須明確清晰；（如：鼠標(biāo)移過按鈕，按鈕有被按下的效果）交互反饋表現(xiàn)必須保持高度的一致，同等功能和操作的元素反饋形式必須相同；（如：鼠標(biāo)指向鏈接文字時(shí)都做同樣的變化）在鼠標(biāo)指針移開時(shí)對象必須即時(shí)恢復(fù)原來狀態(tài)。產(chǎn)品中的交互行為有較多，產(chǎn)品里的交互形式較多，下面羅列目前已有的交互行為并就特殊要求的行為作補(bǔ)充說明，其余不作說明的交互行為遵循界面中交互行為的反饋形式。4.1輸入4.2點(diǎn)擊4.3切換4.4劃過鼠標(biāo)劃過區(qū)域背景高亮，常用于表狀內(nèi)容體，內(nèi)容過長較分散，為了使內(nèi)容標(biāo)齊，采用鼠標(biāo)劃過，背景高亮。如：好友管理列表、站內(nèi)信列表4.5關(guān)閉4.6加載內(nèi)容塊加載：預(yù)加載的內(nèi)容塊先空白，在中間先出現(xiàn)大loading圖片，加載完后顯示全部內(nèi)容；信息條加載：預(yù)加載的信息條先空白出一行，居左出現(xiàn)小loading圖片，加載完后顯示該信息條內(nèi)容4.7提交提交按鈕：點(diǎn)擊，按鈕disabled，文字變?yōu)?提交/保存/發(fā)表中"，提交成功后，恢復(fù)原樣單輸入框+提交按鈕：點(diǎn)擊提交后，輸入框和按鈕disabled，按鈕變?yōu)?提交中"，提交成功后恢復(fù)4.8拖放用戶可以用鼠標(biāo)抓取一個對象，并將它從一個指定位置移動到另外一個指定位置的操作，我們定義為“拖放”。拖放能簡單，直觀，快速地幫助用戶實(shí)現(xiàn)布局排序等操作。如夢幻城游戲界面中建造房屋。拖放遵循所見即所得的操作原則，使整個交互過程可視化，大大降低了用戶由于誤操作所帶來的不便，同時(shí)也增加了用戶參與互動的娛樂性。拖放圖示（三-4.8）【設(shè)計(jì)意圖】讓用戶簡單、直觀、快速的達(dá)到移動對象的目的；增加用戶參與互動的娛樂性；通過單一性設(shè)備鼠標(biāo)直接完成操作任務(wù)；遵循所見即所得的操作原則，讓用戶的操作過程可見，減少出錯幾率。【應(yīng)用規(guī)范】單條拖放：鼠標(biāo)劃過：拖動區(qū)域有響應(yīng)變化，且鼠標(biāo)變?yōu)槭中危皇髽?biāo)點(diǎn)擊不松并拖拽：拖動區(qū)域邊緣高亮，且區(qū)域半透明；拖動至目標(biāo)：周圍元素讓出空位，用高亮的虛線標(biāo)出目標(biāo)位置，提供是否可移動到該處的視覺反饋；目標(biāo)位置后松手：插入目標(biāo)位置，且其它元素自動排列；拖動至其它非目標(biāo)位置：松手后回復(fù)原位置。多條拖放：鼠標(biāo)點(diǎn)擊：單擊激活選中元素，元素周圍高亮，再次單擊此元素或其它元素，取消選擇，選中其它元素按住Alt鍵點(diǎn)擊：單擊多個元素，同時(shí)高亮，顯示多個元素都被選中，再次點(diǎn)擊選中元素時(shí)，取消選擇拖拽：跟單條時(shí)一致操作反饋操作反饋規(guī)范主要用于用戶進(jìn)行一個操作之后的提示和引導(dǎo)，包括級別定義和各級別交互的定義。5.1級別定義分為如下幾個級別：成功通知：主要是由于用戶操作并得到成功結(jié)果的通知及引導(dǎo)一級提示：主要是由于用戶操作不符合條件所得到的反饋，比如表單填寫不充分等二級提示：主要是由于用戶操作符合條件但遇到規(guī)則限制造成的，比如重復(fù)操作，達(dá)到好友上限等錯誤提示：主要是由于用戶操作遇到了服務(wù)器端異常導(dǎo)致的，比如服務(wù)器宕機(jī)，數(shù)據(jù)庫連接不上等5.2各級別交互定義成功通知：直接顯示結(jié)果頁面上顯示成功提示（3秒后消失）dialog通知一級提示：即時(shí)驗(yàn)證，單項(xiàng)文字提醒dialog提示，逐項(xiàng)列舉未完成條件二級提示：頁面上顯示限制提示（不消失）dialog提示，列舉限制條件錯誤提示：dialog提示，列舉錯誤信息

之前是機(jī)器語言，現(xiàn)優(yōu)化為用戶語言

dialog詳細(xì)定義：

標(biāo)題：出錯了

內(nèi)容：啊哦白社會運(yùn)轉(zhuǎn)出現(xiàn)了點(diǎn)小問題，請稍等片刻再嘗試一下~

按鈕：確定組件交互細(xì)則信息輸入表單組合“表單組合”，是含有預(yù)定義的區(qū)域用以輸入信息的一種表單形式，它通常具有較好的數(shù)據(jù)組織結(jié)構(gòu)并且易于查看。用戶通過“表單組合”輸入并提交信息，從而完成指定功能，例如，用戶注冊，寫站內(nèi)信，個人設(shè)置等。一個對于用戶的操作具有指導(dǎo)性，可以從簡潔流暢完成任務(wù)的角度提升用戶體驗(yàn)的“表單組合”，將更有利于提高“表單組合”的完成率。表單組合（四-一-1）【設(shè)計(jì)意圖】使“輸入表單”的設(shè)計(jì)對于用戶更具指導(dǎo)性；從簡潔流暢完成任務(wù)的角度提升用戶體驗(yàn)。【組成】輸入表單由標(biāo)簽、輸入域、提示信息、反饋信息和表單命令組成，如下圖所示。其中，一個標(biāo)簽及其相應(yīng)的輸入域可稱為一個表單項(xiàng)。標(biāo)簽：相應(yīng)的輸入域的名稱；輸入域：允許用戶輸入、編輯、選擇的區(qū)域，其表現(xiàn)形式可為文本框、下拉選擇框、單選/復(fù)選框等（輸入域中的控件要合理使用，請參見《windows用戶經(jīng)驗(yàn)》）；提示信息：出現(xiàn)在用戶輸入之前，起提示作用的信息。通過對輸入規(guī)則，輸入目的，輸入后果或?qū)δ硞€標(biāo)簽意義進(jìn)一步解釋等信息的表達(dá)，對用戶的輸入進(jìn)行有針對性的提示，從而幫助用戶完成輸入。反饋信息：出現(xiàn)在用戶輸入完成之后，針對用戶的輸入，反饋給用戶的信息。在用戶完成輸入后，通過對用戶已輸入信息的校驗(yàn)，反饋給用戶校驗(yàn)結(jié)果（對錯），若用戶輸入出錯，則反饋給用戶出錯原因，修改建議等，從而幫助用戶及時(shí)、準(zhǔn)確的修改錯誤輸入。表單命令：對整個表單進(jìn)行操作的一個或一組命令。常見的有“完成”、“提交”、“重置”、“退出”等。表單組合命名示例圖（四-一-1.1）【應(yīng)用規(guī)范】標(biāo)簽的命名要簡明、易懂，使用社會化語言，而不是機(jī)器語言；一個表單項(xiàng)中的標(biāo)簽和輸入域在視覺表現(xiàn)上要為一體，不能造成用戶閱讀表單的障礙；表單項(xiàng)不超過5項(xiàng)時(shí)，表單的完成率最高。如果表單項(xiàng)超過20項(xiàng)，在無特殊要求的情況下，要讓用戶分步完成，并且提供進(jìn)度指示。進(jìn)度指示要指明用戶當(dāng)前位置，距離完成本表單還有幾步，進(jìn)度指示要使用戶在填寫表單的過程中始終可見；要合理利用整個表單的空間，輸入域的大小要盡可能的顯示出用戶的所有輸入內(nèi)容；若表單項(xiàng)進(jìn)行了分組，那么分組標(biāo)志應(yīng)清晰標(biāo)示分組。例如，使用分組線，分組框；若表單項(xiàng)存在必填項(xiàng)和選填項(xiàng)，那么在視覺上必須加以區(qū)分，例如，必填項(xiàng)以星號標(biāo)識，必填項(xiàng)和選填項(xiàng)分組顯示，并標(biāo)注說明；當(dāng)判斷出用戶出錯或存在無效輸入時(shí)，不要清空用戶原來的的輸入，以便用戶參考修改。【對齊規(guī)則】表單項(xiàng)目名居右對齊；表單內(nèi)容居左對齊；表單中提示性內(nèi)容另起一行，左對齊，使用淺色字；驗(yàn)證信息緊跟著表單內(nèi)容顯示，默認(rèn)使用圖標(biāo)+文字；按鈕跟表單內(nèi)容一起左對齊【提示反饋】必填項(xiàng)為空狀態(tài)的交互處理：在必填項(xiàng)為空時(shí)，統(tǒng)一不用文字進(jìn)行提示，采用點(diǎn)擊按鈕后，輸入框紅閃的交互效果。文字超出時(shí)的交互處理：對于文字超出的狀態(tài)，通過限定輸入框的最大輸入字?jǐn)?shù)，不能繼續(xù)輸入或粘貼對于多表單提交的處理方式：當(dāng)多表單提交時(shí)，由于表單長度過高，可能會看不到為空的狀態(tài)。同時(shí)，可能是多項(xiàng)輸入框都需要提示，所以采用彈出對話框，分項(xiàng)列出錯誤信息。如例：日志標(biāo)題不能少于2個字日志內(nèi)容不能為空對于對話層里表單提交的處理方式：由于對話層內(nèi)不可彈出新的提示層，所以當(dāng)出現(xiàn)錯誤時(shí)，直接在錯誤的輸入框下顯示錯誤信息。對于服務(wù)器端返回的錯誤提示：關(guān)閉現(xiàn)有的提示層，出現(xiàn)新的錯誤提示層。例：好友加滿時(shí)彈出新的提示層。下拉層下拉層用于在某模塊有多條數(shù)據(jù)，但在界面中只顯示一個標(biāo)題或代表的情況。這種組件形式的優(yōu)點(diǎn)是可以保證主界面的簡潔性，同時(shí)又能承載較多數(shù)據(jù)量；不足之處是交互不是很便利，數(shù)據(jù)有一定的隱蔽性。所以在使用時(shí)謹(jǐn)慎權(quán)衡其利弊。目前產(chǎn)品中有兩種下拉形式：下拉菜單和下拉列表。一個好的下拉層可以讓界面非常簡潔，還能提供豐富便利的交互行為。下拉層示例圖（四-一-2）2.1下拉菜單常用于選擇性的項(xiàng)目，即選擇一項(xiàng)后即可；一般為點(diǎn)擊后觸發(fā)，也會有個別情況是鼠標(biāo)滑過觸發(fā)；選擇某一項(xiàng)后或者鼠標(biāo)點(diǎn)擊菜單外，菜單消失。下拉菜單圖（四-一-2.1）2.2下拉列表常用于瀏覽型或設(shè)置型項(xiàng)目，即打開下拉后需要瀏覽或設(shè)置操作；點(diǎn)擊后觸發(fā)；再次點(diǎn)擊觸發(fā)位置或者設(shè)置完畢，菜單才消失。下拉列表圖（四-一-2.2）權(quán)限設(shè)置常用于選擇權(quán)限設(shè)置的地方，如隱私設(shè)置、日志瀏覽權(quán)限、照片專輯瀏覽權(quán)限等。一般存在于頁面上，個別情況存在彈出對話框中，如個人檔案中的聯(lián)系信息設(shè)置。應(yīng)用規(guī)范如圖示：權(quán)限設(shè)置圖（四-一-3）導(dǎo)航面包屑導(dǎo)航應(yīng)用于標(biāo)注當(dāng)前操作所在具體位置的設(shè)計(jì)中，讓用戶清晰的知道自己的位置，不至于“迷路”，同時(shí)提供便捷的通道，方便用戶切換到其他相關(guān)頁面，圖形化面包屑還提供一鍵回到較高層次的服務(wù)，幫助那些通過搜索或者深層次鏈接進(jìn)入到特殊但是不合適頁面的用戶。【設(shè)計(jì)意圖】防止用戶在瀏覽過程中迷失；同時(shí)提供多入口，方便用戶隨時(shí)到達(dá)目標(biāo)位置；方便用戶定位在頁面中的位置；合理的有效的利用空間，整合地址欄和面包屑的功能于一體；面包屑顯示用戶的當(dāng)前位置，幫助用戶理解所處位置與整個網(wǎng)站的關(guān)系。【組成】面包屑導(dǎo)航圖（四-二-1）【應(yīng)用規(guī)范】面包屑與地址欄合二為一；路徑關(guān)系要正確，路徑文本要與上下文相一致；在層級之間必須使有一個含義簡單明確的分隔符；面包屑的最末級，不再提供分隔符。TAB導(dǎo)航TAB是利用網(wǎng)頁小空間展現(xiàn)大量信息的一種形式，并為用戶清晰的指示出當(dāng)前所處的位置。一般情況下，當(dāng)在分類標(biāo)題數(shù)為2-10個，且標(biāo)題數(shù)不經(jīng)常改變時(shí)，可以使TAB。TAB的使用可以幫助用戶在大量信息中導(dǎo)航。TAB導(dǎo)航圖（四-二-2）【設(shè)計(jì)意圖】在一系列可選標(biāo)題中為用戶清晰的指明當(dāng)前位置。可幫助用戶在大量信息中導(dǎo)航。【應(yīng)用規(guī)范】頁簽的表現(xiàn)形式可以多種多樣，但分類標(biāo)題的關(guān)聯(lián)內(nèi)容應(yīng)在視覺上連接到當(dāng)前激活的頁簽，并保持一致的設(shè)計(jì)風(fēng)格，如使用相同的顏色，同一個邊框，指示箭頭等。使用相同顏色的表現(xiàn)風(fēng)格，為典型的頁簽表現(xiàn)形式；頁簽標(biāo)題文字最好保持在5個中文字符以內(nèi)，或1，2個英文單詞，并且頁簽寬度應(yīng)能保證完整顯示出標(biāo)題文字;；同一時(shí)間只有一個頁簽處于激活狀態(tài);；激活的頁簽應(yīng)提供視覺反饋，如：高亮當(dāng)前選擇，標(biāo)題文字字體顏色改變等；頁簽應(yīng)盡量單行顯示，如實(shí)在顯示不下，可考慮使用下拉菜單或其他解決方案。翻頁導(dǎo)航數(shù)字翻頁模式應(yīng)用于列表數(shù)據(jù)條目較多，文章篇幅較長的設(shè)計(jì)中，來對數(shù)據(jù)和篇幅進(jìn)行更好的展示。根據(jù)頁碼數(shù)的不同情況，數(shù)字翻頁控件有如下幾種形式，在設(shè)計(jì)過程中酌情選擇。翻頁導(dǎo)航圖（四-二-3）【應(yīng)用規(guī)范】頁碼數(shù)已知的情況，使用前三種頁碼數(shù)未知的情況，使用第四種頁碼數(shù)為1時(shí)，不顯示分信息展示頭像和人名頭像和人名是白社會中用戶必不可少的標(biāo)示，根據(jù)不同頁面有不同的組合使用情況。目前制定出了一下組合形式和各種形式下的尺寸規(guī)范。頭像和人名的交互反饋形式參見：三-3交互行為。1.1頭像：用于個人主頁上，最大170*200；用于Home的頭像位置，固定80*80；用于最常用出現(xiàn)的頭像或頭像+名字，固定48*48；用于右側(cè)的好友列表上，固定40*40。頭像（四-三-1.1）1.2頭像+人名+狀態(tài)：用于垂直列表；用于單獨(dú)呈現(xiàn)某個用戶頭像+人名+狀態(tài)（四-三-1.2）1.3頭像+人名：用于橫向列表或多行；用于群組呈現(xiàn)用戶。頭像+人名（四-三-1.3）信息列表產(chǎn)品中多數(shù)信息的展示都是以列表形式提供給用戶，是用戶最主要的信息獲取源。根據(jù)不同的信息，我們歸納了如下幾種信息情況的信息列表，并對相應(yīng)形式做了圖示說明。信息列表的交互反饋形式參見：三-3交互行為。2.1Newsfeed列表Newsfeed列表（四-三-2.1）2.2Minifeed列表Minifeed列表（四-三-2.2）2.3評論列表評論列表（四-三-2.3）2.4留言列表留言列表（四-三-2.4）2.6feed規(guī)則當(dāng)前條數(shù)內(nèi)，多人對同一主體內(nèi)容進(jìn)行相同操作的feed，合并主語顯示；常用于參與型app，比如投票、真心話、說秘密格式：小明，小王，小張參與了真心話+1+1=？+2小時(shí)前當(dāng)前條數(shù)內(nèi)，某人對同一app下同一主體進(jìn)行多次操作的feed，只顯示最近一條；常用于操作型app，比如評論、標(biāo)記；格式：小明對日志xxxxxxxxxxx進(jìn)行了評論2小時(shí)前當(dāng)前條數(shù)內(nèi)，某人對同一app下不同主體進(jìn)行多次操作的feed，合并后面的主體；常用于修改或添加型app，比如好友、個人檔案、應(yīng)用；格式：小明加了小張，小王，小劉為好友2小時(shí)前當(dāng)前條數(shù)內(nèi)，某人在同一app下產(chǎn)生UGC內(nèi)容，如果相似，只顯示最近的n條；常用于UGC型app，比如日志、照片、分享；格式：小明在專輯XXXXXXXXXX中上傳了7張新照片2小時(shí)前日期時(shí)間產(chǎn)品中有很多時(shí)間提示信息，根據(jù)不同的使用場景，歸納出如下幾種時(shí)間形式。在后續(xù)的設(shè)計(jì)中，可以根據(jù)使用場景從中選取相應(yīng)形式。正序長版：2009年1月15日2:30pm正序短版：2009-1-158:30am倒序：

<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:56am

2)昨天：顯示為xx:xx，例如0:30am

3)昨天以前：顯示為xx月xx日xx:xx，例如12月1日11:23am

評論時(shí)間

評論的時(shí)間始終顯示xx月xx日xx:xx，例如12月1日1:23pm第四節(jié)消息提示通知消息體1.1通知列表通知消息體盡量簡短，不顯示用戶操作的評論或留言的內(nèi)容，但可以顯示通知的對象。例如真心話里，不要顯示"他的真心告白是：'我愛好讀書'"通知消息體盡量使用主動語式，主語為某人。例如：

1.某人對你的某件東西做了什么樣的事情。例如：張小敏對你的日志XXXXX發(fā)表了評論張小敏在一張照片中提到了你查看

2.某人和你做了怎樣的事情例如：張小敏也加你為好友

張小敏跟你交換了真心話：XXX通知盡量引導(dǎo)用戶到最終頁，進(jìn)行下一步操作。在消息體中，如果操作的最終對象是名詞，則直接在該對象上加鏈接。如果通知中沒有最終對象，則在后面添加明確的"查看"或"閱讀"等鏈接。例如：消息體："張小敏對劉小賀的日志XXX發(fā)表了評論""XXX"需要加鏈接，不需要添加其它的引導(dǎo)操作

消息體："張小敏給你留言了查看"需要添加"查看"作為引導(dǎo)鏈接人名和鏈接的左右都有空格，第一個字是鏈接時(shí)，不需要左空格。1.2通知合并規(guī)則1.2.1同一個人對同一個內(nèi)容發(fā)生的相同操作，只顯示最后一條。常用于評論的通知

例如：

小A評論了你的日志XXXXXXXX3分鐘前

小A評論了你的日志XXXXXXXX5分鐘前

小A評論了你的日志XXXXXXXX8分鐘前

只顯示最近一條1.2.2不同人對同一個內(nèi)容發(fā)生的相同操作，合并主語顯示。常用于評論、真心話、照片標(biāo)記的通知

例如：

小A評論了你的日志XXXXXXXX3分鐘前

小B評論了你的日志XXXXXXXX5分鐘前

小C評論了你的日志XXXXXXXX8分鐘前

合并為：小A小B小C評論了你的日志XXXXXXXX3分鐘前小A跟你交換了真心話XXXXXXXXXXXX3分鐘前

小B跟你交換了真心話XXXXXXXXXXXX5分鐘前

小C跟你交換了真心話XXXXXXXXXXXX8分鐘前

合并為：小A小B小C跟你交換了真心話XXXXXXXXXXXX3分鐘前小A標(biāo)記了你的照片3分鐘前

小B標(biāo)記了你的照片5分鐘前

小C標(biāo)記了你的照片8分鐘前

合并為：小A小B小C標(biāo)記了你的照片3分鐘前1.2.3收到同一類型的請求的通知。常用于游戲和加好友的請求

例如：

小A申請加你為好友處理3分鐘前

小B申請加你為好友處理5分鐘前

小C申請加你為好友處理8分鐘前

合并為：小A小B小C申請加你為好友處理3分鐘前1.3通知面板通知狀態(tài)分為未點(diǎn)擊未見過、未點(diǎn)擊已見過、已點(diǎn)擊、已刪除4種狀態(tài)。未點(diǎn)擊未見過默認(rèn)在頭部有紅泡提醒數(shù)目，點(diǎn)擊觸發(fā)面板后紅泡消失，且通知面板里的未見過通知有黃退效果。未點(diǎn)擊已見過由狀態(tài)一轉(zhuǎn)變而來，存在于通知面板中，無紅泡，無黃退效果。已點(diǎn)擊凡是通過在通知面板中或者通知匯總頁中，點(diǎn)擊過通知中的鏈接的，為已點(diǎn)擊狀態(tài)。已點(diǎn)擊的通知即從通知面板中消失，但還存在于通知匯總頁中已刪除凡是通過在通知面板中或者通知匯總頁中，刪除成功的，為已刪除狀態(tài)。已刪除即從下拉面板和通知匯總頁都消失通知面板顯示一和二狀態(tài)

通知匯總頁顯示一、二、和三狀態(tài)對話框采用彈出層形式的對話框，用于對主界面操作進(jìn)行強(qiáng)調(diào)或補(bǔ)充的一種交互形式。目前產(chǎn)品中有如下幾種對話框，當(dāng)使用某種對話框時(shí)，請遵循相應(yīng)的規(guī)范。2.1確認(rèn)框常用于刪除或批量操作，再次確認(rèn)使用。交互規(guī)則：直接顯示對話框，點(diǎn)擊按鈕后直接消失。

標(biāo)題：操作+目標(biāo)，例如刪除日志，刪除照片專輯，解除好友關(guān)系

按鈕：確定+取消確認(rèn)框（四-四-2.1）2.2操作框常用于進(jìn)一步操作，入口較小，但操作步驟較多時(shí)，比如加好友，設(shè)隱私等。交互規(guī)則：直接顯示對話框，確認(rèn)完畢后，變?yōu)橥ㄖ颉?/p>

標(biāo)題：操作+目標(biāo)，一般為入口的名字，例如新建照片專輯，修改真心話，添加選項(xiàng)

按鈕：保存（行為）+取消，行為例如加為好友，添加，分享2.3通知框常用于確認(rèn)框和操作框的確認(rèn)后，通知用戶結(jié)果，一般只有一個按鈕。交互規(guī)則：點(diǎn)擊按鈕立即消失，如果不點(diǎn)擊按鈕，1秒后漸隱消失。

標(biāo)題：沿用之前操作框的標(biāo)題

按鈕：關(guān)閉2.4提示框常用于表單提交后的驗(yàn)證，通知用戶哪些信息不完整或者操作步驟不對。多條信息提示使用1、2、3的序號排列

標(biāo)題：提示

按鈕：確定提示框（四-四-2.4）2.5未保存提示框常用于表單未保存就跳轉(zhuǎn)的提示，提示用戶未保存信息是否需要保存。

標(biāo)題：未保存+目標(biāo)，例如未保存日志，未保存?zhèn)€人檔案，未保存隱私設(shè)置

按鈕：保存+不保存+取消

快捷鍵：支持鍵盤的enter操作框上的主操作，一般為"確定""保存"等，支持鍵盤的esc操作框上的取消/關(guān)閉操作，一般為"取消""關(guān)閉XX"等。第五節(jié)社交評論讓用戶直觀簡便的對主題或內(nèi)容進(jìn)行評鑒和發(fā)表評論，同時(shí)讓用戶在使用中獲得良好交互效果。產(chǎn)品中有兩種狀態(tài)：未激活、激活。1.1未激活狀態(tài)存在于一般界面的話題或內(nèi)容下方，默認(rèn)有“添加評論…”文字提示未激活評論（四-五-1.1）1.2激活狀態(tài)當(dāng)鼠標(biāo)點(diǎn)擊輸入框后，評論框被激活，呈現(xiàn)如下形式。文本域中可輸入評論內(nèi)容，點(diǎn)擊表情展開表情集合。激活評論（四-五-1.2.1）激活評論輸入表情（四-五-1.2.2）回復(fù)回復(fù)是針對某人的發(fā)言進(jìn)行回復(fù)，因此每個回復(fù)都有一個對象。回復(fù)與評論使用的是同一控件，考慮回復(fù)的特殊性，在點(diǎn)擊回復(fù)時(shí)，輸入框中自動帶出回復(fù)的對象，其余交互形式與評論相同。回復(fù)（四-五-2）轉(zhuǎn)發(fā)轉(zhuǎn)發(fā)是對某主題或內(nèi)容進(jìn)行轉(zhuǎn)發(fā)到自己的一句話中，這里的交互是點(diǎn)擊轉(zhuǎn)發(fā)后，彈出獨(dú)占焦點(diǎn)的確認(rèn)對話框。對話框的交互規(guī)范遵循對話框交互規(guī)則。對話框中的內(nèi)容為：確認(rèn)問題+轉(zhuǎn)自人用戶名+文章標(biāo)題回復(fù)（四-五-3）分享分享是對將好友或者其他有聯(lián)通的文章，分享到自己的分享分類下。點(diǎn)擊分享后，彈出獨(dú)占焦點(diǎn)的分享對話框。對話框的交互規(guī)范遵循對話框交互規(guī)則。對話框中的內(nèi)容為：分享理由+分享標(biāo)題分享（四-五-4）第六節(jié)富交互富文本輸入主要應(yīng)用于帶表情的輸入，如產(chǎn)品中的評論、回復(fù)等。形式如圖示，交互行為遵循各自元素的交互規(guī)則。1.1帶表情的輸入框常用于狀態(tài)更新的輸入框帶表情的輸入框（四-六-1.1）帶表情的輸入?yún)^(qū)域常用于評論的輸入?yún)^(qū)域和留言的輸入?yún)^(qū)域。升級：默認(rèn)設(shè)置2行的高度，當(dāng)內(nèi)容超過1行后自動增加1行高度，以此類推帶表情的輸入域（四-六-1.1）1.3智能輸入?yún)^(qū)域組件：用于：狀態(tài)更新、評論、站內(nèi)信、分享理由、真心話、說秘密、投票描述

要求：

1）輸入?yún)^(qū)域高度會隨著內(nèi)容的多少伸展，保證始終空出一行的高度，沒有右側(cè)滾動條

2）能限制最大輸入字?jǐn)?shù)，多余字?jǐn)?shù)將不能繼續(xù)輸入

3）無字符輸入時(shí)不能提交（包括空格、換行）

4）回車是換行，ctrl+回車是提交

5）支持表情插入好友選擇目前尋找好友有三種渠道：查找、系統(tǒng)推薦可能認(rèn)識的人、尋找MSN/Email聯(lián)系人，三種形式相輔相成，滿足用戶的不同需求，提供較好的用戶體驗(yàn)。2.1查找【設(shè)計(jì)意圖】查找好友渠道可滿足用戶只有范圍沒有既定目標(biāo)，通過詢問系統(tǒng)形式來找到好友。目前有三種查詢方式：找同事、找同學(xué)、找同城好友。【組成】由輸入框和三個方式算選鏈接組成。如圖：好友查找（四-六-2.1）【應(yīng)用規(guī)范】未激活狀態(tài)下，輸入框有提示性文字。可在輸入框輸入姓名、學(xué)校、公司；激活后提示文字消失，可在輸入框完成輸入操作；如輸入關(guān)鍵字有相應(yīng)結(jié)果則點(diǎn)擊查找后進(jìn)入結(jié)果頁；如沒有查詢結(jié)果則出提示文字“沒有找到相關(guān)結(jié)果，試試用其他方式查找”。2.2系統(tǒng)推薦可能認(rèn)識的人【設(shè)計(jì)意圖】滿足用戶隨機(jī)添加好友的情況，系統(tǒng)根據(jù)用戶的資料給他推薦可能相識的人。【組成】直接展示用戶列表。包括用戶頭像、用戶名、推薦理由、加為好友的快捷操作。如圖：好友列表（四-六-2.2）【應(yīng)用規(guī)范】點(diǎn)擊頭像和用戶名，進(jìn)入用戶的個人主頁；點(diǎn)擊加為好友的快捷操作，彈出加好友的對話框。2.3尋找MSN/Email聯(lián)系人【設(shè)計(jì)意圖】方便用戶把MSN里的好友，或者是Email中的聯(lián)系人邀請到系統(tǒng)中來。【組成】MSN和Email兩種渠道的單選按鈕、賬號輸入框、密碼輸入框MSN找好友（四-六-2.3.1）Email找好友（四-六-2.3.2）【應(yīng)用規(guī)范】默認(rèn)狀態(tài)下是MSN方式；登錄MSN或者登錄Email后展示，展示好友中已經(jīng)入駐白社會的聯(lián)系人和還未入駐白社會的聯(lián)系人；選中未入住的聯(lián)系人前的復(fù)選框，點(diǎn)擊發(fā)送邀請并加為好友按鈕，完成該方式的查找。文本編輯應(yīng)用于篇幅較大的文章編輯，可以在線對文章的段落格式、字體樣式等進(jìn)行快速設(shè)置，得到類似于微軟word軟件編輯出的文章效果。如轉(zhuǎn)發(fā)新帖