恣意生长 by Hwang - Issue #7

#7・
7

issues

Subscribe to our newsletter

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that 恣意生长 by Hwang will receive your email address.

恣意生长 by Hwang - Issue #7
By Hwang • Issue #7 • View online
许久不见。本期主要内容有:Arc 浏览器的一些交互细节/ WWDC 2022 中苹果关于图表的 session “Deign an Effective Chart”的学习笔记/一些零碎的开发咨询。

Near Sorrento, 1863 by John Brett
Near Sorrento, 1863 by John Brett
许久不见。
下面这段文字是我在6月的第一周写下的,本来这封邮件计划在父亲节前发出,但是因为总总事情这封邮件推迟到了现在。这都八月了…
6月有我的生日,也有父亲节,我想聊聊我的父亲。
他在80年代来到杭州,准确的说是 1986 年,那年他 18 岁。他说他第一年来杭州,在一家私人钢铁厂上班,那时候的钢铁厂和现在的互联网大厂是一样的,都是一个高收入的行业。他说,那时一个月能挣 400 块钱,而在老家做公务员的亲戚只有 20 块。
他把第一个月的钱己汇了家里,爷爷说,全村都没见过这么多钱。那年春节,我爸去杭州大厦买了一套西装皮鞋,但是又怕火车上被人偷钱,所以穿着工作服就回了家乡,然后在村口换上了西装。过节后,村里20 多个小伙都要出来去杭州打工,但是第二年,收入就只有一半了,而且更辛苦了,很多人坚持不下去中途就回家乡了。
第三年,那家钢铁厂的老板,在澳门赌博,输了一大笔钱,把厂关了。他们一伙老乡,都被拖欠了工资。我爸算是有文化了,知道用法律的武器,找到了一个好心的律师,没有收他们多少钱,替他们写了诉状,上了法院,把钱都讨了回了,他说之后还给律师和法官送了锦旗。
那年还有学生运动,我爸说他什么也不懂,就记得说大学生上街了,工友们拉他去看女大学生。
这些故事都是春节我爸讲给我听的。很多事情的细节他自己也记不清的,但是记得的事情又都是满满时代的烙印 。
📦 产品 PRODUCT —— 聊聊 Arc 浏览器
最早知道 Arc 是在 Rauno 的博客,看他离开了 Vercel 去了 The Browser Company,不过现在他也离开了 The Browser Company。毫无疑问 Arc 是一款设计精美的浏览器,启动页开始就能感受到 Arc 无与伦比的精美:
Arc 浏览器的特点
Arc 是一款使用 Chromium 作为基础开发的「现代浏览器」或者「下一代浏览器」。 总体而言,他并没有太大的技术创新,主要是理念和交互的创新。以下部分是我觉得 Arc 有趣的新功能:
1/ 侧边栏导航:Arc 去掉了浏览器常规的顶部的 Toolbar 栏,将 Tab、地址栏移动到了侧边栏进行管理(类似的浏览器还有 SigmaOS)。所以它高度依赖 Command + T 调出的快捷栏。绝大多数的的导航、组织 Tab 操作都以通过这个快捷栏完成。
2/ 工作区(Spaces)、文件夹(Folders)、Pinned Tabs 以及 Favorites 的组织结构。每一个工作区都可以管理自己对应的文件夹以及 Pinned Tabs,但是 Favorites 是在所有 Spaces 上都通用的。
3/ 分栏操作:支持分栏浏览也是 Arc 的一个亮点。最近更新后,分栏的 Tabs 会被当作一个组合,在 Ctrl + Tab 切换时,会当作一个整体进行切换。这个改动在日常使用中有极大提升。
交互上,除了从侧边栏拖入tab或右上角按钮添加外,还支持在快捷栏输入 Add 来添加 Split View 。
甚至,还可以拖拽右侧的拖拽指示条进行分栏。不过和 Rauno 的 Demo 所提供的无限的 Workspace 相比,分栏的 Tab 组织自由度并不如任意拜访的窗口。不过有序的组织窗口显然更符合大多数人的时候习惯。 
ps. 也许是用一个快捷键打开一个”Stage Manager “ 会是一个好主意。
ps2. 已经有类似的浏览器了:ZeroG
4/ 本地文件管理: Arc 非常特别的提供了非常不错的本地文件管理的功能,经过授权,他可以管理桌面、下载、最近使用截屏等文件。这便利了在浏览器中使用各种在线协同工具。在 Figma 中插入和导出图片都变的更加井井有条。
5/ Little Arc:这是一个不符合我是使用习惯的功能,不过他也提供了关闭选项。Little Arc 相当于是一个 预览窗口的浏览器,他不会堆积 Tab 到你的工作区,在一些用完就走的场景中非常适用。不过我的工作属性导致工作中时常会被打断,所以 Little Arc 反而阻碍了我 「暂停」到「继续」的过程。所以在用了几天后,我就将其关闭了。
6/ 内置记事本与画图:Arc 提供了非常好看的 Note 工具和 Easel 工具:
细节
我尝试整理一下,除了安装就让人惊艳的全屏动画,Arc 还有很多有趣的细节:
主题渐变色选择器:提供了非常有趣的交互,点击➕号,添加渐变色,最多3个,同时根据色轮的分布自动排列。任意拖拽其中一个,被拖拽的颜色会作为主要颜色,影响其他控件的配色,例如文件夹图标。
文件图标颜色也会跟随主题色改变:
提供了类似 OneTab 的功能。
滑动 Workspace 后,添加新 Workspace 的细节动画:
拷贝当前链接时的动画 (command + shift + c)
广为流传的音乐播放动画
文件列表中光影细节的交互
🖌️ 设计 DESIGN —— 苹果来教你 Deign an effective chart
WWDC 2022 苹果推出了 SwiftUI Charts,所以对应的,苹果也来了一个视频,教大家如何 Deign an effective chart。 对数据可视化一直比较感兴趣,所以我仔细看了这个视频,并做了笔记分享给大家:
需要说明的是,WWDC 是面向开发的会议,所以这些可视化的建议也更加偏向于开发者如何呈现好数据。下文对视频课程做了摘要,更加详实的内容,还请查看视频。
Deign an effective chart 
在苹果眼里,怎么样才算 Effective Chart 呢?
  • Focused
  • Approachable
  • Accessible
就是说要聚焦的、易于理解的,同时又要有良好的易用性。
具体的,需要做好:Marks 、Axes、 Descriptions、 Interaction、 Color : 标记、坐标、描述、交互、颜色五大维度的内容。
Marks - 标记
Apple 说 Marks 指的是 柱状图的柱子、折线图的线段、散点图的点。
在设计 Marks 时,需要首先:“Design for goals and data”。
同时从 Pattern (形状)、 Range(数据范围) 和 Value(值) 入手,确定数据展示的形式。
在可视化过程中,可以先创建一些图标来更好的查看数据的情况,例如链接点,成为折线图,更直观的查看数据。
同时,苹果认为在图标展示上,要 Make accessible in VoiceOver,就是提供更好无障碍支持。
Axes - 坐标轴
思考数据范围,让数据与坐标轴匹配。
  • 在电池展示中,使用了固定的 y 轴
  • 在健康 App 中使用了自适应的 y轴
添加 Grid lines(网格线)和 labels
  • 网格线可以帮助大家更好的“读出数据”。
  • 不过并不是所有图表都需要网格:
选择网格线时,合适的网格线数量同样需要关注,尽量不要太多。
Descriptions - 描述
Provide Content
  • 移动端的展示坐标轴标签时,可能“太小”,不够明显
Summarize the main take-away: 总结含义
  • 例如天气 App 的图表
  • 使用 Audio Graphs 让图表更好的支持无障碍。
Interaction - 交互
通过更好的交互设计,可以让人们更深入的了解数据。
  • 例如
  • 总结不同状态的数据:例如心率数据中,展示睡眠心率;
  • 切换数据范围:例如按天或者按日展示数据;
苹果还有更高的要求:支持更多的交互模式。
Color - 颜色
  • 颜色可以用来展示分类:健身 App 的目标圆环
  • 颜色可以用来表示程度:天气 App 的气温。
  • 颜色还可以用来获取用户的焦点:健康 App 中展示心跳的最大最小值。
总体而言,Apple 的可视化建议是基础的。如果对可视化感兴趣,我觉得 Excel 图表之道 是一本不错的入门书,推荐给大家。
其他
  • 推荐一下 Scenes Weekly 的重读 HIG 系列。HIG 就是 Human Interface Guidelines 来自 Apple 的交互指南,好好看一遍 HIG 是 UI/UX 的必修课。重读 HIG 系列可以做到很好的查漏补缺。
  • 题外话,今年在公司里负责了一个设计师岗位的招聘,前前后后大概做了20-30个候选人面试,有拿到阿里offer的也有刚刚毕业的,但是当问到是否了解 HIG 时,大多数人还是一愣… 还是挺惊讶的。或许只是我们小团队,候选人还没到这个水平?或者是移动端式微,后台产品的设计并不需要这些。
  • useAnimation: A micro-animations library Lottie 图标库。无论是写代码还是做设计,看看做好的动画文件都是挺好的。
💻 编程 DEVELOP
Matter.js 一个2D 的体积检测及物理引擎
根据图片获取背景颜色,根据背景颜色判断显示黑色或白色 #Swift
Swift 的这个 package,https://github.com/jathu/UIImageColors
可以实现 根据图片获取背景颜色。
同时还提供了一些其他颜色
根据背景颜色判断显示黑色或白色:
其中 Swift 的实现:
其他
CSS的图层属性 @layer :是一个是实验性功能,不过这让我又想到了 Electron 的好处,发行 App 使用 Electron 的好处之一,就是可以指定兼容性。只要升级到足够新的版本,前端工程师就都可以及时用上这些节省生命的新特性。
搜索代码段的搜索引擎 hello ,效果还是不错的。
iOS 开发吐槽:以前是真的不知道,测试 IAP 原来是要创建临时的消耗品来做的? 
/最/近/读/了/啥
最近工作比较忙,绝大多数的业余时间都拿来开发 Sleepy Coffee 了,剩下娱乐时间都交给了老头环,老头环可真是一个好玩的游戏啊。
最近做的功能都还没更新,一次性开太多需求了,做起来有些吃力🤦‍♂️,导致正式版更新迭代比较慢… 我在 📖 Notion 上同步了工作状态,欢迎大家监督!
恣意生长是一份自我观察的 Newsletter。如果不输出,那么输入会显得不那么有意义,自大地以为自己“无所不知”。所以做一份 Newsletter 似乎会是一个审视自己的好机会。这份 Newsletter 会为读者提供个人的关于视角/产品/设计/编程 四个方向内容的思考和感悟,他们会是杂糅而又恣意的。
感谢阅读,欢迎回信,敬颂时祺。
Hwang 📝 8月18日 📍 杭州 7/100
Did you enjoy this issue?
Hwang
By Hwang

恣意生长是一份自我观察的 Newsletter。这份 Newsletter 会为读者提供个人的关于视角/产品/设计/编程 四个方向内容的思考和感悟,他们会是杂糅而又恣意的。

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue