跳转到内容
扉阅Feyxo

外观

这一页是字段参考。想先看这一类能改什么、改了什么样、改不了什么,见外观包。

type: "look"。只能整套换,同时只用一套;没写的项用扉阅自带那一套补上。每个文件都可以不写(不写就跟自带的一样)。格式 1.2 起多了 layout.json、icons.json、feedback.json、fonts.json(加 fonts/*.woff2)、parts.json 和 theme.json 的 uses。

字段 说明
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:1
  • action 对 actionSoft ≥ 4.5:1
  • onAction 对 action ≥ 4.5:1
  • chinese 对 chineseSoft ≥ 4.5:1
  • real、negative、lineStrong 对卡片底 ≥ 3:1

不够的那一份换回自带的(照样能装,不是装不上;装前确认、外观卡片上说清是哪两种颜色不够,比如“强调色跟卡片底色”);数超了范围也换回自带的。

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 附带。

几处用哪个颜色角色:{ "link": "chinese", "clue": "real", "progress": "lineStrong", "newDot": "action" }。link 连线、clue 线索那条细线、progress 一句几处的进度点、newDot“提示”按钮上第一次碰到时的小蓝点。只能指到在卡片底上看得清的几种:action、actionStrong、real、negative、chinese、lineStrong;没写的照原来。

字段 说明
tray 卡片放在哪:line 插在句子下面(自带)、block 插在这一段后面、panel 放在旁边的面板。
bar 卡片底部那一行的先后:写了的按写的排在前面,没写的照原来的先后排在后面;只排先后,哪一样都拿不掉。名字:ask、prev、resume、go、land、again、next、recap、skip、hint、zh、star、back。

7 个小图标换成你画的:back、close、send、chat、search、thumb、arrow。每个写 { "box": 24, "d": "M4 12h16", "stroke": 2 }:box 画布边长(8–48),d 是 SVG 路径数据(只许路径命令字母、数和逗号空白,最长 2000 字),stroke 线宽(0 是实心填色,最多 4)。图标多大、什么颜色照原来。

{
"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)”
fonts.json
{ "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)管不到。坏了的那一款跳过,名单里后面的字体顶上。

部件尺寸,白名单加范围(超了用边界值,不认得的跳过)。都写数,单位是像素,除了标明的:

部件 项 自带 范围
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