UI/UX 决定了 一个网站的 personality。 网页带来的感觉，一半源于网站上的图片、文字这些内容，另一半则源于字体、配色、动效等 UI/UX 设计。 DayDesign 是一个简洁优雅、轻拟物风的 React 组件库。官网：DayDesign。 Colors 我首先定义了各种元素的颜色（我定义为 Sass 的 mixin，这样可以方便地复用）。每种颜色都有两套配色方案，分别对应 Lightmode 和 Darkmode。我主要定义了这些颜色： 背景色（全局背景） 前景色（卡片、按钮等放在背景上的物体） 前景 hover 的颜色、active 的颜色 前景物体在背景上的 shadow 颜色 前景物体在背景上的 border 颜色及其 hover 时的颜色 一级、二级、三级文字颜色 当然，如之前在《全新个人网站 Daydreamer 设计开发手记》中所说，Lightmode 和 Darkmode 绝不是简单的反色，而是要重新选择所有配色。所以以上的颜色都是语义的，具体指定的颜色，则根据 Light / Dark 定义在 mixins.scss 里。 Design 我很喜欢拟物风，因为拟物风看起来更精致、更符合物理直觉、更有人文气息。 然而拟物风的设计难度也比扁平风要大得多。扁平化的风格之下，只需要一个简单的边框就能分隔出一个组件；而拟物风里，必须不断推敲各个组件符合现实生活经验的样式。 比如这个 Tabs 组件： 用外边框的 inner-shadow 做出凹槽的效果，用 Tab 的 shadow 做出立体效果，让整个组件符合现实经验（就像一个开关一样）。 最难的点在于如何做 hover 效果。如何提示用户这个 Tabs 是可交互的呢？不能直接套用按钮的 hover 效果，因为 Tabs 里是没有突出显示的 Tab（图中的选项 2）可点击切换，有突出显示的 Tab（图...