Pudge李瑞东

我的个人网站 LRD.IM 从 2018 年元旦发布至今，已经持续维护 4 年了。从最开始根据一个网站模板替换图文，到现在全面的「自主研发」，这是我最骄傲的一款作品。接下来要开始尝试将我的博客内容输出成 RSS 源。

公司前段时间新来了不少交互设计师， Leader 邀请我做一次网页布局相关的分享会，来帮助以往比较少界面设计经验的交互设计师能够更好地完成设计方案产出和交付。现在我将文稿记录在这里。

在我接手 App 这波需求迭代的时候，发现一个很常见的问题却没有在设计规范里提到过（其实原本也没啥设计规范…）。那就是：表单的校验时机。

如果不知道产品业务需要什么，专门负责设计系统迭代的团队就无法进一步发展。另一方面，大多数业务设计团队只在系统的现有规范和组件内完成工作，这不利于进一步推动系统的发展。这样看上去像是僵住了，大家都在停滞不前。

系统里的图标库一直没有设计师去专门维护，而图标设计师也没有固定的人员，UX、UI、实习生都有可能会做到，图标质量也没有专人把控。这种情况下图标的产出很有可能会出乎意料，时不时都会有些大小、颜色、风格不对劲的图标出现在测试环境的页面上。

我们在线商店的默认主题 Debut 在五年前发布时是一个很棒的主题，但经过 Web 标准和 UX 最佳实践这几年的发展，Debut 的缺点开始显现。商家经常主动修改他们的主题代码，这让 Shopify 更难提供功能更新和改进。我们需要一个不仅能满足最新的 Web 和 UX 标准，…

了解为什么 Shopify 标杆性的主题团队摒弃了传统的专业学科定义。插图由 Alisha Giroux 绘制Shopify 最优秀的主题团队的目标是在年底前推出 20 个新主题。2021 年 8 月，该团队推出了 Shopify 里最重要的主题 Dawn，其中包含了 Shopi...

详细了解我们为开发者提供更好体验做了哪些工作。Photo by Nicole De Khors from Burst今天，Shopify 重新发布了开发者文档。这是一个漫长而复杂的项目，需要与公司内多个 UX 和开发部门的合作，很高兴看到这个项目的成功上线。

发现自从转换到 Figma 工作后，我发现在部分字体下的字体设置里，有一个选项叫「Case-Sensitive Forms」，来回切换后，发现了一些有意思的现象。经过一段时间的查阅资料和实践后，获得了新的认识，遂写下这篇笔记来记录这有趣的现象。

自从 2020 年下半年我在千聊做 B 端设计师开始，我就开始了与 Table 组件打交道。从那时候我就发现了，表格的布局，好像永远都跟我的设想不符，也很难判断到造成这个后果的原因是我提出的设计需求太奇葩，还是前端老哥压根没按我说的去还原。

Source: Dmitry Novikov2019年11月17日，我发布了一篇名为《PingFang SC 不应该作为移动端网页字体的首选项》的文章，这是我目前为止阅读量最大的文章。还记得那时候我刚毕业在屈臣氏的移动电商部门工作，发现了网上流传的 “字体用苹方” 的说法并不靠谱，并写下了自己的看法。

公司项目最近要接入东南亚的相关业务，Admin 后台里需要支持到 7 种语言，分别是简中、繁中、英语、印尼语、马来语、越南语、泰语。我很有幸地，负责了这次多语言适配专项的设计规范更新、设计指南的整理输出以及团队内设计经验分享。公司目前有二十多名 UI/UX 设计师，有一份供参考的...

背景图片来源： Saeedworks前段时间我对网页的断词换行规则做了一次深入的学习，当时我对一个不常见的规则word-break: kepp-all;感到疑惑，想象不到什么情况下该使用它。这几个月以来我一直带着这个问题来工作，刚好发现了这个规则的两个适用场景，于是写下这篇文章来做记录。

一转眼来到千聊已经一年多了，对比起上一份工作，千聊UED更有挑战性，也确实让我有了一些进步和突破。得益于前人们的努力，千聊的设计师们在流程内还是颇有话语权的。在迭代过程中，UI 设计师完全可以提出更好的方案，并推动它落地，甚至由设计来主导某些改版项目，只要方案有理有据，能带来正面影响。

无论是软件还是硬件，Apple 公司对于细节上面的执着程度可以说无人能出其右。我作为一名设计师，时常也会翻阅 Apple 的官网，拜读、细品，每次都会有点新发现。这次就我记录下近期两个在 Apple 官网内发现的三处让我瞠目结舌、赞叹不已中文排版细节。

苹果悄悄地在官网上用了一款名为 ”SF Pro SC“ 的中文字体。下图是在苹果官网截下来图片，你能发现它与我们平常在设计软件中使用的 PingFang SC 或者 SF Pro Display 有什么区别吗？如果想知道其中的差别，请看下文。

一、简介上一篇文章有介绍用连字空格的特殊手段来做 Sketch 组件的利与弊，其弊端是不能支持所有颜色。当需要做通用的组件，支持自定义任意颜色时，得用另一种做法。这篇文章会介绍 Sketch 组件外更改文字颜色最简便的方法，以及探讨其优势和局限性。

公司内 B 端项目的表单比较多，经常有各种编辑页、功能配置页等。所以最近在做到一个编辑页调整的需求时，也和前端老哥沟通了一波，把公司项目里常用到的表单做成了组件。后续我打算做成 Sketch Symbol，同步到 B 端到组件库内。这时出现了一些耐人寻味的问题。

Photo by AbsolutVision on Unsplash公司的设计、产品组一直有分享会的传统，一般是每两周一次（当然如果那段时间特别忙也会延后）。我从去年七月入职到现在，已经大半年了，总共分享过 3 次，这次是 2020 年 4 月 2 日，清明假期前在公司设计组内的一次分享会《信息无障碍与我们的距离》。

前不久在验收公司项目内一个讨论区相关需求时，看到界面的样式出现这种问题，让从业界面设计两年多的我感到意外和不安。是的，讨论区里的一长串数字、一段网址URL、一长串 Emoji 表情超出了容器宽度。讲道理开发应该不会没有设置宽度，因为左图第一段长文本也不会超出容器宽度。