今天，3月21日，世界睡眠日，恰巧是個(gè)周末，勞累了一周的大家有沒有在家里睡懶覺呢~提醒大家，關(guān)注睡眠質(zhì)量就是關(guān)注生活質(zhì)量，關(guān)注睡眠就是關(guān)注健康。

好了，回到正題，在前作（一）和（二）中談到了真心話和任務(wù)的設(shè)計(jì)，這次談?wù)劙咨鐣?huì)中三個(gè)較小一點(diǎn)的設(shè)計(jì)點(diǎn)。

一、好友新鮮事新增提醒

在白社會(huì)的首頁中，分量最重的就是這個(gè)好友新鮮事了，為了保證信息流的快速直接，我們采用了“推”的模式，并且直接即時(shí)的將信息推到用戶的面前，這就是所謂的實(shí)時(shí)Feed了，這其實(shí)是一種非常酷的體驗(yàn)，信息獲取快速直接，也省了刷新頁面，是不是有種使用聊天室聊天的感覺呢。但是，凡事有利就有弊，在新鮮事的開始階段，我們發(fā)現(xiàn)了實(shí)際使用中不爽的地方，在瀏覽新鮮事的時(shí)候（尤其是看分享的視頻），或在評(píng)論新鮮事的時(shí)候，由于新增的新鮮事，會(huì)造成整個(gè)新鮮事區(qū)域在往下滾動(dòng)，瀏覽和評(píng)論都無法進(jìn)行了，嚴(yán)重打斷了正在進(jìn)行的行為，所以，我們此時(shí)想讓信息“?！毕聛?。但在，什么時(shí)候停下來，是需要謹(jǐn)慎考慮的，既不能破壞了信息的實(shí)時(shí)性，又能不打斷用戶的瀏覽/操作行為，這時(shí)候我們建立一個(gè)用戶模型，假設(shè)了一下用戶的行為：

【狀態(tài)1】用戶瀏覽器中首頁處于初始位置的時(shí)候，即用戶沒有滾動(dòng)頁面，用戶行為是：

（1）用戶在等待新鮮事
（2）用戶在發(fā)布信息
（3）用戶在瀏覽新鮮事/評(píng)論
（4）用戶在評(píng)論/操作新鮮事

【狀態(tài)2】用戶向下滾動(dòng)了頁面，用戶行為是：

（1）用戶在瀏覽新鮮事/評(píng)論
（2）用戶在評(píng)論/操作新鮮事

這個(gè)時(shí)候，我們就能判斷出，在【狀態(tài)2】中，信息必須要“?！毕聛恚员ＷC不打斷用戶行為，而在【狀態(tài)1】中，由于（1）（2）行為的概率要大于（3）（4），所以我們讓信息繼續(xù)“動(dòng)”。轉(zhuǎn)變?yōu)榭蓤?zhí)行的方案，就是這樣，我們加了一個(gè)判斷，頁面中的一個(gè)分界點(diǎn)如果在瀏覽器以內(nèi)，信息“動(dòng)”，在瀏覽器以外，信息“?！薄Ｔ谶M(jìn)一步精確了分界點(diǎn)之后，我們把分界點(diǎn)定為新鮮事的最上端（見下圖）。

明確了這個(gè)之后，進(jìn)入下一個(gè)關(guān)鍵點(diǎn)，就是如何讓在“?！钡臓顟B(tài)下知道有新增新鮮事。這就相對(duì)容易一些了，只需要在頁面上給出標(biāo)識(shí)提醒到用戶即可，我們選擇在新鮮事區(qū)域的最上方，出現(xiàn)一個(gè)小的提示層，當(dāng)有新增新鮮事時(shí)，出現(xiàn)并顯示數(shù)量（見下圖）。

此時(shí)，用戶及時(shí)了解到了新增新鮮事，當(dāng)然如果他想看這幾條新增新鮮事，也不能太麻煩，最好就是讓他直接點(diǎn)擊這個(gè)東西，所以這個(gè)層還有個(gè)功能就是滾動(dòng)回首屏，當(dāng)?shù)绞灼林?，就進(jìn)入了前面說的【狀態(tài)1】，新鮮事自然就“動(dòng)”了。這里還有個(gè)小細(xì)節(jié)，當(dāng)提示的新增新鮮事數(shù)目過多時(shí)，用戶在回到首屏后，大量新鮮事在同時(shí)加載，可能會(huì)嚴(yán)重拖慢或者卡死瀏覽器，所以我們定義了超過30條時(shí)，回到首屏后，就重新刷新一下全部的新鮮事，就避免了這個(gè)問題。

二、在線聊天的會(huì)話

白社會(huì)頁面的右側(cè)，有一個(gè)在線聊天，我們管它叫WebIM，就是網(wǎng)頁版的即時(shí)聊天，可以跟白社會(huì)里的好友聊天，是不是很像QQ？向偉大的QQ致敬！好吧，這里我們重點(diǎn)要談的不是QQ，而是聊天的會(huì)話狀態(tài)，我們用過QQ的都知道，當(dāng)有新消息來的時(shí)候，系統(tǒng)任務(wù)欄右下角會(huì)有小頭像一閃一閃，我們點(diǎn)開就會(huì)出現(xiàn)一個(gè)新聊天窗口，而在用戶的任務(wù)欄上，也會(huì)新增一個(gè)會(huì)話，而且在跟多人聊天時(shí)會(huì)有多個(gè)會(huì)話，我們只需要點(diǎn)擊不同的會(huì)話，就可以激活不同的聊天窗口（見下圖）。

那網(wǎng)頁版的會(huì)話怎么處理呢？頁面里是沒有任務(wù)欄的。有些WebIM創(chuàng)造了這么一個(gè)任務(wù)欄，比如Facebook，頁面下方多出來一個(gè)浮動(dòng)工具條，當(dāng)然它還有別的用途，這也是個(gè)辦法，但有沒有別的更好的辦法呢？思考過程中，我們重新梳理了會(huì)話的作用：

1、存儲(chǔ)聊天狀態(tài)
2、切換聊天對(duì)象
3、提醒新信息

這樣看來，會(huì)話需要呈現(xiàn)的信息并不需要太多，只用小頭像顯示即可，我們把目光放到了聊天面板上“在線好友”上面（見下圖）。

在這里依據(jù)時(shí)間順序排列會(huì)話的小頭像，操作上也很順手，詳細(xì)定義一下：

1、當(dāng)有新消息來時(shí)，出現(xiàn)目標(biāo)好友的小頭像一閃一閃，點(diǎn)擊后出現(xiàn)聊天窗口，同時(shí)存儲(chǔ)聊天狀態(tài)，會(huì)話小頭像保留，不再閃動(dòng)
2、最小化聊天窗口后，保留會(huì)話小頭像，關(guān)閉聊天窗口后，去除會(huì)話小頭像
3、點(diǎn)擊會(huì)話小頭像，彈出/激活之前的聊天窗口

當(dāng)然，還有一種狀態(tài)也不能忘，就是在屏幕分辨率在1024或者更低時(shí)，我們定義聊天面板是收起來的（見下圖）。

這時(shí)會(huì)話的位置同樣可以放在收起的小條上，絲毫不影響使用~

三、編輯器的編輯區(qū)域

在白社會(huì)的日志、轉(zhuǎn)帖、討論區(qū)中，都要發(fā)布/修改內(nèi)容，所以要用到編輯器。說到編輯器，不得不說編輯器的鼻祖——Office中的Word，作為文字編輯最強(qiáng)者，編輯器的發(fā)展也是引領(lǐng)時(shí)代的，而在網(wǎng)頁端，編輯器的功能受網(wǎng)頁端的限制，做不到太強(qiáng)，所以在使用感受上，如何能接近Word的使用感受，自然是最好的。

說到這里，需要明確的是，對(duì)文字編輯來說，編輯器并不僅僅是上面的一堆工具條，還有個(gè)最重要的就是編輯區(qū)域，這里其實(shí)最影響編輯較多文字時(shí)的感受，以往我們使用網(wǎng)頁版編輯器時(shí)，常常會(huì)因?yàn)榫庉媴^(qū)域太小，而要面對(duì)編輯框里和頁面的雙重滾動(dòng)條，十分難受（見下圖）。

回想一下Word里，只有一個(gè)滾動(dòng)條，為什么呢，文檔是滿了一頁又出一頁，這就給我們帶來了靈感，如果我們的瀏覽器也是這樣呢~ 所以我們定義了編輯器中編輯區(qū)域是根據(jù)內(nèi)容自動(dòng)伸展的，這樣就很像Word里的滿了一頁又出一頁，這樣就只有一個(gè)瀏覽器的滾動(dòng)條了，但是當(dāng)頁面長(zhǎng)了往下翻時(shí)，上面的工具條看不見了，這樣我們又定義了工具條跟隨頁面往下滾，有了上面“好友新鮮事新增提醒”之后，這個(gè)就是一樣的定義了，這樣編輯時(shí)就是這樣的狀態(tài)了（見下圖）。

這樣一個(gè)小小的變化，編輯文字過多時(shí)就會(huì)好用很多。

寫了三期的交互創(chuàng)新了，也許這些創(chuàng)新點(diǎn)還不成熟，還有很多缺點(diǎn)，不過我們不怕大家笑話，能給大家分享一下我們?cè)谔剿髀飞系乃悸芬彩呛玫模瑫r(shí)也歡迎大家能夠多多交流自己的思路和想法，讓我們共同來推動(dòng)行業(yè)的發(fā)展吧！

來源：http://leeking001.com/?p=293

延伸閱讀：

淺談白社會(huì)交互設(shè)計(jì)的創(chuàng)新(一)

淺談白社會(huì)交互設(shè)計(jì)的創(chuàng)新(二)