Millie Lin

2024 & Q1 2025 我付费的互联网产品

Wed, 30 Apr 2025 00:00:00 GMT

Generated cover image by Imagen3

2024年，可以在家上班的时间更少，出行在外工作的时间变多。在家的时光尽可能安排给小男孩，再留一点点时间运动运动，直到最近放大长假，终于可以来更新一下过去一年的产品使用体验记录，来完成这项在我的 Todolist 里呆了数月的事项。

2024年，工作与生活似乎接近了科技许多，因为开始尝试各大 AI 模型辅助我的搜索及写作优化。但这一年，我又远离了科技许多，少了许多时间去尝试和探索各种新 app，或是管理自己的网站与博客。总结2024年（包括2025年第一季度）我的互联网产品使用，大趋势是继续做“减法”。

主要变化： 开始使用 deepseek、Poe、豆包、微软 Copilot 等 AI 应用工具来辅助工作和生活。没有特别付费新的应用。

付费订阅的应用

Google One(100GB)：文件存储， HK$150/年。使用频率：一天多次。继续重度使用 Google Photos。
Spotify：音乐+播客平台，家庭版HK$108/月，人均约18元/月。使用频率：一天多次，主要给娃听故事播客，有很多非常有趣高质量的的来自宝岛台湾的妈妈和小朋友的阅读播客自由。
Dashlane：密码管理，付费了高级版 US$59.99/年。使用频率：一天多次。依然是一款挺靠谱很重要的密码管理工具。此前的推广链接已经贡献了足够多的新用户，已经无需我的贡献。
微信读书：每天通勤时间变长了，渐渐开始不那么想关注太多社会新闻，恰好微信读书有想读的书但需要付费，就购入了一年的付费会员。
淘宝88VIP：看来我是愈加生活了，因为88VIP可以绑定优酷或芒果的一年会员，加之平时99包邮还是需要买很多东西，于是付费购入。

停止付费的应用

Krisp: 音频降噪桌面客户端，由于Pro 版年费 US$60/年，加之 Macbook 自带了降噪设置，2024年初已停止该app的付费及使用。（要不是看到这篇，我已全然忘记了这款app的存在）
财新网：资讯媒体，财新通计划 CNY¥648/年。年费计划到期后暂无续费，继续使用 app 看标题。也许未来有一天闲了会想重新关注社会新闻。
Pycharm：IDE 集成开发环境，US$53/年，使用频率：一年数次。今年8月，我的 Pycharm 即将到期。最近在公司体验了 VS Code，感觉足够了，上手之后其实也挺顺畅。加之 Pycharm 的界面也改得像 VS Code 一样，似乎付费的意义不大了，除非重度需要 python 相关功能，否则应该会转投 VS code。

下面把特别常用的几款拎出来聊聊：

工作生活日程二合一: Notion Calendar

Notion Calendar 网站首页截图（2025年4月30日)

2024至2025，我会将每项工作日程在 Mac 端的 Notion Calendar 简单记一笔。因为它会实时同步到 Google Calendar，无论是私人还是工作安排，都方便我一目了然可用的时间。手机端我还是习惯使用 Google Calendar，因为它会自动更新。 Notion Calendar 的 iOS 需要手动打开 app 才会同步。

其中我还向官方报告了一个 bug 并得到了更新修复。即创建在主 calendar 里的事件会自动复制并出现在我的另一个 calendar 中导致我总是需要手动删除重复的项目。

Notion 最近又推出了 Notion Mail 主打整合邮箱及更友好的邮件分类和检索。不过由于 Google Mail 的移动端和电脑端已经十分满足我的需要，所以尚未体验。

放心少烦恼：Dashlane 密码管理工具

Dashlane 网站首页2025年4月30日截图

Dashlane 依然是方便好用的密码管理工具。由于免费使用期限到期，我已付费使用它。它附带的 Hotspot Shield 在我外出旅行使用免费 wifi 时应该也起了一定的安全防护作用，让我觉得挺安心。它也自带了二次验证功能和 passkey 等，感觉一路维护得挺好。MacOS 版 app 也回来了。

2020年更新：

Dashlane 也是用了两三年，要有的功能都有了。虽然去年 Dashlane 再次重设计了品牌形象，更显现代与专业，但体验上似乎还是差了点什么，个人感觉可能是密码更新后的同步有时候非实时自动导致，以及指纹启动等小功能不稳定导致的摩擦。不过跟 1Password 相比，还是 Dashlane 顺手。也很意外的，去年也有一位网友通过去年那篇博文中的链接注册了 Dashlane，我的 Dashlane 高级版使用权限也真的因此被延长了。

2021年更新：

和 Todoist 类似，2021年也有人透过我博客文章的邀请链接注册使用 Dashlane，我的 Dashlane 高级版的使用权限也得意延长了数月。

2022年更新：

又是一年过去了，这款密码管理软件依旧是我的手机及桌面端必备。看到 Dashlane 的小细节在一路优化升级，此前手机版UI相关的bug也终于解决了。给自己设了个提醒每个季度备份一次密码，可以导出密码为 dashlane 自由的格式并加密，以防万一。

2023年更新：

依然是让我觉得很安全很放心跨平台设备都好用的密码管理app，每天都要用。

2024年更新：

Dashlane 是一款全平台的密码管理应用。2020年起，Dashlane 开始将其桌面端产品全面转至 web-first 应用，必须透过浏览器及其扩展插件使用。根据 Dashlane 的官方说法，他们认为 web-first app 能带来更好更一致的使用体验，同时也降低了降低了他们跨平台开发及交付的成本，出现问题时他们能更加快速地部署与更新。至于人们担心的密码管理软件的安全性问题，官方说法是他们会采用 industry-leading security architecture 业界领先的安全架构以确保 web 版的安全性与桌面版一致

Dashlane 桌面端此前亦提供 VPN 功能以保护私人网络，如今他们的web版将此部分功能交由第三方VPN应用「Hotspot Shields」负责，Dashlane 会自动生成账号密码供付费用户登录使用。Dashlane iOS App依然保存了内置的VPN功能，但如果单独下载了 Hotspot Shields 移动端应用，亦可透过桌面端的账号密码登录。

注1：Hotspot Shields iOS 版未在中国版 App Store 上架。

注2：Hotspot Shields 与2021年中被数字安全公司 Aura 收购

那么，如果你有兴趣试试，可以通过我的 Dashlane 邀请链接注册，你将取得为期6个月的 Dashlane 高级版免费使用权限。

免费地爱着： Todoist 任务清单

Todoist 2025年4月30日网站首页截图

Google Calendar + Todoist + Google Mail，工作和家庭的事项愈加繁多，不必执着于一款 app 来管理全部。我选择顺着自己的习惯，同时使用日历、邮箱和 todoist 来管理不同的事项。

我会用 google calendar 创建重复事件来方便我留意当天有何安排，例如每周六上午要留意是否需要归还图书馆的书或是续借，但同时我也会将图书馆发来的图书到期提醒邮件 Snooze 定时，让它在需要行动的当天再次出现在我的收件箱并标为未读作为二次提醒。邮箱也是我的 todolist。同时我也在 Todoist 上创建了重复的借书还书提醒，到点手机会推送提醒。因为如果没有及时续借，我将要付违约费～虽然不多，但我不想出现不良借书记录。
每天需要接娃放学的时间，我也用 calendar 创建重复事件并分享给家人或帮手，确保多个人都能留意到这个重要事件的发生，互相提醒。学校的假期也会用它管理，这样就清楚知道哪天方便安排什么活动。

2020年更新： Todoist 大概是自己每日手机和电脑（包括个人机和工作机）上使用频率最高的应用。毕竟它是一个任务清单，将它和 Google Calendar 集成之后，事无巨细，都靠它帮我解放记忆，在必要时提醒：

琐碎的事情，比如取快递、买菜
严肃的事情，比如和客户开会
每日重复的事情，比如健身、工作日的 stand-up meeting
每月重复的事情，比如信用卡还款
每年重复的事情，比如软件续费等等

“原来真的有人读”

让我意外的是在过去几个月真的有人因为读了我去年记录的那篇文章并通过文中的推广链接注册了 Todoist 并获得了几个月的高级版使用。倒是过去一年这个 Gatsby 博客框架的 SEO 效果让我感受到了久违的互联网的营商力量。

2020年，Todoist 推出的主要新功能是看板视图，就像 Trello 和 Jira 那样，你可以用 Kanban 的方法管理任务，比较适合小团队。

2021年更新：

无论是工作还是生活，Todoist 依然是我使用频率最高的 App，堪称我的第二大脑，负责记忆和提醒工作、生活的方方面面。2021年，我的 Todoist 上多了一个项目，叫做 Motherhood，它确保我每天都不错过照料宝宝的大小事，以减少记忆问题而引发的焦虑。

2021年依然有人透过我博文中的邀请链接注册并使用 Todoist，我也有幸获得了额外几个月的高级版使用权。互联网的力量真的神奇。

2022年更新：

第二大脑，它依旧是我的第二大脑。今年多了 👩 motherhood 和 Wishlist for kid 这两大项目。

感谢网络的力量，因为偶尔有人浏览到2021年的付费产品清单记录并透过邀请链接注册，我的 Todoist 高级版使用期限暂时被延期至2023年中了，这种被遇见的感觉还蛮神奇的。

2023年更新：

很遗憾，之前的 Pro会员到期后觉得免费版已经够够的了。然而他们2023年底时界面进行了一轮大改版，感觉时间设置不方便了。反而 Notion Calendar 快速创建事件时的时间填写很方便。有时会直接在 Notion Calendar 里添加事件让他们自动同步到 Todoist 里。手机版的界面导航改版之后也很不顺手，时间选择变成了一大痛点，任务时常这个新功能还显得很鸡肋，好像是为了日历视图而设。虽然2024年初收到了 Todoist 75折优惠邮件，但依然难以让我提起付费的兴趣。

不过，Todoist 依然是我每日重度使用的 app。如果你有兴趣试试，可以通过我的 Todoist 邀请链接注册，你我都将取得为期2个月的 Todoist 高级版免费使用权限。

一次性付费的 Mac Apps：

只需一次性付费即可长期使用的 Mac Apps，他们大都不是特别常用，但装机的时候还是会保留。

TextSnipper：工作需要从图片中截取文字复制粘贴，这款 OCR app 效率很高，转为文字的质量也都挺好，支持多语言。我试过中英文都没问题。
Nota - Markdown 编辑器，可完全免费使用，beta版早期时付费支持购入，用于博客内容写作。
Affinity Design V2.0 – 专业图形设计软件：图形设计套件，包括 Affinity Designer，Affinity Photos 和 Affinity Publisher 的 2.0 桌面版和 iPad版，HK$788/永久（六折促销价）。使用频率：每月一次。因为娃的学校经常需要打印东西完成功课或记录行为，所以经常会打开 Affinity Designer 来编辑和调整图片在 A4纸上的尺寸用于导出打印。

Balsamiq for Desktop：2020年入的原型工具。十年前它就大名鼎鼎了，不过因为工作场景不是特别需要它便没有尝试。今年刚好需要远程协作，又希望能有便利的方法快速记录自己对产品的想法并与同事分享，使用了30天，发现在简单的线框图和快速想法勾勒方面确实方便，也就付费了（已支持 M1 原生）。如果没记错，2023年他们将逐步停止对桌面端app的开发与支持，全面转向云端。
Tayasui Sketches：手绘工具，有丰富的画笔、画纸等设定。可惜我的 Wacom 画板有点老，驱动有点问题，加之自己手绘水平不咋地，所以不常用（已支持 M1 原生）
DM1 - The Drum Machine：鼓点节奏创作工具，有丰富的音效，即使是外行也可以快速创造出有趣的节奏。多年前购入的，主要是好玩，有时候自己录视频，也可以用它创造些 beats（少用，但很棒）
VOX Mac Music Player：当初因为它的界面很帅购入，简单的用法就是个音乐播放器。如果注册会员则可以用它收听电台、播放 SoundCloud 音乐或播放 Youtube 音频。平时很少用，但每次装机还是会把它装上。
Icon Slate：可以快速生成各种大小和种格式的图标。一般只用它把图标转为 .ico 格式，平时也很少用，但每次要做 favicon 时总是第一时间想到它。

Flomo 浮墨笔记：好友 Plidezus 创造的便于快速记录灵感的笔记软件，CNY¥99/年。

设计及开发相关免费 Mac Apps

Figma：我工作的每天都要用到，不过是公司付费，自己就没有付费了。 FigJam也成了远程会议和想法收集的必备。
ColorSlurp：取色器。试过很多款取色器 app，最后觉得这款最好用
FontGoggles: 字体预览和比较应用
Contrast: 取色及色彩对比度计算评估工具
PixelShank: （我多年前写的）开源图片像素尺寸标注工具，极简，偶尔用于辅助工作
UTM for Mac：虚拟机应用，也有 iOS 版，备用
Blender：开源的 3D 模型编辑器，待学习

常用的 Chrome extensions 浏览器扩展插件

Google Mail Checker：Gmail 新邮件提醒及快速导航入口
Dashlane：密码管理器
Wappalyzer：查询网页使用的技术
Fonts Ninja：查询及预览网页使用的字体
Clear Cache：一键清除页面缓存

2023 我付费的互联网产品

Mon, 18 Nov 2024 00:00:00 GMT

图片于 Poe 以 Playground V2 生成

2023年，聚焦工作与家庭的平衡，一整年都没有打理博客和其他社交平台，周末和夜晚的时间，能陪伴好小家伙打理好家务事，偶尔照顾一下自己的身体就不错了。虽然宏观环境尤其是经济很不好，各行各业都很低迷，但我已经很幸运，在不变中遇到了一些积极的信号。就像给娃进行幼稚园选校一样，选择事业还是选择家庭，看起来没有完美的选项，只能牺牲一些短期，尽力争取长远来看能带给自己更多选择权的那个选项。

这份「2023我付费的互联网产品」清单将基于 2019，2020 ， 2021 及 2022 年的记录开始做“减法”。

主要变化： 停止了对 Todoist Pro 会员的付费，成为了 Notion Calendar （原名 Cron）桌面端的重度使用者，减少了许多app的使用频率（工作之外，很少打开电脑）。

付费订阅的应用

Google One(100GB)：文件存储， HK$150/年。使用频率：一天多次。过去一年成为了 Google Photos 的重度用户
Spotify：音乐+播客平台，家庭版HK$108/月（2023年底从98元张到了108元），人均约18元/月。使用频率：一天多次。
Dashlane：密码管理，US$40/年。使用频率：一天多次。此前有人透过文章中的邀请链接注册取得优惠，我的 Pro 会员期限也随之延长，2022年并未被收费，感谢
Krisp: 音频降噪桌面客户端，Pro 版 US$60/年（现在涨价了，但是刚需明年还得买）。使用频率：一天多次。可以过滤环境杂音、宝宝哭闹声、装修噪音等，保证在线会议通话质量。2023年最新版的 MacOS 也推出了 Voice Isolation 的音频功能，如果效果好未来考虑停止 Krisp 付费。
财新网：资讯媒体，财新通计划 CNY¥648/年。使用频率：一周多次，主要看手机 widget 推送的标题
Pycharm：IDE 集成开发环境，US$53/年，使用频率：一年数次。2023年最新版的界面也变成了 VS code 一样…好像在催促我转投 VS code 的怀抱。

下面把特别常用的几款拎出来聊聊：

最爱: Notion Calendar

2024年1月17日，Cron 正式宣布它更名为 Notion Calendar - 图片来自 Notion 官网

Notion Calendar 原名 Cron，目前是一款免费的 Mac 日历软件。它的特色包括：

可以整合多个账号下的 Google Calendar，私人日程和工作日程合二为一
可以快速透过它快速添加及管理活动，它能将活动实时同步到 Google，进而手机端的 Google Calendar 也能得到同步 - 它弥补了 Google Calendar 桌面端的多账户整合视图空缺
桌面端有醒目的日程提醒和延时提醒功能，亦能自动识别 zoom 链接快速开启会议等
事件支持快速整合 Notion 的数据

因为刚好公司也是用 Google 家的，所以透过 Notion Calendar 可以看到我的所有日程，并快速对所有会议请求等作出响应。对于某些项目涉及 Outlook calendar 的使用，我会快速将其手动加入到工作日历中，以确保我能及时得到提醒，也方便非工作时间在手机端的 Google Calendar 查看所有日程安排。

放心少烦恼：Dashlane 密码管理工具

Dashlane 2024年1月官网首页截图

Dashlane 是一款全平台的密码管理应用。2020年起，Dashlane 开始将其桌面端产品全面转至 web-first 应用，必须透过浏览器及其扩展插件使用。根据 Dashlane 的官方说法，他们认为 web-first app 能带来更好更一致的使用体验，同时也降低了降低了他们跨平台开发及交付的成本，出现问题时他们能更加快速地部署与更新。至于人们担心的密码管理软件的安全性问题，官方说法是他们会采用 industry-leading security architecture 业界领先的安全架构以确保 web 版的安全性与桌面版一致。

Dashlane 桌面端此前亦提供 VPN 功能以保护私人网络，如今他们的web版将此部分功能交由第三方VPN应用「Hotspot Shields」负责，Dashlane 会自动生成账号密码供付费用户登录使用。Dashlane iOS App依然保存了内置的VPN功能，但如果单独下载了 Hotspot Shields 移动端应用，亦可透过桌面端的账号密码登录。

注1：Hotspot Shields iOS 版未在中国版 App Store 上架。
注2：Hotspot Shields 与2021年中被数字安全公司 Aura 收购

2020年更新：

Dashlane 也是用了两三年，要有的功能都有了。虽然去年 Dashlane 再次重设计了品牌形象，更显现代与专业，但体验上似乎还是差了点什么，个人感觉可能是密码更新后的同步有时候非实时自动导致，以及指纹启动等小功能不稳定导致的摩擦。不过跟 1Password 相比，还是 Dashlane 顺手。也很意外的，去年也有一位网友通过去年那篇博文中的链接注册了 Dashlane，我的 Dashlane 高级版使用权限也真的因此被延长了。

2021年更新：

和 Todoist 类似，2021年也有人透过我博客文章的邀请链接注册使用 Dashlane，我的 Dashlane 高级版的使用权限也得意延长了数月。

2022年更新：

又是一年过去了，这款密码管理软件依旧是我的手机及桌面端必备。看到 Dashlane 的小细节在一路优化升级，此前手机版UI相关的bug也终于解决了。给自己设了个提醒每个季度备份一次密码，可以导出密码为 dashlane 自由的格式并加密，以防万一。

2023年更新：

依然是让我觉得很安全很放心跨平台设备都好用的密码管理app，每天都要用。

那么，如果你有兴趣试试，可以通过我的 Dashlane 邀请链接注册，你我都将取得为期6个月的 Dashlane 高级版免费使用权限。

免费地爱着： Todoist 任务清单

Todoist 2024年1月官网首页截图

琐碎的事情，比如取快递、买菜
严肃的事情，比如和客户开会
每日重复的事情，比如健身、工作日的 stand-up meeting
每月重复的事情，比如信用卡还款
每年重复的事情，比如软件续费等等

“原来真的有人读”

2020年，Todoist 推出的主要新功能是看板视图，就像 Trello 和 Jira 那样，你可以用 Kanban 的方法管理任务，比较适合小团队。

2021年更新：

无论是工作还是生活，Todoist 依然是我使用频率最高的 App，堪称我的第二大脑，负责记忆和提醒工作、生活的方方面面。2021年，我的 Todoist 上多了一个项目，叫做 Motherhood，它确保我每天都不错过照料宝宝的大小事，以减少记忆问题而引发的焦虑。

2021年依然有人透过我博文中的邀请链接注册并使用 Todoist，我也有幸获得了额外几个月的高级版使用权。互联网的力量真的神奇。

2022年更新：

第二大脑，它依旧是我的第二大脑。今年多了 👩 motherhood 和 Wishlist for kid 这两大项目。

2023年更新：

很遗憾，之前的 Pro会员到期后觉得免费版已经够够的了。然而他们2023年底时界面进行了一轮大改版，感觉时间设置不方便了。反而 Notion Calendar 快速创建事件时的时间填写很方便。有时会直接在 Notion Calendar 里添加事件让他们自动同步到 Todoist 里。手机版的界面导航改版之后也很不顺手，时间选择变成了一大痛点，任务时常这个新功能还显得很鸡肋，好像是为了日历视图而设。虽然2024年初收到了 Todoist 75折优惠邮件，但依然难以让我提起付费的兴趣。

一次性付费的 Mac Apps：

只需一次性付费即可长期使用的 Mac Apps，他们大都不是特别常用，但装机的时候还是会保留。

TextSnipper：工作需要从图片中截取文字复制粘贴，这款 OCR app 效率很高，转为文字的质量也都挺好，支持多语言。我试过中英文都没问题。
Nota - Markdown 编辑器，可完全免费使用，beta版早期时付费支持购入，用于博客内容写作。
Affinity Design V2.0 – 专业图形设计软件：图形设计套件，包括 Affinity Designer，Affinity Photos 和 Affinity Publisher 的 2.0 桌面版和 iPad版，HK$788/永久（六折促销价）。使用频率：数月一次。Affinity 图形设计套件可畏平价版的 Adobe Photoshop, Illustrator 和 InDesign。1.0版时就已购入，这几年一直用着。用 Affinity Designer 画插画，或是用 Publisher 排版都挺不错。本还在想他们一次付费终身使用怎么赚钱，果然还是得靠 2.0 做不分界面优化和功能优化也实现了订阅制的效果。不过2.0相对1.0来说变化不大，其实不常用的话可以不用着急升级。

Balsamiq for Desktop：2020年入的原型工具。十年前它就大名鼎鼎了，不过因为工作场景不是特别需要它便没有尝试。今年刚好需要远程协作，又希望能有便利的方法快速记录自己对产品的想法并与同事分享，使用了30天，发现在简单的线框图和快速想法勾勒方面确实方便，也就付费了（已支持 M1 原生）。如果没记错，2023年他们将逐步停止对桌面端app的开发与支持，全面转向云端。
Tayasui Sketches：手绘工具，有丰富的画笔、画纸等设定。可惜我的 Wacom 画板有点老，驱动有点问题，加之自己手绘水平不咋地，所以不常用（已支持 M1 原生）
DM1 - The Drum Machine：鼓点节奏创作工具，有丰富的音效，即使是外行也可以快速创造出有趣的节奏。多年前购入的，主要是好玩，有时候自己录视频，也可以用它创造些 beats（少用，但很棒）
VOX Mac Music Player：当初因为它的界面很帅购入，简单的用法就是个音乐播放器。如果注册会员则可以用它收听电台、播放 SoundCloud 音乐或播放 Youtube 音频。平时很少用，但每次装机还是会把它装上。
Icon Slate：可以快速生成各种大小和种格式的图标。一般只用它把图标转为 .ico 格式，平时也很少用，但每次要做 favicon 时总是第一时间想到它。

Flomo：好友 Plidezus 创造的便于快速记录灵感的笔记软件，CN¥99/年。2023年少有时间折腾app，读的书大多存在于微信读书，于是现在就只有免费版在案了。

设计及开发相关免费 Mac Apps

ColorSlurp：取色器。试过很多款取色器 app，最后觉得这款最好用
FontGoggles: 字体预览和比较应用
Contrast: 取色及色彩对比度计算评估工具
PixelShank: （我多年前写的）开源图片像素尺寸标注工具，极简，偶尔用于辅助工作
UTM for Mac：虚拟机应用，也有 iOS 版，备用
Blender：开源的 3D 模型编辑器，待学习

常用的 Chrome extensions 浏览器扩展插件

Google Mail Checker：Gmail 新邮件提醒及快速导航入口
Dashlane：密码管理器
Wappalyzer：查询网页使用的技术
Fonts Ninja：查询及预览网页使用的字体
Clear Cache：一键清除页面缓存

2022 我付费的互联网产品

Sun, 11 Dec 2022 00:00:00 GMT

Photo by Kelly Sikkema on Unsplash

2021年秋季，一个小家伙呱呱坠地，在接下来的这一年多里，我的年度首要目标是保证小家伙健康快乐成长。那些曾经属于自己的周末时间，如今几乎全都给了小家伙。折腾电脑的时间少了，这份「2022我付费的互联网产品」清单变化不大，就此基于 2019，2020 及 2021 年的 “我付费的互联网产品” 进行调整与记录。

主要变化： 付费了 krisp 降噪软件提升远程会议通话质量，付费升级了Serif 公司的 Affinity 2.0 系列图形编辑软件，Affinity Designer，Affinity Photo 及 Affinity Publisher。推荐的免费 app 新增了 Cron Calendar。

付费订阅的应用

大部分在「2021 我付费的互联网产品」一文中记录的产品到了2022也还在继续使用。

Todoist：任务清单， US$48/年。使用频率：一天多次。此前有人透过文章中的邀请链接注册取得优惠，我的 Pro 会员期限也随之延长，2022年并未被收费，感谢
Dashlane：密码管理，US$40/年。使用频率：一天多次。此前有人透过文章中的邀请链接注册取得优惠，我的 Pro 会员期限也随之延长，2022年并未被收费，感谢
Pycharm：IDE 集成开发环境，US$53/年，使用频率：一周多次。因2022年末涨价，这一年我按原价一次性续了三年。虽然 VS Code 完全免费，但用惯了 JetBrains，Pycharm 和曾经的 Webstorm 也确实为我的工作效率提升提供了巨大的支持，所以打算继续用。
Spotify：音乐+播客平台，家庭版HK$98/月，人均约17元/月。使用频率：一天多次。如今的主要使用场景是外接蓝牙音箱给小家伙放儿歌听
财新网：资讯媒体，财新通计划 CNY¥648/年。使用频率：一周多次，手机上有一屏是财新的新闻 widget
Google One(100GB)：文件存储， HK$150/年。使用频率：一天多次。过去一年成为了 Google Photos 的重度用户
Affinity Design V2.0：图形设计套件，包括 Affinity Designer，Affinity Photos 和 Affinity Publisher 的 2.0 桌面版和 iPad版，HK$788/永久（六折促销价）。使用频率：数月一次。Affinity 图形设计套件可畏平价版的 Adobe Photoshop, Illustrator 和 InDesign。1.0版时就已购入，这几年一直用着。用 Affinity Designer 画插画，或是用 Publisher 排版都挺不错。本还在想他们一次付费终身使用怎么赚钱，果然还是得靠 2.0 做不分界面优化和功能优化也实现了订阅制的效果。不过2.0相对1.0来说变化不大，其实不常用的话可以不用着急升级。
Krisp: 音频降噪桌面客户端，Pro 版 US$60/年（现在涨价了，但是刚需明年还得买）。使用频率：一天多次。可以过滤环境杂音、宝宝哭闹声、装修噪音等，保证在线会议通话质量。
Flomo：便于快速记录灵感的笔记软件，CN¥99/年。使用频率：一周多次。用于阅读笔记和心得闪记，Pro版能够开通自定义标签每日微信回顾，是很好的提醒。

下面把特别常用的几款拎出来聊聊：

最爱： Todoist 任务清单

Todoist 官网首页截图

琐碎的事情，比如取快递、买菜
严肃的事情，比如和客户开会
每日重复的事情，比如健身、工作日的 stand-up meeting
每月重复的事情，比如信用卡还款
每年重复的事情，比如软件续费等等

“原来真的有人读”

2020年，Todoist 推出的主要新功能是看板视图，就像 Trello 和 Jira 那样，你可以用 Kanban 的方法管理任务，比较适合小团队。

2021年更新：

无论是工作还是生活，Todoist 依然是我使用频率最高的 App，堪称我的第二大脑，负责记忆和提醒工作、生活的方方面面。2021年，我的 Todoist 上多了一个项目，叫做 Motherhood，它确保我每天都不错过照料宝宝的大小事，以减少记忆问题而引发的焦虑。

2021年依然有人透过我博文中的邀请链接注册并使用 Todoist，我也有幸获得了额外几个月的高级版使用权。互联网的力量真的神奇。

2022年更新：

第二大脑，它依旧是我的第二大脑。今年多了 👩 motherhood 和 Wishlist for kid 这两大项目。

所以，如果你有兴趣试试，可以通过我的 Todoist 邀请链接注册，你我都将取得为期2个月的 Todoist 高级版免费使用权限。

还不错：Dashlane 密码管理工具

Dashlane官网首页截图

注1：Hotspot Shields iOS 版未在中国版 App Store 上架。
注2：Hotspot Shields 与2021年中被数字安全公司 Aura 收购

2020年更新： Dashlane 也是用了两三年，要有的功能都有了。虽然去年 Dashlane 再次重设计了品牌形象，更显现代与专业，但体验上似乎还是差了点什么，个人感觉可能是密码更新后的同步有时候非实时自动导致，以及指纹启动等小功能不稳定导致的摩擦。不过跟 1Password 相比，还是 Dashlane 顺手。

也很意外的，去年也有一位网友通过去年那篇博文中的链接注册了 Dashlane，我的 Dashlane 高级版使用权限也真的因此被延长了。

2021年更新： 和 Todoist 类似，2021年也有人透过我博客文章的邀请链接注册使用 Dashlane，我的 Dashlane 高级版的使用权限也得意延长了数月。

2022年更新： 又是一年过去了，这款密码管理软件依旧是我的手机及桌面端必备。看到 Dashlane 的小细节在一路优化升级，此前手机版UI相关的bug也终于解决了。给自己设了个提醒每个季度备份一次密码，可以导出密码为 dashlane 自由的格式并加密，以防万一。

那么，如果你有兴趣试试，可以通过我的 Dashlane 邀请链接注册，你我都将取得为期6个月的 Dashlane 高级版免费使用权限。

特别推介：Flomo 浮墨笔记

Flomo 官网截图

flomo · 浮墨笔记：免费 web app，支持微信提交笔记。

2020年下半年，收到好友少楠 Plidezus 的邀请体验 Flomo。一路看着 Flomo 从设计稿到简单的雏形再到打通微信渠道功能，迎来用户增长和好口碑的笔记类应用，再次感叹少楠的执行力。因为已经习惯 Bear，我可能不是浮墨笔记的重度用户，但确实有那么些时候，因为某件小事激发了一种感觉，一个想法，在社交平台上想吐个槽，写满了140字却发觉好像发出来于他人也没啥意义，不过是自己的一种释放罢了。我觉得 Flomo 是为这样的时刻存在，记录片刻随心随性的感受，留给自己消化。

2021年，对于一些零星的思绪和阅读时激发灵感的字眼，我会使用 flomo 记录。并且针对特定标签开启了「每日回顾」微信推送功能，让自己每天都能再接受一下荡涤。

2022 更新 ：很开心这款产品在少楠和白光的用心及耐心经营下能够继续独立且茁壮地成长。作为付费用户，继续会不时用它记录笔记，尤其是“教育”和“哲学”相关，Pro版的每日微信回顾能够让那些文字的碎片不时浮现，不被遗忘，是很好的提醒。

如果你有兴趣试试这款笔记应用，可以通过我的邀请链接注册，你将获赠 28 天 PRO 会员，我也将获赠 7 天 PRO 会员。 PRO 会员功能包括每日回顾、随机漫步、API、数据导出等。

一次性付费的 Mac Apps：

只需一次性付费即可长期使用的 Mac Apps，他们大都不是特别常用，但装机的时候还是会保留。

Nota - Markdown 编辑器，可完全免费使用，beta版早期时付费支持购入，用于博客内容写作。

Affinity Designer – 专业图形设计软件：这款产品多年前刚 release 就付费购买了，是 Adobe Photoshop 和 Illustrator 的替代品。今年越发成熟，很好用，主要用它来画数字插画（已支持 M1 原生）。2022年付费了V2 套件以作支持。
Affinity Publisher — 专业桌面出版软件：Adobe Indesign 替代品，主攻印刷排版等。无缝整合Affinity Designer，Affinity Photo，设计简历、海报等图文混排的产品时很好用（已支持 M1 原生）。2022年付费了V2 套件以作支持。
Affinity Photo – 专业图像编辑软件：Adobe Photoshop 的替代品，不过今年很少修图也便很少用（已支持 M1 原生）。2022年付费了V2 套件以作支持。
Balsamiq for Desktop：2020年入的原型工具。十年前它就大名鼎鼎了，不过因为工作场景不是特别需要它便没有尝试。今年刚好需要远程协作，又希望能有便利的方法快速记录自己对产品的想法并与同事分享，使用了30天，发现在简单的线框图和快速想法勾勒方面确实方便，也就付费了（已支持 M1 原生）
Tayasui Sketches：手绘工具，有丰富的画笔、画纸等设定。可惜我的 Wacom 画板有点老，驱动有点问题，加之自己手绘水平不咋地，所以不常用（已支持 M1 原生）
DM1 - The Drum Machine：鼓点节奏创作工具，有丰富的音效，即使是外行也可以快速创造出有趣的节奏。多年前购入的，主要是好玩，有时候自己录视频，也可以用它创造些 beats（少用，但很棒）
VOX Mac Music Player：当初因为它的界面很帅购入，简单的用法就是个音乐播放器。如果注册会员则可以用它收听电台、播放 SoundCloud 音乐或播放 Youtube 音频。平时很少用，但每次装机还是会把它装上。
Icon Slate：可以快速生成各种大小和种格式的图标。一般只用它把图标转为 .ico 格式，平时也很少用，但每次要做 favicon 时总是第一时间想到它。

特别推介: Cron - It’s about time

Cron Calendar界面官网图片

Cron 目前是一款免费的 Mac 日历软件。它的特色包括：

可以整合多个账号下的 Google Calendar，私人日程和工作日程合二为一
可以快速透过它快速添加及管理活动，它能将活动实时同步到 Google，进而手机端的 Google Calendar 也能得到同步 - 它弥补了 Google Calendar 桌面端的多账户整合视图空缺
桌面端有醒目的日程提醒和延时提醒功能，亦能自动识别 zoom 链接快速开启会议等

因为刚好公司也是用 Google 家的，所以我能透过 Cron 看到我的所有日程，并快速对所有会议请求等作出响应。对于某些项目涉及 Outlook calendar 的使用，我会快速将其手动加入到工作日历中，以确保我能及时得到提醒，也方便非工作时间在手机端的 Google Calendar 查看所有日程安排。

目前我有几枚 Cron 邀请码，如果你有兴趣，请透过网站底部的方式与我联系索取。

设计及开发相关免费 Mac Apps

ColorSlurp：取色器。试过很多款取色器 app，最后觉得这款最好用
FontGoggles: 字体预览和比较应用
Contrast: 取色及色彩对比度计算评估工具
PixelShank: （我多年前写的）开源图片像素尺寸标注工具，极简，偶尔用于辅助工作
UTM for Mac：虚拟机应用，也有 iOS 版，备用
Blender：开源的 3D 模型编辑器，待学习

常用的 Chrome extensions 浏览器扩展插件

Google Mail Checker：Gmail 新邮件提醒及快速导航入口
Dashlane：密码管理器
Wappalyzer：查询网页使用的技术
SpacingJS：像在 Sketch App 里一样查看网页元素尺寸及间距
Fonts Ninja：查询及预览网页使用的字体
Clear Cache：一键清除页面缓存

开源装机字体

The League of Moveable Type：高质量开源英文字体，附带桌面版和 web 版
Sarasa Gothic / 更纱黑体：带有完整简体中文、繁体中文、日文、韩文的汉语字库
思源宋体
得意黑
中文开源字体集

英语写作好书推荐：Plain English at Work

Sun, 11 Sep 2022 00:00:00 GMT

It can make a dramatic impact on the readability of your writing. - Edward P. Bailey Jr

为何推荐你阅读此书？

有幸遇到这本由 Edward P. Bailey 于1996年写作的 ”Plain English at Work: A Guide to Business Writing and Speaking“。它可能是近年来对我影响最大的英文写作读物，因为它能帮人在应对工作中的英文写作时更加自信。

特别要指出的是，这本书不仅适用于商务英语写作，它对用户体验设计的文案写作及文字排版也很有启发，例如：

书中提到了 “Executive summary”内容提要的重要性及写作方法，这让人想起了 Design Thinking workshop 中的一项活动 “Elevator Pitch”，也更加深了我对 Elevator Pitch 意义的理解。
书中关于行文结构，句型等的建议方法不仅适用于英文，也适用于中文写作。比如通常使用常见的”主谓宾“结构，避免使用被动句式；通过使用适当的标点符号（分号、破折号等）来强调句中重点；使用列表及适当的标题等来让你的内容结构更加易读等等。
”More About Layout“（关于布局）一章对英文的字体排版等影响内容可读性的关键排版属性做了解释，并给出了经典字体排版的案例及对比效果，帮助读者更容易理解排版的重要性。要知道许多设计师都还未能充分掌握内容排版的基本知识。

这本书内容本身的写法及行文结构就深刻践行了作者本人的各种建议，简洁、易读、重点清晰；印刷版的视觉排版也十分经典易读；虽然只有88页，但书中观点覆盖全面，容易被记忆。最近工作已经开始有意识地使用书中建议的方法写作，心里有谱了许多。书末附上了常见了“官话“用词和对应的”白话“用词列表，不少自己平时也常用到，读完便意识到自己还有大量用词改进空间。

总之，这是一本对商务英语写作及各种语言的日常写作都十分有启示的一本实用手册，强烈推荐阅读。

Why you should read this book?

The book Plain English at Work: A Guide to Business Writing and Speaking is a great plain English writing guides. Not just for English, this book also inspires me for the way of writing for any languages. The “Layout” chapter covers the key typography principles which is a worth-to-read for UX designers.

The invisible shapes: 7 easy-missing web design details

Mon, 25 Jul 2022 00:00:00 GMT

We must make the invisible kingdom visible in our midst.
—John Calvin

The problem

“Hey, the 503 error page looks like this, is it ok?”

As an Experience Designer, I’ve come across this kind of question about error page design many times. Sometimes it was noticed by developers when they were handling call responses. Sometimes it was QA engineers who distinguished such error pages while application testing. There were also times when I realised the error page design missing during desk check review or when I tested an application myself.

In a production environment, it shouldn’t be common for users to encounter service errors. And when such errors occur, it seems engineers are more nervous than designers. Yes, from experience design’s point of view, when a service is down, any web browsers would at least show some default error message to tell what happens, e.g. “503 Service Temporarily Unavailable” (as the image above). However, for normal people who are not IT professionals, this kind of default message may read scary. Users may think they’ve done something wrong and don’t know what they can do next.

I rarely listed the error handling screen design into design roadmaps in my past projects, nor was I conscious about counting it in the next project even if it is a low priority.

“Hey, it doesn’t matter.” “Really?”

Although I’ve never been blamed for not thinking of such designs in the first place, the fact is that this kind of common screen that would affect users’ experience on an application becomes invisible when I planned the work of design.

For me, these kinds of design tasks look like ”invisible shapes“. They commonly exist in almost all products and services we deliver, but as design deliverables, they are easily overlooked by designers.

How to make the “Invisible shapes” visible?

To learn the lessons and grow into a more professional designer, I’d like to put those distinguished “invisible shapes” to the table by creating a checklist. Dive into the impact of each on user experience, exploring examples as well as proper tools for deliverables.

Hope this checklist can inspire designers, developers, testers and any product related team members on high quality product delivery. And welcome anyone who also suffers similar issues to contribute your idea and fulfil the list. May the idea in the checklist shapes more efficient design practices on detail design, and level up our competencies on design planning and deliverable quality for delivery projects.

Make the “invisible shapes” visible

The 7 design objects that deserve your attention

Error page
Favicon and page title naming rules
Leave site confirmation
Cursor styles
Display numerals: font, alignment and formatting
Deal with long characters
Text area resizing

When starting with a new delivery project, you may refer to the checklist above and create tickets for applicable items in the backlog. So that you won’t forget the details and your team can consider all these necessary items in the iteration planning and less last-minute calls.

Let’s deep dive into each design object below.

1. Error page

When working on the web, an error page would appear when a server responds to a browser’s request with error status code. For web designers, error page design is about how to inform users of the error status in a human-readable message and visual clues.

Technically, there are tens of HTTP status code (refers to The list of HTTP Status code on Wikipedia) that a server may respond to a browser’s request and following categories are the two typical error categories:

4xx client error – the request contains bad syntax or cannot be fulfilled

5xx server error – the server failed to fulfil an apparently valid request

From designer’s perspective, to make error types easier for users to understand and take appropriate actions, please consider at least two typical types of error screens as listed below:

Page not found. Show this screen when a page users try to access doesn’t exist. This may be caused when users input wrong urls or do not have access permissions. Since users have nothing to do with this page, a common alternative action for users is to guide them “Go to home page”.
Something went wrong. This is for the other technical errors such as 503 server error. This kind of error may impact site wide. Developers would be alerted once this kind of error happens as normal practices and they would try to fix the problem as soon as possible. If errors are fixed, people can refresh the page to get a work site; if issues are still pending, people have to wait until errors are mitigated or fixed.

Example

Error states: 404 and 503 pages by Yuliia Maslienikova on Dribbble

Tips for delivery

Error pages can be customised via the front-end so that you can design them in UI design tools.
Use appropriate visual graphics to help users relax instead of letting them feel they did something wrong.
Make copywriting clear and easier to understand especially when users are non-IT professionals.
Learn the technical mechanisms from engineers. They may help you to understand the context better, so you can balance user needs and technical facts smartly.

2. Favicon and page title in browser tabs

When using a browser-based web service, the first thing that comes to people’s eyes is the icon and page title displayed on the browser tab.

However, as designers, if we are used to creating UI frames for the main content design in no-code UI design tools like figma or sketch, we usually forget about these small pieces of elements that also affect user experience.

What may happen if page title naming rules are not specified?

⚠️ Not-to-follow example 1: One site name appears across all different pages If different pages under the same site opened at the same time, it would be difficult for people to identify page content via the page title in browser tabs. People need to click through all the tabs and remember the order before they can tell the content.

⚠️ Not-to-follow example 2: No favicon Favicon is short for “favourite icon”. It is a file containing one or more small icons (learn more in Wikipedia). Once included, the icon would appear in the web browser address bar, browser tab, bookmarks, etc.

Favicon usually indicates a brand. If people already have impressions on a brand, a favicon with branding elements can help people quickly identify the brand site if they open multiple browser tabs for different websites. It is not really a problem if no favicon is specified for a website, but if there is an appropriate icon applied, it would allow people to locate a website tab more quickly.

The above not-to-follow situations may happen if designers didn’t specify page title naming rules or provide a favicon for developers to implement.

Example

Thoughtworks official website is a good example on how titles on browser tabs should be named:

Tips for delivery

Favicon design is still a graphical work that designers can ship via UI design tools like figma or sketch. Just please add a ticket in the backlog to make sure favicon design and implementation is under review.
Page naming rule is more about UX copywriting. Figma or sketch may not be a good channel for delivery. A sitemap or an information architecture in mind map may help designers explore the site structure for proper naming rules. You may include a table list with the naming structures and examples in a task ticket for developers references.Below is a page naming rules example table I created based on the Thoughtworks website.

Page naming rule delivery example bases on Thoughtworks official website in 2022

3. Leave site confirmation

When designing user interfaces for forms, it is common to define form validation styles when mandatory fields are not filled or invalid values exist. However, what if a user closes browser tabs when there are changes on the page not yet saved? Users may lose all the changes on the form and need to start filling in the form again. It feels like shutting down a computer without saving a Word document and losing the content you’ve worked so hard on.

More than designing a change not saved alert within a web application frame, we need a browser-level alert to remind people that they are leaving a page with changes not saved when the exit behaviour is triggered on browser level.

Example

In Gmail, when composing an email and closing browser tab immediately, a “Leave site?” modal would pop up and ask people to confirm leave and inform them that “Changes that you made may not be saved”.

“Leave site” confirmation in Google Chrome (version 103)

The Atlassian Confluence page editing view would also show this browser-level “Leave site” confirmation when users close a page without saving it.

Although applications such as Gmail and Confluence already provide auto save functions, the apps still do “Leave site” confirmation as a double insurance to avoid creating trouble for users.

Tips for delivery

“Leave site” confirmation is a browser based dialog. It doesn’t need designers to design a branded user interface as it is non-customisable. You may attach the “Leave site” screenshot in the design file for handoff with developers. More importantly, add this case as an acceptance criteria (AC) in stories for forms.

4.Cursor styles

When people use a web service on a desktop, cursor is everywhere. In general web browsing experience, people would use a mouse to scroll, locate and interact with elements on a page with their eyes following the cursors. Thus, the cursor becomes a tiny but efficient communication medium between user interface and users.

When designing user interfaces to interactive elements, instead of only thinking about how interactive elements such as links, buttons and form fields should look like under different states (default, hover, focused, clicked, etc.), we should consider cursor styles in and maximise the use of available cursor styles.

Some cursor styles could be automatically applied in web browsers when proper HTML tags are applied. For example, when a standard <a> tag is applied for a link, when mouse over, the cursor will auto load the pointer style which doesn’t require additional CSS property definition. And when mouse over plain texts, the cursor becomes text styles.

However, most cursor styles in the standard CSS cursor dictionary won’t be loaded automatically and need to be specified when implementation. For example, a disabled button would still show with default cursor style when hovering. It only loads the not-allowed cursor styles when cursor: not-allowed; is specified.

Example

On the Cathy Pacific website flight search, a “not-allowed” cursor would appear when mouse hovering the “Search flights” button when the search form hasn’t been completed.

In MDN web docs - CSS - cursor, you can see the demo of the cursor by different CSS cursor attributes. There is also a well organised syntax which includes categories, keywords, examples and description per cursor style.

Tips for delivery

Keep cursor styles in mind when designing interactive elements for desktop applications.
In design files, add special cursor styles definition together with interactive elements within a scenario. You may reuse cursor symbols from existing design files in figma or sketch.
In story tickets, add UI specification on cursor styles for the special cursor cases.
Testing. Make sure cursors are loaded properly for all states.

5. Display numerals: font, alignment and punctuation

When designing numbers for user interface display, it looks straightforward to design numbers as how we design for the other texts on a website. Generally yes, numbers are part of texts that could be nothing special if numbers are in low priority for information communication.

However, under certain circumstances such as displaying a stock list, when numbers deliver information such as amount, portfolio number, quantity, rating in one screen, it could impact on the readability. If appropriate fonts are selected with correct alignment and punctuation applied, the numbers in a tabular could be easier for the user to digest the information from the numbers.

For design objects that are “number oriented”, designers should take serious of the design of numbers and ask questions to check if the numbers are designed in appropriate manner from the following aspects:

5.1 Number font

Make sure the proper font has been selected for numerals display. Understand the attributes behind the differences in display numerals:

Lining v.s. old style

Spacing: proportional v.s tabular

The article ”Type talk: Know Your Figures” is a good read to learn the subtle differences in the way numbers can be displayed.

Tips for delivery

Check if there are specifications for numeral displays in existing brand guidelines or design systems for directly use
In figma, you may find a number styles configuration panel for selected text under the “Type settings”.

To quickly get some ideas on the fonts that could be good for numeral display, the article ”40 Best number fonts: free and paid” by JUSTINMIND could be a start point.

5.2 Number alignment

Question: Is it a standard “to left justify text and right justify numeric values. ”

Answer: “Yes English text is usually left-aligned. Numbers are normally aligned so that the various places (unit, tens, etc.) are in columns. If the numbers are integers, this just means right-aligning the numbers. If they have decimal fractions, then the decimal places should be aligned, with the units digits all in a vertical line.” — A Q&A on User Experience Stack Exchange

When designing numbers displayed in tabular, we’d better follow the above ‘standard” to make numbers better aligned. Good number alignment make data value easier to read as well as to compare or to calculate especially in a tabular.

Example

Bloomberg has all the numeric data columns aligned to right which make the stock list data easier to be compared by market.

Tips for delivery

Financial services usually have high demand on number display. You may refer to existing financial apps for number alignment design ideas.

5.3 Number formatting

Always ask what numbers are used for and check if special formats are needed. A typical example is the display for amount, price or quantity that thousand separators and decimal places could usually be needed to make numbers easier to distinguish. Another example could be the display of date and time.

One of the key things that decide what format to use for numbers is users’ habits or the language standard. It would be good to check if the users are from various language backgrounds and need localisation for value or date time display. There may also be an existing editorial style guide as part of the brand guidelines which can guide you what format to use for consistency.

Tips for delivery

For number fonts, you should directly use right fonts in design files. Sometimes the number fonts look similar to text fonts so that it’d better highlight font names in the file as well as in the story ticket as UI notes
For numbers alignment, defining it in a UI mock-up should be enough. Alignment is a visual property and should be straightforward for recognition.
For number formatting, more than reflecting the design in UI mock-up, you’d better specify the format details in story ticket to make sure engineers are aware of it and estimate the efforts in advance.

6. Deal with long characters

When adding in dummy text for UI design, most of the time we only fill in the content that matches the container size perfectly. However, when it comes to the implementation stage, developers have to come to us and ask how to deal with cases when characters are too long. Then we may rush to deliver a truncate case and count the maximum characters to be displayed.

We should avoid last-minute design for long characters and consider such cases ahead.

Handling long characters is not difficult but requires dedication. There are following common practices:

Truncate characters. Set maximum character numbers and replace exceed characters with three dots ”…” or set the limit to container width and maximum numbers of lines. In such case, designers should also define how to allow people to read complete content. Mouse hover truncated text and show content could be one way; put a “more” link and allow users to expand a section to read more; put a link to redirect users to a new page to read full content would be another option.
Line wrap. If there is enough space in vertical direction and there is no visual limitation on horizontal alignment, you may choose to wrap line for long characters.

Example Yahoo News truncates news titles and descriptions that exceed two lines of the container width.

Tips for delivery

In the design file, adding examples of long characters cases would be straightforward. It’d better specify these details in story tickets as UI notes can prevent developers or you from forgetting these details.

7. Text area resizing

When designing a text area for people to enter long texts, we’d better consider whether or not a text area should be resized. However these tiny details may easily be forgotten if businesses or users do not mention it in advance and our designers may simply define a fixed size for the text area in the design file and do the work.

“I’d like to write down all relevant information via the comment box for my own notes…I want a big box!” - A voice from a user I interviewed.

Some people like to jot things down in as much detail as possible, while others prefer to keep content short. Some business scenarios want to provide an open space for people to share ideas, while others need to limit the length of content to regulate output. By considering the use of text areas and the need for resizability, we will provide a more adaptive writing experience for people to get their work done.

There could be 5 different practices for text area resizing interaction, we’d better make it clear to developers on which practice we want to apply for each text area, this may help developers better estimate implementation efforts.

Non-resizable
Automatically resizable
Manually resizable
Automatically and manually resizable
Specific size options (e.g. fullscreen)

Example

When a text area is achieved by using the HTML tag <textarea> , a resize grabber would show in the bottom right corner by default. This grabber allows people to manually resize the text area in specified directions. It can be hidden or be customised with alternative styles.

Screenshot from MDN HTML Demo for textarea

The resize grabber styles can be customised in CSS3 as the example below:

Example from stack overflow

Tips for delivery

Write down how you want text area to be resized into acceptance criteria (AC)
This resizable feature may need more efforts if the interaction would be achieved in automatic ways or with special visual styles, discuss it with developers and the team as early as possible for better planning

The above are the seven “Invisible Shapes” I experienced and would like to wrap up and share with you for references. Based on different experiences, you may think of other design objects that should be considered but are easily overlooked. Feel free to add your thoughts to help expand this list.

Reference resources

The list of HTTP Status code
Error states: 404 and 503 pages by Yuliia Maslienikova on Dribbble
MDN web docs - CSS - cursor
Favicon - Wikipedia
Cathay Pacific
Type talk: Know your figures by Ilene Strizver on Creative Pro
40 Best number fonts: free and paid” by Rebeka Costa on JUSTINMIND
Is there a standard “to left justify text and right justify numeric values.” on User Experience Stack Exchange
Bloomberg - Markets - Stocks
MDN HTML Demo for textarea
Can I style the resize grabber of textarea? on stack overflow

Tools used for creating this article

Writing: Nota - a markdown writing app which helps me focus on writing
Low fidelity figures: Balsamiq
Typography figures: Figma
Version control: Git

新生 · 在阳光下跳舞

Wed, 06 Apr 2022 00:00:00 GMT

2022年4月5日公园即景，摄于香港

2022年4月5日，又逢一年清明假期。疫情之下，香港拜祭的场馆继续关闭。这一天新增的确诊个案有三千多宗，第五波疫情之下，我在过去一个月里出门的次数真是只手可计。“清明时节雨纷纷”，然而，今年的清明并没有雨纷纷的天气，反倒是春光明媚。实在不忍心错过这美丽的春光，于是早饭后全家出动，“全副武装”去公园里透透气。

我们去的公园有一大片草坪，可供大家踩踏玩耍。2021年秋季，香港的疫情还不这么严重的时候，只要天气好，我们都会尽量带宝宝一起去沐浴一阵阳光。

大约是上午十点，我们刚进公园便望见草坪上有一位光着头身材修长的男士，身穿背心和花色短裤在草坪中间跳舞。在他面前不远处有两个小学年纪的男孩，在他的指导下一起舞动。经过时仔细一看，那舞步像是拉丁，跳得很专业的样子。

“太疯狂了，他是正常人吗？”，这是我的第一反应，“那两个小男孩跟他是什么关系，竟然在跟他交流”。

直到我们准备离开时，那位舞者和两个小男孩也准备离开，这时我才留意到原来舞者把他的卫衣长裤脱在了一旁，而两个小男孩也跟着他准备离开。原来他们是父子。看起来是想最大程度地沐浴这美好的阳光与空气，让阳光下的皮肤积累维生素D，所以才除去长袖长裤，在阳光下跳舞。

“在阳光下跳舞”曾是一位好友的QQ名，自己从未对在阳光下跳舞有过印象深刻的画面，如今终于补全了。阳光、空气、草地、拉丁舞和亲子时光，这是多么美好的生活。

再设计 · 邮件订阅弹窗

Sun, 20 Mar 2022 00:00:00 GMT

财新网每日新闻订阅弹窗截图

看到财新网的这个每日新闻订阅弹窗时，发觉这个‘查看样本’的设计很有意思。深入去看，也许这个弹窗这么重设计一下可更显其品牌的专业性，也更能够让人们在这一步的使用体验更加流畅及感受美好。

第一眼感受

在桌面端浏览器打开财新网，竟弹出了「订阅财新每日新闻」弹窗。在这个 newsletter 邮件订阅”无比盛行“的年代，倒是难得看到中国的新闻媒体采用此传播手段。不过从HTML代码的class名称“overseas-email“可以看出，这个邮件订阅仅针对海外用户。

虽然订阅了不少newsletter，也体验过无数newsletter订阅界面，不过看到这个弹窗设计的时候还是眼前一亮。虽然财新网的web版界面设计并不精致，定义的中文字体仅有“微软雅黑”，以至于其在Mac的浏览器中渲染出的是浏览器默认的带衬线（serif）字形。

不过前端应用的不完美并不妨碍用户清晰地获取这个弹窗所要传递的信息。尤其是标题右侧的这个“查看样本”链接是一道重要的说服用户订阅的手段。当然“样本”一词读起来并不顺眼，改作“范本”也许更加准确？

将“查看样本”放在了弹窗标题的右侧，倒是大大提高了这个样本的重要性。不过也许我设计，会考虑将它放在描述文字之后，因为内容介绍和何时收到对我来说更为重要，若读了这些内容之后说服力还是不够，查看邮件示例将会是很好的补充。

这个弹窗的背景用了邮件图表图片，不过第一眼我未能认出，因为弹窗上的文字阻挡了用户对背景图案的识别。所以使用这个邮件图片和使用纯白背景能达到的效果应该无异。

再设计

对这个弹窗界面做了简单的界面重构，对比如下图：

主要变化包括：

弹窗及按钮使用直角边框，与财新品牌视觉风格保持一致～财新 logo 采用了硬朗的直角字体风格
将介绍文案上移到邮箱输入框之前，以符合自上而下的阅读习惯。用户应先知晓订阅邮件的内容，才决定是否登记邮箱
将“查看样本”重命名为“阅读邮件范本”，并移至介绍文案下方，作为对文案的补充，进一步激发读者的订阅兴趣
使用“你的邮箱地址”作为邮箱输入框标签。“你”比“您”带出更加平等、亲近的感觉，“您”增加了敬意，也增加了一些距离感。
使用“暂不订阅”取代“关闭弹窗”。“弹窗”是产品及开发团队内部对这个组件的习惯性叫法，对于不知道这个组件叫什么的用户，直接请他们选择“暂不订阅”即可。同时增加了一个关闭图表按钮，以更符合大众对此类弹窗的使用习惯。
色彩：按钮使用财新logo品牌主色，以保持品牌感；“阅读邮件范本”链接基于品牌主色调亮，以便用户将其从黑色的文案段落中识别出来；“暂不订阅”采用了
去除了背景的邮件图形，因为它没有用

人机界面设计不是一次到位的艺术，它需要在一次又一次的尝试中探索当前最合适的选项。作为界面设计师，我们应该努力让每一个元素的存在都尤其意义。（👈 金句练习 😂）—— Millie Lin

2021 我付费的互联网产品

Sun, 02 Jan 2022 00:00:00 GMT

Photo by Kelly Sikkema on Unsplash

2019年及2020年都对”我付费的互联网产品”进行了记录，没想到都有一定的关注度，也有数人透过我的邀请连接加入了我最常用的部分产品的使用行列。2022年伊始，照例记录一下过去一年我的数字化产品使用情况。

这篇文章是在2020年版的基础上进行的更新，关键变化包括我放弃了 Bear 熊掌记的订阅与使用，并在常用的 MacOS 桌面端应用及常用字体资源之外，新增常用 Chrome 浏览器插件的记录、壁纸及相关App等，希望对喜欢折腾产品的你有所帮助。

付费订阅的应用

大部分在「2020 我付费的互联网产品」一文中记录的产品到了2021也还在继续使用。

Todoist：任务清单， HK$288/年。使用频率：一天多次
Dashlane：密码管理，HK$183/年。使用频率：一天多次
Pycharm：IDE 集成开发环境，US$53/年，参加了2019年买一年送一年的活动，预计2022年中到期。 2020-2021年的年费摊下来大约HK$205/年。使用频率：一周多次
Spotify：音乐+播客平台，家庭版HK$98/月（涨价了，去年HK$88/月），人均约17元/月。使用频率：一天多次
财新网：资讯媒体，财新通计划 CNY¥498/年（2022年初将全面涨价至600多元）。使用频率：一周多次
Google One(100GB)：文件存储， HK$150/年。使用频率：一天多次。设置了手机照片自动上传功能，与家人分享照片十分方便。

下面把特别常用的几款拎出来聊聊：

最爱： Todoist 任务清单

Todoist 官网首页截图

琐碎的事情，比如取快递、买菜
严肃的事情，比如和客户开会
每日重复的事情，比如健身、工作日的 stand-up meeting
每月重复的事情，比如信用卡还款
每年重复的事情，比如软件续费等等

“原来真的有人读”

2020年，Todoist 推出的主要新功能是看板视图，就像 Trello 和 Jira 那样，你可以用 Kanban 的方法管理任务，比较适合小团队。

2021年更新：

无论是工作还是生活，Todoist 依然是我使用频率最高的 App，堪称我的第二大脑，负责记忆和提醒工作、生活的方方面面。2021年，我的 Todoist 上多了一个项目，叫做 Motherhood，它确保我每天都不错过照料宝宝的大小事，以减少记忆问题而引发的焦虑。

2021年依然有人透过我博文中的邀请链接注册并使用 Todoist，我也有幸获得了额外几个月的高级版使用权。互联网的力量真的神奇。

所以，如果你有兴趣试试，可以通过我的 Todoist 邀请链接注册，你我都将取得为期2个月的 Todoist 高级版免费使用权限。

还不错：Dashlane 密码管理工具

Dashlane官网首页截图

注1：Hotspot Shields iOS 版未在中国版 App Store 上架。
注2：Hotspot Shields 与2021年中被数字安全公司 Aura 收购

也很意外的，去年也有一位网友通过去年那篇博文中的链接注册了 Dashlane，我的 Dashlane 高级版使用权限也真的因此被延长了。

2021年更新： 和 Todoist 类似，2021年也有人透过我博客文章的邀请链接注册使用 Dashlane，我的 Dashlane 高级版的使用权限也得意延长了数月。

那么，如果你有兴趣试试，可以通过我的 Dashlane 邀请链接注册，你我都将取得为期6个月的 Dashlane 高级版免费使用权限。

特别推介：Flomo 浮墨笔记

Flomo 官网截图

flomo · 浮墨笔记：免费 web app，支持微信提交笔记。

另外如果你混迹 IT 界，也推荐你关注少楠主持的产品沉思录 · Product Thinking ～沉甸甸的积累

一次性付费的 Mac Apps：

只需一次性付费即可长期使用的 Mac Apps，他们大都不是特别常用，但装机的时候还是会保留。

Nota - Markdown 编辑器，可完全免费使用，beta版早期时付费支持购入，用于博客内容写作。

Affinity Designer – 专业图形设计软件：这款产品多年前刚 release 就付费购买了，是 Adobe Photoshop 和 Illustrator 的替代品。今年越发成熟，很好用，主要用它来画数字插画（已支持 M1 原生）
Affinity Publisher — 专业桌面出版软件：Adobe Indesign 替代品，主攻印刷排版等。无缝整合Affinity Designer，Affinity Photo，设计简历、海报等图文混排的产品时很好用（已支持 M1 原生）
Affinity Photo – 专业图像编辑软件：Adobe Photoshop 的替代品，不过今年很少修图也便很少用（已支持 M1 原生）
Balsamiq for Desktop：2020年入的原型工具。十年前它就大名鼎鼎了，不过因为工作场景不是特别需要它便没有尝试。今年刚好需要远程协作，又希望能有便利的方法快速记录自己对产品的想法并与同事分享，使用了30天，发现在简单的线框图和快速想法勾勒方面确实方便，也就付费了（已支持 M1 原生）
Tayasui Sketches：手绘工具，有丰富的画笔、画纸等设定。可惜我的 Wacom 画板有点老，驱动有点问题，加之自己手绘水平不咋地，所以不常用（已支持 M1 原生）
DM1 - The Drum Machine：鼓点节奏创作工具，有丰富的音效，即使是外行也可以快速创造出有趣的节奏。多年前购入的，主要是好玩，有时候自己录视频，也可以用它创造些 beats（少用，但很棒）
VOX Mac Music Player：当初因为它的界面很帅购入，简单的用法就是个音乐播放器。如果注册会员则可以用它收听电台、播放 SoundCloud 音乐或播放 Youtube 音频。平时很少用，但每次装机还是会把它装上。
Icon Slate：可以快速生成各种大小和种格式的图标。一般只用它把图标转为 .ico 格式，平时也很少用，但每次要做 favicon 时总是第一时间想到它。

特别推介: Nota Markdown 编辑器

Nota 编辑器界面官方截图

Nota 是我于2021年新购入的一款桌面端 markdown 编辑器，可完全免费使用，因为用起来很舒服也很顺手，亦欣赏两位独立开发者的贡献，故在beta版早起以29刀购入永久license以做支持。

主要用于配合 pycharm 进行博客文章写作。特色是具备像 IDE 一样的快捷键和功能搜索，可实时预览 markdown 渲染，自动保存，亦可隐藏导航，进入专注模式。

该应用由两名保加利亚工程师设计和开发。他们曾于2015年推出过另一款 markdown 编辑器 Caret，Nota 是2019年开始全面重写的新应用。

设计及开发相关免费 Mac Apps

ColorSlurp：取色器。试过很多款取色器 app，最后觉得这款最好用
FontGoggles: 字体预览和比较应用
Contrast: 取色及色彩对比度计算评估工具
PixelShank: （我多年前写的）开源图片像素尺寸标注工具，极简，偶尔用于辅助工作
UTM for Mac：虚拟机应用，也有 iOS 版，备用
Blender：开源的 3D 模型编辑器，待学习

常用的 Chrome extensions 浏览器扩展插件

Google Mail Checker：Gmail 新邮件提醒及快速导航入口
Dashlane：密码管理器
Wappalyzer：查询网页使用的技术
SpacingJS：像在 Sketch App 里一样查看网页元素尺寸及间距
Fonts Ninja：查询及预览网页使用的字体
Clear Cache：一键清除页面缓存

开源装机字体

The League of Moveable Type：高质量开源英文字体，附带桌面版和 web 版
Sarasa Gothic / 更纱黑体：带有完整简体中文、繁体中文、日文、韩文的汉语字库
思源宋体
中文开源字体集

与我一起跨年的桌面壁纸

Photo by Pawel Czerwinski on Unsplash

2021 放弃使用的产品

Bear 熊掌记

「Bear 熊掌记」固然在功能上，例如跨平台同步、标签管理、markdown 支持、无缝粘贴图片、导入导出笔记等关键功能上有其优势，视觉及交互设计也颇有品质，但其每月10元提供的服务并非无可取代。

因为功能并非不可取代，且同样是通过 iCloud 进行保存，于是我尝试整合所有 Bear 的笔记至 Notes。通过将 Bear的所有笔记批量导出为 .rtf 格式并顺利分类导入至 Apple 自带的 Notes 应用后，我停止了对 Bear 的订阅及使用。

2021年，Apple 升级了 Notes 应用，新增了与 Bear 类似的 Tags 标签管理功能，加之 Notes 作为 MacOS 和 iOS 的 Native 应用，表现十分顺畅，。虽然不支持 Markdown 格式的直接录入，但其自带的基本样式也完全满足日常各类笔记的记录。

是的，「Notes」也够用了。

附1：被他的作品打动

Josh W Comeau 个人网站首页截图

在2020年的最后一天，有幸拜访了Gatsby.js的前端工程师 Josh W Comeau 的个人网站，被其网站的设计和前端应用深深打动。Josh 大概会是接下来一段时间我最喜爱的设计师，尽管他的title是前端工程师。

2021年，Josh 终于推出了充满创意又高质量的 CSS for Dev 付费教程，并顺带发布了可免费使用的 Shadow Palette Generator （CSS 阴影效果CSS生成器）。是的，Josh 依然是2021年度我最喜爱的设计师/开发者。

「抢街」：街道设计与数字产品体验设计之思

Sat, 25 Dec 2021 00:00:00 GMT

「抢街：大城市的重生之路」英文及中文版图书封面

街道是一个城市社会、政治与商业的动脉。 ——「抢街」引言：新街道准则

最近读了纽约市前交通部长珍妮特·桑迪可汗（Janette Sadik-Khan）和赛斯·所罗门诺（Seth Solomonow）共同写作的「抢街：大城市的重生之路」（STREETFIGHT: HANDBOOK FOR AN URBAN REVOLUTION），书中分享了他们参与纽约市交通及街道改造项目的经历和感悟，发现交通规划设计与数字产品的体验设计虽说在交付物上颇不同，但在发现问题、解决问题、服务对象研究方法及商业策略视角等层面又颇为相同，故记录一二。

交通规划师也是体验设计师

「交通规划师常常忽略一条古老而基本的交通法则：所建即所得。修建更多的车道只能产生更多的车流。」 ——「抢街」第四章：如何阅读街道

如今提到「用户体验设计师」，第一反应往往是数字产品的设计师。若是传统的设计行业，可以想到的设计师通常是图形设计师（Graphics Desginer）、工业设计师（Industry Designer）或建筑设计师（Architect Designer）。然而，在读了「抢街」之后，再一次拓宽了我对体验设计范围的认知思路，即城市规划设计，细化到交通规划、道路设计都是一种体验设计。

难度更大的交通规划？

相比数字产品体验设计影响的对象是数字设备的使用者，街道设计者要面对的是城市居民，群体更为广泛。数字化产品的实现有时候只需要一个人、一个想法、一台计算机和一些编程能力，出现了问题 bug 可以快速一键下线，随时都可以推倒重写。但交通规划设计不可能这么轻松，一个人的力量不可能改变街道，一个想法的落实受限于诸多不确定因素，包括民众是否支持、政府是否推动，耗时能否接受、拨款能否通过等等。

因而，作为街道变更项目的关键决策者，图书的作者——前纽约市交通部长珍妮特·萨迪-汗需要有勇有谋，顶着巨大的压力作出理性决策，角力各种角色，让改变发生，着实让人佩服。虽然数字化产品的实现往往也免不了会遇到自上而下的阻力、用户的反馈压力、人员与经费的限制等等，但相比「抢街」一书中提到的几个改变街道项目，数字化产品的改变成本和技术难度似乎要低许多。

共通之处

不过，数字化产品的体验设计和街道的体验设计还是有一些共通之处。

比如二者都存在 「用户」，且用户都可以由不同的维度进行划分。「抢街」一书按出行方式进行划分，将街道使用者划分为 「司机」、「行人」、「骑行者」 三大类群体，根据不同类型用户的街道使用需求对街道重设计案例中的改变缘由做了一一拆解。

街道设计项目立项前，相关的团队研究人员会收集交通情况的数据，例如点到点的平均用时，行车速度、交通意外数量等数据分析判断街道改变的必要性。

设计可以从客观上改变街道，以预防或减少驾驶危险，并且从保护行人的角度出发，改变街道的力量博弈平衡点，使任何人犯下的错误都不足以致命。 ——「抢街」第十章：聚少成多的安全

一旦政府确认立项，项目团队会进一步对就各类型街道使用者使用访谈等形式进行调研，并通过了解街道周边商店、建筑物用途等 「上下文」，分析街道存在的问题以及各类用户的需求和痛点，进而有针对性地设计相关解决方案。

在大多数城市，我们并非在设计一个新的道路，而是揭示出道路中已有的信息 ——「抢街」第五章：足迹探寻

交通及街道设计师还需要在时间、金钱等资源有限的情况下，尽可能平衡地解决各类用户群体的需求问题，提出可持续发展的街道变革方案。和数字产品界面及交互设计类似，街道设计在功能性之余，也需要兼顾美观和艺术性，并确保具备无障碍设施以方便残疾人士使用。

全面的、具有战略意义的公共工程可以帮助重建社会公平与尊严。 ——「抢街」第七章：他山之石

街道设计付诸实施并重新开放给公众使用后，项目团队也会需要通过监测有效的数据，以及收集和道路使用者反馈等来判断项目是否「成功」以及是否有需要进一步调整的必要。

如何才能做出一个令人信服的有关公共领域改革的案例。对于持续发展的街道，除了应该优先考量其安全性和通行性，经济因素是能否推动巨大变革的最重要的论据。 ——「抢街」第十二章：测量街道

街道重设计也很像产品重设计，乍看起来改变的是界面/街道布局（UI）和交互/使用方式，来带给使用者更优越的使用体验，而当街道存在店面或是产品存在商业模式时，对的设计同样也能带来商业效益的提升。「抢街」中的多组案例都成功验证了增加步行区域和行人广场，减少车道数量能为沿街商店带来大大高于城市平均值的零售额的增长，其中纽约时代广场步行街就是一个典型的案例。

步行数量是繁荣当地旅游业和零售经济的关键。 ——「抢街」第七章：他山之石

结语

喜欢这本「抢街」，它不仅带来了体验设计专业方向上的思考的共鸣，鼓励设计师站在社会责任、城市繁荣等影响力更广泛的层面去思考设计，更鼓励每一个人要勇敢面对工作中的种种未知与挑战。

如果不去努力，城市永远不可能使街道焕然一新。不去尝试是缺乏勇气的表现，最终会一事无成，一败涂地。正如父亲教导我的那样，如果你没有时刻努力尝试新事物，那么你就是没有在真正努力。 ——「抢街」第六章：为时代广场而战

去豆瓣了解更多图书信息

新生 · 孕期和婴儿照护手机应用推介

Sun, 21 Nov 2021 00:00:00 GMT

推介两款手机应用，分别是用于孕期参考的「Hello Belly」和方便婴儿照护的手机应用「Baby Tracker」。这两款应用我都是在第一时间使用，并且都付了费。

Hello Belly

「Hello Belly」官方网站界面截图

最初之所以选择「Hello Belly」是因为它可爱亲切的插画风格界面、 3D 胎儿模型及饮食健康、瑜伽运动以及孕期状态提示等功能。「Hello Belly」是订阅制，年费为 148 港币。因为其定位仅限于孕期，所以一次付费整个孕期都可以使用。

「Hello Belly」官方网站界面截图 - 3D 胎儿模型界面

首次登录「Hello Belly」后需要设置预产期，允许推送提示消息之后这个应用就会随着孕期的进展推送消息，告知每个阶段胎儿、孕妇的生理会发生的变化和注意事项，当中也有给准爸爸的温馨提醒。「Hello Belly」亦附有孕期饮食辞典，可以查询不同类型食物的风险指南。

这个应用的一大特色是它不会将孕期所有阶段的信息一次性开放供用户浏览，而是基于时间逐步解锁对应阶段的信息，并于香港时间每日中午的十二点推送更新。应用内的3D胎儿模型设计十分精致，如艺术品一般，加上应用的分期逐步解锁机制，令充满好奇心的准妈妈不能一次看全胎儿的所有发展样貌，也便促使用户时不时想打开应用查询，提高了应用的用户活跃度。

「Hello Belly」的默认界面和内容语言是英文，可以通过设置将内容文字改为中文。不过其中的饮食指南只有英文，主要是基于西式的习惯，会有烟熏肉、芝士等食物，不过它已经涵盖了主要的食物种类，作为参考还是很有帮助的。

开发「Hello Belly」的公司是 HelloBaby, Inc. 这家公司的创始人是两名男性设计师，他们曾经为「Huggies 好奇」和「Pampers 帮宝适」等婴儿用品品牌作设计，后因其家庭需要，发现类似应用的缺失，因而陆续设计开发了四款育儿相关的手机应用。除了「Hello Belly」，他们还开发了用于宝宝成长记录的「Baby Story」，0到3岁的育儿指南「Baby Tips」以及宝宝成长记录的相机类应用「Baby Snap」。

「Hello Belly」同时支持 iOS 和 Android 系统，你可以访问应用的官方网站，了解更多及下载应用。

Baby Tracker

「Baby Tracker」是一款婴儿活动记录应用，主要用于记录宝宝的吃奶、换尿片及诸如睡眠、成长里程碑等其他活动。

「Baby Tracker」在香港的苹果应用商店里好评如潮，且下载数量特别多。刚遇到这款应用的时候我还不太理解为什么，因为应用截图里看到的界面视觉风格十分传统。但因为找不到其他有类似功能，足够专注的应用，于是也便下载来一探究竟。

没想到用了几天之后，不得不赞叹这款应用的功能设计之到位.虽然界面看起来简简单单，但存在的每个点都尤其道理，十分切中育儿生活中的真实需求。比如母乳喂养，你可以选择记录左侧还是右侧开始喂奶，并能够通过支持开始、暂停、完成功能的计时器合理计算哺乳时间；如果时间记录错误，也可以轻松修改或调整。这个应用没有教程，不过基于实际的哺乳场景，我竟很快明白了那些功能的用处。应用的设置里还可以自定义展示按钮，例如宝宝采取的是全母乳喂养，你就可以将泵奶后喂养（Expressed）、奶粉喂养等活动按钮隐藏。

初初带宝宝去作健康检查的时候，护士会问到宝宝过去24小时的母乳喂养次数和大小便次数等等，每次我都是打开这个应用数数，准确率很高。这个应用也会自动计算一周，一个月等阶段平均每日的喂奶次数，最多次和最少次，亦会生成图表辅助查看宝宝的活动轨迹和模式。

「Baby Tracker」所有功能均可免费使用，十分良心，付费48港币后可去除底栏广告。它亦支持可以注册帐号让宝宝的信息在不同设备上同步，方便家人协同照护宝宝。当其中一台设备更新了资料，其他设备就会收到提示。此应用同时支持 iPhone、iPad 上的 iOS 系统及安卓系统。iOS 上可将数据备份至 iCloud 及导出数据至 CSV 或其特有数据包格式。

这个应用的界面交互和视觉还是有可优化之处的，但由于其功能足够到位且足够方便使用，它还是收获了满满的口碑。这款应用也支持多语言，不过多语言的设置需要通过系统里的应用设置，而非应用内的偏好设置。

如果你家也有个初生的小宝宝，「Baby Tracker」一定可以帮到你。

去「Baby Tracker」的官网了解更多或下载应用

新生 · 香港公营医疗流程管理之思

Fri, 19 Nov 2021 00:00:00 GMT

Photo by Thor Alvis on Unsplash

过去这一年里，恰好有机会深度地体验了一下香港公营医疗机构在产前检查、生产、产后护理及儿童健康管理的一整套流程。通过对这一整套流程有意识的观察，及和自己切身体验或听说来的内地公立医疗机构的产科流程比较，可以明显感觉到香港公营医疗管理机构，即「香港医管局」，就产科的这一套流程是就香港本地情况做过专门研究和设计的。这套流程既复杂又细致，流程的管理者努力地在医疗资源与及就诊者体验之间做着平衡。

在数字化管理方面，公营医院和健康院等用上了数字化管理系统管理病人资料。而于此同时，在流程的某些环节，这些机构依然采用传统纸质与数字化管理相结合的方式对病人的信息进行传递，尚未形成完全的数字化流程闭环。

下面这些环节可以看到医生或护士依然用纸笔作记录，及使用「牌板」（港式粤语说法，即资料夹/文件夹）在不同人员间进行传递病人资料：

在医院住院病房，

医生巡床检查后即时将病人最新情况写在打印出来的牌板资料页里

护士一日多次给病人逐个测量血压心率后，会先将测量结果记录在自己的笔记本上，待回到护士站后再逐一记录到牌板或录入至数字化管理系统中

在母婴健康院或医院，

每次进行产前检查时，负责测量体重、血压、心率、尿糖及尿蛋白情况的观察室护士会将检测结果手写在病人的筹号纸上或牌板的病历纸上；下一位负责与病人见面了解具体情况的护士会将相关体征数字录入数字化管理系统
每次进行新生儿健康检查时，负责测量体重身高的护士会将新生儿的体重数据记录在牌板资料页里，未见护士或医生在电脑系统中作记录
健康院的儿童例行健康检查流程似乎尚未数字化，所有数据依靠纸质病历。健康院有专门的资料库负责保管所有病历，检查当日需手动找到相关病历资料，放入牌板中开始检查流程
因传统纸质牌板仍主宰着即日的病人就诊流程，为减少在各个房间里医生和护士为传递病人资料而不停走动，健康院和医院因此需额外雇佣身着白色半身制服的护工负责传递牌板。医生和护士所在的房间都以数字进行编号，并配有麦克风广播系统，每当牌板需要传递时，医护会透过麦克风系统呼叫护工姐姐至对应房间收牌板传给下一个流程负责人。
相较内地日间门诊大都由病人手持病历及检查报告穿梭在各个科室之间，香港只需病人手持英文及数字结合的筹号在等候区等待叫号或叫名，病历资料可以得到更专业的管理。
然而负责社区的健康院和医院的病人资料系统并未彻底打通，因而孕妇在临产前，健康院每次检查完成后会将病人的病例报告放入牛皮纸袋，交给孕妇本人保管，以便生产时医院能直接从孕妇处取得资料。
听说内地公立医院每次的检查需要病人每次自行透过app应用预约，香港的公营医院一般会在每次就诊完成后主动为就诊者预约下一次检查，医院或健康院产前检查需要只可通过电话在指定办公时间通知改期，倒是儿童健康检查允许家长随时透过对应的在线预约系统提起新的预约或更改时间。

虽说健康院的儿童健康检查已经有在线预约系统，不过每次检查完，护士依然并未强力推荐家长使用在线系统，不知情的家长依然会习惯性地去现场的登记窗口完成下一次的预约。

综上可见，香港公营医疗机构的流程体验存在以下阻碍：

先用手动记录，再用电脑录入的流程增加了医护人员对每个病人资料的处理时间，某种程度上增加了医护的工作量，同时增加了日间就诊病人的等候时间，影响日间病人的就诊体验。
使用人力传递实体牌板推进就诊流程为带来了额外的人力及培训开支，且难以完全避免传递过程中可能存在的病人私隐信息泄漏问题。物理移动同样也增加了医护人员看诊及病人就诊过程中的等待时间。
医院的主要预约系统尚未与病人建立数字化联系，传统的电话预约方式增加了医院的人力成本，也限制了病人使用该项服务的时间。虽然医管局近年推出了「HAGo」手机应用方便市民进行预约及医疗缴费，但该项服务尚未覆盖所有科系，且应用的实名认证流程也需要市民亲自到指定医疗机构出示身份证认证，未能真正解决问题。
医护人员对已实现数字化的部分服务不熟悉，使得部分数字化服务未能得到有效普及及使用。

上述的一些阻碍导致的医疗机构流程效率的问题很大程度上是能够通过体系化数字化的流程设计作来优化和提升的。然而，由于医疗机构不同专业科室的流程有其特殊性，若只是单纯地把传统的信息录入方式转为通过数字化平台系统录入和操作恐怕未能满足不同专科的医疗人员及患者的体验流程需要。

例如护士在病房逐床给病人量血压这个场景，让护士捧着台平板电脑在屏幕键盘上输入数字的效率不见得比先用纸笔记录，再透过键盘录入来得准确和快速。像这种对信息准确度要求极高的医疗场景，若是只改变了记录的媒介，即用屏幕替代纸，用手指替代笔进行记录未必真的高效，因为人手在屏幕上的点触操作的准确度未必比受过几十年肌肉记忆训练的写字高。

要避免人工操作的失误，可能需要透过转换记录的方法。试想，如果血压仪可将测试结果自动推送到护士手中的设备，护士只需一键确认患者资料及血压数据，是否才是更好的解决方案？然而，以更进一步的自动化媒介替代人力，对硬件、软件和网络的要求就更高了。而透过数字化产品来优化这一单一场景的使用效率就可能融合许多非数字化的因素，比如如何处理停电或网络中断等故障，这就对医疗信息管理系统的产品设计者提出了巨大的挑战。

要想发现和找到医疗体系中存在的问题，并提出可执行的策略性的解决方案，数字产品的设计者需要花费足够的时间深入作业环境，亲身体验和观察整套医疗流程，才可能感受到医护人员和病人在这个流程中的各种需要。除了要和医疗体系中的「用户」共情，设计者还需要熟悉不同医疗专科的就诊流程，才可能对全局和细部的流程关系有更好的理解。

总的来说，一座城市的公营医疗系统管理，就好像管理一片园林。城市里的一家医院就像园林里的一处片景观，而医院里的科室就像一处景观里的不同植物们；不同植物需要采取不同的方式照料，才能健康成长，就仿佛医院不同科系各自的管理流程；不同科室部门的细分流程就像植物的叶片，因为特性不同，进而构成了不同的形态与脉络。医院管理局就像是园林的管理员，他既要能够统筹全局，在有限的资源和空间内合理布局景观构成美感，又要熟悉每种植物的特性，基于当地的天气合理照料，确保植物们都能依照各自属性在同一时空下健康成长，相映生辉，这样才可能让造访园林的访客们得到最佳的观景体验。

新生 · 序

Thu, 04 Nov 2021 00:00:00 GMT

只不过一个多月没碰鼠标，没想到手感竟然那么陌生，说好的肌肉记忆呢？

2020年底至2021年秋，这座星球的新冠病毒疫情仍在蔓延。不幸之幸，我开启了长达一年多的在家远程工作模式，通勤时间的节省也让我有时间更好地照顾自己的生活。工作之余可以下楼买菜做饭，饭后可以散散步，每天晚上有时间跟着健身视频锻炼身体，每天晚上都能睡个长长美美的觉，然后定时起床开启新的一天。

这段日子里，工作和生活都挺很美好。于是乎当再度面对曾经退缩不愿尝试的事件——孕育新生命时终于鼓足了勇气，决定一试。运气好的话，也许整个孕期都能保持这样的规律和节奏，不至于太辛苦吧。最终，有如预期的，2021年初秋，那个“小伙子”——我人生的羁绊终于在香港这座纠结的城市里降生了。

为确保新生命平安降临，在怀孕阶段我便做了许多功课。整个过程就好像项目管理，既要掌握「项目」的核心基础知识，即人类幼崽诞生的全过程；又要在知识基础，规划好每个阶段吃什么、穿什么、如何运动；再就是探索香港本地产前检查流程，对比公营私营医院生产体验，决定去哪里生，进行顺产还是剖腹，待产需要准备的物品之类；最后是了解生产之后身体会发生什么变化，产褥期（即「月子」）需要做哪些准备，请陪月员还是去月子中心，生产之后的出世纸办理等等。

此「项目」涉及人员不多，但流程细节和影响「成果」（outcome）的因素（factors）众多。此前缺少专业知识和切身体验，所以当时主要通过互联网摄取知识信息，通过社交媒体（主要是「小红书」）搜集在香港本地怀孕生产的真实故事，尽可能地了解整个怀孕生产过程的方方面面及影响因素，让自己对每个环节的上下文有个完整的概念，并对应地罗列编排行动项，设置提醒，并保质定时执行。

除了生理层面的产前检查、饮食调整、产前运动，持续的心理建设更为重要。怀孕和生产过程大大小小的事件那么多，既要留意细节，又需避免陷入「外界建议的」条条框框的束缚之中影响心情。还是得承认，从得知怀孕至今，我已和喜爱的茶、咖啡等饮料说再见了很久很久。偶尔摄入几口日版灌满二氧化碳的芬达或是纯粹的气泡水，跳动的水汽在短短数秒内将恣意的生活短暂地带回到了我的身体，舒爽无比。

那个「受难日」才过去一个多月，身体的痛楚已难以回忆。正如之前预料的，生理的疼痛比心理的压力容易熬过去。「如果疼痛的最高级别是十级，你觉得生产过程中最痛的时候有几级？」生完时有护士问起这个问题，我答：「七八级吧」。最疼时候的感觉是「腰快要断了」，然而腰并不会真的断了。生理上的阵痛是有物理时限的。如今，虽说有四个月左右的时间在回归工作前调整身心状态，但不得不承认，从生完的第一天开始，心里便惦记着回归工作后的家庭和工作该如何平衡，我该如何继续创造我的生活，而不是转而将一切重心放在新生命上。返回工作的倒计时的滋味挺不好受，正如生之前伴随着年龄越来越大，纠结于要不要生。之前的工作让我有机会跟几位90后的女生们共事，我是她们中年龄最大的那一个，当了解到她们中的大部分对生娃也带有恐惧，不愿尝试时，我感到十分理解。当然，也有如预期的，我也经历着职业女性当妈妈后所要感受的内心的挣扎。想把时间和精力「公平地」分配给孩子和自己真的很不容易。

产假结束之后该如何平衡家庭和工作？顺其自然，总有种解法的吧。无论最后采取哪种解法，希望到时候的自己还能给自己留足时间，继续曾经不断学习、尝试与创造的路，让自己的内心平静而满足。

UX Design Memo

Sat, 04 Sep 2021 00:00:00 GMT

Photo by AbsolutVision on Unsplash

There is a case that before I went off a project which I’ve been supported for about a year, I prepared a UX design memo documentation for hand over.

Though the hand-over period would last about 2 months and I would have enough time to orally tell the designer in charge of taking over with details listed below

what is the project background

who are the stakeholders and how we communicate them

what we have done in the past

what is our design process

how we collaborate with other members (e.g. Business Analyst and Engineers) in the delivery team

what design tools we use and what are deliverables

how we organise design deliverables

what are references resources from the client side

any tips and items require out attention during work

etc.

I am afraid the information would be fragmented that neither I could remember to tell everything nor she would be able to catch up.

Hence, I wrapped up everything I could think of by answering above listed questions into a “UX Design Memo” before the new designer joined. It would be more convenient if the organisation supports Google Docs or similar collaboration tools for easier sharing. So that on the new joiner orientation session, I was able to share the doc with the new designer and go through items one by one.

Thus, I don’t need to be afraid of I missed anything when walking through the project and the new joiner would be able to take time digest the information by referring to the memo.

The UX Design memo is more than for design hand over, it is also a useful reference for any member in the team to find information about UX designer’s work.

Example of a UX Design Memo:

— BEGIN —

[Project Name] - UX Design Memo

Working notes and references resources

Timeline

DD/MM/YYYY - DD/MM/YYYY: Phase One XXXXX
DD/MM/YYYY - DD/MM/YYYY: Phase Two XXXXX

Phase I (DD/MM/YYYY - DD/MM/YYYY)

[list out job responsibilities for Phase I]

Plan and facilitate workshops to understand business problems and client’s expectations
Align with stakeholders on the project goals and schedule
Review existing work and product

Conduct stakeholder interviews, under product vision and constraints
Conduct user interviews and observation to understand user needs and behaviour
Create persona and empathise on pain points, craft AS-IS User Journey
Run workshop to prioritise pain points and propose To-be User Journey with initiated solution
Create wireframe and concept prototype and mockups target solving the key problems
Collaborate with delivery team to estimate efforts and create delivery plan

References

[list relevant documents for references]

Reference doc name

Phase II (DD/MM/YYYY - DD/MM/YYYY)

[list out job responsibilities for Phase II]

Participate in requirement sessions, collaborate with Product Manager to define requirements
Design framework to fulfil requirements including manifestations of information and functionality, overall structure of user experience, key path and validation scenarios, etc.
Create UI mockup and interactive prototype
Refine and specify design details
Run usability testing to validate design and conduct design modification as feedback
Test implemented design and make sure delivery quality

References

[list relevant documents for references]

Reference doc name

Stakeholder

[A summary or list of stakeholder names and role. Usually, it includes product owner, sponsors, user representatives, etc. ]

UI Design

Style Guidelines

[If the project has a style guidelines, UI library or design system for references, list out hyperlinks of the websites or documents]

XXX Brand Guideline.pdf
XXX component UI library
XXX Design System - annotation here if any

Design Tools

[List design tools and purposes for the project. You can list the source files and notes per tool here]

Figma - to create static UI Mockup_
Overflow - to create user flow
HTML/CSS Prototype - to create interactive and closed to real experience for client communication

Output Delivery

[List out delivery files formats and who and where to send the files to]

UI Review/Testing

[List specific items or details need attention for UI implementation review and test]

Others

[List any other items for memo]

— END —

Hope the above idea helps. And of course it is never enough to note down design process and practices at the ending of a project or only when preparing for the hand over. It is always good to keep a wiki page and keep it up to date so that there is always a complete note for seamless knowledge transfer and to achieve better design collaboration and operation outcome.

Further Learning: DesignOps

The Design Memo practices reminds me of the design term “DesignOps” which is about Design Operations.

As what NNgroup ”DesignOps 101” describes:

Definition: DesignOps refers to the orchestration and optimization of people, processes, and craft in order to amplify design’s value and impact at scale.

The practice of Design Operations focuses on processes and measures that support designers in creating consistent, quality designs.

Similar to DevOps which now has becoming a role in digital project. I believe in the future, the DesignOps concept could be more and more popular as part of Design Management. If you are interested in DesignOps, the NNgroup ”DesignOps 101” could be a good starting point.

Sketch 75 使用体验及插件分享

Sat, 28 Aug 2021 00:00:00 GMT

近期有机会使用 Sketch 75 的 Workspace 功能。Sketch Workspace 的特色即多人实时在线编辑，因此同一个项目，我能够和其他设计师一起在同一份文档中编辑，而无需各自管理一个版本，再花费额外的版本整合的功夫。

Sketch 75 于 MacOS 11.4中的新版界面

使用 Email 账号登录

如果只是想将文件保存于本地，使用传统的 Sketch license 即可。若需启用 Workspace 功能，则必须要透过 Email 账号登录。一个 Email 账号可以同时存在于多个 workspaces 中。

保存现有本地文件至 Workspace

如果希望将已存在本地的文件保存至 workspace 实现协同编辑，需要先打开该文件，点击界面右上角带加号的人形图标呼出“Save to Workspace （保存至 Worksspace）“面板实现（如下图）。

点击右上角的图标将本地文件保存至 Workspace

若文件存在非系统默认字体，保存时 Sketch 会提示是是否嵌入字体。

第一次使用此功能时其实花了一些时间查找入口，因为不像常见透过顶栏菜单的“文件 - 另存为”的常见方式，保存至 Workspace 的入口被放在了右上角，而这个 icon 看起来的直观意义是“添加人”，所以当时花了些时间查询官方文档才知道操作方式。

协同操作

Workspace 的实质大概是将 sketch 文件保存至云端。因此 Workspace 里的文件可以透过浏览器直接预览 Web 版。Web版可以添加多个用户，并给每个用户设置操作权限，包括View（只读）、Inspect and Download（查看代码及下载）或 Edit（编辑），以及单独对是否允许评论进行设定。一份 Sketch 文档的权限暂时只能通过 web 端设置。

Sketch Web 端的文档权限操作选项

在桌面端 Sketch App 中，只有拥有编辑权限的人才能够在启动界面中看到该文档并打开编辑。而在 Sketch App 中，协同操作暂时仅限于同时编辑，看到其他编辑者的光标位置，及选择追随某位编辑者的视图，不可直接在 Sketch App 中查看评论等。

不太方便的评论系统

Sketch 的协同编辑的功能与 Figma 一样，中规中矩。但要想在桌面端App中查看或添加评论目前是完全不行。若文档编辑者需要基于评论调整设计，就必须切换到浏览器查看；若想添加评论也得额外打开浏览器，查询到对应的画布才能留言。不像 Abstract 设计版本管理工具那样可以直接在画板上选择具体元素添加评论，Sketch 的 web 评论系统还十分初级，只能给画布留言，难以有针对性地指出某个元素，评论效果大打折扣。

Sketch 评论时倒是也可以 @ 某位有查看及评论权限的用户。评论的更新有两个渠道可以看到，一是 Email 邮件提醒，二是 Workspace Dashboard 界面的 “Updates”菜单。然而，使用几次下来，“Updates”这个菜单选项名称总是难以让我想到评论，它更像是 Sketch 官方给用户推送的更新消息的入口。这也降低了用户查找历史评论的效率。而在一份具体的 Sketch 文档中是看不到一个汇总的评论入口的，这也增加了评论管理的难度。

不够直觉化的评论查询面板

依旧吃内存的性能

相比 Figma，Sketch 的一大弊病大概就是特别耗内存了吧。基本上一个 8MB 的 Sketch 文档，编辑模式下会占用 1.5GB 上下的内存。如果同时开两个这样的文档，使用时会感到明显卡顿，尤其是切换面板、拖拽移动、放大缩小时。16寸的RMBP低配版只开一个文档时还能运作顺畅，但2018版15寸的RMBP就会严重卡顿，甚至文字渲染跟不上，文字出现严重锯齿，影响工作效率。

虽然几年间 Sketch 的版本已经从56更新到75，看似做了许多变化，可惜内存消耗问题依然没能够得到理想的解决。

附：Sketch 常用免费插件分享

顺便记录一下自己近期会安装使用的一些 Sketch 插件，主要适合多页多画布情况下的批量管理效率工具。

Sketch MeaXure：设计稿标注

Sketch Measure基于 Sketch Measure 的替代版插件 Sketch Meaxure，支持MacOS 10 下的 Sketch 75，Toolbar 很简单，终于解决了新版 Sketch 里相关插件缺失的问题支持最基本的添加尺寸标记，也很好用。遗憾的是在 Mac 11.4 M1 中似乎会存在 error，无法正常使用。

下载: https://github.com/qjebbs/sketch-meaxure

Find and Replace V2：文本查找与替换

Find and Replace V2 是一款Sketch内文本查找与替换工具。当全局的某些标签文案或描述文本需要批量调整时，用它就能轻松实现全局的文本替换，支持正则表达式、区分大小写或单词、也提供暗黑界面。不过全局模式下可能需要一些时间才能完成一次替换任务，个人建议使用逐页模式，一页一页替换并检查。

下载： https://github.com/thierryc/Sketch-Find-And-Replace

Automate: 自动化命令工具集

Automate 这款插件聚合大量自动化命令行工具，它没有可视化的操作界面，通常会通过操作指引文字引导用户完成相关操作及操作是否成功的反馈。个人近期使用它清理冗余的 symbol 感到很方便，当然它还有许多强大的功能，可以满足绝大多数自动化管理的使用需要。

下载： https://github.com/thierryc/Sketch-Find-And-Replace

Fontily：字体管理替换工具

Fontily 能够将 Sketch 文档中使用到的所有字体罗列出来，并允许你将指定字体全局替换为另一字体，有助于文档的整理。

下载：https://github.com/partyka1/Fontily

Sketch Commands：另一款自动化命令工具集

Sketch Commands 跟 Automate 那款插件的部分命令行略有不同，个人主要看重它的导出功能，因为它支持将多块画布导出为 PNG 或 PDF。

下载： https://github.com/bomberstudios/sketch-commands

创造性思维：成功的技巧和工具学习心得

Sun, 11 Jul 2021 00:00:00 GMT

2021年六月底七月初，花了几个周末的时间，完成了 coursera 上帝国理工学院（Imperial College London） Peter Childs 教授推出的在线课程 Creative Thinking: Techniques and Tools for Success（创造性思维：成功的技巧和工具）。

虽然在过去的工作经验中学习和实践过设计思维（Design Thinking）、头脑风暴（brainstorming）、工作坊引导（workshop facilitation）的相关技巧，以为这个 creative thinking 不会有太多新鲜的内容。然而完成下来才知道原来还有许多的工具和方法我并不知道，例如形态学分析（Morphological Analysis）、TRIZ、SCAMPER 等等。即使是用于发散思维的头脑风暴，也可以选择 flip chart、post-it、Alphabet Brainstorming、Brainwriting、Grid brainstorming、Circle Brainstorming 等多种子类方法。

其中，最让人印象深刻的是在人们纷纷聚焦于数字化产品设计的今天，这些用于发现问题、解决问题的思维理论和工具方法许多其实源于工业革命时代的机械设计手册（Mechanical Design Handbook）。解决机械产品设计的那些方法，依然适用于今天基于web的产品设计。

尤其是源自苏联时代，乌兹别克的根里奇.阿奇舒勒（Genrikh Altshuller）的 TRIZ 理论模型（MBA智库百科、百度百科）。该模型定义了 39个工程参数（The 39 Parameters），任何特殊的问题都可以通过将其属性转化为这些普通的（常识性的）参数，进而找到常识性的解决方法。该理论还包括40条原则（40 Principals）- 百度百科和 Contradiction Matrix 矛盾矩阵 - Coursera PDF 可供实践时参考。

再者是当读到摘录自机械设计手册的”Creative Problem Solving（CPS）“里关于“创造性地解决问题的流程图”，才意识到原来数字化时代流行的 Design Thinking 的设计方法，以及 Double Diamond 双钻模型里提到“发散（divergence）- 收敛（convergence）”的方法，并非数字化时代的产物，原来 Osborn 和 Parnes 等人早在1977年就已经考虑了这样一套解决问题的结构性框架。

截图自 Coursera 参考资料：Creative Problem Solving (course enrollment required)

化繁为简，将看起来十分复杂的事物用最基础的参数解剖其存在的关系和问题，帮助人们更好得理解事物的本质，也是需要扎实的功底的。

汉语拼音字母表 Chinese Pinyin Alphabet

Mon, 31 May 2021 00:00:00 GMT

The Chinese Pinyin Alphabet image version. 尝试排版设计的汉语拼音字母表图片版

汉语拼音字母表网页版 The Chinese Pinyin Alphabet website

More than the alphabet image, I’ve also created a Chinese Pinyin Alphabet webpage for your to access anywhere anytime. It is mobile friendly.

Check out Chinese Pinyin Alphabet website

除了汉语拼音字母表图片，我也创建了汉语拼音字母表网页版，你可以在手机或电脑里打开它，随时随地查阅拼音字母表。

查看汉语拼音字母表在线版

下载汉语拼音字母表（PDF)

PDF版本可供A2画幅打印，55KB，可免费用于个人学习用途：

下载汉语拼音字母表 PDF

The Chinese Pinyin Chart PDF version is printable. You can use it freely for learning.

Download Chinese Pinyin Alphabet PDF

为什么设计汉语拼音字母表

在香港，书店和相关网站里可以找到许多设计精良的儿童英语学习教材，吸引眼球的插画、精挑细选的色彩和字形、基于科学研究的的内容编排等等，这让小朋友们的英语学习体验变得有趣且快乐，英语文化便潜移默化地传播开来。相比之下，儿童汉语学习教材的质量大都令人担忧。打开淘宝搜索”汉语拼音字母表”，虽然可以看到大量不同的字母表设计，但无论用色、字体、插画、还是排版，都十分不讲究。其设计甚至还不如几十年前我小时候见到的贴在墙上的拼音字母表。

近几年也开始考虑在教育数字化方面可以做些什么，似乎在每一们学科都可以深入细化地产出一些对大众学习真正有用的东西。汉语拼音相关的学习便可以是其中一块吧。若想更好地推广中国文化，或是提升不同文化背景的人与人的沟通与交流，语言的学习必不可少。如何激发人们的学习兴趣，或提升学习质量及教学效率，都是可以深入探索的。

虽然现在的自己还不是很明确究竟要做些什么，不如就着手开始些简单可达的事情，比如重新设计排版汉语拼音字母表，不管有没有用，有多少人看见，至少是一个开始。下图是重新排版设计的简明汉语拼音字母表，带有四线谱，拼音字母使用了 Monaco 等宽字体（其中字母 i, j 和 l 的字形与手写体的差距略大，字体上有优化空间），包含声母表、韵母表和整体认读音节三部分。希望能与市面上常见的花哨的风格，有所区分，并有机会为拼音学习者所用。

香港公營醫院及母嬰健康院產前檢查基本流程

Sun, 09 May 2021 00:00:00 GMT

憑藉記憶記錄以下香港公營醫院及母嬰健康院產前檢查基本流程（非官方版本）。從計劃懷孕到確認懷孕，再到於香港公營醫療系統進行產前檢查基本需要經歷的過程，供有需要的人士參考：

上圖使用 Balsamiq 繪製。

Strategic Writing for UX 阅读笔记

Sun, 18 Apr 2021 00:00:00 GMT

随着互联网产品创作分工的持续进化，用户体验所应用的语言及文字内容也成为了体验设计领域可垂直探究的方向，随之也诞生了用户体验写作者（UX Writer）、用户体验内容策划师（UX Content Strategist)”这样的团队角色。曾就职于 Google 和微软的 Torrey Podmajersky 将多年来的内容创作与团队协作的方法模式著成一书，名为”Strategic Writing for UX: Drive Engagement, Conversion, and Retention with Every Word“，由 O’Reilly Media, Inc. 于2019年6月出版。

我是在 Google Play Books 上遇见此书并购买阅读的。书的字数不算多，完整读下来，感觉收获最大的是以下三个方面：

理解整体用户体验、组织需求与语言文字的关系
体验内容创作方式方法
及与团队协作的方式方法

作者 Torrey 既然任职 UX Content Strategist，自然长于语言与写作。阅读过程可明显感到此书在章节编排、段落分层方面的结构化。传统观念上，人们容易认为设计、写作这类人文创作活动是感性的，是靠右脑思考的艺术。然而当这些能力应用到产品项目上时，我认为设计与写作这些工作若要完成得好，让用户容易理解与使用，同样是一场工程化的活动，需要逻辑化思维、结构化思维这些左脑活动来共同推动。

如果在 Google 搜索 “ux content strategist”，你会看到第一个推荐结果对这个角色的定义是这样的：

UX Content Strategist is a left brain + right brain role, centered around the planning, creation, publishing, distribution and governance of digital content for enterprise-grade and human-centered experiences. 用户体验内容策略师是个左脑+右脑的角色，围绕企业级和以人为本的体验的数字内容的规划、创作、发布、分发和治理。

达成企业目标和人的目标

在这样一种行文专业与逻辑化思考共同作用的思维下，Torrey 先是引入了循环结构图（virtuous cycle），帮助读者理解组织目标（organization goal）与人的目标（people’s goal）在产品不同阶段的语言上理解方式的不同，并将组织视角的流程阶段描述与用户视角的流程阶段描述一一配对，让组织化需求与人的需求在用于层面的差异一下子就体现了出来。

作为组织与人之间语言的转化者，内容策略师或体验内容写作者在创作时既要充分理解整体体验在组织层面的目标、希望带出的感觉，又要能够站在人的角度，用合适的语言就构造体验，来达到组织与人的目标的最大程度上的一致与平衡。

值得注意的是作者在全书中总是用“人 people”而非用“用户 user”来描述体验过程中服务的对象。此前也曾看过一些设计师倾向于用 people来描述产品或体验的使用者，因为比起行话中的“用户 user”，“人 people”更具包容性（inclusive）。

体验内容创作方式方法

Voice Chart 话语表

They may forget what you said, but they will never forget what you made them feel. 他们也许会忘记你说过什么，但他们永远不会忘记你带个他们的感受。

Unknown, attributed to many 匿名

作者 Torrey 认为感受能够让体验可识别、持续、并且与它的竞争对手区别开来。话语（voice）是让内容来创造感觉的一套特征。

Torrey 在大型企业不同产品团队的经验让她发现用户体验在传递给人们的话语方面的“最大的障碍是不同的组织部门团队各自书写内容。 ……如果能够有一种共同的话语描述，则能帮助多样化的团队创建有凝聚力的话语。 “

于是在创建一套话语体系时，Torrey 介绍了她的方法话语表（Voice Chart）。

作者在书中设计了三款不同类型的虚拟手机应用，基于不同的组织目标和人的目标构建了每款应用的话语表（voice chart），并对每一步进行分析。读者便可理解在不同的组织目标和用户目标背景下，对语言运用的差异：

老牌会员俱乐部应用
可爱简单的传图游戏应用
交通指南应用

此书为英文，所以所有的示例及话语描述是以英语为基础。不同的语言必然有其格子用词、语法、标点或其他特点。所以这张话语表恐在不同语言下未必样样试用。例如中文就没有字母大小写（Capitalization）的区别，中文每个字都是两个字节，在段落长度的控制上也会和英语有所不同。若一款产品需要支持多语言，则话语表的设计可能还需要留意多语言的对照。多语言也还会对 UI 设计的空间布局等有所影响。此书并未对多语言的情况做讨论。

除了话语表，书中也介绍了了体验内容作者如何与团队写作，不断迭代优化体验内容文字，并在多个选项中结合话语表进行挑选。

这里作者也推荐了一些工具，例如通过截取 UI 原型图，将原有文字遮罩后写作新版本方便预览。以及如何与团队透过集体智慧，用现场对话的的形式来演示人与机器透过文字的交流过程，验证不同选项版本的流程、自然度及匹配度等，调整进化以选取一个当下最优的方案。

体验内容的基本分类

虽然 UX Content 中用到了“内容”这个词，但这里的“内容”指的并不是一款应用的一篇“文章内容”，它指的是应用系统在与人交互的过程中使用的文字或声音内容。

作者将用户体验过程中会主要会涉及的需要体验内容策划师定义和撰写的内容分为以下基本分类：

标题 Titles
按钮或其他交互式文本 Buttons or other interactive text
说明 Descriptions
标签 Labels
空白状态 Empty states
控制 Controls
文本输入框 Text input fields
过渡性文案 Transitional texts
确认信息 Confirmation Messages
通知 Notifications
错误 Errors

标题 Titles

目的：立即明确背景和要采取的行动

信息架构中最高层次的标签
常是一个人在体验中阅读的第一个也是唯一的文本
要想让人成功，标题需要提供上下文

四类标题：

brand name 品牌名称
Content name 内容名称
Ambiguous task 模糊的任务（当页面有多个潜在行动时，例如用户账户面板，用名词或名词短语，或动词短语指示相关行为）
Single task 单一任务

按钮或其他交互式文本 Buttons or other interactive text

目的：让人朝着或承诺的行动前进

例如，当人们需要在一款应用中创建账户时，页面标题是“Create an Account”，那么页面表单对应的提交按钮建议用 “Create Account” 来清晰指示将要发生的行动。这里的按钮若使用 “Save 保存”或“Submit 提交” 则行动的意图会没有那么清晰。

说明文字 Descriptions

目的：帮助人们在体验中知难而进，树立品牌，减少责任

说明文字可以是可见的句子、短语或段落，也可以是隐藏的文字来允许 screen reader 读取。或是通过交互（Tapping, hovering, clipping, etc) 来出现。

大多数描述性文字会被人们忽略，因此应尽可能简洁并以易扫描的块状排版
在英语中，人们使用界面会快速扫描宽达50个字符左右的线条，这空间足以容纳三到六个单词
当一段文字有三行或更少的时候，人们的目光会停留在几个字上
文字越长人们会越困惑 —— wall of text
避免使用星号 Asterisk *。用星号指代某种意义或描述段落看起来不够真诚，会造成不信任感。若有复杂的概念需要描述时，用描述文字呈现。使用平实的语言，并在必要时包括它如何使组织和使用该经验的人受益。

空白状态 Empty states

目的：设定期望，建立兴奋点，同时表明空位是有意的

在最简单的情况下，使用以下格式：

“ To do X, do Y ”（为做X，做Y）

标签 Label

用途：尽量减少了解体验所需的努力

通常是用于描述名字或物件的名词或形容词。

标签与描述的不同之处：

Description 通常是个完整的句子；Label 通常是单个名词或名词组合。
Description 常和 title，button 或整体体验搭配使用；Label 通常与图标或部分等被动屏幕元素有关，并仅限于该局部环境。
为达致其用途，标签必须使用特定的术语，避免使用不熟悉的行话
可通过可用性测试和其他用户研究方法来揭示人们是否可以自然地使用这些标签

标签格式需结合本地化的用法，例如日期格式、价格格式等。

控制 Controls

用途：告知人们可能定制的范围和状态

一个控制器一般有两部分文字需要考虑： name and state 名称和状态

Name 名称：名词或动词描述可识别的操作 State：例如 checkbox is checked， position of a slider, a toggle is flipped left, right, up or down.

文字有时是可见的有时是不可见的，但还是需要允许屏幕阅读器读出他们，确保可用性。

文本输入框 Text Input Fields

用途：帮助人们输入准确的信息

帮助人们输入准确信息的最佳方式是在 text field 中预填信息以帮助用户节省时间，及给用户修正信息的机会 —— 但这仅限于已知信息。
Form fields 使用的 UX text 包括标签（labels）、提示文字（hints - placeholder）和预填充文字（pre-filled text）
当无法预填时，可以在文本输入框外使用标签作为提示文字来指示人们应该输入的内容
留意提示文字的使用，因为一些研究表示人们可能会误将提示文字当作预填的文字
比一致性更重要的是明确性。若不一致的文字能帮用户取得更好的体验，则可以采用不一致的文本

标签或提示文字的的四种好写法：

需要被输入的信息名称
需要被输入的信息示例
以动词开头的关于输入信息的介绍
人们如何能够成功的指南

过渡性文案 Transitional Text

用途：确认一个动作将要发生

例如当体验卡住了（hangs），可现实向帮助一样的帮助文字” “Just a moment while I get that from the back”。

一般情况下，过渡性文案不需要人们任何额外的操作或点触。若动作还在进行中，可以用现在进行时 “is uploading”, “is sending”.

确认信息 Confirmation Messages

用途：让人放心，他们期待的进展或结果是完整的

在经历的一些旅程结束时，确认信息是必不可少的工具。

通知 Notifications

用途：告知或提醒人们参与体验

通知文字通常是标题描述模式（title-description pattern）
标题可以与操作相关的动词开头来确保对象成功
描述文字添加“能有就更好 nice-to-have”的信息
通知对推动参与度很有用，这是大多数数字体验的关键成功指标
但要避免过度使用，以免人们觉得厌烦而彻底关掉通知
应提供控制通知的自定义设置

错误提示 Errors

用途：帮助人们到达他们想去的地方，并在必要时，说明他们在到达目的地时遇到了问题

为帮助人们知道他们需要尝试做什么

语法上通常以动词开头，描述间断，有个标题及描述就可以了
为维护信任，应避免责备对方。即使这个错误是用户造成的。若无法继续，让用户清楚知道。
对于那些可能知道问题所在的专家（工程师，设计师，写作者，IT 专家等），额外的错误条件信息将会有帮助专家识别问题及避免未来发生错误。
对于普通客户，如果提供一些细节或更多信息的链接有助于提升用户的自信则可以展示。

软件设计中的三类错误提示：

行间错误提示 Inline error：阻挠最少，用户只需更正信息即可继续，例如表单密码错误提示
绕行/迂回错误 Detour (Out of order) error：错误无法通过行间修正解决，用户无法使用预期的方法达成目标，但仍然可以达成。例如用户未设置支付方式，需先添加支付方式才能继续完成订单。
阻断错误 Blocking error：前进的道路被堵死了，直到这个人采取了超出经验范围的行动。404 页面，或网络出问题

注意：上述基本分类模式只是范例模型，他们在某些情形下也可能出错。就算这些模式已经被成千上万的人所使用也不代表他们是最佳选项，你可以编辑文字并找出最适用于你的体验的版本。

研究与评估

用户体验内容的研究方法和基本的用户体验研究方法相近，也是可以通过收集反馈、访谈、协同设计工作坊、调查问卷等方式来取得意见。

在评估内容的效果上也可以采用 NN Group 的启发法（UX Heuristics），列出

用户目标和组织目标
然后将可用性原则逐条列出，写出条件、评价和分数

结合此前的话语表（Voice Chart），从内容的以下几个方面进行打分，加总总分，并列出最低分项目，以做优先调整：

可达性 Accessibility
目的性 Purposeful
准确性 Concise
对话性 Conversational
清晰度 Clear

融入团队，创造价值

除了体验内容写作的方式方法，此书让我印象最深刻的其实是作者如何去融入组织中的不同团队，从零开始熟悉团队背景、产品背景，进行有效沟通，并让团队认识到体验内容写作的价值所在并成功取得领导的确认（sign-off）的工作的方式方法的分享。

Torrey 把它的这套与团队写作完成内容写作优化任务的方式方法总结为 30/60/90天计划（30/60/90-Day Plan）。

首阶段：第一个30天，了解是什么和是谁？

从体验内容作者加入组织团队的第一天，便进入了第一个30天的阶段。

第一个30天是关于了解体验，谁在用它，什么样的团队在建立它。要想成功，你得知道对他们分别来说，什么是重要的。同时要建立团队对于他们花费在内容上的时间、精力以及金钱的自信。

任务一 找到几个核心团队成员，并向他们了解团队构成及不同角色对体验的影响。

任务二 找到 5-20个团队成员，跟他们每个人分别开半小时的会议。会议目的一是手机关于组织、产品、目标、消费者的信息，二是向人们介绍跟你一起工作的主意（截至此时，很多软件工程师从未和一个位达成商业目标的 UX writer - a UX content strategist 用户体验内容策略师一起工作过）

会议规划

会议邀请邮件可以这么写：

“Hi, I’m the new content person on product X. Your name came up as a person who’s important to the product and team, and I’m hoping to learn more from you.”

在 calendar 的时间上，确保你在会议与会议中间有足够的时间巩固信息（consolidate learnings）。

会议准备

准备一个几乎空白的文档，可以是幻灯片或文本文档。

样式上建议尽量保持粗糙及不好看以确保你话费更多的时间在了解信息而非优化展示上
它需要能被分享以将链接发给你参会的人
回迁尝试添加你觉得你知道的信息，并使用简介，可扫描的形式
如果某个部分你不熟悉，可以留白
这样可以传达 1）你想知道什么 2）你还不知道什么 3）分享哪些信息将对你有价值
你不只是要准备在会议过程中记笔记，二是要组织和给出你获得的信息的上下文

文档可包括以下几个部分：

体验的定义Definition of the experience
用户动机 Customer motivation
组织的优先级 Organisational priorities
内容策略的优先级 Priorities for content strategy
团队/干系人 Team/stakeholders
现有内容列表 List of existing content
审查者 Reviewers
术语 Terminology

会议过程中

最重要的是与参会者建立工作关系，以获得更多信息。如果有新的话题出现，聆听、记录并继续。

可实现准备一些常问的问题
直接在展示的幻灯片或文档中记笔记，这样可以即时排优先级或请参会者确认信息

会议结束后和会议间的空档

巩固你所学的，整理笔记。笔记可以直接在文档中改，加 comment，或是用纸笔记录，或拍照。

这些会议最有价值的产出是内容清单。

作者会记下人们提到的文件夹、repository，CMS 或其他用户体验内容（例如帮助文档，社交媒体，emails，notifications，websites 或 canned responses套话）。

当听到特殊或不寻常的意义，我会将他们加入术语列表并尝试给出定义。术语出现后回家哦团队成员检查确认我的理解。

接着整理体验循环图并展示给成员让他们分享想法。并让他们知道你讲创作内容以让这个轮环转动。

第二周迟些时候你将陆续收到团队给到的写作优化请求。第一份任务将测试你是否理解人们希望如何使用这个体验以及你的组织目的是什么。

尝试完成第一个任务

搜索并构建话语表（voice chart）
写至少三个好的内容版本
将内容提交评审

第二阶段：第30-60天，开始“燃烧”及构建基础

这个阶段的内容写作可能不是最适合体验的，也会不一致、不完美。但需要以开发排气为有限，避免随机的工作打乱你的注意力。

是衡量用户体验内容如何满足组织和使用体验的人的目标的基线的时候
需亲自体验产品，保存截图
撰写初步发现报告，关于人们使用体验的行为和情绪，以及基于启发式方法的内容可用性记分卡。这些初步的报告表明哪些工作是有效的，哪些工作还没有做好，以及你建议优先考虑哪些工作
用报告评估优化

跟进小件任务及整体体验 Track the pieces and the whole

在任何一天，你可能会与设计师、研究人员、高管、支持代理人、律师以及在代码中，在多个项目上创建和审查内容。

最低限度可行的程序 Minimum viable process

组织的决策者所希望的是相信该文本不会增加组织的责，并确信文字准确地反映出组织的品牌。

存档内容策略

要做伟大的工作，你需要系统地思考内容的深层连接组织：核心术语和声音，渗透到体验与使用它的人的对话中。

要让团队知道内容的系统性重要性
记录内容策略文档能帮助你展示它对组织的重要性。帮助未来进行更容易、快速和一致的决策

作者的内容策略文档包括以下几项：

话语表 voice chart
术语表 terminology list
体验内容评审者列表 List of UX content reviewers
存档的优先级及目标

这些文档需要被不断优化，定期审视（至少每年一次），随着组织的变化而更新。

第三阶段：第60-90天，快速成长

向团队和领导展示扎实的阶段性成果，通过签订战略（sign off the strategy），确保验证并支持这项工作的完成。沟通是内容策略工作最关键也最难完成的部分。展示应包括：

当前任务进度追踪列表 the tracking process and list of current tasks
内容格局 the content landscape
统一动机和优先事项 alignment on motivations and priorities
术语表和话语表 terminology list, and voice chart

展示后需寻求反馈，为下一阶段的成功修正策略方向。

以上是读完此书的一些理解和笔记。若你也有兴趣阅读此书，可在以下几处找到它：

不约而同的「简单，善良」

Thu, 15 Apr 2021 00:00:00 GMT

吃完晚饭散完步，打开 Feedly，开始阅读订阅的为数不多的中文博客。

读到 happy xiao 的这一篇《善良优先》，忍不住摘录一二：

善良是弱点？有的人这么认为，我也一度觉得老好人是中庸，无能的表现，但实际上，善良是内心真正快乐的人的特质。

It’s easier to be kind when you’re happy on the inside. When you’re happy, you want everyone else to “get theirs” too. You don’t feel the need to drag other people down. – GaryVee

紧接着遇见了见字如面的《忌老成》。文中他提到：

转念想来，这个观点和我做人其实也相差不多，做一个 「简单，善良」 的人，能够收获和这个世界更良好的关系，这就够了。

摘录是因为认同。希望未来能继续坚持这份信念，叙写属于自己的人生。

13-hour Data Visualization with D3.js

Sat, 27 Feb 2021 00:00:00 GMT

The Data Visualization with D3.js course was created by Curran Kelleher, organized and hosted on freeCodeCamp.org Youtube Channel. In the past two months, I followed the tutorial by Curran Kelleher and learned Data Visualization with D3.js as a beginner.

What I coded

I followed the tutorial and code each project and customised styles for some of the projects. Sources code are available on GitHub.

Here are the screenshot and demo of parts of the projects:

Reference Resources

For the theory of Data Visualization, the course is following

the book Visualization Analysis and Design by Tamara Munzner.
and Tamara’s courseware: [Visualization Analysis & Design

Full-Day Tutorial](https://www.cs.ubc.ca/~tmm/talks/minicourse14/vad17fullday.pdf)

Why learn Data Visualization with D3.js

Instead of just watching the other’s Data Visualization work and sigh ‘Amazing’, I expect that one day I would be able to create the kind of data visualization work by my hands and make sure the work could delivery something useful for audiences.

D3.js is popular today and almost has become a basic framework to visualize data for the Web. I’ve read some simple tutorials on D3.js but hard to get the sense understanding the logic. Curran’s course on Youtube looks good and could be a good start for me.

How and what I learnt?

The course lasts about 13 hours. The tutor Curran encourages students to follow the tutorial and code on the VizHub platform he contributed.

I followed Curran’s recommendation coding myself just I set up my local environment with rollup.js for me to understand how a D3.js project can be set up and run as a standalone project.

How I feel of the journey?

At the beginning, things are fun and interesting
The first time I set up local development environment, it spent time to get rollup.js up and ‘watch’ code changing. Good luck finally I figure out the issue through StackOverflow.
The course was created in 2017 while today some JavaScript grammar has evolved that would block the road. Good luck there are always hints online for me to find a way out for most of the cases.
It is more than a journey of learning how to code in D3.js, but a training of how to keep calm and good mood to figure out problems.
Curran is good at showing how he think and move forward to achieve goal. There are bullet points on each section which make the steps clear.
Grammar of a language needs time to remember. The 13 hours practices helped me understood how D3.js works, what it can create and ways to figure out issues when code doesn’t work. If I want to be able to creating things from scratch with D3.js, it requires time and practices and a never-give-up mindset.
I split the learning progress into pieces during the weekend and holidays and didn’t push myself too hard to finish the course. It took me about two months to complete the journey.
The video course lasts about 13 hours however it costs more than 20 hours in total if typing all code and digest the idea by yourself.

2020 我付费的互联网产品

Sat, 02 Jan 2021 00:00:00 GMT

记录2020年我付费的互联网产品，常用的 MacOS 应用，值得关注的免费开源应用、字体资源以及关于web和播客的零星感受。

付费订阅的应用

大部分在 2019 我付费的互联网产品一文中记录的产品到了2020也还在继续使用。

Todoist：任务清单， HK$288/年。使用频率：一天多次
Dashlane：密码管理，HK$8/年（不知道为什么港区 App Store 有这个价格）。使用频率：一天多次
Bear 熊掌记：笔记，HK$10/月。使用频率：一周多次
Pycharm：IDE 集成开发环境，US$53/年，参加了2019年买一年送一年的活动，2020-2021年的年费摊下来大约HK$205/年。使用频率：一周多次
Spotify：音乐+播客平台，家庭版HK$88/月，人均15元/月。使用频率：一天多次
财新网：资讯媒体，财新通计划 CNY¥498/年。使用频率：一周多次
Zova：使用了多年的健身 App，HK$488/年。最喜欢 Flexible 灵活度相关的拉伸视频，结合了瑜伽和拉伸动作，每一段十几分钟，让人能够坚持。30分钟的力量或心肺运动真的会让人大汗淋漓，心率飙到150。Cardio 方面的 HIIT 和 Circuit 也不错。不过2020下半年遇见了另一款也很棒的免费健身App FitOn，很可能因此就转投 FitOn 不续费了
Google One(100GB)：文件存储， HK$150/年。使用频率：常年。一度因存储了十几年来的照片和视频导致存储快满，但其实Google Photos 也备份了一组，后来便将视频和照片转移至 One Drive 了

下面把特别常用的几款拎出来聊聊：

最爱： Todoist 任务清单

Illustration by Margarida Mouta

Todoist 大概是自己每日手机和电脑（包括个人机和工作机）上使用频率最高的应用。毕竟它是一个任务清单，将它和 Google Calendar 集成之后，事无巨细，都靠它帮我解放记忆，在必要时提醒：

琐碎的事情，比如取快递、买菜
严肃的事情，比如和客户开会
每日重复的事情，比如健身、工作日的 stand-up meeting
每月重复的事情，比如信用卡还款
每年重复的事情，比如软件续费等等

“原来真的有人读”

2020年，Todoist 推出的主要新功能是看板视图，就像 Trello 和 Jira 那样，你可以用 Kanban 的方法管理任务，比较适合小团队。

如果你有兴趣试试，可以通过我的 Todoist 邀请链接注册，你我都将取得为期2个月的 Todoist 高级版免费使用权限。

Dashlane 密码管理

Dashlane 也是用了两三年，要有的功能都有了。虽然去年 Dashlane 再次重设计了品牌形象，更显现代与专业，但体验上似乎还是差了点什么，个人感觉可能是密码更新后的同步有时候非实时自动导致，以及指纹启动等小功能不稳定导致的摩擦。不过跟 1Password 相比，还是 Dashlane 顺手。

也很意外的，去年也有一位网友通过去年那篇博文中的链接注册了 Dashlane，我的 Dashlane 高级版使用权限也真的因此被延长了。

那么，如果你有兴趣试试，可以通过我的 Dashlane 邀请链接注册，你我都将取得为期6个月的 Dashlane 高级版免费使用权限。

Bear 熊掌记

我的Bear Notes 截屏

2020年才开始用 Bear Notes，并开始按月付费。主要用它来做各种笔记，并且将前几年在简书写的文章内容批量导入到这里存档。现在的博客写作一般也会先走 Bear 里打稿，再复制粘贴到博客的内容文件目录下完成进一步的图片和属性编辑等。

Bear Notes 与我最大的体验就是我真的会主动来这里回顾和搜索，让笔记不只是流于短暂的记录。

从细化的功能上看，下面几点是 Bear Notes 让我觉得好用的地方：

便利的标签定义，小 icon 很加分
支持键盘快捷键，方便快速定义 Markdown 格式，Ctrl + 1/2/3 可以快速在专注编辑模式和多层级导航视图之间切换
Pro 版的 Theme，虽然默认的主题也够了，但当文章有较多的层级格式时，切换到更多彩的模式下更方便检索。
无缝复制粘贴图片
开启时可加密
可导出 PDF，HTML，WordX 等格式，有时通过邮件分享记录也挺方便

特别推介：Flomo 浮墨笔记

Flomo 官网截图

flomo · 浮墨笔记：免费 web app，支持微信提交笔记。

如果你有兴趣试试这款笔记应用，可以通过我的邀请链接注册，你将获赠获赠 28 天 PRO 会员，我也将获赠 7 天 PRO 会员。 PRO 会员功能包括每日回顾、随机漫步、API、数据导出等。

另外如果你混迹 IT 界，也推荐你关注少楠主持的产品沉思录 · Product Thinking ～沉甸甸的积累

财新网

财新网web版截图，其实个人平时多用财新iOS版

iOS 14的 widget 不错，让我能关注头条，并更经常地打开，一般是收听语音播报。其中录播的《重点来了》很有料、 AI 语音播报效果也很不错。明年应该会续订。在财新网还推出了和优酷、知乎、三联等平台合作的年费计划及满足其他类型用户需求的付费产品。希望财新能继续坚持品质，用媒体付费的方式很好地活下去。

一次性付费的 Mac Apps：

只需一次性付费即可长期使用的 Mac Apps，他们大都不是特别常用，但装机的时候还是会保留。

Affinity Designer – 专业图形设计软件：这款产品多年前刚 release 就付费购买了，是 Adobe Photoshop 和 Illustrator 的替代品。今年越发成熟，很好用，主要用它来画数字插画（已支持 M1 原生）
Affinity Publisher — 专业桌面出版软件：Adobe Indesign 替代品，主攻印刷排版等。无缝整合Affinity Designer，Affinity Photo，设计简历、海报等图文混排的产品时很好用（已支持 M1 原生）
Affinity Photo – 专业图像编辑软件：Adobe Photoshop 的替代品，不过今年很少修图也便很少用（已支持 M1 原生）
Balsamiq for Desktop：2020年入的原型工具。十年前它就大名鼎鼎了，不过因为工作场景不是特别需要它便没有尝试。今年刚好需要远程协作，又希望能有便利的方法快速记录自己对产品的想法并与同事分享，使用了30天，发现在简单的线框图和快速想法勾勒方面确实方便，也就付费了（已支持 M1 原生）
Tayasui Sketches：手绘工具，有丰富的画笔、画纸等设定。可惜我的 Wacom 画板有点老，驱动有点问题，加之自己手绘水平不咋地，所以不常用（已支持 M1 原生）
DM1 - The Drum Machine：鼓点节奏创作工具，有丰富的音效，即使是外行也可以快速创造出有趣的节奏。多年前购入的，主要是好玩，有时候自己录视频，也可以用它创造些 beats（少用，但很棒）
VOX Mac Music Player：当初因为它的界面很帅购入，简单的用法就是个音乐播放器。如果注册会员则可以用它收听电台、播放 SoundCloud 音乐或播放 Youtube 音频。平时很少用，但每次装机还是会把它装上。
Icon Slate：可以快速生成各种大小和种格式的图标。一般只用它把图标转为 .ico 格式，平时也很少用，但每次要做 favicon 时总是第一时间想到它。

常用的免费 Mac Apps

Amphetamine：禁止 Mac 睡眠的菜单栏工具
Tyke: 驻在Mac菜单栏的草稿纸应用
Telegram
ColorSlurp：取色器。试过很多款取色器 app，最后觉得这款最好用。

开源装机字体

The League of Moveable Type：高质量开源英文字体，附带桌面版和 web 版
Sarasa Gothic / 更纱黑体：带有完整简体中文、繁体中文、日文、韩文的汉语字库
思源宋体
中文开源字体集

附1：被他的作品打动

Josh W Comeau 个人网站首页截图

附2: 对Twitter和自媒体播客零星感受

Twitter 中文圈的性格像个大男孩
V2EX的创始人 Livid 也开播客 small talk 了，想想现在由男生们主持的播客越来越多，比如 Anyway.fm,、疯投圈、small talk、ggtalk……但是……发现越来越难以分辨你们谁是谁。倒是津津乐道的常驻主持有女生，男主持的声音也还蛮好辨认，听感会比较不同。另外一点就是大部分的IT类播客都太长了。
想想2019年几个女生朋友也一度聊起做播客的事情，但依然只停留在说说的层面，还没有行动。
其实今年听得最多的是唐湘龙在 Youtube 观点平台的节目。他和陈凤馨搭档的「正经龙凤配」是我的最爱。他们俩搭档时的声音就很有辨识度，而且一刚一柔，有时候我听的可能不是他们分享的评论，而是他们俩搭档擦出的声音的火花——理性中带着一丝丝感性，比如陈凤馨表示她难以接受一些残忍的画面，每次看都会哭；又比如每当唐湘龙的言语有些许煽动情绪时，凤馨会加以提醒，避免观众被过度引导。

香港丰泽Macbook以旧换新体验

Sun, 27 Dec 2020 00:00:00 GMT

在丰泽门店取新 Macbook 同时重置及回收旧电脑

和许多2020年末入手了 Macbook M1芯片的买家一样，在观望了两三周的全网评测之后，觉得 Macbook Air 性价比高，于是决定入手。除了机器本身的性价比，这次的购买欲望也许和在家工作太久，非必需品消费频率降低导致遇到感兴趣的产品购物冲动便增强有关。

去哪儿买 Macbook Air

一开始打算在苹果官网订购加内存定制版的 Macbook Air，同时希望能够通过苹果 Trade in 计划以旧换新，将2012年15寸的 Macbook Pro 估个价换掉。然而在香港苹果官网供应商的网站上查询到的回收报价如下：

2012年版15寸的 Macbook Pro：500元
2017年版12寸的 Macbook：0元

这个报价糟糕得叫人一度以为是这个报价查询网站出了故障。为了弄清楚报价及实际的以旧换新的流程，某个周末我接通了苹果客服的电话，明确了 Macbook 确实不在有偿回收之列，而回收的路程也确实是独立于购买流程的，回收只会给到 Apple 的礼品卡用于产品的购买。

能否既使用旧机回收经费购买新机，同时待收到新机完成数据迁移后再收走旧机，让我无缝换机？

不行。香港的 Macbook 购买和回收是两条独立的流程，若新机器想用到回收经费抵扣，则必须在购买前完成旧机回收。

如果是小白用户有且只有一部 Macbook，以苹果的以旧换新流程，要么购买 Macbook 的时候不能真正实现以旧换新，而是等收到新机的时候才启动旧机回收流程，获得礼品卡现金券，未来再用于抵扣其他苹果产品的消费金额；要么得在订购新机之前完成旧机回收，这个过程则需承担额外的外接硬盘用于 Time Machine 的备份成本，或是承担数据丢失风险。

总的来说，苹果香港的这套 Macbook 以旧换新（trade-in）流程挺尴尬的，对消费者一点也不友好。虽然香港苹果的客服在电话那头回答问题时耐心又认真，也不能让这个流程走通。于是放弃了通过苹果官方渠道以旧换新购买 Macbook 的念想。

丰泽的魔法

直到不久后一天去附近的丰泽（Fortress）摸摸 iPhone 12时在店门口 iPhone 促销的牌子上发现了以旧换新的宣传，于是向店员了解。原来丰泽不仅手机可以以旧换新（trade-in)，电脑也可以以旧换新，而且以旧换新不限于苹果这个牌子，应该是可以购买店铺里的其他东西。也才知道丰泽的以旧换新并不是新服务，多年来一直都有。

丰泽也是苹果的授权经销商，每间丰泽门口都有苹果的展示柜台，Macbook M1 系列他们也以开始销售了。于是赶紧咨询了一下 Macbook 的回收报价，

2012年中15寸 Macbook Pro：2.5k
2017年12寸的 Macbook： 5k

这价格跟苹果的报价相比”简直了”！当然对于回收，店员也表示机器的硬件必须正常，尤其是得保证屏幕和机身无明显划痕才可能以这个价格成交。

而对于16GB内存定制版的 Macbook Air，丰泽也表示可以帮我们订购，机器到货时会电话通知。我们可以在取新机器的同时将旧机器带来 trade-in。

苹果在 trade-in 报价和流程上给我带来的困扰，仿佛都被丰泽看在眼里。丰泽在 Macbook Trade-in 方面推出的服务，价格和时间上给到客户的空间都更大。似乎只要你的情况在他们可支持的能力范围内，他们都会尽力配合。

丰泽的厉害之处不仅在于他们设置的这一套以旧换新的服务流程，还在于他们实体门店的选址。相比苹果和香港其他连锁电器卖场（例如百老汇），丰泽在香港走的几乎是屈臣氏路线，香港的十八区，几乎区区都有门店，且选址都足够便利。我去的这家丰泽里住处只需步行十分钟，晚饭后走过去只当是散步。

订购

在 Macbook Air M1 自身的吸引力，丰泽给力的 Macbook Pro 回收报价和相对便利的订购和以旧换新流程的共同驱使下，第二天晚上就去丰泽订购了 Macbook M1。

这次留意了一下店员的工牌，原来上次跟我介绍电脑以旧换新计划的店员是他们的副店长，难怪对流程那么确定和熟悉。这次服务我完成下单的是另一个小哥，对电脑的以旧换新流程略不确定，也是跟那位副店长确认之后才来回复我。

大致的订货流程如下：

店员在展示台的 iMac 上打开苹果官网计划购买的产品页面，确认型号和定制细节、价格及预计送货时间等。预定是官网预计的送达时间是4周后
店员用手机拍下苹果官网产品页面画面及页面网址URL
去到收银台下单，
我刷会员卡积分
我刷卡买单
店员打印订单并跟我核对产品型号，请我这对应位置简签
我检查并签字
店员将一式两份的票据撕开，将顾客存根一份给我，表示搞定，请我之后等电话即可

当时本打算第二天就把就机器拎来回收，因为担心过四周回收价会下调。不过细想想要是四周没有那部机器可能会不方便，于是又改变主意决定待取新机时再回收。店员也很配合，表示第二天回收或取新机器时回收都可以。好在四周后的回收价没有改变。

取机通知

经过了四周的漫长等待，单子上预计的到货日终于到了，但是还没收到取货通知。于是在预计单据上印着的收货日那天主动给丰泽门店打电话查询。也许是在这个家门店订购 Macbook 的顾客不多，店员连我的资料都没问就知道我是谁。接电话的店员表示货还没到，最近苹果 Macbook 的送货似乎总体延迟了。我希望他们能了解一下物流情况给我进一步的消息，他们表示会帮忙查，查到了尽快给我回复。

一开始我以为“一阵间就回复“是种打发顾客查询的策略，没想到过了几十分钟他们真的给我电话回复表示查了确实还没到，预计要再过几天。虽然这个回复有跟没有一样也不能给到个确切的日期，但这个服务态度还是可以的。

于是继续等待。

回收旧机

接着又等了两日便收到丰泽的电话通知说 Air 到了，可以取货。我听到了那语气背后的笑容，再次感叹店员服务的专业。这天下午便把 Macbook Pro 的相关账号ID根据官网的指南登出。晚饭后便拎着 Macbook Pro 及磁吸式电源来到丰泽。

店员先拎出我订购的 Macbook Air，拆掉纸箱包装，请我检验。一切正常之后店员小哥便开始了我的旧机检测。大致流程如下：

打开Safari，点击浏览器的地址栏，把数字键及26个英文字母及标点符号依次按了一遍。开启大写锁定键又按了一遍，确认键盘没有问题
打开 About This Mac 窗口，确认硬件参数等，并把参数告诉在收银台前的另一位店员协助其查询和录入
找出屏幕清洁布，把屏幕亮度调暗，仔细擦拭并检查屏幕状况，确认无划痕
跟我们表示看起来没问题，可以开机重启，重置电脑即可。虽然小哥也很熟悉重启操作，但估计他看咱是电脑熟手，于是便 Cmd+R 进入系统诊断模式完成硬盘的抹除重置和 catalina 系统的重装。这个部分用时最久，大概用了50分钟。小哥一路也没有服务其他客人，就一直跟进等在那里。

好在总体重置进度顺利，电脑终于在店铺关门时间前2分钟完成了系统重装后的启动，进入语言选择界面。另一名店员协助小哥记下了电脑的序列号，完成了回收检查和重置工序。

最后小哥打印了两份单据，一份是新机收货确认单，一份是旧机回收确认单，都需要我简签确认。新机的单据需要保存1年用于保养确认。旧机完成签字后小哥便递给了我2.5k现金，那一刻感觉丰泽真是干脆。

整个旧机回收的过程就是硬盘抹除和系统重装过程的等待的时间比较漫长，只能在一旁走来走去看看其他产品有些无聊。要是店铺有座位让我们等待，那体验可能会更好。

除了上述流程和细节，丰泽在营销方面还和某些银行合作推出信用卡现金回赠，刚好这次购物也享受到。相应的积分回赠未来可用于某些超市的消费抵扣。

结语

虽说苹果官网和 Apple Store 是苹果产品销售的主动脉，但其服务体验的设计并非无懈可击。这次购物经历让我看到了传说中香港零售业服务业的厉害之处和生存之道。不可小觑本地化电子产品销售网络“静脉血管”般的零售网络，本地化的渗透让产品能够更便利地触及不同背景不同需求的用户，为产品最大程度触及其目标受众提供了灵活性。

这次赚大头的还是苹果，然而下几次的家电和电子产品选择在哪儿消费，靠的可能就是这么一次体验建立起来的信赖。

2020心愿读物在线版

Sat, 05 Dec 2020 00:00:00 GMT

Fundamentals of Data Visualization

此书中文名大概可以译为《数据可视化基础：制作信息量大且令人信服的数字的入门指南》) 作者将其手稿（manuscript，非最终图书编辑发布版本）公开，使用 Bookdown 发布。

注：Bookdown : 用 R Markdown 实现的用于发布 HTML,PDF, ePub 及 Kindle 书籍的工具

在线版： Fundamentals of Data Visualization

Automate the Boring Stuff with Python (2nd Edition)

Python 基础教程及使用 Python 自动化实现常见任务的教程。

在线版： Automate the Boring Stuff with Python

Laws of UX: Using Psychology to Design Better Products & Services

此书关于用户体验法则，书中本身的内容较在线版丰富。每个法则下都直接给了详尽的背景知识及案例。此书配套的网站有很帅的设计，给了法则的定义、来源吧及拓展阅读资料等，如果想要在同一个地方完整阅读相关法则的方方面面，可能还是得看书。

在线版：Laws of UX

Google Play Books

Sat, 05 Dec 2020 00:00:00 GMT

最近发现香港的 [Google Play Books](Books on Google Play) 是个宝藏，

设计、IT、艺术类书记以及主流大厂（例如 O’REILLY）出版的读物 Google Play 都有，年代久远的版本也能找到
可出售的书都有样章可直接在网页中预览
标价为港币，售价大都比Amazon便宜
如果是 Google One 的用户，则会直接从已绑定的信用卡里扣款，购书体验是便利的
接着就可以在网页中预览全本
网页阅读器对内容做了图片化防盗版处理，但同时依然能支持字体缩放及浏览器窗口自适应（这一点果然很 Google）
如果喜欢在手机上阅读，可安装 Google Play Books 的移动版 App
如果你已经购买了其他图书的电子版，Google Play Books 上传 ePub, PDF 等格式的文件，并自动将其转换为支持网页自适应的版本（再次赞一下 Google 的自动转译排版水平）

基于以上体验，非常推荐方便使用 Google Play 的读者使用。除了英文版读物，港版的 Google Play Books 也收入了大量香港或台湾出版的繁体中文版书籍杂志（例如 National Geographics 国家地理杂志的繁体中文版，售价约为42港币）。

Spotify 2020年度榜单背后的故事

Thu, 03 Dec 2020 00:00:00 GMT

Top Artists

1. 名渡山遼 Ryo Natoyama

日本 Ukulele 演奏者，因为遇见他的专辑《Best Ukulele Ballads》在2020年夏天喜欢上了 Ukulele。这张专辑循环播放了好几个月，其中的那首 Endless Dream 也位列 Top Songs 第5名。

2020年6月，跟通利琴行电话预订了一把 Ukulele。7月1日，在沙田新城市广场的通利琴行取到了琴。接下来的几个月，几乎每天都会坚持拨弹几下。自然，我偏爱指弹风格多一些(Fingerstyles)。

2020年12月，其实最近心中的 TOP SONG 第一名应该是卢广仲的《刻在我心底的名字》。遇见了张维恩编曲的Ukulele版本，也爱上了。

意外的是名渡山遼是1993年生人，虽然一开始总觉得他是一位大叔。

当然日本还有位十几岁就很知名 Uku 演奏者，但他的曲风太少年热血了；也听了听更加有名的 Jake 的曲子，但还是更喜欢 Ryo 的纯粹、沉稳。女性演奏者里喜欢 Cynthia Lin，尤其是那张《Ukulele Days》里的弹唱。

Best Ukulele Ballads by Ryo Natoyama on Spotify

2. G.E.M 邓紫棋

邓紫棋处《摩天动物园》的时候正直香港的特殊时期，她的歌词写得让人太有共鸣，MV也一流。最近她新出的单曲《孤独》的歌词也是。

摩天動物園 by G.E.M. on Spotify 孤獨, a song by G.E.M. on Spotify

3. 梁静茹

她是2019年 Spotify Wrap Up 里我的年度关注歌手。也许是她今年上半年新专辑的关系，竟也升到了第三。虽然这张新专辑《我好吗？-太阳照常升起》也很好听，但总觉得太忧伤。其中最爱的是那首短短的开场曲《微光》。

微光, a song by Fish Leong on Spotify

4. Taylor Swift

其实今年并没有听太多首 Taylor Swift 的歌，她之所以上榜是因为那首《 The Man》有段时间单曲循环了太多次。

好希望自己是男生哪，不会有生小孩的生理和心理负担，自信自己有能力经营事业，照顾好家庭和伴侣。其实不是性别的问题，只要妊娠和分娩的受体能让更想要小孩的一方去体验就好。～可惜，这是个复杂的哲学问题。现实又不得人选择，毕竟这个物种的寿命有限。

The Man - Live From Paris, a song by Taylor Swift on Spotify

5. Selena Gomez

Selena（赛琳娜）是贾斯汀·比伯的前女友，曾经得过红斑狼疮。如今比伯已婚，他们的相爱已成往事，她的那首《Boyfriend》的编曲真动情～整张专辑的风格有如凤凰涅槃。

Boyfriend, a song by Selena Gomez on Spotify

Top Songs？

Spotify 列出的 Top Songs 的第一名「想见你想见你想见你」，其实并非最爱，总是记不起它的名字，也没有 like 过。不过因为订阅了最Hit华语榜，而这首曲子长期位列榜首，它便成了被优先播放的那一首。榜单上列出的第2、3、4名是同样的情况。 GEM 的《句号》是很有故事，不过更喜欢她专辑里的其他歌。第五名 Endless Dream 才算得上 Top。

Endless Dream, a song by Ryo Natoyama on Spotify

另外还很喜欢阿朵的《死里复活》，乘风破浪的姐姐里的宝藏大概只有她。

阿朵《死裡復活》秀原聲專輯 (錄音室版) by 阿朵 on Spotify

Tyke: 驻在Mac菜单栏的草稿纸应用

Sat, 14 Nov 2020 00:00:00 GMT

介绍一款迷你又实用的 Mac 应用 Tyke - 驻在 Mac 菜单栏的草稿纸应用（a little bit of scratch paper that lives on your Mac menu bar）。由前 Slack 软件工程师 Andre (@torrez) 创建。

最近使用 Tyke 让我体验特别好的场景是开远程会议且讲者分享屏幕的时候。因为一边需要跟进屏幕上的信息，另一方面需要快速做些笔记。然而桌面上已经大大小小开了许多窗口，一旦切换，其他窗口可能会覆盖当前窗口，亦或是需要额外的搜索或切换来实现。桌面一团乱的时候，只要将鼠标移至屏幕顶端的菜单栏，点击Tyke 图标，一款简单的“草稿纸”即刻出现在屏幕右上角。远程会议软件里分享的屏幕画面依然在那里，而你可以在只占屏幕空间很小一部分的位置快速记录要点。

另外，当需要在富文本编辑器中粘贴内容，而内容文本来自带有特殊样式的网页，或邮件客户端时，我也会先将文本粘贴到 Tyke 里以清除文本格式；再将干净的文本粘贴到相关的富文本编辑文档里，避免不必要的样式混乱。

就这样不知不觉，Tyke成了我的Mac装机必备应用，而且也是唯一一个我会手动添加至开机启动程序里的应用。它也是几乎我每天打开电脑多多少少会用到的应用，使用频率很高。

这就是 Tyke 的两个主要用途：

快速笔记
粘贴为纯文本

安装包只有 2.8MB，免费，就是这么迷你又实用。如果给它起个中文名字，我会叫它“拈來”，“信手拈来”的“拈來”。

Tyke 应用官方网站：tyke.app

应用于 HTML 的图标 SVG code 的优化方法

Sat, 07 Nov 2020 00:00:00 GMT

问题

最近在做项目交互原型设计时尝试将在 Sketch App 中的图标 SVG 代码直接复制粘贴至 HTML 原型中，并通过设置 fill="currentColor" 或 stoke="currentColor" 让图标能直接继承 active, hover, focus 等不同交互状态下的色彩，还可以直接通过 class 来定义图标的大小、空白等多种属性。相对引入图片文件，inline svg 能带来更好的网页加载性能，及更灵活的样式自定义。

然而，使用 Sketch App 右键菜单对 icon 图形 “Copy SVG Code” 后得到的代码”又臭又长”，既有换行锁进，又有版本号、title等非必要信息。稍微复杂的图形的代码更是一大块，粘贴进 HTML 后会影响 HTML 结构的可读性。你需要手动清理那些非必要的代码，修改预设的颜色定义方法，并将过长的 SVG 代码块收起。

解决方法之一

若是使用 Sketch App 等软件设计的图标，怎样才能得到干净快速可用的 SVG code 以嵌入 HTML 使用？

如果是 Mac 用户，可以下载 ImageOptim 这款开源的图片优化 App。你可能听说过 ImageOptim 能够压缩 .png, .jpg 等图片尺寸，但同时它也适用于 SVG 格式图片。

在 Sketch App 或其他桌面端图形软件里将相关 icon 图标单个或批量导出为 svg 格式
将导出的 .svg 文件拖入 ImageOptim.app 里，svg code 即刻得到优化。
将 .svg 文件在 IDE 中打开或使用 textEdit.app 打开，即可得到优化后的 svg 代码

因为是优化代码，所以 ImageOptim 优化 svg 格式文件的速度大大快于优化 .png 或 .jpg 格式的图标文件。

下图是 caret right icon 由 sketch 导出的 SVG code （图左）和经过 ImageOptim 优化后的 SVG code（图右）的对比：

备选项

如果希望使用在线的 svg 优化工具，可以考虑使用 icomoon App。
尚未试过 Figma Copy SVG code 的功能，只能猜测这款本就基于 Web 的图形设计 app 在导出 SVG code 时会有相比 Sketch 更佳的表现。但有些项目就是受制于不方便用在线软件呀。

关于平衡工作、副业和爱好的认知

Sun, 25 Oct 2020 00:00:00 GMT

在 Medium 上读到 Nicole Zhu 关于平衡工作、生活和爱好的一篇文章 Lean in or lie down? Balancing jobs, side projects, and hobbies，很有共鸣，记录一二：

工作 (work)、副业 (side project)、兴趣爱好(hobbies)、无所事事都有其作用。即使有这些东西让我们越来越难以将工作和玩耍分开，无论是注意力经济和社交媒体，还是gig经济和我们目前残缺不全的全职工作体系，但还是要认识到你是如何思考如何花时间的，从而认识到你所重视的东西。

自我保健是一种实践，而不是一次性的事情。探索新事物，重新发现旧的爱好，重新与人沟通，促进你的关系。这是关于为你找到平衡—什么是感觉有意义的工作，什么是激发快乐的事情，什么是教给你新的东西，什么是感觉恢复性的。同时也不要忘记这一切的人性方面。正如贾-托伦蒂诺所写的那样，我们身上有 “一些部分不是为了达到不可告人的目的，而是仅仅为了存在而存在”。

请记住，正如安-弗里德曼所写的那样，“个人的快乐才是爱好”，追求你的目标永远不应该优先于你的幸福，以至于倦怠。不要给自己太大的压力，以至于你喜欢工作的事情变成了负担。

Don’t put so much pressure on yourself that the things you enjoy working on become burdens.

「所向披靡」的设计系统

Sat, 22 Aug 2020 00:00:00 GMT

你做过设计系统吗？

如今，“设计系统”这一名词在圈里很火。而大约七八年前（2013年左右），”设计系统“还默默无闻。

当时，以软件为服务（SaaS）的企业已逐渐意识到体验和用户界面对其商业的影响力，开始重视用户体验设计师的招募，“设计指南（design guidelines）”、“样式指南（style guidelines）”已开始进驻企业，将设计原则于前端代码相结合，让产品的设计及开发团队在用户界面的元素、样式、结构、组件及前端代码实现的一致性上达成统一。这样的由设计师和工程师共同创立及维护，为产品团队成员在用户界面使用及应用上形成共识的“设计指南”和“样式指南”是“设计系统”吗？

我觉得是，只是那些年还没有人用“设计系统”称呼他们。

那些年，我们建立的“设计系统”

当时，自己正在给某企业级在线学习及绩效管理平台做用户体验设计及用户界面设计。为了能快速让开发团队和新加入的设计师对产品用户界面构造达成一致，我和开发的一位 tech lead 协作，一起用 HTML、CSS、JavaScript（jQuery）构造了一套该平台核心产品的可用性指南“Usability Guidelines”，内容结构参考了当时的 Bootstrap。这套指南当时是完全开放给公众，虽然主要是由核心开发团队使用，不过也会给到负责定制化服务的其他团队甚至是售前给产品加分。

曾经设计及维护的某企业产品可用性指南

那么，这样一套未被命名为“设计系统（design system）“ 的可用性指南就不是设计系统了吗？

大厂的设计系统

以 Google Material Design 为例

过去这十几年，大厂们诸如 Google 的各项产品的用户界面已经历了一轮又一轮的变革。这些年，直到 Google 的设计团队推出了 Material Design 并耗费数年强势应用在其所有产品之中，谷歌的用户界面设计语言才步入又一轮的稳定发期。记得当年 Gmail 的一版界面一度已十分成熟好用，但因为 Material Design 的强力应用，刚发生改变时的界面一度遭受批评。Material Design 的设计语言也伴随着产品的应用不断演化及微调以尽可能适应及平衡所有类型的产品，让他们在 Google Material Design 的语言风格下又散发着各个产品独特的味道。

2020年的 Gmail 收件箱界面

2011年时期的Gmail 界面，这个版本一度深入人心，后来应用了早期 Material Design 版本的Gmail界面一度遭受用户的强烈批评。图片来源：Official Gmail Blog: Changing information density in Gmail’s new look

2008年是 Gmail 收件箱部分界面及聊天窗口。图片来源：Official Gmail Blog: Tip: Edit contacts right from your chat list

单看 Gmail

就单一产品视角来看，一款产品在一个时期内始终都拥有着产品自身的设计系统。无论这套设计系统是否被可视化成一份文档和各种格式的界面设计文档，这套设计语言及其应用的共识是存在于产品设计师、开发者、测试人员、产品经理等产品团队成员之间的。

就Gmail而言，我们能不能说早在2008年，Gmail 就有了一套自己的设计系统，只是随着 Google 这一品牌视觉的演进和平台层面的设计体系 Material Design 的建立，Gmail 将自己原有的设计系统和平台定义的新一套的设计系统重新进行了联结。

Gmail 一方面保留了其以用户需求为核心的网页界面布局和核心交互，一方面主要在品牌视觉和交互细节层面引入 Material Design，以期强化用户对 Google 这一品牌的品牌印象，又避免影响 Gmail 其已得到验证了的对用户友好的核心界面布局（例如将所有对话以聊天的形式叠加，以及星标记号的位置等）。

就 Gmail 自2007年至2020年的用户界面设计语言的演化来看，他们的区别更多的是在于品牌视觉传达及界面的视觉语言层面。而从真正影响用户是否使用这款产品的那些具有价值的功能来看，显然 Gmail 最核心的那些功能可谓始终如一。对于国人来说，QQ聊天软件也是如此。

对比 Google Material Design 体系下的其他产品

同为 Material Design，Google 家的其他产品界面可能有着很不一样的界面布局，但又秉承了同一套的设计理念和品牌界面视觉风格。

例如2020年的Google Maps，右上角的用户账号和产品切换入口与其他产品保持一致，但地图本身的用户的布局与 Gmail 大不相同

站在平台或者品牌的角度看，Google Material Design 这套设计系统不要求前端框架的一致，不要求页面布局统一，而是首先以用户使用需求和产品实现上来构思界面布局和框架，在更顶层（high-level）的角度去跟进这套设计体系，而不会就具体的组件样式要求达成一致。例如，2020年版的 Google Maps 的主搜索框和 Gmail 的主搜索框的界面样式及交互流程并不统一。

2020年8月 Google Map 的搜索框样式

2020年8月 Gmail 的搜索框样式

注：不看不知道，Gmail 的搜索框在前端实现上竟然还用了一个大 <table> 框住其主输入框。

然而，Google Map 和 Gmail 都应用了基于 Google 品牌视觉风格的 Material Design 设计系统。那么有没有哪些界面语言是一致的呢？有的，例如但看搜索框样式，我们可以发现两款产品在图标样式、字体选择和 input 的圆角度数上是统一的。

即便有如此的不统一，作为 Gmail 和 Google Maps 的老用户，在使用产品的过程中并不察觉同一UI设计模式在视觉和布局上的不一致为我的使用带来了不便。

若你是 Google Material Design 的设计负责人，你是否觉得值得花时间要求 Gmail 和 Google Map 设计团队将搜索框的搜索图标位置加以统一？抑或是你觉得既然当前的界面大体上符合品牌视觉规范，用户在使用不同产品时都能顺利完成任务，大可以给产品各自的设计系统以足够的灵活度。

设计系统宣扬的一致性是否会抑制创造力和灵活性？

就设计系统宣扬的一致性是否会抑制创造力和灵活性，前阵子读到了设计师 Mark Boulton 写的一篇批判性思考文章 The Ugly Truth about Design Systems 让我印象深刻：

“… once you move from design to manufacturing the horse has bolted. It’s very difficult to move back into design because the results of the system are in the wild. The more strict the system, the less able you are to change it. “

“的确，许多设计系统是制造和大规模应用的蓝图。但在我能想到的几乎每一个例子中，一旦你从设计转到制造，马就已经跑了。因为体系的结果是在野外，所以很难再进入设计。越是严格的系统，你越是无法改变它。这就是为什么宽泛的原则、足够的治理和方向性的例子远比锁死的饼干要好得多。当然，后者会让你在短期内走得更远更快，但前者会给你留下评估、迭代和创造的空间。”（硬翻）

-Mark Boulton

Ethan Marcotte 的文章 The design system we swim in by Ethan Marcotte 也能引发相关的思考。

Derek Shirk 整理了相关批判和思考，整理了避免rigid死板的设计系统的一些可能性：Less rigid design systems - Cloud Four
- 使用类似 TailwindCSS 那样的 sprinkling in a utility library 而非给 component 名字命名的 So you need a CSS utility library? | CSS-Tricks

创建一套设计系统模版作为其他产品设计系统的 starter kit？

想做一套类似 AntDesign 那样的通用设计系统及组件库，目的是解决其他产品设计和开发过程中设计系统从零开始导致的效率问题？

如果只是纯粹的UI设计练习或基于特定语言的组件开发，自己从零开始一套组件系统的设计并制定一套自己的设计语言规范确实是很好的一种练习方法。

然而，如果不是为了设计和开发练习，而是假设一两个月后你从零开始设计开发的一套设计体系能为开源世界中其他的设计开发团队用于新产品启动，通过一套带有基础设计元素、UI组建的设计搞及特定框架语言的代码以期能减少流程中的工作量，这种假设能通过目标用户的验证吗？我对此表示担忧。

再回忆 Google Material Design 刚应用到 Gmail 时遭到的批评，及其之后数年持续快速的优化改进才获得了一个能够适应用户的版本。即使是大厂推出的设计系统，一开始在真实的产品中应用测试也会出现反而影响了用户完成目标任务的问题。那么一套缺少产品基础的设计系统，未经真实产品的使用验证来帮助自己认识到系统存在的问题，又怎么能够期望这一套壳就能节省另一款产品在设计层面的启动时间能？不过开发的部分在相关产品使用同一套框架时有可能有用，毕竟前端框架常常有坑。

再参考 Gmail 和 Goolge Maps 对 Material Design 的应用可以发现，这两款产品的用户界面核心布局并不依赖 Material Design，其UI设计模式的选择是基于产品对用户提供的价值以最大限度满足用户需求。而在选择 UI 设计模式，例如 Google Map 的可展开收起悬浮面板时，还没到参考具体设计系统的时候。这个过程的关注点还是用户是否能够顺利完成任务的可用性验证。

也可以这么理解，如果今天 Google 放弃了 Material Design，而决定所有产品改用 BootStrap 5 的默认 UI 风格，Gmail 和 Google Map 依然可以像换主题一样把那些图标、字体、圆角度数和交互链接按钮的主色换掉。

也就是说，如果两个月后隔壁公司希望能够开始新产品的设计和开发，设计一开始要选择的不是一套通用的设计系统，而是用户界面设计模式（UI Design Patterns）来使其产品满足用户的使用需求以最大化其产品价值。这个阶段的产出可以是手绘的线框图，也可以是低保真的原型。如果这时候你做了一套所谓的通用”设计系统“的设计稿，并附有 Figma 或 Sketch 版本，那么这套系统确实可以用于快速构建中底保真度的原型。但这样的系统是不是叫“模版”或“UI kick-off starter kit”更合适？

这个世界上已经有那么多的开源设计系统，比如 Material Design，你本就不必从零开始。世界上本就已经有那么多没有版权问题免费使用的 UI Kits，你本就可以选择不从零开始。

而 UI Kit 的市场是一片红海，网上有大量耗费了许多心力时间构建的高质量的设计系统，如果走的是这片海，那就只有世界一流水平的 UI Kit 才能脱颖而出。如果产出物不够世界一流水平，那么它的影响力肯定很有限。

设计系统是用来达成共识的

数字化产品领域的设计系统就像传统图形设计行业的品牌视觉指南。传统图形设计行业中的设计指南主要是让图形设计师和印刷工匠达成共识，即使一个老工匠生病了，那么新工匠接手统一项目时，只要参照这份指南，就能印刷出和老工匠一样质量一样标准的成品。

数字世界的设计系统也是一样，它让设计师和工程师以及与构建同一产品相关的其他角色都能对构建方法和指导思想达成共识。就好像室内设计装修，设计师定制好会议室需要哪些家具陈设及物件，装修师傅定好这些家具物件具体的组装方法，还可以给不同的房间一些个性化的主题，这样，即使几个设计装修小组同时开工，最后呈现出来的会议室也都照着业主一开始的预期进行及交付，保质又保量。

未来

如何正确理解设计系统的作用。若要提升产品设计开发的效率，我们需要的是是另一本设计系统模版，还是全新的能带来流程变革的工具和方法？我觉得是后者。

曾经构想过未来也许我们只需通过定义一组变量参数，就可以完成对核心组件设计规范的定义。这也是不少设计师曾经提出的 Design API 的思路。也许有那么一个平台，你只需要选择用色的色值，字体、字号的组合，即可预览全套UI 元素、组件并选择对应框架到出相关UI样式定制文件方便前端开发快速应用。

未来，对于设计师来说，可能需要更多的计算机式（computational）的技能来带来变革。无论 Figma 还是 Sketch，当那天到来时，他们可能都会成为曾经的 Photoshop。

希望你我能成为那个引领变革的人，而非依赖当下的那个人。

阅读笔记：引导远程工作坊 Facilitate Remote Workshops

Fri, 21 Aug 2020 00:00:00 GMT

Photo by Sharon Pittaway on Unsplash

在 Medium 上读到 UX Collectives 专栏下 Krista Siniscarco 写的关于 Facilitating remote workshops 远程工作坊引导的文章，对于远程办公环境下需要跨区域协作的工作坊引导者来说是很好的经验和指导。本文是此文的阅读笔记，希望在未来的实践中能少走弯路。

第一部分：最佳实践，经验和教训

原文出处：Facilitating remote workshops. Part 1: Best Practices, Experiments… | by Krista Siniscarco | UX Collective

1. 重要贴士

将时间限定在1-2小时。超过2小时的工作坊会产生在线会议疲劳，影响生产效率。
了解参加者数量很重要。这将直接影响特定的活动、时间盒划分以及远程引导者的数量。最好能够尽早敲定参加者数量，并更严格地限制某些类型的工作坊或活动的参加者数量。
更大的小组需要多个引导者。 zoom 的分组功能可以实现小组分组。每个小组都需要一个引导者： Zoom breakout rooms
在线协作空间很关键。例如以 Mural 作为在线白板，用于生成便签上的想法，亲和力、贴图、捕捉笔记、计时、点赞投票，会让你的生活变得更加轻松。
若有可能，使用两块显示器。一块用于屏幕分享，另一个块用于看参加者的画廊式列表及聊天窗口。这将便于引导者跟进各种活动。
鼓励每个人开启他们的摄像头。这看起来似乎很明显人们一般会保持视频模式关闭。看见面容对互动协作很重要。我们需要能够通过面部表情及身体语言来成功引导工作坊。花一些时间叫参与者开启他们的视频。

2. 实验和教训

a. 提前设置好模版

例如使用Mural 预先设计模板
包括会议日程，基本介绍，标注标签的区域用于特定的活动和分组
如果有时间，最好将引导者的名字和小组组员的名字也提前写好。
记得要锁定模版中的框架元素，避免参会者不小心移动了他们。
写会议指南的时候要掌握好平衡，避免过度精细

b. 减少20%的计划活动

一开始也要先设定目标从而决定选择对的活动。
计划会议日程盒时间划分
减少 20% 的活动量并给每一步增加额外的时间

c. 远程的草图绘画可行

绘制草图（Sketching）能让更加抽象的东西变得具体以传达想法。
远程工作坊最好在一个小群组（少于10人）里进行。
若需要绘制草图，最好预先通知参加者他们需要准备马克笔盒空白的纸张。
当草图绘制完成，你可以请参与者拍照并上传文件至协作空间。
另一种方法时请参加者将他们的草图举着镜头前，然后请引导者截图上传。

d. 增加2分钟的拉伸休息时间

视频会议疲劳时真实存在的
一个有助于对抗疲劳的方法时把一场会议通过休息时间拆分
给每个人2分钟时间站起来拉伸或从他们的电脑前走开

e. 包含口头签到

远程会议签到比较困难
你可能经常需要有意识地暂停并询问大家有没有问题。
在远程会议中，人们常常更加犹豫是否应该举手发言或澄清是想
这就是为什么我们鼓励人们要打开他们的摄像头的原因

第二部分：挑战，局限和前瞻性思考

原文出处： Facilitating remote workshops. Part 2: Challenges, Limitations, and… | by Krista Siniscarco | UX Collective

1. 引导者需要更积极地设定期望和重复指示

相比线下工作坊，远程工作坊需要引导者和协助者更积极主动地设定期望和重复指示。

可能的解决方法： A. 发出一个 Mural 教学视频 B. 创建一个 ‘Sandbox’ 以提供机会给参加者提早熟悉工具

2. 取得一致意见或决定的挑战

使用绿、黄、红状态指示来开始一段对话

绿色：我同意并对继续感到舒服 Green — “I am in agreement and comfortable moving forward.”
黄色：我有些犹豫所以我希望能够具体谈谈 Yellow — “I have some hesitations that I would like to talk through.”
红色：我很担忧，我觉得现在不应该继续Red — “I have serious concerns and am not comfortable moving forward right now.”

要求每个参与者依次陈述其身份。这样可以确保每个人都有发言权和机会陈述自己的意见和疑虑。如果需要更多讨论，这将提供一个方便对话的切入点。

3. 形式上的限制

协作设计及实体原型活动受限。解决方法：限制相关活动仅使用便利贴及草图。

4. 前瞻性思考

一些值得我们思考的问题

How do we offer workshops when things start to return to normal but aren’t quite there yet?
How do we manage a workshop if half the participants are in the same room and the other half are online?
What would a hybrid model look like?

5. 建议

Positives 和 Deltas columns 收集反馈

在 Mural board 里添加 positives 和 deltas columns，让参会者在离开前留下一些反馈。 This can be as simple as adding columns for positives and deltas into your Mural board ask participants to add a few post-it notes before they sign-off

积极之处（Positives） - 哪些部分workshop做得好并应该继续
三角洲（Deltas） - 哪些东西增加了摩擦，我们需要在未来的workshop里改变

像设计体验一样设计工作坊

当我们不在同一个房间里时，建立信任和融洽的关系很困难。

不仅要考虑会议过程中要做什么，还要考虑工作坊的前和后。可以考虑一下问题：

事前你需要给参与者进行哪些沟通以设置期望，让他们提前准备并感到兴奋？
workshop 的 takeaways 和跟进事项会是什么？
如何中工作坊一开始向参会者问好？
参与者中等待其他人上线时需会看到和听到什么？你是否需要为会议还没正式启动是做一些audio 或其他感官体验上的准备？
您是否向与会者发送了他们可以继续使用的数字或实物制品？

This is an opportunity to flex our design muscles, show our creative thinking, create a memorable experience, and build relationships with our clients in an unprecedented time. 这是一个发挥我们的设计力量，展现我们的创意思维，创造令人难忘的体验，并与客户建立关系的前所未有的机会。

By Krista Siniscarco

拓展阅读

对比面对面工作坊和远程工作坊 Comparing in-person and remote workshops
如何完善和利用远程用户体验工作坊 How to Perfect and Leverage Remote UX Workshops | Toptal
- 例如可以考虑将绘制的草图通过拍照和即使通讯工具发送
- 参加头脑风暴会议的人可以将他们的想法输入在线电子表格

网格系统设计5步

Wed, 24 Jun 2020 00:00:00 GMT

这篇关于文章是英国设计师 Mark Boulton 2005 年于他的个人网站发布的。虽然时隔15年，但现在读来依然实用。算是设计师入门的基础技能吧。本文是阅读笔记，非全文翻译。

本文内的附图来自 Mark Boulton 的相应文章内容，原图请点击分块标题下的原文链接查看。

Part 1：划分比例

原文： Five simple steps to designing grid systems - Part 1

Ratios 比例是任何好的网格设计系统的核心。有时这一比例是整数比，例如1:2或2:3，又是是非整数，如1:1.414（A4纸的比例）。第一部分是关于如何整合这些比例以创建简单、平衡的网格来帮助你实现和谐的排版。

从一张空画布开始

例如你需要设计一个画展的程序，并且你知道需要 A4 的尺寸，那就放置一张你需要的尺寸的画布，一张空画布。

细分比例

设计一张对称的网格可以基于纸张活画布的宽高比例做进一步的划分。例如这个案例中纸张的比例是1:1.414，那么就可以使用纸张的比例来划分所有的子网格。这种方法可以网格之间，网格和纸张尺寸之间保持关联性。

这也是最简单的创建一张平衡的网格的方式。

发挥创意

基础网格建立后，就可以开始体验信息累心的不同区域、形状和排版组合：

Part 2: 比例和复杂的网格系统

原文： Five simple steps to designing grid systems - Part 2

与网格系统有关的

背景文章： Design and the Divine Proportion 设计与神圣的比例

在传播的载体中，有一个重要的组成部分就是构图（composition），而在设计学校的教育中，构图是被教导为应该去感受（the fealing）而不是去逻辑地创造的东西（create logically）。这一直困扰着我。

许多设计师构图凭的是感觉而不是逻辑思考。然而设计学校是有教黄金分割的（The Golden Section or the Divine Proportion）。黄金风格的比例数值叫 Phi。Phi is 1.618033988749895。

在设计沟通中使用黄金分割比例可以提高你的设计传达。因为 Phi 构建了大脑能够理解的自然语言。

使用黄金分割进行沟通的示例，用较短边的宽度乘以 1.62来获得长边的边长：

回到网格设计，使用黄金分割比例来构建网格可以创建兼具平衡和美感的构图。

‘Aesthetic Usability Effect’ 审美可用性效应：被设计成美丽的东西，本身就会因此而更加可用。

Well designed grid systems can make your designs not only more beautiful and legible, but more usable.
好的网格系统设计不仅啃一让你的设计更美观、更易读，而且会更易用。

Asymmetrical grid 非对称网格

简单步骤：

第1步：构建页面

第2步：应用黄金分割

第3步：创建网格系统

第4步：添加吊线 ’hanging lines’

第5步：体验内容排版

Part 3：网页设计中的网格系统

原文： Five simple steps to designing grid systems - Part 3

Part 1 & 2 的案例是基于传统的印刷媒介做网格设计。但是到了web 就不同了，还要考虑技术的实现、和不同屏幕尺寸大小的适应性问题。

我们能做的事设计能够适应数字媒介那些变化的网格系统。这类基于columns的网格系统编程了一种惯例，因为他们能被快速实现且能输出跨平台且稳定的layouts。然而当设计师的问题变成“我应该安排多少列”时，这已经不是网格系统设计。

Part 4: 网页设计中的网格系统（固定的 fixed）

原文： Five simple steps to designing grid systems - Part 4

简单、美观的尺寸和模块化思维

若以 800 x 600 的页面尺寸为默认尺寸开始，我多年来常以 760px x 410px（410px being the fold 首屏）为最小尺寸。

接着用设计印刷品网格的那套为网页构建网格系统：

上图网格系统中的内容与导航区域是基于三分法则（Rule of Thirds，大致接近黄金分割比的比例）。然后再将每个区域二分。至此便完成了水平方向的网格划分。

垂直方向的网格划分也同样重要。因为当用户改变文字大小是，元素在垂直方向的高度会发生变化。

关于列间距 Gutters

网格系统中其实并不存在 gutters。Gutters 和网格中的列是独立存在的。在网页实现时，这些元素之间的间距可以通过 padding 或 margin 的创建来实现。此文便不赘述。

接下来便可以在这个网格系统之上开始填充内容，并做到精确到像素的对齐。

从图形编辑器到浏览器

若要确保在浏览器中实现的元素布局严格遵循这一固定尺寸的网格系统的标准，实现时可嫩更需要构建一层固定的带半透明背景色的网格系统作为参照。

Part 5: 网页设计中的网格系统（流动的 fluid）

原文： Five simple steps to designing grid systems - Part 5

Flexible（fluid） vs Fixed 灵活的还是固定的，该选哪一种？

尺寸固定的（fixed）设计从设计的层面上更易生产。设计师可以通过测量达至易读性。

灵活的（fluid）的设计能够基于用户的浏览器分辨率自适应。可以实现屏幕的填充而不会在大屏幕上留出过多的空白。

以上两种方式各有优劣。 Millie：不过从用户体验的角度，以及 responsive design 技术成熟的角度看， fluid layout 对用户来说是更负责任的。当然也大大增加了设计师的工作量。

自适应的网格系统 Adaptive Grid Systems

为了适应用户浏览器的实际大小以达至最佳易读性，以下元素的尺寸是可以变化的：

1. 用户可以变更字体大小 font size
2. 用户可以更改浏览器窗口大小 browser window size
3. 用户可以更改屏幕分辨率 screen resolution

灵活的网格系统的关键是网格必须自适应这些变化。因而自适应网格的关键组件是：

1. 网格元素能够适应用户作出的更改
2. 网格必须保持其原始比例

再次，这是关于比例的问题

我们可以使用黄金风格比 1:1.618 来切分网格
使用正确的尺寸单位我们需要使用基于比例的单位 “%” 或 “em” 来作为尺寸单位而非固定的 “px”。 Millie：因为屏幕像素是一个一个固定大小的点。若继续使用‘px’ 像素为单位，当使用非整数比时的计算出现小数点时，则在屏幕实际渲染时难以得到精确的结果，会出现像素偏差。而 ‘em’ 是基于 point size 来计算的。

以百分比来计算：

Mark Boulton 还发布了许多关于设计系统的思考，也很有启发。比如这篇： The Ugly Truth about Design Systems

UX Strategy 用户体验策略阅读笔记

Tue, 09 Jun 2020 00:00:00 GMT

以下是阅读 Jaime Levy 的 “UX Strategy: How to Devise Innovative Digital Products That People Want” （《用户体验策略：如何设计出人们想要的创新数字产品》，2015年版）一书中的纲要和笔记：

UX Strategy 图书封面

Chapter 1. 什么是用户体验策略？

用户体验是“商业策略”（Business Strategy）和“用户体验设计”（UX Design）的交集。

体验策略 = 商业策略 + 用户体验策略

Experience Strategy = Business Strategy + UX Strategy

对用户体验策略的误解

误解1：用户体验策略是关于识别“北极星”

~~UX strategy is about identifying a “North Star”~~

识别“北极星”是用于大型慢速推进企业的传统商业策略方式，不是用于快速推进的创新数字产品。

应该在每个循环周期中寻找适当的目标和重点。

误解2：用户体验策略是实现用户体验设计的“策略性的方式”

人们以为策略和设计是两件不同的事，UX design 是创造东西，UX strategy 是在创造前制定计划。

用户体验设计师只专注在产品上却不知道整体商业策略会导致对需求文档的盲目接受。

事实上，用户体验设计应扮演更强大的领导者的角色（“在策略制定上拥有一席），将不同功能团队紧密粘连在一起。这也是为什么 Lean UX 这么流行的原因。

误解3：用户体验策略只是产品策略

现实世界里的商店体验设计者的思考方式和电商网站体验设计者的思考方式是非常不同的。

UX strategy 不只是关注数字产品或线上体验，它涵盖了不同的数字产品、服务和平台，让数字界面家族的所有成员相互联系。例如：

Apple： iPhone, iPad, Macbook, airpods, Apple Watch
LinkedIn：桌面端、手机端及高级版
Adobe：Photoshop, Illustrator 以及云端服务等
Amazon: Prime, AWS, Kindle

用户体验策略通过用户体验设计让卖家和买家之间的所有接触点有意义，并将他们编织成一个无缝连接的生态系统。

误解4: 用户体验策略与品牌策略紧密捆绑

品牌策略是关于计划怎么样、用什么、在哪里、在什么时间以及面向谁通过你的分发渠道沟通及传达你的品牌信息。

稳固的用户体验设计不再需要与品牌做区分。例如人们预想 Google 的用户体验会是好的，Google 无需刻意宣称其用户体验良好，然而当它的用户体验不好时，就会很恼人。

用户体验策略师需要不断地调整和改变你的计划，让你的策略有效、可靠、平滑地融入所有在线服务中。无论如何一款产品需要好的用户体验。

那么究竟什么是用户体验策略（UX Strategy）？

用户体验策略是在一款数字产品的设计和开发开始之前首先进行的流程。这是一种解决方案的愿景，需要与真正的潜在客户进行验证，以证明它是市场所需要的。

我们对所有基于业务假设而非事实用户用户数据得出的研究和发现提出疑问。
我们使用最小可行性产品（MVP）原型与客户坐在一张桌子上进行游击队式的用户研究（guerrilla user reseasrch）。
我们通过使用登录页面测试客户获取情况，对新的价值主张进行试验。

Chapter 2. 用户体验策略的四个信条

作者的公式：

用户体验策略 = 商业策略 + 价值创新 + 经过验证的用户研究 + 杀手级用户体验设计

UX Strategy = Business Strategy + Value Innovation + Validated User Research + Killer UX Design

信条一：商业策略（Business Strategy） 定义方法：Business Model Canvas

信条二：价值创新（Value Innovation） 价值创新 = 差异化与低成本并举（The simultaneous pursuit of differentiation and low cost）

信条三：经过验证的用户研究（Validated User Research） 验证是确认特定客户群在您的产品中找到价值的过程。 经过验证的用户研究是基于现实检查的流程，侧重于从与用户的互动中获得的直接反馈。它帮助你的团队定义你的产品愿景是一个梦还是一场潜在的噩梦。它需要产品团队的许多成员协作进行。

信条四：杀手级用户体验设计（Killer UX Design） 杀手级别的用户体验设计师和用户体验设计新手最大的差别在于，杀手级设计师知道如何通过以下途径引导一款产品的价值创新：

与利益相关者（stakeholders）及团队成员在构想开始（idea’s inception)阶段便进行协作。此阶段的实验应聚焦于价值主张（value proposition）能否在客户打开落地页那一刻便被传达。
杀手级用户体验设计帮助定义对产品至关重要的关键时刻及功能。
他们从现有的市场空间中学习一切并识别可采用的用户体验机会。
他们直接和潜在用户或现有产品的主要用户对话，以发现和验证其产品中必须解决的问题的主要效用。
他们从所有的接触点（线上和线下）编织用户体验，以打造平滑的（无摩擦的）体验。

⚠️ 注意：北极星（The North Star）不是用户体验策略，正如现实中的北极星并不是银河系中最亮的星一样。（这是一个争议点，市面上许多相关理论仍然在以“北极星”为指标做体验度量设定。

Chapter 3. 验证价值主张

什么是价值主张？

总的来说，价值主张是一种形式的表述，它通常是能够脱口而出的一句话。

格式：它是面向 <谁> 的 <什么形式的产品>。

“It’s famous platform or app goes here for type of customers or customer need goes here!”

定义价值主张的步骤：

定义你的主要用户群体
识别你的用户群体的（最大的）问题
基于你的假定创建临时用户角色
进行用户发现（conduct user discovery))来正式或反证你的解决方案的最初的价值主张
基于你学到的重新评估你的价值主张重复以上步骤知道你的产品或解决方案适配。

Chapter 4. 进行竞品研究

教训：

在你开始新业务钱，学习关于它如何可行的一切。不要让激情冲昏了你的逻辑。
调查你的竞争对手。他们做对了什么，做错了什么，为什么客户应该到你这边来？
如果你无法搞清楚如何让它可行，承认落败。失败完全没问题。但请继续前进。

使用竞品分析矩阵工具

作者发现的最有效的用作比较竞品分析的方法是将所有的数据集中在一张矩阵里。比如Google Sheets。

Example of competitive analysis matrix spreadsheet from UX Strategy, Jaime Levy’s book.

你的最终目标是设计出一种能创造竞争优势的解决方案。

理解竞争的意义

竞争对手类型

直接竞争对手 direct competitors ：面向你现有的客户或未来客户，提供相同或类似的价值主张的公司。
间接竞争对手 indirect competitors：面向与你有所不同的消费群体，提供类似的价值主张；或面向和你一样的客户群体，提供有所不同的价值主张。

如何找到你的竞争对手并编译你的竞品列表

在开始竞品分析之前，你首先需要了解竞争对手。

通过搜索引擎结合不同的关键词搜索是一种方式。
在竞品上创建账号体验。

矩阵信息：

网站 URL 或 APP 商店 URL
用户名和密码（⚠️ 创建一个新的邮箱账号，不要使用真实姓名。）
网站用途 purpose of site
成立年份 year founded
投资阶段 funding rounds
收入来源 revenue streams
月度流量 monthly traffic
品类 SKUs/listings （可选项）
主要分类 primary categories
社交网络 social networks
内容类型 content types
个性化功能 personalization features
社区或用户贡献内容功能 Community/UGC features
竞争优势 competitive advantage
启发性评估 Heuristic evaluation
客户评论 Customer reviews
笔记 General/miscellaneous notes
给自己或团队的问题或笔记 Questions/notes to team or self
分析 analysis

Chapter 5. 进行竞品分析

竞品分析及市场机会分析的四个步骤：

对每列进行扫描、浏览，并以色彩标注高低
创建符合逻辑的组别用于对比
通过对产品属性和最佳做法进行基准测试来分析每个竞争对手（矩阵的最后一列）
撰写竞品分析发现简报（Competitive Analysis Findings Brief)

Chapter 6. 故事板价值创新 Storyboarding Value Innovation

这是关于利用设计技巧让你的团队集中精力识别和最大化你产品的潜在价值创新。以及通过你的产品的终极价值主张来加速你的思考。

时机真的就是一切。
上下文是关键
创建成功的数字产品的过程有很多方面。发明他们只是有趣过程中很小的一部分，你还需要可持续的被接纳，规模化，更广的分发，收入来源和团队。基本上，你需要一个创新的商业模式。

价值创新发现的技术

要想有可持续的市场化的产品，在用户体验策略层面需要你平衡商业目标和用户价值。

四类价值创新模式：

产品组合竞争对手的功能和相关用户体验影响者的功能进而构成新功能。例如 Meetup + 支付系统= Eventbrite
产品组合现有大型产品平台的价值主张片段。例如 Google Maps + 众包 crowd-sourcing = Waze
产品以前截然不同的用户体验整合到一个简单而关键的解决方案，让用户可以一站式完成任务。例如 Instagram 允许用户拍摄并分享手机视频和照片。
产品将两个独立且截然不同的用户群带到谈判桌上，以谈判一项以前不可能达成的交易，从而彻底改变了这些用户的世界。例如分租人subletters + 旅行者travellers = Airbnb

四种技巧：

识别关键体验
运用用户体验影响者（好的用户体验产品/服务）的（模式）优势
进行功能比较
使用故事版进行价值创新

Chapter 7. 为实验创建原型 Creating prototypes for experiments

成功的用户体验策略需要持续的产品测试来确保产品输出的解决方案是人们真的真的需要。

若参考 The Lean Startup 《精益创业》这本书，传统的瀑布式的软件开发方法恐怕已经过时。原型创建的原则也需要随之改变：

用户体验策略术语不再指向 1.0版本的发布（”launch“），而是关注创建小型增量式（small incremental prereleases）的最小可行性产品（MVP是）

用 Lean 的方法，关注关键用户流程，缩小计划范围，创建快速高保真原型。

总的来说不要吧时间花费在没有人想用的产品上。尽快使用原型作实验来验证构想。有时，结果并不是非黑即白。

Chapter 8. 进行游击队式的用户研究

通过进行小型结构化的实验，这种定型研究能帮助你立即从用户自身验证关于价值主张和创新关键体验的假说。

当你让关键stakeholder直面客户时，他们将从这个渠道快速直接地了解到好消息和坏消息。一个有组织的、协调良好的和机动的团队努力对于成功的实地研究是必不可少的。
要获取有效的学习，你并不需要投资一个昂贵或耗时的工作。

进行用户研究的目的是理解目标受众的需求和目标以定义产品的价值主张。

有许多传统技术方法可以了解用户观感，包括卡片分类、上下文查询、焦点小组和调查问卷。

用户研究通常包括可用性测试和人种学研究。他们各有优势。

**可用性测试（usability testing）**通过观察人们实时使用产品的情况来关注你的产品是否可用。从数据的角度，可以观察

用户是否通过界面执行必要任务
用户完成任务是进行了多少次点击
用户花了多长时间知道产品该怎么用

**人种学研究（ethnographic research）**则是对自然环境下的人的研究-深入到暗黑之处去定性角色。然而实地探访的人种学研究耗时耗材。若不是预算充足、大型企业或专门的长期研究项目，恐怕难以支撑此类研究的开支。

游击队式的用户研究（guerrilla user research） 则可以解决此问题。就像战争中的小型机动部队（游击队）一样，见到敌人打完就跑。那么谁是产品的敌人？产品团队的主要敌人可能是时间、金钱和资源。如果客户没有足够的时间或预算，传统的用户研究例如人种学学习恐怕需要耗费太多时间，二可用性测试未能帮助你通过关键用户体验来定义价值主张。于是游击队式的用户研究来了，它的成本有效及移动特质可帮助你快速验证以下问题：

你是否面向正确的客户群？
你是否正在解决客户的普遍痛点？
你提出的解决方案客户是否真的会考虑使用？
他们是否愿意为产品付费，如果不愿意，是否有其他潜在的收入来源模型？
商业模式是否可行？

游击队式用研计划阶段五步（一到两周时间）：

第一步：定义研究学习目标第二部：准备需要验证的问题。结合原型展示进行完整的访谈彩排（定性分析，5-10个用户即可）第三步：侦查场地及规划物流第四步：通过广告征集参与者第五步：筛选参与者并规划时间安排

访谈阶段（一天）：

准备场地
参加者费用，咖啡馆礼节及小费
进行访谈
记笔记

分析阶段（二至四个小时）：

最不复杂但最关键的阶段。及时根据分析结果作出决策。

建议围绕两个出色的方法进行访谈：

问题访谈（10分钟，发觉用户痛点洞见）
解决方案访谈（15分钟，展示原型和关键体验，问开放性的问题，不要问引导式问题） -最终想法（2分钟）

在参与者参与访谈钱，建议先通过电话或其他形式对用户进行预筛（prescreen），这样等到现场访谈时，你只需要面对面验证一遍你已经知道的事情，也会让参与者感觉舒适。你也可以将筛选时了解的信息重复一遍，看看是否有一些方面可以扩展以帮助你了解他们的体验。

场地选择

提前在访谈差不多的时间去目标场地考察，确保地点不会太难找或在相关时间太繁忙。
测试网络连接、作为数量及电源插头
避免座位接近咖啡店志愿或接近出入口

避免使用录音设备

录音设备会增加用户的自我意识
请一个人实时通过键盘在 spreadsheet 或文档工具中记录会更高效。
访谈过程中可专注于访谈，避免因调试录音设备等分神
访谈结束后可以立即基于记录的文档做决策，无需额外通过录音设备等回溯

广告征集参与者

建议给参加者酬劳，因为他们帮助了我们
费用基于目标用户的价值和时间（如果不确定，可尝试 20美金30分钟）
广告渠道：百姓网（Craig’s List）、Facebook 好友、LinkedIn 特别兴趣小组、Meetup Groups、twitter、朋友的朋友、或其他目标用户群体聚集处

广告格式案例：

Title: Paid Research Study: Looking for who have experience with

Body: Market research firm in is looking for participants to join an upcoming paid research study. The study is going to be on during the hours of <# - #> at a café in the area. Please let us know the ideal time that works for you.

The study will last for <#> minutes and the compensation is $<##.00>. (optional) The study will not be recorded on audio or video.

Please respond with your contact information and the best time to reach you. (optional) Link to survey here:

进行访谈：

握手、微笑问候
保持专业，避免寒暄式聊天
快速陈述访谈原因并引入设置的问题
跟稿读问题
确保记笔记着设定了静音/震动闹钟，避免访谈超时
确保参加者之间的时间转换
感谢参与者花时间参与以及对洞见的帮助

Chapter 9. 为转换作设计

… designing for conversion or optimizing your product.

播种增长黑客 seeding growth hackers

概念：产品团队通过极其聪明、节省成本的方式实现客户增长。

增长黑客的目标是将病毒式和付费广告活动与用户参与度指标捆绑在一起，这样您就可以确定最有价值的营销渠道。

案例使用工具：Google Analytics、KISSmetrics

教训

为转换作设计，你真的需要召集一支包括设计师、开发人员、产品经理和营销人员在内的跨职能团队。
漏斗矩阵（Funnel Matrix）技术的输出可直接形成用户流程、功能列表和需要为满足用户行为而设计或冲设计的线框列表。
这里的数据和指标能在销售漏斗的每个阶段让你为客户行为带取持续的优化和洞见。

Funnel Matrix Example

Funnel Stage	Stage Definition (customizable)
SUSPECT	A suspect is user that might possibly require your product or service.
LEAD	A lead is a potential sales contact - an indivisual or organization that expresses an interest (i.e. by providing their email address) in your product or services.
PROSPECT	A prospect is anyone who is demonstrating a desire for a particular product/service by engaging with in a value (to the business) way.
CUSTOMER	A customer is a person or organization that pays to use a product or service.
REPEAT USER	Repeat users are customers who “regularly” use your product or service.
REFERENCE	A user who refers others(evangalizes) on behalf of your product.

以上是首两列对 stage 的定义，横向还可以有以下几列：

User‘s process
Desired action
Business task （例如SEO/社交媒体活动/宣传外展/付费广告流量）
Metrics 指标（例如访问量、跳出率、首次访客比例、流量来源、目标流量来源城市或国家等）
Required functionality 必要职能（例如首页需设置 Google Analytics。配置 Twitter 账号、Facebook账号等）
Validated learnings 需经验证的学习（可以是一系列希望验证的问题）

给 UX 从业者的分析工具

企业导向的分析报告工具

Enterprise-oriented analytics reporting tools

常用工具：Google Analytics、Adobe Analytics

专注于生成详细的流量统计数据。

控制面板、漏斗转换、A/B 测试

常用工具：KISSmetrics、Optimizely、Geckoboard、Mixpanel、Totango、Chartbeat

可视化各类服务的实时数据，可用于分析客户参与度和留存度，这些工具亦关注用户分层。

邮件递送/追踪服务

常用工具：SendGrid、MailChimp、iContact、Constant Contact

基于用户系行为，精准发送消息至网站访客和手机应用的用户。

Chapter 10. 策略师们

我热爱用户测试。 I love user testing.

Its’s important to spend time with people while they test something.

秘密武器：客户体验地图 customer experience map

在每个阶段，我都会问用户他们的目标是什么，他们的动机是什么。

策略师所需重要技能和心智：

拥有健康的情商 a healthy dose of emotional intelligence

成为批判性思考者。多问为什么。

聚合多个源头的事实来形成你的观点。

倾听你不认同的意见，进而思考、判断。

自己做决定。做好犯错的准备。做好妥协的准备。

By Holly North

Chapter 11. 解体 Dénouement

事情并不总是按计划的发展。我们需要以灵活的方式去寻找新的途径以前进。拥抱生活的挑战。保持心智的活跃。
不要忽视以新的和意想不到的方式使用日常技术的机会，这些新的和意想不到的方式可以改善用户的生活，帮助解决真正的问题。
我们最终要对自己的生活负责，我们是由我们选择如何生活来定义的。我们的存在就是我们对它的理解。别浪费了。

获取此书

ffmpeg 将 mp4 视频转换为 webp 格式动图

Mon, 01 Jun 2020 00:00:00 GMT

在 React Native 等技术实现的 app 中，为了添加简单的动效或宣传动画，一种方法是通过应用 webp 或 gif 格式的动态图片以减少对视频的播放控制层面的开发功夫。若源文件为视频格式，如 .mp4 或 .mov，则需要转换格式。虽然网上有几款转换器能实现视频至 webp 动图的格式转换，但由于渲染质量、尺寸等的设置限制，往往效果未能完美。

ffmpeg 是十分强大的视频录制及格式转换的命令行工具，使用 ffmpeg 可以实现高度自定义的格式转换。本文将以 mp4 格式为例，介绍将视频转换为 webp 动图格式的方法。

关于 WebP

WebP，非官方英文读法是 weppy ‘/wepi/‘。

属性及特点：

文件格式是 .webp
无损压缩或有损压缩皆可
与 JPEG 格式图片相比，WebP 格式下的有损图片能比尺寸小 25-34%
与 PNG 格式图片相比，WebP 格式下的无损图片能比尺寸小 25%
WebP 支持无损的透明涂层，类似带 alpha channel 的 PNG 文件
WebP 支持动画，类似带动画的 GIF 文件

总的来说，WEBP 格式文件能够实现比 JPEG、PNG 和 GIF 更小的文件体积。

MP4 转为 WebP 遇到的问题

基于 WebP 图片属性无需播放控制及更小的文件尺寸的考量，最近需将 MP4 格式的动画短视频转为 WebP 格式实现用于 app 中的短时动画。一开始的方法是使用在线的 Video to WebP 转换器 ezgif 来转换格式。在线的可视化转换器操作上虽然方便，但却出现了以下问题：

ezgif 支持导出的最大webp分辨率只有 800px，难以自定义导出尺寸
使用 10fps 的帧率（frame per second）导出的 webp 的视觉效果不佳
使用 20fps 或更高帧率导出的 webp 图片的色彩损失严重。若画面使用较多色彩或渐变色，导出的 WebP 动画文件部分画面会出现马赛克效果，视觉体验不佳。

由于以上问题，我也尝试使用其他在线视频-webp转换器，例如 OnlineConverter 和 hnet，然而他们要么不支持循环播放设置，要么导出文件的色彩渲染马赛克问题更加严重。

另外，若源视频需要保密，那么在线编辑器的服务器可能会将视频存入服务器缓存，存在一定的风险。

解决方案

由于视频转换出的 WebP 属于动画模式，网上可以找到的支持此类格式的转换器数量很少，亦没有找到一款可以在本地运行的软件。不过可以找到一些通过使用 ffmpeg 的 libwebp 组件实现的转换。可惜网上的案例命令行大都笼统，没有给出太具体的 MP4 至 WebP 及设置相关导出参数的案例。终于，在参考了 ffmpeg libwebp 的相关文档之后，总结出了以下基于 ffmpeg 命令行在 MacOs 上的将视频转为 WebP 动画的方法：

1. 使用 Homebrew 安装 ffmpeg

打开 terminal.app, 输入以下命令安装 ffmpeg：

brew install ffmpeg

安装成功后，验证 ffmpeg 已安装：

which ffmpeg

执行以上命令后若 terminal 返回类似 /usr/local/bin/ffmpeg 的结果，则表示 ffmpeg 已成功安装。

2. 设置并执行视频格式至 WebP 的转换命令

以下命令行可以将名为 input.mp4 文件转化为帧率为20帧每秒，循环播放，默认渲染预设效果，分辨率为 800px宽 600px 高的无损的文件名为 output 的 .webp 文件：

ffmpeg -i input.mp4 -vcodec libwebp -filter:v fps=fps=20 -lossless 1 -loop 0 -preset default -an -vsync 0 -s 800:600 output.webp

若希望转出的 output.webp 动画只播放一次，有损，压缩级别为3（0-6，默认为4，越高效果越好），质量为70（0-100，默认为75，越高效果越好），越舍渲染为图片，可使用以下命令：

ffmpeg -i input.mp4 -vcodec libwebp -filter:v fps=fps=20 -lossless 0 -compression_level 3 -q:v 70 -loop 1 -preset picture -an -vsync 0 -s 800:600 output.webp

主要选项:

将每秒帧率设为20: -filter:v fps=fps=20
设为导出为无损质量: -lossless 1
设为循环播放: -loop 0。设为不循环播放： -loop 1
设置预设渲染模式 -preset default , 可按视频画面内容类型设置 picture, photo, text, icon, drawing 或 none。选择合适的渲染模式可导出更小的 webp 文件。 http://ffmpeg.org/ffmpeg-all.html#Options-28
将导出 webp 文件分辨率设为 800px*600px： -s 800:600

以上方法也适用于其他主流视频格式导出为 webp 或 gif 动画，更多转换选项，请参考 ffmpeg 相关文档。

Here comes the English version

The Mp4 to WebP in ffmpeg example:

The mp4

Your browser does not support HTML video.

Video by Tomislav Jakupec from Pixabay

The converted WebP

Convert MP4 file to animated WEBP file in ffmpeg CLI

1. Install ffmpeg CLI through homebrew

In terminal.app, install ffmpeg through homebrew

brew install ffmpeg

Validate the installation:

which ffmpeg

Expect to see terminal returns the directory path of ffmpeg such as /usr/local/bin/ffmpeg

2. Set webp properties and convert

Example command which would convert an mp4 file to a lossless loop playing webp file in 20FPS with resolution 800px(width) * h600px(height):

ffmpeg -i input_filename.mp4 -vcodec libwebp -filter:v fps=fps=20 -lossless 1 -loop 0 -preset default -an -vsync 0 -s 800:600 output_filename.webp

Export an animated non-loop lossy WebP with preset mode picture：

ffmpeg -i input.mp4 -vcodec libwebp -filter:v fps=fps=20 -lossless 0 -compression_level 3 -q:v 70 -loop 1 -preset picture -an -vsync 0 -s 800:600 output.webp

primary options:

set frame per second as 20: -filter:v fps=fps=20
set output file lossless: -lossless 1
set output webp file loop play: -loop 0. For non-loop, use -loop 1
set rendering mode -preset default , can set as picture, photo, text, icon, drawing and none as needed. It would effect output file size. http://ffmpeg.org/ffmpeg-all.html#Options-28
set output webp resolution as w800px * h600px -s 800:600

For more option details, please visit the the ffmpeg libwebp documentation

This method should applicable for majority video formats including .mov, .avi, .flv, etc. as input files as well as .gif format as output file.

Use OTF instead of TTF - custom font anti-aliasing for Android

Tue, 19 May 2020 00:00:00 GMT

In a recent react native project, a custom font file in .ttf that merged a Chinese typeface and an English typeface looks blurry on Android while the same font file works well on iOS.

It reads like the printer was running out of ink. Strokes vary on thickness.

Upon testing different fonts shapes by updating fonts’ ascend and descend properties through the hhea.xml files and by installing the original font otf file, it proves that the original Chinese font file renders well with the OTF format and the problem should be with the merged font file.

Finally, by converting the .ttf font into .otf format, the converted .otf file renders well with anti-aliasing result.

It sounds like an easy solution. However, as of we were lack of enough custom font format knowledge for Android rendering, it took weeks to find out what’s wrong.

In the digital world, developers and designers should work like one detective to figure out cases.

Reference

TTF, OTF or WOFF Font format?

OTF is more likely to be a “better” font, as it supports more advanced typesetting features (smallcaps, alternates, ligatures and so on actually inside the font rather than in fiddly separate expert set fonts). It can also contain either spline (TTF-style) or Bezier (PostScript Type 1-style) curves, so hopefully you’re getting the shapes the font was originally designed in and not a potentially-poorer-quality conversion.

React Native App 自定义字体在安卓系统中的行高问题解决

Sat, 16 May 2020 00:00:00 GMT

Photo by Jeroen den Otter on Unsplash

问题

在 React Native app 应用自定义字体时出现了在 Android 手机端行高与 iOS 端不一致的问题。iOS端渲染的行高与设计预期一致，而安卓里所有的文字却整体上移，导致了段落行距偏小及按钮文字不对齐的问题。

判断出错点

问题出现了，那么该如何修复？字体在React Native app 里的实现不如预期，问题可能源于两处：

字体属性
App 的源码

在跟工程师远程同步调试字体的 styles 后发现相关行高、margin 或 padding 的应用未能直接解决行高问题，反而会破坏本已正常渲染的 iOS 端的显示。

样式代码调试之后发现源码似乎并不是问题的所在，且当 app 应用系统默认字体时，文字的行距显示是正常的。

这也就意味着字体文件本身可能存在问题。

解决方案

经过一番搜索，终于在设计师 Martin Adamko 的 Medium 上遇见了这篇文章 “Consistent font line height rendering （一致的字体行高渲染）” 。作者在使用 React Native 开发 app 时同样遇到了自定义字体在 iOS 和 Android 系统下行高不一致的问题。

于是跟着这篇文章里的解决方法使用 Font Tools for Xcode 对字体 ascender 和 descender 的值进行了调整及字体再输出后一试，安卓的行高问题竟然解决了。

方法

确保 Mac 里安装了 Xcode，然后下载并安装 Font Tools for Xcode (需登录开发者账号，可用个人 Apple ID 登录)
打开 Terminal.app，使用命令行导出目标字体的 *.hhea.xml 文件，该文件存有字体行高相关属性
```
$ ftxdumperfuser -t hhea -A d pathToYourFont.ttf
```
运行上述命令行后，目标字体所在文件夹会出现一个与字体同名且格式为 .xml 的文件。打开该文件即可看到包括 ascender, descender 和 lineGap 等字体行距等相关属性。接着确保 lineGap = 0 ，然后考虑调整 ascender 和 descender 的值。
对于 ascender 和 descender 需要设什么值合适，我先用上述第2点的命令行分别调出纯 Noto Sans 中文的字体的hhea及纯英文字体文件的 hhea。经过和 app 里应用的整合了两种字体的字体包比对之后，发现 app 里用的字体的 ascender/decender 是880/-120，而 Noto Sans 中文字体是1160/-180，而英文字体的是800/-220。于是我尝试将 app 中用的整合字体的这两个值改成了中英文单独字体相关属性的中间值，即 1080/-200。
然后使用下属命令行将改后的属性更新至 .ttf 文件：
```
$ ftxdumperfuser -t hhea -A f pathToYourFont.ttf
```
这个更新后的字体文件经工程师更新调试后发现行距问题肉眼看已恢复正常。

如果第一次更改数值后发现行高问题有改善但还需要调整，可以继续按上述方法进一步调整 ascender 和 decender 的值来调试直至行高达到理想状态。

关于该自定义字体

为了达到在中文界面下的英文也能显示品牌的特定字体，App 安装的 NotoSans 中文字体中的英文字型和半角字符经 FontLab app 整合入了另一款整体规格更小的英文字体。

然而，虽然该自定义字体在 Android 的行高问题暂时解决了，但是该字体在安卓中的字体渲染效果不佳，有锯齿。目前搜索到的信息是说因为安卓的渲染机制导致自定义字体会有各种问题，希望能早日找到解决方案。

参考

关于 hhea 里字体属性的相关信息，可参考 Apple 的 ”The hhea table” 或 Microsoft 的 ”hhea — Horizontal Header Table”

Computational Design - 当今最重要的设计?

Sat, 25 Apr 2020 00:00:00 GMT

Photo by Michael Dziedzic on Unsplash

John Maeda，前 MIT Media Lab 教授，现为硅谷风投机构 Kleiner Perkins 的伙伴。他在和创业企业及大型公司高层一起工作的过程中发现“设计”一词包含了太多的东西。过去数年，他开始每年推出 “Design in Tech Report” 来尝试阐述设计在各规模类型行业中的影响力。而关于“设计”究竟意味着什么的问题依然持续不断地出现。

在给 QUARTZ 的撰文中，他认为设计可以分为三类，其中在当下最重要的一类是 “computational design”（计算设计）。

以下是他基于工作模型定义的三类设计：

classical design 经典设计，涉及物理世界中的物件设计，
design thinking 设计思考 ，涉及组织如何学会通过思维方法实现合作创新，以及
computational design 计算型设计，涉及任何涵盖处理器、存储器、传感器、执行器和网络的创造性活动。

基于这种分类标尺，设计师也可以相应地分为 classical designers，design thinkers 及 computational designers。这个框架已被证明持久适用，但由于该专业学科复杂而广泛，所以也存在一定的争议。

文章对 classical designer 及 design thinker 做了更加概括性的介绍，包括时代背景及相关的组织案例。这里不做展开。

关于 computational designers 计算型设计师

computational designers 是有创意的人，他们掌握着软件、硬件及网络如何相互作用的知识。计算机这一第二次工业革命的产物，于60年代创立之初为军事与战争而设计的技艺，如今被艺术家们侵入。

曾经需要一个巨大的实验室才能装载的计算器如今已装进人们的口袋且可以任意连接到 Amazon，Google，阿里云这些强大的云端基建。

但是时至今日还没有像包豪斯时代那样专门培养 computational designers 的教育机构。一些研究机构比如 MIT Media Lab，卡耐基梅隆的 Enterainment Technology Center（ETC），斯坦福的 Center for Computer Research in Music and Acoustics（CCRMA）以及纽约大学的 Interactive Telecommunications Program（ITP）都曾尝试 computational design 教育，但最终发现不可能。为什么？因为计算力正在以摩尔定律的速度进化着，而传统设计的教条一直在跟计算设计需要成为的东西竞争。

设计的未来

John Maeda 数年前选择离开 MIT。他表示选择离开是为了更好地理解设计。他曾经运作以“Design”为核心的 RISD（Rhode Island School of Design），也曾在 MIT 这所以 “Technology”为核心的学府任教。在硅谷和创业公司及大型客机公司一起工作并将完全沉浸在实践中时，John 发现在这个计算设计的新时代，传统的设计教育已经变得无关紧要。

他觉得我们不应指望像包豪斯时刻在这个全新的产业革命时代会像之前一样出现。因为我们对计算力的使用及相关体验的属性正在以分钟为单位变化着。传统的设计学府恐怕更不上计算力的变化速度。

如何做才可能让面向计算设计的包豪斯时代出现？

开源设计

John Maeda 提及了他在上世纪90年代他的研究团队成员 Ben Fry 和 Casey Reas 一起创建的开源系统 Processing，UCLA 和纽约大学都有相关的 Hubs。

2019年的 Design in Tech Reports 中重点介绍了 Material Design System，因为它将三种设计类型整合在了一个优雅、有深度、开放的知识库中，并配套了免费的工具。 John 希望有更多的志愿者机构，诸如 Wordpress 或像Google 这样的公司出现，将他们在设计方面的成果和努力开源以让包豪斯时刻发生。

PHP - ”People Helping People“， John 相信通过开源的力量可以让我么更快地追赶摩尔定律下计算力发展的速度，让我们更快地实现一个一切都拥有更好设计的世界。

John Maeda 观点原文：John Maeda says there are three kinds of design—but one is most important by John Maeda on QUARZ

Be open, and open again

Sat, 04 Apr 2020 00:00:00 GMT

Photo by Sharon Pittaway on Unsplash

2019年下半年至2020年初，参与了两个项目，一个是虚拟货币交易平台，另一个是企业情报平台。都是大平台搭小团队，在设计和开发层面的协作大都以设计师负责产品、设计及前端UI，工程师直接基于 HTML&CSS 原型应用开发来确保应用的质量。

以下是相关经验总结：

项目的客户情况大致有两类，一类（A类）是自己拥有全职设计师，会用 Sketch 输出高保真视觉设计稿，并通过设计协作工具分享给开发供应商；另一类（B类）只输出需求、数据及平台搭建所需基础设施，供应商则提供项目管理、产品设计、开发及维护支持。

因为不是专业的数字产品管理从业者，B类客户的需求多以文本或 PowerPoint 表达其产品用途及阶段性目标。数据资源分为内部数据和第三方数据，通常以 excel, csv 或来自第三方的 API 数据接口呈现。由于网站所有者及合规性要求，客户会有专门的IT负责人提供基础设施架构设计方案实现对接。

数字平台项目最贵的资源成本是人。项目一方面需要为客户输出价值，即高质量的产品，另一方面也需要保证己方盈利；那么从项目成本及交付质量两方面进行考量，项目经理需要选择最合适的人在有限的时间内交付达到预算相当的产品价值输出。

人多 ≠ 量大质优

一个项目的产品输出的质量与项目参与人员的数量并没有直接的关系。项目中设计与开发人员多并不一定会带来更高质量的产品输出，但一定会增加人与人之间信息同步的沟通成本，这是项目参与者尤其是项目经理需要警惕的。

项目启动后，无论团队是否践行敏捷开发框架，在项目初期客户都免不了会在需求细节上发生一定程度的变更和调整，因为在项目伊始没有可视的高保真界面和真的可以操作体验的原型的情况下，有时客户也不确定某些功能是否真的需要，他们也可能会在看到了初步的设计原型之后产生了新的想法并希望能予以实施应用。一些需求在设计师手上虽然只是几小时或几分钟的效果实现，但到了开发阶段，可能需要数人数天的通力攻关。这类需求若到了开发阶段才发生变更，而项目预算并未覆盖此类需求变更，将削减供应商的利润空间，甚至造成损失，也便成了所谓“吃力不讨好”。

为了让客户在项目初始阶段对需求和实现能有可视化的甚至直接上手体验的认知，避免到了开发阶段才发生调整，尤其是网站整体信息架构和大方向调整，设计师应尽早于需求定义阶段构建原型。

贴士一：参考品牌规范构建初步原型

Tips no. 1: refer to brand guidelines

若客户属于创业公司，还没有建立品牌规范，则产品原型可先以灰度效果实现；

若客户已有品牌规范，尽早索取并参考其中的色彩、字形等用于产品。

需要留意的是一家公司的品牌规范一般由市场运营团队（marketing）制订，多为视觉设计师为传统物料制作而设计。要知道人眼对打印在纸上的颜色和呈现在屏幕上的颜色的感知能力是不同的，数字世界对屏幕上颜色是否能够最大程度方便人类识别是有标准的，若色彩的对比度低于相关标准，字体的大小低于一定的尺寸，将会造成可读性及无障碍访问问题，导致产品不可用。在这种情况下，UI 设计师应在产品付诸开发前主动给出色彩及字号调整建议，帮助客户理解其背后的可用性原理及对用户体验的帮助，而非盲目照搬。

在”好看“之前，用户体验设计师应优先保证设计”可用“。“可用”的大致标准是在没有额外辅助的情况下，用户能通过理解产品界面，独自完成目标任务。

贴士二：撇开传统工具束缚，拥抱高效协作

Tips no. 2: forget Adobe and Sketch… and embrace the efficient tool for collaboration

如果设计师理解网站前端开发的知识和流程，设计时将可以有更好的设计系统思路应用。无论项目是否会安排专门的 web 前端开发工程师，相关前端知识都可以帮设计师更好地理解设计元素各个属性应用到实际产品时的关系，帮助你更好地定义设计系统。

撇开“设计师是否有必要会写代码”这个话题依然存在争议，聚焦“如何更快更高效地产出客户期望的产品”，以下是一些经验，此前主要用于基于 web 的开发。

能力背景：具备用户体验设计知识体系，熟悉 web 前端开发语言及相关命令行，理解 W3C可用性指南相关标准。

贴士三：以共赢的心做专业的事

Tips no. 3: be professional for success business and happy users

客户可能拥有自己 in-house 的设计师，直接输出桌面端或web端单一尺寸高保真设计稿。作为供应商的设计师，你可以：

评审设计，发现其中存在的问题（尤其是导航和信息架构），并给出解决方案建议。当然，首先需要和己方的负责和客户对接的人员沟通一致。这一步的目的不是给客户的设计挑刺，而是以专业的视角给客户以建议，避免客户入坑，希望能够帮助客户的产品最终成功争取到用户的口碑，进而实现双赢。
若客户提供的设计确实出现了有违体验设计原则的问题且不愿接受建议，给出潜在风险提示，并执行客户最终的决定。当然，事后也需要自我反省是否在给出建议的语言和方法上存在问题，是否有可疑优化改进的地方。此处推荐 Tom Greever 的书”Articulating Design Decisions“.

贴士四：忘记职称，高效协作

Tips four: forget the title, work for efficient and high quality deliverables

作为用代码构建产品原型的设计师，如何与开发者共享原型及变更版本，实现协作？

学会使用 git 版本控制语言，至少理解其基本的 commit, push, pull 命令间的关系。如果不想敲代码，可以用 SourceTree 等可视化的版本控制桌面端 app。这样工程师就可以快速获取你的基于前端 HTML, CSS 及 JavaScript 的原型，并通过代码比对工具及 merge 等命令行快速整合至开发版
Web 样式实现的部分建议使用 SCSS，可以直接将设计系统中的各类属性以 variables 变量来规范
使用 npm 或 yarn 等工具来管理扩展库，或使用 React 或 Vue 等 framework 的 start kit 来快速初始化原型项目，这样工程师通过 git 获取到代码后可以轻松将原型版本在本地跑起来。当然也可以选择用基础的 HTML 和 CSS，但可能会导致 SCSS compile 为 CSS 等过程不那么搞笑。比较方便的纯静态构建方法是直接于引入 vue.js 的CDN连接，这样不用开服务器环境，直接双击 HTML 文件在浏览器打开就能预览页面原型。
直接在页面底部嵌入样本数据，并用 vue 或 react 的列表渲染语言实现渲染
你不必成为 react, vue 或 javascript 的专家，只需学习其基础，例如 list、基于状态条件切换 HTML class 等就可以帮助你在理解真实页面背后的层次和关系，也有助训练信息组织能力

这样一来，工程师直接对照原型中的前端页面结构，以项目需要的框架（react, vue）在开发版中予以应用，并直接“复制粘贴”原型中的 SCSS 源文件，确保了项目的设计在开发的应用中不走样不变形。

到了产品中后期，当初期主要的样式和设计系统相关代码已应用到开发版中，当开发环境已经小有功能可以直接跑服务器调试时，设计师可直接 checkout 开发版代码，在开发版中基于更加真实的业务场景和流程调整 CSS， HTML 结构和 Class，就能保证设计更高效的输出。

贴士五：制作接近真实体验的产品原型，更高效的既得利益者管理

Tips five: creating close-to-real prototype for better stakeholder management

将这样的原型给客户展示，客户也能直观地体验目标产品在对应设备上的真实体验，也可以在早期发现需求或是设计层面的潜在问题，例如用户使用的设备分辨率等等，并及时调整相关需求定义。通过代码实现的前期的设计能够以直观可用的形式呈现，并适应到不同的屏幕，也有助于降低基于“想象”的客户沟通成本，减少沟通壁垒。客户也能透过这种接近真实可操作的产品原型，感受到供应商方面的专业能力。

以上方法也适用于包括 native app 在内的所有界面产品，因为使用 web 实现的产品原型可以在浏览器中呈现，手机、web 都有浏览器可实现预览。即使是原声的 app，也可以通过简单的 Swift Webview 来让目标样式在 Xcode 的手机模拟器中预览，或是生成测试 app 在手机中直接体验。

用代码来做设计能让设计师每日的工作从静态的难以自适应的设计图中跳脱出来，去输出更接近用户真实使用的产品原型。当然，这需要设计师付出时间成本去学习相关的代码，而代码这种依赖左脑思维的活动对习惯了以右脑感知画面的人来说会是不少的挑战。

Be open, and open again.

保持开放的心态，去尝试可能为工作流和交付成果带来质变的方式和方法吧。你第一眼、第二眼感觉的那些不方便和不好用也需并不是真正的问题，只是不习惯罢了。

2019 我付费的互联网产品

Fri, 10 Jan 2020 00:00:00 GMT

还是学生的时候，觉得软件贵，虽然有学习的需要，却总是竭尽全力地上各种”软件园”，搜刮各种软件的免费版破解版。那时候常访问的网站有华军软件园、绿色下载站，当然也少不了ylmf。而我，也成了本班女生宿舍的专职 IT support，同学们的笔记本电脑一遇到问题，就会敲开宿舍的门将我召唤。

不知不觉间，所谓的 web 2.0 的时代已经不在，独立博客也日渐消逝。如今，播客反而兴起，成了人们通勤路上的”耳伴”。博客也被像知乎专栏、微信公众号这样更容易接触到受众的媒体平台继续承载着。独立博客式微，但在网上继续着创作这件事的人有增无减。不曾想自己今日也会如此切身地感受到时代的变化，互联网产品的变化，服务的变化…… 感叹一声：年轻真好。

如今互联网产品的主流生存模式也已成型，无非是做一个让顾客喜爱的产品并让顾客愿意持续使用并为之付费。最近读了日本营商人田所雅之的《创业学》，书中提到当新创公司作出了人们想要的东西接下来准备要规模化时，就要重点考虑 AARRR 海盗指标中的获客（Acquisition）、顾客推荐（Referral）及收益提升（Revenue），「只有努力提升这些指标，使单位经济效益更加健全，才能在增加顾客的同时也增加获利。

单位经济效益 = 单位顾客生命周期总价值（LTV）- 获客成本（CPA）

接下来我要做的是就是 referral，让我满意的2019 应用推荐：

Todoist 任务管理工具

每天打开次数最多，已让我养成重度依赖的 Todo list

Screenshot of my Todoist yearly report

费用

36美金一年（约250元人民币），

已付费 Todoist 有两年了吧。使用 Todoist 之前一直用 Any.do。可惜 Any.do 前两年的改版已经失掉了让我想用它的核心。加之此前多项目并行的工作需要让我一款 Todo list 既能够按项目分配任务，又能让我一览今天的事项，并且能够设定重复任务及自动同步我的日历日程，且在所有设备上都能定时提醒。 Todoist 做到了，它让我基本不用脑子去记事情了。日常大大小小的事情，甚至是买菜洗衣服这种琐细的日常我都会随手记个任务，否则脑子根本不够用。

我重点使用的是 Todoist 的网页版（非 Chrome 插件）及 iOS 应用。当然 Todoist 支持几乎所有你能想到的设备。即便 Todoist 已存在了好多年的时间，他们的产品团队依然在持续地优化他们的产品功能及性能。在2019年第四季度，他们给每一个任务设计了一张信息卡片，在信息卡片中支持建立子任务，让任务可适应的场景更广泛。

在产品的使用过程中，我看到了产品的变化及对的变化。例如在2019年初的 Todoist移动版中，设置任务日期及提醒时间的交互不太好用，每次要设时间都必须先选完日期，再打开一次设置时间设置按钮选择时间；而在2019年末的另一次优化中，任务的日期时间设置的交互问题一定程度上被优化了，我可以更顺手地完成日期选择及时间设置而不需要点击保存按钮好几次。

当然，Todoist 还适用于团队协作及更多场景，你可以去他们的官网了解。

如果你也有兴趣注册 Todoist，不妨使用我的 Todoist 推广链接，为我赢得2个月的高级版使用权。

Dashlane 密码管理工具

我的账号管理专家，无须多虑密码设置与记忆问题

费用

官网 39.9美金一年，需用信用卡或 Paypal支付，支持 App Store 及 Google Play 内置订阅模式。不同地区的 Apple Store 订阅费用不同。比如2020年香港区 App Store 订阅假只需单位数港币，立马转用～不知是为在中国区促销，还是销售忘记改本区价格。而美区的 App Store 订阅标价比官网付费模式要贵一些。

虽然 1Password 很有名，曾经使用过但并没有付费。不知什么原因我遇到了 Dashlane，且很快就上手了它的使用模式，于是不知不觉一用2年。在此之前，我是用 Simplenotes 的记事本自己写了些 hints 记录网站的密码逻辑。如今，觉得 Dashlane 在桌面版和手机端的同步很方便，也支持给一个网站记录多个账号名称（例如一个用户名，一个手机号）。

Dashlane 也支持账号及密码风险监控提醒等，我也用它增强了不少网站的密码强度。付费版还同时支持公共网络下快速开启网络保护（～那三个英文字母，你知道的）。

Dashlane 的客服也做得不错。我曾给他们报过一个无关紧要的小 bug，即当我在设置中选择在web登录框隐藏鹿型图标，他们的鹿型 icon 依然显示在 web 版中。不过现在想来觉得这个设置问题像是他们刻意为之，因为那个 icon 是触发用户激活 Dashlane 的按钮。但他们至少应该把这个无效的选项从偏好设置中删去。另一次是最近使用 Paypal 支付年费后发现 App Store 的年费比官网续费要便宜，于是提交 Paypal 退款申请。客服先是跟进问我为什么想取消订阅，我解释了会续订及只是想转换更便利的订阅模式后对方立马给我退款。信任感就是这么建立起来的。

如果你也有兴趣尝试 Dashlane 密码管理器，不如使用我的 Dashlane 推广链接注册，我们两人都将免费获得为期 6 个月的 Dashlane 高级版使用权限。

不过 Dashlane 似乎也被 App Store 下架了，难怪它在国内少有人提及。

Google One 文件存储服务

相对省心且价格合理的文件存储服务

Google One 特别功能

费用

100GB存储空间 - 150港币/年， 200GB - 230港币/年，2TB - 799港币/年，还有更多收费计划请参照官网。

因为一直在用 Gmail 的关系，Google Drive 也是这么多年来整体质量还不错的文件存储服务，100GB的年费也不算太贵，关键不会出现文件丢失或是某些文件名称不支持的问题。之前也试图转用更便宜的 OneDrive，但是在复制粘贴的过程中遇到大量文件名不兼容的问题，导致我花费了大量时间给文件重命名，且最后导致同步混乱的状况。于是放弃全盘迁移，只存了一些纯属归档的东西。

不过由于众所周知的原因， Google Drive 在国内使用确实不太方便，这里便不赘言。

JetBrains PyCharm IDE 整合开发环境

PyCharmPyCharm官网的界面截图，我用的也是这款暗黑界面

高效的设计开发工具

费用

老客户价格53美金（约370人民币）一年，使用优惠53美金两年。

在香港的第一份工作时，团队的工程师就很推荐 JetBrains 的 IntelliJ。当时我也主要用 HTML、CSS 做交互原型，于是也就试着用起来。那时候特别装的是 WebStorm。没想到跟着快捷键用下来便再也离不开手，加上当时用到的 SVN 和 Git 版本管理，真的是大大提高了设计和开发效率。续费了几年 WebStorm 后，因为开始学 Python，恰好碰上 JetBrains 一年一度的 Pycharm 慈善筹款7折优惠，就由 WebStorm 转 PyCharm 用了。毕竟 PyCharm 对 web开发完全兼容。 2019年学 Data Analysis 时也尝试用pycharm，图表的生成预览在 PyCharm 中也有专门的视图导航。这不2019年11月 JetBrains 推出了立即续费买一年送一年，我又去参加了。当下 license 的有效期已至2022年。

虽然越来越多的开发者转用 VS Code Editor，自己也安装了，但因为要配置不少插件，界面不适应，以及需要重新记忆一套快捷键。我最终还是选择继续使用 PyCharm 。 JetBrains 自带的这一套 Darcula 暗色主题及其默认字体字号配置比较顺眼。

PyCharm 带来的效率的提升及代码能力的提升，让我觉得这个 app 像是幸运辅助一样的存在。

JetBrains 官网：https://www.jetbrains.com

Affinity Publisher 排版软件

完美替代 Adobe InDesign，且高度整合了 Affinity Designer 和 Affinity Photo，而且只需一次性付费

费用：389港币（一次性收费）

依然在坚持一次性收费，图形编辑软件做得很稳定，可完美替代 Adobe Photoshop、Adobe Illustrator、Adobe InDesign 的套件当属 Serif 公司旗下的套件 Affinity Designer、Affinity Photo 和 Affinity Publisher 了。

早在 Affinity Designer beta阶段，我便以早鸟优惠购入。由于 Affinity 家的图形软件从界面、稳定性和价格上可取代 Adobe Photoshop，它家的图形编辑三剑客皆已被我收入囊中。平时画矢量图、微调照片或是要编辑PDF文档都会用到他们。

2019年 Affinity Publisher 推出，我恰好用它重新设计了简历作品集及画了某些项目的流程图。由于 Publisher 支持在 Affinity 家的三款 app之间无缝切换，我很快就能上手并轻松完成想要达到的效果，最终输出的 PDF 文件也很让人满意。

如果经费有限，又希望能够有普适便捷的设计工具，建议入 Affinity 旗下的 App，尤其是 Affinity Designer 和 Affinity Publisher。

Affinity 设计软件系列官网：https://affinity.serif.com

CleanMyMac 系统清理工具

很会收费的 Macpaw，只是还未彻底征服我心

费用

约280港币一年

付费 CleanMyMac 有点勉强，并不是那么「心甘情愿」。谁叫我又升级了 Mac OS 呢？我觉得 CleanMyMac 是一味安慰剂。你明知清理系统这件事也许靠你手动也能完成，但这个 app 设计的流畅的动画总是带来一股「只有CleanMyMac才能完成」的假象。此前已经一次性付费过两次 CleanMyMac 了，最后都是因为系统升级。谁知这一次 CleanMyMac X 直接改成年费订阅制了。

只能说从设计和功能使用的角度，能作到这个程度的选择暂时只有 CleanMyMac。同时我觉得如果有一款同样功能的 App，只要收费模式低一点踏实一点，即使不这么好看，我也愿意转用。

2019年已停止付费的应用

Sketch App 图形编辑及UI设计应用

当前的版本已经够成熟了，新版本的功能并不是那么值得

2019年，停止付费升级 Sketch App，就让它停留在 56.3了。之前连续付费了几年升级，如今新版本的一些新增功能感觉并不是必须。而 56.3 已经可以满足大部分情况下的设计需求。图形编辑和UI设计这块的工具我同时还有几年前一次性付费的 Affinity Designer。加之如今大部分能够自适应的设计我会直接用 PyCharm 写出来。Sketch能做的其实只是基本的 layout 和视觉的定义。已经很熟悉 Responsive CSS 直接出接近真实体验的网页原型，何必用 Sketch App 慢慢调各种尺寸下的界面且最终输出的只是图片？

100 Front-end Performance and a checklist

Wed, 08 Jan 2020 00:00:00 GMT

Chrome LightHouse Performance Auditing report screenshot for MillieLin.com in Gatsby.js

本文亦附有中文版

It is a fabulous score after running the Chrome LightHouse Audit to measure this website performance. All 100 for the matrix indicators. This website was reconstructed with Gatsby.js and all running well.

This is the ‘Aha Moment’ for me to spread a word on Gatsby if you want to create a high performance website with less efforts.

By the way, just came across the ’Front-End Performance Checklist 2020’ on SmashingMagzine by Vital Friedman. If you are interested in learning more details on the matrix behide the performance auditing, this checklist could be a good reference.

中文版

100分网站性能体验及前端性能清单

2020年伊始，以 Gatsby.js 重写了个人网站并添加了支持 markdown 的博客模块。因为职业关系，习惯性地会看看网站的综合性能表现情况，于是打开 Chrome 浏览器的开发者模式，点击“Audits“ 审查，跑了一遍 Chrome 自带的 LightHouse 性能评估工具。万万没有想到，审查报告竟然一片绿，清一色的100分，背景还伴随着欢快的烟花。

这个结果真的是出乎意料的惊艳。要知道在过去数年的工作中，跑过大大小小各种网站，网站综合表现能达到70分或以上便很难得，没想到 Gatsby.js 的框架配置对网站前端性能（Performance）、无障碍访问（Accessibility)、技术层面对最佳实践（Best Practice）、搜索引擎优化（SEO）及PWA（Progressive Web App）都做了细致的优化。这才能让 build 出来的网站达到最佳效果。

从用户体验的角度，性能的最优化意味着更快的页面打开时间，适应于最广泛用户行为状态的视觉设计及无障碍前端技术配置，有助于触及最大面积的搜索引擎配置及适应于设备本地离线状态及本地状态的技术方法。

不得不承认，这样的测试结果叫人不禁给 Gatsby.js 点赞。未来估计会更积极地使用 Gatsby.js 和 React 来参与项目实践及推荐给他人。

顺便一提今天在 SmashingMagazine 上读到的 Vital Fieldman 分享的 “2020前端性能检查清单（Front-End Performance Checklist 2020）”，这份清单附有PDF、word等版本。如果你想要进一步了解关于前端性能影响因素的具体细节，不妨从这份清单开始入手。

Lean Canvas 精益画布 in CSS Grid

Mon, 06 Jan 2020 00:00:00 GMT

The screenshot of the Lean Canvas webpage in CSS Grid

Open the Lean Canvas

Why I created the lean canvas?

As reading a book about the science of running an innovative startup by the Japanese author Masayuki Tadokora (田所雅之), I got a chance to go through the Lean Canvas again. The last time I came across the lean canvas was with the book of Business Modal Canvas.

The lean canvas method provides methodology to go through the necessary aspects to help startup runners shape abstract idea with clear and describable vision and key metrics which could be a good practices.

To better remember the lean canvas elements, I found it would be interesting to create a fullscreen canvas by using the CSS Grid method. On one hand, I would be able to repeat all the elements on the canvas to strengthen the memory. On the other hand, the lean canvas is an perfect example to practice the CSS3 Grid method.

The implementation

It is about 3 hours efforts to setup the project and get the lean canvas web version on.

Helpful tutorials and documents referred:

The exact lean canvas layout is available for screen that larger than 800px width. For browser window with smaller x dimension, the block should display vertically in a list to make the content easier to read.

It could be helpful if a team want to refer to the canvas in a fullscreen mode on a meeting for discussion.

Some cool features if there will be further implementation:

Insert content directly on the web
Save updated canvas
Export canvas in image or PDF.

Demo

Here is the responsive fullscreen lean canvas site:

https://lean-canvas.millielin.com/

The project is open-sourced on Github

Open the Lean Canvas

Goodbye Nuxt. 以 Gatsby 重构个人网站

Sun, 05 Jan 2020 00:00:00 GMT

为什么重写？

本打算以 Netlify CMS 给基于 Nuxt.js 的网站添加博客管理系统，但经历了一下过程：

2019年12月28日，折腾了一天，用 Netlify CMS 给曾经基于 Nuxt.js 只有简单四五个静态页面的网站添加了博客内容管理系统。根据 Netlify CMS官方文档，初步的CMS整合与实现很容易，结合支持 Github 的 Netlify Git Gateway 的功能，在可视化的 Netlify CMS 编辑器里每保存一次内容修改都会触发一次 git commit 及 Netlify 服务器端的自动部署发布。

下图是 Admin UI 截图：

Netlify CMS Admin UI

Netlify CMS + Nuxt.js 遇到的问题

若内容的format 设为 JSON，文章内容编辑器用 markdown，则若markdown 中需要嵌入 HTML 代码，则无法实现
可通过 Netlify CMS 上传图片，但需要记得在 static 目录中预先创建和 yaml 文件里配置一致的文件夹，否则图片上传功能不可用。
Netlify CMS 输出的内容默认按时间升序排列；若需按时间降序排列，则需要自己在 async 之后用 sort 的方法改变排列方式。
分页功能更是没有了，若需要得自己写
Admin UI 的文章内容输入框总是出现粘贴时内容被自动重复粘贴两次，或全文被重复粘贴的情况，导致额外修改时间，是个大bug。

放弃 Netlify CMS + Nuxt.js

将这个 Netlify CMS 应用后的网站分享至掘金社区，不少网友访问后提醒我说文章页面无法访问，或导航刷新后出现404。在本地 Debug 之后发现确实有这个问题，各种尝试修复之后发现此问题是生成的路由有问题，以 nuxt generate 生成的静态页面版本无法正常加载对应的页面链接，看来是必须要有服务端渲染才行。同样的代码，build 之后跑 nuxt start 则能正常运作。但由于不想再折腾复杂的服务器，只想用 Netlify 免费加载静态版，加之 Netlify CMS 的编辑器复制粘贴有严重问题，于是我决定尝试用基于 React 的 Gatsby 重现全站，不想在 Netlify CMS 和 Nuxt 上耗费更多时间。

以 Gatsby.js 重写网站

2020年1月1日，成功跟着 Gatsby.js 的博客教程及官方 starter 完成了 MillieLin.com 网站的重构，顺利迁移了自己设计的这版基于 Bulma CSS 的框架，并顺利添加了 Blog 功能及基本的博客列表分页。 2012年1月2日，花了不少时间给博客的标签文章列表页面添加分页导航，好在1月2日晚10点跟着网上搜到的另一篇 gatsby-node.js create-page 的教程重新梳理了相关逻辑，终于顺利让基于选中标签的文章列表页顺利实现。

帮了大忙的 Gatby 添加分页导航教程： Advanced blog system in Gatsby by Danilo Woznica on Medium

至此，也算以个人网站的重构刻意练习了前一段入门的 react.js 和 GraphQL. 顺便推荐一下德国人 Robin Wieruch 写的挺不错的两本入门教程（纯电子书版是免费的）The Road to Learn React (简体中文版) 和 The Road to GraphQL。

CCPA：互联网营商需留意的又一消费者隐私法案

Fri, 27 Dec 2019 00:00:00 GMT

2019年末，收件箱里陆续收到了十几家互联网产品发来的关于隐私政策条款（privacy Policy & Terms）更新的通知。记得上一次出现类似的隐私政策条款更新发生在2018年初。发生了什么，为什么互联网产品公司纷纷更新了他们的隐私条款并通知所有用户，隐私条款很重要吗？

是的，隐私政策条款非常重要

若没有处理好隐私政策条款并通知到位，一家企业可能因此破产。破产？！是的，破产并不是危言耸听。因为若企业的隐私政策违反了相关的隐私保护法案，企业将面临起诉及巨大的法律风险，一旦败诉，可能会面临巨额赔偿甚至因此导致破产。

虽然相关隐私政策保护的法案只在其法律管辖区有效，但是互联网是无界的，如果你的产品全世界都可以访问，那么你的注册用户就有可能来自受相关法案保护的地区。人心难测，稍有疏忽，你的企业可能就会陷入相关的风险中。所以，如果你的企业有互联网相关业务且涉及个人信息收集，请至少密切留意以下两个法案，并做好相关的条款更新通知及提醒。

The California Consumer Privacy Act（CCPA）美国加州消费者隐私法

CCPA 加州消费者隐私法政府官方页面：https://oag.ca.gov/privacy/ccpa

CCPA 加州消费者隐私法对企业有何影响？

来自德勤官网对此法案的影响分析如下：

“CCPA 加州消费者隐私法于2020年1月日生效，并将对技术，媒体，娱乐和电信（TMT）行业各个领域的公司隐私权计划产生重大影响。可能仍在为欧盟（EU）GDPR进行合规性部署的TMT公司在满足新要求方面具有一些优势，但是主要专注于美国和美洲市场的品牌在很大程度上避免了GDPR的范围。无论如何，全球消费者和立法机关之间日益关注的隐私浪潮正在推动TMT范围内的数据隐私动员。

CCPA被视为美国最严格的隐私法之一，使加利福尼亚州居民能够控制企业如何处理其个人信息。企业现在必须满足加利福尼亚州居民访问，删除和选择不共享或出售其信息的请求。此外，企业在更新其隐私计划时将必须考虑许多CCPA特定要求，例如CCPA的规范性退出措施以及根据个人要求停止出售消费者数据的需求。

”

CCPA 法案适用对象

CPA将适用于营利性企业，这些企业收集和控制加利福尼亚州居民的个人信息，在加利福尼亚州开展业务，并且至少满足以下条件之一：

年总收入超过2500万美元
每年接收或披露50,000或更多加州居民，家庭或设备的个人信息
通过出售加利福尼亚州居民的个人信息获得50％或更高的年收入

非营利性，不符合收入门槛的小型公司，和/或不向加利福尼亚居民提供大量个人信息的交易，并且不与CCPA涵盖的会员共享品牌不必遵守。

如果我的公司并不是在加利福尼亚，我是否需要担心合规性？

目前，CCPA扩展到在加利福尼亚州成立的营利性公司（即在加利福尼亚州开展业务）和“间接”有资格从事业务的实体（即在加利福尼亚州成立的公司的母公司和子公司）。

位于加利福尼亚州以外的组织可能想知道他们是否要遵守CCPA。如果一家企业与加利福尼亚州居民进行交易并符合最低要求，则考虑该企业是否收集加利福尼亚州居民的个人信息也很重要。 CCPA的范围取决于消费者的居住地-其目的是保护加利福尼亚州居民的权利。

GDPR + CCPA

什么是GDPR？

The General Data Protection Regulation (GDPR) 是欧盟推出的通用数据保护条例，于2018年5月25日生效。该条例旨在保障欧盟和欧洲经济区所有公民的数据保护和隐私权。它还解决了欧盟（EU）和欧洲经济区（EEA）以外的个人数据传输问题。

GDPR 和 CCPA 的异同点

GDPR 的主要特点

数据保护影响评估
数据处理程序要求
跨境转移要求
处理和自动决策限制
某些类型的处理的监管机构
监管监督权

CCPA 的主要特点

出售个人信息的限制
对选择退出的消费者的歧视容忍度最低

GDPR 和 CCPA 的共同点

信息违规通知
通过设计获得隐私权（例如，安全性大小，风险和复杂性方面的考虑）
对信息触及，可移植和擦除做了要求
反对和纠正的权利

以上信息来源：德勤官网

##互联网个人信息隐私法对产品设计者的要求

伴随着 GDPR 和 CCPA 法律法规的生效，第三方风险管理将成为众多企业的挑战。同时，互联网产品的负责人、设计者和开发者也都需要对此法案带来的合规性需求打起精神。根据个人以往涉及合规性项目的工作经验，产品人在规划产品需求时就合规性尤其需要留意以下几点：

1. 网站登录页 cookies 使用接受确认提示

由于许多网站使用 cookies 将用户信息临时存放于浏览器中保存，此处就涉及存储端的信息安全问题，故若网站使用 cookies 存储个人信息，则需要在用户登陆该网站的页面的醒目位置清晰告知用户网站 cookies 的使用，提示相关信息安全风险，并提供”接受”按钮。

例如德勤网站置顶显示了该站使用 cookies 来帮助用户提供个性化服务，并配以 cookie notice 的条款信息链接及 “Accept and close” “接受并关闭”的按钮。如下图：

2. 个人信息手机的表单设计

互联网产品收集用户个人信息的主要形式是表单（form）。表单的视觉样式可以是一张看起来有很多输入框的表，也可以是一个聊天窗口对话框或是一个聊天机器人界面。

关于表单设计与个人隐私，特别要留意产品收集个人信息类型的必要性，收集的个人私隐信息越多，管理维护带来的法律风险则越大。例如，若要设计一张学校课程报名预约在线表单，业务层面可能会希望收集到尽可能多的信息以掌握尽可能多的用户资料。于是，这样一份预约报名表的个人资料部分可能就会需要以下字段输入框：

姓名
年龄
性别
生日
联系电话
电子邮箱
证件类型
证件号码

然而，因为用户始终需要去到现场确认报名，网站是否真的有必要收集如此详细的信息呢？毕竟最终报名者会收到带有唯一报名编号的确认信前往现场核对。当用户身份对业务带来的风险不高时，这样一份报名表的个人资料大可简化成：

姓名
联系电话
电子邮箱

而伴随着 GDPR 和 CCPA 法案的实施要求，表单还需要在“提交”按钮前清晰地向用户说明网站对于用户信息的政策及条款，并需要用户确认知悉，这就需要额外添加：

隐私政策说明（并带有完整条款链接）
确认知悉并同意接受相关政策

虽说基于用户隐私保护考量后调整的表单可能令业务层面透过网站收集到了相对更少的人口统计数据，但站在用户的角度，他们会感到个人的信息收到了保护和尊重，也会对产品或服务产生更加良好专业的印象。

成为更专业的产品人与设计师，请记得考量个人对隐私信息安全的需求。

A Hong Kong Schools Map in Mapbox GL JS and React

Mon, 23 Dec 2019 00:00:00 GMT

A map of Hong Kong Schools Location markers with popup in Mapbox GL JS with React framework.

How does the map looks like?

Here you go the screenshot:

The idea and the data

After the beginners course of the react.js web framework, I want to practice it and create things on data visualisation. Get inspired by some other map based interactive project created in Mapbox, I’d like to find data to learn and practice how Mapbox and React.js can work together.\n\nThought of the Hong Kong Government has launched a site DATA.GOV.HK for the public to access the official data, I explored and found the dataset of Hong Kong School Location and Information there. The data is straight forward with coordinates per school as well as basic school properties such as school level, district, finance type, contact, etc.

The process

Get inspired. Explore open data sources and possible techniques to see the possibilities.
Define purpose. Thought from business perspective, I’d like to design a Hong Kong Schools map for people to learn about Hong Kong school information by geolocation.
Define feature scope. Though the dataset is possible to achieve advanced features such as filters or binding with some other databases, it would be easier to get started by minimizing the initial scope. The initial scope is to add school markers which allow popup to show detailed information on touch or click. The map should be responsive and able to use on both mobile and desktop modern browsers.
Prepare the data. The schools location and information JSON on the Hong Kong GOV site is not well structured in geojson format. So that I finnaly downloaded the .csv file and used the online converting tool CSV to GeoJson and download the .geojson file in about 5MB. There are close to 2000 schools data in the single .geojson file which cause extra waiting time for the school markers to load on the live site.
Development. For such data visualisation map, the development process is actually a way of design. As exploring the Mapbox examples and documentation, as a designer, I would be able to see the possible interactions and styles and adjust the styles and icons through the data source directly.
- Intended to practice the React.js that I just learned, I used the npm command npx create-react-app [project-name] to initiate the react project. Instead of using pure javascript to load the map as Mapbox example, I have to follow the syntax of React to get the map on with Mapbox GL JS API.
- There were some problems that I encountered during the development that different marker or symbol loading method with the Mapbox GL JS could lead to different marker presentation and web performance results. Both methods were on the Mapbox examples and I’ve tested and tried different method and finnaly figure out the performance issue by using the symbol layer method.
Deployment. As the data is in ‘.geojson’ format and there is no database used, the map is could be built as a static site through react build.

Finally, I deployed the site on Netlify through github. It would be better if the map could get more advanced features such as filters or search feature for easier school exploration. It consumes time for me to learn more about the skills on coding. As this is an experimental data visualization project, I am happy that I have been able to visualize the data on a map. Schools location and density can actually reflects a district population, residential area, etc. One of the rendered map with all schools location appears at the same time looks like the image below:

It is open sourced

This mini-project has been open sourced. If you are interested to develop the map further, adding filters, binding other schools data, feel free to clone the repository on github and keep coding for a better education tool.

KRITA: 自由免费开源的专业绘画软件

Wed, 11 Dec 2019 00:00:00 GMT

2019年，意外遇见了 Krita 这一款声称“自由、免费、开源的专业绘画软件“。记得除了已存在多年的 Inkscape 出品的 GIMP，Krita是近年出现的另一款开源绘图软件，支持 Windows、MacOS 和 Linux。

Krita Mac app 加载画面

一直以来，桌面端绘图软件对开发的要求都很高，想要造出好用、高效还实惠的软件真是不易。早年（10年前）又 Adobe Photoshop，Illustrator 和 CorelDraw，当时的唯一开源绘画软件只有 GIMP，但相比收费型商业软件，GIMP 的功能和体验还是落后于 Adobe。

如今，CorelDarw 已改名换姓，Adobe 系列的收费模式越来越氪金，桌面端绘图软件的新鲜血液出现了 Affinity Designer。

Affinity Designer 走的是一次付费永久使用的模式。近年也陆陆续续推出了 Affinity Photo、Affinity Publisher 及对应的 windows 版、iPad app等，吸引了不少买不起 Adobe 又需要软件以从事图片编辑和桌面出版相关工作的消费者。

近年来，iPad 和 Apple Pencil 的布局带来的更接近传统绘图交互形式的软硬件开始让桌面端绘图软件的市场份额进一步缩减。越来越多的绘者转投 iPad + Apple Pencil + ProCreate App 这一软硬件组合，这也引致如 Adobe、 Affinity Design 以及其他各大小型应用开发者纷纷将开发重点放在了 iPadOS 上，桌面端 app 鲜有优化。

在这样的环境下，Krita 的出现充满了“情怀感”。正如 Krita 官网简介里的第二句话：

“它由懂得画画的程序员们开发，目标是打造一款人人都用得起的数字绘画工具。”

显然，Krita 的用户目标是那些注重情怀，却又对如某些高价绘画软件望而却步的数字绘画专家及爱好者们。

笔者也是数字绘画的爱好者，多年前也是用 Adobe Photoshop 搭配 Illustrator，如今主要使用 Affinity Designer 和 Tayasui Sketches。今儿见到 Krita 如此情怀般的存在，便下载下来一试，尚未深入使用。

Krita Mac版软件初始化界面

从界面上，Krita 的一大特色是右下角预设了近百款笔触效果，其图标设计和预览效果可以很方便选择。带有矢量笔触效果，方便以矢量的模式渲染。

Krita 预设了大量笔触效果

在 Krita 中用鼠标勾勒出文字线条

每款笔触都可以进行大量的细节参数自定义

只是尝试涂鸦了几笔，感觉图形边缘的锯齿感还比较明显。进一步的效果和体验还需要更多的试用。

总的来说，Krita 可能依然只能停留在小众级别，但其诚意满满，值得一试。尤其适合学生和经费紧张的数字绘画爱好配合手绘板使用。

Krita 现在也在招募志愿者为其推广宣传及贡献笔刷素材等，如果你有任何反馈意见，也可以去他们的聊天室及论坛留言。若你也想参与 Krita 的开发，更可以依照官网上的指示进行。

Krita 官方网站：https://krita.org/zh/

Refactoring UI 重构界面 - 程序员写就的的精彩界面设计教程

Tue, 10 Dec 2019 00:00:00 GMT

最初是在 Medium 上邂逅了 ‘Refactoring UI’《重构用户界面》这本电子书的配套博客。读完全本后，印象深刻，推荐给 UI 新人、程序员及所有希望 web 界面设计更美好的互联网用户。

之所以特意推荐此书，是因为它的教法浅显易懂且涵盖了主要的 web 设计原则知识点及解决方案，可谓是直击界面设计师的知识库“痛点”。

此书图多字少，言简意赅，每个界面设计常见问题都以 before & after 的形式配以简单的文字描述直击问题所在，规范所在及快速解决问题的“花招”。这里之所以称其给出的建议为“花招”是因为此书旨在“引进门”，让人意识到设计问题的所在，解决问题的设计方案固然不止有作者给出的那一种。视觉风格可以是无限的，关键是平衡可用性、信息传达及视觉美感的那个点。

此书有PDF及相关视频、图标资源，详情可访问其官网：https://refactoringui.com/ 。

苹果官网的"私隐贴纸"遮盖设计实现

Sun, 08 Dec 2019 00:00:00 GMT

浏览苹果香港官网关于 iPhone 11的内容介绍，发现关于私隐保障的文字出现了贴纸隐去文字的效果以提现其“隐私保护”的内容传达。

iPhone 11 私隐保障的文案出现了贴纸遮罩效果。

刚开始好奇这样的效果该不会是用 CSS技术实现的？一看源码，竟是一张 .jpg 图片。从无障碍访问的角度看，Apple的前端还是注重的，HTML 里特意添加了文字版本“iPhone 11 (經過精心設計，為你)私隱保障。“ 以确保内容能通过网页语音阅读器播放。

<span class="visuallyhidden">iPhone 11 (經過精心設計，為你)私隱保障。</span>

其实，用 CSS 实现同样的效果是可行的。方法是给需要遮罩的文字加个特定 CSS class。在 CSS 中给这个 class 做相对位置定义，并用 :before, :after 画出灰色的矩形。

这里的设计效果若用 CSS 实现，优点可以是

减少图片使用，提高加载性能
支持多语言文字，无需针对每种语言文字定制一张图片

缺点可能是

由于 Apple 面向不同地区不同语言文字会有不同的版本，不同语言的字符长度和断句位置会不同，导致换行及部分遮罩效果的相对位置需要针对每种语言版本微调。
不同的浏览器对于文字的渲染会有些微不同，需要不同浏览器对不同文字版本的测试
CSS 能实现整体上的样式的定义，若要针对每种语言和浏览器进行查走及微调，需要设计师具备前端开发能力。

因此，相比用CSS这种高性能的方式去实现遮罩效果，又要保证可见的”iPhone 11“ 和“私隐保护” 文字的排列能达到视觉层面的平衡，也许让设计师作出几十甚至上百张张不同语言不同文案的图片，并交付工程师应用的效率相比他们自己或工程师通过CSS来实现技术层面“最自然”的文字遮罩效果要高效，出现兼容性问题的风险也较低。

毕竟这个网页的目的是让消费者信服，而视觉层面的品牌和产品形象则是“使人信服”的第一要务。苹果对于这个隐私保护文案的遮罩效果设计的前端技术实现选择的原因便可见一斑。

你可以在这个页面看到本文提及的设计及前端实现源码：https://www.apple.com/hk/iphone-11/

Web 交互设计-无密码登录表单设计

Mon, 18 Nov 2019 00:00:00 GMT

伴随着互联网产品使用的普及，人们需要管理的网络账号及密码也越来越多。为保障信息安全，网络产品对用户密码设置的复杂度也大大提高，却反过来引起了用户登录困难等体验问题。于是，「无密码登录」成为了不少网站尝试优化用户登录体验的一个新模式。

Medium 的无密码登录表单，通过输入email，获取一次性链接(magic link)

Web 表单设计是看似简单实则精密而复杂的手艺。光是表单的用途就可有一系列的分类：登录、注册、留资、订阅、问卷等等。不同用途配上不同的网站业务及用户属性，可变幻出的交互形式也是多种多样，以至于表单设计的最优解依然在无数产品人、设计师和工程师的迭代中试验着。

Web 表单用途中最常见的一类便是登录/注册了，几乎每一款产品都有其独立的用户体系，要享受服务则必须作登记。这里探讨一下登录表单中的其中一种交互形式：无密码登录 (英文的引导语中通常叫其 magic link，Slack, Medium 的登录就有用到该形式 )。

从技术的角度看，无密码登录并非真的没有密码。用户无需用键盘输入自己预设的密码，取而代之的是系统生成的一次性带“密码”（常叫“token”）的链接发送至用户的邮箱或手机，方便用户点击链接后让系统自动识别token登录并打开目标页面¹，省却用户记忆产品密码。

便利之处

从用户体验的角度，无密码登录的便利之处有：

用户无需记忆该产品密码，用户在登录时只需填写一个输入框信息，通常是邮箱或手机号，且邮箱或手机号是一般人都能记住的便利也存在问题但是，相对传统的密码登录形式，无密码登录的便利效果需以以下条件为前提：

1. 用户获取一次性登录链接的邮箱或手机与正在使用的浏览器在同一设备上

若用户在桌面端输入手机号码获取登录链接，点击手机上获得的一次性链接可能直接打开手机浏览器而无法在桌面端浏览器打开目标页面

2. 用户邮箱已处于登录状态

若用户未登录邮箱，则需额外的时间和步骤完成邮箱的登录；若用户非高频 email 用户，可能会出现忘记邮箱密码等功能，导致用户登录产品需时更长，或因任务焦点转移或邮箱登录步骤繁琐而放弃使用产品

3. 用户的设备或浏览器未使用密码管理器（如 1Password、Dashland等）的使用者

伴随着互联网产品的普及，用户需要管理的账号越来越多，不少关心个人隐私和账号安全的用户会主动使用密码管理工具，或是浏览器的密码管理功能。当用户启用了浏览器的密码管理工具自动识别填写功能时，传统的密码登录将比使用一次性链接登录更快更直接。

以上三个前提便成为了无密码登录表单设计中需要解决的交互及体验问题。

如何解决问题？

以下为建议思考的解决方向：

用户调研，通过用户实际行为的追踪数据了解用户使用的设备，建立任务流，关注无密码登录行为实际成功转换率。
若用户普遍使用同一设备进行登录且成功率较高，则问题1是个小问题，可优化但对产品业务影响不大，为低优先级。反之则成为痛点，需设置高优先级解决。
用户测试，随机抽取5-10名现有产品用户，实地采访观察其在自己常用的设备上使用产品的情况，以发现用户的密码管理使用情况
对登录用户发放网页弹窗问卷，了解其密码管理工具的使用习惯，以观察用户密码管理的形式与工具。
从技术的层面，基于不同的设备和使用场景，应用不同的登录模式，或对登录模式进行限制。

基于用户调查结果和产品业务的实际效果，决定是否需要优化表单，并为优化任务排定优先级。

当然，基于设计原则，一些通用的解决方法可以是提供备选项：例如除了“获取登录链接”，同时允许用户选择“使用密码登录”。

香港01 新闻网站的无密码登录表单，于“使用验证电邮登入”按钮下方提供了“使用密码登入”选项，方便记得住密码或使用密码管理器的用户。

此处只讨论浏览器里 web 产品的无密码登录交互，不适用于手机 app - web QR code 扫码登录的情况。↩

Tempo: 专注与极简的 Mac 邮件客户端

Thu, 14 Nov 2019 00:00:00 GMT

2019年遇见的一款 Mac 邮件客户端，基于 Gmail。产品策略和设计新颖有亮点。丹麦设计、德国开发。

2019年中就收到 Tempo Email 客户端 beta 版上线开放下载使用的邮件通知，立马载下来看看。界面果然一如网站宣传的简洁，强调专注及任务管理，便利的邮件搜索和附件管理。

现阶段上线的版本完全免费，beta 版支持接入 Gmail 和获取 Mac 本地的 Email app 配置的邮箱地址作为发件人。

Tempo 配置好 email 后的初始状态界面

试了一下，体验如下：

图标醒目，设计简洁，看着舒服
可接入多个 Gmail 邮箱
支持 Markdown 和 HTML 写作模式
默认初始界面叫做 workspace 工作空间，右侧划了块 Todo list，应该会根据你对邮件的规划进行安排
未读邮件提醒默认驻留于左下角卡片，点击后会进入全屏 focus 专注模式
大量快捷键支持

Tempo 的图标是图中自上而下的第三个，白底配上一个硬气的黑色单引号

通过快捷键组合 ⌘⇧L 可激活标签输入框给邮件贴标签

有一条如 spotlight search 一样的全局搜索条，可快速检索邮件、联系人及附件

Tempo 的收费定价为月费15美金或年费150美金，现阶段的 beta 版免费。

不过在体验一番之后我决定放弃使用，因为个人在桌面端是习惯用 Gmail 的网页版，搭配 Chrome 的 Google Mail Checker 提醒，且多年的网页版使用习惯已养成。

但还是推荐有兴趣的朋友体验一下，产品策略思路和交互设计挺有意思，开发层面应该也有亮点。

Tempo Mac 邮件客户端官方网站：https://www.yourtempo.co

两人公司之“小型技术基金会”

Mon, 11 Nov 2019 00:00:00 GMT

阅读 “Form Design Patterns” 电子书时看到其中引用了另一本关于无障碍访问 “Accessibility for Everyone” 的作者 Laura Kalbag 的简介，于是不自觉地被网页上关于她的相关网站吸引了过去

以下是她参与创立的几个在线平台：

Ind.ie

Indie is Aral Balkan and Laura Kalbag, two European designers who build things.

INDIE 是由欧洲设计师 Aral Balkan 和 Laura Kalbag 创立的网站，分享他们的创作。

他俩设计和开发了不少小工具，包括帮助用户更好保护个人隐私的 iOS 及 MacOS 应用 Better Blocker。

网址： https://ind.ie

Small Technology Foundation

进而看到他们宣布成立了 Small Technology Foundation，中文可以理解为小型技术基金会，是一个非盈利组织。创始人依然是 Ind.ie 的 Aral 和 Laura，这个组织方便他们透过筹款，进行小型技术相关的研究和开发。

他们对 Small Tech “小型技术”的定义包括：

易用 easy to use
个人化 personal
注重隐私 private by default
零知（加密） Zero knoledge - 工具也许会存储你的数据，但不应知晓你的数据。
点对点 pear-to-pear
分享相同的 share alike
可互操作的 interoperable
非商用 non-commercial
无障碍使用 inclusive

网址： https://small-tech.org

Ethical Design 道德设计

Indie 还于2017年发起了 Ethical Design （直译为“道德设计”）活动，旨在呼吁设计师在设计的过程中要心存敬畏，尊重人的基本道德权利，构建可信赖便捷方便的产品，并力求传递愉悦的体验。

认同这个信念的设计师，则可以将相关的宣传图标和口号放在自己的网站上，以引起更多的关注。

网址：https://2017.ind.ie/ethical-design/

总的来说， Laura 所参与的这一系列小而独立的网站给今天的设计者和开发者提供了另一种事业的视角与可能性。有时候，你不一定要做什么特别火爆的产品以赚取华丽的知名度；有时候，强化设计者与开发者应用专业技能时所需具备的意识或态度对更广泛的产品和用户也是一种贡献。

麦当劳餐厅的实验性设计

Tue, 29 Oct 2019 00:00:00 GMT

2019, 纽约时代广场的麦当劳餐厅，图片来源：dezeen

2019年9月，楼下开了至少十几年的麦当劳近日停业一周，展开全面装修。每次经过，都忍不住放慢脚步，观察装修带来的视觉和体验的改变。

红色的麦当劳灯箱招牌被拆下，换上了单独刻出来的“McDonload”字体灯箱。不再用长条白织灯管作照明，装修师傅将LED灯管小心翼翼地逐条接入链接字体灯箱的原型孔洞里……

2015年，室内设计公司 dezeen 为麦当劳餐厅的室内设计展开了一场实验。

实验性设计首站是位于香港岛金钟海富广场的麦当劳餐厅。新餐厅室内设计大幅增加了黄色和黑色的大面积应用比例，配以木纹、铝合金、硬质石材等装饰材料质感，并将纯色的圆角风格的插画及文字嵌入墙面，打造现代、个性又年轻的视觉效果。红色成为了点缀，盏盏曾经用于香港路边水果摊的红色灯罩灯具被扭转角度，光线近距离打向墙面，令原本朴素的墙面多了一丝温暖和复古特色。

更多的麦当劳装饰： dezeen 官网记录的这篇文章 “Hong Kong McDonald’s pilots “an experiment in non-design（麦当劳香港金钟店“非设计实验”）”。

2019年，dezeen 正在将全新风格的麦当劳餐厅装潢带去纽约时代广场、中国以及香港的其他分店。

”Minimal“（最小化）、“Form & Allegro“（形式与快板）及 ”Public & Hub Metro“（公共枢纽地铁）是设计师赋予新版麦当劳餐厅的设计概念。

更通透的餐厅视觉印象，更少的人工收银台，更高效的配餐流程系统……伴随着不失初心的眼光与思路，麦当劳正向着未来继续着它服务设计的改革。

Focus-to-float input label in pure CSS

Mon, 21 Oct 2019 00:00:00 GMT

In a recent project with Bulma as the CSS framework, I built a focus to float input label effect in pure CSS.

The effect demo

Implementation notes

Base on the Bulma CSS Framework form HTML structure
To add the floating label effects, add class="has-floating-label" on the .control
add class="with-floating-label" on the .input.is-medium
and add class="is-floating-label" on the label which stands after the input, it should get the CSS for the floating label.
placeholder=" " is required on input as the CSS uses :placeholder-shown as selector* Tested and works on modern browsers (webkit since 2019)

CodePen Source code and demo

See the Pen Floating label input based on Bulma CSS Framework (pure CSS) by Millie (@witmin) on CodePen.

由布頭布美想到的 web 创作工坊

Mon, 02 Sep 2019 00:00:00 GMT

读香港服装设计师张西美的专栏整理成书「布頭布美」，其中一篇「Haystack 十二昼夜」记录了她曾经在纺织工作坊 Haystack Mountain School of Crafts 的学研经历。那是亦师亦徒的共同学习环境，大家沉浸在大自然怀抱中的纺织工场，与各式专业纺织工具为伴，与大家一同实践及创作着纺织业的各种集实用与美学的可能性。

看到这里，好期待 web 设计开发届也有这样的工场，大家用认真及专业的态度实践和分享专业的技巧与细节，带新人们感知 web 设计的细节，看到其融美学与科学的精密流程，拓展更多 web 的可能性。

不仅仅是知识的分享，知识分享的环境与氛围也十分重要。纵然知乎有 live 频道，live 频道里也有不少大牛开设了各类专业的课程，但整个的氛围与过程，似乎强化了信息碎片化环境下快速的成长跃进，而缺少了某种严肃认真的工匠精神的代入感。

也许 web 的性质便是这样吧，我们的双眼始终得与屏幕打交道，与这世界中一套一套规整的印刷字体打交道。

Web 产品体验与界面设计及相关前端开发的学习，是否还有另一种可能如「工坊」一般的体验可能性？

戴尔 Dell U2419HC 显示器小评

Sun, 03 Mar 2019 00:00:00 GMT

Dell U2419HC 显示器竖屏效果

终于入了Dell U2419HC, 显示器包装里附送 HDMI 及 USB-C充电线，直接给Macbook借上，直接替代Macbook原装的充电线。

相比 U2419H，戴尔 U2419HC 型号中多处的 ‘C’ 就是指支持USB-C。显示器带两个可充电的USB接口，一个在背后，一个在侧边，工作的时候可以顺便给手机充电及作数据传输。于是把本本自带的电源、电源线和额外的 USB-C 三口转接器都收起来了，桌面清爽了。苹果自带的USB-C线经测试只能充电，不能传输数据。

Ultrasharp系列的色彩果然赞，视觉效果跟Mac屏幕一样了。1920*1080的分辨率，虽然不是retina，但是更实用。 Dell的支架非常顺滑，无论是调节屏幕高度角度或是旋转都非常轻松顺滑。这部显示器也兼容Mac系统的 Nightshift 夜间转换设置。

通过访问Dell官网及过往公司的显示器状况，决定买这个显示器型号之后就去香港的比价平台 price.com.hk上查询商家报价，取货地点等，最后在选定的旺角电脑城的某Dell零售商店成交提货。实际价格比官方零售价低了1100元左右。香港的电商运费成本太高，所以传统零售模式依然兴旺。美中不足的就是显示器连包装有7.5公斤，虽然有把手，但拎回去还是比较吃力。

总的来说，如果需要准确的色彩，舒适的使用体验和更加清爽的桌面，这台显示器可谓是 macbook 的好搭档。

Sketch app 色彩管理器的色值错误

Wed, 27 Dec 2017 00:00:00 GMT

Sketch 里的RGB色值和用 ColorSlurp app 取到的色值不同

开发同事截图说我提供的绿色色号在显示时跟设计稿不一致，特别亮。对照Sketch的色值，这个绿色显示为RGB(0，170，173)。开发对照后表示出问题的颜色就是用的这个色值。

于是打开单独的取色器App一选，RGB值竟然为(43, 170, 173).

后来搜索了一下这个问题，在Stackexchange上就早有同样问题：

When we export an image, we interpret our color values in the sRGB colorspace. We also save the color space in the metadata, unless you have ‘Save for Web’ checked in the export panel. Regardless of that setting though, the intent has been to save with sRGB, which works nicely with Safari as it interprets all images as being saved with sRGB in the first place. If you would also open the image in Preview, it would recognize the sRGB profile and render it as close to Safari as possible. We believe this way we get the most consistent color representation possible.

iOS app color profile最佳实践请参照iOS Developer Human Interface Guideline

香港留学&城市大学MFA专业问答集锦

Wed, 06 Dec 2017 00:00:00 GMT

正式开始阅读前，请留意此文的时效性。专业是会变化的，下面的一切是历史，放在数年后的今天，可能都已不一样。

2010年初，一个人完成了香港城市大学MFACM授课式硕士的申请。过来读书后，在豆瓣上收到了不少留学香港的咨询贴，后来在微博和QQ上也收到了一些朋友的校友的提问。三年积攒下来，感觉大家的疑问不外乎那么几个，怎么申，好不好申，好不好找工作之类的问题，觉着如果把这些问题从豆邮里扒出来，稍做整理，也许对如今也在考虑是否要到香港读硕的你会有所启发。

关于到香港读研读硕的常见问题收集归纳

Q: 请问申请去香港读研是大三上学期的11月份就要递交申请了吗？

A: 大三上太早了，大四上学期期末那会儿开始申请还差不多。

Q: 我今年大四准备申请城大，在豆瓣上看到你的留言帖子啦，正在纠结要不要找中介，小米给点建议呗?

A: 不用找中介，自己按照网站申请说明踏踏实实去做就可以了。如果你不像花时间去完成那些略显繁琐的过程，花钱雇中介帮忙确实能省心些。

Q: 都需要准备些啥材料啊？

A: 你可以去学校的申请网站上看，通常是在线申请，英语成绩单，在校学习成绩单、毕业证、学位证、个人陈述等等，不同的专业可能还有不同的要求。

Q: 我之前并没有打算读研，所以成绩很烂，已经有4门课要重修了，这会不会影响很大？我现在是准备考托福，请问一般需要多少分才够? 还有，我想问申请方面需要注意什么东西？面试之类的是怎么个情况？

A: 在校的成绩听说挺重要的，听一位师姐说最后的GPA最好在3.3以上。我的英语成绩用的是CET6，托福的成绩学校的网站上都有具体的说明，不同的学校要求不同，你可以去查查。我申请的是城市大学，他们用的是统一的在线网申系统，可以通过这个系统上传相关证明的扫描件。我的专业是MFACM，他们要求作品集，所以线下我做了一份作品集寄了过去。城大没有面试。不知道你想报考的是那所学校哪个专业，不同的专业的要求恐怕也不同。

关于香港城市大学MFA专业的申请问答

Q: 城市大学的MFA需要面试么？

A: 不需要，交作品集就好了。

Q: 城市大学MFA好考吗，每年的录取率如何啊？

A: 过去几年没年的招生总数是20人，内地生大都占一半的名额。

Q: 之前是申请了多个学校还是专攻MFA这个Offer，我想考MAMC(Master of Arts for Media Culture) 感觉希望真渺茫。本科学校需要是211或985吗?

A: 之前只申了这一个(MFACM)专业。不用担心211，985啦，香港的老师不会在乎那些虚名的。 MAMC相对会容易申请一些吧，招的人也多，不少MAMC的同学也不是专业相关背景的，如果对媒体文化感兴趣，英语也达标的话，写好自己的个人陈述，说说自己的兴趣，目标和未来规划，同时按要求递交在校证明，在校成绩什么的，尽早申请，还是有很大的成功机会的。

Q: 申请这个专业提交什么类型的作品比较好？对作品的要求高吗？对数量有要求吗？

A: 作品类型不限。摄影、插画、网页设计、应用程序、动画、平面设计，任何东西。只要是觉得能代表你的作品，对数量没要求。老师应该是从作品中去感觉你的创意思维，看看适不适合MFACM这个专业的学习。

Q: 官网上写可以提交self-introduction letter，请问写这个有什么重点可以把握吗？比如技巧什么的。

A: 这个我也不知道。不过当初写的时候看过太傻论坛之类的帖子。建议是说写明你的经验，还有你兴趣的方向以及对未来的规划。就简单说就是你学了什么，你想学什么，你打算学了做什么。

Q: 这个专业的课程学习对美术功底的要求是不是比较高？极其不擅长手绘的人可以学吗？还有这个专业的就业方向是？入学前最好掌握哪些软件？

A: 不要求有专业的美术功底。专业课程的设置各个方向都有，比如摄影、电影、动画、交互媒体、音乐创作，总的来说是跨界创作，至于每个人未来想做什么，你在学校里选什么课，就看每个人的兴趣方向。

这个专业是Master of Fine Arts. 不是什么一个月速成的软件专修学校。老师不会花太多时间在教你用软件上，如果你只是想学软件大可不必学这个专业。如果你有感兴趣的方向，自己有想做一些东西，那么你自然会想尽一切办法去了解实现的手段，也就是要用到哪些软件。

未来的就业方向其实也是看个人兴趣，电影界、动画界，设计界，IT界，你要想做与专业无关的工作也不是没有可能。应该先清楚地知道读书不只是为了找工作的。

Q: 我是中文系的，对平面、摄影等都是很感兴趣的，但目前只是业余，我是否有必要去学一些专业的东西（比方说绘画，平年设计）？还有就想问一下，老师对递交的作品的专业性有要求吗？因为我觉得我在专业程度上肯定比不上那些摄影、动画专业的同学。况且，它录取的人数也不是很多。另外，你对于城大中文的研究生了解吗？因为和我专业最对口的就是它了，但我不太清楚它的情况。

A: 我本科也是文学相关的，也是出于兴趣做了些东西。专业性没有要求，创作其实不分专业呀。不过MFA的学习会多一些偏抽象及跨界的新媒体艺术，以及需要极强动手能力的project，课程会涉及使用编程来实现某些效果，所以要有心理准备，很多内地同学表示过来之后发现课程跟他们想的不一样，因为创意媒体学院不是设计学院，本科生有不少基础设计、摄影的课程，研究生可以去旁听；研究生关于设计和摄影的课，主要是基于老师的方向做项目，大都不会教得太基础，编程除外。

学院最大的帮助在于开拓你的眼界，帮助你拓展思路思维，让你遇见和尝试新的技术方法，自己努力，做出任何你自己想要的东西，自由度很大的时候难度其实也增加了。

总之，兴趣是关键，你最好在摄影、动画或交互三大类方向课程有自己明确的喜爱的方向，不然也容易纠结。中文系我不了解呢，好像是语文学部，貌似也不错。

Q: 听你说到编程我真是头都大了。是不是你们偏重于制作呢？其实我比较希望可以从事编剧与电影或短片拍摄。你是MFACM吧，那MAMC到底侧重于什么呢？

A: MFACM包括理论和实践类课程的学分，理论三分一，实践三分二。编剧电影那块的课我都没修恐怕说不出太多。

MAMC是媒体文化，偏理论的，不过MFA有些实践型的课MAMC的同学也可以选，挑战会比较大就是了。理论的部分会比较哲学抽象一点。

总之，学院是偏艺术加科技。但技术只是辅助，不要指望短时间里能把技术学精学透，真想学到东西需要自己课后花更多时间，读两年比国内读四年还要辛苦，当然前提是你热爱它并希望做好。

Q: 我想申MFACM这个专业的研究生，请问这个专业是偏向动画多一些，还是整个新媒体都会涵盖啊？

A: 实践动手类的课程有三大块，一块动画、一块摄影、一块交互/互动设计，个人每个学期都要做个个人的Project，内容自选，想做动画、摄影、图形设计、编程、交互装置、网页相关……都可以，看个人兴趣。我觉得最好是你自己有个兴趣的方向，有针对性地去发展。

后话

如果你有以下几种想法，个人不建议继续深造：

只是为了出国而出国，不知道自己喜欢什么，想学什么。
以为读了个研就找到合适的工作。
不愿意吃苦。个人觉得至少MFA读下来还是很辛苦的。如果你能让硕士的学习过程显得很轻松，那估计你学不到什么。

以上回答全为个人观点，仅供参考。

2016变奏曲：大世界与小世界

Mon, 02 Jan 2017 00:00:00 GMT

2016年已经成为历史，众大咖们纷纷发文总结这一年。于我，2016似乎经历了许多，但要人回忆与细数，着实需要耗费脑筋，回忆回忆。

##大世界正如昨日听《锵锵三人行》2016年最后一期中梁文道所提，除非是商业上的事情，我会泄愤报告总结，但叫我回忆过去一年发生的事情，我还真一时回忆不起来。一年可以发生的事情很多，可以发生的大事不多。若能用简单几字概括，倒也省时。

马家辉说，有人找他给2016选年度字，他给了个字：“变”。事后他再想，觉得“裂”字才更为恰当，因为英国脱欧、美国总统大选、台湾总统大选、香港立法会选举、韩国总统朴槿惠被弹劾等等事件，斗殴提现了不同国家不同地区民众意愿的巨大分歧。他再一细想，或许“崩”字才对。崩裂，格局变。

看向这些世界政治军事层面的大事，自己就如一个局外人，多少有一种看热闹的心态。但必须承认，美国经济趋势向好，人民币贬值，于我是有真真正正的影响。

##小世界看回属于自己的小世界，我已在香港这座城生活了6个年头。根据香港的法律，在此连续居住满7年将有资格申请永久居民身份。也许，在2017年，为了个人的利益，我的身份将有所改变。

####换工作 2016年6月，离开了工作了4年的第一家公司，踏上了新的工作征途。离职主要是因为进入了一个舒适圈，希望能够面对不同的挑战。

一眨眼，在新的工作岗位上已经工作了大半年。由于项目类型的不同，经历的东西也很不一样。此前更专注于大型的企业级在线学习及绩效考评系统的设计，在有限的资源内要平衡各方需求，及提供最优的用户体验设计解决方案。同时结合前端设计，提供高保真原型，优化和工程师的沟通及设计实现效率。如今接触的项目并非大型的周期性产品，更多的是解决各分支部门产品的用户体验。由于人手有限，同时需兼任项目管理的角色。同一时间需要统筹运作多款不同产品。沟通成了最艰巨的任务。而针对每一款产品，也需要在有限的预算、时间、开发资源的限制下，努力达成预期目标。如何在同一时间不落下一款产品，并最优化设计输出，及监督开发的有效应用，成了当下的最大挑战。

新岗位伊始，就曾错过了一场会议，因为当时太专注于项目B的设计，且没在多台设备上设定日历提醒同步，错过了项目A的会议。自此，Google Calendar受到了重用（因为企业默认的日历安排必须使用Outlook里，且不支持Mac及移动设备日程提醒），每有一场安排，必定会在Google Calendar上添加。

同时要推荐Todoist这款任务管理app。如今个人的多项目任务管理。Todoist有很清晰的项目分类，也可以很方便地规划时间，甚至是设定会议提醒。它同时支持几乎所有平台，只要装上个手机app，无论在哪里，都可以监督自己的工作任务。

####可用性测试新工作中的不少项目终于是面向大众消费者的了，我也有机会将此前学到的可用性测试（Usability Testing）的方法付诸于更多的实践，通过访谈和观察用户在交互原型上的操作，来发现潜在问题，及时优化和解决。而这些测试得到的反馈还是很有意思的。

换工作之后基本的感觉就是时间在以上一份工作的4倍速运转，短短半年里已经参与与正在参与的项目接近10个。虽不是外包，却也感受到了外包的艰辛。

##学习不知为何，不觉得2016年学了很多东西。但仔细想想，其实学了学Python，Django，完成了Udacity上Fullstack foundation with Python的学习。学会了一些命令行。也许是刚刚入门，觉得这块东西坑很多，有点难。但经验告诉我，这些都是孰能生巧的技能。只是暂时缺实践，还没能致用。

学会了AWS EC2的配置和基本的LAMP环境搭建。并成功用AWS部署了VPN，由于是AWS的Free tier计划，在国内的访问依然比较慢。

读了Google Venture团队出的书”Sprint”，希望未来能有机会实践这一方法。重读了“Don’t make me think revisited”第三版，这回是英文版。作者的部分观点放在实际的设计工作中其实还是会有点问题，比如Tab的应用。但用户测试的部分很受益。

一如既往地使用Panda这款Chrome插件来订阅DesignerNews和Dribbble。偶尔看看Feedly上订阅的内容。

##游戏 2016的许多时间献给了虚荣 Vainglory这款3v3多人在线竞技游戏 (2020年记：Vainglory 的服务器于2020年初疫情期间被供应商关停，暂时账号数据全无，时过境迁)。这款游戏在国内是巨人代理。有关注了这款游戏今年的冠军杯。最终韩国胜出。发现自己的东亚区帐号原来就是跟韩国日本人打，难怪那么难。最近回国又开了个中国区的帐号，发现大家的打发风格略不同。某次加了个国内的官方qq群，发现群资料里，70%的玩家是90后。老了，更加得瞅瞅电竞行业究竟是怎么一回事。

##分享不时在西方的世界里遇到新推出的有趣产品，我会把他们拖拽到Dragdis这款书签应用中收藏（2020年记：近年已转用 RainDrop）。也会把他们分享到国内的掘金技术社区。

自从换了新工作，很少更新个人网站millielin.com了。因为又希望能做有突破性设计的改变。

但愿2017年能够彻底上手眼下这一切挑战，让时间慢下来。

Icon-font图标字体的四类制作方法

Tue, 23 Dec 2014 00:00:00 GMT

FontAwesome 经历了两年的进化，如今已成为不少工具性应用开发者的首选。但 FontAwesome 的图标毕竟有限，在某些特定的情景中，FontAwesome 的字体并不能准确地传达合适的意义。为自己的 Web App 定制 icon-font 字体在某些时候就变成了一种需要。

因为想为公司的产品定制一套 icon-font，把曾经那些不易改变不易调校大小颜色的图片改成图标字体，经过搜索和试用，发现 icon-font 大致有四类制作方法。这四类方法的图标生成原理是一样的，

主要步骤：

步骤一：使用矢量图形编辑器设计图标，画布最好设为512px*512px。以 Adobe Illustrator 为例，保存为 svg 格式时会弹出一个 svg 图片属性设置对话框。这时候请按下图设置选项,

上图来自 Filament Group

步骤二：将 svg 图标文件导入 Glyph 字型排版工具编辑调校，生成icon-font字体文件

步骤三：制作与字型编码匹配的 CSS 文件供网页调用

以下介绍的四大类型的 icon-font 制作方法的最大分别在于第二和第三步，也就是使用什么工具编辑和生成字体的不同，及是否自动生成 CSS 文件的区别。本文会忽略第三步CSS文件的制作的过程，重点介绍第二步的差别和心得。

1. 速成系：一步到位

在线 icon-font 生成器，比如 icomoon.io 或 fontello + 自制 CSS 文件

icomoon 的 icon-font 生成器界面

IcoMoon 和 Fontello 都支持直接拖拽 svg 格式的图标到网页上传图标，即时在线预览不同字号的图标字体效果，批量编辑图标的 CSS class 名称和 Unicode 编码，以及下载为全套 web 字体及 CSS 文件，可谓相当方便。

倘若下载之后发现其中某个图标的名称或编码需要修改，而 icon-font 生成器已经被关闭，如果你需要编辑的图标不超过10个，那么恭喜你，你依然有机会在几分钟内完成图标字体的生成。但是如果需要修改的图标太多，那么这种免费的在线编辑器恐怕会成为你的噩梦。

由此可见，免费的在线图标编辑器只适合小批量快速的图标编辑，图标的质量取决于你在svg文件设计时的质量。

当然，如果你想使用在线的 icon-font 生成器服务于大型的图标字体项目也不是不可以。IcoMoon 就推出了 Premium 付费服务，你只需注册并按使用期限付费，就可以在线保存 icon-font 编辑项目了。

速成系方法适合不擅长设计，想要快速获得定制图标库的开发者。

2. 尊贵系：专业级的体验 (Mac)

矢量图形编辑软件（Adobe Illustrator）+Glyphs/Glyphs Mini/FontLab + FontSquirrel WebFont Generator+ 自制CSS文件

尊贵系，顾名思义，需要花费不少银子才可以获得正版使用权。

其中的 Adobe Illustrator 不用多说，是矢量图形设计利器。自Adobe推出CC按月付费以来，设计师对于 Adobe 软件的支出便成了无底洞。虽然 Affinity Designer, Sketch 等众多支持矢量图形编辑的软件纷纷推出满足一次性付费的图形编辑器市场的需求。但是毕竟这些新应用或多或少还有一些 Bug，稳定性短时间内难及 Illustrator。当然，如果你对其他矢量图形编辑软件有信心，在这一步把 Adobe Illustrator 替换成其他你心仪的图标编辑软件，甚至直接使用接下来介绍的 Glyphs 制作亦可。

Glyphs

Glyphs是一套专业级的字形编辑器，完整版的价格约人民币2000元，支持直接在Glyphs里创建矢量字形。Glyphs Mini 相比 Glyphs 主要保留了SVG导入，字体命名及字体文件导出的功能，价格约为完整版的十分之一。

全套价格不菲，如果你已是 Illustrator 的重度使用者，建议配合 Glyphs 使用。可视化的节目适合专业的字体设计师，及不愁经费的个人及团队。相比接下来要介绍的开源系，Glyphs 相信在字体编辑导出的效率上会大大提高。

FontLab TransType 可用于转换字体，导出不同格式的字体文件

FontLab公司出品的一系列字体编辑转换工具与Glyphs类似，FontLab Studio也是专业级的，支持Mac和Windows平台。因为没有使用过，这里就不赘述。

使用 Glyphs 导出 icon 字体文件后，可以使用 Font Squirrel 网站提供的Webfont生成器上传由 Glyphs 导出的.ttf格式字体，然后选择默认的Optimal选项，最后“Download Your Kit”，生成器就会默认生成包括.eot, .svg, .ttf, .woff, stylesheet.css 及 Demo 页面的文件。不过 icon-font 字体有时无法正常在它生成的Demo页面正常预览到。这个Font Squirrel 的字体生成器会更加适合英文字体的生成和排版效果预览。

Font Squirrel Web Generator 截图

如果你想高度定制导出的 WebFont Kit 的文件类型，可以选择 Expert 进行更多设置

2. 开源系：尊贵系能做到的，我也可以，只是…（Windows/Linux/Mac）

InkScape + FontForge + FontSquirrel WebFont Generator

不同于尊贵系，这一系的软件全部是开源的，支持全平台。

InkScape是一款开源的矢量图形编辑工具，点击菜单栏 Text > Glyph 即可进入字型编辑面板。不同于 Illustrator 只能浏览自行，InkScape 的 Glyph 还可以将当前选中的图层添加到为新的 Glyph。不过过程稍稍麻烦，这就是开源软件的不便之处。毕竟缺少组织性的综合产品设计规划与开发，InkScape 看似功能俱全，但界面图标设计和易用性欠佳。

FontForge是一款开源的字体编辑工具，在 windows 和 Linux 上上有 GUI 版本，在 Mac 上可以通过命令行安装。虽然功能上几乎接近专业级的收费软件 Glyph，可以导入 svg 文件，编辑字体信息，调整字型样式，但是在体验上真的谈不上方便，不少操作有些繁杂，有一些明显的 Bug。但它毕竟是开源的软件，并且在2014年中重新开始了开发与更新。

4. 竹林系：搞定命令行如有轻功（Mac/Linux）

**矢量图形编辑软件（Adobe Illustrator）+FontCustom **命令行

Font Custom网站截图

我尝试用过两次，第一次是在几个月前，搜索 icon-font 制作指南时发现了放在Github上的开源项目FontCustom，但那是因为不是很明白这类基于RubyGems的工具的安装运行原理，所以没有安装成功。

第二次尝试是在今天，因为重装过 Yosemite 的 Mac 系统，于是从零开始跟着安装指南安装了 RubyGems，Brewhome，FontForge。据说只要运行一句命令行，程序会自动把存有svg源文件的图标自动生成为 webfont，同时会生成 css 文件和HTML预览文件。

现有的一个 icon-font 库 Ionicons 的目录结构及 Cheatsheet 预览页面的样式就同 FontCustom 非常相似。他们都是基于 Python 的程序自动生成的。

用户可以自己在 yml 文件中设定模板生成参数，支持直接生成到指定路径的文件夹，或是生成 scss 版本等。如果掌握了FontCustom 命令行生成 icon-font 的方法，则无需依赖在线的 icon-font 生成器，可以在本地意见生成 icon 字体和全套的页面文件。这就使得图标的修改更新和预览非常方便，也非常方便团队协作。

但没有什么是完美的。FontCustom 虽然长远看来十分方便，但是如果没有命令行使用经验，要自己安装和上手是有些复杂的。

另外在安装 fontCustom 时用到了一个 listen 的 package，安装时提示2.8.4的版本503错误，最后是手动安装了listen 的2.8.3的版本，才得以继续 FontCustom 的安装。

另外fontCustom在生成文件的模板设定上还需要下一番功夫，才能让生成的文件版本、名称和结构称心如意。

小结

以上四大类的icon-font生成方法适用于不同的项目和人群，欢迎自行挑选。尊贵系的部分软件因为没有亲自购买体验，描述全靠印象。个人目前使用icon-font的项目属于长期需要优化修改且需要团队协作的大型web应用，所以个人选择使用第四种方案，也就是FontCustom。

至于icon-font制作的第一步，也就是SVG icon设计的部分其实也是一个很有学问的步骤，尤其当icon要面对不同字体的挑战时，尤其是14px以下的字体时，有可能显示不清或是有锯齿，这就需要在图形构思方面下更多功夫。

今年最让我喜欢的icon-font库不是FontAwesome，而是Drift公司为旗下ionicFramework配套设计的icon-font Ionicons。今天的icon-font图标研究少不了对Ionicons 2.0的文件结构的研究。从样式上看，Ionicons或许也使用了FontCustom生成字体，不过他们高度定制了Python Script，实现了更加进阶的诸如CheatSheet生成的功能。

最后，icon-font只是用于网站图片展示的方法之一，不见得适用于所有项目，尤其是基于Marketing的小型项目，有时直接使用svg或png图片效率更高。

欢迎有兴趣的朋友参与讨论。

Millie Lin

2024 & Q1 2025 我付费的互联网产品

付费订阅的应用

停止付费的应用

工作生活日程二合一: Notion Calendar

放心少烦恼：Dashlane 密码管理工具

免费地爱着： Todoist 任务清单

一次性付费的 Mac Apps：

推荐的免费 Mac Apps

设计及开发相关免费 Mac Apps

常用的 Chrome extensions 浏览器扩展插件

相关文章

2023 我付费的互联网产品

付费订阅的应用

最爱: Notion Calendar

放心少烦恼：Dashlane 密码管理工具

免费地爱着： Todoist 任务清单

一次性付费的 Mac Apps：

推荐的免费 Mac Apps

设计及开发相关免费 Mac Apps

常用的 Chrome extensions 浏览器扩展插件

相关文章

2022 我付费的互联网产品

付费订阅的应用

最爱： Todoist 任务清单

还不错：Dashlane 密码管理工具

特别推介：Flomo 浮墨笔记

一次性付费的 Mac Apps：

特别推介: Cron - It’s about time

推荐的免费 Mac Apps

设计及开发相关免费 Mac Apps

常用的 Chrome extensions 浏览器扩展插件

开源装机字体

相关文章

英语写作好书推荐：Plain English at Work

为何推荐你阅读此书？

Why you should read this book?

The invisible shapes: 7 easy-missing web design details

The problem

How to make the “Invisible shapes” visible?

Make the “invisible shapes” visible

The 7 design objects that deserve your attention

1. Error page

Example

Tips for delivery

2. Favicon and page title in browser tabs

Example

Tips for delivery

3. Leave site confirmation

Example

Tips for delivery

4.Cursor styles

Example

Tips for delivery

5. Display numerals: font, alignment and punctuation

5.1 Number font

Lining v.s. old style

Spacing: proportional v.s tabular

Tips for delivery

5.2 Number alignment

Tips for delivery

5.3 Number formatting

Tips for delivery

6. Deal with long characters

Tips for delivery

7. Text area resizing

Example

Tips for delivery

Reference resources

Tools used for creating this article

新生 · 在阳光下跳舞

再设计 · 邮件订阅弹窗

第一眼感受

再设计

2021 我付费的互联网产品

付费订阅的应用

最爱： Todoist 任务清单

还不错：Dashlane 密码管理工具

特别推介：Flomo 浮墨笔记

一次性付费的 Mac Apps：