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

之前是機器語言，現優化為用戶語言

dialog詳細定義：

標題：出錯了

內容：啊哦白社會運轉出現了點小問題，請稍等片刻再嘗試一下~

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

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

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

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

評論時間

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

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

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

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

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

例如：

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

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

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

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

例如：

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

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

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

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

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

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

合并為：小A小B小C跟你交換了真心話XXXXXXXXXXXX3分鐘前小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種狀態。未點擊未見過默認在頭部有紅泡提醒數目，點擊觸發面板后紅泡消失，且通知面板里的未見過通知有黃退效果。未點擊已見過由狀態一轉變而來，存在于通知面板中，無紅泡，無黃退效果。已點擊凡是通過在通知面板中或者通知匯總頁中，點擊過通知中的鏈接的，為已點擊狀態。已點擊的通知即從通知面板中消失，但還存在于通知匯總頁中已刪除凡是通過在通知面板中或者通知匯總頁中，刪除成功的，為已刪除狀態。已刪除即從下拉面板和通知匯總頁都消失通知面板顯示一和二狀態

通知匯總頁顯示一、二、和三狀態對話框采用彈出層形式的對話框，用于對主界面操作進行強調或補充的一種交互形式。目前產品中有如下幾種對話框，當使用某種對話框時，請遵循相應的規范。2.1確認框常用于刪除或批量操作，再次確認使用。交互規則：直接顯示對話框，點擊按鈕后直接消失。

標題：操作+目標，例如刪除日志，刪除照片專輯，解除好友關系

按鈕：確定+取消確認框（四-四-2.1）2.2操作框常用于進一步操作，入口較小，但操作步驟較多時，比如加好友，設隱私等。交互規則：直接顯示對話框，確認完畢后，變為通知框。

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

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

標題：沿用之前操作框的標題

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

標題：提示

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

標題：未保存+目標，例如未保存日志，未保存個人檔案，未保存隱私設置

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

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

要求：

1）輸入區域高度會隨著內容的多少伸展，保證始終空出一行的高度，沒有右側滾動條

2）能限制最大輸入字數，多余字數將不能繼續輸入

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

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

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