CASEME 壳壳研究所

一、为什么做这个

定制手机壳这件事，对普通用户其实是个黑箱。你在手机上挑完图、付完钱， 直到快递到手之前，你都不知道三件事：印出来到底什么样、 图案会不会被摄像头挡住、这些选项加起来要多少钱。

我当时想验证的假设很简单：这三件事，用网页就能全部摊开在屏幕上。 不需要后端，不需要模型，先把流程做透明。

二、我做了什么

一个能从头走到尾的定制流程：

• 6 个页面首页 · 灵感案例 · 定制页 · 定制指南 · 我的设计 · 登录与个人中心
• 7 步流程选机型 → 挑工艺 → 选底色 → 加图案 → 调位置 → 看价格 → 存草稿
• 45 个图案配 9 组配色，全部是可换色的矢量图形
• 实时预览改任何一个选项，手机壳当场重绘，不需要等
• 本地存储草稿、购物车、收藏、我的设计都存在浏览器里，关掉再打开还在

定制页是核心：左边操作，右边是一个手机壳的实时渲染， 图案可以拖动位置、缩放、旋转、镜像、平铺。还有一个图案编辑器可以自己拼。

三、最关键的一个取舍

这个站里的所有图案、所有手机壳预览、所有案例图， 没有一张是图片文件 —— 全部是浏览器现场用 SVG 画出来的。

当时的考虑是：如果图案用现成的图片素材，会立刻遇到三个问题 —— 图片文件太多、加载慢；换色只能重新出一张图；放到 3 倍屏上会糊。 而如果把图案写成「一个函数，输入颜色、输出图形」， 这三个问题就一次性消失了。

代价也很直接：图案库能有多丰富，取决于我画得出多少。 用图片素材的话，网上找一百张图案是一下午的事； 用代码画，45 个就是 45 段绘制逻辑。这是这个方案真正的成本。

四、先定系统，再写页面

这是这次最有用的一条经验。 开工之前我先把设计系统写成了一个文件：颜色变量、字体、间距、按钮、卡片、表单、 以及一份「已经有哪些通用类」的清单。之后每写一个新页面，先查这张清单，缺什么补什么。

结果是六个页面长得很像一套东西，而且改配色只要改变量区那几行。 如果一开始就一头扎进去写页面，六个页面会漂成六种样子， 最后再想统一，成本比一开始定规矩高得多。