淺談白社會交互設計的創新（二）
淺談白社會交互設計的創新（一）

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

好了，回到正題，在前作（一）和（二）中談到了真心話和任務的設計，這次談談白社會中三個較小一點的設計點。

一、好友新鮮事新增提醒

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

【狀態1】用戶瀏覽器中首頁處于初始位置的時候，即用戶沒有滾動頁面，用戶行為是：

（1）用戶在等待新鮮事
（2）用戶在發布信息
（3）用戶在瀏覽新鮮事/評論
（4）用戶在評論/操作新鮮事
【狀態2】用戶向下滾動了頁面，用戶行為是：

（1）用戶在瀏覽新鮮事/評論
（2）用戶在評論/操作新鮮事
這個時候，我們就能判斷出，在【狀態2】中，信息必須要“停”下來，以保證不打斷用戶行為，而在【狀態1】中，由于（1）（2）行為的概率要大于（3）（4），所以我們讓信息繼續“動”。轉變為可執行的方案，就是這樣，我們加了一個判斷，頁面中的一個分界點如果在瀏覽器以內，信息“動”，在瀏覽器以外，信息“停”。在進一步精確了分界點之后，我們把分界點定為新鮮事的最上端（見下圖）。

明確了這個之后，進入下一個關鍵點，就是如何讓在“停”的狀態下知道有新增新鮮事。這就相對容易一些了，只需要在頁面上給出標識提醒到用戶即可，我們選擇在新鮮事區域的最上方，出現一個小的提示層，當有新增新鮮事時，出現并顯示數量（見下圖）。

此時，用戶及時了解到了新增新鮮事，當然如果他想看這幾條新增新鮮事，也不能太麻煩，最好就是讓他直接點擊這個東西，所以這個層還有個功能就是滾動回首屏，當到首屏之后，就進入了前面說的【狀態1】，新鮮事自然就“動”了。這里還有個小細節，當提示的新增新鮮事數目過多時，用戶在回到首屏后，大量新鮮事在同時加載，可能會嚴重拖慢或者卡死瀏覽器，所以我們定義了超過30條時，回到首屏后，就重新刷新一下全部的新鮮事，就避免了這個問題。

二、在線聊天的會話

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

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

1、存儲聊天狀態
2、切換聊天對象
3、提醒新信息
這樣看來，會話需要呈現的信息并不需要太多，只用小頭像顯示即可，我們把目光放到了聊天面板上“在線好友”上面（見下圖）。

在這里依據時間順序排列會話的小頭像，操作上也很順手，詳細定義一下：

1、當有新消息來時，出現目標好友的小頭像一閃一閃，點擊后出現聊天窗口，同時存儲聊天狀態，會話小頭像保留，不再閃動
2、最小化聊天窗口后，保留會話小頭像，關閉聊天窗口后，去除會話小頭像
3、點擊會話小頭像，彈出/激活之前的聊天窗口
當然，還有一種狀態也不能忘，就是在屏幕分辨率在1024或者更低時，我們定義聊天面板是收起來的（見下圖）。

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

三、編輯器的編輯區域

在白社會的日志、轉帖、討論區中，都要發布/修改內容，所以要用到編輯器。說到編輯器，不得不說編輯器的鼻祖——Office中的Word，作為文字編輯最強者，編輯器的發展也是引領時代的，而在網頁端，編輯器的功能受網頁端的限制，做不到太強，所以在使用感受上，如何能接近Word的使用感受，自然是最好的。

說到這里，需要明確的是，對文字編輯來說，編輯器并不僅僅是上面的一堆工具條，還有個最重要的就是編輯區域，這里其實最影響編輯較多文字時的感受，以往我們使用網頁版編輯器時，常常會因為編輯區域太小，而要面對編輯框里和頁面的雙重滾動條，十分難受（見下圖）。

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

這樣一個小小的變化，編輯文字過多時就會好用很多。

寫了三期的交互創新了，也許這些創新點還不成熟，還有很多缺點，不過我們不怕大家笑話，能給大家分享一下我們在探索路上的思路也是好的，同時也歡迎大家能夠多多交流自己的思路和想法，讓我們共同來推動行業的發展吧！