如何设计小程序?送你一份超详细设计指南设计达人

最近在工作时发现了一件很有意思的事情,不知从何开始,国内外的设计需求分化非常明显。国内的公司在选择产品平台时,从几年前的PC端网站,到如今已有大半的客户考虑从小程序做起了。然而国外的创业者仍然以网页为主,要说变化,大抵是在需求中多要求了响应式设计,以更好地适应桌面与移动双端。

所以,今天我们无论坐在这里怎样讨论小程序的优劣得失,都不可否认的是,小程序确实给国内市场带来了显著的影响,而且人们已经逐渐接受,在产品初期,小程序是一个值得考虑的平台。

但是到底小程序的市场是一片大好,还是只是一场危机四伏的狂欢?我将在本文中尽量以客观的角度阐述,希望能够给到各位设计师一些思考的方向。

同时,这几个月来我参考了近100款小程序的设计模式,保留了500张截图和超过10分钟的录屏作为分析素材,来帮助那些想要迈入职场的设计师们,更好的上手小程序设计,不为信息和技术所桎梏。

01.开发成本、开发周期不一致

从开发成本看,小程序和APP有较大的区别。APP开发需要两个版本来适应不同操作系统的手机,产品开发周期长,开发人力投入多,因此开发成本高。而小程序只需要根据腾讯提供的开发平台就能进行开发,无需考虑手机操作系统的区别,一次开发就能适配所有的机型,开发周期短,开发人力投入少,因此开发成本低。

一款App从提出需求到上线,通常的开发周期是321原则,即开发3个月,测试调整2个月,试运行1个月。而小程序开发周期在2周左右,甚至功能简单的10天内即可上线使用,所以是一种相对快速高效的模式。

02.App需要设置大量的数据埋点,而小程序则不需要。

除了已经封装好的数据监控点,运营人员还可以自定义分析事件,这几乎是一个可以达到“营销平台”级别的分析系统了。

同时,简单明了的看版系统,也非常节省业务人员的数据清洗成本,同时,最大程度的避免了开发人员由于机械重复性的埋点工作而导致的主观漏采与错采现象,这也是小程序的优势所在。

01.具有社交裂变属性

02.垂直领域头部

针对细分市场的小程序也容易受到传播,比如汽车类小程序有多个排名靠前,用户已经把小程序当做选车、购车、用车的重要入口,因为属于低频应用,没有必要下载一个app,如果切入的早,小程序场景的便利性就容易使其升到头部。

03.高频场景唤醒产品

04.不适合作为小程序的产品——工具类产品

2.工具的理念和小程序的理念非常一致,都是即用即走,没有任何冗余的操作路径,也不占用大量的内存。

3.但是从产品的角度而言,过于简单与高效就意味着更加难以变现。所以企业应该把核心功能放置在小程序,附件功能依旧放置在App中,从而实现从小程序向App端倒流,小程序也有效弥补了工具类App的社交属性不足的缺陷。

写在前面:

其实在张小龙的嘴里,我们已经得到了答案。他对于小程序的几项基本原则已经足以说明问题,比如其中的一项就是“用完即走”,其实这不仅仅是张小龙给到的小程序的定义,而是小程序本身拥有的属性。在现代这个时代,用户的注意力被越来越分散,我们很多的设计其实都是为了缓解用户焦虑。

01.小程序的用户路径必须单一

App的功能点可以很多,但是小程序的用户路径必须单一。

当然,这句话只符合想要入局的中小型企业,在建立小程序的初期,没有额外的流量渠道,那么最好的留存用户的方式就是让用户能够高效的解决问题,对应到小程序的框架设计,即是简短高效的用户路径。

02.良好的一次性使用机制

1.设计一次性引导机制。

在用户第一次使用小程序时,一些必要的提示是提升用户体验的关键因素。

2.减少特殊的交互模式的设计,必要时要进行足够的引导。

运用用户更熟悉的交互模式,更能让用户拥有良好的体验,更快速的完成整个路径与流程。

03.减少动态设计和装饰性元素

同样这个原理只适用于刚刚布局小程序的企业,而不适用于大厂的小程序设计。但其实在App中,为了凸显品牌调性,动态元素和装饰性元素是一定会出现的。品牌调性几乎是App设计的一个非常重要的环节。

这并不意味着小程序中的品牌调性不重要,而是说在某些环节中,良好的交互体验比品牌调性重要的多。

04.页面扁平化

即减少页面跳转,能不跳转就减少跳转,跳转新页面会增加用户适应新页面元素的成本,同时小程序的页面层级过多,会让用户感觉到繁琐焦虑。这个方法可以缩短用户触达产品的路径,也是小程序用来减少用户干扰的重要手段。

这样做的好处就是让用户对小程序的架构有更全面的理解。用户在较少的跳转路径中,始终清晰的知道自己处在小程序中的位置。这也是增加用户对于产品安全感的一种方式。

05.用选项和自动填充代替输入和表单

在小程序初期,还未拥有悬浮窗功能。这个时候的表单输入对于用户和产品来说简直是噩梦。比如用户需要输入一个信息,而这个信息储存在手机中,那么用户就需要中断当前操作去查看信息。再通过其他的方式回到目前的操作填写信息。在此过程中,很有可能由于操作过于繁琐而丧失客户。

在其他的小程序对比中,我们一样可以发现类似的在用户体验上的差别。

有一次一个朋友来向我咨询关于他司电商小程序转化率如何提高的问题,我便运用了这个理论,去给他们的产品做了一个梳理,最后切实的获得了数据上可观的提高。

06.减少等待,反馈及时

另外一种加载状态同样至关重要,即“预加载状态”。预加载是一个老生常谈的话题,如果一款产品没有设计预加载,会给用户心理造成很强的不安全感,这点在小程序尤为明显,所以设计预加载场景是提高用户体验至关重要的因素,尤其针对一些网络状况不好的用户。

其中以百度云盘的尤为出色,他的预加载模式是动画效果呈现的,可以让用户清晰的了解数据正在加载。

而最坏的做法,就是完全不设计任何用于提醒的内容,这种极差的用户体验几乎会全盘劝退用户。

想必大家在看完了上述内容后,已经对小程序有了一个初步的概念,上述内容主要是一些理论层面对于小程序设计的分析,那么这个章节主要就是通过大量的线上案例和截图来讲述一些小程序设计的规律。

01.引导收藏小程序机制

小程序的“即用即走”的机制,同时也促成了各个小程序的形成了一套应对机制,其中之一就是引导收藏小程序机制,目前这个机制几乎成为了商业小程序的标配,大体分为三种类型:

1.从效用角度出发:引导型>弹窗型>占位型。

2.从对用户的体验出发:占位型由于不遮挡任何信息,对用户的影响最小;弹窗型遮挡一部分信息,所以次之;而引导型由于直接阻挡了用户的操作区域,所以对用户体验的影响是最大的。不过即使是弹窗型和占位型的引导,也是在过3-5秒后会消失,避免进一步干扰用户体验。

我们在设计小程序时可以酌情参考这三种形式,简单来说,用户粘性高,用户群体年龄偏高可以采用引导型,反之可以尝试弹窗型和占位型两种形式。

02.导流公众号/App机制

类似于“引导收藏小程序”,“导流公众号/App”也是只有小程序中存在的一种模式。不同于“引导收藏小程序”,“导流公众号/App”的方法可谓是百花齐放,不过渠道却只有一个,就是客服会话系统。

1.在客服会话中回复“1”。

2.在客服会话中,回复“小程序”。

客服会话中的拇指图设计非常有讲究,一般的拇指图设计都分为两段文本,字号较大的文本用来在上述步骤二中提醒用户点击,而字号较小的文本则是用来在步骤三中提醒用户点击链接/扫码来下载App。

虽然说小程序有办法将用户引导到App中,但是小程序和App的联动非常有限,基本上局限于通过小程序引导用户去下载/打开App,用户无法在小程序和App切换时仍然保持完整的用户体验流程。

但是我同时也发现了一些产品运用巧妙的方式使得用户体验流程可以延续的产品。在爱奇艺小程序中,当用户需要观看一些App才能观看的内容时,用户可以通过复制一段口令从而在打开App时自动跳转到相应视频,从而使用户流程不中断。

一般配图的设计有以下几种分类:

04.技术上限

很多同学会有一种担心,觉得小程序既然如此轻便,会不会在技术上也会受到很多限制,很多特殊的功能无法在小程序当中实现。

这种担心有依据,但不全对。事实证明,小程序在动效方面,确实被舍弃了很多,很多情况下甚至动效与跳转逻辑无法匹配,会让用户体会到不安的感觉。但是在功能方面,很多已经存在的小程序已经证明,几乎可以在App里实现的功能,小程序均可以实现。

1.VR看房

贝壳找房和同程艺龙的小程序都可以实现VR实景看房,而且在用户体验上是可以让我感受到其真实用途,而不是我一开始认为的噱头所在。这是我觉得在小程序上最令我吃惊的功能了。

可以发现的是,两个VR看房的功能都是一家叫“如视”的公司提供的技术支持,其实这是一种小程序的发展趋势,越来越多的功能模块被第三方机构所替代,而小程序的持有者只需专注于服务与流程设计。那么小程序的门槛将会越来越低,小程序的运营团队也会越来越精简,推动着整个生态向良性发展。

2.地图导航

另一个技术就是腾讯自家的“腾讯地图”,可以在小程序端实现实时导航。这也能证明小程序在功能方面的强大属性。

05.精美的设计

其实小程序也能做到很精美,下面我将带大家看一些良好的小程序设计案例:

1.京东良研通过良好的视觉设计、动效设计和信息展示方式,使得简单的投票功能变得生动有趣,简约明了。

2.在旅游行业,如何将繁冗复杂的信息排布的清晰易懂是非常考验设计师能力的。

06.其他有趣的小功能

1.设置更新用户数据功能。

有些小程序一次登陆后,就会永久将用户数据定格在此,所以当用户许久后重新打开小程序,陈旧的数据会让用户对小程序产生类似的许久不更新的感觉,所以一个更新数据的按键是必要的。

2.诱人点击的文案。

3.外部显示名称和小程序本体名称可以不一致。

同样的,名称为“JZ多媒体解决方案”的小程序,外部显示名称为“除了干货其他什么都没有”。这给我们提供了一种新思路,在初期推广时,不如把我们的Slogan当作名称写在外部,是一种推广的更好方式。

4.小程序的顶部状态栏。

我们都知道小程序的顶部状态栏,右半部分是不可编辑的,那么怎样可以既适应这个规则,又可以保持小程序的设计感呢?我在诸多小程序中发现了这样两种特殊的设计方法。

1)将LOGO放置在顶部状态栏中。

KeepLand将LOGO放置在状态栏中,既与其他小程序做到了区分,宣传了品牌,同时又保持了整体的设计美感。

2)搜索栏不必要非放置在下方。

放置在顶部导航栏的左端同样可以实现空间利用的最大化,同时保持整体的设计美感。

5.将弹窗设计成系统样式。

结束了上半部分的理论分析,那么我们来聊一聊到底我是怎么看待小程序这个平台以及这个生态的。

其实不只是企业家需要考虑这个问题,设计师同样也需要考虑这个问题。前一阵子我一个朋友就来找我诉苦,说他不想在现在这个公司做下去了。原因就是,公司布局了五六个小程序,就是没有一款App的项目提上日程,他以后不想走小程序设计这条路,所以不得已跳槽到一家有App产品的公司。其实这个问题转化出来也很简单,就是小程序到底有发展前景吗?小程序是否会成为一个和苹果搭建起来的AppStore一样的平台?

01.工具无界限,产品有派系

甚至更有趣的是,在小程序热度排行榜中,位居前十的小程序中有5个是腾讯投资的企业下属产品,还有1个是腾讯自身的产品。

但这本身无可厚非,因为这就是正常的商业竞争策略,只是选择了这种策略生长的小程序,优势就是可以将流量最大化的向自己的生态中转化,缺点就是会有很多产品因此无法融入其中,小程序的生态,终究不会是一个全面而完整的生态。

02.很多小程序都是完整产品的试用版

很多人曾在小程序风靡时预言,将来很多的产品都会入驻小程序,阉割掉次要功能,只保留核心功能在小程序中,这样才可以既遵循小程序的轻量化原则,又可以让用户体验到产品的优势,形成转化。但有趣的是,市场却形成了另一套完全相反的机制。

微博小程序与bilibili小程序的做法如出一辙,虽然微博小程序的功能也很全面,看起来几乎和微博App所具有的功能几乎一致,但是一旦我们妄图用微博小程序代替App来使用时就会发现,微博小程序竟然不能发带图片和视频的微博。

03.流量与格局

我觉得很难。

事实上不仅仅是腾讯系如此,中国目前的互联网环境都清晰的告诉我们,企业之间很难构建真正的信任。我一个美团的高管朋友告诉我,美团在进行设计与开发协作时,并不会使用蓝湖,因为他们不信任国内企业。然而在国内使用invision又会受限于网速的影响,所以美团干脆开发了一款自己内部的切图与协作的软件:印迹,只为协调实用性与保密性。

有朋友可能对这款软件比较感兴趣,我也同样如此,就问他美团之后会不会让这款软件开发注册,走商业化道路。他说一开始在研发时他们也有这样的想法,但是由于要提高效率,所以这款软件越来越针对美团业务逻辑的方向制作优化,所以即使公开,也会很难为他人所用了。

入驻小程序,有时候也意味着需要将自己的数据交给他人管理,在小程序中,所有基于地理位置为用户提供服务的小程序,几乎全部都接入了腾讯地图。

我虽然不了解其中的运作机制,但是不难看出,很多企业应该跟我抱有类似的想法。当所有数据集于腾讯一家时,自己是否还有立足于市场的根基呢?

04.那些已经成为平台的企业是如何看到小程序的

事实上,平台与平台之间的博弈从来没有停息过。头号玩家需要借助平台来壮大自己,平台需要头号玩家来壮大自己的生态系统,但是也会忌惮这些头号玩家有一天会强大到自己无法掌控,甚至反噬自己。

01.头部复合小程序出现,使小程序无法保持初心

而基于图文内容,以兴趣聚合的交流社区,围绕老师的家长社群,围绕公务员的同事社群,围绕摄影旅行的兴趣社群,这些都是普通工具类小程序不具备的,但是却是小程序发展的一个必经之路,同时也是转型的一个典范。

所以同样的道理,这就是为什么我不推荐大家在学习如何制作小程序时,去参考头部的那些复合型小程序。体量大不意味着正规,不意味着遵守规范。

很多复合型小程序的设计其实是和小程序的初衷以及适用场景背道而驰的。这对产品本身并不会有什么过大的影响,因为在他们的考量范畴里,有比遵守规范优先级更高的事情。但是我们如果盲目借鉴,以为这就是小程序的规范,那么最终得不偿失。

所以同类型的小而美的小程序,往往更应该成为我们的借鉴对象。

02.友商的步步紧逼

03.小程序已经成为一种任何平台都可以复制的商业模式

事实上,已经有小程序厂商开始在跨平台之间进行积极的布局和尝试了。汽车之家就是其中典型的例子。通过多平台布局的方式,大大降低了小程序的开发与学习成本,实现一举多得。这也是我觉得小程序值得研究和入驻的原因。

所以我认为,小程序的设计模式是设计师一定要去学习的,而企业也一定要研究自己的产品是否在小程序下有应用场景,因为谁都不能保证,小程序是否也会有像App一样,发生流量井喷的一天,到那时候如果再上车,真的就为时已晚了。

THE END
1.小程序LOGO设计免费生成器小程序LOGO免费设计在线生成标智客小程序LOGO在线设计软件为企业在线生成小程序LOGO图片,提供小程序品牌标志生成模板、小程序标志图片素材下载,是LOGO免费在线生成平台!https://www.logomaker.com.cn/logo/tag/4727/
2.人工智能在线问答地质学在线问答?总之,秒真问答和头条号问答都是知识问答类平台,但它们的运营主体、用户群体、回答方式和收益模式等方面都有所不同。 九、人工智能在线设计logo能注册吗? 这种在线设计的是能够通过我们来注册的了。 十、如何进行人工智能在线学习? 你可以去 GitHub上,有个新发布的深度学习教程,叫PracticalAI,刚刚被PyTorch官方推荐,已https://tool.a5.cn/article/show/69662.html
3.小程序logo小程序logo模板可编辑下载小程序logo设计 创客贴拥有海量精美的小程序logo设计模板和小程序logo设计素材,每一个模板都可编辑 文字图片背景皆可修改,简单3步即可完成在线小程序logo设计制作 免费使用 小程序logo图片一键生成 每一张设计模板、图片都可以在线编辑,替换文字就能生成精美设计。 您也可以DIY托拉拽轻松创意设计。下载设计时,会进行版权https://www.chuangkit.com/polymer/885853.html
4.信息技术应用能力提升工程2.0工具软件集锦觅元素_设计元素的免费下载网站_免抠素材51yuansu.com 免抠元素 高清背景 QQ登录 会员制 觅元素 云文字_在线超快作图工具_在线编辑3秒出图 图怪兽,作图神器 微信登录 会员制 图怪兽,作图神器图能制作培训LOGO图片 图怪兽有APP和小程序 生成LOGO的网站 https://www.meipian.cn/3b1ahl50
5.Logo设计,3DLogo设计,SEO服务,SMO服务,小册子设计,横幅设计产业互联网,苹果应用,安卓应用,软件开发,软件外包,软件定制,APP开发,物联网,大数据,人工智能,硬件开发,研发,小程序开发,电商网站,跨境电商,Logo设计,3D Logo设计,SEO服务,SMO服务,小册子设计,横幅设计,靠谱软件,优质开发,第一开发,技术支持,CTO服http://www.isoftvalley.cn/
6.标小智LOGO设计神器公司logo设计在线制作生成器标小智是一款智能LOGO在线设计生成器。只需输入品牌名称就能免费在线生成公司logo设计,商标设计,以及配套企业VI助您打造个性品牌。https://www.logosc.cn/
7.青柠设计在线海报设计平台青柠设计是一款免费在线设计工具,主打海报在线设计,覆盖常见的设计样式,五分钟在线完成设计;操作简单,一个账号多个平台通用编辑,可登录青柠设计网页版,青柠设计app,青柠设计小程序同步编辑;做海报,banner、logo在线设计认准青柠设计官网。https://www.qingning6.com/
8.我需要公司logo设计品牌标志企业vi商标小程序图标平面设计需求标题 我需要公司logo设计品牌标志企业vi商标小程序图标平面设计 需求描述 我需要 威威品牌设计入驻猪八戒平台七年,有着优质的精英团队,多年来,一直在平面设计类不断的创新与进步,获得平台多项奖项与客户认可。本公司为客户提供VIS系统设计、LOGO标志设计、包装设计、画册设计、DM单页、PPT、宣传海报,等平面设计以及https://task.zbj.com/MD4Zrkpd3kq7ySu0
9.西安做网站公司西安网站制作西安小程序开发西安酷恩网络科技有限公司注册成立于2014年,致力于为企业提供可靠的互联网+技术服务、我们在小程序开发、微信公众号开发、网站建设、APP开发、LOGO/VI设计上等有丰富的经验。具体服务板块包括企业宣传解决方案、电商系统、视觉设计、常见行业解决方案等。http://www.itcooln.com/
10.公司logo设计企业logo在线制作专属平台logo11设计网国内首创一品牌一标志的品牌设计理念。再小的个体也应该有自己的品牌形象,11位设计总监,100位资深logo设计师,专属定制logo设计只需799元起 !https://www.logo11.cn/
11.20款最佳Logo设计软件+在线网站/工具推荐(免费/付费)相信大家在设计Logo的时候都绞尽脑汁,想要得到一个完美的Logo可没那么简单,如果你是设计小白,那么可以去一些Logo设计网站上寻找灵感,这些Logo设计工具可以帮助你设计各种类型的Logo,并且可以将他们下载下来。这里就为大家推荐一些国内外最佳Logo设计软件+在线网站/工具,其中有一些是免费的Logo在线生成器,也有一些是需要https://www.extrabux.cn/chs/guide/7965598
12.不怕没灵感!9个专业的LOGO设计素材站(附在线制作工具)Logo看似简单,但是设计过程中的一点一滴都很有讲究。因为Logo作为品牌的象征,要一目了然地传达给人这个品牌的思想和形象。在此为大家整理了7个Logo素材站以及2个Logo在线制作网站,里边有非常多关于Logo设计的内容和技巧,来收!https://www.uisdc.com/9-professional-logo-resource-websites/
13.Logo制作Logo免费设计在线生成Canva可画免费Logo制作工具,拖拽式操作简单易上手,免费模板导出图片无水印,还有丰富的Logo模板和Logo素材可供选择,助你轻松在线制作出精美的Logo!https://www.canva.cn/logos/
14.在线智能快速建站全网营销推广品牌高端商标LOGO设计企业视频及锦椒企服,集企业智能模板自助快速建站、网络营销和网站排名推广、抖音推广和引流、视频推广、商标高端LOGO设计、产品包装和VI企业形象设计,企业视频及宣传视频制作、歌曲制作、广告设计制作及企业产品宣传片拍摄制作、形象代言、代办注册、代办社保、代办资质、知识产权保http://www.jeeeej.cn/
15.免费logo在线制作,logo设计,logo在线生成,字体logo设计,U钙网U钙网遵循标志logo设计理念的艺术规律,创造性地探求恰当的艺术表现形式和手法,使所设计的标志logo具有高度的整体美感、获得最佳视觉效果。 最新原创设计更多 免费LOGO设计案例 最新图标字母图标动物图标厨师美食房屋建筑植物图标龙凤神兽商标设计文字设计欧式花纹 https://www.uugai.com/
16.小程序LOGO关于背景,小程序 Logo 背景不可有外形轮廓。 设计原则 为了能在众多的支付宝小程序中脱颖而出,请使用清晰、完整、有识别性的 Logo 切图,遵循设计原则,以保证界面展现上的美观和完整。 安全性 1小程序 Logo 需原创,无法律风险。 2不得侵犯肖像权。 https://opendocs.alipay.com/mini/00mpjh
17.logo在线设计生成器logo免费设计在线制作商标logo一键生成图司机logo生成器,是一款完全免费的logo在线设计工具,用户仅需提供logo名称和logo行业,即可一键生产出来可以媲美专业logo设计师的作品。https://www.tusij.com/logo/
18.微信公众平台微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。https://mp.weixin.qq.com/
19.设计帮公司官网 小程序 应用系统 app开发 网站建设 我们会根据您的设计需求来匹配擅长设计师服务,例:您需要做LOGO,就安排擅长做LOGO的设计师 设计帮旗下有3000+海量设计师,精细划分出30多项细分技能,按照擅长标签删选匹配 我们把项目安排给完稿率,好评率高的设计师,确保客户获得更好的服务体验。 https://www.shejibang.net/
20.网站建设小程序开发APP开发网站制作网站设计网站建设公司北京维视互动文化传媒有限公司是一家集高端网站设计、网站开发、微信开发、小程序开发、APP开发、h5页面制作于一体的北京网站建设公司,为近三千家企业提供过移动互联网开发服务;北京网站建设十大品牌公司。 北京维视互动文化传媒有限公司是一家集高端网站设计、网站开发、微信开发、小程序开发、APP开发、h5页面制作于一体https://www.websiv.com/
21.昆山网页制作设计常熟做网站推广seo优化哪家好高端响应式网站制作9800元起,18962528455,聚尚网络科技专业苏州网页设计, 吴江网站建设维护,常熟昆山营销型网站推广seo优化,网易腾讯企业邮箱代理,微信小程序app开发哪家好https://www.web0512.com/
22.5大LOGO免费在线生成器,从此设计不求人!网站文章5大LOGO免费在线生成器,从此设计不求人! hi,大家好我是技术苟,每天晚上22点准时上线为你带来实用黑科技!由于公众号改版,现在的公众号消息已经不再按照时间顺序排送了。因此小伙伴们就很容易错过精彩内容。喜欢黑科技的小伙伴,可以将黑科技百科公众号设为标星,这样就不会走丢啦~http://www.anyouy.cn/anyouwz/31100.html
23.网站建设小程序开发快速建站品牌设计新科众创(北京)科技有限公司以创新为导向,致力于网站建设、网站定制开发、小程序开发、UI设计、品牌设计、创意设计、包装设计等,为客户提供全方位一站式服务。http://xinke123.com/