ORIGIN STORY
从工程蓝图到工业网站的三次翻译
2017 年决定 all in 工业赛道后，设计团队花了 6 个月研究"工业设计"到底是什么。最终我们选择了文具复古风——不是因为它好看，是因为它精准。
第一次翻译：工程蓝图的历史传承。工程师看了几百年的蓝图，蓝底白线，栅格整齐，标记清晰。我们把这个视觉语言翻译成了网站的 8pt 栅格基线和规整的网格布局。每个组件的位置都有数学理由，不是设计师主观决定的。
第二次翻译：工业行业的专业调性。工业客户不信任"花里胡哨"的东西。铁灰+深黑+明黄的配色，传达的是稳定、可靠、专业——这也是爱科想让客户感受到的。明黄点睛的灵感来自工业现场的警示标记和机械设备上的安全标签。
第三次翻译：纸质肌理的温暖感。纯数字界面是冰冷的，而工厂里有纸、有油墨、有手绘标记。背景的纸张纹理、线条的手绘感、按钮的切角设计，都是在向"纸笔时代的工程师"致敬。爱科的官网打开来不像是一个"网站"，更像是一本"精致的产品手册"。
四大设计原则 · 爱科设计的底层逻辑
所有交付项目都必须遵守这四条原则。过不了原则审查的设计稿，改到过为止。这不是建议，是强制红线。
秩序感 ORDER
栅格系统以 8pt 为基准线——所有间距、边距、字号、圆角、阴影偏移量都必须是 8 的倍数。
对齐逻辑参照工业图纸：同一层级的元素必须精确对齐，不允许"差不多就行"。这背后是工程师对精度的执念。
8pt 栅格的好处：页面整体更统一、响应式适配更简单、设计协作更顺畅。13px 这种数值禁止出现。
材质感 TEXTURE
纸张肌理作为背景，传达"工程手册"的阅读感，而不是"网页"的浏览感。用微妙的噪点纹理和暖色纸张底色实现。
铁灰金属质感的按钮和卡片边框，暗示工业金属材质的坚硬和稳定。切角设计模拟金属板材被切割的视觉。
真实阴影：所有投影参数都经过反复调试，模拟真实光照下的物体投影。投影方向固定为"左上角光源"。
留白感 WHITESPACE
工业信息密度高，但留白必须克制——不是为了好看，是为了让信息层级清晰。标题与正文间距、段落间距、卡片间距都有严格比例。
留白比例参照机械手册排版：标题区约占 15%，内容区约占 70%，留白约占 15%。比例不是拍脑袋的，是从 30 本机械手册中统计出来的。
不允许为了"填满版面"而硬塞内容。空着的地方就是空着——这是爱科设计的基本审美。
明黄点睛 ACCENT
黄色在工业中的使用传统：危险警示色（警告牌）、机械设备标记（安全标识）、施工区域标记——黄色意味着"注意"和"安全"。
爱科的明黄（#E8C41F）严格限制使用场景：按钮、标签、重点标题、装饰线条。占比不超过页面总面积的 10%。
明黄在铁灰背景上的对比度达到 7.2:1，远超 WCAG AA 的 4.5:1 要求，保证了无障碍可读性。
工业风 vs 商务风 · 10 维度系统对比
下面这张表是我们对两种设计语言的系统性对比。不是说商务风不好，而是工业客户需要的东西不一样。这张对比表也帮助很多客户理解了为什么爱科的官网看起来"与众不同"。
| 对比维度 | 工业风（爱科） | 商务风（主流） |
|---|---|---|
| 配色方案 | 铁灰 + 深黑 + 明黄（3 色为主），比例 70:20:10 | 蓝 + 白 + 渐变（3-5 色），强调"科技感" |
| 栅格系统 | 8pt 基准严格对齐，所有间距必须是 8 的倍数 | 12 列栅格灵活适配，不强制统一基准 |
| 字体选择 | 思源黑体 + Roboto + JetBrains Mono（数字专用等宽） | 思源黑体 / PingFang / Helvetica（通用字体） |
| 装饰元素 | 极少，仅切角和线条，模拟金属切割 | 渐变、阴影、插图、图标、装饰性 shape |
| 信息密度 | 高密度，参数优先，产品信息详尽 | 低密度，留白优先，强调简洁清爽 |
| 产品展示 | 爆炸图 + 参数表 + 选型器 + 参数对比 | 产品图 + 简单卖点描述 + CTA |
| CTA 按钮 | 明黄切角按钮，形状固定，语义明确 | 圆角渐变按钮，多样化，强调美观 |
| 图片风格 | 真实车间 + 产品实拍 + 工程师工作照 | Stock Photo + 商务插画 + 团队合影 |
| 动效使用 | 极少，仅必要的过渡和悬停反馈 | 丰富，悬停/滚动/视差/入场动画 |
| 传达感受 | 专业、可靠、精确、工业化 | 现代、活力、友好、互联网感 |
色彩体系详解 · 主色铁灰 #4A4A4C
主色铁灰 #4A4A4C 是爱科的灵魂颜色。为什么选这个？因为它介于黑和白之间，像钢铁一样冷静克制，又不像纯黑那样压抑。下面是完整的色彩体系转换表。
主色转换表
铁灰 #4A4A4C · RGB: (74, 74, 76) · CMYK: (3%, 3%, 0%, 70%) · HSL: (240°, 2%, 30%) · HSV: (240°, 3%, 30%)
明黄 #E8C41F · RGB: (232, 196, 31) · CMYK: (0%, 15%, 87%, 9%) · HSL: (50°, 82%, 51%)
工业配色三原则
原则一：主色占比 ≥ 70%，辅助色 20%，点睛色 ≤ 10%。严格的比例让页面统一而有呼吸感。
原则二：禁止使用纯亮色大面积填充。所有颜色必须带有一定的"灰度"，避免过于刺眼的高饱和度。
原则三：配色有语义。明黄 = 重要/警示，铁灰 = 中性/稳定，深黑 = 权威/标题，纸白 = 背景/内容区。
字体体系 · 三类字体各司其职
中文用思源黑体（无衬线、清晰、多字重支持）、英文用 Roboto（与思源黑体同源、x-height 对齐）、数字用 JetBrains Mono（等宽字体，参数对齐更专业）。三类字体配合使用，在保持工业感的同时兼顾可读性。
设计交付标准 · 量化可执行的技术规范
爱科所有交付项目必须满足以下标准。这不是建议，是强制要求。交付前的 checklist 有 50 项，下面摘选了最核心的 6 项。
好的设计，应该让用户感觉不到设计
爱科的设计不是为了获奖，是为了让工业客户的官网 visitors 能在 3 秒内找到产品、在 10 秒内看懂参数、在 30 秒内产生联系欲望。如果设计做到了这一点，它就是好设计。
EVOLUTION
爱科的设计不是一蹴而就的 · 是三年磨一剑
很多人以为爱科的文具复古工业风是一次性想出来的——其实不是。这套视觉语言经历了三次大的迭代，前后花了整整三年。
第一版（2017 年）：深蓝商务风 + 工业元素堆砌。现在看很幼稚——又是齿轮图标又是金属光泽，想要"工业感"但不知道怎么表达。客户反馈：看起来挺酷，但产品参数表放不进去。
第二版（2019 年）：纯黑白极简风 + 红色点睛。去掉了花哨的装饰，开始考虑信息密度。但问题是——纯黑白太冷了，客户说"像银行网站"。红色也不够有辨识度，很多网站都用红色。
第三版（2020 年至今）：铁灰 + 深黑 + 明黄 + 纸张肌理。从工程蓝图、机械手册、工业警示标记中汲取灵感。这一版到现在没改过——不是因为我们不想改，是因为客户和市场的反馈一直很好。王雪设计总监说："好的设计不是一次做出来的，是在客户反馈和行业观察中慢慢长出来的。"
设计流程 · 我们是怎么做一个工业网站的
爱科的设计流程分 6 步，每一步都有明确的交付物和评审节点。
需求调研
客户拜访 + 竞品分析 + 行业研究。输出《项目简报》。
信息架构
站点地图 + 用户路径图。跟客户确认后进入设计。
视觉设计
3 个方向首页稿，客户选一个深入。遵守 8pt 栅格。
交互原型
完整 PC + 移动端原型。客户逐页确认。
开发实现
像素级还原。开发和设计联合走查。
上线交付
客户验收 + checklist 50 项 + 安全检测。
您想让我们给您设计一个？免费先看稿
如果您想知道爱科的设计在实际项目中效果如何——先看看客户案例吧。360 个工业企业的官网，每一个都是设计理念的真实落地。看完案例再来聊合作，不会让您白跑。
PRINCIPLES IN ACTION
三个真实案例，看四大原则如何执行
案例一（秩序感）：某客户要求首页放 30 个产品 logo。通用做法是乱摆一气，但爱科用 8pt 栅格严格对齐，排成 6 列 × 5 行，每个 logo 尺寸统一、间距统一。客户说："原来这么多 logo 也能放得这么整齐。"
案例二（材质感）：某重型机械客户的官网，我们给产品图片加了淡淡的金属反光和阴影，给页面背景加了钢材肌理纹理。客户的工程师说："打开网页就感觉闻到了机油味。"
案例三（明黄点睛）：某精密仪器客户的官网，全页 80% 是深灰和黑色，但搜索框、CTA 按钮、选型器标签全用明黄。用户测试显示——90% 的访客能在 2 秒内找到"立即咨询"按钮。
这就是爱科设计原则的价值——不是为了好看，是为了让用户更快找到信息、更快产生行动。好的设计是"隐形的"，用户不会注意到设计有多好，只会觉得"这个网站用起来很舒服"。