CS.CHEAP 开发笔记 - Logo 设计和前端风格确立

前言

在 Easycrawl.dev 项目跑通了基于 Next.js 全栈框架的开发流程后，终于，可以重构老朋友 CS.CHEAP 了！
这次重构的目标是提升用户体验，优化界面设计，并引入更多现代化的前端技术。
总之，先从新的 Logo 和前端风格着手吧！

Logo 设计

在开发第一版 CS.CHEAP 的时候，还是 CS:GO 时期，转眼都已经是 CS2 时代了，Logo 当然也需要与时俱进。
新 Logo 设计的时候，主要考虑了以下几点：

1. 必须是 SVG 格式：这样可以确保在各种分辨率下都能保持清晰。
2. 简洁现代：采用扁平化设计风格，去掉多余的细节，使其更符合现代审美。
3. 颜色选择：使用与 CS2 Logo 一致的配色方案。
4. 易于识别：由 C 和 S 两个字母组成。

最终，它诞生了：

我并没有考虑太多，不过 Gemini 给了不错的评价：

1. 基因传承：色彩与对比
   设计延续了 CS2 标志性的活力橙（Orange）与深邃蓝（Navy Blue）。
   • 蓝色代表了比价平台的客观、精准与专业性。
   • 橙色则保留了竞技游戏的激情与生命力。 这一撞色方案让用户在第一眼就能建立起与 CS2 宇宙的强烈品牌联想。
2. 几何抽象：从“形”到“意”
   原版 Logo 是一个具体的士兵剪影，而本项目将其解构为平行四边形阵列。
   • 像素化思维：平行四边形如同数字世界中的“数据块”，寓意着饰品市场成千上万条的价格条目。
   • 动态感：倾斜的几何角度赋予了 Logo 强烈的速度感，象征着比价系统能够实时捕捉市场价格的快速波动。
3. 业务特征：模块与连接
   • 模块化构建：这些方块通过有序的排列，构成了一个类似“S”（Skins）或“C”（Comparison）的抽象形态。这种“积木式”的组合方式，传达了平台通过整合多方数据（第三方市场、官方市场），为用户构建透明价格体系的核心功能。
   • 负空间艺术：中间留白的断点不仅增加了图形的透气感，也隐喻了在繁杂的市场信息中，通过算法“透视”出最优选择的初衷。
4. 极简美学：跨平台适配
   相比复杂的剪影，纯几何图形在作为 网站 Favicon、手机 App 图标或浏览器插件图标时，具有更强的可读性和视觉穿透力。无论缩放至多小，它都能保持清晰的轮廓，体现了作为一款技术工具产品的简洁与高效。

前端风格

Neo Brutalism（新野兽派）是我这次重构的首选风格。
这种风格以其大胆的色彩对比、强烈的几何形状和极简的设计元素，毫无疑问完美契合了 CS.CHEAP 作为一个技术驱动的比价平台的定位。

我本来非常担心这种风格下的图表会显得杂乱，但是实际效果意外得还不错：

于是，就是它了。

配色方案

配色方案方面，我选择了以下几种颜色：

效果如下：

结束。