独立开发周记 156：新主题的设计思考过程

[vulgur]

2026, 0202 - 0208

下楼倒垃圾的时候踩到狗屎了，希望 2026 年狗屎运不断！

本周工作

花了一个星期，极简时钟 iOS 上线了新主题：数字墙。

整个主题的开发是用 AI 写的，用的是 Windsurf 上周推出的竞技场模式，限时免费，所以一个 credit 都没有消耗。但是这个竞技场模式对于开发 iOS 项目来说极大地拖慢了开发速度，因为每一轮竞技（对话）都要新建两个 worktree ，而每一个 worktree 里的 iOS 项目都要重新加载 SPM ，非常非常非常耗时！而且目前 Windsurf 还没有清理 worktree 的快捷方法，只能是开发完后自己手动删除。

之前说了，这个主题是参考了小红书上一个设计（已得到原设计师的授权），在原型的基础上，我又增加了浅色主题、横屏的布局以及计时器相关的交互。作为设计苦手的我，只能是跟着感觉来，整个设计过程中，我经历了好几次内心的纠结。

如上图所示，左边是原版的设计，右边是我做的第一版 demo 。第一版的布局和颜色基本和原版差不多，只不过数字面板更像是浮起来的，试图让 AI 实现原版那种内嵌的效果，但是不知道是我描述不对还是 AI 理解不对，AI 总是把面板和背景搞混。

后来加入了浅色模式和横屏的布局，这两个都是原版没有的，只能靠我自己发挥了。最初的横屏布局只是简单将竖屏布局做了拉宽处理，浅色模式的配色也是让 AI 简单地生成了一套。如上图所示。

乍看一下感觉还不错，够极简，但核心的时间信息放在最底部，用户无法第一眼捕捉到。我就搜索了一下视觉动线模型，学到了一个”古腾堡原则“，于是就对整体布局进行了第一次大幅调整。既然时间是最重要的，那就把时间放到最上面，和日期交换一下顺序。另外去掉了之前日期和按钮区域的背景和边框，按钮 title 从文字改成 icon ，数字面板的边框加入渐变的内凹效果，如下图所示。

整体布局看起来更极简了，但是还有三个问题，一是横屏下中间这个数字面板又长又扁，二是日期和时间离得太远了，三是浅色模式太刺眼了。于是又大改了整体布局，横屏下分为左右两部分，左边显示时间、日期和按钮，右边显示数字面板。另外浅色配色采用了更复古的方案，为了更好地区分小时和分钟的数字，我将二者的显示颜色换成了对比强烈的红色和绿色，如下图所示。

相较于简单的时钟页面，计时器页面有额外的标题、状态和三个控制按钮。标题（如 POMODORO ）和状态（如 PAUSED ）可以直接复用日期和星期的文本位置，但三个控制按钮的布局却成了难题，如果和模式切换按钮一样都摆在底部，显得太拥挤了。于是我就做了很多改动，如下图所示：

1. 横屏布局的左右两部分交换位置
2. 把切换按钮移动到了右上角，这样就把空间都留给了计时器的三个按钮
3. 时钟模式下右下角出现了大面积空白，为了平衡，我就加入了装饰用的点阵图

到目前为止，所有的按钮 icon 都是 SF Symbols ，但我想要实现和字体一样的点阵像素风格的按钮，可我又懒得去找设计资源，就让 AI 直接画出来，没想到 AI 用了 iOS 15 才有的 Canvas 。我查阅了当前 iOS 14 的活跃用户占比，发现该比例几乎可以忽略不计，就把最低支持版本提升到了 iOS 15 。AI 设置的点阵是 7x7 的，可发挥的空间不大，这里花了半天时间才把各个按钮的图案搞定，如下图所示。

最后的收尾工作就是一些细节调整，包括 iPad 适配、添加小组件、增加触感反馈和音效、优化一下颜色和装饰、还有一些杂七杂八的工作，这样一个全新的时钟主题就算完成了。

代码之外

又入手了一台红米 4K 显示器和之前同款的带抽屉的显示器增高架，至此我的桌面组合成了终极体，从此再也不用纠结显示器的横屏竖屏切换，也不用反复转动两台显示器调整角度了。

我这十多年来几乎每周都会鼓捣一下桌面，显示器搬来搬来，转来转去，如今终于不折腾了，因为桌面没有任何空间了，原来不折腾的前提就是毫无选择。