Safari 的全新 UI

日期:6 月 8 日 × 2021 年网摘分享
昨晚的 WWDC 对于大部分国内非开发者用户来说相对无感了,我也几度开始在群里和朋友们讨论起类似「主讲人的睫毛好长呀」的无聊问题。第二天醒来唯一让我觉得有惊喜的是 macOS 版 Safari 的新版 UI 设计。之前 Firefox 更新的 tab 区已经让我觉得略惊喜了,但是 Safari 这次真的很激进,直接把 tab 和地址栏合并了,发布会现场有一个简单的视频展示:



有鉴于本次更新的系统好像只是加了点非核心功能,我「猜测」这个 Beta 版应该不会太 buggy,所以抽空就升了 MacBook 和 iPhone,主要为了尝试 iOS 和 macOS 的新 Safari,按照惯例升完系统第一件事情肯定是打开本台官网,然后搭配了新 Safari 之后略惊呆……他长这样:

图片载入中...



说实话,虽然我觉得这个边框实在太大,但是这种整体式的冲击感还是蛮强的,用推友的话说:「梦回 Windows XP」,哈哈哈哈。

其他部分网站的首页样式大概如下,大家可以感受下~

图片载入中...




简单研究了一下这个浏览器整个工具栏的取色规则,我完全没摸透,但肯定跟以下内容有关:
  1. Meta 里的 theme-color 这个「Android 舶来品」参数
  2. 网页头部元素的颜色
  3. 网页 body 的背景色


对于我台官网来说,让 Safari 界面跟着变化的元素应该是上述第 2 个,但是简单测试下来我发觉这个策略应该非常复杂,至少网页头部的颜色并不是 100% 采用,只有当它比较深的时候才取,不够深的话则直接取 body 的背景色,不太明白这么做的原因,因为对于 body 背景色来说,不管深浅他都是可以适配的。

经提醒,Safari 的 Release Notes 里提到这个 theme-color 也是可以分别设置浅色和深色主题不同状态。同时,还在进行中的 WWDC 会有个 Session《Design for Safari 15》,6 月 11 日视频上线,看简介会详细介绍这个取色以及如何开发的问题。

另外移动版的 Safari 也有 UI 大更新(用群友的话说:这是 Safari 的大年啊!),地址栏被移到了最底下(Apple 跟地址栏到底什么仇什么怨?),而且网页在滚动时对元素的隐藏策略也跟以前大不相同,滚动之后的状态下可视区域的高度反而要比默认状态下低一些

图片载入中...



好了,平常用的输入法在 macOS Monterey 下挂了,所以用不太熟悉的原生浏览器打字打到现在也已经很不容易了,就酱紫吧。哦对了,这次的 iOS 其实 bug 不多,但是 macOS …… 大小问题不少,主力机的话请谨慎……

更新:
上面说到的视频《Design for Safari 15》已经发布了,Apple 官方给出了 Safari 这个取色的一些原则,基本跟之前猜的差不多,但也提到在实际处理的时候他们还是会避开窗口左上角「红绿灯」按钮的三个颜色。

微博 知乎 Twitter Dribbble Behance Instagram LinkedIn Unsplash