配图

mg4355电子游戏 1

移动端的挑战##\

pc有使用场景的一些特性,比如坐在电脑前环境相对稳定,会有比较充裕的时间完成某个任务,加上pc屏幕大,呈现的信息多且复杂,使得我们在web上浏览信息时倾向遵循一定的规律,在这个规律下我们能在一段连续的时间里最大化地获取到自己需要的信息。

这个规律取决于自己的阅读习惯,一般是页面中间向四周扩散,从上到下,从左到右的视线流。

移动端完全不一样了:屏幕小,场景多样,时间碎片化。单屏信息有限,在web上同样一个页面的内容在移动端需要滑动很多次,浏览信息的操作成本增加了;使用环境不稳定,也会造成时间上的易中断,阅读信息的稳定性下降了。

结论是:小屏幕使每一页面单位信息更少,碎片化使阅读的单位时间更少,滑动使获取信息的成本更高,这些都要求着移动端的信息传达效率要更高。

新浪微博是一个媒体产品

新浪微博相比Twitter,最大的区别在于评论功能。在转发之外加上的评论功能吞噬了一部分转发行为,而一条微博的评论非常难以传播。这些评论沉在原微博下,使信息架构上增加了一个层级,使得微博在信息上相比Twitter更加中心化。
这种中心化的平台天生就很难是一个平等交流的平台,而是一部分名人、红人发声触达大量粉丝的一种媒体,而微博的运营也秉持了媒体的思路。大V认证,粉丝头条,微博的阅读量展现……随着这些功能这种媒体的感觉一步一步提高。现在想想,微博似乎挺久以前,就是用来关注名人动态,或者是最新消息的渠道;而不是发布个人信息,与好友交流的工具了。从数据上来看,这个趋势变得越来越明显。

web的信息是怎么做的##\

现在可以思考这个问题了:web端的阅读规律放在移动端适用吗?可以用,但信息传达的效率依旧和web相当。
试想一下,在小屏幕上每向下滑动阅读信息时,视线焦点总要去覆盖全部角落,兼顾到“旁边”的有效信息,这个阅读效率是缓慢的,越向下越觉得体验不好。

要解决这个问题,从根源上开始挖掘:
谁需要更高的信息传达效率?目标用户。
用户需要什么信息?对他有价值的信息。
web端是怎么给用户这些信息的?下图为例。

某外卖web端评价页

以评价列表页为例,单看某一块信息:第一行是用户id,总体评星,评价时间这些基础信息,起了总领作用,评价时间相对次要,放在了最右侧;第二行插入了推荐菜,这个信息是可有可无的附加信息;第三行是用户评价的内容,是主要信息。

信息的布局逻辑清晰,浏览时大脑能对信息进行归类,总的来讲,在符合大多数人阅读习惯的基础上,web做好了信息逻辑,剩下的交给用户去浏览和消化。

电视上微博的应该专注于阅读

前些天收到一个合作方做新浪微博的电视应用的需求。接到这个需求时,我的内心是崩溃的:用户为什么不在手机上用微博而在电视上用?手机上发微博,输入相比电视方便太多了!想想电视用遥控器蛋疼的输入吧,逐步把焦点移到一个字母上,按确定,再把焦点移到另一个字母上;那么输入如何简化…似乎没有可行的方法,那按照简约四原则组织、隐藏、删除、转移,是不是把输入移到手机上……
当我醒悟过来,我发现我已经在细节上迷失了。电视上不应涉及输入,应该使用的方法不是组织、隐藏或是转移,而是删除。
mg4355电子游戏,想一下智能电视是在什么情况下被使用的:躺在床上/沙发上,手边放着遥控器,或许手里还拿着手机发微信。用户并不想和电视做很频繁的交互。使用电视的场景决定了电视就应该做纯粹的内容展示,这与阅读微博是契合的。而我要做的就是把电视上微博的阅读体验做好,仅此而已。
用一种设备做一种事,不追求大而全,满足一个阅读的小需求。

革新在哪里##\

移动端的信息传达效率要更高,首先从做减法开始。
web上的信息需要整合,比如上图中的“总体评价”、“好评”字段都是有重复意义的;整合后的信息也不都是用户需求的信息,这一点很关键。用户浏览评论是要得到他人对商家的反馈,像用户id、评论时间这些信息并不是用户最关心的,但也不能没有,没有的话缺少可信度。既然信息都要有,那跟web端的信息设计起来又有什么区别呢?

下图是移动端的评价页:

某外卖客户端评价页

用户会搜寻到自己想要的信息,那些没有价值的信息,在浏览到下个信息单元时大脑就会自动屏蔽。

这个特点在移动端尤其显著。比如上图中的评价时间,如果这条信息对我没有价值,我知道它在右上角后,看到下一条评价时就不会再去看右上角了。用户是具有学习能力的,并且目的明确,会过滤掉不需要的信息。

上图的效果还不够明显,在图中加上一条信息可能效果更强。外卖的送达时间现在是用户比较关心的一个点,在上图的基础上加上送达时间这个字段,再来看下:

我的优化

连着阅读:

我的优化

总结:与web端设计的最大不同就是考虑到移动端浏览信息时纵深的特点,充分利用用户的可学习性和大脑的信息过滤,将有限区域里不能再简化的信息通过这一方式传达给用户,从而提高信息传达效率。

精简微博非阅读功能

明确了电视上微博的边界之后,接下来的操作就不复杂了。
为了提供专注的浏览体验,首先我砍掉了涉及输入的功能,这里包括回复和转发。
相比砍掉评论,砍掉转发是一个更加艰难的决定。微博的大部分互动都由转发产生。为了保留转发我做了几种尝试:最简单粗暴的方法是让用户输入中文,但反人类的遥控器输入法会让产品体验下降到不能忍受的地步;其次可以只允许转发而不允许添加转发内容,但这样的转发能满足一部分用户用原微博表达自己的需求。而另一部分用户更愿意在原微博上加上自己的评论再进行转发,对于这部分用户,可见的功能限制会让他们感到严重的束缚感;或许可以让用户在转发中使用emoji表情?这并没有解决上一个问题,只是将受束缚的用户变成另一批罢了;将输入转移到手机上?那用户为什么不直接用移动版微博客户端?…
直到我发现了点赞功能。
点赞是微博的一个常用功能,很多微博用户将点赞作为表达态度的手段,甚至还有“点赞党”这一群体存在。这个功能很轻,轻到只需要一步操作,点按一下按钮就能完成表态,几乎不需要成本。这大概就是点赞党存在的原因。
点赞这个电视上也可以通过简单的一步操作完成的动作,对电视上的微博产品意义重大。

  • 点赞的存在使得电视微博不再是一个单向的阅读应用,而是赋予了它交互性,而交互性正是微博之于传统媒体的最大不同。
  • 点赞动作的低成本使得它不会成为中断浏览过程的操作,在保留交互性的同时照顾了阅读微博的体验。

在梳理转发、评论及点赞功能的去留的过程中,电视微博应有的产品形态更加清晰:它应该是一个微博的非传播源用户(传播源用户例如明星、大V等)使用的,用于浏览信息流的带有最低限度交互性的产品。在这个基础上消息功能的舍弃就顺理成章了。消息会很重地打断用户的阅读流程,并且将用户引导向重交互的场景,与电视微博的产品形态相违背。

还有信息的过渡##\

到现在为止,我做的信息设计让用户更快速地获取有效的信息,更自然地屏蔽无效的信息。不过这还只是针对一个单元信息,当用户浏览连续的单元信息时,我还需要做好它们之间的过渡。

简单的定位是信息过渡最好的方式。

有人说像外卖评价的星评,影评的用户头像,对我而言意义不大:别人打几星不会影响我做决策,看别人的头像又没有什么意义,往往这些理由是“可以增加真实度”,“有总比没有好”…而我认为还有个非常重要的理由是:星评或头像是很容易辨认的环境地标,通过它们定位到下一个信息单元,从而顺利完成信息的过渡。

按照现有的界面进行设计

微博上涉及浏览的功能有用户微博信息流、某用户微博主页等,其中涉及到关注、跳转、打开图片等行为,如何将这些行为以及点赞在电视上组织起来是我需要解决的下一个问题。
对于一个有巨大用户量、并且这些用户都适应现在的界面的应用,任何界面的改动都是需要很大接受成本的。所以设计界面时需要尽量与现有的界面保持一致。

不止信息设计##\

把果实放进信息流

某影评页

上图就是运用了信息过滤和信息过渡,把产品层面的需求巧妙地融进用户的信息流中。

一般类似的信息列表,考虑到大屏幕,赞啊评论啊都放在右侧,处在手指自由触达的区域,而上图却相反,让赞和评论放在了左侧,这样一来,两者处在向下纵深的信息流中,于是,这两个信息得到了很高的传达效率,一定程度上活跃了UGC内容。

可能有人会觉得操作放在信息流中会不会干扰,其实这取决于你是否把这个操作定义为信息,像上面这个例子它其实通过数据传递出了UGC的热度,并且做的不重,用户靠信息过渡也能定位到评论内容,所以没有造成干扰。
没想到还带来了KPI,由此可见想象空间还是很大的。

如果说web端的信息设计更多遵循的是规律,是逻辑,那么移动端更要遵循的是大脑的认知,是用户的需求。

Ps.以上为个人想法,欢迎一起交流讨论~

web端

mg4355电子游戏 2

在微博web端可以提炼出一个关键词:分栏。微博web端的界面主要分为三栏,由左边的分组选择、中间的信息流以及右边的个人信息以及一些推荐内容组成。顶部导航将热门微博和游戏突出。
分栏的设计很适合电视端。由于遥控器操作的特性,进行操作尝试的成本颇高,应该让大部分动作不需要用户去发现,应该明显的展现在用户面前。分栏将所有操作展现在了用户面前,虽然分栏需要一定的空间,但电视端的宽屏完美的提供了所需要的空间。

mg4355电子游戏 3

信息流的分栏

iOS手机端

mg4355电子游戏 4

微博手机端的关键词是:微博详情页,手机端将微博正文作为一个新页面打开,在新页面内展现微博正文以及其中的评论。在屏幕上点击很小的按钮来展开评论在移动端的体验不理想,而又没有更多空间去展示微博的评论,于是催生了这种设计。
微博详情页是一个很好的设计,虽然它本身是手机端对空间进行妥协的产物,但它非常适合电视端的情况:

  • 减少了页面上的焦点
    对于电视来说,遥控器逐步式的操作方式注定了电视上”点击按钮”这个动作既难以进行又难以取消。如果一个页面上纵向排列着5个按钮,鼠标或者手指可以跳过中间的3个从第一个按钮直达第五个按钮,而遥控器操作的电视不行。所以页面上不应该有过多的焦点。
    具体到评论页来说,首先焦点移动到按钮上并不容易;其次由于用户在点开一组评论前是不知道里面评论质量的,有很大可能需要在浏览几条评论后需要退出,这时焦点处在不上不下的尴尬位置,需要很高的操作成本才能收起评论。
  • 理清了页面间的逻辑关系
    上面提到了收起评论,而展开的评论本身也存在问题,这个页面究竟是微博的子内容,还是微博的详情?其次是收起,如果你了解智能电视,可能会想到通过返回键收起评论,但这很可能导致返回键的逻辑混乱:究竟返回键是取消一个操作,还是返回上一个页面,甚至是回到顶部?
    微博详情页这个设计解决了这个问题,当焦点在一条微博上时,按确认键打开这个微博的详情页,这时按返回键可以退出详情页,返回键的逻辑就是回到上一个页面,很清晰。

由于查看详情是一个比较轻的操作,不应重新打开一个新页面,这样会打断用户浏览信息流的过程。手机端这么做是屏幕空间不足,而电视有足够的空间来显示内容,所以我们通过一个弹窗来显示详情页。

mg4355电子游戏 5

微博详情页

iOS pad端

mg4355电子游戏 6

微博pad端将两个关键词融合到了一起。通过左右分栏将微博信息流和正文组织在了一起。这是一个在宽屏上组织内容的好方法,初看很适合用在电视端,但事实并非如此。
最大的缺点是焦点会在三个分栏间移动,在移动时焦点移动的逻辑很难不显得混乱。遵循电视焦点”从哪来回哪去”的移动原则,焦点移动的路径很容易连成一个三角形,这样的移动与视觉产生了偏差;而如果按照视觉位置移动,又会和逻辑产生偏差。这个问题很难避免,所以分栏越少越好。
页面间的关系也很难判定,信息流应该从属于分组,但微博正文是否从属与信息流?在三栏同时呈现的界面上按返回键应该进行什么操作?这些问题都很难给出一个符合直觉的答案。
另外在信息流和正文同样重要的情况下,三个分栏(一个次要两个主要)如何排布也是个问题,讲道理微博pad端,包括pad上采用类似设计的第三方微博应用,没有做得好看的,总有一种撕裂感。

这时,电视微博的结构已经清晰了:左右分栏,左边显示分组以及热门微博这一类内容标签,右边显示微博信息流。每条微博为一张卡片,信息流由这些卡片构成,焦点可以在卡片间移动。在卡片上按确定键时,打开微博详情页。

完善和细化功能

微博用户在移动端浏览微博时的典型操作流程是这样的:

  1. 浏览微博信息流
  2. 打开感兴趣的微博详情页
  3. 查看图片链接、视频连接和评论等微博详情
  4. 继续浏览信息流
  5. 刷新,重新开始浏览信息流

其中也有可能发生查看某个特定用户所发的微博并关注/取消关注的需求。

信息流页

对于典型流程的1-4,电视微博基本重现了移动端浏览微博的流程。但第5步没有对应。这种行为在移动端是在信息流中进行的,在电视微博中,我们也应该在信息流中进行这个操作。这里借鉴了一些网页”回到顶部”,在微博信息流的右侧加入了刷新按钮。
这里点击标签进行刷新也是可以选择的方案,但隐藏较深,用户一开始可能不能意识到点击标签是跳转还是刷新。然而用户在其他客户端中已经学会了这种操作,所以比较难取舍。首先使用独立按钮保证操作的可见性,以后可以根据数据做优化。

mg4355电子游戏 7

信息流细化

对于可能发生的查看某个特定用户所发的微博的需求,使用一个专门页面来完成。这个页面也是一种微博信息流页面,所以应该与信息流页面比较相像。同时关注/取消关注功能也应在这个页面中提供。

mg4355电子游戏 8

信息流-用户页

详情页

对于详情页,很容易注意到详情页内容可能包含图片、视频等内容,这个页面还需要两个按钮来进行点赞和进入用户页。如上面所说,如果焦点过多,通过遥控器进行操作很困难,并且焦点移动轨迹很混乱。
这里尝试了将详情页里面的内容也视为没有焦点的卡片,将对卡片内内容的交互动作移到卡片的一侧,当焦点位于一个卡片上时,显示该卡片可能的交互动作,如点赞、打开图片、查看用户等。这样焦点移动的路径比较清晰,并且没有损失媒体内容。
对于各种媒体,各自也需要有一套显示规则。总体上媒体通过打开一个新页面来展示,按返回键回到详情页。这里不再详述。
对于详情页的页面滚动,直觉上应该只滚动评论,然而由于微博内容的高度无法控制,可能很高(最高时可能包含140字的转发评论、140字的原微博以及9张图片)以至于第一屏只能展示半条评论,所以必须做成整个详情页滚动。

mg4355电子游戏 9

详情页细化

为智能电视设计微博应用是我接手的最有趣的一个任务。来自多个不同客户端的经验组合成了电视场景下微博应用的结构,就好比用狮头、鹿角,虎眼、麋身、龙鳞和牛尾拼成麒麟一样(我无耻的百度了),很奇妙的体验。一个应用可能没有完全独创的设计,将已有的设计有取舍地组合成适合另一种场景的新设计,也是有趣的事。

相关文章