142

做一个很难的小程序是怎样的体验?

 6 years ago
source link: http://36kr.com/p/5096382.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

做一个很难的小程序是怎样的体验?

范怀宇·2017-10-09 10:23
聊一聊做一个技术上够有挑战的小程序,是怎样的一番体验。

“小程序能做什么样的产品?”

这可能是我被问到最多的关于小程序的问题。通常我会说:理论上,小程序能力还挺完整的,大部分 Web 可以做的产品,都可以落地。

但理论终归是理论,唯有实践出真知。

正好,前段时间我们在轻芒做了一个特别不小程序的小程序。这也许是目前小程序中,交互最有特色,实现最有挑战的小程序之一了。开发过程中,我们碰到了很多困难也积累了不少有趣的经验,于是,我开了这个坑,整理了一些心得体会,聊一聊做一个技术上够有挑战的小程序,是怎样的一番体验。

v2_fad0809b080b44608f60655754469d34_img_000

我们的实践,源自于研发 轻芒杂志 2.0 小程序版,如果你还没用用过,可以直接在微信中搜索 轻芒杂志 就可以体验啦。

轻芒杂志 2.0 是我们对原有产品的改版,核心是围绕内容展开的。在 1.0 我们把从各个应用中收集到的优质内容,重新按照兴趣组织通过算法持续推荐出去,在此基础上,2.0 更多的引入了人的推荐,通过人可以进一步挑选好的内容,并且,通过马克操作,把内容中最精华的部分摘选出来,让好内容也能适合碎片时间来阅读。

为了更好的表达内容上的不同,我们也特别大胆的设计了整个产品架构,尝试创造了很多不一样的交互体验(当然,有的地方步子迈的有点大,不少实现略显粗糙,还在持续改进),并且首选了小程序平台来落地产品。

v2_bfa61b5043644d17b1433b1b9e490a98_img_000

当我们把更丰富的内容、更精细的交互带到小程序上,带了意想不到的技术挑战。我们通常会说,这个产品做起来很难,但难这一个字,背后有着丰富的涵义。

开发之难,可能来自于:

  • 如何让产品有出人意料的功能

  • 如何让产品性能更为卓越

  • 如何让产品更精细,更稳定

  • 如何让开发效率更高,更易于维护

总结成一句话,就是开发困难的东西,都是在挑战平台的极限。需要用到的技术不是显而易见或者是最通用的解决方案,这时候需要对平台有更深入的探寻和思考,才能找到最优的答案。

做一个很难的小程序是怎样的体验系列,会围绕这个话题来展开(请原谅这个土鳖名字,我实在想不出来更好的了,总不能叫小程序开发精要吧...)。我们做轻芒杂志的时候,走到了小程序中一些鲜有人去的地方,我想整理这些开发经历,加上我自己对小程序设计的看法,来一起聊聊小程序在功能、设计、性能优化上的一些特点、挑战和解决方案。

v2_723f4679580d4ea397b6e7328ad9dd69_img_000

言归正传。

这篇想聊的,是在小程序中探寻可行性。如果一个功能如何实现不是显而易见的,往往就需要花大量的精力去寻找解决方案,这就是对可行性的探寻,它往往会耗费大量精力而没有产出,这也许是产品研发中最艰辛也最有趣的地方了。

单看客户端开发,可行性往往由平台特性所决定,这其实很容易理解,毕竟客户端开发是在他人构建的沙盒中进行,无法替换,只能探寻。

在类似 Windows 这样的传统客户端,探寻可行性需要在无数种可能中寻求最优解。这些平台提供了海量的 APIs,拼凑一种可行的方案也许不大困难,但想再竞争中脱颖而出,就必须要找到那个最优解。而这个方案,可能会用到藏匿某个 APIs 背后那个鲜为人知的用法,这也就是为什么传统客户端开发,往往需要非常丰富的经验,需要对平台特性有深刻的理解和实践。

而在小程序上,可行性的挑战来自于寻求唯一解。全部 APIs 放眼一望就看尽了,似乎能做什么不能做什么太显然,要想实现一些看似不可能需求时,往往不是把一条路探到底,而像在走迷宫,看上去都是死路,不能硬闯,需要巧妙结合起来各种路线,很有可能找到一条通抵答案的路。

v2_005afdb7cf614400bc14463f00036f96_img_000

做轻芒杂志中,这样的案例有不少,我记忆最深刻的,是对文章马克功能的实现,很能体现在小程序上探寻可行性的过程。

当时,产品的需求是这样:

马克操作的简便性,必须和截屏一样,用户手下去再起来就完成了。在精准性上,需要比截屏更进一步,并且不需要对着放大镜拖着小滑杆一点一点抠。

最后,在 2.0 版本的现实效果是:

打开轻芒杂志进入任何一篇文章,长按文字,吸附选中当前的句子,像推动游戏摇杆似的上下搓动,可以快速调整需要选择的句子和段落,然后,放手就成了(效果如下图)。

v2_64b15d44950341e4a3a9e389cb237dbe_img_000

看上去,还比较接近当时的需求,但回想整个过程,其实非常曲折。

最初听上去这个需求觉得应该不是太难,毕竟在 iOS/Android 上,一股脑就可以想到很多可行的方法,比如:可以组合控件、可以直接从排版层(Layout)来控制、抑或完全自行排版,等等。

但落地到小程序上,就傻眼了,所有的思路一下被堵死,因为:

  • 小程序缺少对界面信息的获取方式,即使新增了接口,也很难精确了解界面状况,进而动态的调整交互;

  • 小程序能监听交互事件的方式非常局限,不仅事件少,还灵活度差;

  • 无法获得排版信息;

  • 直接绘制?Canvas 官方都不推荐了,因为真的设计的太糟糕没法用;

  • 各种 Bugs;

怎么解决?像传统方式一样,扎进 APIs 堆里往底层挖,显然不大好使。唯一的策略是跳出单纯的技术策略,一群产品和工程坐在一起,看技术上有什么能用的,然后一起讨论这技术能搭配怎样的设计,然后修改设计,编码尝试,不断迭代。

整个场面类似于:

(抱着头)什么?小程序上想做这个?!你疯了吧!就那么几个 APIs 你让我怎么做?什么?我最厉害了?!好吧,让我想想看。

… 一周后 …

(咬着牙)文档我都翻烂了,好像有一种方式是可行的,但不大确定,我要试试看。来吧,再说一遍我最厉害!

… 一天后 …

(含着泪)你看,我真的实现了!我果然最厉害!

... 一小时后 ...

(锤着胸)为什么会有这样的 Bug!一定是你姿势不对,你看我操作!... 怎么还不好,一定是你手机坏了!我给你扔掉了。什么,你这台是 iPhone X?我的肾去年就卖了一个,我卖不起了啊!

直到最后,倒腾出了这个方案。大抵是:

  • 发挥数据结构的力量。既然动态捕获不了精确的界面信息,就提前把内容打散,拆成段落、句子、词,映射出一个比较复杂的控件树,这样只要控制每个控件的渲染,了解控件在界面中的信息就够了;

  • 用基本的交互事件来模拟高阶的交互事件。小程序的高阶交互事件(比如长按、滑动)Bugs 太多,只有用基本事件(比如:点击、结束点击)来模拟才能绕过;

  • 修改设计!通过调整成按句子选择、模拟摇杆操作,绕开精确控制的必要性,不仅简化了实现,在用户体验上也更为流畅;

总结一下。就是小程序提供的 APIs 还是比较有限的,解决复杂的问题,不仅需要在技术上反复探寻,组合不同的 APIs,还需要结合调整产品、需求来迎合小程序 APIs 的特点,才可以落地更为理想的产品方案。这也许,是在小程序上做到各种惊艳体验的唯一办法。

v2_53138abd3d4a441fbe975e08797af533_img_000

在写这份初稿的时候,Apple 的新品发布会正在直播,每个人都在等待 iPhone 8,以及 One More Thing 的 iPhone X(可见这稿拖了有多久...)。在这个行业最快乐的事情,就是可以去不断接触这些新平台新技术,把新的想法用新的方式实现了,创造更有趣的产品。

如果你喜欢研究算法策略,欢迎和我们一起来琢磨,还有什么办法可以更好的组织和推荐高品质内容;如果你喜欢看到产品像工艺品样在自己手上诞生,欢迎和我们一起来继续改进轻芒杂志小程序,以及正在开工的轻芒杂志 iOS、Android 客户端。

本文作者:

范怀宇,轻芒联合创始人。邮箱: [email protected],期待你的加入。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK