信息爆炸的年代，每秒鐘創(chuàng)造的排山倒海的信息大比例來源于UGC。新浪微博屬于國內(nèi)典型的UGC平臺，官方客戶端常年霸占iTunes免費榜TOP位，而第三方也層出不窮，但大多都是想在官方的基礎(chǔ)上改進(jìn)體驗。官方客戶端的優(yōu)缺點都很明顯：兼容性好，支持最多的API；但也因為微博不斷地社交化，讓官方APP顯得更臃腫，基礎(chǔ)的微博閱讀與操作的地位變得很微弱。第三方的付費應(yīng)用慢慢地出現(xiàn)，如Moke、VVebo、Weico，定位不同，逐漸有各自的市場和粉絲群，但由于API接口限制，各家無一例外地把定位回歸到微博本身的Content上來。這次，讓我來管中窺豹，在對VVebo的分析中，筆者把它和競品Weico進(jìn)行部分GUI設(shè)計的對比，讓大家能引申出一些思考：在有限制接口的情況下，如何打造一個stylish & usable的UGC客戶端，如VVebo作者所說，“怎么在一個起跑線（指大致相同的接口）上讓VVebo玩出差異化。”。
UGC的定義中有2個關(guān)鍵因素：內(nèi)容和用戶。作為一個UGC客戶端，承擔(dān)著用戶和內(nèi)容之間的雙向媒介作用。所謂雙向，其一，在把內(nèi)容展示給用戶時，如何規(guī)劃微博多樣化內(nèi)容的展示方式，提升閱讀體驗（Layout）；其二，用戶對內(nèi)容的操作中，如何利用已有API所提供的眾多功能進(jìn)行篩選、分類、組合，使功能更易用、更好用（Usability）。
前者，即內(nèi)容to用戶方向，要求客戶端有扁平的信息框架，操作層級不應(yīng)過多；后者，即用戶to內(nèi)容方向，要求界面設(shè)計應(yīng)該以簡潔為主，在一定主色調(diào)的情況下，界面干擾因素不應(yīng)太多。
接下來讓我們來了解下今天的主角。
產(chǎn)品介紹
iTunes Store鏈接
VVebo 是一款 iOS 平臺扁平化風(fēng)格的新浪微博客戶端，擁有簡潔干凈的界面，流暢自如的手勢。于2013年11月上架，起初的V1版的GUI和交互跟現(xiàn)在的風(fēng)格不太一樣，V2版以黃色的小蜜蜂為LOGO，走簡約、設(shè)計感的路線。VVebo的作者Johnil是一位獨立開發(fā)者，開發(fā)VVebo以外，還有個長微博拼圖的產(chǎn)品“長圖”，看得出是重度微博用戶，不滿于官方功能而自行開發(fā)適合自己使用的產(chǎn)品。除了VVebo的官方產(chǎn)品微博及媒體測評，我們并不容易找到它的其他資料，哪怕v2.0的測評視頻，也被作者在測評后刪除T T。所以，只好親自上陣，草草制作了一個簡單的測評視頻。
它的競品不少，除了上文提到的微博官方客戶端、Weico、Moke，作為定位類似的Twitter客戶端，如Tweetbot、Twitterrific，也可以被拉為同類型的范疇，來一起對比。
視覺設(shè)計
對APP產(chǎn)品的第一印象，莫過于它的APP icon了。VVebo的小蜜蜂造型，讓我自然地把它和Tweetbot、Twitterrific的icon作比較。為什么都選用鳥類？這得追溯到微博始祖twitter。最初Twitter的主流發(fā)布方式并不是網(wǎng)頁端，而是短信，大家知道，短信的字符限制是70字/140字符，所以推文也就限制在140字內(nèi)。Twitter是一種鳥叫聲，創(chuàng)始人認(rèn)為鳥叫是短、頻、快的，符合網(wǎng)站的內(nèi)涵，所以也就把鳥作為了Twitter/微博的代言人。
icon風(fēng)格，大多以單線風(fēng)格或圓形填充為主，基本不使用文字作為功能圖標(biāo)。
內(nèi)部界面的配色值得一說。VVebo基本以白底黑灰+主題色點睛為主，主題色提供了10個推薦色（明度不高不搶眼），如果沒有合適的，可以在色輪中選擇自己心儀的顏色。
或許應(yīng)該這樣說，VVebo并不存在“Theme”這個概念，它所能選擇改變的顏色，只有“點睛色”，如ID、@、tag、hash等這些既是換成不同顏色也不會過分影響這個頁面的視覺感受的文字和圖標(biāo)，和仍然保留的黑白灰很和諧。
Weico的主題簡直就是改頭換面，用各種色彩和異形圖標(biāo)把整個界面變得像游樂場——識別度很低的圖標(biāo)，太過艷麗的顏色，過于累贅的描邊和漸變……雖然我不敢說現(xiàn)在沒有人喜歡，但是至少在可用性上是很低的。
進(jìn)入之后，跟大多數(shù)APP差不多，內(nèi)部布局分為3塊：頂部搜索欄/提示欄，中間主內(nèi)容區(qū)，底部導(dǎo)航操作區(qū)。可通過切換閱讀環(huán)境轉(zhuǎn)為“沉浸模式”，此模式無頂欄、底欄變?yōu)橐粋€透明度很低的當(dāng)前標(biāo)簽icon。
而對于底欄而言，有些選擇了純圖標(biāo)，有些則選擇加上了文字。如Weico，使用了輔助文字，這也就牽扯上了下文的主題效果，余言后表。而頂部的差別，也就是信息內(nèi)容和架構(gòu)的差別了。
信息架構(gòu)
還有個值得注意的點是：它把搜索系統(tǒng)作為一個子功能模塊嵌入到每個大欄目中，而非一個獨立的頁面來存在。不使用全局搜索，有好有壞，一方面是不想讓用戶混淆搜索結(jié)果來源，保證搜索結(jié)果的純粹性，另一方面，也犧牲了搜索本身可以帶來的推廣作用，或許更能實踐它所提倡的“簡潔”—你要什么我給你什么，不做多余的事。
相比之下，Weico的架構(gòu)跟官方APP、Tweetbot更接近，從左到右分別是主時間線-消息-搜索-個人頁，更多地是按照功能系統(tǒng)來分割，看上去增加了功能性，卻少了些許的邏輯性。
讓我們再來看看對于單條信息的架構(gòu)。
左側(cè)VVebo把信息進(jìn)行了歸類和分區(qū)：頂部是此條微博博主信息（頭像、ID、加V）、微博發(fā)布源（時間、來源），中間是內(nèi)容信息，底部是可用操作，如回復(fù)、轉(zhuǎn)發(fā)、收藏等。而右側(cè)Weico則顯得隨意多了，有點為了追求某種美觀而沒有采用歸類的方式，左右上下不成網(wǎng)格也沒有信息分區(qū)。
操作體驗
對于單條微博，常用的操作包括轉(zhuǎn)發(fā)、評論，而VVebo關(guān)于這些操作的界面設(shè)計有點反常規(guī)：直接從下部展開一個遮罩層，把原微博內(nèi)容覆蓋得渣都不剩，上面露一點點白邊。雖然整個動效過程是想要體現(xiàn)卡片化想法在里面，但是不讓轉(zhuǎn)發(fā)/評論和原微博同時出現(xiàn)，犧牲了關(guān)鍵部分的信息，實在是有點難以理解。像Weico這類，基本都遵循了網(wǎng)頁微博的結(jié)構(gòu)，內(nèi)容后面緊跟著操作，這樣連貫的語義，更方便用戶聯(lián)系原微博上下文來做出下一步的社交操作。
類似的情況還有“分享”功能，一般的應(yīng)用（如右圖Weico）都是遵循當(dāng)前系統(tǒng)的默認(rèn)視圖——半截遮罩層，保留主內(nèi)容的部分信息，讓對話有連接。而VVebo，再一次選擇了美觀而忽視了內(nèi)容本身：使用大約90%灰遮罩層把主內(nèi)容完全擋住，雖然能隱隱約約看到背后的一點點，但基本擋住上一層的全部內(nèi)容。這樣就違背了UE最基本的一點，用戶會疑問“我剛剛干了什么來著？現(xiàn)在這是要干什么？”，失去了上下文，也就增加了用戶“取消—回憶—再次嘗試”的幾率。
側(cè)邊欄而言，功能定位差不太多，基本都是用來切換分組和管理DM的。VVebo采用黑底，Weico使用模糊版用戶頭像做底，基本都是能被接受的。值得提出的是，Weico側(cè)邊欄底部是4個快捷功能按鈕，都是比較常用的，在實用性上略高一籌。
總結(jié)
VVebo在操作上有意與官方/主流客戶端產(chǎn)生區(qū)別，有自己的交互探索在其中，它的視覺設(shè)計值得被表揚(yáng)。但對于界面布局和功能的處理上，還顯得略有青澀，在往后的迭代中，希望能多進(jìn)行有效用戶測試實驗，解決追求美感而失去的可用性上的弊病。
