建站常識

淺談白社會交互設(shè)計的創(chuàng)新（三）

2010-03-23 08:35:00

淺談白社會交互設(shè)計的創(chuàng)新（二）
淺談白社會交互設(shè)計的創(chuàng)新（一）

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

好了，回到正題，在前作（一）和（二）中談到了真心話和任務(wù)的設(shè)計，這次談?wù)劙咨鐣腥齻€較小一點的設(shè)計點。

一、好友新鮮事新增提醒

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

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

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

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

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

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

二、在線聊天的會話

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

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

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

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

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

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

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

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

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

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