Z
DayZ 设计规范
Design System · v1.0

为长久书写而设计的安静系统

DayZ 是一款只存在你自己设备上、注重隐私的日记 App。整套界面追求「温润、克制」:浅色像暖白的纸、深色像柔和的炭,中文排版优先,还有雾紫 / 暖黄 / 雾绿三套可随心切换的主题色。试试右上角的色环、明暗与纸色开关。

本地优先 浅色 + 深色 中文为主 3 套主题色 移动优先
00 / DESIGN LANGUAGE

设计语言

下面几条,是 DayZ 想给人的感觉——安静、克制、像纸一样温润。它们不是规则,而是每当拿不准一个设计该不该做时,回来对一对的准星。

QUIET

温润 · 安静

为长久书写而设计。大面积留给纸与墨,颜色只在关键处轻轻一点,不喧哗、不抢镜——注意力始终在你写的字上。

RESTRAINT

少即是多

不堆数字、图标、花哨的装饰。每样东西都要挣得自己的位置;与其多加一样,先问能不能减一样。一千个「不」,换一个「是」。

PAPER & INK

纸与墨

浅色是暖白纸、深色是暖炭黑,都不用刺眼的纯白纯黑。背景是一张可更换的「纸」,文字是温润的墨——像在真实的本子上书写。

QUIET SIGNALS

用最轻的方式表达

提示、状态靠一点点颜色或一个小图标说清,而不是一整块刺眼的红绿。能用一丝暗示讲明白的,就不立一面墙。

CHINESE-FIRST

中文优先

中文写得舒服,排在第一位。正文用更耐读的字、行与行之间留足呼吸,长时间读也不累——先把中文照顾好,再兼顾英文。

01 / COLOR THEME

三套主题色

每套都是一个完整、独立的强调色体系——不是同一个色相的深浅,而是三种气质。强调色用于按钮、选中态、链接、图标点缀,以及日记本(journal)的着色;大面积仍由中性色承载,保持安静。整套色板都饱和度克制,适合长期注视。

Lavender
雾紫 · Lavender
薰衣草的雾感灰紫,沉静、内省,最贴合夜间书写。
Honey
暖黄 · Honey
琥珀蜜糖的暖黄,温和明亮、有生活气,不刺眼。
Sage
雾绿 · Sage
鼠尾草的雾绿,舒缓、自然、有呼吸感,久看不累。

上方第一行随顶部主题切换实时联动;后两行固定展示对应主题,方便横向对比。每个色值在浅 / 深模式下都有对应取值。

02 / NEUTRALS

中性色 · 纸与墨

中性色只随明暗模式变化。浅色不是纯白,而是带暖调的纸色,减少长时间阅读的反光疲劳;深色不是纯黑,而是暖炭黑,柔和而不刺眼。文字用「墨」的层级表达主次。

背景与表面

文字 / 墨色层级

背景 · 纸色(可切换 · 全局生效)

在中性暖纸之外,再给几套浅淡、适合长时间阅读的纸:浅绿(豆绿护眼)、雾蓝(清冷低眩光)、云灰(中性沉静)。另有 主题微染(在白纸上轻轻染一点当前主题色)与 自定义(拖色相滑块生成)。每套都让卡片比底色更亮,内容浮起、主体清楚。切换即时作用于整篇文档;明暗各自成立。

自定义色相 拖动即切到「自定义」,跟随明暗自动深浅
03 / TYPOGRAPHY

字体排印

中文为主。正文与日记内容用衬线(Noto Serif SC / Newsreader),带来书卷气与长文阅读的温度;界面文字用无衬线(Noto Sans SC / Hanken Grotesk),清晰利落。中文行高放宽至 1.8 以保证阅读舒适。

DisplaySerif · 44 / 600
今天也好好生活
Heading 1Serif · 30 / 600
五月的午后,雨停了
Heading 2Serif · 22 / 600
往年今日 · 三则回忆
Heading 3Sans · 18 / 600
本月写了 18 篇日记
Body / 界面Sans · 16 / 1.7
界面文字使用无衬线体,承载按钮、标签、设置等功能性内容,强调清晰与一致。Mixed with English text.
Diary / 正文Serif · 18 / 1.85
日记正文使用衬线体,行高放宽。窗外的雨下了一整个下午,我泡了杯茶,听着雨声把这周的事慢慢写下来,心也跟着静了。
CaptionSans · 13
2026 年 5 月 29 日 · 周五 · 上海
OverlineSans · 12 / 0.14em
ON THIS DAY · 往年今日
04 / SPACE · RADIUS · ELEVATION

间距 · 圆角 · 投影

间距以 4px 为基准,构成节奏一致的留白。圆角偏柔和,呼应温润气质。投影是暖调、轻薄的,深色模式下更多依赖描边与表面分层而非重阴影。

间距标度

圆角

xs 6
sm 10
md 14
lg 20
xl 28

投影

sm
md
lg
05 / COMPONENTS

组件总览

组件全部基于上面的 token 构建,跟随主题与明暗实时变化。以下示例可点击交互,感受不同主题色落到真实界面里的样子。

按钮

.btn-primary / .btn-soft / .btn-ghost / .btn-text / .btn-danger · 尺寸 .btn-sm/.btn-lg

输入框

留空时自动取正文第一行
.input / .textarea · 聚焦态为 accent 描边 + 柔光环

开关 · 勾选 · 分段

启用生物识别锁
显示往年今日
按日期排序
按修改时间
.switch · .opt(勾选/单选) · .segmented

标签 · 心情 · 天气

# 旅行 # 读书 × # 工作 # 家人 + 添加标签
愉快
平静
一般
低落
烦躁
晴 26° 多云 21° 雨 18°
.tag / .mood / .weather-chip · 心情与天气配色克制,跨主题通用

编辑器工具栏

.toolbar · 激活态为 accent-soft 底;与 ProseMirror 编辑器对接

提示条 · 弹窗

全局提示条 toast:底部浮现、自动消失、可堆叠(最多 3 条)。底色保持中性(深色款 / 表面款),语义只靠图标点色承载——成功/信息用主题色、危险用 --danger、收藏用 --favorite,克制不喧哗。可带一个操作(撤销 / 查看 / 重试)。点下面的按钮看效果。

提示条从这块区域底部浮现 ↓

删除这篇日记?

删除后会进入回收站,30 天内可恢复;超过期限将彻底移除且无法找回。

.toast(.surface 表面款 · .danger/.fav 语义点色 · .acc 操作) · 引擎 DZ.toast() · .dialog

相册 · 九宫格

多图日记的网格。列数随张数变(更克制的朋友圈式):2 张两列、3 张三列、4 张田字(2×2)、≥5 张三列铺满。超出 9 张的在第 9 格盖「+N」收起,阅读页里点它展开全部。

2 张
4 张 · 田字
9+ 张 · 收起
.gallery[data-n] · 格 .ph · 收起格 .ph.more[data-more] · 隐藏格 .ph.hidden(展开态 .expanded 露出)
06 / IN CONTEXT

放进真实界面

组件组合成时间线主界面。导航收在左侧抽屉里,底部不再放标签栏——只留一个 FAB:轻点直接写日记,长按展开拍照 / 语音 / 清单,让「记录」这件事永远只差一步。切换主题色与明暗,观察整体氛围如何随之微调。

这是嵌入的真实页面,与产品同源——轻点 FAB 写日记,长按(约 0.35 秒)展开拍照 / 语音 / 纯文字。

07 / SIDEBAR · DRAWER

侧边栏 · 抽屉导航

手机端从左滑出的抽屉,承载全局导航。结构(与真实页面一致):账户 → 日记本(带色点与计数)→ 浏览(往年今日 / 收藏 / 日历 / 回收站)→ 底部设置。搜索不放在抽屉里,统一走顶栏放大镜;抽屉底色用暖纸 --bg(非纯白),日记本色点对应 journal 的 color 字段;选中态 accent-soft 底 + 左侧色条。点下方顶栏的菜单图标试试。

这是真实页面,抽屉已展开;点遮罩处可关闭,再点左上角菜单图标重新打开。