# 李瑞东的设计博客

> 李瑞东的个人设计博客，记录设计与技术的实践与思考。内容涵盖六个方向：产品与交互设计经验、网页字体与排版知识、设计工具与软件技巧、优质译文、分享会文稿，以及设计之外的个人随笔。

## 文章

- [集团翻译应用的交互优化与量化验证（下）](https://lrd.im/blog/2026-07-14.md): 这篇文章将分享我在如何在 GSM 框架的驱动下优化外部语言槽位和对选择语言面板的易用性进行优化，并提供上线后数据对比。
- [集团翻译应用的交互优化与量化验证（上）](https://lrd.im/blog/2026-07-09.md): 分享我在翻译应用交互优化方面的一些实践经验和思考。上篇分享我将分享如何通过埋点发现体验问题，以及对输入框的自动聚焦策略做到极致。文章末尾还会有一些个人感悟。
- [探索 JPG 和 PNG 图片的压缩表现、算法与应用](https://lrd.im/blog/2024-12-10.md): 这篇文章是一篇在团队月度分享会的记录，聚焦在解决一个问题：JPG 和 PNG 分别适合储存什么类型的图片？我做了详细的对比测评，文章末尾会给你明确答案。
- [Sharing - 3D modeling & rendering flow in Figma](https://lrd.im/blog/2024-10-05.md): My experience in building a 3D modeling and rendering workflow in Figma to improve our design effectiveness and quality.
- [分享会文稿：Figma 3D 设计流程分享](https://lrd.im/blog/2024-09-01.md): 这篇文章是公司内部分享会的文稿，记录着我当时探索出来的经验：如何利用 Vector to 3D 插件在 Figma 建立 3D 设计流程来提升我们的设计效率和质量。
- [Uplifting your design details with the Case-Sensitive Forms feature](https://lrd.im/blog/2024-06-10.md): When my workflow had fully transformed from Sketch to Figma, I found there was an option "Case-Sensitive Forms" placed in several typeface setting panels.
- [完成了 Google UX Design Professional Certificate 后的收获](https://lrd.im/blog/2024-05-04.md): 最近了解到 Coursera 这个平台里面有一个 Google 设计团队出品的的 UX 设计课程，课程里会介绍完整的 UX 设计过程，并且教我们怎么写作品集和准备面试之类的。
- [Lessons I learned after completing the Google UX Design Professional Certificate](https://lrd.im/blog/2024-05-04-en.md): Recently, I heard that Coursera has a UX design course developed by Google's design team. This course covers the entire design process and teaches us how to present our portfolio, prepare interviews, and the like.
- [English speaking skills for PTE test](https://lrd.im/blog/2024-01-16.md): In this post, I will detail the English-speaking skills I learned during the three-month learning journey, which specifically meet the PTE test criteria.
- [PTE 八炸达成，我的 2023 年大圆满了](https://lrd.im/blog/2023-12-29.md): 在 2023 年初的时候，我拿到一个深圳互联网公司的 Offer，当时给出了一个让我无法拒绝的待遇，我曾经想过在那里做到退休。直到年中，事情发生了变化。
- [面向产品设计的 Web 前端分享会（分享会记录）](https://lrd.im/blog/2023-07-02.md): 最近听说部门里面的产品或本地化运营对 Web 前端相关的内容比较感兴趣，正好我有相关的实践经验，所以在公司做了一个 Web 前端相关的分享会。
- [记录一次 AIGC Hackathon 参赛经历和收获](https://lrd.im/blog/2023-05-28.md): 公司在 5 月上旬的时候举办了一场 AIGC Hackathon 比赛，我也参与到了这次 AIGC 的浪潮当中。
- [【译文】无障碍设计：三个 Jira 图标的故事](https://lrd.im/blog/2023-04-01.md): Atlassian UX 团队的设计师 Hannah McKenzie 分享了一个优化图标的小案例。主要目的是使图标对色盲人士也具有良好的可访问性。
- [探索让新用户更容易上手的产品设计策略](https://lrd.im/blog/2023-03-26.md): 通过探索 Jira, Asana, Notion 这三款软件的新用户旅程、上下文帮助、模板、帮助中心的产品设计，寻找帮助新用户更容易上手的产品设计策略。
- [用 Next.js 重构个人网站 (二)：核心和通用模块](https://lrd.im/blog/2023-03-12.md): 这一篇主要介绍我在重构时学习到的一些通用解决方法。比如数据源和遍历循环、借助 Tailwind CSS 实现深色模式、外部组件/图标库的使用，以及通过课程学习到的组件开发方法。
- [用 Next.js 重构个人网站 (一)：概述](https://lrd.im/blog/2023-02-21.md): 原本的个人网站在迭代、体验层面的表现都差强人意。于是在 2023 年我用 Next.js 重构了个人网站，会分几篇博客文章来记录我重构个人网站从研发到部署上线的过程。
- [博客实现 RSS 订阅能力全记录](https://lrd.im/blog/2022-11-11.md): 我的个人网站 LRD.IM 从 2018 年元旦发布至今，已经持续维护 4 年了。从最开始根据一个网站模板替换图文，到现在全面的「自主研发」，这是我最骄傲的一款作品。这篇文章介绍我是如何将博客内容输出成 RSS 源。
- [网页布局设计和适配（分享会文稿）](https://lrd.im/blog/2022-10-31.md): 公司前段时间新来了不少交互设计师， Leader 邀请我做一次网页布局相关的分享会。介绍下怎么做响应式适配，典型场景下该怎么处理等。目的是帮助交互设计师能够更好地完成 UI 设计方案产出和交付。
- [App 表单校验时机探索](https://lrd.im/blog/2022-08-17.md): 我在最近的工作中发现表单的校验时机通常是在三种方式内取舍：输入中、失焦后、提交时。这其中的差异还是挺耐人寻味的，有必要探索三者之间的各自优劣势和适用场景，于是乎就有了这篇文章。
- [【译文】如何在设计系统的框架内做得更好](https://lrd.im/blog/2022-08-12.md): 为了跟上需求，设计系统需要不断发展。但设计系统的进化似乎有点像先有鸡还是先有蛋的问题。如果不知道产品业务需要什么，专门负责设计系统迭代的团队就无法进一步发展。另一方面，大多数业务设计团队只在系统的现有规范和组件内完成工作，这不利于进一步推动系统的发展。这样看上去像是僵住了…
- [在中大型设计团队治理图标库的落地经验分享](https://lrd.im/blog/2022-07-16.md): 当前公司的图标库野蛮生长了几年，我需要基于「日益发展的业务」和「不同职位设计师的诉求」来改良图标库的做法，以及对更新图标的流程进行规范化治理。 这篇文章主要是记录我是如何确定要做哪些改良，以及怎么落地实施的。
- [【译文】下一代主题设计：我们如何让 Dawn 主题变得响应快、可扩展和更美观](https://lrd.im/blog/2022-06-15.md): Shopify 在线商店的默认主题 Debut 在五年前发布时是一个很棒的主题，但经过 Web 标准和 UX 最佳实践这几年的发展，Debut 的缺点开始显现。我们需要一个不仅能满足最新的 Web 和 UX 标准，还要能促进在线商店进入下一个世代的解决方案。
- [【译文】在技术与产品设计的合作中寻求像素完美](https://lrd.im/blog/2022-05-28.md): 在前几年，设计和开发一个主题最多需要六个月的时间。今天，我们平均只需要 8~10 周。我们如何做到的呢？作为 Shopfiy 标杆性的主题团队高级用户体验经理，我将分享我们团队中网页设计和跨专业协作方法中的秘密。
- [【译文】我们如何重建 Shopify 的开发者文档](https://lrd.im/blog/2022-05-24.md): Shopify 分享了他们是如何对「开发者文档」进行重构的，介绍了用户访谈和卡片分类法，并强调持续迭代和用户反馈的重要性。
- [高级排版功能：Case-Sensitive Forms 是什么？](https://lrd.im/blog/2022-05-14.md): 自从转换到 Figma 工作后，我发现在部分字体下的字体设置里，有一个选项叫 'Case-Sensitive Forms'，简单体验后发现了一些有意思的现象。经过一段时间的查阅资料和实践后，获得了新的认识，遂写下这篇笔记来记录这有趣的现象。
- [笔记：表格宽度的计算规则](https://lrd.im/blog/2022-02-09.md): 自从 2020 年下半年我在千聊做 B 端设计师开始，我就开始了与 Table 组件打交道。从那时候我就发现了，表格的布局，好像永远都跟我的设想不符。在新公司里对设计的要求更高了，于是我花点时间对 Table 的列宽计算规则进行了研究。
- [细数 Pingfang SC 的七宗罪](https://lrd.im/blog/2022-01-17.md): 我经过这几年工作，发现了更多不应该在网页中使用 Pingfang SC 的理由。所以通过阅读这篇文章，读者们会认识到 Pingfang SC 作为网页字体的更多缺点。以及对比之下，用系统字体作为网页字体的优点。
- [多语言设计分享（分享会记录）](https://lrd.im/blog/2022-01-02.md): 公司项目最近要接入东南亚的相关业务，Admin 后台里需要支持到 7 种语言。我负责了这次多语言适配专项的设计规范更新、设计指南的整理输出以及团队内设计经验分享。
- [keep-all 断词换行规则的两个使用案例分享（含实践）](https://lrd.im/blog/2021-11-07.md): 前段时间我对网页的断词换行规则做了一次深入的学习，当时我对一个不常见的规则 word-break: keep-all; 感到疑惑，想象不到什么情况下该使用它。这几个月以来我一直带着这个问题来工作，刚好发现了这个规则的两个适用场景，于是写下这篇文章来做记录。
- [在千聊成功实践移动端 UI 组件库](https://lrd.im/blog/2021-09-11.md): 一转眼来到千聊已经一年多了，对比起上一份工作，千聊 UED 更有挑战性，也确实让我有了一些进步和突破。在工作过程中，UI 设计师完全可以提出更好的方案，并推动它落地，于是我主导并成功落地了千聊移动端 UI 组件库。
- [Apple 官网里三个令我惊叹的中文排版细节](https://lrd.im/blog/2021-08-15.md): 无论是软件还是硬件，Apple 公司对于细节上面的执着程度可以说无人能出其右。我作为一名设计师，时常也会翻阅 Apple 的官网，拜读、细品，每次都会有点新发现，这篇文章就分享我发现的三个设计细节。
- [SF Pro SC 是什么字体？](https://lrd.im/blog/2021-07-28.md): 苹果悄悄地在官网上用了一款名为 "SF Pro SC" 的中文字体。下图是在苹果官网截下来图片，你能发现它与我们平常在设计软件中使用的 PingFang SC 或者 SF Pro Display 有什么区别吗？如果想知道其中的差别，请细细品味本文。
- [在 Sketch 组件外更改文字颜色最简单的方法](https://lrd.im/blog/2021-05-30.md): 这篇博客会介绍 Sketch 组件外更改文字颜色最简便的方法，以及探讨其优势和局限性。操作非常简单，所以篇幅很短。
- [一个特殊字符，打开 Sketch 组件新世界的大门](https://lrd.im/blog/2021-05-03.md): 公司内 B 端项目的表单比较多，经常有各种编辑页、功能配置页等。我在为表单做成 Sketch 组件时，用零宽连字 (Zero Width Joiner) 的特点来实现更轻量的 Sketch 组件。
- [信息无障碍与我们的距离 · 分享会记录](https://lrd.im/blog/2021-04-09.md): 在 Medium 看到了几篇介绍无障碍设计的博客，我花了点时间观察和总结，也整理了一份自己的理解，并在公司的分享会中和其他设计同事分享。
- [探索 Web 网页内字符的换行规则](https://lrd.im/blog/2021-03-14.md): 记录我对 Web 网页内换行规则的理解、实际应用中的解决方案，以及一个突破性新发现。
- [维护 Dribbble 深色模式一年，我最大的收获竟然是学会了使用 DevTools](https://lrd.im/blog/2021-01-21.md): 2019年10月份，我在 Medium 发表了一篇文章《关于深色模式的一些发现和思考》，从那时候开始我便着手去找个网站做成深色模式，练练手，于是便开始将 Dribbble.com 进行深色模式的尝试。
- [等宽数字 Monospaced Numbers 在界面中的使用](https://lrd.im/blog/2020-12-25.md): 我花了点时间观察、总结了等宽数字在界面设计上的几个使用场景以及在设计软件和网页里的实现方式。
- [用 Ant Design 组件做设计，你可能不知道的细节](https://lrd.im/blog/2020-10-04.md): 使用 Ant Design 组件做设计一段时间，踩过不少坑。在这里分享一部分出来。如果你也是之前没怎么使用过 AntD 组件来进行设计，那么这篇文章也许会对你有点帮助。
- [互联网设计师白嫖图片和字体的旁门左道](https://lrd.im/blog/2020-08-02.md): 转眼间在互联网行业从事设计工作已经两年多了，工作中发现了几个可以白嫖高清图片、App 图标、收费字体的小技巧，在这里做一番记录，也希望能对正在看文章的你有所帮助。
- [Dribbble 大改版，顺势记录下我对近期 UI 设计趋势和一些细节的观察](https://lrd.im/blog/2020-04-07.md): 2020 年 3 月下旬，知名设计网站 Dribbble.com 在过去十年中首次做了彻底的重新设计。借着这次机会，并结合近期其他互联网产品的更新迭代，在此记录一下近半年来我观察到的一些设计趋势变化。
- [用 AE 制作 Display P3 广色域动图的三个方法](https://lrd.im/blog/2020-01-18.md): 前段时间写了篇文章记录如何导出 P3 广色域静态图片，恰好最近工作上有需求要用到动画来完成，利用这次机会也记录一下制作支持 Display P3 广色域的 PNG 序列帧、CSS 精灵图和 APNG 三种格式动画的方法。
- [PingFang SC 不应该作为移动端网页字体的首选项](https://lrd.im/blog/2019-11-17.md): 我在做设计时会经常观察市面上各类应用，途中一个字体使用的问题使我陷入了沉思...
- [关于深色模式的一些发现和思考](https://lrd.im/blog/2019-10-04.md): 近期更新的 iOS 13 重磅推出深色模式，作为一名设计师当然也要蹭下热度把个人网站也适配上深色模式。这篇文章记录了我最近为网站做深色模式时的一些发现和思考。
- [在 Sketch/PS 中导出 Display P3 广色域图片的方法](https://lrd.im/blog/2019-07-02.md): 前一段时间换上了 iPhone 之后，我一直对官网上的描述里的 “Display P3” 挺好奇的，然后上网搜了下，发现了里面大有学问。下面放上在 Sketch/PS里导出 Display P3 色域图片的方法，供参考
- [最近用 Bodymovin 导出动画遇到的问题和解决方法](https://lrd.im/blog/2019-06-11.md): 本文记录作者用 Bodymovin 导出动画时遇到的三个问题：渐变色导出异常、修剪路径播放卡顿、以及 Mask 下修剪路径显示异常。并提供可行的解决方案。
- [在 iPhone 上安装旧版 Dribbble App](https://lrd.im/blog/2019-04-14.md): Dribbble 官方在今年的 3 月份更新了 iOS 版客户端，但体验并不好，比如没有适配好全面屏、不能切换显示模式、卡等等。于是我用 Charles 抓包了旧版 App 的安装包，在这里分享给大家。
- [Sketch Tips — 2个技巧让你在 Mirror 上更好地预览设计稿](https://lrd.im/blog/2019-03-31.md): 用 Sketch 做设计的小伙伴都会用 Mirror App 来实时预览设计稿。这里列出在用该软件时可能遇到的两个问题，并提供解决方案，让你在 Mirror App 上更好地预览设计稿。
- [分享发现：AE中制作矢量动画图标的四款效率工具](https://lrd.im/blog/2019-02-07.md): 最近在做一些动画图标的过程中发现了四款能提高工作效率的AE插件，分别是 Motion2、Flow、Overlord、gifGun，下面为大家逐一介绍。
- [SVG 路径代码转换成对应的 SVG 图像](https://lrd.im/blog/2018-12-09.md): 在网页上看到一些精致的图标想要保存下来，但是右键没有另存为选项（如图1），审查元素后发现是嵌入式的 SVG 图标（如图2）。那么如何将这一段代码转换成对应的 svg 图片？
- [前端笔记：Transfrom: Matrix() 参数配置笔记](https://lrd.im/blog/2018-07-19.md): 最近在学一些前端知识，学到 Martrix 可以用一行来将 Transfrom 的所有属性表达出来，就打算在网上找找如何操作，发现大部分都是讲一些高等数学的计算，或者一两个属性的转换，翻了好久才找到讲4个属性同时应用在 Matrix 上的教程。鉴于花了差不多5个小时才勉强弄懂 Matrix 的属性，我决定做一篇 Matrix 参数配置笔记。
- [毕业设计《刁角武汉》改版计划](https://lrd.im/blog/2018-04-01.md): 寒假与其他朋友交流设计心得，我向他们展示了我的毕业设计《刁角武汉》，他们用了一会儿之后给了一些意见我，我也根据用户容易产生疑惑的地方做了一些总结，接下来会花一段时间进行改版，优化使用体验
- [利用预置动画在 Mugeda 中制作顺畅的左右滑动切换卡片效果](https://lrd.im/blog/2018-03-31.md): 前在做《刁角武汉》的时候对如何选择景点这个问题做了好几个方案，一个是画一张大地图，另一个是做垂直的列表选择，但我还是选择了左右滑动来切换景点。因为在多次尝试之后发现发现在手机屏上似乎不适合做可以上下左右滑动的大地图
- [macOS 安装 AE 插件 Flow 无法打开的修复方法](https://lrd.im/blog/2018-03-17.md): 以前一直在 AE2015 里使用 Flow，最近下载了 AE2018，安装好 Flow 插件后点击 Window-Extensions-Flow 却没有任何反应，几经波折找到了解决方法。这里分享针对 AE2018/2019/2020 等版本在 macOS 下插件无响应的终端命令解决步骤。
- [大四下学期学习计划](https://lrd.im/blog/2018-03-02.md): 因为以前选课忽略了一些必要的规则，导致我大四仍然在学校上一些选修课，错过了一些挺好的实习岗位。在此期间要保持学习，利用大学最后一个学期（03/2018~06/2018）提升自己的能力。
- [在 AI 中导出更干净的 SVG 图形！](https://lrd.im/blog/2018-02-01.md): 当我们做好一些图标准备导出成 SVG 文件时都要轮廓化描边，但是直接轮廓化描边经常会产生多余的锚点，我在做探索到一些方法可以导出更干净的 SVG 图形。
- [重燃动效激情之 AE 动效导出为 JSON！](https://lrd.im/blog/2018-01-18.md): 今天正想把毕设的一些图标动效做好，突然间想到可以用 Bodymovin 导出 JSON 还没试过，于是就现场捣鼓了一番。现在发现其实非常方便！
- [使用 Netlify 托管个人网站 详细步骤](https://lrd.im/blog/2018-01-02.md): 最近狠下心把域名买了下来，终于把一直想弄的个人网站正式放上了互联网。一路摸索过来，其实也没多难。
- [分享：如何让 Sketch 默认在多标签页中打开新文档](https://lrd.im/blog/2017-12-17.md): 常用 Sketch 的都知道，窗口模式下的 Sketch 打开新文档是默认打开一个新窗口，如果要打开的文档比较多，整个桌面就容易乱。