不要乱用“霞鹜文楷”字体

#迷你设计课

霞鹜文楷（图一）是程序员特别推崇的一个字体，因为它：

- 漂亮
- 字体名称特别有文艺和文化的感觉（俗称“看不懂什么意思”）
- 它是通过 GitHub 发布和维护的！

所以它被程序员用在了各种场合……其实大部分人都用错了这个霞鹜文楷字体

1，漂亮是个相对的感念

不扯“审美观”这种伤自尊的话题了，简单而言霞鹜文楷是一款风格介乎仿宋和楷体之间的手写字体，从观感和心理感觉上来说，霞鹜文楷是一款偏可爱、偏有趣、偏轻松、偏非正式的字体

参考一下跟霞鹜文楷同根的姐妹字体“芫荽字體”（图二），这种可爱的感觉会更强烈

本质上，霞鹜文楷的风格偏向少女们在手机上自定义的可爱字体，霞鹜文楷的“漂亮”见仁见智、而不是一种普适的美观

2，正式和不正式

霞鹜文楷的可爱、轻松风格适合于不太正式的场合，比如给女朋友写情书

在相对正式的场合，比如公开演讲的 PPT、找工作时的简历、公司的产品介绍页、产品文档、强调专业能力的个人网站…这时候用霞鹜文楷就掉价了

感觉跟男士穿着拖鞋去吃正式一点的西餐差不多，你可以这么操作，但结果不会太好

3，可用性

作为一种手写字体，霞鹜文楷字体结构和笔画都有点扭曲（不够横平竖直），渲染时会产生太多锯齿、反锯齿，不适合用于可用性要求较高的场合

比如用于阅读大段正文文字、用于字幕、用于 UI 时，可读性都不好，尤其是在屏幕较小的手机上，它的可读性比那些“死板”的黑体差很多

宝玉 @dotey 老师之前在翻译英语视频时，用了霞鹜文楷做字幕（图三），在手机上就看不清楚。后来我建议他改用粗一点的黑体，可读性就好了很多（图四），当然也避免了霞鹜文楷不正式的感觉

4，技术上的限制

有很多程序员把霞鹜文楷用在个人网页里，这是缺乏前端素养的表现

多数人的电脑和手机里都没有安装霞鹜文楷字体，在网页里使用霞鹜文楷，要么用户看不到这个字体的效果（被降级到某个字体），要么用户不得不为了看一个网页、而下载几 MB 的字体文件

同理，如果你在 Word、PowerPoint 文档里使用霞鹜文楷，其他同事、朋友、同学、客户…还有你暗恋的姑娘，大概率看不到霞鹜文楷的效果

如果你爱霞鹜文楷爱到不行，可以试试 PDF 文件，如果你选择了输出 PDF 时嵌入字体，你暗恋的姑娘看 PDF 文件时能看到霞鹜文楷的效果（但她大概率不会因此喜欢上你）

---

Anyway 了，在现实生活里，选择一款字体类似于选择一种表达方式：

你可以说普通话也可以说英语还可以说家乡话，你可以书面表达也可以拍短视频，你可以很放松地闲扯也可以有条理地表达 - 用哪种方式表达，取决于表达的场景、表达的对象、表达的目的，而不是表达方式本身

霞鹜文楷显然很有特色，你可以很喜欢它、但不能乱用它






有几种不同的方法，能在网页里显示用户本地没有安装的字体，同时不必下载整个字体文件

https://twitter.com/LeigeSee/status/1694735777316647163

为什么西方人那么爱看数据？

#设计入门

做出海产品的国内团队和开发者，可能会注意另一个现象：不但国外开发者、产品设计师习惯于看数据，普通用户也能看懂统计图表、数据可视化

国内小伙伴需要工作好几年、反复练习才能掌握的这些高级技巧，似乎老外“天生”就会🫥

我到了美国才意识到，这方面也有文化差异。比如以做菜为例：

我到美国之后厨艺明显提高，其中一个原因其实是：美国的煤气灶上，都会集成时钟、定时器（图一），有了定时器，我能精确控制做菜火候，精确到秒都没问题😅！（注1）

美国厨房里还有各种量杯、量勺、电子秤（图二）

最好笑的是还有专门用于做肉的温度计（图三），比如烤鸡、煎牛排、BBQ，把这个探针一样的温度计插进肉里，就知道内部温度是多少了 （注2）

还有各种例子，就连微波炉加热，美国人都会不厌其烦地警示：为了饮食安全，要保证加热后内部温度达到华氏 165 度

可以想象，在这种环境里长大的人，会习惯于测量数据、习惯于判断数据

相比之下，我们的童年是在经验和直觉里长大，听到的都是“我觉得可以”，学做菜都是学的放盐少许、煎至两面金黄、炖到用筷子能戳进肉里…

我们一方面讨厌原生家庭，另一方面也潜移默化地沿袭了家长们相信经验、相信直觉的习惯

注1：

人对时间的感觉是相对的，特别不准。很忙的时候，5 分钟一眨眼就过去了，相亲遇到讨厌的人，1 分钟都度日如年

注2：

这里也有设计小细节。

为了照顾普通人，一些温度计直接在表盘上标注了适合牛肉、小牛肉、羊肉、猪肉等不同肉类的刻度，牛肉还分不同火候。

使用时把表盘外面的红色游标，设置到你想要的温度/刻度上，测量温度时看看指针有没有转到游标那儿（图四）


这个温度计其实很有意思

它的刻度分成了四组，分别是：

- 牛肉全熟，小牛肉，羊肉
- 家禽
- 火腿，猪肉，牛肉五分熟
- 牛肉三分熟

没想到全熟的牛肉，内部温度也只有 77 摄氏度😅

为什么很多西方产品的功能那么单一

希望出海的国内团队、开发者可能会注意到一个普遍规律：国内产品特别喜欢多功能、all in one、瑞士军刀…而西方很多产品主打单一功能

撇开微信之类的超级 APP 不谈，以基于 ChatGPT 的小工具为例，国内开发者总是不辞辛劳地往里面使劲塞功能，生怕自己的工具不够全能；相反，国外很多 ChatGPT 产品只聚焦一个功能，比如只帮你写作

这些市场差异的背后，有东西方文化的差异

看看吃饭的餐具就明白了：中国人吃饭只用筷子和勺子，一双筷子别说吃饭、吃菜、抽小孩、剔牙、验毒…武林高手还用它当暗器；而西方人吃不同的食物，需要不同的刀子、叉子、勺子，每种餐具有它特定的用途

哪怕是最以没历史、没文化见长的美国，一般人家里也总有一套正式的刀叉勺子盘子。商店、网店里充斥着各种专用到令人“崩溃”的专用工具，比如：专门用来放香蕉的容器😆

文化会潜移默化地影响每个开发者和用户，每天沉浸在专用刀叉勺文化里的西方人，很自然地会习惯于创造单一功能的产品

btw，并非只有中国人、日本人喜欢开发多功能的产品哦，还有一些国家的开发者喜欢开发多功能产品，猜猜他们平时吃饭用什么样的餐具：用右手

#设计入门


这位推友问了一个符合逻辑的好问题，如果美国人喜欢开发、使用各种专用的工具，美国人手机上应该安装更多 APP…对不对？

统计数据（我没有求证过）证实了这个推理：

美国人手机上平均装 80 个 APP
.

中国人手机上平均装 50 个 APP
dataprot.net/statistics/how…
m.mydrivers.com/newsview/92245…

https://twitter.com/O8k0eDVgKzgBPZT/status/1679359598170451969

提高英语能力的每日自学计划

除了死记硬背、学了就忘的中式学英语方法，还有很多方法来有效地提高英语能力。这些方法大多都有一个共通点：自己给自己建立一个英语小环境

这位欢乐的英语老师这次给了一套每天早上 20 分钟的自学方案，需要的装备包括：笔、纸、一个英语视频
… https://t.co/uDNoYrNGLg https://t.co/Hl4tSJk7zU
twitter.com/i/web/status/1…
这位老师介绍过很多“非传统”的学英语方法，或者说不同于传统学校教育方式的学英语方法

和 Youtube 上其他英语老师相比，她的特色是很善于把抽象的学习思路变成特别具体、相对容易操作的小方法… twitter.com/i/web/status/1…

AI 能否改变网页设计？

设计工具 Framer 也推出了“文字-设计” 的 AI 设计功能

在 Framer 输入文字之后，AI 会以字体组合、配色组合、预置内容块为单位来帮你搭建网页，这种产品思路既不同于那些从零开始、纯拖放的 UI 设计工具，也不像“万物都是模板”的营销设计网站比如 Canva… twitter.com/i/web/status/1… 我实在没时间测试 Framer 的 AI 设计功能，分享一下其他设计师的测试

这个例子是为 Fintech 公司设计一个 landing page - 相对于 10 秒的工作，结果令人印象深刻

https://twitter.com/joshpuckett/status/1668634713949605896?s=20

放在手提箱里的便携显示器

LG 发布了 StandbyMe Go 触摸显示器，除了一般的水平、垂直使用状态，还支持平躺着使用

27 寸，自带流媒体播放功能，电池可续航 2、3 小时，售价约 6900 元人民币

设计很奇特，使用场景更是前所未见…说不上来算怪诞还是超现实，出门用的时候还得再背个电脑？

#设计参考 官方网页：
lge.co.kr/tvs/27lx5qkna

看完产品介绍，我终于理解 LG 这个奇特的显示器的使用场景了，按照 LG 的描述，它其实适合用来手机投屏

比如一群人去野餐，边吃边用它投屏看一集八卦电视剧什么的，27 寸显示器配上手提箱里的扬声器，也是一种体验

趁着天气好，我们结伴去了植物园

最近几个月成天和 ChatGPT、Midjourney 打交道，现在又成天研究 Spatial design、Vision OS 和 AR、VR、MR、XR，对比一下才知道，相比数字世界、虚拟世界，还是真实的大自然更美好

所以逛植物园时，我就使用了万亿级别的苹果公司、OpenAI 公司都没有的绝技：嗅觉… twitter.com/i/web/status/1… 在植物园里我也发现了 Vision Pro 眼镜和 Vision OS 操作系统的潜在问题：明亮环境下的对对比度

太阳下光线很刺眼，很多时候我就是“盲拍”照片，只能大概看出构图、完全看不清楚曝光程度和色彩，那么相似的问题就来了：

如果在非常明亮的环境光下用 Vision Pro 眼镜，怎么保证 Vision OS 里的… twitter.com/i/web/status/1…

扎克伯格评价苹果的 Vision Pro 眼镜

- 没有什么神奇的方案
- 比我们贵了 7 倍
- metaverse 元宇宙本质上是社交，而 Vision Pro 看起来更孤立
- Vision Pro 可能是空间计算的未来，但不是我想要的未来

macrumors.com/2023/06/08/zuc…

整体说得挺中肯

说元宇宙是社交、Vision Pro 更孤立那句很有技巧😂 太久没跟进，我一下子没想起来 metaverse 翻译成“元宇宙”、到底应该是哪个“元”

乔布斯眼中的 VR 眼镜

来自 2005 年他在 D3 活动期间的演讲

他说耳机是神奇的东西，戴上耳机，就能得到跟一对音箱相同的美好体验，但是世界上并没有适合视频的“耳机”；你没法带上一付“耳机”，就得到 50 寸大显示器一样的美好体验…

现场采访乔布斯的 Mossberg… twitter.com/i/web/status/1… 是有这个意思

谷歌眼镜属于 AR 眼镜，苹果的 Vision Pro 属于有 AR 能力的 VR 眼镜，后者本质上和外界是隔离的，问题更多😂

当然 Vision Pro 要比 Quest 那些友好一点点

Glasshole 这个词太精妙了，再次体会到英语骂人的艺术👏👏

https://twitter.com/GeekTalk_p/status/1666886799543910400

复刻 iPhone 发布前夜

明天的苹果 WWDC 2023 大会，最重要环节就是发布 Reality Pro 眼镜，一个创新意义类比 iPhone 的跨时代产品

我们没法回到 iPhone 发布前夜，但可以好好欣赏这个 xr 时代的前夜

1，从产品设计的角度来看

iPhone 最大的突破是引入了多点触摸的人机交互、iOS… twitter.com/i/web/status/1… 长推文还是太难阅读了。而且不能编辑

我把这篇关于 xr 眼镜的长推文编辑之后重新发布了，在这里阅读
nishuang.net/%E5%A4%8D%E5%8…

对需要画图的设计师（注）而言，最人体工学的鼠标必须是最右边那种

设计师使用鼠标的特点是需要很精准的移动（直线的、弧线的、曲线的都有）、以及非常频繁的精确拖放，这就意味着通常的操作姿势是手腕、手掌位置固定，手指捏着鼠标、靠手指的运动来完成操作… twitter.com/i/web/status/1… 这个 M330 太重了

而且我用过的所有罗技鼠标都很垃圾

https://twitter.com/daydayuuup/status/1664075474891608064?s=20

动态展示鸟类迁徙的路径

非常生动的数据可视化效果，不是实拍，是把鸟类飞行的 GPS 原始数据绘制成动态轨迹，再和地球的动画结合起来

#设计参考

视频来源见上面的粗体小字

怎么设计一张既详细、又简单、还便于查阅的城市交通图

t2design.no/oslo-transit-d…

地铁地图/城市交通图是对普通地图的抽象和简化，除了基本的地图绘制技巧之外，怎么抽象、怎么简化就变成了一个类似 UX 设计里信息架构和 UI 设计的问题

作者是自由职业设计师，他 2017… twitter.com/i/web/status/1… 以前介绍过有热心人设计了深圳+香港城市交通图

和奥斯陆的这两张地图相比，那套地图的设计更多是从地图设计和视觉角度入手，兼顾了一点点可用性

https://twitter.com/nishuang/status/1605421236367937537?s=20

DEMO 效果美好得不真实啊

哪位推友有时间，帮忙测试一下实际效果？

https://twitter.com/sundyme/status/1661026764431437826

多谢推友的测试！这个效果比较接近我理解中的 Adobe，哈哈

https://twitter.com/Mark_M3k/status/1661035175843885056?s=20

怎么解决手机这个信息过载的万恶之源？

再来一个专门收消息的专用设备，避免各种手机 APP 互相干扰！

Beepberry 把黑莓键盘（带指甲盖大小的触摸板）、超省电 400x240 LCD 显示屏、Raspberry Pi Zero W 和电池合体，创造了一个专门收消息的复古未来设备

使用 beeper… twitter.com/i/web/status/1… 忘记说了，既然 Beepberry 使用了 Raspberry Pi，显然那它跑的是 Linux 系统…

又多了一万个种草的理由

OpenAI 发布官方 ChatGPT 客户端

apps.apple.com/us/app/openai-…

官方说目前只有 iOS 版，而且只对美国区用户开放

我照例测试了它。设计和功能都是清汤挂面式的极简，交互也有点问题、键盘会挡住输出的信息（设计思路可以理解，但不方便）

好在输出速度“看起来”超快，感觉就像 Zootopia… twitter.com/i/web/status/1… 漏了一个重要信息：

https://twitter.com/DashHuang/status/1659271408676122624

怎么用一句指令生成整个网站

dora.run/ai

Dora 既是 Generative AI 工具，也是 no code 的网站设计、生成工具，用简单的 AI 文字指令，就能一键生成包括 3D 交互元素、3D 动画在内的网站

编辑器还在排队状态，但已经能登录进去先看看教程和示例

好像来自国内的团队（？）

#设计AI 注：

Dora 官网有强烈的 web3 风格（像闪回到了去年）

这里有个有趣问题：设计工具本身，要不要强烈的设计风格？

设计工具的品牌设计和 UI、UX 设计一般偏向于工具，就是那种中性的、逻辑的、关注操作效率的、UX 导向的设计风格

FigJam 之后，个性化品牌形象也变成了设计工具的一种设计思路😂

teenage engineering 发布了新的 TP-7 录音机

也是 te 的外场/现场系列产品的一员，延续了这个系列的设计风格，用小巧、简单而充满细节的设计让人眼前一亮

红色背板太抓眼球了

teenage.engineering/products/tp-7

#设计参考 以前介绍过同一个系列的话筒 CM-15

https://twitter.com/nishuang/status/1653135973889220612

每天玩推特，怎么无障碍发英文推、用英文回复老外推文？

用 AI 啊！anyLanguage.ai 是一个简单有用还挺有趣的浏览器扩展，用于快速输入外语

在推特输入框里先输入 /en，指定翻译成英文，然后正常打字输入中文，输入结束后按 shift + enter…1、2 秒中文就能翻译成英文…发送😂！

#设计AI 不离开现场是一个很舒服的使用体验

理论上这个插件可以在任何网页输入框里使用，随手打字随手翻译，不需要在输入框和翻译软件之间来回切换

不过很多编辑器、输入框或者地址栏劫持了 shift + enter 这个热键，希望下一版里 anyLanguage.ai 的开发者能支持自定义热键吧

打电话给 Annie，跟她聊天

AI 合成的红发美女，可以下载 APP 跟她“视频聊天”，或者打电话到 +1(640)-225-5726 跟她语音聊天

apps.apple.com/us/app/call-an…

应该算是强需求，测试下来视频、语音、AI 效果都不错。不过美女 annie 太冷艳了，性感太多、亲切不足…肯定要被人批评说是物化女性了

#设计AI 如果在国内推出类似产品，应该把它包装成学英语专用的 APP - AI“真人”外教，纯正美国口音，效果爆裂

我也来学一下“面向开发者ChatGPT提问工程” / “ChatGPT Prompt Engineering for Developers”

deeplearning.ai/short-courses/…

来自吴恩达老师和 OpenAI 合作的正规教程，图文+视频，有英文字幕，浓眉大眼的主讲姑娘来自 OpenAI，英国口音呢

课程用了 python，我就偷懒直接在 ChatGPT 里测试了

#设计AI 课程完全免费

入门课程，都比较简单。分基本准则、迭代、总结、推理、转化、扩展和聊天机器人几个章节，讲解和演示都简单直接，没有废话更不会夹带私货，讲解得也很清晰

我学完了80%，有收获

可能因为上课的人太多，偶尔有卡顿。我多开了几个窗口，中途还被限制访问了 - 用 VPN 再访问一下即可