腾根科技

腾根企业简介

Twitter移动端改版核心思路分享

发表于2019-08-26 22:36|阅读:|案例分享

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

  上个季度,Twitter 将接近7年未曾大幅度改版的PC端页面,从里到外重新翻新了设计。

  新浪微博的每一次小幅度调整都会带来大量的吐槽和不适,更不用说像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 的改版重设计就悄然推动起来了。

分享本文内容