淺談白社會交互設計的創新(三)

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

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

一、好友新鮮事新增提醒

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

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

    (1)用戶在等待新鮮事

    (2)用戶在發布信息

    (3)用戶在瀏覽新鮮事/評論

    (4)用戶在評論/操作新鮮事

【狀態2】用戶向下滾動了頁面,用戶行為是:

    (1)用戶在瀏覽新鮮事/評論

    (2)用戶在評論/操作新鮮事

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

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

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

二、在線聊天的會話

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

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

    1、存儲聊天狀態

    2、切換聊天對象

    3、提醒新信息

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

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

    1、當有新消息來時,出現目標好友的小頭像一閃一閃,點擊後出現聊天窗口,同時存儲聊天狀態,會話小頭像保留,不再閃動

    2、最小化聊天窗口後,保留會話小頭像,關閉聊天窗口後,去除會話小頭像

    3、點擊會話小頭像,彈出/激活之前的聊天窗口

當然,還有一種狀態也不能忘,就是在屏幕分辨率在1024或者更低時,我們定義聊天面板是收起來的(見下圖)。

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

三、編輯器的編輯區域

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

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

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

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

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

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

延伸閱讀:

淺談白社會交互設計的創新(一)

淺談白社會交互設計的創新(二)

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.