明暗主题与国际化博客视觉系统的迭代

今天花了不少时间打磨博客的视觉细节

剑飞
1/14明暗主题与国际化 博客视觉系统的迭代

别看只是改颜色这种小事

今天花了不少时间打磨博客的视觉细节

命题先说清本页判断
解释补足为什么
行动留下下一步
2/14明暗主题与国际化 博客视觉系统的迭代

最开始只做了暗色模式

用户也是这样 不是非黑即白
3/14明暗主题与国际化 博客视觉系统的迭代

实现上用了几个关键点

实现上用了几个关键点- 所有颜色都用 CSS 变量定义（比如`--bg-primary` `-

命题先说清本页判断
解释补足为什么
行动留下下一步
4/14明暗主题与国际化 博客视觉系统的迭代

而是重新设计了一套浅色配色

命题先说清本页判断
解释补足为什么
行动留下下一步
把“而是重新设计了一套”落到一个具体项目里看结果
5/14明暗主题与国际化 博客视觉系统的迭代

字体大小是个容易被忽略的细节

以前正文字号是 14–15px在手机上看真的吃力

把“字体大小是个容易被”落到一个具体项目里看结果
6/14明暗主题与国际化 博客视觉系统的迭代

有气质） - 正文

字体选了三套 - 标题Playfair Display（衬线有气质） - 正文 Inter +
7/14明暗主题与国际化 博客视觉系统的迭代

支持 11 种语言

博客面向全球读者 国际化必须做
8/14明暗主题与国际化 博客视觉系统的迭代

语言切换也自动保存在本地

01命题

先说清本页判断

02解释

补足为什么

03行动

留下下一步

把“语言切换也自动保存”落到一个具体项目里看结果
9/14明暗主题与国际化 博客视觉系统的迭代

1 的对比度才行

命题先说清本页判断
解释补足为什么
行动留下下一步
把“1 的对比度才行”落到一个具体项目里看结果
10/14明暗主题与国际化 博客视觉系统的迭代

次要文字保持柔和但能看清

主文字加深一点次要文字保持柔和但能看清

把“次要文字保持柔和但”落到一个具体项目里看结果
11/14明暗主题与国际化 博客视觉系统的迭代

想营造点科技感和空间感

首页一开始加了粒子背景想营造点科技感和空间感

命题先说清本页判断
解释补足为什么
行动留下下一步
12/14明暗主题与国际化 博客视觉系统的迭代

带走四步

找项目

从真实任务开始

出材料

把想法变成可处理内容

做交付

用结果判断能力

可复用

把完成沉淀为流程

13/14明暗主题与国际化 博客视觉系统的迭代

让能力长出来

今天花了不少时间打磨博客的视觉细节

返回原文
上一篇从 Markdown 到 MP4 jianfe下一篇从 WordPress 到 Next.js 博