怎么用拼图脚本—微信怎么拼图

作者：傅淏 10年产品总监

编辑：Darren

篇前序：

没预算，没用户，甚至没产品！

不管是游戏还是应用，摆在App开发者和产品运营者前面的第一座大山就是初期获取种子用户到冷启动这个艰辛的路程，也就是最近热门的0－1理论。

一款产品的理念再酷，功能再好，如果在“冷启动”的时候出了岔子，更重要的是，由于目标用户群的错位，我们无法通过意见反馈去进一步的改进产品，调整产品需求。

何况第一版产品通常问题不少，用户拉错了用户，就会一步错步步错。因此，用有效的方法引进高质量的种子用户，就显得格外重要。而这样一个用户，不仅可以充当产品的宣传员，还能为产品开发这提供很好的改进建议。

当你花了大量的推广费用和时间，好不容易招来了一批用户，但用户只是扫一眼你的应用就离开了——你肉痛地看着动辄几十块钱一个用户的获客成本，想着一百万活跃用户的KPI指标，是不是感觉到深深的残酷和无助？研究了无数个AARRR模型，然而在第一个“A"就game over 了！

但这还真不是用户无情。你很难想象，一个互联网应用，对新用户的门槛有多高。

互联网跟传统行业不一样，里面的每一件产品，都与众不同——因为互联网打破了所有天然的闭锁，让所有的产品，不分国度、不分年龄、不分人群，同台竞争。所以，每个产品，要想活下去、活得好，就必须差异化，这就导致了互联网的产品，每一个都是与众不同的。

但这也就导致了产品对用户的高门槛。用户日常生活是不需要学习的，从成年开始，使用杯子、穿衣吃饭、公交买菜，乃至日常熟悉的工作，都没有多少门槛。而一旦进入新的互联网应用，就像是第一次登上宇宙飞船的客人，每个摆设、每件事情都是新鲜的。这么多功能到底做什么的？好用不好用？逻辑是什么？这个从来没见过的图标是什么意思？跟我有什么关系？怎么操作成本最小，会耗费很多时间和流量吗？一般用户都在玩什么？有哪些我不知道的、核心的细节或者诀窍？

新事物所带来的门槛、所需要的动力，加上互联网应用习惯本身带来的“快”的要求，让开发者在享受互联网带来的巨大客源的同时，必须要为用户提供极其快速的、低门槛的服务。这些服务包括：尽快打开应用；尽快交互；尽快得出结果；尽快了解应用；在用户或产品出现问题时，带领用户尽快摆脱迷茫。

本章的目录如下：

l 已知

n 打开

n 对话（交互）

l 未知

n 引导

n 帮助

n 未知与不可控

n 不可控

下面说的已知、未知，都是站在用户的角度，分别对用户已知的、未知的，用户总有一定几率出现的无法控制的情况，以及用户确实无法控制的情况，来说明如何做到“快”。

l 已知

n 打开

用户打开应用或者页面的时候，能够接受的最佳时间在2秒以内。

那么我们要如何做到这个时间呢？

PC端可以采用下面的方式：拼图；先内容后脚本；CDN（内容分发网络）。

1、拼图

应用打开的速度快慢，很多时候取决于通过网络从服务器读取数据（尤其是图片这样比较大的数据）的速度，也就是说，取决于网络是否堵塞。而网络是否堵塞，就像是陆地上的道路交通一样，有一定的几率。图片如果分开传送，碰上堵塞的几率就大；如果放在一起传送，那么遇到堵塞的几率就小。因此，对于需要大量下载图片的应用来说，我们可以把小的图片拼在一张大图上，传送到了客户端，再依次读取。

拼出来的图就像这样：

2、先内容后脚本

客户端需要的内容，主要是内容和脚本。既然只有2秒时间，那么我们可以让客户端首先呈现内容，没有脚本。这样用户无需等待就可以看到东西，而一般的用户也不会在2秒的时间内就急着点击热区（用户也需要一定的阅读反应时间），所以脚本后加载是没有问题的。

3、CDN

内容分发网络需要付费，常用于视频网站的VIP用户等。

移动端内存容量相对小，流量价格更高，因此，除了上面的方式，还可以采用矢量图、启动页的方法。

1、矢量图

移动端的图片，目前常用的一般是两种：矢量图和位图。下面是它们的概念：

矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线。它只能靠软件生成，文件占用内在空间较小，但需要耗费一定量CPU，因为这种类型的图像文件包含独立的分离图像，可以自由无限制地重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

例如下图：

位图：位图图像（bitmap）, 亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。常用的位图处理软件是Photoshop，位图的来源是电脑上手工绘制，或照片扫描上传。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐，有一定的失真（远看还算连续）。内存占用大，但计算速度较快。

例如下图：

可以看出，矢量图体积小，比较适合在网络上传输，可以节省流量和时间。尤其对于移动应用来说，适度运用矢量图，可以节省相对宝贵的流量和存储空间。

对于移动应用，还有一个技巧可以填满应用启动的头几秒：启动页。

2、启动页

初次进入应用，往往要加载大量的图片、数据甚至视频、语音信息。即使已经注册，清掉缓存重新进入应用时，也是需要加载大量的信息。在PC上，可以多任务同时运行，且网速、内存、CPU条件都比移动端好，所以时间很短，且用户还可以跳转到其他页面或者应用去“忙等”。但手机应用不具备这个条件。所以，移动端应用就多出了一个“启动页”。

启动页有做成单页，倒数2至3秒后直接进入应用的，也有用轮播图的方式。轮播图一般是手动去移动，一般滑动完几个页面，2-3秒也就过去了。基本也在用户可以接受的时间段内，只是多了一个操作和阅读时长的选择。

增加启动页的主要目的：一是为了在这段时间内加载内容，另外也是可以利用这段时间对用户进行一些引导。主要是介绍本应用或本次更新的主要内容、亮点；还可以利用启动页进行宣传，或者展示产品的调性，对用户进行情感化引导和塑造。

OK，只描述理论比较乏味，这里面的技巧还是很多的，我们还是举几个例子来具体说明吧！

这是陌陌发布“阅后即焚”功能后的启动页

这组图片由4张轮播图组成，主要是引导用户了解和使用新功能“阅后即焚”。每页上，用标题、描述文字、图片三个要素，同时强调一个主题。4张图片正好拼成一张大图，且核心页面拥有最大面积的紫色背景强调，完整地表达了“这些图片是同一个系列”，还强调了重点。并且我们可以注意到，这些图片都采用了矢量，以减少流量和下载的时间。

我们再来看每张轮播图的细节。

注意每张图都有大字标题和小字的详细描述，这样既照顾到了性急的用户，又提供了详细准确的说明。关键的文字比如时间的长度，还特意用区别色展示。

第一张图片：没有别的细节，就是一个手举的摄像机，配合大字“发送视频”，用户即使采用扫视，也能一眼看明白这个功能首先是上传发送视频的。

第二张图：人物勾勒简单，但是黑风衣和黑礼帽非常显眼地传达出“隐私、隐秘、不愿为人知”的点，加上清晰夸张的火焰，说实话，即使是对文字不敏感的用户，也能比较明确地了解到“这个东西是可以删除的”这个概念。

第三、四张图：同样用简洁、公认的图标展示主题，第四张图最后还落脚到这个功能对陌陌本身定位理念的强化上，成功收尾。

这是QQ浏览器5.2版本的启动页面

这个启动页同样采用了矢量图，不过主题不是单次更新，而是浏览器的亮点描述。同样是采用大字标题和小字描述结合的方式，只是标题描述更简洁、更带有宣传和鼓动的意味。但是图片的表达没有上个例子明确清晰——毕竟描述的是抽象的特征。

这是来往的启动页引导

虽然仍然是4页轮播、矢量图片、大字标题+小字描述，但特点在于强调变化，和漫画式的生动表达。这也是从产品特点出发的：来往之前的数据和反馈并不好，这个时候改版，需要传达给用户的是“我们变好了！”而强调“好”显然比较虚，不容易得到信任，强调“变”，给人的印象就要深刻得多，试想当你走到谷底，往哪一个方向迈步不是上坡呢？坚果小人、亮眼的橘黄，和诙谐活泼正向的漫画表现，也传达出了打破原有格局、积极行动的态度和做法。这一切，都是吸引用户体验的设计技巧。

如上是三张启动页面的部分轮播图，都很有特色

这些特色之间的不同，都源自于产品、用户、传达主题的不同。

前面两张是天猫的双十一宣传图片，采用了漫画风格，和与主题契合的热点人物背书的方式，有一定的故事性、话题性。夸张的效果，鲜艳简单、对比强烈的颜色，以及模拟超级购物中心玻璃尖屋顶的“狂欢节”字样、模拟灯火通明摩天大楼的“11·11” 字样，都契合电商营销所需要的热度、强传播、简单刺激、购物亮点（省钱省心）的要求。

中间的两张是豆瓣的启动页面。豆瓣的用户喜欢的是简洁、清新、文艺，所以这个启动页也不例外。灰色为底，绿色为主色，仅仅将收藏、删除、快进的图标放在页面上，加上文字强调，表明了更新的重点，再在进入应用前最后强调豆瓣的定位。构图十分简洁，焦点集中而有操作感，给人强烈的操作暗示。

右边的两张，则是QQ电影的启动页面。类似黑白电影时代的配色，集中传达出年代感，加上观众专注的背影和电影开场前想象空间无限的白屏，体现出的是对电影艺术的热烈执着的追求，可以看出这里把的是核心用户的脉，跟豆瓣的泛电影类别、文艺青年用户属性是有差异化的。这样的启动页，决不仅仅起到掩饰加载过程、宣传和引导的作用，而是以最短的时间，让用户了解到这个产品的定位和调性，避免了用户的无效选择，增强了对位用户的信心和粘度。

下一节：对话（交互）

敬请期待连载…

作者傅淏，《无漏设计实战体系》创始人，10年产品总监。pmcaff专栏：皓月沧海。

曾获中国最佳移动应用产品大奖等，带领上线产品15个（SNS、App、Game、Study、Music、OA），包括UC系列产品、诛仙战记、巴适公交等。