从代码到视觉：设计 Gallery 项目展示海报

🎨 视觉背后的故事

在完成在线照片展示廊 (Gallery) 的初步版本开发后，因为要同步到 Github 做项目介绍，这个时候除了代码以外，也需要一些能撑起项目的“视觉包装”。我个人觉得设计从模仿开始，所以我就决定先复刻 Apple 风格来制作样机海报。

🛠️ 工具选择：从快捷到定制

一开始，我尝试使用 Shots.so这种在线工具来快速生成，没想到聪明反被聪明误😈，想要快速生成却耗费了我好几个小时，也没做出来。。。

• 布局限制：Shots.so 的预设布局虽然精美，但很难自由地将浏览器（MacBook）和手机（iPhone）按照我理想中的层叠关系或者同一张画布里摆放。
• 开放度受限：Shots.so 确实能秒出样机图，但其固定的排版模式压缩了设计的发挥空间。

1. 调配 iOS 风格弥散渐变

为了模仿苹果风格高级的“撞色”感，我通过添加一些圆形色块，而后是借助 Layer Blur（层模糊） 手工“晕染”出来的。

• 配色方案：选择了苹果常用的极光配色（烟粉 #E0C3FC 、浅天蓝 #8EC5FC和薄荷绿 #C2FFD8）。
• 叠层大法：
  • 在亮底色 #F5F5F7 背景上绘制几个不规则圆圈。
  • 给色块添加 2000 数值的 Layer Blur，让它们自然融合。

2. 多设备样机排版

在 Figma 中，我使用了更高自由度的样机组件，手动调整电脑与手机的层叠与透视关系：

• 视觉重心：MacBook 居中偏后，iPhone 放在右前方，形成深度空间感。
• 细节打磨：为样机添加了微弱的 Drop Shadow，模拟设备悬浮在光影中的效果。

3. 构图排版

在构图上，我选择了垂直对齐的经典布局，由上至下引导视线：项目图标 -> 主标题 -> 副标题 -> 样机展示。这种结构能让访客第一眼通过图标建立品牌认知，随即被文字抓住核心价值，最后在样机中看到实际体验。

• 字体选择：主标题使用了 SF Pro Display (Bold)，副标题则使用了 SF Pro Text (Regular)。
• 文案思考：Slogan 选用了 Home for your memories.。句号赋予了短句一种“定格感”，就像按下快门的那一瞬间，让“记忆”这个词有了分量。

🚀 最终效果

其实这次也是我第一次尝试 Figma，虽然它声名在外，但我一直没使用过也没学过，不过可能因为以前有 PhotoShop 的基础，几个小时也大概就能上手了。不过要是想更专业的话，还得是多花时间琢磨一下才行🌟。