03 | 产品案例分析·Trigraphy的设计哲学

Trigraphy 是一款图片处理应用。它不同于美图秀秀那种传统意义上的图片应用，没有磨皮或者美白瘦脸之类的效果，而更像是一个艺术工具。它会把照片变得强烈的风格化，加上很多艺术的元素，看起来更像是一个艺术作品。

Trigraphy 值得分享的产品设计方法和原则共有三点。

第一点：利用设计，来管理用户对于进度的认知

打开 Trigraphy，启动屏上除了 Logo 之外下面还有三个框，这是占位符。当应用完全打开之后，可以看到这三个格子里面填充了本地的图片。

看起来，结构已预先在启动时完成加载了，第二步才把这些内容加载到结构中，而实际上，启动屏上三个框是画出来的。对于一个 App 来说，点击它的图标打开应用开始加载，在完成加载之前，用户都没有办法参与。加载的过程究竟需要多长时间，用户没办法预期，这个过程对用户来说是失控的。

通过以上的设计，加上一些看起来是加载过程的反馈，这就管理了用户对于加载进度的认知。

举一反三，在所有产品设计的流程里面，我们都要去思考：如何保持对用户的反馈，让用户对系统有掌控感。

第二点：如何将两个目的不同的页面更顺滑地连接起来

打开 Trigraphy 之后，界面上有一张大的图片，下面可以看到本地的相册。这个页面的主界面像是一个画板，底下的照片是用户准备处理的素材，好像是用户调色盘一样，这是典型的工具操作页面。

这时，如果向上滑动这张照片，下面的部分会收起来，整个页面上变成一个图片的内容流，上面是各种用 Trigraphy 处理过的照片。也就是说，通过这样的操作把原来的工具操作页面，变成了一个信息流结构。

这是一个很聪明的交互设计，通过一个动效将两个页面的元素平滑地连接在一起，就避免了生硬的页面切换。

第三点：通过一个随机效果设计去区分不同级别的用户

在用 Trigraphy 处理图片的过程中，可以看到有几个不同的艺术效果可以选择，每个艺术效果下面都有一些对应的参数，用户可以自行调整。每个艺术效果的图片上也都有一个筛子，当用户点击时，应用会自动帮用户选择一个参数组合。

全新的用户进入应用后，通过点击筛子，可以立竿见影地看到这个 App 可以做什么，而无需费心调试参数。

当新用户不断按这个筛子，去随机调整参数的时候，会对应用效果有一个比较清楚的预期。此外，这个操作还会勾起用户进一步探索更高级参数设置方法的欲望。

平时在设计用户体验的时候，产品经理需要去注意区分不同级别的用户，不同的用户对 App 流程和功能的了解是不一样的。产品设计最好可以帮助那些第一次使用这个 App 的用户设计一个门槛非常低，可以直接上手的功能通路。

!

戳此获取你的专属海报