前言

在 2018 年间也接触了一些小程序的设计工作，根据与客户端之间的区别程度，我将它们分类成移植型、二次创新型和原创型三种。

移植型：在 iOS 已有原生界面，根据小程序的规范进行移植即可，大部分交互、UI 都与原生一致。案例有潮汐日历、潮汐呼吸、日课。

二次创新型：在原生基础上，进行一些创新设计。案例有潮汐睡眠。

原创型：完全创新的设计。案例有一只风扇、泡泡印象墙。

移植型案例：潮汐日历、潮汐呼吸、日课

潮汐日历是配合实体日历推出的一款小程序，在2017年推出市面。我接到任务时，需要为此款小程序添加「极简版」，也就是将潮汐的「日帖」移植到潮汐日历中。

潮汐呼吸则是在客户端功能完成不久后移植的。从设计层面看，只是在底部添加了Toolbar，但是前端哥哥却非常辛苦，因为需要写很多的动画（例如粒子）。

日课也是将原生的主页、探索进行移植。

二次创新型案例：潮汐睡眠

潮汐睡眠是基于「助眠」推出的小程序，集合了一些优选大自然声音，以卡片形式展现给用户。拿到的原型也是保真度较高，我主页负责主界面与播放器的UI设计。

根据声音的名称与所选的场景图，我需要绘制动态图标。由于使用GIF，形式上会受到比较大的限制，所以做了一些小的创意点，例如吃串串、风的抽象表达、雨滴落到伞上的抖动、小虫子抖出花粉等。

考虑到用户也会在白天使用睡眠产品，因此设有黑夜模式与白天模式。

原创型案例1：一只风扇

在逼近夏日之际，老板提出一个idea：试试从设计侧与开发侧出发，创作一些好玩的小程序吧。最后他决定了产品方向：推出一款「风扇」小程序。既能贴合潮汐的「白噪音」主题，又非常符合他的幽默精神。于是我开始了拟物设计的探索，找几年前流行的拟物设计风，跑去商场找实物风扇观看。

参考了一些较为日式的风扇产品后，设计了风扇的外形，并使用了轻拟物的手法进行绘制。最后绘制出按钮的两个状态，并制作风扇动画。

整个小程序最难的地方，是开发哥哥写风扇叶子的转动。当切换档数时，开发哥哥需要让扇叶的转动速度进行加速和减速，而非粗暴的速度切换。最后实现的效果非常流畅，开发哥哥赛高！最后再录制风扇的三档声音和按钮声，就完成啦。

原创型案例2：泡泡印象墙

此项目背景是为了探索「社交性」的可能性，是完全不同于以往「声音」方向的探索。弹幕加上树洞，便有了此款「泡泡印象墙」的诞生。颜色上使用了较为大胆（不同于潮汐一贯风格）的渐变配色，并配了两套主题颜色。对陌生人社交来说，最重要的是「破冰」，因此我也提出了增加快捷话语发布的交互。

总结

小程序的移植相对枯燥，但依然需要把每一个细节落实到位；二次创新型小程序，则可以添加一些设计的小创意；原创型小程序的自由度高，但是难度也更大。小程序的设计经历很有趣，加深了对前端知识的认识，也增进了和前端哥哥之间的友谊。