Loading
大多数开发者作品集长得一样。我想让我的看起来像一本物理教科书。
大多数开发者作品集都是同一个作品集。
相同的英雄区，渐变背景，名字用大无衬线字体。相同的项目卡片网格。相同的"我构建有意义的东西"。这个设计试图通过模仿其他被认为严肃的事物来显得严肃——这是理性的，只是当所有东西都彼此相像时，没有什么是令人难忘的。作品集的第一个工作是被记住，第二个工作是讲述一个关于其创造者如何思考的故事。大多数作品集两者都做不到。
我换了一个问题：如果这项工作真正关于物理学、人工智能和智能本身的性质，作品集应该是什么样子？不是"我如何通过借用看起来可信的东西来表示可信度？"而是"什么视觉语言对这个领域来说是真正原生的？"
事实证明，答案不在 Dribbble 上。
涌现的系统有三层：核心原则（系统相信什么）、衍生规则（这些信念如何成为决策），以及一个实现层（执行它们的具体选择）。大多数设计系统只记录第三层。这篇文章按顺序覆盖全部三层。
同一信号，三种编码。形式改变，底层测量不变。
塑造这个设计的参考不是设计参考，而是 CERN 技术文档、1970 年代到 1990 年代的 NASA 任务海报，以及《Physical Review Letters》的排版。
它们共有的东西——几乎没有网页设计共有的——是它们将数据视为构图的主要公民。在 CERN 事件显示中，数字就是内容。视觉层次服务于数据，而不是反过来。在 NASA 任务海报中，颜色编码功能信息：轨迹阶段、系统状态、任务参数。美学如此紧密地遵循功能，以至于它们变得无法区分。NASA 没有人通过问"什么看起来很酷？"来设计视觉语言，而是问"什么用最少的视觉噪声编码最多的信息？"答案恰好是美丽的。
直接来自这些参考的三个具体设计决策。第一：深色背景，不是作为风格选择而是作为关于视觉重量的选择。浅色背景强调容器——空白区域、卡片表面、框架。深色背景强调内容本身，这正是当内容是技术性的时应该在的地方。文本和背景之间的亮度差异是产生可读性的东西；深色背景颠倒了惯例，使文本成为光源。第二：数据使用等宽字体。在物理论文中，方程占据与散文不同的视觉区域——你立即知道你是在看数据还是在看论证。这种区别值得在网络上保留，等宽是携带它的信号。第三：颜色限于语义使用。CERN 图表使用颜色区分粒子类型，去掉颜色你就失去了信息。这个标准——颜色只在它编码没有它会丢失的含义时使用——成为了不可协商的规则。
这个网站上的每个领域都有一种颜色。分配不是审美的，而是语义的，选择是经过深思熟虑的。
电蓝（#378ADD）用于物理学：切伦科夫辐射、等离子体放电、测量的冷酷精确的颜色。它同时读起来充满能量和精确，这正是物理学的样子——携带巨大能量、以完全精确性描述的现象。
青绿（#1D9E75）用于机器人技术：一种介于生物学的有机绿和技术的冷蓝之间的颜色。机器人技术正是那个交叉点——在物理空间中以类生物目的运动的机械系统。这种颜色读起来像有生命，而纯蓝不是，像被工程设计，而纯绿不是。
紫（#7F77DD）用于 AI：不可见和抽象的颜色。AI 系统产生输出，但没有你可以指向的物理实例。紫色在科学可视化中历史上编码抽象——紫外线、宇宙微波背景辐射假彩色图，存在于我们无法直接感知的领域中的事物的表示。
玫瑰金（#B76E79）用于 Ayri：温暖的、亲密的、明显人性化的。Ayri 不是这个网站的技术面，而是创意和个人的面——关注美、感受和那些抗拒还原的智能部分的项目。玫瑰金处于温暖和克制的交汇处——不像橙色那样咄咄逼人，不像薰衣草那样冷峻。这是调色板中唯一的暖色，这种单一性正是重点所在。
#378ADD物理#1D9E75机器人#7F77DDAI#B76E79Ayri核心原则： 如果一种颜色不编码含义，它就是装饰。装饰是噪声。
在实践中，这意味着： 蓝色永远不会出现在机器人技术页面上。紫色永远不会出现在物理学标签上。颜色不是装饰库存——它是领域信号，跨领域使用会降低每个已学习系统的读者的信号。在这个网站上花了五分钟的读者应该能在不阅读页面标题的情况下识别出一个页面属于哪个领域。颜色完成工作，文字确认它。这是系统与调色板之间的区别——系统分配含义，调色板分配情绪。
两种字体角色，永远不是三种。一旦你引入第三种字体，视觉语言就会碎片化。你失去了区分你真正需要的两种角色的信号，并添加了一个很少能被其认知成本所证明的第三种角色。
展示字体用于标题：几何的、自信的、在大尺寸下无需装饰即可辨认。它承载叙述和层次而不将注意力吸引到自身作为字体选择上。如果读者注意到标题字体，说明某些地方出了问题——他们应该注意的是内容。
等宽字体用于数据、标签、标签、时间戳、代码和数字：因为数据就是等宽的。这不是任意引入的设计惯例，而是有历史的语义惯例。等宽排版起源于每个字符需要等宽以便列对齐的环境——打字机、电传打字机、终端。它成为代码和数据的惯例，因为它使结构一目了然。那种视觉识别——等宽意味着机器可读、结构化、精确——值得保留和利用。
规则始终如一地应用：如果是数字、日期、类别标签、文件大小、版本字符串或代码片段，它就是等宽的。所有论证、解释或叙述都是展示或正文。两者之间的视觉对比在每个页面上都是一致的。读者几秒钟内就学会了这个系统：等宽意味着数据，比例意味着含义。
这也解决了技术写作中的一个反复出现的问题：区分内联代码和散文。当正文是比例字体而代码是等宽字体时，区分是立即的，不需要背景色、边框或任何额外装饰。字体本身携带了信号。
在实践中，这意味着： 这个网站上的每个日期、标签、版本字符串、统计数据和代码片段都是等宽的。每个标题、正文段落和说明文字都是比例的。没有例外。一旦你为单个元素打破规则——展示字体中的装饰性数字、为效果而设置的等宽标题——你就使其周围所有内容的信号失效。
AX-Series 和 Ayri 共享基础设施——相同的深色背景、相同的字体系统、相同的布局网格、相同的间距比例、相同的边框半径惯例。所有结构上的东西都是相同的。然而它们感觉像完全不同的网站。
AX-Series：冷峻、电气、数据密集、精确。情感基调是粒子加速器内部——一切都是有目的的，一切都是被测量的，没有任何表面为自身而存在。
Ayri：温暖、柔软、慷慨、亲密。情感基调是两个人谈论重要的事情——个人的、谨慎的、从容不迫的。
一个变量将它们分开：色温。AX-Series 的颜色向光谱的冷端拉——电蓝、青绿、冷紫。Ayri 的颜色向暖端拉——玫瑰、暖紫、琥珀强调。所有其他变量保持不变，相同的边框半径系统、相同的间距、相同的网格比例、相同的字体比例。强调色的温暖或冷峻通过悬停状态、渐变叠加、发光效果和活跃状态指示器传遍整个页面——在不改变其结构的情况下改变界面的感受质量。
这是设计过程中最重要的洞见：身份存在于变化的变量中，而不是常量中。约束所有结构性的东西，变化产生区分所需的最小值。当你只改变色温，两种身份之间的对比是清晰和立即的，而不创造碎片化——两个网站都明显来自同一个系统，这正是它们所是的。
在实践中，这意味着： 你可以完全克隆 AX-Series 布局，改变一个 CSS 变量——强调色调——并得到感觉像 Ayri 的东西。温暖通过每个悬停状态、每个发光、每个渐变色调传播。结构是相同的，身份是不同的。
设计系统只有和它的约束一样强。这些是降低它的违规——每一个都有特定的失败机制。
装饰性地使用颜色。 仅仅因为看起来好而在一个区域添加蓝色渐变——而不是因为内容与物理学相关——会稀释语义映射。读者学会了蓝色意味着物理学，现在蓝色意味着"这个区域需要视觉趣味"。每次发生这种情况信号就会稍微衰减，最终什么都不意味着。
第三种字体。 两种字体在张力中产生节奏，三种产生噪声。区分数据和叙述的信号需要恰好两个寄存器。第三个寄存器侵蚀两者，因为读者无法再解析对比在信号什么。
AX-Series 中的暖色强调。 AX-Series 和 Ayri 之间的冷暖分裂是主要的身份区分因素。AX 一侧的任何暖色强调——橙色悬停状态、琥珀色徽章、玫瑰色渐变——都会消除两个系统之间的区别。
"呼吸空间"的浅色背景。 内容即光的原则依赖于深色背景。插入以创造对比的浅色卡片不会创造呼吸空间——它将重点放在卡片的容器而非其内容上，在它出现的任何地方颠倒层次结构。
没有信息内容的动效。 仅作为光泽而存在的过渡——一个什么都不信号的悬停淡入淡出，一个不传达状态的加载指示器——是噪声。每个动画都应该回答一个问题：什么状态改变了？什么动作完成了？什么在加载？如果动画不回答其中之一，它就不应该存在。
两个具体的错误，不是模糊的自我贬低。
标志放置在三个月内都是错误的。它坐在导航栏内，大小与导航项目竞争——对于导航元素来说太显眼，对于品牌声明来说太小。标志应该在视口边缘建立身份，它是用户收到的第一个信号，需要空间来发挥作用。缩放到适合导航栏内部的标志已经将视觉层次让给了导航栏。修复——将标志移出导航栏，给它相对于视口的比例尺寸——事后看来是显而易见的。我抗拒它是因为我在导航栏设计上花了时间，并将沉没成本而非正确性加权。
项目卡片网格是先设计桌面端的，这在小视口上很明显。在 375px 宽度时，具有复杂悬停状态、分层文本层次和嵌套布局结构的网格变得不可读——悬停状态在触摸设备上从不触发，文本出乎意料地换行，在 1200px 处有效的视觉节奏完全崩溃。正确的方法是先设计移动端卡片：卡片需要传达的最小信息量，在最小空间中呈现，具有最小视觉复杂性。然后随着视口宽度允许而扩展。先设计桌面端然后使其"响应式"不是响应式设计，而是在压力下容忍小屏幕的大屏幕设计。
设计系统是一个论证。每个选择都在表明关于你如何思考这个领域的某些东西。密集的网格表明对复杂性和精确性的舒适。慷慨的空白表明对内容的信心——它不需要将其他内容推出页面来自我主张。等宽字体表明数据是一等公民，而不是脚注。深色背景表明内容比容器更重要。
作品集的设计是其中的第一个项目。