2019-08-15 UI设计培训

UI设计培训|关于小程序,你想知道的都在这里

关于小程序,你想知道的都在这里

最近许多小伙伴私信UI设计培训像素妹儿询问关于小程序方面的知识,为了更好地回答大家的这个问题,像素妹儿在之前的项目经验基础上通过查询其他资料整理出了这篇文章,从产品和设计两个方面深入介绍一下小程序,希望可以对各位小伙伴的面试和工作有所帮助。

小程序简介

微信经过多年发展已经成为了一款超级APP,围绕其核心构筑了完整的应用生态,目前在微信生态内有两种第三方产品形态,一种是基于WEB技术开发的网页应用,常见的就是我们所熟悉的各类H5活动页、H5小游戏以及手机网站和各类轻应用,例如主打微商的有赞就是利用WEB技术开发的网页应用,除此之外,另一种形态就是小程序。

UI设计培训

小程序是由微信之父张小龙团队率先提出,于2017年1月9号正式上线,它通过开放微信接口,允许开发者基于微信打造类APP的应用。与传统app相比,小程序开发成本低,一次开发可以多平台使用,减少了后期维护的麻烦,再加上微信强大的流量加持,所以自发布起变被各大企业广泛采用。

UI设计培训|关于小程序,你想知道的都在这里

小程序没有类似应用商店的分发机制,主要通过各类应用场景进入,以上是进入小程序的五大场景入口,图片来源与阿拉丁小程序统计平台;

在用户体验方面,小程序提倡“触手可及,用完即走”的理念,用户用完之后退出即可,无需关闭卸载。小程序不会打扰用户,更不会推送消息、产生订阅关系、分享到朋友圈,这样不仅省去了用户安装各类APP的麻烦,节省了手机内容,同时也避免用户被各类垃圾信息骚扰,深得用户喜爱。

小程序现状

据阿拉丁小程序统计平台发布的数据,截至2018年上半年,微信小程序C端用户最高达到2.8亿,另外小程序数量达到100万,相对于1月张小龙公布的58万小程序,增幅接近翻倍。要知道,苹果APP STORE里面的应用可是花费数年才达到相同量级,所以如此巨大的市场规模也引得资本争相进入,目前包括金沙江、红杉中国、险峰长青、IDG、真格基金在内,80%的一线基金已经进入小程序赛道,2018上半年进场投资资金超过30亿人民币。

小程序火爆的原因

其实,在小程序上线之前,其他公司也推出过类似技术方案,比如百度在2013年推出的一种轻应用的技术。那为什么当时百度的方案并没有掀起行业的波澜呢?像素妹儿认为最主要的原因是小程序赶上了行业发展的机遇,抓住了超级App的流量溢出效应。

现如今互联网流量成本越来越高,开发者获取流量越来越难,特别是第三方中小开发者和企业/品牌,而以微信为代表的超级App则在马太效应下吸引了更多用户和流量,出现流量溢出效应。

举个例子,微信现在有近10亿的用户规模,但是微信本身的功能其实并不多,这么多流量进来之后并不能完全满足用户的需求,如果用户需要购物还是要跳转到其他购物APP,这就是流量溢出。如果微信内有一个购物的小程序,那么用户再有类似需求的话就不需要跳出微信,在系统内即可解决,那么流量就会一直存在微信内,从而避免了流量的溢出。

微信通过小程序获得了更多功能,扩展了服务边界,第三方开发者则可以以相对较低的成本获取用户流量,两者一拍即可,共同促成了小程序的发展和爆发。

聊完了小程序的前世今生,接下来我们谈一谈在小程序设计方面需要注意的地方。

与原生APP的设计差异

与原生APP相比,小程序在界面设计方面最大的不同在于小程序的所有页面,包括小程序内嵌网页和插件,微信都会在其右上角放置官方小程序菜单,开发者不可对其内容自定义。所以小程序设计的最大难点在于如何处理导航栏的交互,尤其对于现有产品如何做好优化。

UI设计培训|关于小程序,你想知道的都在这里

目前有两种方式,第一是直接忽略掉整个导航栏,将整个产品按现有的交互方案至于整个导航栏的下部。但是这样很容易出现双下巴的情况,从视觉方面来说并不友好。

所以目前通常采用第二种解决方案,也就是重新调整页面布局,将之前现有产品在导航栏右侧的图标或按钮放置在页面的其他位置。这样从视觉方面会好很多,不过对用户习惯也有一定的影响,所以具体采用哪种方案,各位小伙伴可以根据具体情况决定。

UI设计培训|关于小程序,你想知道的都在这里

金山文档为适应小程序的设计规范将将搜索按钮改为搜索框,主要功能不变,视觉上非常和谐;

微信允许开发者修改整个状态栏和导航栏的颜色,官方也提供了深浅两套配色的小程序菜单,开发者可以选择合适的方案,以适应小程序页面设计风格。但是颜色只能为纯色,不支持渐变和图片。

许多公司都会在状态栏和导航栏的背景上使用自家品牌色来凸显品牌形象;

小程序的设计尺寸

目前通常以750*1334px作为小程序的设计尺寸,这是根据微信官方提供的UI KIT确定的,设计师采用这个尺寸可以很方便地使用微信官方提供的组件进行设计,减轻工作负担。其他屏幕尺寸可在此基础上对进行适配调整得出。

小程序的辅助设计

在进入小程序前有一个启动页面,小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需开发者开发。

小程序的用户体验其实与原生APP相比并没有本质区别,大部份都是一致的,只要各位小伙伴有其他方面的产品经验,上手小程序是非常容易的一件事。

资源推荐

微信官方推出了小程序开放平台,里面有关于小程序的一系列资料,包括完整的开发指南和设计组件库,如果想要了解更深入的小伙伴可以访问社区网站:(https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18110119)

除了微信小,BAT另外两家也推出了各自的小程序项目,分别为支付宝小程序和百度智能小程序。除此之外还有一款类似小程序的产品名为轻应用,是由国内十家手机硬件厂商合力推进的,使用场景主要集中在厂商的手机中。

以上基本就是国内目前小程序这类技术的大致情形,随着诸多资源的投入,小程序未来肯定会有更大的发展,各位小伙伴需要提前充电啦!

今天的分享就是这些,如果你觉得UI设计培训像素妹儿写得还不错,请给我点个赞吧~

林老师:0371-5556 6060