电视微博从零到一

新浪微博是一个媒体产品

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

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

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

精简微博非阅读功能

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

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

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

按照现有的界面进行设计

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

web端


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

信息流的分栏

iOS手机端

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

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

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

微博详情页

iOS pad端


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

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

完善和细化功能

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

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

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

信息流页

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


信息流细化

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


信息流-用户页

详情页

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


详情页细化

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

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

推荐阅读更多精彩内容

  • HTML <template> <el-table ref="multipleTable" :data=...
    那年角落的喇叭阅读 17,501评论 0 0
  • 当你不开心时,有意识地把自己不悦的情绪转移到另一个快乐的地方,便会使这种不快乐的情绪缓解。 人人都希望自己快乐,但...
    孜沐阅读 282评论 0 0