我是如何做设计的

现在要做一个网站很快。挑一个模板、换上名字和头像，一个下午就能上线。但也因为这样，很多网站看起来大同小异。我觉得问题通常不在技术，而在于不知道自己要的是什么：没有一个自己的世界观，就只能从别人的选项里挑。

我对配色、字型都没有太多概念，没办法用理论说明为什么这样好看。我比较确定的是两件事。一是我很喜欢日本那种减法的美感：能拿掉的就拿掉，留下来的每一样都有它的位置。二是一个画面好不好，我最在意的是和不和谐。

也先说在前面：设计是主观的。有些人就是喜欢简单、直觉的介面，那也没有错，差别只在有多少人喜欢。下面是我的做法，不是唯一的答案。其中最重要的前提，是你自己要喜欢你做出来的东西。

先知道自己要什么#

世界观听起来很大，但它的起点很小：你真正喜欢的东西是什么。我选宇宙，是因为我对天文一直很有兴趣，常常在翻天文书、看各种科普。喜欢的东西你才会愿意一直挖下去，而后面每一步都需要你对它够熟。

喜欢的东西还不是世界观。要把它变成世界观，我的做法是拿它来回答问题。每个网站都会遇到同一批问题，我把它们列出来，一题一题用宇宙回答：

能答完这张表，你就有一个世界观了。它有两个用法：

• 答不出来的东西，就是会「像贴上去的」东西。 一个按钮、一个动画、一张插图，如果在你的世界里说不出它是什么，放上去多半就是格格不入。
• 最后一列跟前面一样重要。 世界不只告诉你能做什么，也告诉你不能做什么，这是减法的第一步。做海王星主题时，有一版飞行的尾巴画成一道道风线。风是行星大气里的东西，换页却发生在星星之间，所以整个拿掉。

世界观不是一张滤镜。决定了宇宙，不代表只能放星星，这个站上也有返回舱、太空梭的机械臂、地平线上的树、电塔和六分仪，它们都说得出自己为什么在这里。

它也不需要写实。这个世界是架空的，卫星旁边会浮出字，一颗点可以在页面之间飞来飞去。这就像看科幻电影，没有人会因为太空船能超光速就出戏，让人出戏的是那些小地方：一道光熄灭的方式不对，一个东西的质感跟周围不一样，一个动作没有理由。所以我判断的标准不是「真不真实」，而是「和不和谐」。真实的资料很有用，但它是拿来帮你做到和谐的，不是目的。

做出选择，也接受代价#

世界观定了之后，会有几个大选择决定整个站的样子。我最大的一个，是把整个站做成 3D。

我认为宇宙的宽阔，用平面是展示不出来的。3D 的好处很直接：空间的立体感够，细节也能雕得比平面深，一颗星可以有自转、有倾角、有绕到背后被挡住的卫星。

代价也很清楚。它会牺牲一部分 UX，效能要花很多力气去压，而对一般读者来说，一个会动、有深度的画面，也比一页干净的文字多了不少认知负担。这是我自己选的，我不打算假装它没有代价。

我的做法是：核心不让步，代价一项一项去补。

• 效能： 目标是让人觉得「怎么可以 3D 还顺成这样」，但前提是不掉品质。优化可以换做法，不能换掉画面。
• 阅读： 文章内页加了一层底，让背后的星星不要干扰字。
• 装置： 没有 GPU 的装置会退回比较简单的星空，功能都在，只是少了一些演出。

做任何大选择都一样：先想清楚你拿什么换什么，换了就认真去补，而不是做到一半又往回缩，两边都不像。

决定镜头：读者站在哪里#

选了 3D，就多了一件平面不太需要想的事：镜头摆在哪里。我很在意角度和镜头，看电影时常常会想，这一幕是用什么角度、什么方式拍的。做网站时，我会先决定读者站在哪里，再决定他看到什么。

• 每一页先决定机位。 首页是从土星北方斜斜往下看，大部分页面是 3D 的仰角。
• 只有内容本身是平的，才用平的。 照片页是照片墙，用平面比较好看。但不能每一页都平，做到航行日志时如果也是平面，一页页看下来就会疲乏。
• 镜头动的时候，背景要有视差。 远的动得慢、近的动得快，看起来才是镜头在动，而不是页面在背景上滑。
• 换页像一个长镜头。 先对焦到那颗点，再跟拍，最后镜头停下、点还在动，才拍到它身后的轨迹。细节在上一篇写过了。

镜头的位置，会直接改变一页在讲什么。旧版的关于页有一扇窗，放的是一颗蓝色火球划过夜空、落到地上的那一刻，那时读者是站在地面上，看着一颗星坠落。翻新之后，坠落的换成了读者自己：标题「坐稳了。」的句号就是那颗琥珀点，往下卷，它就跟着你一起往下掉，最后返回舱在「就此落下。」那一刻着地。素材几乎一样，只是镜头从地面搬到了坠落的那颗星上。

用减法收敛：只有点和线#

画面上，我只留了两种东西：点和线。「此站点」那一页的副标我写的是「此处无他，唯有黑夜、白墨与微光。」说的就是这件事。

字汇少的好处是，它会替你做决定：任何新东西进来，都得先说得出自己是点还是线，说不出来的，就不属于这里。你的站不一定要用点和线，换成方块和格线、纸和折痕都可以，重点是只选两三种，每一页、每一个元件都用它们组出来。点和线刚好是星空最诚实的样子，星本来就是点，轨道、星轨、彗尾本来就是线，我不需要另外发明一套图形语言。

减法也包括留白。首页一进来只有土星和几条线，五个分区平常只是轨道上的点，滑过去或轮到它亮起来时，才浮出名字。画面上的东西少，读者才会自己去探索，每一个出现的东西也才显得重要。

颜色：先定角色，再挑颜色#

很多人配色是先挑几个喜欢的颜色，再想要放哪里。我反过来：先决定需要哪几个「角色」，每个角色只有一个意思，最后才填颜色。

1. 纸不用纯黑，墨不用纯白。 纯白在黑底上太刺眼，#F1ECE3 带一点暖，比较像纸上的墨，长文读久了眼睛比较不累。
2. 墨只有一个颜色，用透明度分层。 标题、内文、说明、线，全是同一个墨色的不同透明度，每一层都量过对比，内文至少要 4.5:1。
3. 只留一个讯号色，而且只给它一个意思。 我的琥珀色只代表「你在这里」。它不需要大，也不需要闪，因为它是画面上唯一有颜色的东西。
4. 警示色只在出错时出现。 它跟讯号色要差得够远，不然删除钮会看起来像「你在这里」。

减法在颜色上最难做，因为每个颜色单独看都很好看。旧站的紫色和绿色连结全部拔掉，程式码的语法高亮我也犹豫了很久，因为它会是全站极少数有颜色的地方。参杂的颜色一多，画面就没有主体了。

做多组配色时#

开源版可以换天体，我做了四组。做多组配色时，我多守了三件事：

• 纸和墨也跟着偏一点点。 海王星偏冷，参宿四偏暖。差别很小，但整站换过去，空气的温度会变。
• 主体不要上色。 海王星本来就是蓝的，有一版连星球都偏蓝了，跟站点的主题有点冲突，那颗点也不再特别。星球永远是墨色，颜色只属于那颗点。
• 讯号色要分得开。 它要跟自己的字色分得开，也要跟其他组分得开。我用色差（ΔE2000）量，组与组之间抓 20 以上才不会认错。本来有一组月球，它的讯号色跟自己的字色只差 6，那颗点几乎看不出来，最后换成了黑洞。

黑白测试#

最后一个检查最简单，也最有用：把颜色拿掉，东西还认得出来吗？ 如果两个东西只能靠颜色分辨，代表形状没做好。海王星一度看起来还是像土星，因为它用的是跟土星同一种笔触，只多了一点蓝。后来改用形状分开：土星是断续的刷痕和大片的环，海王星是平顺的笔触和暗斑，黑洞是空掉的阴影和吸积盘，参宿四是一团团的对流胞。

线：一种粗细，用亮度和虚实说话#

线的规则跟颜色一样：先限制，再给意思。全站只有一种粗细，1px 的发丝线。

粗细不能变，线要表达不同的意思，就只能靠亮度，和实线或点线：实线是已经发生的，点线是还没到的。

规则定好之后，最好找一个地方真的用上它，不然它只是装饰。我用在文章的目录：目录是一段星轨，读过的部分是实线，还没读到的是点线，琥珀点就是正在读的你。

要打破规则，就要有理由。我只有一条线是例外：点飞行时拖在身后的那道。白色的发丝看不出那是光，所以它改用点的颜色、带一层很淡的光晕。它可以有颜色，是因为它本来就是那颗点发出的光。

用接缝检查每一个细节#

前面定的是规则，这一步是每天都在做的事。

翻新那段时间，最常让我卡住的感觉是「像贴上去的」「硬接上去的」「不搭」。这些都是和谐被打破时的感觉，很模糊，很难改。后来我发现，它几乎都是某一道「接缝」没接好，而接缝只有几种：

还有一个很好用的问题：它的下一步是什么？ 设备页的太空梭机械臂会把箱子拿起来，那箱子之后丢去哪了？一个东西如果只有「现在」，没有前因后果，看久了就会假。

这些细节大部分人不会发现，单独拿出来也都不重要。但一个站里没接好的地方一多，就会开始像拼起来的。反过来，一个一个接好之后，读者就算说不出为什么，也会觉得它是一个完整的地方。

说不出哪里不对的时候#

上面那张表是事后整理出来的。实际做的时候，大部分时候我只会觉得「怪怪的」，很少能一句话说出问题在哪，更别说形容清楚。看得出不和谐，跟说得出为什么不和谐，是两种不同的能力，前者很吃美感的累积，没办法靠一张表速成。

这种时候，我会做三件事：

• 找真实的东西对照。 土星的条纹本来就是独特的，刻线就照着真实的土星去描。北极六角形照卡西尼号的照片画，里面不是空的，而是一片云和中央的风暴眼。旧版关于页那颗蓝色火球，是对照那段自拍影片，看光从暗到亮、再到落地的节奏。
• 看别人怎么做。 翻新一开始，我花了不少时间看各种星空设计，因为我想要的是自己看到也会眼睛一亮的东西。目录是看了 fumadocs 那篇专门讲目录设计的文章，它让我知道目录值得被当成一个独立的设计来做。favicon 做不好，就去看大家的 favicon 都怎么处理小尺寸。
• 把规格查清楚。 有些「怪」其实是事实没搞懂。对比度和色差可以量，iPhone Duo 这种折叠萤幕的尺寸和折痕位置，Apple 有官方的规格可以查。

参考不是照抄。看完之后要回到自己的世界里，用自己的字汇重画一次：fumadocs 的目录是直的，我的是一段星轨。

故事要放在读者看得到的地方#

开源版的四颗天体，是我这套做法被考得最彻底的一次。查资料、照真实的故事画，说穿了只是模仿，照着资料谁都做得出来。真正难的是怎么把它放进来，而且放得合理，跟整个站和谐。故事做在读者看不到的地方，等于没做，放进来却格格不入，比没做还糟。

海王星第一版做完，换页看起来跟土星几乎一样。因为多数换页画面是每一页自己的收法和长法，主题能换的地方其实很少。所以我先列出读者一定会看到的位置，再把故事一个一个放进去：

每一格放进去之前，我会用三个问题检查。

在那个大小下读得懂吗#

故事缩到一颗点、一条线上，很容易变得太抽象。土星有一个很好的故事：卡西尼号最后在土星和环之间穿了 22 次。但照字面做成换页，缩在一颗点上根本看不出意义，所以没放。

黑洞的转场也是这样。第一版把时间膨胀、面条化和重力波都放进换页，做出来只看到一个圆形在飞来飞去，因为画面上没有黑洞，读者不知道点为什么这样动。改成让黑洞自己出场之后，才读得懂：

海王星的弹弓也一样。点绕过的那颗星一开始只是一个淡淡的小圆，看起来像杂讯。画成一颗迷你的刻线海王星之后，一看就知道是绕过一颗星。故事里的主角要看得见。

照实画，还是画得和谐#

真实不等于好读，也不等于和谐，这时候要找一个能同时保住两边的做法。海王星的开场是 Adams 环上真的有的四段亮弧，长短不一，全挤在 40° 左右的范围里，当载入条很不好读。切成四等分最好读，但就跟海王星没关系了。最后保留真实的长短比例，等比放大到绕满一圈：

参宿四的表面也是。真实的照片只是一团模糊的光斑，照画会很抽象，跟站上的刻线也对不上。所以保留刻线，让线绕着一团团对流胞卷曲，看得出是一颗会翻腾的恒星就好。

跟其他几组是同一套吗#

参宿四是四颗里最难的。它是一颗恒星，自己发光，没有晨昏线，没有环，土星和海王星能沿用的东西几乎都要重找。光是开场就改了三次：

第一版缩在那么小的范围里，就是一个标靶，读不懂。第二版读得懂了，但其他三颗的开场都是斜的、类 3D 的载入，只有它是平的，跟其他几组不是同一套。第三版才同时过了三关：伴星沿着跟其他主题同倾角的斜轨道绕一圈，而这本身就是故事，天文学家最早是从参宿四亮度上一个约六年的长周期，推测有一颗伴星在绕它。

这一关也会反过来检查旧的东西。做完参宿四，土星反而成了唯一没有自己故事的一颗，表里它那一栏首页的三件事，都是那时候才补上的。

文案讲故事，不讲功能#

文字也是设计的一部分。每颗天体都有一句我写的话，滑过顶栏的天体选单时，旁边会出现它的故事。

一开始那段说明写的是「换页时点会怎样」，这是在写功能。我的原则是：说明故事，让读者自己联想到画面在演什么。 读者知道黑洞连光都会被拉回去，看到点逃出去时身后的光被拉回去，就懂了。

这里是宇宙的禁区。 光到此折返，时间到此止步。 万物坠入，再无归途。 人类写下的每一条定律，在此无一存活。

文字一样适用减法。我讨厌冗言赘字，也讨厌童话故事那种说法，一句话能说完的就不写两句。

给别人用时，给预设，不给旋钮#

如果你的设计要给别人用，例如开源成一套模板，最后要决定开放多少。

我的选择是不开放自由调色。能选的是我做好的几颗天体，每一颗的颜色、星球、转场、文案都是整套调过的，能自由填的只有内容。给他们几个精心做好的预设，让他们在我的审美范围内做选择，既能保住整个站的质感，又让每个人都有一点「这是我的」感觉。

这也是减法，只是拿掉的是旋钮。前面每一步都是在让东西彼此和谐，开放任意色码，等于让人随手拆掉其中一块。

从你自己的站开始#

整理成一份可以照着做的清单：

这些步骤能帮你把「哪里怪怪的」拆开来，找到是哪一道接缝，但它们替代不了眼睛。看得出哪里不和谐，需要时间养，而我知道的方法只有一个：多看真正好的东西，把它拆开来研究，再回头看自己的。至于做出来的东西好不好，最后还是要回到你自己喜不喜欢。