如何打造一个有质感的小程序

文|朱顺成映兔视频小程序从上线到现在已经小更新了几个版本了，想想最初开发的初衷真的很简单，就是让用户以更少的成本获取自己想看的内容。虽然，我们的app也非常漂亮。本着这个原则，我们不仅选择了开发小程序，并且在设计的时候尽可能直观的展示内容给用户，减少用户的思考和使用成本。所以最开始的版本只有一个主题列表，点进去就是主题下的视频列表。用户唯一的思考就是对话题是否感兴趣——感兴趣就点进去看视频，不感兴趣就下拉看其他的主题。之后的版本都是在这个基础上不断的优化的。比如，我们增加了搜索入口，以及不断优化视频的观看体验，包括播放视频的时候，其他内容弱化。这样的沉浸式的观看体验，应该是比较不错的设计。

XX 在最新版本中，我们添加了每日特色功能，这对于选择困难的用户来说很友好，因为有时会有很多主题我不知道应该看哪一个。每日选择是我们小编的精心挑选的视频，因此通常不会太糟糕。作为兔子视频小程序的开发者，感觉到小程序开发的友好程度和开发成本真的很低。尽管与HTML相比，小程序的布局和功能是有限的，但基本组件基本上足以用于良好的应用程序，并且体验将优于微信中的Web应用程序。即便如此，在开发的过程中还是会遇到一些问题的。特别是在一开始，对于小程序的开发文档并不是特别熟悉，坑是必要的，例如：最初认为只有100％的方式来实现全屏图片。但后来，我们发现有rpx单位，图像有缩放比例，这非常实用。另外，就是视频页遮罩的渐现的动画。我们浏览了文档并找到了wx.createAnimation，但我想到的第一件事就是用CSS 3实现它。最后，通过实验，我发现这个解决方案是可行的。我实现的想法是通过 transition 和 class 实现动画效果。这也是使用jQuery框架时经常使用的解决方案：通过更改div的类来实现CSS 3动画效果。例如，我们实现了一个自定义Toast提示：

事实上，最幸福的是看看我已经实现的小程序并得到用户的喜欢和肯定。

当然，因为我们的设计师设计的界面更酷，并且有质感，所以它也是第二个参考，这对我们的设计师来说是一个很好的肯定。 （带上你自己的BGM，设计师狂欢节）

体验兔子视频小程序的质感，你会发现原来的小程序也可以很漂亮。