我尝试用《马拉松》的风格，做了一个信息展示网页

本文系用户投稿，不代表机核网观点

⚠️ 未经作者授权禁止转载

说实话，很多机构类网站在视觉层面给人的第一印象，确实有点“太务实”了。功能没问题，结构也很清晰，就是在视觉体验上稍显传统。 
真正让我感兴趣的是：怎么把这些日常、甚至有点枯燥的工具，做得更吸引年轻用户。做后端越久，我越确信技术早就不是瓶颈，真正要发力的是前端体验（别再怪用户了，他们没错），否则用户还是得不到想要的东西。
这次是一次临时起意的尝试，随手打开了某金融领域相关机构的页面。

这是我很熟悉的机构，对股市也举足轻重。目标很简单：把它做得更好看。功能先放一边，我想帮领导更主动地塑造品牌，也希望年轻人对这些内容产生兴趣。
先说明：我这次复刻的是Marathon游戏的首页。那种开发者称为 Graphic Realism 的视觉风格深扎瑞士平面设计（Swiss Modernism）的根，本次所有创意灵感都来源于此，向 Bungie 的设计师们致敬。

瑞士风格常见元素：网格系统、无衬线字体、非对称排版、极简留白

进入页面，首先映入眼帘的是全屏滚动视频，左侧一条红色侧边栏，顶部一条导航条，品牌标识放在左下角最醒目的位置。视频来自 2017 年官方纪录片《辉煌中国》，现代与宏大感兼具，完美贴合主题。视频能在首屏快速抓住注意力——就像 Gen Alpha 写作业得同时放手游《地铁跑酷》一样。我用 B 站下载，再用剪映去掉水印并压缩画质，加入静态封面做首帧优化。

配色方面，我直接用官网同款红做“品牌色”，搭配黑白灰。红色是我国文化里的高频符号，也是 K 线上涨时的颜色，必须用。稍微调暗一点，避免过亮，同时保留赛博感——简单直接又抓眼球。
左侧条纹图案在 Figma 里自己拼的，一些小设计元素：

北京 & 上海：中国经济双心脏，对我也最有意义。
条形码注释：“TRADING SERIAL NO. XX101992”——机构成立于 1992 年 10 月。
CYBER SECURITY 编号：官网的“京公网安备”数字，纯做视觉元素，这里不能用真号。
整体图案要未来感 + 难以一眼看懂，勾起好奇心。同一套抽象符号也延伸到顶栏里的圆点、箭头，方括号则增加了几何味道。

往下滚到第二屏，几何语言继续。所有面板都是等宽正方形，只是风格不同。把前两个方块合并成干净的标题区；红色块里的抽象纹样与 Marathon 页面呼应。

新闻卡片我花了点心思。标题小字在上，下面是一句摘要，语气最好用命令式而非简单描述，给人一种“系统在高速运转”的感觉。封面图全是 Midjourney + ChatGPT 协作生成的。
官网常见的领导活动照当然能继续用，高清大图当封面足矣。但考虑到肖像权，本项目没用。对于政策解读类内容，抽象现代的插画反而更友好。

我不是说所有网站都该像科技公司一样炫酷，而是想表达：一个页面的视觉基调是可以定出来的，从而让后续的图像、插画、内容展示有更统一的调性。比如建筑可以换个更别致的视角拍，绿色植物可以表现新的生态主题，施工现场可以传达“更新中”的状态。 以下是我用的一些 Midjourney 提示词示例：
brutalist web design merged with swiss typography, large sans serif headers, ultra-minimal layout, black and white dominant, abstract shapes, rigid grid, functional yet artistic interface
an abstract minimalist visualization of interconnected pipelines representing carbon, water, and pollution rights trading markets, clearly differentiated by subtle color coding (blue for water, gray for carbon, green for pollution). Pipes elegantly intertwine, symbolizing systematic integration. Clean background, refined geometry, soft ambient shadows, professional editorial style, minimal, sleek
High-resolution realistic photo of copper wires and aluminum ingots in an industrial warehouse, warm lighting, detailed textures, clean metallic sheen, shallow depth of field, cinematic photography, professional marketing style
剩下的页面就留给您自己探索吧。总体策略就是简单聚焦：行距、字体、线条、比例都保持克制。内容要足够让人知道“这网站干啥”，又留出呼吸空间，让视觉表达自由生长。
https://csrc-concept.vercel.app/
目前仅支持电脑浏览，没有手机适配。
🚨 保护声明
这个页面是一个完全个人的设计展示，和任何机构都没有合作或隶属关系。页面内的内容、样式、图形，仅作视觉呈现练习，不涉及实际服务、不具备任何权威性、也不提供任何投资相关建议。希望大家以轻松的心态看待这个项目，如有转载请注明出处，避免误用。