我理解的新版微博V6尚有改进空间的几个地方
2014-10-30 23:13:52
  • 0
  • 0
  • 0
  • 0

好话我就不说了,任何一个Web产品的新版本,总会有人吐槽不好。一个人打定主意离婚另取媳妇真要新媳妇进门了总还是会别扭个三两月,何况一个生来就是被用户吐槽的Web产品。大家还记得艾维主抓的iOS 7的丑爆了的往事么,现在看来,iOS 7也没那么难看嘛。

我觉得新版V6从设计理念到具体实现,都还算提升了易用性,特别是卡片的设计,卡片内小图变大图的设计。新的统一的“发现”模块,也解决了微博热度下降刷不到微博的问题。色彩和模板等的设计相信也会在“一群人”的努力下,慢慢得到改善。至于一些“国民老公”需要回滚的要求简直是无理了。好,据说这样写一篇对新版V6理解的文章可能会得到微博CEO的打赏,加话题#V6新功能使用体验#就可。那我就只说我理解的新版V6尚有可改进的地方吧。

一、要特别关注“大屏幕的左侧效应”

现在用户的屏幕越来越大,从1440,到1680,到多数人的1920,直至我这样喜欢大屏幕的2550px。屏幕越大,字体越小,对字体的选择越应该慎重。目前新版微博在我屏幕上,我是放大了字体,看起来很舒服。但有些同学表示:字体大小。这大是对宽屏幕适应还未仔细做的原因。

我理解的新版微博V6尚有改进空间的几个地方1920以上屏幕的效果,主要内容都在中央

我说的大屏幕左侧效应是:屏幕太大,视觉已经自觉地落在了页面元素的左侧。而不再是中间。具体到卡片设计,则一堆卡片顶端的导航条的设计和布局,对整体的视觉效果影响颇大。就跟一个人戴的帽子一样,帽子搭配得好,自然就好看。

我理解的新版微博V6尚有改进空间的几个地方导航条设计应该分组,按功能来分,注重左侧的设计而不要堆到右侧

很多人吐槽新版微博V6视觉不美,实际上顶部可改造的空间很大。

首先是导航链接和功能区块分割。搜索框太宽,提示文本“大家都在搜###”和搜索按钮相隔太远。同为功能按钮的发新微博按钮放在最右侧,中间被导航链接按钮给割裂了。搜索和发布(Search 和 Compose)按钮都属于操作按钮,放在一起更能起到提示作用。

左侧效应就是最重要的导航链接,可以堆到左侧,这样视觉习惯就是从做到右看过来,依次是“首页”、“发现”、“游戏”。这时候,我们会发现“消息通知”以icon放在右侧属于设计的弱化。消息通知同样应该以icon和文本组合的形式,放在前面三个导航链接按钮位置。且需要处于重要位置。这个新消息通知因汇总了“转发、评论、私信、赞甚至未关注人私信”等多个功能,其出现的频率会远远高于“设置”icon里可做的事情。放到“首页”按钮右侧是为最佳选择。可能现在新浪的设计以下拉浮动菜单的形式显示最新通知,所以放在右侧是一个折中选择。但右侧黄色菜单的设计,既然是V6,完全可以砍掉。多一次选择和直接选评论的差异不大。融合消息箱的设计也很重要。web版可学习手机版设计思路,且这个设计完全可以学习Twitter的设计,相信新浪的产品经理可以理解。

另外,新版V6顶部的“头像icon 用户名”组合的设计有缺陷。Twitter网页版和新浪微博iPad版的设计是以自己头像作为标记,这一方面是对多帐号的支持的方便,另一方面也方便用户手指的点击(以头像大小可快速手指定位)。但现在V6以一个指代性头像icon 用户名的组合出现,而不是以头像缩略图来展示,如果用户名太长,会截取,还是无限制显示该用户名?如何适应屏幕的设计?这个我无法测试,但想必是一个问题。且“icon 用户名”的组合在未来可能的多风格模板上,必然和背景颜色等不太融合。看Twitter的web版的设计,一个头像,鼠标推上去后自动tip出现profile setting,依然是一个标配。即对一个帐号的setting,应该和一个profile组合在一起更方便操作。手机版也是如此思路。当然,如果实在害怕用户找不到隐藏一级的Setting,把设置按钮单独做成一个icon也没太大问题。

写新微博的icon。虽然加了黄色的突出背景,但有时候还是需要“一顿好找”。为什么?因为黄色compose按钮与黄色的提醒数字冲突。icon的指示性不够强,在一片彩色背景中要直接找到,有难度。Twitter充分利用了Web的宽度,通过“icon 标题”的形式,提高了点击区域,自然也提升了指示性。另外,新浪学习Twitter放在最右侧的设计,需要考虑手机用户的习惯。Twitter新web设计右侧“写新tweet”的按钮设计,是和手机版右侧新写按钮相辅相成的,是从Tweetie iPhone版客户端一直延续下来的习惯。Web版是迁就iPhone版本的。蓝色背景是为了加强写的指向性。但新版微博V6把写按钮右伸出底下三栏结构的最右端,我怀疑很多人会找不到了。这个设计可以改。

上面说的是最顶端的“左侧效应”。把最重要的按从左到右有层次排列,用户自然而然不需过多思考。

在每一条微博卡片上,同样有“左侧效应”的问题。

目前的设计,底部按钮,收藏居左,转发和评论在中间,赞在最右。这四个按钮的安排并无顺序问题,主要是习惯问题。同样的问题,左侧是最常用按钮的习惯思考位置。对于我个人来说,一条消息(or 一个卡片,用卡片来指代一条完整信息,是新版做卡片的思路吧),我看到后经常思考的路径是这样的:

1、这事真够操蛋,这事真够狗血,这事太让人生气的。or真是好玩,好有爱,我喜欢。

2、我要转发,给更多人看。我还要勾选评论。or,我觉得可以温馨地评论一下。

3、然后,也许我会收藏某个卡片,或赞一下某个人给我提供这么值得赞的卡片。

我理解的新版微博V6尚有改进空间的几个地方卡片无转发,四个按钮间距太大,看起来很费解

我理解的新版微博V6尚有改进空间的几个地方卡片有转发,文字在操作指示还是数字显示之间有矛盾之处

图注:容易误点且要思考的四个分散的按钮,且有评转和无之间有混淆

我不相信多数人是首先点赞,然后再收藏。从哪个方向(左-右 或 右-左),转发放在中间,都容易误导用户点击。鼠标会自然地从最左侧点起或抬起移到中间。这里面的思考过程一定会让很多不愿意多思考的人纠结。我刚升级的头两天,几乎经常想要“转发”时直接点到了“收藏”按钮。

四个操作铺开均分在底部,是一种快速操作但非简洁的设计。Facebook早期的折叠和微信的折叠,其实是更简洁而明确的指示设计。平铺在底部,可以省略一部展开的操作,因为鼠标很准确且可点击到较细的空间。但web版做一层较高的四个按钮,疏离感强,每次操作都需要眼观六路的感觉,需要左右扫射一番四个按钮,并进一步思考具体我要点击哪个。在Pad和iPhone上这么设计更好。但在web上,一次操作,视野要兼顾700px宽度,易用性不够。参考现在的Facebook web版设计,对操作按钮和显示按钮分别设计。操作按钮用文字,显示按钮用icon 数字。这样层次结构属于Web2.0时代常用处理方法。但新版Weibo在这个细节的设计上,似乎还不愿意。这直接导致当有了转发和评论数后,再点击转发和评论,到底是看具体的转发情况,还是执行转发操作呢?新浪的实施是,点开有转发的按钮,先弹出转发框,再去刷后台看其他人怎么转发留言的。浪费无畏的网络流量不说,速度也慢,体验当然也谈不上佳。这个从外观上类似Google 底部设计的兼顾的做法,其实从操作源头就可给解决掉。参考Facebook web版本“查看”和“操作”的细微变化。当然,微信朋友圈在看历史list的时候有过这方面的思考,但因为手机太窄,靠icon来完全指示比如有一些混淆,但总体是好的。

我理解的新版微博V6尚有改进空间的几个地方

图注:转发按钮,先打开操作窗口,再打开相关转发列表,费流量,操作目的和显示不同步。

弹出窗口的处理也和card设计的愿意有所冲突。目前新浪微博是参考Google 的设计,但又多了一个复杂的过程,无缝衔接性不够。Google 加了“按钮”效果,数字是参考作用,按钮button内“明确icon 数字”的指示性比“文本 数字”要强很多。

我理解的新版微博V6尚有改进空间的几个地方

图注:参考Facebook设计,将折叠和合并的设计理念,干脆打平将功能分区处理

我理解的新版微博V6尚有改进空间的几个地方

图注:Google 设计,Button的指示性强,且转和评以及 1在一个卡片内无缝衔接。

二、用箭头在卡片内多图大图之间切换的

新版看大图很爽,小图过于小,只能每张大图都打开看。点开一个多图卡片,查看大图,要看下一张,必须点鼠标。点鼠标时,如果未点中右侧,点在中央,则图片又缩回去了。如果能支持键盘左右方向键翻图片就更佳了。百度和google图片浏览大图之间可左右键盘方向键切换,貌似挺方便。

我理解的新版微博V6尚有改进空间的几个地方google图片大图之间可用键盘左右方向键切换

当然如果卡片之间能靠方向箭头或tab切换那就更牛了。这当然和浏览器会有冲突,算是对卡片的过高要求了。估计也难以实现。

另外,大的卡片外有一点圆角和不明显的阴影,但卡片内引用的区块只是一个无圆角的灰色背景块,感觉两者的结合有些生硬。完全可用圆角或阴影更好处理。既然是大卡片套小卡片,细节可以再打磨。

我理解的新版微博V6尚有改进空间的几个地方点时间戳看消息详情较隐蔽,在详情页也可一直点下去长期打开新窗口

看消息详情太隐蔽。在web端,想要看一条消息详情,需要找到“发布时间”点击。很多用户不清楚这个操作,需要有提示,或点击到卡片非点击区域(链接和图片之外),自动激活整个卡片。在卡片内出现查看微博详情的链接。点击进入消息详情后,目前和timeline上看到的效果并无太大区别。Twitter的做法是将主推的文本放大以示突出,也符合“卡片设计”的原则。特别是字数不多的微博消息,用卡片后,实在不美,阅读性差。如果能看微博详情且放大文字,则效果会好很多。

我理解的新版微博V6尚有改进空间的几个地方

图注:可参考twitter的卡片详情页放大文字,可读性好,层次结构好

整体的V6设计还是很好的。期待V7更加好。特别是“发现”栏目可提升的空间特别大。

 
最新文章
相关阅读