close

白社會VS開心-對比評測-UI分析 - 網頁設計

http://webdesign.zoapcon.com

 

個人主頁

1、導航
極贊,且采用了少見的跟隨窗口滾動的方式。由于整體配色清淡一致的緣故,這樣也不覺得打攪,不過就犧牲了導航常用的深色系,使導航不夠醒目,利弊參半。我猜測原因是這樣的:為了及時通知消息(當頁面拉到較低位置的時候),又要把標簽欄走馬燈的提示效果讓給Web im,只好讓導航條跟著滾了。

找人的輸入框容易被誤解為“找好友”,其實是全站搜索,剛開始有點錯愕,適應后也滿好。新通知和通知拉層的設計極贊,必引為己用。

2、Banner
其實談不上是Banner……,或者算是形象版頭吧。

視覺上和導航并不統一,但基本忽略了這一點。看見有人說那個大太陽是白社會的天氣預報,大笑。Boss圈圈和“生活在別處”都是小眾趣味的文藝腔,無視之。音樂播放器的UI極贊,神來之筆,比開心體貼許多,協調又趁手。但經常忍不住去點那個“隨便聽點什么”,猛點,點它不動。

3、內容版頭
一句話發布框是向FB的致敬之作,下面的三個小圖標其實很好用,但我很懷疑純圖標會使得點擊率下降500%,不及FF直接用文字表述的清晰。右側的小報/等級/金幣/打卡信息簡潔緊湊,花絮效果居多,且數字顏色太淺,雖然與整體融合度佳,卻削弱了概念上的感染力。

任務模塊是神來之筆,把UCH的創造給發揚光大,極贊。但遇到我不喜歡的任務,還關不掉,成天在那里死皮賴臉地掛著。這點開心做得好很多,絕不會在主要界面上設置強奸性的元素。包括等級,積分,也有人“偏生不喜歡”的。白社會的風格化終歸不夠大氣。

4、左側導航
清爽歸清爽了,和諧歸和諧了,毛病始終在那里,就是字太纖細,遠不及開心的醒目。為了使組件導航條更突出一些,圖標沒跟著12號字一起瘦身,又使得圖標大過文字,進一步削弱了組件標題的視覺權重。唉,白社會就是死要面子活受罪。像開心那樣用14號加粗字體又怎么了?丑是丑一些,用起來實在。導航,自然以點擊順手為最高原則。別拿設計人員的美學來擺架子。

在左導航和動態區之間有一個折頁效果,是很漂亮,但我不喜歡。過多的立體感會增加整個頁面的復雜印象。好的產品設計,應該豐富而不復雜。炫技無益而有害。

5、中央動態區域
對這塊似乎褒貶不一,我持整體貶低的態度,可能是因為媒體出身,很強調“通透”“流暢”“統一”這些概念。而白社會強調的是“豐富”“活潑”“快速定位”,完全另一套概念。換句話說,可能無法直接地蓋一個“優/良/中/差”這樣的印章。得看用戶的喜好。比如像我這樣的用戶,喜歡自上而下的順序閱讀,就很反感,覺得它樣式和顏色太多,花,亂,看得頭暈。而另一些用戶喜歡跳躍性閱讀,隨便挑著看,有可能就覺得它重點突出,豐富活潑。

我經常大發議論說,用戶印象是永遠沒有錯的。用戶感受都是對的。只是看我們最終能取悅多少用戶,他們是大眾還是小眾,是否能取悅到我們想要的用戶。從這個角度來看,白社會的動態區域UI恐怕放棄面太大,因為我這一類的用戶并非少數。這也是我持整體貶低態度的原因,不僅僅出于個人好惡。

具體到細節,將動態類別過濾用下拉菜單的方式放在區域右上角,想法很不錯,卻又犯了拘泥于圖標的老毛病。我覺得那玩意兒挺好用的,就是想不起來去用它。或者說,我看不見它,就算看見了也意識不到這哥們是干什么的。原則上,如果用戶沒有強烈的主動使用需求,但確實又能有效改善其體驗,我們盡可能使用文字鏈接而不是圖標,以引導用戶建立這個習慣。白社會的設計師雖然強悍,卻有不少美學上的固執。

而把動態過濾的設置鏈接放在全局右下(這回你終于用文字鏈接了吧),應用過分高端。既然整個區域是跳躍性瀏覽,到末尾的時候很容易“跳過去”,此處所受的重視就比順序瀏覽更少。此外,30多條動態對吧,也只能跳著看,頁面太長了,很難拉到底。拉到底的第一反應不是短暫的停頓,而是快速回彈,怎么看得見右下鍵淺淺的“設置”兩個字。

關于白社會的動態過載,泥沙俱下,我在之前的文章里詳細講過,這就特別需要用戶手動來過濾一些不愛的內容,免得被其趕跑,動態過濾設置也就特別重要。結果功能入口被丟在如此冷清的角落里,非常不明智,如韓信在項王帳下,僅一執戟郎中耳。

全局左下的“查看更多新鮮事”,我們部門去年給這種交互效果取了個名字叫“滾筒式”翻頁,很好用——就是不好點。TW整條通欄可點擊,用起來多舒服。雖然白社會在學FB,可人家略微居中的點擊位置順手不少。不過我喜歡白社會點擊更多鏈接后的loading提示,輕巧順暢,比FB的更好。

最后說兩個花絮,在可回復的動態中,只要有第一個人回復,內容動態下面的窄評論框就會缺省展開,估計是認為這條信息有可能具備討論價值。取材自FB的引導交流的思路極贊。在白社會中,可贊的交互設計確實多不勝數,看得我又愛又恨。必引為己用。

而用戶發布內容后,在自己首頁的動態區域內亦可見,也很棒。用戶直觀地意識到自己的動作被融入了整個社交動態環境之中,確信發布成功,將為人所知;也就更容易樹立對整個動態環境的認知度和認同度。同時也便于查看好友對自己發布內容的回復。

6、右欄色帶區域
“最近訪客”有個算法問題,如果一個人看了我的日志,但沒踩我的主頁,那么他不會被放到那里邊去,這是錯的。應該按開心的算法,看了日志(或其他個人內容頁)的就算訪客。他確實訪問了“我的頁面”,不應該把訪問概念局限在“個人首頁”上。這樣用戶能更快了解自己所發布內容的反饋——比如我在開心剛發了日志,一看最近訪客的頭像更新,就知道誰先看過了。非常及時。同時也顯得那里熱鬧一些,人多一些,心里比較滿足。

“可能認識的人”和“邀請好友”從位置到設計都恰到好處,整個右欄色帶區域的內容編排簡潔明了,邏輯清晰,贊。白社會在這里倒是能收起賣弄的欲望,清寧流暢。

7、Web im
評價就倆字:“自戀”。我說的不是技術層面,技術上挺好的,社交平臺做Web im也不錯,但丟那個位置很不能忍。第一,太突出了,其實又不愛用,社交平臺的優勢在于異步交流,即時聊天只是輔助性服務。第二,好友多的時候在頁面右側會出現雙重滾動條——Web im的和瀏覽器的,極其不爽。第三,我本能地想從這里進入好友首頁,但是點小頭像,大頭像,都是打開聊天窗口,非得“點大頭像浮層的姓名文字鏈接”這么麻煩才能去好友首頁——難道白社會就這么肯定,用戶互相訪問的需求遠遠小于在線聊天的需求?依我看,恰恰相反吧。不常用操作占據了常用操作的地盤(雖然1024下看不見),我如何不惱?

總之這個模塊的權重被設得太高,過分突出。而有新的聊天消息時,瀏覽器標簽欄出現跑馬燈效果,更是煩球得很。拜托,“Web im聊天”的內容權重并不高,用戶接受不了這種程度的打攪——那叫騷擾好不好?別瞎抄人家開心。在開心里,新消息以“好友對自己所發布內容的回復”為主,這種消息的質量足以抵消標簽欄閃爍的干擾。換句話說,用戶是否認為消息提示是一種干擾,更多取決于在他心目中消息的質量,而不是其形式。基本上用戶對“互動反饋”是有很大期待的,他發布內容,往往就是為了看好友怎么來評論,而Web im上的搭訕閑聊則遠遜于此。因此又是一個不重要信息占用了重要信息的地盤,鳩占鵲巢。

有時候覺得白社會的炫技心態嚴重,突出Web im,可能也源出于此。

8、老板鍵
524第一次看見的時候,愣了半響,哈哈大笑。白社會的產品團隊真的很聰明。

白社會全局居左,在1280的極右側基本是視線的盲區,適合放一些不常用,又不算全無價值的東西。這個老板鍵呢,我猜它的目的倒不是真的讓用戶去跟老板躲貓貓,而是一個用戶群定位的暗示:“這產品適合坐辦公室的成年人,用我,比用開心更加安全。”簡簡單單的一個功能,卻比啰啰嗦嗦亂七八糟的交互文案更來得親切友好,印象深刻。

開心、有道、白社會,蝦米,亦歌,是國內我很喜歡的五個產品團隊。前三者尤好。

9、個人主頁
個人主頁這里恐怕是有些大問題的,比如開心就把它用“別人怎么看我”的方式給折疊起來了。原因很簡單,我去個人主頁的概率很低,目的也就是看看自己的頁面在別人眼里是什么樣子,如果用上了一個獨立的導航位,權重放得太高,反而讓新用戶迷亂:“它干嘛的?我在這里干嘛?”字面上和功能應用上都不容易理解所謂“個人主頁”的定義。

在白社會的個人主頁里,首先放照片,其次日記,再次新鮮事,要球不得。雖然照片和日記的權重較高,但更新頻率太低,容易造成對方頭屏無更新的印象。印象相當壞。開心就反過來,新鮮事→照片→日記。通過強調“更新”來促進用戶之間的互相訪問。

此外,開心的照片模塊放最新相片,白社會的照片模塊放專輯封面——這更要命,直觀可見的更新量那就更低了。唉……這些家伙在想什么喲。

當然,將個人主頁的權重提高也不是一無是處。最大的好處就是把一些個人性的東西放進來,讓首頁更整潔。比如左欄的音樂盒和禮物櫥窗,比如右欄的好友列表,比如頂部向蝦米致敬的自動簡介“我是某地某星座男生”(不!我是怪蜀黍!)。但我用了一年的開心,很難適應在兩個個人頁面(首頁和個人主頁)間跳來跳去,更認可單頁面中心的產品框架。國內用戶總體上低端,產品框架不宜復雜化。任何時候都應該把“好用,順手,簡單”這些指標放在第一位,而不是固執于視覺上的完美或者呆板機械的內容邏輯。

10、其他,以及總結
好友界面的設計很鬼扯,很不好用,操作時頁面跳來跳去很煩惱。交互設計師你來連續給10個人分類試試?由于資料分布稀疏,如果不用搜索(我就不愛用搜索),查找好友的效率很低,對好友進行操作的效率更低。設計上的極簡主義,放在這里就變成了主觀思維的極簡偏執。

我的站內信是空的,所以沒法評價(誰給我發一條試試)。邀請和設置頁面都很好,但設置的下拉菜單一看就很復雜,會嚇到人,尤其是新用戶,第一印象受此拖累,覺得這玩意兒太復雜,怕是折騰不動。找人頁面還有個大的缺陷:不應該把過濾項全部折疊起來,至少把過濾選擇鏈接搞得更醒目一些,否則不容易留意到,也就不容易找到人。

白社會全局采用了棕色的超鏈接,不難看,但有些搶眼,有些花哨,對比度上對灰色的文字有些壓制,不及常規的深藍色超鏈接效果。說到灰色的文字,只考慮了整體上的視覺協調,卻遠不及開心黑色文字的清晰舒適,也屬于好看不好用的范疇。基本上白社會配色的對比度偏弱,文字內容不夠突出,第一印象固然美,卻不適合集中注意力大量閱讀。那么,第一印象和大量閱讀,哪一個對社交平臺更重要呢?

比開心好看,卻不如開心好用,考慮設計者的感受比使用者更多,就是我對白社會UI設計的整體評價。而它在交互體驗和交互性能上的優勢有目共睹,不夸也罷。計劃中對白社會的評測有3篇,今晚,或者明天再接著寫第三篇“組件快評”。雖評價別家的孩子,也是借這機會來講我對社交產品的設計理念。一吐為快。

原文的圖配得很爛,我加工一下再配上去.

 

arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜
    創作者介紹
    創作者 imarketin 的頭像
    imarketin

    imarketin的部落格

    imarketin 發表在 痞客邦 留言(0) 人氣()