17 min read

Vol 8 Twitter的社交减压、UI基础第二篇 - 间距系统

Vol 8 Twitter的社交减压、UI基础第二篇 - 间距系统
from

😄这些产品有新的迭代:

🐦Twitter

Twitter在上个月下线了它的Story-like功能:fleet,原因是不达预期。在设计fleet时,twitter强调限时消失的发布体验是为了帮助激活浏览型用户,让他们能无压地分享生活动态。

验证的结果下来是:在fleet活跃的用户仍是原发布活跃用户,并没有提升浏览型用户的发布行为。因此定义为失败而下线。

而为了用户的社交发布减压,是近1年众多SNS平台的共同命题,例如ins允许用户不展示自己的like数量便是其一,因为很多用户会时刻攀比自己获得的like数,担心自己比不过好友。在上周,twitter正在尝试更多的措施来达到这一目标,包括:

  • Safety Mode:发布者可在设置中打开,打开后会自动屏蔽和拉黑带有攻击性言论和账号。
  • 历史tweet归档:允许用户设置tweet30,60,90天或1年内可见,不过当前功能还在概念阶段,并未实际开发。
  • 移除关注:允许用户移除特定关注者,当前版本如果要实现这一目的,只能通过拉黑。
  • 隐藏like过的tweet:用户不必担心自己的like内容会被更多人看见。
  • 退出讨论:可以从别人的评论区讨论中退出,类似mute回复。

其实,以上这些策略和隐私也息息相关,但我更觉得和社交减压离不开关系。不过可惜的是,很多措施还没能立刻体验到,大部分灰度测试将会从年底才会开始,拭目以待吧。

除此之外,twitter在iOS(美国加拿大地区)上正式推出了Super Follow功能,针对创作者,可以设置被Super Follow的订阅价格,一共有三档。粉丝可以通过支付对应价格来获取对应服务,例如独家内容。

twitter-super-follows-launch-9to5mac.jpg


🦜Tweetbot

Tweetbot 6.3版本发布,带来了许多关于Behaviors(行为)的设置选项,允许用户调整交互上的设置。包括

  • 启用/禁用点击状态栏返回到顶部:默认情况点击状态栏可返回到feed顶部,现在可关闭
  • 启用/禁用拖放推文
  • 启用/禁用滑动切换主题:默认手势是两根手指上下滑可切换主题,现在可关闭
  • 启用自定义所有tab的功能:支持自定义每个tab的位置,例如可以将个人主页放到tab1,将timeline放到tab4等
  • 自定义右滑选项:右滑选项从like和转发增加了打开链接、复制推文链接、复制文本或完全禁用等选项
    E-DoMbpWEAMCl_W-1

☎️telegram

从第一个版本之后,telegram在第八年发布了8.0版本大更新,新特性主要包括:

  • 直播观众数上限从1000提升至无人数限制:正式达到电视台级别,不得不佩服telegram的性能team。
  • 更灵活的消息转发:在转发消息时支持隐藏发件人名字、删除或保留媒体标题等。
  • 快速跳到下一个频道:在当前频道内,向上拉长滑动,可以快速进入下一个频道(体验非常Q弹)。
  • 潮流贴纸:在表情页增加正在流行的贴纸类型,同时还有新表情类型。
  • 完整更新见这里

🌺Slack

Slack最近更新了几个小更新,包括:

  • 聊天框输入时增加链接解析预览,而不需要等到发布后才看到。
  • 支持在channel中增加bookmark。
  • 正在内测论坛功能,以独立app呈现,类似内网论坛。
    image-1

🔍what's more

  • Clubhouse将支持空间音频,iOS正在推出,Android稍后。
  • Spotify的一起听功能(Blend)正式向全体用户开放。
  • iOS 15中,用户现已支持关闭官方相关性app,但这项关闭并不户减少广告数量,只是相关性会降低。
  • 微软Edge浏览器macOS版正在测试「超级安全模式」,这项功能通过关闭Edge的V8 JavaScript 引擎中最常被攻击的组件「即时编译器」(JIT),从而使攻击者更难利用浏览器漏洞。
  • 领英Linkedin自去年2月推出story,计划今年9月末下线该功能
  • Roblox正在内测语音聊天能力,名字叫Spatial Voice,上线即支持空间音频。
  • 哔哩哔哩iPad版本正式支持竖屏浏览和系统级分屏,相比此前必须横屏体验有了很大的适配提升。

🌟值得关注的新产品

🌍重启世界

来自字节投资的公司出品的元宇宙社交产品,另外字节内部或在开发另一款元宇宙社交产品“Pixsoul”,有消息后再和大家同步。

重启世界官方网站 - 创造属于你的梦想世界
Reworld是一款帮助有游戏创作梦想的你成为游戏制作人的产品。Reworld是一款集PC游戏编辑器和手机App发布平台的产品,具备创作热情的你可以在这里轻松使用3D游戏创作工具制作游戏,并发布在手机平台上。你可以自由的搭建物品和场景或使用编辑器资源库内众多的美术和音频等资源、策划自己的游戏方案、配合简单的Lua代码以及我们的顶级物理引擎,创造出你梦想中的游戏。

👀UI里的间距系统(Spacing System)是什么?

长文警告,请预留至少30分钟时间⏰

前言:一张空白的画布看上去毫无秩序可循,而网格系统就是UI的秩序,不管你是为哪个平台设计UI,你要考虑的第一件事就是你要给这块空白画布制定的网格基数是多少,然后元素的排布需要遵循这套规则。UI和平面视觉的不同在于,它始终需要为人群服务,去帮助用户解决某个问题,所以整洁有序是必要的。

在垂直排列元素时,设计师不应该拍脑袋去决定应该使用什么数值。然而,设计师们经常会像在PS中按着shift和方向键给予UI 5或10px的间距,这在水平方向也许可以接受,应为水平间距通常是10的倍数,然而这个间距是无法和谐地与字体系统并存。

一个清晰有效的间距系统可以使产品更可读,视线移动更加连贯,毕竟你可以想象UI里有元素的地方是黑块,空隙是白块,当它们有序地排列时你才会不被困扰或感觉烦躁。其实一些良好的排版习惯设计师在潜移默化中已经养成,但是重温这些规则的产生过程有利于我们解决未来碰到的新问题。

基于正文行高的网格系统

1.从行高得到网格单位 2.间距应该是网格单位的倍数或者因子

作者在上篇中解决了字体系统的问题,现在他已经有了一套经过验证能够完美适配网站的字体。所以作者选择从现有的行高出发,延展得到网格系统。

3C准则:容器(Container),内容(Content),组件(Components)

1C.   UI里所有容器的内间距要统一
2C.   对于垂直排列的内容文本,从上至下地(header)开始确定合适间距,然后确定其它元素的间距(段落,列表,表格)
3C.   相邻组件之间的间距要统一,彼此相关的组件才使用更紧凑的间距。

目前产品面临的问题

  • 改版前的EHR产品,有5px,10px,15px,20px四种内边距(padding)和外边距(margin),且没有严格限制使用场景。
  • margins/paddings只是间距系统里的一部分,文字行高也为UI增加了额外的间隙。在之前的设计系统里,因为没有考虑到字体行高,工程师需要去猜测行高然后去补充额外间距,使得整体UI匹配网格系统。这使得产品里存在许多不必要的间距。
  • 相关的元素却在UI上形态各异,这使得整个UI看上去混乱不一,造成阅读困难
改版前后对比

1.寻找适合正文的网格单位

作者一开始套用了非常流行的8px网格(间距是8的倍数或因子),为正文13px字体尝试了行距16px和24px,发现视觉效果都不理想,8px网格并不合适,要么太紧凑要么太宽松。
--2021-09-05---2.31.44
他只能探索比8px稍微小一点的网格单位,比如4和6,发现4px网格是在视觉上是最和谐的,13px的正文在20px行距和8px外边距下显示良好:
--2021-09-05---2.33.49

2.Hick法则&通过几何级数延伸得到其它间距

选择越多,决策越难

所以有效的间距系统必定是简洁:

  • 间距值需要是网格系统的因子或者倍数,由上一步得到的4px网格可以推出2,4,8,12,16,20,24,28等等
  • 一般来说4到5个值也足够应付一个复杂的企业软件,如果需要的话可以在后期探索的时候酌情增加
  • 作者决定采用前四个值 2,4,8,16,因为它们提供更好的视觉空间感,可以阅读Nathan的文章https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62去看看如何挑选合适的间距。

--2021-09-05---8.45.01

3.通过3C原则将制定的间距值有效地应用到UI里

作者受到上个段落Nathan的文章影响,觉得里面的命名非常巧妙,然后加上了自己的理解为这个系统创造了几个更新的描述,总结就是3C:容器、内容文本、组件

容器规则

顾名思义,容器是UI的载体,用来承载内容。常见的容器类型有页面(Pages),卡片(Cards),模块(Modals),面板(Panels)。因为容器处于UI的最高层级,所以相应的使用最大的间距16px。(注意,间距计算中不应该包括描边),也因为容器间距通常上下左右都有,也成为块状间距(square inset)
--2021-09-05---8.54.26

内容规则

内容文本通常包括标题(h1,h2,h3,h4,h5)、段落、列表以及以表格形式出现的数据(可视化数据)。这类文本通常从上至下像堆栈一样排列。设计师有可能会忽略的间距是文本行高,但行高也是一种间距类型。Nathan在文中提到的方法作者没有想到一个比较好的实施方法,所以也创造了他的方法来解决这个问题。

先从header开始
  • 首先你要计算出你每个header合适的行距(在上一篇文章里的字体系统,作者给正文13px字体找到的合适行距是20px),然后将13/20相除可以得到基础的比率(1.538~1.54),以这个比率为基础得到其它字号的行距范围(如下图所示),然后筛选符合4px网格系统的值,并在实际应用中观察是否合适。

--2021-09-05---9.05.56

在上一步中,需要在两个值之间再做一次选择,作者决定对齐1.5的标准,并且通过在之后与设计团队的走查让header的行距更加明晰:

--2021-09-06---11.13.34

在考虑行高的同时,我们需要同时考虑到header与其它元素之间的边距,以下是作者的视觉探索过程:

因为间距需要满足(0,2,4,8,16),所以根据最终视觉效果调整本文的行高。例如header1-24px的本文的在40行距下有一个刚刚好合适的4px间距,然而在36行距下并没有特别合适的间距。所以最终决定24px文本使用了40px行距。

--2021-09-06---11.17.43

下图是其它的探索过程,具体思路可以在原文查看,其实就是将最初得到的(0px,2px,4px,8px)一个个尝试在实际案例中:
--2021-09-06---11.29.18

--2021-09-06---11.29.49

--2021-09-06---11.44.56

解决数据结构布局

EHR系统里有以下四种主要数据类型

  • Tables 表格(50%)
  • Lists 列表(30%)
  • Forms 表单(15%)
  • Paragraphs 段落(5%)
段落
  • 每个段落里的间距即是行距,这是最简单的。
  • 根据WCAG SC 1.4.8里的建议:段落间距(paragraph spacing,以下称为ps)至少是行距(line spacing,以下称为ls)的1.5倍,也就是说,一个段落的最后一行文字顶部距离下个段落的第一行文字顶部是2.5倍行距。
    假设以13px字号作为计算基数,计算可得两个段落之间的实际间距是(ps-ls)=13px *(CSS定义为margin-bottom=13px)。因为13px不符合之前定义的几个距离值,于是取最接近的16px作为间距。

这里关于ps与ls有两种计算方式:
方式一:ps=1.5✖️ls=1.5✖️1.5✖️13px=2.2513px,ps-ls=2.2513px-1.513px=0.7513px=9.75px
方式二:ps=2.513px,ps-ls=1✖️13px=13px

作者采用的是方式二,两种方式计算差别并不大。

--2021-09-06---12.37.38

在后续的视觉走查中,发现16px的段落间距是适合13px正文的
--2021-09-06---12.45.04

列表间距

列表里的数据往往是紧密相关的,所以里面的数据间距不能像刚刚讨论过的段落间距那样大(16px),然而又不能完全没有间距(0px),所以作者在2,4,8三个间距里做了视觉探索,觉得4px是最合适的。
--2021-09-06---1.30.36

带有标签的输入区间距

--2021-09-06---1.31.58

不带有标签的输入区间距

虽然说不带标签对用户在理解UI上会造成一些困难,但在某些情况下,不在UI上展示标签可能更简洁(但是需要不断暗示用户这个地方需要填写的是什么东西)。
例如以下情况:

  • 一个信息需要多个输入框,比如地址。
  • UI表现足够明显,标签显得多余和重复,例如搜索框。

如果输入框之间信息联系紧密,使用fieldset,legend(html标签)作为一个整体,那么间距就要小一点。反之不能作为一个整体,则可以使用段落间距进行区分
--2021-09-06---3.00.04

表格里的间距

与列表相比,表单承载的信息密度更高,属性越多。为了让表格里的内容可读性更好,不被相邻数据分心。表格每行的上下间距设定为8px,总间距16px也是与段落间距一样的。
--2021-09-06---3.03.19

组件的间距

常用的组件有按钮,输入框,图标等等,一般来说组件水平方向上互相对齐。同样组件本身需要符合4px的网格系统,也就是是4的倍数。所以按钮和输入框的高度是24px,加上1px外描边,高度正好是26px。
当所有组件和字体都完美地契合网格系统并且拥有合适间距的时候,整个UI排版将会是非常整齐与和谐的。

相邻组件之间的间距统一使用8px,如果联系更加紧密则使用4px(格式塔原理 Gestalt’s Law)
--2021-09-06---3.05.04
--2021-09-06---3.05.20
--2021-09-06---3.05.29
--2021-09-06---3.05.44

4.结论

1.Hick’s Law:间距系统里的选择和规则要尽可能精简。
Gestalt’s principles of proximity:间距关系要清晰,有逻辑,可理解。

2.间距本质是为了提供更好的可读性,网页设计要遵循accessibility guideline WCAG 1.4.8(无障碍阅读指南)

感谢你的时间