产品案例分析.Trigraphy的设计哲学

读这篇文章你会收获什么

  1. 如何利用设计,管理用户对进度的认知。
  2. 如何将两个不同目的的页面更顺滑的连接起来。
  3. 如何通过产品设计让第一次使用产品的用户更快的上手,降低用户的使用门槛。

温馨提示:读这篇文章最好结合Trigraphy应用一起来看。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


思考与总结

1. 反馈与进度

在移动互联网时代,用户的时间正在被以秒为单位的碎片化切割,用户也变得越来越没有耐心。如果一个网站或者App光是打开这个动作就要花费超过5秒的时间,且用户对这5秒的进度没有任何感知,那么用户的感受是我不知道还需要多久才能看到我想要的内容,这种焦虑感会让用户有非常不好的体验。

在后移动互联网时代做产品,要让用户的每一个动作,都能感受到反馈,感受到这个动作的进度是用户体验非常重要的一环。

2. 顺滑的过渡意味着舒服。

用户体验另外一个重要的一环就是过渡动画,好的产品都会给用户的每一个操作导致的界面变动添加顺滑的过渡动画。这个动画也是给用户反馈,让用户感知到自己的动作的执行,动画的效果还能让动作的执行时间在感知上变得更短了。但是动画也不能戏太过,刚刚好的动画给人的感觉才舒服。

3. 降低用户的使用门槛。

对产品的一个新用户来说,产品的一切功能都是陌生的,此时对于用户来说产品的易用性就特别重要,因为可能一个新用户打开产品花了好几十秒,甚至几分钟都没有上手用起来。要么这个产品十分有可能被用户下一秒关掉,抛弃,再想把用户找回来就非常困难了。

设计产品常规功能要尽可能使用用户更好理解的设计语言、界面布局。对待相对复杂的功能可以通过引导的方式让用户尽可能先用起来。用户了解了产品是怎么回事后,才能勾起用户进一步探索产品的欲望。


我的个人公众号:bryanshen

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章