papatto 设计指南
papatto 是一组用来快速完成小任务的工具。本页把让 papatto 的界面和用语保持一致的规则，按网站实际使用的数值整理在一起。需要使用标志时，可以在“标志”一节下载。
目录
基本规则
papatto 的每个界面都建立在这些承诺之上，不会做出违背承诺的设计。
无广告
不放横幅，也不放视频广告。不在界面上显示妨碍操作的东西。
不上传
图片、文件和输入的文字，只在使用者自己的设备里处理。字体和程序库也一并打包，使用过程中不会去外部服务器读取。
无需注册
不需要账号，也不需要安装。打开就能用。
一下就好
一个工具只做一件事。大家都会用的功能放进去，很少用到的功能不放。
品牌结构
papatto 是创作者 Hoshimado 的作品之一。名称和颜色属于 papatto，不会换成 Hoshimado 的颜色。
© papatto
- 页脚最下面一行的右端放“by Hoshimado”署名，颜色用低调的文字色（muted）。
- 分享到社交网络时的图片，在左下角用低调的颜色放同样的署名。
- 署名不放在页眉，每个画面只放一个，也不会比 papatto 的标志大。
- 嵌入到其他网站的画面不显示署名，出处只用“在 papatto 中打开”的横条标明。
署名高度为 16px。旁边的版权文字是 12px，按照 Hoshimado 指南“署名文字的高度与旁边的版权文字对齐（大约 16〜20px）”的规定，取了较小的一端（by Hoshimado 的规定）。
与 Hoshimado 指南的关系
papatto 遵循 Hoshimado 指南的“用语”和“无障碍”两章，颜色、名称和标志使用 papatto 自己的。
Hoshimado 本身的规则见Hoshimado 设计指南。
用语
用谁读都不会困惑的平常话来写。
- 句子写短，一句只说一件事。
- 避免专业术语和生僻外来词，换成日常用语。
- 按钮用动词写出按下后要做的事（“选择文件”“下载 PDF”）。标签页和切换里的选项仍用名词（“PNG”“纵向”）。
- 说明里直接使用界面上显示的词语，按钮名称与说明中的用词逐字一致。
- 错误提示写清发生了什么、接下来该怎么做（“没有这个日期。请检查年、月、日。”）。
- 界面文字不使用感叹号和表情符号。
- 做不到的事也如实写出。不写没有根据的最高级（“最快”“最好”）或安慰人的话，而写“不会发送到任何地方”这样的事实。
- 文案提供 10 种语言，以日语为准。翻译不逐字直译，而是用该语言自然的说法。
| 这样写 | 不这样写 |
|---|---|
| 选择文件 | 上传 |
| 转换为 PNG | 执行 PNG 格式转换 |
| 已保存 | 处理已成功完成！ |
| 无法打开这个文件。请选择其他文件。 | 发生错误 |
| 输入的数字不会发送到任何地方 | 尖端安全技术让您放心 |
标志
标志由左侧的图形（橙色圆和三条线）和文字组成。日语页面用“ぱぱっと”，其他语言用“papatto”。
浅色背景
深色背景
- 不改变颜色。浅色背景用文字接近黑色的版本，深色背景用文字接近白色的版本。
- 网站内用绘制标志的组件（Logo）。颜色取自令牌，所以会在浅色和深色之间自动切换。
请勿
- 改变颜色或加渐变
- 拉伸变形、旋转或加阴影
- 改变图形与文字的间距或排列
- 放在照片或花纹等不易辨认的地方
颜色
在沉稳温暖的底色上，只使用一种强调色：橙色。每种颜色都有浅色和深色两个值，会随界面的颜色设置切换。
--bg页面背景浅色#fffcf6深色#17140f--surface卡片、输入框、步骤框浅色#ffffff深色#201c16--surface-hover悬停时、低调的底面浅色#fff6e6深色#2a241b--fg正文和标题浅色#26211b深色#f3eee6--muted补充说明、注释浅色#6b6157深色#aaa093--line分隔线、卡片边框浅色#ece4d6深色#342e25--control输入框、切换、线框按钮、颜色圆点的轮廓浅色#998c7e深色#776d5f--slider滑块的手柄和滑轨浅色#c97a00深色#f7b13c--accent主要按钮、选中标记、完成标记浅色#f5a524深色#f7b13c--accent-strong焦点轮廓、链接、开启标记的文字浅色#9c5e00深色#f7b13c--accent-fg橙色上的文字浅色#2b1a00深色#2b1a00--gain收支为正浅色#2e7d32深色#74d27a--loss收支的负数、错误提示（text-danger）浅色#c0392b深色#f4806f
对比度
颜色与背景之比。文字颜色以 4.5:1 以上、操作部件的轮廓（control）以 3:1 以上为标准，两种主题都满足。
| 标准 | 浅色 | 深色 | |
|---|---|---|---|
fg / bg | 4.5:1 | 15.6:1 | 15.9:1 |
muted / bg | 4.5:1 | 5.9:1 | 7.1:1 |
muted / surface | 4.5:1 | 6.0:1 | 6.6:1 |
accent-strong / bg | 4.5:1 | 5.1:1 | 9.9:1 |
accent-fg / accent | 4.5:1 | 8.2:1 | 9.0:1 |
gain / surface | 4.5:1 | 5.1:1 | 9.1:1 |
loss / surface | 4.5:1 | 5.4:1 | 6.6:1 |
control / bg | 3:1 | 3.2:1 | 3.6:1 |
control / surface | 3:1 | 3.3:1 | 3.3:1 |
- 用橙色（accent）填充的是主要按钮、打开的开关、步骤编号和已选项目的标记，不作装饰。
- 深橙色（accent-strong）用于焦点轮廓、页脚“查看全部”这样的链接，以及开启标记的文字。不用于错误。
- 错误提示用红色（text-danger，与收支负数相同的颜色）。
- 输入框、切换、线框按钮和颜色圆点的轮廓用 control，卡片和分隔线用 line。
- 只有滑块使用 slider 颜色（若用 accent-strong，滑轨尚未拖动的一侧与背景的对比达不到 3:1）。
- 橙色填充的主要按钮，每个步骤只有一个。
- 颜色用 CSS 令牌书写，这样浅色和深色都会生效。
文字
标题用圆润的字体，正文用易读的黑体。字体从网站自身提供，不从外部服务器加载。
- M PLUS Rounded 1c标题（日语以及拉丁字母、西里尔字母语言）
- Noto Sans JP正文（日语以及拉丁字母、西里尔字母语言）
- Noto Sans KR・SC・Arabic韩语、中文、阿拉伯语的标题和正文
字号
- 小任务，一下就好。
30px · text-3xl页面标题（电脑） - 小任务，一下就好。
24px · text-2xl页面标题（手机）、大段落标题 - 小任务，一下就好。
18px · text-lg步骤框的标题 - 小任务，一下就好。
16px · text-base正文、手机上的输入框 - 小任务，一下就好。
14px · text-sm补充说明、电脑上的输入框 - 小任务，一下就好。
12px · text-xs注释、页脚
- 数字和英文用半角。罗列数字的表格和计数器使用等宽数字（tabular-nums），让位数对齐。
- 手机输入框的文字为 16px（避免 iPhone 每次输入都放大画面）。
布局、间距与圆角
先为手机设计，在电脑上再左右展开。间距以 4px 为单位，只使用少数几个档位。
间距档位
4・8px · gap-1・gap-2组件内部（图标与文字、标题与下方说明）8px · gap-2横向并排的东西（小按钮、标签）16px · gap-4相邻元素之间（纵向叠放的按钮、卡片列表）32px · gap-8成组之间（步骤框之间、电脑上的左右栏）48px+ · gap-12・gap-16・gap-24页面段落之间（承诺段与工具列表）16 / 24・32px · p-4・sm:p-6・sm:p-8框的内边距（手机 16px，电脑 24・32px）
圆角
rounded-full按钮、切换、标签rounded-xl输入框、小的底面rounded-2xl卡片、步骤框rounded-3xl大的引导框
- 4・8・16・24・32・48px 这几档用于元素之间的间距和框的内边距。拿不准时：相近 = 16，成组 = 32。
- 组件内部的小边距（标签的上下、按钮的左右等）是例外，也会用到 2・6・10・12px 等档位之外的值。
- 页面最宽 1152px，阅读文字在 672px 处换行。手机上左右边距为 16px。
- 在 360px（尽量 320px）宽度下也不横向溢出。
动效
动效只用来说明刚刚发生了什么。简短，不弹跳。
- 切换页面时，内容从侧面轻轻滑入（0.2〜0.3 秒）；返回时从另一侧滑入。
- 切换界面颜色时，前后两个画面用 0.3 秒交叠替换。
- 保存后的提示从下方出现，再向下消失。
- 使用说明视频只在可见时播放，滚出画面就暂停。
- 开启“减弱动态效果”时停止动画，直接显示结果。
组件
按钮、切换和输入框都使用共用组件，工具内部不自己写样式。同样的用途在任何工具里外观都相同。
PrimaryButton步骤中的关键按钮。橙色每个步骤只有一个SecondaryButton放在主要按钮下方的描边按钮SmallButton放在旁边的小操作（复制、撤销）IconButton只有图标的圆形按钮，必须带朗读名称SegmentedControl从 2〜4 个选项中选一个格式
Switch立即生效的开关ToggleButton排在窄条里的开关选项。开启时显示橙色边框和勾TextField单行输入框，标题放在上方ColorSwatches常用颜色的圆点，以及选择其他颜色的彩虹圆点颜色
#e53935CardButton・CardLink整体可点击的小卡片Badge简短提示状态、不可点击的小标签有效已过期
状态
- 输入有误的输入框边框变红（aria-invalid），并在下方用红字写出改正方法。获得焦点时，输入框的边框变为深橙色。
- 按下切换的按钮（ToggleButton，以及带 aria-pressed 的 IconButton）在开启期间显示橙色边框和浅橙色底。文字和朗读的名称不变。
- 颜色圆点直径 32px，间隔 8px 排列。每个圆点都有 1px 轮廓（control），选中的圆点外 2px 处画一圈 2px 的环。
- 颜色圆点是一组单选按钮，可用方向键选择。屏幕阅读器会读出颜色名称，如“红色（#E53935）”。
尺寸档位
按钮和可点击的组件按高度档位确定。档位名称与 Hoshimado 指南的“按钮”一章一致。
| 档位 | 高度 | 组件 | 用途 |
|---|---|---|---|
xl | 56px | PrimaryButton xl・SecondaryButton xl / stage | 小工具舞台上最重要的操作（转动・开始） |
lg | 48px | PrimaryButton lg | 步骤最后的主要按钮（下载・保存） |
md | 44px | PrimaryButton md・SecondaryButton・ChangeFileButton・TextField・Select | 标准。与输入框、选择框同高。主要按钮下方的线框按钮和重新选择文件的按钮也是 |
sm | 36px | PrimaryButton sm・SmallButton・ToggleButton・LinkButton inline・TextField sm | 旁边的小操作（复制、撤销）和开关。手机编辑界面顶部的“保存”也是 |
icon | 44px | IconButton lg | 只有图标。手指常按的地方（删除行・关闭全屏） |
icon-sm | 36px | IconButton | 只有图标。结果旁的复制等 |
icon-xs | 32px | ColorField (×)・Thumbnails / ImageStrip (×) | 输入框内的 ×、缩略图上的 × |
swatch | 32px | ColorSwatches | 选择颜色的圆点 |
排列
- 同一组操作之间留 8px。
- 放不下时换到下一行。切换（SegmentedControl）放不下时纵向堆叠。
- 主要按钮放在步骤的最后。
图标与使用说明视频
图标是线条画，使用说明用实际画面录制的视频来展示。
- 工具图标是圆角方框中的线条画，颜色与文字相同，不用橙色（排在一起时不显得杂乱）。
- 转换类工具在图标里用小字标出输出格式（如 PNG）。
- 使用说明按步骤展示实际画面的短视频：电脑放在浏览器框里，手机放在手机框里。
- 视频中用橙色框圈出要操作的位置。
- 步骤说明直接使用画面上的词语，写清在哪里按、按下后会怎样。
无障碍
让任何人、在任何设备上都能使用。
- 文字在两种主题下与背景的对比度都在 4.5:1 以上，操作部件的轮廓在 3:1 以上。
- 所有操作都能用键盘完成；任何部件的焦点都显示为距离元素 2px 的 2px 深橙色轮廓。
- 主要操作至少 44px。旁边的小操作为 36px（高于 WCAG 2.2 2.5.8 要求的 24px），与相邻部件至少间隔 8px。输入框里的 × 和选择颜色的圆点为 32px。
- 阿拉伯语等从右向左书写的语言，布局和箭头左右镜像。
- 只有图标的按钮带朗读名称，状态不只靠颜色传达。
- 深色模式和“减弱动态效果”下也不会错乱。
发布前检查
推出新界面之前，确认以下几点。
- 没有广告、上传或对外部服务器的请求
- 在电脑和手机、浅色和深色、日语・英语・阿拉伯语下都看过，360px 不横向溢出
- 橙色主要按钮每个步骤只有一个
- 元素之间与框内的间距使用规定的档位，组件用的是共用的
- 按钮写明动作，没有感叹号和表情符号；错误提示是红色，并写明该怎么做
- 10 种语言的文案齐全，按钮名称与说明的用词一致
- 以初次使用者的角度读使用说明步骤，不会困惑