形状与字号核查页

落地页定稿之后，商家后台该用什么按钮形状、什么字号。这一页把选项实际画出来，你在图上看，指哪个不对。

底色、字体、品牌色都是已经定好的真值，所以你在这里看到的就是将来后台的实际观感。

先说结论

苹果自己就用两套形状：官网（apple.com）用胶囊按钮加大圆角卡片，电脑上的应用（比如 Things、Sleeve）用小圆角按钮加中圆角卡片。

越靠近真正干活的界面，圆角越小。原因很实在：一屏几十个元素的时候，大圆角既占地方又显得幼稚。

我们的落地页和后台正好对上这两套。落地页已经在用官网那一套，值是对的，不用动。下面要定的是后台这一套。

按钮形状

苹果有一条规矩：同一块区域里不要并排放两个胶囊按钮。胶囊很抢眼，两个放一起注意力就散了。后台一屏几十个按钮，全做成胶囊不成立。

所以建议分层：最重要的那个按钮保留胶囊，让人一眼认出这是 KOLink；其余的收成小圆角。

主按钮长这样

其余按钮，三个候选

真实尺寸下三者差别很小，所以下面配了角部放大五倍的对照。先看放大图分辨弧度，再回到真实尺寸看整体感受。

落地页和后台的主按钮，摆一起看

形状一样（都是胶囊），区别只在填充：落地页用品牌渐变，后台用单一亮蓝。这条上次已经定过，这里只是让你确认两者放一起不违和。

输入框

输入框比按钮更需要克制，因为表单里往往一次出现七八个。

卡片圆角

后台的卡片装的是列表、表单、数据块。三个候选值都来自苹果系，差别只在圆润程度。

看三张卡的左上角。尺寸完全一样，28px 那张的弧已经开始往里吃字了。后台的卡片通常比这更窄，弧会更明显，所以我倾向 18px。

字号

苹果的正文是 17px，不是 16px。这是 iPhone 上的标准正文尺寸，中文在这个大小下也最舒服。下面每一档都是真实业务里会出现的句子，中英各一行。

字号一大，字母之间看起来就会松，所以每一档都配了自己的收紧量：正文附近最松，往大和往小两头都收。这条规则落地页已经在用了。

放到真实场景里

上面所有的值凑在一起长什么样。这是后台最常见的一屏：一张表格。行内按钮暂时用居中那档 10px，你选了别的我再换。

间距

查完苹果得说句实话：苹果的间距不是一套固定档位，是一处一处调出来的。按钮内边距有 8/16 也有 11/21，卡片内边距 15、18、28 都出现过，区块之间从 48 到 120 都有。

所以间距这一项抄不到完整规则，只能抄两个锚点：元素之间 8 到 10 像素，卡片内边距 18 到 28 像素。

这也解释了一件事：我们落地页原本的字号和间距也是一处一个值调出来的 —— 因为它照的就是苹果。上周把它收成固定档位，是我们比苹果更规整，不是修了个错。

顺带一条验证

苹果官网的页面底色是 #f5f5f7，卡片是纯白，规矩写着「卡片必须永远比它所在的背景更浅」。

我们是 #eff1f5 底色配白卡片，同一个机制。已经定好的底色，这次得到了独立验证。

下一步

你回哪几条不对，我改完再给你看一版。全部认可之后，这些值和上一份颜色核查页的结论一起写进代码，成为全站的设计变量。