给狮山有你设计一个校园伙伴：狮小铃的诞生#

从狮子山、南湖和编钟开始#

给角色起名字时，我希望她和华农有一些联系，也希望这些联系能自然地融入设计。

“狮”来自狮子山，“小”让名字听起来更亲切，“铃”则借鉴了校徽中的编钟意象。根据华中农业大学学校章程，学校徽志的设计与楚国编钟、传统农具耒耜有关。南湖的水色、校园里的绿色，也成为了角色配色和背景的灵感。

我给她设计了湖蓝色长发、圆圆的狮耳、蓝色裙子和琥珀色眼睛；白色学士帽发夹呼应狮山有你的 Logo，绿色书袋和简化的编钟吊坠，则是留给校园生活的一点小细节。

狮小铃是为狮山有你设计的校园助手形象，并不是学校官方吉祥物。我的想法很简单：她像一位熟悉校园的小伙伴，在大家查询信息时陪在旁边。

把她画得更像一帧动画#

最开始做出来的形象比较偏精致的游戏立绘，头发、阴影和高光都比较复杂。看了一段时间后，我觉得它和我想要的感觉还有距离：校园工具里的角色，可以更清爽一点，也更适合缩小后放进不同的画面里。

所以后来重新调整了方向：用更清晰的二维线条、简单的发束和大面积色块来表现人物，阴影尽量保持明确。发色和裙子的颜色也统一下来，去掉过于显眼的异色发束和多余装饰，让角色更接近日式日常动画里的 Q 版形象。

这组人物素材使用 AI 辅助生成，再经过多轮调整。最后保留了招手、走路看手机、抱书指引和环湖慢跑四种动作，以及日间、夜间两张头像。每张人物图都单独保存为透明 PNG，方便之后在不同场景中组合。

把界面变成可以组合的贴纸#

角色确定之后，还需要让画面和 App 本身产生联系。狮山有你平时最常被用到的，就是课表、课程提醒、成绩查询和校园服务，于是我围绕这些功能，做了四张动画风格的 UI 控件贴纸。

这些控件参考了 App 中的功能，但画面是重新绘制的设计素材。课程、时间和成绩数值使用的是示例内容，用于说明布局，不代表真实用户的数据，也不等同于 App 当前的实际界面。

头像和 UI 都是独立素材：头像可以放到日间、夜间图标的设计里；控件则可以按标题图或搜索结果的空间大小，自由调整位置。

为搜索结果留一片南湖#

搜索结果素材需要承载角色、标题和功能展示。如果背景本身太复杂，缩小到手机屏幕上，主要内容就很容易挤在一起。

因此我准备了一张浅湖蓝的底图，把狮子山、南湖水纹和校门轮廓简化成淡淡的线条，集中放在画面边缘，中央留出空间给后续排版。它更像一层安静的背景，也能在不放文字的时候让人联想到校园。

另一张背景则参考了一张校园实景照片，改绘成日常动画风格。为了适合作为公开展示素材，画面中移除了行人、车辆、车牌和建筑名称等信息，只保留建筑、树木和道路的场景关系。

真正让我返工的，是安全区域#

开始做产品页标题图时，我只盯着整张画布看，觉得 Logo、标题和人物都放进去了。但把素材放进 App Store 的手机预览之后，问题就出现了：画面会根据展示位置裁切，顶部还有系统控件叠加。放在边缘的人物和文字，有的被裁掉，有的被挡住。

后来我重新看了 Apple 的素材资源最佳做法，又对照实际的 PXD 模板检查构图。模板里的 Art Safe Area 给了我一个更直观的边界：需要完整看到的内容，要优先考虑放在安全区域里，再用实际预览确认效果。

以这次使用的 5244 × 2950 通用模板为例，它的安全区域是 1402 × 962 像素，而且位置偏上。最初的校园背景里，建筑太大，安全框只截到了局部；后来我把镜头拉远，让整栋建筑尽量落在框内，外围再补上道路、树木和天空。

这张图是我根据当前模板做的安全区域核对示意，不代表所有设备和展示位置都会采用相同的裁切方式。实际组装时，我还是会继续用 App Store Connect 的预览检查。

为什么最后改成 PXD 分层#

一开始，我尝试直接生成完整的标题图和搜索结果图。它们能快速展示大致方向，但当我想把角色缩小一点、调整 Logo 和文字的对齐方式，或者为安全区重新安排画面时，就需要反复改整张图。

最后我把素材拆开：人物、头像和 UI 保存成透明 PNG，背景单独保存，再放进 Pixelmator Pro 的 PXD 模板中组装。标题文字、Logo 和各个贴纸都可以作为独立图层调整。这样继续修改时，能保留画面里已经确定的部分，也更容易对照安全区检查。

做完之后，设计目录里也积累了不少旧版本、预览图和重复导出。我把旧稿和中间素材做了本地归档，用 .gitignore 控制后续进入 Git 的设计文件，并保留当前的 PXD 和定稿源素材。这里处理的是当前版本的跟踪范围，已有 Git 历史里的大文件仍然保留。

这次从一个小小的角色想法，走到了人物设定、组件制作和商店素材排版。对我来说，最有意思的部分不是一次生成出一张满意的图，而是在一次次预览和调整里，慢慢找到适合狮山有你的表达方式。