> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

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

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/01.png)

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

这套样式在 2020年1月1日在 [Stylish](https://userstyles.org/styles/178754) 上发布，历经10个多月的更新迭代，现在已经停止维护了（因为样式文本量超出平台限制）。在项目过程中，我发现使用 Chrome DevTools 也能对 UI 设计的工作有不少帮助。2021 年刚好是这套样式发布的一周年，在此便记录下来，算是给这个 Side Project 画上一个句号，同时也分享几个在维护该项目中途发生的一些趣事😄。

## 用 Chrome DevTools 帮助我们更好地进行设计

### 一、检查页面样式

#### 1.基础的样式检查

打开 DevTools 之后，按 Cmd + Shift + C，再点选网页内的元素，可以看到该元素的实现方式。比如我们选中了作品的标题，可以看到里面的字体样式、超长文字的处理、颜色等。像这次我做的深色模式主题，只要修改`color`的的属性，覆盖原来的黑色即可。

![Chrome DevTools 检查 Dribbble 作品标题元素的截图：左侧显示元素尺寸与无障碍信息，右侧代码面板标注了字体样式（14px、font-weight 500、line-height 20px）、超长文本处理（overflow hidden、text-overflow ellipsis）及覆盖原有颜色样式的操作示例。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/02.png)

同样这个功能也可以在我们 UI 设计师校稿的过程中使用，可以明确看清楚开发是否有做某个样式，元素之间间距是多少等等。

#### 2.模拟鼠标按下、悬停、聚焦等效果：

在 DevTools 查看器的上方，有 :hov 的按钮，点击后可以在里面勾选常见的伪类效果，如果选到对应的元素，就会展示该伪类的样式。

![Chrome DevTools 截图：在 Styles 面板顶部点击 `:hov` 按钮，勾选 `:hover` 伪类后，下方高亮展示了 `a:hover` 的相关 CSS 样式，包括 `color` 和 `text-decoration` 属性。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/03.png)

#### 3.捕捉悬浮出现的气泡或停留时间较短的加载页

在更改网页主题色时，也要同时修改鼠标悬停在某些控件时展示的小气泡提示，或网页跳转时的加载占位符。这些东西比较难用鼠标选中，难以看到元素的样式，所以需要用到暂停/继续脚本执行的快捷键：`Cmd` + `\`。

![Dribbble 网站截图，页面底部显示 "Loading more..." 加载动画被暂停，Chrome DevTools 顶部出现 "Paused in debugger" 提示条，演示通过 Cmd+\ 快捷键冻结页面交互以便调试加载中的样式。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/04.png)

按下该快捷键后网站界面的一些交互行为或加载行为会被暂停，所以能方便地调试加载中的样式。

> PS：想捕捉停留时间较短的加载页，另一个方式是在 DevTools — Network 里设置网速1kb/s，也能得到类似的结果。

### 二、模拟各种设备

DevTools 内还可以非常方便地模拟各种型号、尺寸的设备。自带的手机型号模拟可以大幅提升调试 H5 页面的效率。我司业务主要是做课程相关内容，涉及到多种上课模式，这时候用 DevTools 的模拟设备功能就可以快速达到业务场景。

![Chrome DevTools 设备模拟下拉菜单截图，当前选中 PC1440（1440×900），列表包含 Responsive、Mbp 15'、PC1920 等桌面设备，以及 Moto G4、iPhone 系列、iPad、Surface Duo、Galaxy Fold 等移动设备选项。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/05.png)

同时模拟设备里面还有一个网页尺寸调节的功能，在调试 Web 端页面时也特别常用。比如在做 Web 端官网时，常见的排版是头部垫一张背景图，上面添加文字及显眼的 CTA 按钮。这时很可能遗漏的一个细节是：传了一张自认为分辨率很大的图片，但没和前端沟通做适配，导致在宽屏幕下两边留空的尴尬场面。

![Chrome DevTools 模拟设备功能截图：在 2647×2559 的宽屏尺寸下，某在线少儿数理逻辑课程官网的横幅图片两侧出现明显留白，演示了未做响应式适配时宽屏下的尴尬排版问题。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/06.png)

所以可以在 DevTools 内自由调节网页尺寸，确保任意尺寸下，网站的展示都是处于完美的状态。

### 三、下载字体图标

2018 年时我也发表过一篇文章[《SVG 路径代码转换成对应的 SVG 图像》](https://lrd.im/blog/2018-12-09)，直接把 SVG 代码 粘贴到 Sketch 内，就会自动生成对应的矢量图形。但如果网站是用字体来呈现图标，如 iconfont 或 iconmoon 等，则没有办法像 SVG 那样直接下载图标文件。

![Chrome DevTools 截图：Elements 面板选中 `.font-public-more::after` 伪元素，Styles 面板显示其 `content: "\EA3A"` 及 `font-family: "public.iconfont"` 等属性，说明该图标由字体文件渲染而非 SVG。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/07.png)

所以我们要先在 DevTools 内切换至 Network，Filter 一栏选择 Font，刷新页面。这时我们能看到网页加载的字体文件，通常我们可以通过图标的 font-family 属性，看到该图标是调用了哪个字体文件。

![Chrome DevTools Network 面板截图：已选中 Font 过滤器，列表显示三个 .woff 字体文件，右键菜单展开，光标悬停在「Open in Sources panel」选项上，演示如何定位并下载网页字体文件。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/08.png)

右键 Open in new tab 将该字体下并安装，然后用字体设计软件 Glyphs.app 打开字体文件，这时我们能看到所有在该字体文件下的图标字体。

![Glyphs.app 字体设计软件界面截图，展示打开的 iconfont 字体文件，包含 codesign、gitlab、help、language、logo、logout、open、outsource、time 等 42 个图标字体轮廓，可从中选取图标复制至 Sketch/Figma 使用。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/09.png)

选中对应的字体后，拷贝到 Sketch/Figma 内，再选择对应的字体文件，最后将其转曲。我们便得到了一个网站上用字体来展示的图标矢量形状。

![Sketch 右键菜单截图，光标悬停在底部「Convert to Outlines」选项上，右侧面板显示该图层使用 new-leftnav.iconfont 字体、字号 126，将字体图标转曲为矢量路径的操作步骤演示。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/10.png)

### 四、有限地调试动画

DevTools 还可以简单地监听动画，在右上角 More tools 内选择第一个选项： Animations，底部会多一个窗口用来监听网页中的动画，这时我们都能看到网页内元素的 Hover、切换等动画的运动时长、关键帧数量、缓动方式。

![Chrome DevTools Animations 面板截图：通过 More tools 菜单打开 Animations 工具，底部面板展示 section.EntryRender 元素的动画时间轴，可见 box-shadow、transform、background-color、bgShow 四个属性的关键帧分布与持续时长（约 500ms）。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/11.png)

> 笔者曾经就通过这个功能，排除了一个 Hover 动画极短暂的卡顿问题，原因便是开发在动画中间增加了一个关键帧。因为原本给动画提供了一个缓动函数的，在动画中间加一个关键帧并设置具体数值，会导致短暂卡顿现象。

该功能还允许我们调整动画持续时间、关键帧时间和开始时间延迟，但目前还是无法调整具体的变化参数的，所以我将标题写成「有限地」调试动画。

关于该功能的官方介绍，可以[点击这里查看](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations?hl=zh-cn "Google 开发者对调试动画功能的介绍")。

### 五、学习先进的设计方式

DevTools 还可以让我们观察其他体验做得比较好的产品，他们是怎么实现某个效果的。

比如最近风口浪尖的拼多多，因为主打下沉用户，安卓端月活用户数量比 iOS 端多了 5 倍以上（来自[极光大数据](https://mp.weixin.qq.com/s/s8YZGjWMhbYvL-X3wsEzdg)） 。所以他们的设计/前端应该投入了不少资源来优化安卓设备的使用体验，其中一个体现是分割线的处理。

我们都知道，通常中低端的安卓手机屏幕分辨率高，但像素密度较低。此时在微信 H5 网页里，1像素的分割线会特别粗。所以拼多多的 H5 端将 1px 像素的分割线缩放成(1/设备Dpr)倍，确保在任何手机上的分割线，都是物理像素1px，一个魔鬼细节。

![拼多多 H5 页面 Chrome DevTools 检查截图：左侧为拼多多移动端界面，右侧显示 CSS 代码，通过媒体查询针对不同设备 DPR（1.5x、2x），用 scaleY(.5) 和 scaleY(.66667) 缩放分割线高度，实现物理像素 1px 的精细分割线效果。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/12.png)

## 中途发生的趣事

### Ryan 的邮件

发布样式的四个月后， Dribbble 官方人员 Ryan 通过邮件联系我，大意是愿意给我的作品增加曝光量，前提是改掉 P 站的配色。

![Dribbble 社区活动经理 Ryan Arruda 发来的邮件截图，邮件表示愿意为作者的深色模式作品提供社交曝光，但要求将配色从 P 站风格的橙色改为粉色版本。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/13.png)

我随后也回复了邮件，并更新了可自定义的四种配色功能，但对方没有回信，这件事也不了了之了~

### 及时的功能更新

Dribbble 在去年春季大更新了一次，可能是为了兼顾美观度，去掉了以往在 Upload 页面内可以拉伸输入框的功能，看到了网上有人吐槽后我也更新了样式，恢复可以垂直拉伸输入框的功能，获得了一个滋瓷👍。

![Dribbble 反馈页面截图：左侧展示新版 (A) 与旧版 (B) 输入框对比，旧版支持拖拽调整高度；右侧评论区显示用户 Yup Nguyen 对我提供的可垂直拉伸输入框 CSS 样式链接表示感谢并点赞。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/14.png)

## Stylish 内为主题制作可配置选项

维护 Dribbble 的一年里，大大小小进行过十多次的更新，所以也对 Stylish 平台的使用有一点了解。前文提到了这套主题可以自定义选择四种配色，其实还可以配置字体、广告(显示/隐藏)，顶部导航栏(保持置顶/可滚动)。

可配置的选项是用到了 Stylish 内的 New drop-down menu 功能，按下图配置，填上对应的样式即可

![Stylish 样式设置界面截图：CSS 编辑器中写入 `[[SETTING]]` 占位符，箭头指向下方「Style Settings」配置区，展示如何为「SETTING」变量添加「选项 1（SETTING_1）」和「选项 2（SETTING_2）」两个下拉选项及对应 CSS 代码。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2021-01-21-ee01a2f63afd/15.png)

唔！写完这篇总算是给这个了这个项目一个交代，维护 Dribbble Dark 的一年里，除了学会使用 DevTools 来辅助设置，还有其他成长的地方，比如语义化样式的思维，CSS 选择器的使用以及深色模式下的层级关系理解等等。

其实我还想过做其他功能增强的插件。因为在 Dribbble 里上传作品时的文本框及评论框是支持部分富文本编辑的，如文本加粗、超链接、斜体字等。

那会我还想做一个快速生成富文本代码的插件，就好像现在在 Medium 写文章时，选中一块文本会弹出一些快捷调整样式的选项。但奈何能力不足，暂时没什么思路去实现这个想法，以后再说吧…

最近工作之余在尝试研究另一个东西，希望之后能捣鼓点名堂出来咯~