围观Twitter 网页版重磅更新

2019-7-26    资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

这是一个移动端的时代,Twitter 的移动客户端经历了很多版本的迭代,但是桌面端的更新改版则非常的克制。

一周之前,Twitter 将接近7年未曾大幅度改版的桌面端页面,从里到外重新翻新了设计。

新浪微博的每一次小幅度调整都会带来大量的吐槽和不适,更不用说像Twitter 这样的世界级的社交媒体网站。用户的不适应不理解和负面反馈是避免不了,这样的大幅更新改版背后,有着这个平台不得不做的理由。

最近 Twitter 新版背后的设计师接受了连线杂志的采访,深入地聊了一下改版背后的考量。

设计技术和工具的快速发展,视觉设计本身,尤其是 UI 界面的很多具体的执行端的工作慢慢的没有那么麻烦了,但是找到为什么这么设计的设计决策,并不是那么简单。

保持一致:紧跟趋势的一次重设计

在整体视觉风格上,Twitter 桌面端的设计给人的整体感知是更加现代的——并且和移动端版本的设计靠近且保持了一致。这绝对是一个以数字产品为核心的科技公司应该做到的最基本的事情。

原本置于顶部的导航栏消失了,功能性更强的左侧边栏承载了主要的导航功能。

其中,原本被隐藏的「书签(bookmarks)」和「列表(LIsts)」是非常实用的内容管理功能,在这次改版的时候被直接显示在侧边栏当中。

而更重要的改变在于,关于当下正在发生的热门事件,单独占据了右侧的侧边栏「Trends for you」,大家正在热烈讨论的热门事件以Twitter 中标志性的标签(Hashtags)的形式呈现,相当于微博中的「热门微博」。而这在老版的 Twitter 中,这类内容的存在感并没有那么强烈,原本存在于第一屏的左侧侧边栏中,并且只有标签,除非你有意识地去关注和点击,否则很容易错过。

搜索栏同样被挪到了右侧边栏,置于「热门趋势」内容的顶部。这一设计巧妙的地方在于,它暗示了内容呈现的逻辑:当你搜索内容的时候,搜索结果会直接覆盖在右侧,而不会占据中间的主要的信息流。

毫无疑问,新版的 Twitter 在布局上更加扁平了,但是信息的扁平化呈现还不止布局上,交互上也相应的变化。在老版的 Twitter 中,当你点击具体的推文条目的时候,内容会以弹出框的形式呈现,但是新版中则会在当前层中直接扩展开显示,不会弹出,整体的融合感和有机感会更强。

老版 Twitter 中推文弹出框

新版 Twitter 中的界面

同样的,用户在回复、转推和点赞的时候,也不用在不同的弹出框模式下进行,而是更加直觉地在当前的页面中完成,整体感更强,更加直觉。

用户交互频次相对较高的转赞评和「热门」和主要信息流都不会在弹出框和叠加层控件中完成了,主要信息流也不会被因此而覆盖,整个 Twitter 因此显得更加敞亮开阔。

另外一方面,新版 Twitter 提供了更加丰富的个性化设计的体验,这也是对于 Twitter 用户体验的一次重要提升:

虽然在之前老版的 Twitter 中也可以定制字体大小色彩,但是之前的字体大小是纯粹的随意设置,这种自由度让很多并不熟悉的用户难以控制好文本和色彩的对比度,从而造成了整体视觉的愉悦度较低的情况。

新版中的配色和字体大小都是经过调校之后,比较合理的选择,这样拥有了足够的选择空间,又保持了整体视觉体验上的愉悦性的设计。在产品颗粒度的控制上,Twitter 有着一套成熟精准的设计方案。

与此同时,所有人都期待的,深色模式,同样随着这次页面重设计,一并打包更新了:

对于深色模式的控制,Twitter 和和其他的平台略有一点不同,他们所设计的深色模式包括「昏暗(Dim)」和「熄灯(Light out)」两种,前者的背景色是深灰,而后者则几乎是全黑。

任何一个社交媒体平台,大量的用户涌入进来之后都会面临着复杂的管控问题,更不用说 Twitter 这个已经存在了13年的世界性的平台。许多状况不可能简单的一刀切来解决。

重设计背后:设计解决不了全部的问题

作为平台,Twitter 已经在竭力推动「健康的对话」,但是在充满分歧和对抗的网络当中,情绪化是常态,简单的依靠 Twitter 官方的帐号来发声,并不足以覆盖如此广泛的垂直领域和复杂多样的用户群体,以及不同的国家和地区。

「我们以前经常会推出一些新的设计和小功能。上线之后,过一阵子我们再搜出来,用投影仪投到墙上重新审视,」Twitter 的联合创始人 Biz Stone 说:「然后我们会觉得,好像不应该这么设计。」

「我们的目的是为公众的对话来服务的。但是目标明确之后,还需要问一个问题:我们真的够好吗?」Biz Stone 在采访的时候,这么说道。正是在这样一个问题促使之下,Twitter 的改版重设计就悄然推动起来了。

从左到右分别为 Biz Stone,Bryan Haggerty 和 Mike Kruzeniski 。图片来自 Wired,摄影师:Samantha Cooper

Twitter 团队对此选择了谨慎行事。他们选择了类似灰度测试的方法,让不同的用户参与到不同的「测试」当中来,包括不同的书签模块的设计,不同的深色模式,不同的搜索模式,等等。绝大多数的设计都正面的,但是它们也并不是爆炸性的。

如今所呈现出来的新版页面当中,绝大多数的设计都克制而微妙,以往的很多功能都得到了简化。「我们正在试图寻找合适的机会,重新创造更加大胆的设计,但是它需要一个稳固的基础,所以我们打算从这一次的重设计开始,从我们最好的功能和服务开始。这就是基础。」Twitter 的高级产品设计总监 Mike Kruzeniski 面对连线杂志的采访,是这么解释他们设计的初衷。

所以,Twitter 的这次重设计只是一个开始。对于这个平台上大量的关于仇恨和骚扰相关的负面内容,清理起来并不是一套规则就可以全部解决的,而 Twitter 更倾向于人为来处理和干预,但是平台本身需要更好的支持这方面的功能。

在 Twitter 早期阶段,视觉设计并不是他们的重心。「我们只是尽全力地让产品具备可用性,」Stone 回忆当时的情况:「我们并没有试图让它看起来好看……我们只是努力让平台保持活力。」当时的 Twitter 整个团队大概只有30个人。

实际上,随着后面更加专业的 UI 设计师加入进来之后,整个团队的设计能力也越来越强。UI 界面是Twitter 和用户进行沟通的媒介。

虽然现在是移动端为主的时代,但是桌面端 Twitter 的重要性并没有弱化。Twitter 的网页重设计项目的负责人 Jesar Shah 说:「人们在桌面上大量使用 Twitter 来搜寻感兴趣的信息,跟他们息息相关的信息内容。」在页面的左侧,有一个快速的账户切换的功能,对于这一点,Shah 补充道:「围绕这个功能点,我们从全球不同的地方获得了反馈。比如日本就是Twitter 最大的市场之一,当地用户基于自己不同的兴趣点创建的账户,比如一个账户专门是关于美食的,一个是专门关于旅行的,还有一个则是给自己的宠物猫的。无论你使用哪个设备,都要能够快速便捷地切换帐号,这是我们这么长时间的调研中,听到最多的一个需求点。」

从左到右分别为 Ashlie Ford,Marina Zhao 和 Jesar Shah ,她们主导了这次 Twitter 的设计。

「我们需要确保整体体验足够优秀,所以原则上需要严谨。鉴于我们服务对象是全球客户,所以我们需要尽可能满足不同用户的诉求。」Shah 和 Ford 所带领的团队专门创建了一份调查问卷,以获取反馈。他收到了来自全球总计20万份问卷,Ford 的团队花了整整一周的时间,借助翻译工具将其中来自非英语国家的问卷都翻译出来,并且梳理汇总了。

「用户肯定会以为我们不会仔细阅读这些问卷,但其实我们都仔细阅读过了。」Shah 说道。她阅读到的第一个用户需求反馈就是想要更多的表情符,为了应对这样的需求,Twitter 制作了一个分组表情输入控件。同时,他们还提供另一个不断更新的热门 Gif 图片表情合集,非常贴合用户需求了。

Twitter 已经 13岁了。

在 这个社交媒体平台上,@realDonaldTrump 可以进行「Twitter 治国」,还有大量的流言和不真实的信息,骚扰和不够人性化的内容。这都是客观存在的,亟待解决。在今年年初的时候,策展人 Chris Anderson 将 Twitter 比作是正在撞向冰山的泰坦尼克号。的确如此。

但是,设计改变不了一切。Twitter 的设计团队在接受采访的时候也坦诚地接受了这个事实。但是他们认为,设计可以帮助他们界定和构建 Twitter 功能,并且逐步地帮助用户来解决身份认同的问题。

「如果你在 Twitter 上问一个用户,Twitter 是什么,你会得到一千个答案。」Kruzeniski 说:「曾经我们认为这样很糟糕,但是现在我认为这是一个很棒的事情。因为现在我们可以更好地帮你找到特定的兴趣,并且和你的兴趣、你所关注的主题连接到一起。」

结语:围绕人,而不是产品

曾经的推特是一个铺满木地板,到处都是品牌标志性蓝色的「鸟笼」式的建筑,但是如今重新装修过的办公室则更加现代,墙壁上到处是各种各样的涂鸦,这些涂鸦代表着Twitter 这个平台内的各种垂直社区,比如 Black Twitter、NBA Twitter,以及各路名人的粉丝社区。

走过Twitter 的办公室,你会清晰地收到这样的一个信息:一切都是关于人的,而不是产品。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档