個(gè)人主頁(yè)

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

找人的輸入框容易被誤解為“找好友”，其實(shí)是全站搜索，剛開(kāi)始有點(diǎn)錯(cuò)愕，適應(yīng)后也滿好。新通知和通知拉層的設(shè)計(jì)極贊，必引為己用。

2、Banner
其實(shí)談不上是Banner……，或者算是形象版頭吧。

視覺(jué)上和導(dǎo)航并不統(tǒng)一，但基本忽略了這一點(diǎn)?？匆?jiàn)有人說(shuō)那個(gè)大太陽(yáng)是白社會(huì)的天氣預(yù)報(bào)，大笑。Boss圈圈和“生活在別處”都是小眾趣味的文藝腔，無(wú)視之。音樂(lè)播放器的UI極贊，神來(lái)之筆，比開(kāi)心體貼許多，協(xié)調(diào)又趁手。但經(jīng)常忍不住去點(diǎn)那個(gè)“隨便聽(tīng)點(diǎn)什么”，猛點(diǎn)，點(diǎn)它不動(dòng)。

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

任務(wù)模塊是神來(lái)之筆，把UCH的創(chuàng)造給發(fā)揚(yáng)光大，極贊。但遇到我不喜歡的任務(wù)，還關(guān)不掉，成天在那里死皮賴臉地掛著。這點(diǎn)開(kāi)心做得好很多，絕不會(huì)在主要界面上設(shè)置強(qiáng)奸性的元素。包括等級(jí)，積分，也有人“偏生不喜歡”的。白社會(huì)的風(fēng)格化終歸不夠大氣。

4、左側(cè)導(dǎo)航
清爽歸清爽了，和諧歸和諧了，毛病始終在那里，就是字太纖細(xì)，遠(yuǎn)不及開(kāi)心的醒目。為了使組件導(dǎo)航條更突出一些，圖標(biāo)沒(méi)跟著12號(hào)字一起瘦身，又使得圖標(biāo)大過(guò)文字，進(jìn)一步削弱了組件標(biāo)題的視覺(jué)權(quán)重。唉，白社會(huì)就是死要面子活受罪。像開(kāi)心那樣用14號(hào)加粗字體又怎么了？丑是丑一些，用起來(lái)實(shí)在。導(dǎo)航，自然以點(diǎn)擊順手為最高原則。別拿設(shè)計(jì)人員的美學(xué)來(lái)擺架子。

在左導(dǎo)航和動(dòng)態(tài)區(qū)之間有一個(gè)折頁(yè)效果，是很漂亮，但我不喜歡。過(guò)多的立體感會(huì)增加整個(gè)頁(yè)面的復(fù)雜印象。好的產(chǎn)品設(shè)計(jì)，應(yīng)該豐富而不復(fù)雜。炫技無(wú)益而有害。

5、中央動(dòng)態(tài)區(qū)域
對(duì)這塊似乎褒貶不一，我持整體貶低的態(tài)度，可能是因?yàn)槊襟w出身，很強(qiáng)調(diào)“通透”“流暢”“統(tǒng)一”這些概念。而白社會(huì)強(qiáng)調(diào)的是“豐富”“活潑”“快速定位”，完全另一套概念。換句話說(shuō)，可能無(wú)法直接地蓋一個(gè)“優(yōu)/良/中/差”這樣的印章。得看用戶的喜好。比如像我這樣的用戶，喜歡自上而下的順序閱讀，就很反感，覺(jué)得它樣式和顏色太多，花，亂，看得頭暈。而另一些用戶喜歡跳躍性閱讀，隨便挑著看，有可能就覺(jué)得它重點(diǎn)突出，豐富活潑。

我經(jīng)常大發(fā)議論說(shuō)，用戶印象是永遠(yuǎn)沒(méi)有錯(cuò)的。用戶感受都是對(duì)的。只是看我們最終能取悅多少用戶，他們是大眾還是小眾，是否能取悅到我們想要的用戶。從這個(gè)角度來(lái)看，白社會(huì)的動(dòng)態(tài)區(qū)域UI恐怕放棄面太大，因?yàn)槲疫@一類(lèi)的用戶并非少數(shù)。這也是我持整體貶低態(tài)度的原因，不僅僅出于個(gè)人好惡。

具體到細(xì)節(jié)，將動(dòng)態(tài)類(lèi)別過(guò)濾用下拉菜單的方式放在區(qū)域右上角，想法很不錯(cuò)，卻又犯了拘泥于圖標(biāo)的老毛病。我覺(jué)得那玩意兒挺好用的，就是想不起來(lái)去用它?；蛘哒f(shuō)，我看不見(jiàn)它，就算看見(jiàn)了也意識(shí)不到這哥們是干什么的。原則上，如果用戶沒(méi)有強(qiáng)烈的主動(dòng)使用需求，但確實(shí)又能有效改善其體驗(yàn)，我們盡可能使用文字鏈接而不是圖標(biāo)，以引導(dǎo)用戶建立這個(gè)習(xí)慣。白社會(huì)的設(shè)計(jì)師雖然強(qiáng)悍，卻有不少美學(xué)上的固執(zhí)。

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

關(guān)于白社會(huì)的動(dòng)態(tài)過(guò)載，泥沙俱下，我在之前的文章里詳細(xì)講過(guò)，這就特別需要用戶手動(dòng)來(lái)過(guò)濾一些不愛(ài)的內(nèi)容，免得被其趕跑，動(dòng)態(tài)過(guò)濾設(shè)置也就特別重要。結(jié)果功能入口被丟在如此冷清的角落里，非常不明智，如韓信在項(xiàng)王帳下，僅一執(zhí)戟郎中耳。

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

最后說(shuō)兩個(gè)花絮，在可回復(fù)的動(dòng)態(tài)中，只要有第一個(gè)人回復(fù)，內(nèi)容動(dòng)態(tài)下面的窄評(píng)論框就會(huì)缺省展開(kāi)，估計(jì)是認(rèn)為這條信息有可能具備討論價(jià)值。取材自FB的引導(dǎo)交流的思路極贊。在白社會(huì)中，可贊的交互設(shè)計(jì)確實(shí)多不勝數(shù)，看得我又愛(ài)又恨。必引為己用。

而用戶發(fā)布內(nèi)容后，在自己首頁(yè)的動(dòng)態(tài)區(qū)域內(nèi)亦可見(jiàn)，也很棒。用戶直觀地意識(shí)到自己的動(dòng)作被融入了整個(gè)社交動(dòng)態(tài)環(huán)境之中，確信發(fā)布成功，將為人所知；也就更容易樹(shù)立對(duì)整個(gè)動(dòng)態(tài)環(huán)境的認(rèn)知度和認(rèn)同度。同時(shí)也便于查看好友對(duì)自己發(fā)布內(nèi)容的回復(fù)。

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

“可能認(rèn)識(shí)的人”和“邀請(qǐng)好友”從位置到設(shè)計(jì)都恰到好處，整個(gè)右欄色帶區(qū)域的內(nèi)容編排簡(jiǎn)潔明了，邏輯清晰，贊。白社會(huì)在這里倒是能收起賣(mài)弄的欲望，清寧流暢。

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

總之這個(gè)模塊的權(quán)重被設(shè)得太高，過(guò)分突出。而有新的聊天消息時(shí)，瀏覽器標(biāo)簽欄出現(xiàn)跑馬燈效果，更是煩球得很。拜托，“Web im聊天”的內(nèi)容權(quán)重并不高，用戶接受不了這種程度的打攪——那叫騷擾好不好？別瞎抄人家開(kāi)心。在開(kāi)心里，新消息以“好友對(duì)自己所發(fā)布內(nèi)容的回復(fù)”為主，這種消息的質(zhì)量足以抵消標(biāo)簽欄閃爍的干擾。換句話說(shuō)，用戶是否認(rèn)為消息提示是一種干擾，更多取決于在他心目中消息的質(zhì)量，而不是其形式?；旧嫌脩魧?duì)“互動(dòng)反饋”是有很大期待的，他發(fā)布內(nèi)容，往往就是為了看好友怎么來(lái)評(píng)論，而Web im上的搭訕閑聊則遠(yuǎn)遜于此。因此又是一個(gè)不重要信息占用了重要信息的地盤(pán)，鳩占鵲巢。

有時(shí)候覺(jué)得白社會(huì)的炫技心態(tài)嚴(yán)重，突出Web im，可能也源出于此。

8、老板鍵
524第一次看見(jiàn)的時(shí)候，愣了半響，哈哈大笑。白社會(huì)的產(chǎn)品團(tuán)隊(duì)真的很聰明。

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

開(kāi)心、有道、白社會(huì)，蝦米，亦歌，是國(guó)內(nèi)我很喜歡的五個(gè)產(chǎn)品團(tuán)隊(duì)。前三者尤好。

9、個(gè)人主頁(yè)
個(gè)人主頁(yè)這里恐怕是有些大問(wèn)題的，比如開(kāi)心就把它用“別人怎么看我”的方式給折疊起來(lái)了。原因很簡(jiǎn)單，我去個(gè)人主頁(yè)的概率很低，目的也就是看看自己的頁(yè)面在別人眼里是什么樣子，如果用上了一個(gè)獨(dú)立的導(dǎo)航位，權(quán)重放得太高，反而讓新用戶迷亂：“它干嘛的？我在這里干嘛？”字面上和功能應(yīng)用上都不容易理解所謂“個(gè)人主頁(yè)”的定義。

在白社會(huì)的個(gè)人主頁(yè)里，首先放照片，其次日記，再次新鮮事，要球不得。雖然照片和日記的權(quán)重較高，但更新頻率太低，容易造成對(duì)方頭屏無(wú)更新的印象。印象相當(dāng)壞。開(kāi)心就反過(guò)來(lái)，新鮮事→照片→日記。通過(guò)強(qiáng)調(diào)“更新”來(lái)促進(jìn)用戶之間的互相訪問(wèn)。

此外，開(kāi)心的照片模塊放最新相片，白社會(huì)的照片模塊放專(zhuān)輯封面——這更要命，直觀可見(jiàn)的更新量那就更低了。唉……這些家伙在想什么喲。

當(dāng)然，將個(gè)人主頁(yè)的權(quán)重提高也不是一無(wú)是處。最大的好處就是把一些個(gè)人性的東西放進(jìn)來(lái)，讓首頁(yè)更整潔。比如左欄的音樂(lè)盒和禮物櫥窗，比如右欄的好友列表，比如頂部向蝦米致敬的自動(dòng)簡(jiǎn)介“我是某地某星座男生”（不！我是怪蜀黍?。５矣昧艘荒甑拈_(kāi)心，很難適應(yīng)在兩個(gè)個(gè)人頁(yè)面（首頁(yè)和個(gè)人主頁(yè)）間跳來(lái)跳去，更認(rèn)可單頁(yè)面中心的產(chǎn)品框架。國(guó)內(nèi)用戶總體上低端，產(chǎn)品框架不宜復(fù)雜化。任何時(shí)候都應(yīng)該把“好用，順手，簡(jiǎn)單”這些指標(biāo)放在第一位，而不是固執(zhí)于視覺(jué)上的完美或者呆板機(jī)械的內(nèi)容邏輯。

10、其他，以及總結(jié)
好友界面的設(shè)計(jì)很鬼扯，很不好用，操作時(shí)頁(yè)面跳來(lái)跳去很煩惱。交互設(shè)計(jì)師你來(lái)連續(xù)給10個(gè)人分類(lèi)試試？由于資料分布稀疏，如果不用搜索（我就不愛(ài)用搜索），查找好友的效率很低，對(duì)好友進(jìn)行操作的效率更低。設(shè)計(jì)上的極簡(jiǎn)主義，放在這里就變成了主觀思維的極簡(jiǎn)偏執(zhí)。

我的站內(nèi)信是空的，所以沒(méi)法評(píng)價(jià)（誰(shuí)給我發(fā)一條試試）。邀請(qǐng)和設(shè)置頁(yè)面都很好，但設(shè)置的下拉菜單一看就很復(fù)雜，會(huì)嚇到人，尤其是新用戶，第一印象受此拖累，覺(jué)得這玩意兒太復(fù)雜，怕是折騰不動(dòng)。找人頁(yè)面還有個(gè)大的缺陷：不應(yīng)該把過(guò)濾項(xiàng)全部折疊起來(lái)，至少把過(guò)濾選擇鏈接搞得更醒目一些，否則不容易留意到，也就不容易找到人。

白社會(huì)全局采用了棕色的超鏈接，不難看，但有些搶眼，有些花哨，對(duì)比度上對(duì)灰色的文字有些壓制，不及常規(guī)的深藍(lán)色超鏈接效果。說(shuō)到灰色的文字，只考慮了整體上的視覺(jué)協(xié)調(diào)，卻遠(yuǎn)不及開(kāi)心黑色文字的清晰舒適，也屬于好看不好用的范疇?；旧习咨鐣?huì)配色的對(duì)比度偏弱，文字內(nèi)容不夠突出，第一印象固然美，卻不適合集中注意力大量閱讀。那么，第一印象和大量閱讀，哪一個(gè)對(duì)社交平臺(tái)更重要呢？

比開(kāi)心好看，卻不如開(kāi)心好用，考慮設(shè)計(jì)者的感受比使用者更多，就是我對(duì)白社會(huì)UI設(shè)計(jì)的整體評(píng)價(jià)。而它在交互體驗(yàn)和交互性能上的優(yōu)勢(shì)有目共睹，不夸也罷。計(jì)劃中對(duì)白社會(huì)的評(píng)測(cè)有3篇，今晚，或者明天再接著寫(xiě)第三篇“組件快評(píng)”。雖評(píng)價(jià)別家的孩子，也是借這機(jī)會(huì)來(lái)講我對(duì)社交產(chǎn)品的設(shè)計(jì)理念。一吐為快。

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

原文：http://www.tgideas.com/?p=224