今天，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裡的滿了一頁又出一頁，這樣就只有一個浏覽器的滾動條了，但是當頁面長了往下翻時，上面的工具條看不見了，這樣我們又定義了工具條跟隨頁面往下滾，有了上面“好友新鮮事新增提醒”之後，這個就是一樣的定義了，這樣編輯時就是這樣的狀態了（見下圖）。
這樣一個小小的變化，編輯文字過多時就會好用很多。
寫了三期的交互創新了，也許這些創新點還不成熟，還有很多缺點，不過我們不怕大家笑話，能給大家分享一下我們在探索路上的思路也是好的，同時也歡迎大家能夠多多交流自己的思路和想法，讓我們共同來推動行業的發展吧！