Created 36 articlesIn total 90062 words

博客实现 RSS 订阅能力全记录

Pudge李瑞东

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

网页布局设计和适配(分享会文稿)

Pudge李瑞东

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

App 表单校验时机探索

Pudge李瑞东

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

【译文】如何冲破设计系统的界限

Pudge李瑞东

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

SL 图标库改良实践

Pudge李瑞东

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

【译文】下一代主题设计:我们如何让 Dawn 主题变得响应快、可扩展和更美观

Pudge李瑞东

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

[译文] 在技术与产品设计的合作中寻求像素完美

Pudge李瑞东

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

[译文] 我们如何重建 Shopify 的开发者文档

Pudge李瑞东

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

高级排版功能: Case-Sensitive Forms 是什么?

Pudge李瑞东

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

笔记:表格宽度的计算规则

Pudge李瑞东

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

细数 Pingfang SC 的七宗罪

Pudge李瑞东

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

多语言设计分享(分享会记录)

Pudge李瑞东

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

keep-all 断词换行规则的两个使用案例分享(含实践)

Pudge李瑞东

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

在千聊成功实践移动端UI组件库

Pudge李瑞东

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

Apple 官网里三个令我惊叹的中文排版细节

Pudge李瑞东

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

SF Pro SC 是什么字体?

Pudge李瑞东

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

Sketch 组件外更改文字颜色最简便的方法

Pudge李瑞东

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

一个特殊字符,打开 Sketch 组件新世界的大门

Pudge李瑞东

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

信息无障碍与我们的距离 · 分享会记录

Pudge李瑞东

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

探索 Web 网页内字符的换行规则

Pudge李瑞东

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

维护 Dribbble 深色模式一年,我最大的收获竟然是学会了使用 DevTools

Pudge李瑞东

本文 2018 年 2 月 2 日首发于 Medium · 查看原文 2019年10月份,我在 Medium 发表了一篇文章《关于深色模式的一些发现和思考》,从那时候开始我便着手去找个网站做成深色模式,练练手,于是便开始将 Dribbble.com 进行深色模式的尝试。

等宽数字 Monospaced Numbers 在界面中的使用

Pudge李瑞东

本文 2020 年 12 月 25 日首发于 Medium · 查看原文 在上一篇文章的3.2章节里,提到了 AntD 组件会全局默认使用等宽数字。这对我来说是比较新的概念,所以也花了点时间观察、总结了等宽数字在界面上的几个使用场景,以及普遍的实现方式,正好也可以作为文章记录下来。

用 Ant Design 组件做设计,你可能不知道的细节

Pudge李瑞东

Atomic Design System — Bizy by Ruben Vaalt本文 2020 年 10 月 4 日首发于 Medium 平台 · 查看原文 转去做 toB 工具三个月了,这段时间做的是从 0 到 1 的 SaaS 工具。

互联网设计师白嫖图片和字体的旁门左道

Pudge李瑞东

Photo by Med Badr Chemmaoui on Unsplash本文 2020 年 8 月 2 日首发于 Medium 平台 · 查看原文 转眼间在互联网行业从事设计工作已经两年多了,工作中发现了几个可以白嫖高清图片、App 图标、收费字体的小技巧,在这里做一番记录,也希望能对正在看文章的你有所帮助。

Dribbble 大改版,顺势记录下我对近期 UI 设计趋势和一些细节的观察

Pudge李瑞东

本文 2020 年 4 月 7 日首发于 Medium 平台 · 查看原文 2020 年 3 月下旬,知名设计网站 Dribbble.com 在过去十年中首次做了彻底的重新设计。借着这次机会,并结合近期其他互联网产品的更新迭代,在此记录一下近半年来我观察到的一些设计趋势变化。

用 AE 制作 Display P3 广色域动图的三个方法

Pudge李瑞东

Photo by Tyler Lastovich on Unsplash本文 2020 年 1 月 19 日首发于 Medium 平台 · 查看原文 前段时间写了篇文章记录如何导出 P3 广色域静态图片,恰好最近工作上有需求要用到动画来完成,利用这次机会也记录一下制作支持 Dis...

PingFang SC 不应该作为移动端网页字体的首选项

Pudge李瑞东

Photo by Diomari Madulara on Unsplash本文 2019 年 11 月 17 日首发于 Medium 平台 · 查看原文 一、发现问题我在公司的电商部门工作,经常会接触到数字、价格,而设计稿也经常会应用在手机 App 或 Web 端上。

关于深色模式的一些发现和思考

Pudge李瑞东

来源:苹果官网本文 2019 年 10 月 4 日首发于 Medium 平台 · 查看原文 近期更新的 iOS 13 重磅推出深色模式,作为一名设计师当然也要蹭下热度把个人网站也适配上深色模式。这篇文章记录了我最近为网站做深色模式时的一些发现和思考。

在 Sketch/PS 中导出 Display P3 广色域图片的方法

Pudge李瑞东

Photo by Daniele Levis Pelusi on Unsplash前一段时间换上了 iPhone 之后,我一直对官网上的描述里的 “Display P3” 挺好奇的,然后上网搜了下,发现了里面大有学问。下面放上在 Sketch/PS 里导出 Display P3 ...

最近用 Bodymovin 导出动画遇到的问题和解决方法

Pudge李瑞东

本文记录作者用 Bodymovin 导出动画时遇到的各种各样奇怪问题,并提供可行的解决方案。持续更新一、渐变色导出异常图1–1 渐变色导出异常渐变色导出后颜色异常,仅剩黑白双色的渐变,原因及解决方法: 原因一、使用了中文版的 After Effects,渐变填充的选项会变成中文名,使得导出后颜色异常。