潮汐 App，小而美

2018年初，经过一番辗转，惊喜地获得了潮汐团队的offer，荣幸成为其中的一员。

大多数人对潮汐的第一印象都是「小而美」。潮汐作为一款独立产品，凭借着克制极简的设计屡屡获得 App Store 推荐，也斩获一众奖项。按照官方说法，潮汐是一款大自然声音主题的身心健康应用,在快速繁复的日常生活中,帮你保持专注、减压放松、睡得更好。

 

上手业务，带着枷锁跳舞

设计风格的处理，可以大致分成「创新」或「继承」两种，潮汐属于后者。接手潮汐的设计时，潮汐已经有非常成熟的设计风格，为了维护产品的统一性，设计师必须严格遵守和维护现有的设计规范。在极其固有的风格上进行创作，整体的体验可以说是「带着枷锁跳舞」。

一开始，我花费了大量时间去熟悉和了解设计规范，调整自己的设计风格，确保以往风格的延续；也反复地观看现有页面的设计，学习一些常用的设计手法。

设计规范需要严格遵守的通常有：颜色、字号、栅格布局系统和常用组件。

以栅格布局系统的间距为例，需要结合「亲密性原则」进行使用。通过合理的间距将信息进行分类，打造出清晰的层级，有利于用户获取信息。如 Material Design 中，就有建议的网格数（4、8）。

再以字号与颜色为例，假如设计师与程序员之间没有进行事先约定，在开发过程中，程序员极其可能会「看见一个就写一个」，不仅工作量大，也容易出现大量不合规范的字号与颜色。设计师可以将确定好的颜色、字号规范落地到开发中，例如将颜色、字号等进行命名，程序员便可以调用固有的名称。例如苹果（见下图），字号与颜色都有命名。

案例1: 呼吸模块设计

在接手呼吸模块时，已有保真度极高的原型，因此大部分时间都花在了呼吸过程的动画上。可以看到，整个呼吸动画由三部分组成：圆的放大缩小、粒子运动、背景的高斯模糊。

首先，我在AE上使用「湍流效果」模拟圆本身的贝塞尔曲线运动；一呼一吸之间，圆的放大缩小对应着肺部的收缩与扩张；而氧气则以粒子的形式予以意象，使用 AE 内置的粒子系统做出粒子出现和消失的效果。关于粒子比较有意思的一个设计是，使用 4-7-8 模式时，中间会有「HOLD」的 7 秒时间，这个时候粒子会在屏幕上「乱动」，其实是用到一批「假粒子」进入屏幕并离开。

案例2: 潮汐实验室

当时出品了一批潮汐小程序，为了让使用小程序的用户更方便，在 App 中加入了「潮汐实验室」的模块。

实验室的首页沿用了白+弥散阴影的手法，使用卡片作为载体承载内容；其次在头部加入了浅蓝色的波浪，让页面看上去更加丰富而不失简洁。内页的设计则展示了小程序的主要内容。

案例3:  Android 化

「一稿适配两端」的做法非常常见，但潮汐并没有直接「一稿适配两端」，也并非直接将 iOS 的稿子转化为 Android 稿，而是将 iOS 端稿子作为原型，并认真考察了 Material Design 后，再根据 Material Design 中的 Components 进行 Android 化。而其中值得考究的有两种：一种是与 iOS 较为相似的组件；另一种是 Android 独有的组件。下图列出了一部分我接触较多的组件（列表、卡牌、开关、按钮等未列在其中），图例源自 Material Design：

向诸位介绍几款在工作中接触较多的案例：

以下是 Android 较为独有的：

除了组件以外，还因 Android 特性设计了锁屏、白名单、电量优化功能。

案例4: 运营物料

除了完成两端客户端、小程序的设计工作外，还会接触到不少运营类的视觉工作。包括制作市场图、banner、H5、视频、通稿物料；客户端内的弹框小插图；潮汐 Plus 的字体设计。

结语

虽然我加入团队只有短短的一年时间，但能参与潮汐这款优秀产品的设计，让我感到非常荣幸。其实一款优秀产品的背后，往往有着无法想象的严谨。

很感谢在潮汐遇到的每一位同事、伙伴，他们教会我的不仅仅是工作上的内容，更加赋予了我面对困难生活的勇气。这是我人生中极其难忘的一段工作经历。