信息爆炸的年代，每秒钟创造的排山倒海的信息大比例来源于UGC。新浪微博属于国内典型的UGC平台，官方客户端常年霸占iTunes免费榜TOP位，而第三方也层出不穷，但大多都是想在官方的基础上改进体验。官方客户端的优缺点都很明显：兼容性好，支持最多的API；但也因为微博不断地社交化，让官方APP显得更臃肿，基础的微博阅读与操作的地位变得很微弱。第三方的付费应用慢慢地出现，如Moke、VVebo、Weico，定位不同，逐渐有各自的市场和粉丝群，但由于API接口限制，各家无一例外地把定位回归到微博本身的Content上来。这次，让我来管中窥豹，在对VVebo的分析中，笔者把它和竞品Weico进行部分GUI设计的对比，让大家能引申出一些思考：在有限制接口的情况下，如何打造一个stylish & usable的UGC客户端，如VVebo作者所说，“怎么在一个起跑线（指大致相同的接口）上让VVebo玩出差异化。”。
UGC的定义中有2个关键因素：内容和用户。作为一个UGC客户端，承担着用户和内容之间的双向媒介作用。所谓双向，其一，在把内容展示给用户时，如何规划微博多样化内容的展示方式，提升阅读体验（Layout）；其二，用户对内容的操作中，如何利用已有API所提供的众多功能进行筛选、分类、组合，使功能更易用、更好用（Usability）。
UGC factors
前者，即内容to用户方向，要求客户端有扁平的信息框架，操作层级不应过多；后者，即用户to内容方向，要求界面设计应该以简洁为主，在一定主色调的情况下，界面干扰因素不应太多。
接下来让我们来了解下今天的主角。
产品介绍
LOGO
VVeboiTunes Store链接
VVebo 是一款 iOS 平台扁平化风格的新浪微博客户端，拥有简洁干净的界面，流畅自如的手势。于2013年11月上架，起初的V1版的GUI和交互跟现在的风格不太一样，V2版以黄色的小蜜蜂为LOGO，走简约、设计感的路线。VVebo的作者Johnil是一位独立开发者，开发VVebo以外，还有个长微博拼图的产品“长图”，看得出是重度微博用户，不满于官方功能而自行开发适合自己使用的产品。除了VVebo的官方产品微博及媒体测评，我们并不容易找到它的其他资料，哪怕v2.0的测评视频，也被作者在测评后删除T T。所以，只好亲自上阵，草草制作了一个简单的测评视频。
它的竞品不少，除了上文提到的微博官方客户端、Weico、Moke，作为定位类似的Twitter客户端，如Tweetbot、Twitterrific，也可以被拉为同类型的范畴，来一起对比。
Competitors
视觉设计
Bird Icon
对APP产品的第一印象，莫过于它的APP icon了。VVebo的小蜜蜂造型，让我自然地把它和Tweetbot、Twitterrific的icon作比较。为什么都选用鸟类？这得追溯到微博始祖twitter。最初Twitter的主流发布方式并不是网页端，而是短信，大家知道，短信的字符限制是70字/140字符，所以推文也就限制在140字内。Twitter是一种鸟叫声，创始人认为鸟叫是短、频、快的，符合网站的内涵，所以也就把鸟作为了Twitter/微博的代言人。
Icon style
icon风格，大多以单线风格或圆形填充为主，基本不使用文字作为功能图标。
color
内部界面的配色值得一说。VVebo基本以白底黑灰+主题色点睛为主，主题色提供了10个推荐色（明度不高不抢眼），如果没有合适的，可以在色轮中选择自己心仪的颜色。
Theme
或许应该这样说，VVebo并不存在“Theme”这个概念，它所能选择改变的颜色，只有“点睛色”，如ID、@、tag、hash等这些既是换成不同颜色也不会过分影响这个页面的视觉感受的文字和图标，和仍然保留的黑白灰很和谐。
Weico的主题简直就是改头换面，用各种色彩和异形图标把整个界面变得像游乐场——识别度很低的图标，太过艳丽的颜色，过于累赘的描边和渐变……虽然我不敢说现在没有人喜欢，但是至少在可用性上是很低的。
进入之后，跟大多数APP差不多，内部布局分为3块：顶部搜索栏/提示栏，中间主内容区，底部导航操作区。可通过切换阅读环境转为“沉浸模式”，此模式无顶栏、底栏变为一个透明度很低的当前标签icon。
Page layout
而对于底栏而言，有些选择了纯图标，有些则选择加上了文字。如Weico，使用了辅助文字，这也就牵扯上了下文的主题效果，余言后表。而顶部的差别，也就是信息内容和架构的差别了。
信息架构
IA
除开左边折叠的侧边栏，共有5个栏目，主时间线feed在中间，这也符合大多数用户的心理预期。离它最靠近的左右两边，是个人跟其他用户联系紧密的栏目：评论（收到or发出）和@（@自己的评论or微博）。再两边是倾向于私有的栏目：收藏和个人页面（个人信息or个人微博）。我们可以看到，这5个栏目是以公开-半公开-私有的程度从中间往两边分布，而Weico、Twwetbot都没有这种趋势。这个点很有意思，暂时能分析到的可能原因有两种：赋予意义以减少学习，或者因为API限制，这是最合适的排列布局。当然，因为我没有参与产品设计和迭代的过程，无法断定到底是什么原因让开发者如此设计，光是关于底栏的猜测，都可以单独开一篇博文了。
还有个值得注意的点是：它把搜索系统作为一个子功能模块嵌入到每个大栏目中，而非一个独立的页面来存在。不使用全局搜索，有好有坏，一方面是不想让用户混淆搜索结果来源，保证搜索结果的纯粹性，另一方面，也牺牲了搜索本身可以带来的推广作用，或许更能实践它所提倡的“简洁”—你要什么我给你什么，不做多余的事。
IA-Bottom Nav
相比之下，Weico的架构跟官方APP、Tweetbot更接近，从左到右分别是主时间线-消息-搜索-个人页，更多地是按照功能系统来分割，看上去增加了功能性，却少了些许的逻辑性。
Single Weibo
让我们再来看看对于单条信息的架构。
左侧VVebo把信息进行了归类和分区：顶部是此条微博博主信息（头像、ID、加V）、微博发布源（时间、来源），中间是内容信息，底部是可用操作，如回复、转发、收藏等。而右侧Weico则显得随意多了，有点为了追求某种美观而没有采用归类的方式，左右上下不成网格也没有信息分区。
操作体验
Repost or Comment
对于单条微博，常用的操作包括转发、评论，而VVebo关于这些操作的界面设计有点反常规：直接从下部展开一个遮罩层，把原微博内容覆盖得渣都不剩，上面露一点点白边。虽然整个动效过程是想要体现卡片化想法在里面，但是不让转发/评论和原微博同时出现，牺牲了关键部分的信息，实在是有点难以理解。像Weico这类，基本都遵循了网页微博的结构，内容后面紧跟着操作，这样连贯的语义，更方便用户联系原微博上下文来做出下一步的社交操作。
�Share Option
类似的情况还有“分享”功能，一般的应用（如右图Weico）都是遵循当前系统的默认视图——半截遮罩层，保留主内容的部分信息，让对话有连接。而VVebo，再一次选择了美观而忽视了内容本身：使用大约90%灰遮罩层把主内容完全挡住，虽然能隐隐约约看到背后的一点点，但基本挡住上一层的全部内容。这样就违背了UE最基本的一点，用户会疑问“我刚刚干了什么来着？现在这是要干什么？”，失去了上下文，也就增加了用户“取消—回忆—再次尝试”的几率。
Sidebar
侧边栏而言，功能定位差不太多，基本都是用来切换分组和管理DM的。VVebo采用黑底，Weico使用模糊版用户头像做底，基本都是能被接受的。值得提出的是，Weico侧边栏底部是4个快捷功能按钮，都是比较常用的，在实用性上略高一筹。
总结
VVebo在操作上有意与官方/主流客户端产生区别，有自己的交互探索在其中，它的视觉设计值得被表扬。但对于界面布局和功能的处理上，还显得略有青涩，在往后的迭代中，希望能多进行有效用户测试实验，解决追求美感而失去的可用性上的弊病。
网友评论