简约VS简单:VVebo设计分析比较

信息爆炸的年代,每秒钟创造的排山倒海的信息大比例来源于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
VVebo
iTunes 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在操作上有意与官方/主流客户端产生区别,有自己的交互探索在其中,它的视觉设计值得被表扬。但对于界面布局和功能的处理上,还显得略有青涩,在往后的迭代中,希望能多进行有效用户测试实验,解决追求美感而失去的可用性上的弊病。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,945评论 4 60
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,050评论 25 707
  • 不管我是不是千里马,都想遇到伯乐。守株待兔的概率太小,想遇见伯乐你要学会主动出击。可是等待救赎的人生哪如自己来一场...
    小团子妈妈阅读 1,033评论 1 3
  • https://h5.qzone.qq.com/ugc/share/0C134680F6A7CDD204AC9F5...
    春韵留芳阅读 299评论 0 0
  • 文/赫小思 隔壁有个飞叔叔,在我们年轻人的眼里他不苟言笑,一副严肃的面孔,望而生畏...
    赫小思阅读 542评论 0 0