外观
这一页是字段参考。想先看这一类能改什么、改了什么样、改不了什么,见外观包。
type: "look"。只能整套换,同时只用一套;没写的项用扉阅自带那一套补上。每个文件都可以不写(不写就跟自带的一样)。格式 1.2 起多了 layout.json、icons.json、feedback.json、fonts.json(加 fonts/*.woff2)、parts.json 和 theme.json 的 uses。
theme.json
小节标题“theme.json”| 字段 | 说明 |
|---|---|
colors |
28 个颜色角色,每个 { "light": …, "dark": … }(浅色网站、深色网站各一份):action 该他动手(主按钮、要他点的地方)、actionStrong、actionSoft 浅蓝底、actionRing 键盘选中的一圈、onAction 主按钮上的字、chinese 中文和命门、chineseSoft、real“现实 / 有 / 放对”、realSoft、negative“没发生 / 没有 / 放错”、negativeSoft、card 卡片底、line 细线、lineStrong 看得出边界的线、knob 开关圆钮。颜色只收 #rgb、#rrggbb、#rrggbbaa、rgb()、rgba()。 |
shadows |
5 个阴影 card、small、inflow、tiny、knob,每个浅色、深色各一份;只收颜色和数字(0 1px 2px rgba(0,0,0,.2),几层用逗号隔开)。 |
dim.strength |
压灰有多灰,0.5–0.8(越大越接近原来的字色);压灰的字跟底色保底 4.5:1。 |
fonts |
sans、en、mono、serifZh:一串字体名,只用本机装了的(不许 url())。 |
text.scale |
扉阅自己的字整体大小,0.9–1.25。 |
radius |
圆角 0–24px:card、ask、inset、ghost、whisper、chip、block、link、token、zh。 |
stroke |
线宽 1–3px:link、dot、clue、clueDot、block、chip、underline、cut。 |
motion.speed |
动效快慢 0.5–2(越大越快);他的系统开了“减少动态效果”就按系统。 |
对比度有保底
小节标题“对比度有保底”按 WCAG AA 的门槛定,补齐以后算,浅色、深色分开:
action、actionStrong、chinese对卡片底 ≥ 4.5:1action对actionSoft≥ 4.5:1onAction对action≥ 4.5:1chinese对chineseSoft≥ 4.5:1real、negative、lineStrong对卡片底 ≥ 3:1
不够的那一份换回自带的(照样能装,不是装不上;装前确认、外观卡片上说清是哪两种颜色不够,比如“强调色跟卡片底色”);数超了范围也换回自带的。
marks.json
小节标题“marks.json”44 种框选样子(句子上的字怎么标),每种四个字段都可以不写:text 字色、fill 底色、underline、frame 框。
- 颜色写主题里的角色名(
action)、角色名加透明度("actionSoft 60%"),或网页颜色text网页字色、textSoft淡一档、textMuted压灰、textStrong加深、textTrace落回原句的主干、shade浅浅的底,或者直接给两份{ "light": …, "dark": … }。 - 线写
{ "color": …, "style": "solid" | "dashed" | "dotted" | "wavy", "width": 1–3 },不认识的线型退回实线。 - 框只在扉阅自己排的句子上画得出:直接在网页原文上,浏览器只允许改字色、底色、下划线。
- 写了一种样子就整个换掉它(没写的字段就是不画)。
这 44 种的名字和什么时候出现:
- 读一句:
muted压灰、emphasis主干、spoiler会泄底的词 - 划一段:
candidate候选、candidate-out点错退出的候选、tappable能点的词、tapped点中的词、word每个词都能点、span划出的一段、span-partial没划对时留下的部分、span-start点头尾时的起点、cursor键盘光标 - 捏块、点掉修饰:
block、block-given替他捏的、block-modifier修饰块、removable能点掉的块、removed点掉了、removed-given替他点掉的、locked点错两次锁住的、trunk剩下的主干 - 连指代、答问题、搭配:
picked、picked-given、answered-given、phrase、phrase-front、phrase-back - 语法场地:
segment能拖的一段、segment-selected、segment-placed放对了、segment-given替他放的、segment-wrong放错了、segment-flipping、segment-resting、cue-found点中了靠的词 - 生词:
word-split、asked被问的词、clue线索、clue-seen、crux命门 - 给答案(错两次以后):
answer-right标出来的答案、answer-wrong他选错的那处 - 落回原句:
trace-trunk、trace-modifier、trace-placed
规矩:同一组里(上面分行的一组)你写的样子不能跟另一种一模一样;segment-placed(放对)和 segment-wrong(放错)、answer-right(答案)和 answer-wrong(他选错的)除了颜色还得有一处不同(线型、粗细、有没有底),照顾分不清红绿的人。
样例:examples/look-night/(夜墨)。自带的外观是默认扩展包 feyxo/look-default,随 SDK 附带。
theme.json 的 uses(格式 1.2)
小节标题“theme.json 的 uses(格式 1.2)”几处用哪个颜色角色:{ "link": "chinese", "clue": "real", "progress": "lineStrong", "newDot": "action" }。link 连线、clue 线索那条细线、progress 一句几处的进度点、newDot“提示”按钮上第一次碰到时的小蓝点。只能指到在卡片底上看得清的几种:action、actionStrong、real、negative、chinese、lineStrong;没写的照原来。
layout.json(格式 1.2)
小节标题“layout.json(格式 1.2)”| 字段 | 说明 |
|---|---|
tray |
卡片放在哪:line 插在句子下面(自带)、block 插在这一段后面、panel 放在旁边的面板。 |
bar |
卡片底部那一行的先后:写了的按写的排在前面,没写的照原来的先后排在后面;只排先后,哪一样都拿不掉。名字:ask、prev、resume、go、land、again、next、recap、skip、hint、zh、star、back。 |
icons.json(格式 1.2)
小节标题“icons.json(格式 1.2)”7 个小图标换成你画的:back、close、send、chat、search、thumb、arrow。每个写 { "box": 24, "d": "M4 12h16", "stroke": 2 }:box 画布边长(8–48),d 是 SVG 路径数据(只许路径命令字母、数和逗号空白,最长 2000 字),stroke 线宽(0 是实心填色,最多 4)。图标多大、什么颜色照原来。
feedback.json(格式 1.2)
小节标题“feedback.json(格式 1.2)”{ "wrong": { "shake": true, "sound": [{ "hz": 220, "ms": 90, "gain": 0.15 }] }, "placed": { "ring": true, "sound": [{ "hz": 660, "ms": 60 }, { "hz": 880, "ms": 80 }] }, "done": { "sound": [{ "hz": 990, "ms": 120 }] }, "shakeFrames": [{ "at": 25, "x": -3 }, { "at": 75, "x": 3 }]}wrong.shake:放错时抖不抖(不写是抖)。放错的红卡、红色的样子一直在,这里只能关掉抖那一下。placed.ring:放对时亮不亮一圈(不写是亮)。sound:放上(placed)、放错(wrong)、做完(done)各响什么,最多 6 个短音:hz音高 120–2000、ms多长 20–400、gain音量 0–0.5(不写 0.15)。读者在设置里打开“放对放错时响一声”才响,默认关。shakeFrames:抖的样子,2–8 帧,at第几成(0–100)、x、y挪多少像素(-8–8,不写是 0)。- 系统开了“减少动态效果”时不抖也不亮。
fonts.json 和 fonts/*.woff2(格式 1.2)
小节标题“fonts.json 和 fonts/*.woff2(格式 1.2)”{ "faces": [{ "family": "Inkwell", "file": "fonts/inkwell.woff2", "weight": 400, "style": "normal" }] }fonts/下面的.woff2存成 base64 字符串(feyxo pack打包时就是这样);只收真的 woff2(文件头是wOF2),一款解码后不超过 400 KB,最多 4 款。family是你起的名字(字母开头,字母、数字、空格、_、-),theme.json 的fonts里写它:"en": "Inkwell, Georgia, serif"。weight写一个数(100–900)或一段("100 900",可变字体);style是normal或italic。- 装进页面时名字换成
fxf-开头的(fxf-inkwell),网页自己用的同名字体不受影响;从字节直接装,网站的安全策略(font-src)管不到。坏了的那一款跳过,名单里后面的字体顶上。
parts.json(格式 1.2)
小节标题“parts.json(格式 1.2)”部件尺寸,白名单加范围(超了用边界值,不认得的跳过)。都写数,单位是像素,除了标明的:
| 部件 | 项 | 自带 | 范围 |
|---|---|---|---|
timeline |
box 一格多高 |
106 | 80–160 |
worlds |
label 左边那列多宽 |
108 | 72–160 |
poles |
height 一格多高;seam 中间那道缝多宽 |
96;14 | 64–160;6–32 |
coin |
width 翻硬币那一枚多宽 |
92 | 64–140 |
thermo |
column 一根最宽;height 多高 |
136;176 | 96–200;140–240 |
lever |
zone 一格多高 |
78 | 56–120 |
float |
width、height 问一问浮框多宽、最高多高 |
340、560 | 280–480、360–720 |
grasp |
min “有多确定”最矮那根占几成(百分比) |
26 | 10–50 |
link |
dot 箭头圆点;head 箭头多长;half 箭头半宽 |
2.4;7;3.6 | 1–5;4–12;2–7 |
tie |
radius 线拐弯的圆角;clear 绕开别的词留多远 |
4;4 | 0–8;2–8 |
chip |
height 小卡最矮多高(不许比自带更矮) |
18 | 18–32 |
ladder |
indent 阶梯每一层缩多少 |
18 | 8–40 |
tense |
pattern 时态纹样的疏密(倍数) |
1 | 0.5–2 |
tag |
lift 结构上的小标记往上提多少 |
3 | 0–6 |
fade |
steps、back 网页原文压灰、恢复各分几步(步数) |
6、4 | 2–12 |