View profile

#01 | 恣意生长 by Hwang

#01 | 恣意生长 by Hwang
By Hwang • Issue #1 • View online
#01 | 恣意生长 by Hwang
恣意生长是一份自我观察的 Newsletter。如果不输出,那么输入会显得不那么有意义,自大的以为自己“无所不知”。所以做一份 Newsletter 似乎会是一个审视自己的好机会。这份 Newsletter 会为读者提供个人的关于视角/产品/设计/编程 四个方向内容的思考和感悟,他们会是杂糅而又恣意的。
引言
如果不输出,那么输入会显得不那么有意义,自大的以为自己“无所不知”。所以做一份 Newsletter 似乎会是一个审视自己的好机会。
基本上毕业后参与创业、带团队,很多硬技能(JavaScript、Python、Swift、Figma)和软技能(编程思想、团队管理、审美理念)都需要自己观察学习,很多时候这种学习和观察都是低效的。为了巩固相关技能,我决定有目的的整理这些内容,做一些简单的输出,如果能够启发到各位或者获得各位的指导,那就再好不过。
相比专事专议的内容,恣意生长可能更加「杂糅」,我会聊到产品、设计和编程本身的内容,在聊产品时可能会有一些编程角度的思考,在聊设计时可能会有一些产品角度的思考… 所以我的输出可能就是“低质”的。
不过 Don’t panic ! 记录自己的思考本身就是一件有意义的事情。
视角 —— toB 中 信息化和数字化、 使用者和决策者分离
第一期 Newsletter,我想聊一下这两年作为非典型的国内 B 端产品经理的观察——使用者和决策者分离。这是国内 toB 的工具类产品的一个非常非常重要的特点。
我之前开玩笑说:数字化就是 Javascript,信息化(过去才这么提)就是 C/C++,其实这就是我理解的时代背景。这里首先明确一下我想表达的含义:
信息化与C/C++: 过去无论是政府部门还是国内的中大型企业,都经历过所谓的信息化,计算机广泛使用,办公软件、ERP系统等等,都是这个时间区间的产物。然而,这个时间区间内,互联网工具只是在很有限的空间「浸入」到了日常工作中,例如 Word、PPT 这些工具范式在国内的广泛使用就是这个时代的工具产品。而「信息化」时代所伴随的就是 C/C++ 所提供本地的软件服务。
数字化与JavaScript:近年来,主流语境中越来越多的用到「数字化」的概念,在我看来,这是一件事情:都是在利用编程手段,提高商业/政府系统的运行效率。伴随着「数字化」,我们看到更多的 B 端用户,开始选择使用诸如钉钉、企业微信、飞书这样的产品和服务,大型组织还会开发定制化的数据中台产品,以期「大数据的赋能」。而这其中与「信息化」很大的不同之处在于,编程手段已经深刻影响到了其中的业务系统,越来越多的人工作是在「业务系统」下进行的,可以说几乎整个业务流程都已经浸润在「数字化」系统之下。如果说「信息化」是编程技术的「小荷才露尖尖角」,那么「数字化」则是如水银泻地般将机构包裹住了。 与「信息化」相对应的,「数字化」时代,所伴随的技术就是 JavaScript 为核心的 Web 技术栈。当然这么言之凿凿确有不妥,Java 、Go 乃至 Python 等偏后端语言同样扮演着重要角色(广义上也算 Web 技术栈了)。
如此划分着两个时代整体上有些粗糙,但是便于解释我的逻辑(如果你有自己的想法,欢迎回信讨论)。这两个阶段在许多行业都留下了影子,前后可能有10年左右的时间跨度。而这10年,也让许多人在自己的组织中,成长为了「决策者」。所以,如果在做一款 B 端的产品,会经常性的发现在对接客户的决策者中,总会有那么几个领导,他们懂一些技术,但又不是非常懂,这就是所谓「信息化」的影响。一方面时间决定了他们能成为领导,另一方面机构内要负责此类事物的大多都是「懂技术」的领导,所以决策者很多时候都会符合这样的画像。寻找那个时代的技术概念,用来解释现在的技术概念,大体是有用且有效的沟通方式。
在实际产品设计中,满足你标的的实际需求外,一款 toB 的产品是非常需要同时考虑两个群体的具体需求的。简单而言,产品需要回答对于决策者能解决什么问题?前两年的套路就是所谓的「大屏」、「领导驾驶舱」,显然这阵风已经越来越吹不动了,既有的形式已经是习惯了,所以除此之外,还需要有更加直接的触达决策者的产品功能。
产品 —— RIP Tempo:显示快捷键的交互、邮件客户端已经不再是合适的「生意」了
最近小众的邮件客户端 Tempo 宣告倒闭:

Tempo 旨在通过分类邮件,解决过于零碎的邮件处理问题。过去,许多产品都尝试解决过这个问题,例如 Mailbox、Inbox 等等,最后他们都消失在了历史长河中。现如今,无论是 Outlook 还是 Gmail 都提供了一定的收件箱预处理的功能。
tempo的一些亮点
技术上说,Tempo 是一款 Electron 的项目。换而言之,在交互设计上,可以使用前端的技术栈,相比原生开发,前端的各种布局方式,能够在动态的视图 DOM 渲染中,实现更多的效果,大概得益于此,在交互上,Tempo 通过长按 Command ,能够动态的在按钮旁显示快捷键。
长按 Command 显示快捷键
长按 Command 显示快捷键
「长按 Command 」这个操作在 iPad OS 想必大家一定不陌生,在 iPad 中这个操作同样可以用于显示快捷键。而在 macOS 上,显示快捷键更多的还是需要依靠顶部的菜单展示各自国内的快捷键。在便捷展示「快捷键」这件事情上,Typora 的开发团队甚至开发一款名为 Paletro 的软件,通过调出类似 Alfred 的 Bar 的方式,实现显示+调用快捷键。
Paletro 官网
Paletro 官网
Tempo 的解决方案堪称优雅,但是如果作为开发者或者设计师,想到每一个按钮都需要考虑按下 Command 之后的状态,似乎并不是一件令人快乐的事情。
最后,Tempo 的失败,似乎也在验证邮件工具已经不再是用户愿意付费的服务了,即便你已经做的那么好了。
  • MailBox 在2013年2月7日发布,到 2016年2月26日 宣布关闭。
  • Inbox by Google,Google 在收购了Sparrow 后,于2014年10月22日发布了全新的 Inbox 客户端,之后在2019年8月2日宣布关闭。
  • Newton 在2018年也短暂的宣告停业,在2020年宣布重启。
那些让人喜欢的邮件工具都已离去了,活下来的都是依托邮件服务的定制工具(Gmail、Outlook、Hey…)。而我们也几乎可以笃定的说,邮件这项互联网基础服务,在2021年的今天,已经不需要纯工具应用了。
设计 —— 聊聊 Material Design 3 的动态
与 Material Design 2 相比,其实最大的升级就是:
  • Dynamic Color : 动态色彩系统
  • Foldable devices: 折叠设备设计规范
Material Design 的设计团队说:
Make personal devices feel personal with Material Design 3, Google’s most expressive and adaptable design system yet. 
是的,Material Design 3 是一个非常特别的设计规范,互联网发展这么多年,并没有任何一个设计,会有如此高度动态的表达。这让我想到了游戏大作的捏脸系统了。
Dynamic Color 被显著的说明
Dynamic Color 被显著的说明
在工程上,Material Design 3 将“颜色”这个类型的复杂度提升到了一个新的水平。想要支持 Dynamic Color ,开发者和设计师除了支持 Dark Mode 还要思考,使用 Dynamic Color 时,各种组件的样式的特殊情况。例如,当你在一众 Dynamic Color 中,引入了一个自定义的颜色怎么办?Google 给的说法:
Product-specific custom colors
Custom colors pin specific hues that often are needed alongside expressive colors in UI as a way to communicate conventional meaning, such as errors.
They’re also used to give teams more control and customization alongside the variability of a dynamic color environment.
设计师可以参考这个工具给出的颜色配置,不过这并不会降低复杂度。
除了自定义颜色外,图片同样变得更加复杂,如下图,Google 给出的应用内配图建议:
在工程上,动态修改局部图片色彩的方案,据我所知,成熟有效的方式似乎只能使用 SVG,而对于 SVG 的支持上,目前原生开发的支持并不算好。查看相关文档,目前无论是 Google 自家生态的 Kotlin 或是 Flutter,都还没有做好 Dynamic Color 的完善适配。
与这些复杂程度相对应的,用户在实际体验中又收获了什么呢? 在 2021年的今天,Material Deign 2 似乎不再是符合时代的规范, Material Deign 3 的出现,也确实让人眼前一亮。不过就像支持的设计规范一样,Material Deign 3 可能最后也只是会 Google 自家的规范。但是拥抱个性化的需求,可能会和“折叠手机”一样,成为以后 C 端交互的长期趋势。
最后,无论如何,Google 推出这样的一套设计规范,都是值得敬佩的。
另外,在这个 issue 里 quasar 已经说要准备支持 Material Deign 3 了 🎉。
编程 —— Electron 构建 macOS 应用之应用签名
如果想要发布 Mac app 无论是 在 MAS 上还是自己的网站上,签名都是一个绕不开的话题。而 Electron app 的签名过程不像是使用 Xcode 开发的原生应用,很多东西都需要手动处理一番。满足以下条件,这篇文章可能对你是有帮助的:
  • 首先,你得有一个 Apple 的开发者账号,且已经付费了。
  • 其次,使用 electron-builder 进行打包
我们的项目使用 electron-builder 进行打包,所以签名的事情是可以交给它的,不过证书还是需要自己手动导出,并且,构建不同版本的 App 所需要的证书也是不一样的,具体的:
How to Export Certificate on macOS?
  1. Open Keychain.
  2. Select login keychain, and My Certificates category.
  3. Select all required certificates (hint: use cmd-click to select several):
  • Developer ID Application: to sign app for macOS.
  • 3rd Party Mac Developer Installer: and either Apple Distribution or 3rd Party Mac Developer Application: to sign app for MAS (Mac App Store).
  • Developer ID Application: and Developer ID Installer to sign app and installer for distribution outside of the Mac App Store.
  • Apple Development: or Mac Developer: to sign development builds for testing Mac App Store submissions (mas-dev target). You also need a provisioning profile in the working directory that matches this certificate and the device being used for testing.
  • 详情文档
其中最重要的部分是不同证书对应的应用版本信息:
  • Developer ID Application证书:为macOS应用程序签名。
  • 3rd Party Mac Developer Installer证书,以及Apple Distribution或3rd Party Mac Developer Application:为MAS(Mac App Store)的应用程序签名。
  • Developer ID Application 证书:以及Developer ID Installer ,为应用程序和安装程序签名,以便在Mac App Store之外分发。
  • Apple Development 证书:或 Mac 开发者:为测试 Mac App Store 提交的开发版号签名(大规模开发目标)。您还需要工作目录中的预置配置文件,该配置文件与此证书和用于测试的设备匹配。
是的,有这么多证书,所有证书均可以在 Apple 的开发者网页管理后台中找到https://idmsa.apple.com/
而申请这些证书,首先你需要创建一个 certificate signing request
之后,通过上传这个文件,获得对应的证书。
获取证书后并不能立即使用需要再打开 Keychain,选择导入证书。把刚才保存的证书导入进 Keychain 进行管理。
最后,导出 .p12 文件,选择你要导出的证书文件(ps 可以多选),输入证书密码后,再根据提示输入本机密码,把 .p12 文件保存即可。使用这个文件,再根据文档提示,将其路径及密码存到环境变量中,就可以开始 Mac App 的签名与打包了。
闲话
这两年,苹果把 OS X 改名为 macOS ,并且开始越来越收紧应用权限,要不是有铁头娃 Epic ,真担心哪一天第三方发行也不可以了。
这里附上 @PlatyHsu 关于 Catalina 开始的各种 app 启动提示框的研究。
启动 app 时几种不同的提示框:
  • 对于 Mac App Store 分发的 app
  • 由苹果签名(开发者的 WWDR 证书只用于本地测试和提交 iTunes Connect)
  • 不需要 Notarization(因为 MAS 本身就需要审核)
  • 运行无任何提示
研究了一下 Catalina 开始几种乱七八糟的 Gatekeeper 机制,笔记:
启动 app 时几种不同的提示框:
  • 对于 Mac App Store 分发的 app
  • 由苹果签名(开发者的 WWDR 证书只用于本地测试和提交 iTunes Connect)
  • 不需要 Notarization(因为 MAS 本身就需要审核)
  • 运行无任何提示
  • 对于自行分发的 app
  • 必须用开发者的 Developer ID 证书签名,并且经过 Notarization (2019-06-01 后)才能在 macOS 10.15+ 上打开
  • 否则,系统要求用户删除软件(小字提示为 “macOS cannot vertify that this app is free from malware”,但可以通过右键打开绕过)
  • 即使已经签名 + Notarization,因为自行分发的 app 是从网上下载,仍然会被打上 quarantine 的 xattr,因此第一次打开无论如何需要手动允许(小字提示为 “Apple checked it for malicious software and none was detected.”)
证书被吊销的后果:
  • WWDR Cert 被吊销:app 可以继续用(因为 MAS app 是苹果签名的),开发者不能再上传 app
  • Developer ID 证书被吊销:app 不能打开,但因为 OCSP 有缓存,用户感知可能存在延迟
References:
最近读了啥:
Ps. 我们的阅读大多数是在 Pocket 里面躺着的文章,所以很多时候,并没有什么时效性。
产品相关
让我们回顾历史,一起来看看有哪些出现过的元素构成了现在的 Roam Research。
一份 Musical.ly 联合创始人 Alex 的 PPT 的阅读笔记。
范式转移是最大的非共识金矿(Paradigm Shift is the biggest Contrarian Goldmine) 第一性原理,归纳和演绎巨大不匹配、消费信号、PEST、数量就是质量 非共识创业/投资的三个大坑
「工具是一个过程:用大小形状都合适的物体,以最有效的方式完成工作。」 利器采访优秀的创造者,邀请他们来分享工作时所使用的工具,以及使用工具的方
The largest IPO in history is happening November 6th
歧视性的秩序不仅体现在政治和法律制度中,也存在于建筑、计算机代码、人工智能或者其他人造物里,而沉默是后者独特的表达方式。无形互联网逐渐成为我们时代的基础设施,它在某些时候,犹如一座座有形的摩西矮桥,将人们分隔开来。
现在已经到了 PLG 型公司爆发的合适时机。
设计
News and information from Font Awesome – the internet’s favorite icon set – mixed with musings and nerdery from the team behind it.
本文介绍了 Android Developer UX 团队在设计 Compose Preview 时采用的方法。
dev
本周遇到的趣事,我们的项目,最近要添加字体的支持。所以使用了这个包,不过在 macOS 版本上遇到了一些问题,主要是二进制文件路径的问题。我们的开发打开这个项目给我看,我一看这头像,眼熟的很,一翻 twitter 竟然是互相关注的网友 @oldj 的项目,哈哈哈哈。感觉非常奇妙。
播客
比较有印象的两期:
END
恣意生长 大致2-3周更新一期,每期我会针对这段时间所思所想,整理视角/产品/设计/编程 四个方向的内容。目前的小目标是写100期,完成进度:1/100
感谢阅读,欢迎回信,敬颂时祺。
Hwang 📝 11月12日 📍 杭州
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