作品集节选:BitBlueClock
BitBlueClock 是一款采用浅色简约样式设计的时钟应用,在功能和结构上参考了 OneUI 的 Clock 应用程序。
BitBlueClock 共有四个功能,Alarm(闹钟)、Clock(时钟) Stopwatch(秒表)、 Timer(计时器).。
为了保持 BitBlueClock 足够简约:
每个功能都与页面绑定,通过底部导航栏切换不同页面。
使用浮动按钮承载主要操作。
保证界面层级不超过 2 层。
Font
BitBlueClock 在标志设计和界面设计中统一使用 DM Mono 字体。
Color
BitBlueClock 界面设计中用到的全部颜色。(根据使用面积排行)
Alarm
在 Alarm(闹钟)页面点击 FAB(浮动操作按钮)可以新建一个闹钟。新建闹钟和编辑闹钟独立存在于同一个界面(如中图),只有通过 FAB 和长按已经存在的闹钟才可以进入。
新建(编辑)闹钟的页面通过滑动的方式选择时间。(应用内统一使用 12 小时制)在下方是星期选择,分别是周日到周六。在上方可以更改闹钟名称,默认为 Untitled。底部有关闭(取消)和保存按钮。
当添加多个闹钟后(如右图),每个卡片会显示闹钟的信息:名称,工作时间,工作星期。在卡片的右上角会显示蓝色像素点表示闹钟被激活。(单击卡片可以快速关闭或激活闹钟)
Clock
Clock(时钟)页面默认为空,顶部显示系统时区的时间、星期、日期、月份和年份。点击 FAB 进入 Add Clock(添加时钟)页面。
在添加时钟页面,可以通过顶部搜索栏搜索城市,也可以直接在列表中点击添加。(在添加时钟页面 FAB 同样担任主要操作即取消)。
Timer
在 Timer(计时器)页面可以添加多个计时任务,与前两个页面不同,计时功能较为简单,所以单击 FAB 添加后是通过在卡片内滑动选择时间开始任务的。
计时任务同样使用卡片展示,卡片内顶部为时长,底部使用蓝色进度条表示进度。右侧图标用于执行暂停,开始和重置等操作。
Stopwatch
Stopwatch(秒表)页面通过 FAB 完成所有操作:开始、计次、暂停和重置。
关于 BitBlueClock
BitBlueClock 在功能和结构上参考了 OneUI 的 Clock 应用程序。
BitBlueClock 采用 CC BY-NC 4.0 协议授权,允许非商业用途转载,但需署名作者并注明来源。
这个项目是我昨晚整理 Figma 草稿时发现的,但因为完成的时间是去年十月份,所以灵感来源和参考都找不到了,如果以后想起来了再补充上吧。
BitBlueClock 算是我真正意义上的第一个界面设计作品,在此之前我没有过从零开始设计应用程序的经验,都是使用 Material You 的组件库堆来堆去。
BitBlueClock 并不完美,甚至是不完整。例如没有设计更改闹钟铃声的功能(本来是想过添加在星期选择下面的,但为了保持界面层级,最后还是没有加)。在编辑闹钟页面中的星期选择和闹钟页面中的星期选择设计不一等等(在编辑闹钟页面中星期选择被卡片包裹,同时没有对字重进行更改,所以一时会分不清白色是选中还是未选中)。
这是我第三次在 Substack 上发布文章,结构很混乱,用词也没有标准化。写完后再看一遍真想删掉重新写,可我太懒了。
感谢 Ruixi 给我分享搞笑视频让我在文章创作时有好心情。







