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