book-serif-index

name	book-serif-index
description	打造一套档案馆书籍阅读器设计系统：以衬线字体为主导的页面、等宽字体索引导航、做旧纸张面板、页边批注，以及一个高级目录框架。

Book Serif Index Skill

何时使用

• 打造一套档案馆书籍阅读器设计系统：以衬线字体为主导的页面、等宽字体索引导航、做旧纸张面板、页边批注，以及一个高级目录框架。

工作流程

适用范围

• 当界面应当给人一种精心策展的档案阅读器、手稿查看器或高级文学目录之感时，将其作为一套完整的设计系统方向来应用。
• 用于编辑类体验、故事驱动的产品页、档案库、研究界面、设定集系统，或需要书籍结构与索引导航、以阅读为核心的排版。
• 这不是通用的博客样式；它应当把沉浸式的书籍面板与一个技术感或目录感的外层框架结合起来。

视觉目标

• 打造一个中央阅读面板，让它像一本摊开的书、对开书页或档案文档，置于更暗的周边界面外壳之中。
• 让排版主导整个体验：展示型衬线或哥特风格标题、易读的衬线正文，以及用于导航、元数据和索引的等宽功能性标签。
• 使用做旧纸张色调、微妙纹理、折痕阴影、边缘暗影和轻微磨损，让主内容面板显得有质感、有收藏感。
• 用克制的索引或目录 UI 环绕阅读区域：侧栏分区、章节标记、章节列表、档案标签或等宽导航栏。
• 让配色克制而有氛围：深色外层外壳、暖色纸张内芯、低饱和的墨色调，以及一个从设计中提取的选择性强调色。若不存在品牌强调色，低调的牛血红、青铜色或古金色皆可接受。

实现指引

• 优先采用双区构图：一个更暗的外层界面框架，加上一个居中其内、更亮的书籍式内容面板。
• 使用行高充裕的衬线正文以保证可读性，再与等宽标签、字距加宽的分区名和安静的元数据搭配以形成对比。
• 用渐变、内阴影、微妙的中央折痕处理、边缘阴影和轻微纸张纹理构建书籍面板，让它读起来像层叠的材料而非一张扁平的米色卡片。
• 加入索引式导航模式，例如章节列表、分区树、档案分组，或带激活态和小标记的侧栏条目。
• 添加学术性细节，如首字下沉、页边批注框、区块标签、注释、引文、书页码标记或页脚元数据，以强化这套编辑系统。
• 动效应保持沉静、文气：遮罩式文字显现、轻柔的入场动效、缓慢的环境背景漂移，以及克制的悬停提示。

推荐模式

• 外层外壳：深色全屏容器，配细框线、微妙的竖向导轨和低调的角标。
• 书页对开：带中央折痕、纸张渐变、柔和边缘阴影，以及页面间轻微色调差异的双页或双面板阅读区。
• 索引导航：等宽侧栏，含分组标题、激活态圆点、档案分区，或像目录般排列的章节条目。
• 阅读细节：首字下沉、抽引金句、批注卡片、页边笔记、带细框边的图版，以及底部书页码标签。
• 排版系统：装饰性衬线展示字、高度易读的衬线正文，以及少量用于结构的等宽元数据。

调节旋钮

• 古旧度：根据界面应偏历史感还是当代感，增减纸张纹理、暖色调和磨损的量。
• 技术叠层：增减目录导轨、索引标签和元数据，使设计可偏向更档案化或更系统化。
• 书籍真实感：调节折痕深度、页面阴影和纸张对比，让面板有质感又不至于沦为拟物过载。
• 强调色用法：把强调色集中在标题、激活的索引态、标注或批注上，而非铺满整个书页对开。
• 密度：根据内容在通透的博物馆式构图与更密集的学术索引之间做选择。

应避免

• 只有衬线文字却没有令人信服的书籍或档案结构的扁平奶油色卡片。
• 省略索引导轨、元数据和材料纵深的通用出版排版。
• 破坏档案基调的明亮现代 SaaS 配色系统。
• 让界面显脏或难以阅读的过度做旧效果。
• 缺乏严谨目录与编辑框架、过度华丽的奇幻风格。