阅读视图

发现新文章,点击刷新页面。

2023 我付费的互联网产品

generated-by-playground-v2.png 图片于 Poe 以 Playground V2 生成

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

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

主要变化: 停止了对 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

cron-notion-calendar.png 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-homepage-header-Jan2024.png 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 移动端应用,亦可透过桌面端的账号密码登录。

2020年更新:

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

2021年更新:

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

2022年更新:

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

2023年更新:

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

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

免费地爱着: Todoist 任务清单

todoist-homepage-2024Jan Todoist 2024年1月官网首页截图

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 图形设计套件可畏平价版的 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

  • Todoist:任务清单免费版。使用频率:一天多次。

设计及开发相关免费 Mac Apps

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

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

相关文章

2022 我付费的互联网产品

kelly sikkema 9iXvKph72W4 unsplash Photo by Kelly Sikkema on Unsplash

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

主要变化: 付费了 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 2022 Todoist 官网首页截图

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年中了,这种被遇见的感觉还蛮神奇的。

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

还不错:Dashlane 密码管理工具

dashlane 2022 Dashlane官网首页截图

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 移动端应用,亦可透过桌面端的账号密码登录。

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

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

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

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

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

特别推介:Flomo 浮墨笔记

flojo 2022 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 Cron Calendar界面官网图片

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

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

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

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

推荐的免费 Mac Apps

设计及开发相关免费 Mac Apps

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

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

开源装机字体

相关文章

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

plain-english-book-cover

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

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?”

default-503-server-error

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

  1. Error page
  2. Favicon and page title naming rules
  3. Leave site confirmation
  4. Cursor styles
  5. Display numerals: font, alignment and formatting
  6. Deal with long characters
  7. 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:

1-error_page

  1. 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”.
  2. 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

dribble 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.

2-page-title-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 2-page-title-tab-same-title 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 2-page-title-tab-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: 2-example-thoughtworks-tabs

Tips for delivery

  1. 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.

  2. 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.

2-page-title-tab-table-example 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.

3-page_exit_alert

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”.

chrome-page-exit “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.

4.button-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. 4-disabled-cursor-cathypacific

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. 4-not-allowed-cursor-MDN

Tips for delivery

  1. Keep cursor styles in mind when designing interactive elements for desktop applications.
  2. 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.
  3. In story tickets, add UI specification on cursor styles for the special cursor cases.
  4. 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

5_lining_vs_oldstyle

Spacing: proportional v.s tabular

5_proportional_vs_monospace

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
  1. Check if there are specifications for numeral displays in existing brand guidelines or design systems for directly use
  2. In figma, you may find a number styles configuration panel for selected text under the “Type settings”.

5_figma_number_styles

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. 5_alignment_bloomberg-stock

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. 5_formatting

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
  1. 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
  2. For numbers alignment, defining it in a UI mock-up should be enough. Alignment is a visual property and should be straightforward for recognition.
  3. 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.

6_long_characters

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

  1. 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.
  2. 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. 6_yahoo_news

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.

7_textarea_resize_grabber

Screenshot from MDN HTML Demo for textarea

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

7_textarea_resize_grabber_styles

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
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

新生 · 在阳光下跳舞

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

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

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

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

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

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

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

再设计 · 邮件订阅弹窗

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

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

第一眼感受

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

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

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

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

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

再设计

对这个弹窗界面做了简单的界面重构,对比如下图: 再设计版本对比

主要变化包括:

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

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

2021 我付费的互联网产品

kelly sikkema uUBltZemj1E unsplash 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 2021 hero image Todoist 官网首页截图

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

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

“原来真的有人读”

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

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

2021年更新:

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

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

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

还不错:Dashlane 密码管理工具

dashlane 2021 hero image Dashlane官网首页截图

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 移动端应用,亦可透过桌面端的账号密码登录。

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

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

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

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

特别推介:Flomo 浮墨笔记

Flomo 官网截图 Flomo 官网截图

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

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

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

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

另外如果你混迹 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 编辑器界面官方截图

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

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

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

推荐的免费 Mac Apps

设计及开发相关免费 Mac Apps

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

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

开源装机字体

与我一起跨年的桌面壁纸

pawel czerwinski 7FqOISWr5V0 unsplash 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 website Josh W Comeau 个人网站首页截图

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

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

相关文章

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

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

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

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

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

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

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

难度更大的交通规划?

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

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

共通之处

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

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

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

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

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

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

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

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

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

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

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

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

结语

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

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

去豆瓣了解更多图书信息

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

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

Hello Belly

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

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

hello belly 3d 「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」 是一款婴儿活动记录应用,主要用于记录宝宝的吃奶、换尿片及诸如睡眠、成长里程碑等其他活动。

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

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

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

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

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

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

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

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

thor alvis A57akxc 4BQ unsplash Photo by Thor Alvis on Unsplash

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

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

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

在医院住院病房,

  • 医生巡床检查后即时将病人最新情况写在打印出来的牌板资料页里
  • 护士一日多次给病人逐个测量血压心率后,会先将测量结果记录在自己的笔记本上,待回到护士站后再逐一记录到牌板或录入至数字化管理系统中

在母婴健康院或医院,

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

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

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

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

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

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

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

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

新生 · 序

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

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

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

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

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

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

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

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

UX Design Memo

Design Memo 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]

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 使用体验及插件分享

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

Sketch 75 于 MacOS 11.4 中的新版界面 Sketch 75 于 MacOS 11.4中的新版界面

使用 Email 账号登录

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

保存现有本地文件至 Workspace

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

save-to-workspace.png 点击右上角的图标将本地文件保存至 Workspace

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

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

协同操作

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

permission-settings.png Sketch Web 端的文档权限操作选项

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

不太方便的评论系统

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

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

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

依旧吃内存的性能

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

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

附:Sketch 常用免费插件分享

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

Sketch MeaXure:设计稿标注

sketch-meaxure-toolbar.png

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-replace-v2.png

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

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

Automate: 自动化命令工具集

automate.png

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

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

Fontily:字体管理替换工具

fontily.png

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

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

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

sketch-commands.png

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

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

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

汉语拼音字母表

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年就已经考虑了这样一套解决问题的结构性框架。

creative problem solving process 截图自 Coursera 参考资料:Creative Problem Solving (course enrollment required)

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

汉语拼音字母表 Chinese Pinyin Alphabet

汉语拼音字母表 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 的字形与手写体的差距略大,字体上有优化空间),包含声母表、韵母表和整体认读音节三部分。希望能与市面上常见的花哨的风格,有所区分,并有机会为拼音学习者所用。

Strategic Writing for UX 阅读笔记

随着互联网产品创作分工的持续进化,用户体验所应用的语言及文字内容也成为了体验设计领域可垂直探究的方向,随之也诞生了用户体验写作者(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月出版。

Cover of Strategic Writing for UX

我是在 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),并对每一步进行分析。读者便可理解在不同的组织目标和用户目标背景下,对语言运用的差异:

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

此书为英文,所以所有的示例及话语描述是以英语为基础。不同的语言必然有其格子用词、语法、标点或其他特点。所以这张话语表恐在不同语言下未必样样试用。例如中文就没有字母大小写(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)分享哪些信息将对你有价值
  • 你不只是要准备在会议过程中记笔记,二是要组织和给出你获得的信息的上下文

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

  1. 体验的定义Definition of the experience
  2. 用户动机 Customer motivation
  3. 组织的优先级 Organisational priorities
  4. 内容策略的优先级 Priorities for content strategy
  5. 团队/干系人 Team/stakeholders
  6. 现有内容列表 List of existing content
  7. 审查者 Reviewers
  8. 术语 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

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

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

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

吃完晚饭散完步,打开 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

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:

Basic Charts

Bar Chart

Customized Axis of Bar Chart

Area Chart World Population

Area Chart

Line Chart

Scatter Plot

Github Repository

General Update Pattern

Update Pattern Github Repository

Click Interaction

click interactin Github Repository

Making World Map

worldmap Github Repository

Choropleth Map

Choropleth Map Github Repository

Tree Hierarchy

Three Hierarchy Github Repository

Making Circles on Map

Making Circles on Map Github Repository

Line Charts with Multiple Lines

Line Charts with Multiple Lines Github Repository

Select a Year on a Line Chart

Select a Year on a Line Chart Github Repository

Reference Resources

For the theory of Data Visualization, the course is following

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.
❌