外观包
type: "look"。扉阅陪你拆句时,会在句子上画很多“标记”:主干加深、候选画虚线、放对画绿线等。外观包换的就是这些颜色、字体、线条和标记的样子。只能整套换,同时只用一套;没写的项用扉阅自带的补上,所以一个外观包可以很短。
能改什么
小节标题“能改什么”- 颜色:28 个角色,每个浅色网站、深色网站各一份。包括主色(该你动手的地方)、中文的颜色、“放对”的绿和“放错”的红、卡片底、细线、键盘选中的一圈、开关的圆钮,和下面“卡片里”“扉阅自己的页面”的几组。
- 阴影:5 档(卡片、小卡、开关等)。
- 压灰:压灰有多灰(0.5 到 0.8,越大越接近原来的字色)。
- 字体:四类(界面字、英文字、等宽字、中文衬线字),写本机已经装了的字体名。
- 字:整体字号 0.9 到 1.25 倍;各处字(卡片标题、提问、小字等)还能分别定字号、字重、行距、字间距。
- 疏密:整体松一点还是紧一点,卡片之间、按钮之间的间距。
- 圆角:卡片、提问条、格子、小标签、按钮、开关等,各 0 到 24 像素;按钮和开关还能写“两头全圆”。
- 线宽和虚线:连线、点、线索、框、下划线、卡片的边、分隔线,各 1 到 3 像素(卡片的边和分隔线可以写 0,不画);格子的虚线怎么画。
- 动效:整体快慢(0.5 到 2 倍),每一种动效还能分别定时长和曲线。
- 扉阅自己的页面:设置页、做题记录这些页面的底色、字色、浅底、分隔线;还能写“总是浅色”或“总是深色”,不跟系统走(只管扉阅自己的页面,网页上的卡片仍按网页的深浅走)。
- 卡片里的字色和底色:正文、次要字、最重的字、浅灰底、输入框底。
- 句子上的 44 种标记:每一种能改字色、底色、下划线(实线、虚线、点线、波浪线)、框,还有划掉线、发光、加粗。比如
clue(线索)、segment-placed(放对了)、removed(点掉的修饰)、muted(压灰的部分)。 - 几处用哪个颜色(格式 1.2):连线、线索那条细线、进度点、“提示”上的小蓝点各用哪个颜色角色。
- 布局(格式 1.2):卡片放在句子下面、这一段后面,还是旁边的面板;卡片底部那一行按钮的先后(只排先后,哪一个都拿不掉)。
- 小图标(格式 1.2):返回、关闭、发送、问一问、搜索、点赞、箭头这 7 个小图标换成你画的(只收 SVG 路径数据,大小、颜色照原来)。
- 做对做错的反馈(格式 1.2):放错时抖不抖、怎么抖(几帧位移),放对时亮不亮一圈,放上、放错、做完三个时候各响什么(几个短音;读者自己在设置里打开“声音”才响,默认关)。
- 字体文件(格式 1.2):带几款 woff2 字体(最多 4 款、一款不超过 400 KB),在上面的字体里用它的名字。字体从包里的字节直接装进页面,不从网上下,网站的安全策略拦不住;装进页面时换成扉阅自己的名字,网页上同名的字体不受影响。中文全字库放不下,适合英文、数字,或者你自己裁过的字。
- 部件尺寸(格式 1.2):时间线一格多高、两个世界左边那列多宽、正负两极多高、硬币多宽、温度计多宽多高、杠杆一格多高、问一问浮框多宽多高、“有多确定”最矮的那根占几成、连线箭头和拐弯的样子、小卡最矮多高(不能比自带的更矮)、阶梯每层缩多少、时态纹样的疏密、结构上的小标记往上提多少、压灰和恢复各分几步。每一项有范围,超了用边界值。
小例子
小节标题“小例子”样例 look-night(夜墨)只写了几个颜色、一个字体、两种标记:
{ "colors": { "action": { "light": "#1F3FA8", "dark": "#A9B8FF" }, "chinese": { "light": "#8A5208", "dark": "#F0B85C" }, "card": { "light": "#FFFFFF", "dark": "#121615" } }, "fonts": { "en": "\"Charter\", \"Georgia\", serif" }, "radius": { "card": 10, "ask": 10 }, "motion": { "speed": 1.25 }}// marks.json:线索改成点线,放对改成绿底加实线{ "clue": { "text": "textStrong", "fill": "actionSoft", "underline": { "color": "action", "style": "dotted", "width": 2 } }, "segment-placed": { "fill": "realSoft 60%", "underline": { "color": "real", "style": "solid", "width": 2 } }}在哪里看到
小节标题“在哪里看到”- 设置页“外观、语言与讲解”页的“外观”:每套外观是一张卡,点一下,整个设置页马上跟着变。
- 网页上:下一次按 ⌘C,卡片和句子上的标记就按新的来。
- 装之前:确认卡会写“一整套外观:换了几种颜色、几种句子上的样子,别的用自带的”,有颜色会被换回去也会说清。


改不了什么,以及为什么
小节标题“改不了什么,以及为什么”这些是为了让每个人都看得清、点得到,不因为“好看”而丢掉:
- 对比度有保底:卡片里的字和底色至少 4.5:1,线和框至少 3:1;扉阅自己页面的字和底色也一样。你写的标记颜色画在真网页上时,还会按那个网页的底色再查一遍。不够的那一项换回自带的颜色(照样能装,确认卡会说是哪两种颜色不够)。
- 放对和放错(还有给答案时的“答案”和“你选错的那处”)除了颜色,还必须有线型、粗细或底色上的一处不同,照顾分不清红绿的人。
- 键盘焦点圈、最小点击面积不能去掉(按钮不矮于 24px),字号行距调小也不会比自带更矮。
- “结束”“提示”“总开关”“本站开关”这几个出口永远在。
- 系统开了“减少动态效果”时,动效按系统的来。
- 网页原文那句英文的字体、字号、字重、字距、内边距都改不了:浏览器的高亮接口只准改颜色、底色、下划线、文字阴影,不准动影响排版的东西。想让字看起来粗一点,用“加粗”(左右各多出一点同色的文字阴影)或发光。“框”不是画在字上的,而是画在句下放法里每个词上盖着的扉阅自己的一层透明块上,网页原文上也能看到。
- 网页自己的字色和底色是运行时从真网页量出来的,没法在数据里写死。
- 字体只收 woff2 的字节(
fonts/*.woff2),不许url()、不从网上加载;图标只收路径数据,不收 SVG 文件、位图。 - 部件尺寸只能调白名单里那几项,不收 CSS:设置页、做题记录这些扉阅自己的页面怎么排不开放(那是你和扉阅之间的地方)。
字段参考
小节标题“字段参考”字段名、范围、全部 44 种标记的名字和什么时候出现:外观(字段参考)。
用了“格式 1.1”才有的字段(卡片里的字色、页面底色、各处字、疏密、动效曲线、划掉线、发光、加粗这类),清单的 format 写 "1.1"。样例 look-paper(米纸:米黄的页面和卡片、总是浅色、更大的字和更松的间距)用上了一批。用了“格式 1.2”的(几处用哪个颜色、布局、小图标、反馈、字体文件、部件尺寸)写 "1.2";老一点的扉阅不认得这些文件,跳过它们,别的照用。