网站建设微信小程序和APP的本质区别是什么

作者:原创2020-11-06 13:50:33浏览量:34

在网络上它们简单的文字叙述为,小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。APP是应用程序Application的缩写手机软件,主要指安装在智能手机上的软件,完善原始系统的不足与个性化。使手机完善其功能,为用户提供更丰富的使用体验的主要手段。APP是需要单独下载,内存较大,还要时常更新。目前小程序的已经被多数的微信活跃用户接受,用户对小程序的操作和使用习惯也形成操作规范。小程序强大而便捷的功能获得了客户的喜爱,而更低成本更高效的开发和维护更新使得小程序更受商家青睐。


很多企业商家都纠结于是否做自己的app、网站、微信小程序等平台来增加自己的销售渠道。那么如何做选择呢?是APP还是小程序呢?都是手机端,但实际上,小程序和APP在设计上是有很多本质上的区别,主要有以下几个方面:

 

    1、获取渠道

 

    APP:用户需要下载才能获得。

 

    小程序:微信直接搜索

 

    2、下载安装

 

    APP:安装在手机内存中。

 

    小程序:不需要安装。

 

    3、占用空间

 

    APP:一直存在于手机中占用空间,且太多的APP可能会导致内存不足,总要清理缓存。

 

    小程序与APP

 

    小程序:因为不需要安装,占用内存空间忽略不计。

 

    4、开发周期

 

    APP:一款完善的双平台APP平均的开发周期约3个月。

 

    小程序:平均开发周期约2周。

 

    5、发布

 

    APP:需要向应用商店提交审核,且每个应用商店要求的资料都不一样。

 

    小程序:只需要提交到公众平台审核,审核周期短。

 

    6、功能

 

    APP:可以实现完整功能。

 

    小程序:接口功能有限

 

    7、推广难度

 

    APP:需要用户主动下载安装包,相对来讲APP推广起来会有些艰难。

 

    小程序:可以通过二维码、搜索等方式直接获得,推广难度大大降低。

 

    8、自主性

 

    APP:而APP内部的功能、内容由运营者全权把控。

 

    小程序:小程序的优势就是背靠微信等平台大佬,引流效果好。

 

    9、适合领域

 

    APP:适合传统品牌零售、贸易分销、服务、客户关系等业务型企业。

 

    小程序:适合互联网工具服务类创业项目,需要较强的开发技术能力。

 

    对商家来说,小程序开发和维护成本低,APP开发和维护成本高;对用户来说,小程序几乎不占内存,APP要单独下载,内存较大,还要经常更新。现在的公司,基本上业务员联系客户都会以加微信为主了,这个时候小程序可以帮助企业做闭环的工作,让客户充分的体现后续的服务。毕竟在中国,还是以中小企业为主,而这些企业普遍存在的一个问题,就是独立开发app即贵又不实用,而且也没有足够的资金进行推广。小程序成为了一个超级的生态流量入口,行业的竞争越发激烈。不仅仅是一些企业,越来越多的中小型商家都在开发自己的小程序,为的是在未来的大环境中能有一席之地。


当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的。如果是app设计师,就不会那么纠结啦。 

 

 

那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。

 

请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下)也就是我们的H5页面前端代码里面必须包含 

<meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” />

<meta content=”telephone=no” name=”format-detection” /> 

 

根据目前市场流行的手机移动终端,统计他们的设备独立像素。

 

在这里,25学堂也跟大家分享一个罗列了当前最流行的手机的所有尺寸大小规范:http://screensiz.es/phone 值得大家好好细看的智能手机尺寸图表。

 

也只有iPhone6+采用了分辨率降频处理。 

 

有兴趣的小伙伴可以去尝试不同的尺寸,比如1倍的、2倍的、3倍。最终得出的试验结果是。H5的设计稿一般设计为640x1136px即可。 既满足了显示需求,又能降低用户加载图片需要的带宽。

 

可以用各种分辨率的移动智能手机查看我们设计的H5页面时,当然,也会出现如下的情况,内容显示不全,甚至一些重要内容和按钮都会被遮挡。

 

第一:背景图片必须采用background-size:cover;来实现。

 

第二:我们在进行H5页面内容规划布局设计的时候,不能把重要内容放在太偏下的位置或者偏上,否则前端布局时可能出现内容显示不全的情况。 

 

通过对比可得:

 

除去将浏览器全屏显示的情况,几乎所有情况均会有顶部的状态栏和导航栏。

 

iPhone的设计标准,状态栏和导航栏的独立像素高度分别为40px和88px。

 

由于Android系统可以更改状态栏和导航栏的高度,这里可以取默认值为48px和100px(这些尺寸网上均可查)。

 

那么就会把网页内容往下挤,进入盲区(根据不同的布局方式可能挤出视口,即可视区域之下,)。取这两个系统者的最大值为148(48+100),如下图5,设计稿要尽量保证单页下面没有重要内容。 

 

那么在所有屏幕大小上把重要内容显示完全,就要注意市面上存在的小尺寸手机屏幕,现在绝大部分智能手机分辨率都在640x960px(iPhone4分辨率)之上,所以只要把重要内容放在上图5中的盲区之上即可。计算后的最安全高度为812(960-148=812)。

 

在此总结,一般情况下,以现有市场上流行的移动智能手机,单页翻转(非延伸向下的长页面)设计稿尺寸为640×1136,在高度为812处设置一条安全线(参考线),将重要的内容布局在这条安全线之上。 

 

移动端H5页面的设计稿尺寸大小规范内容如下:

 

1、像素是没有宽高的(不要被Photoshop中的像素格欺骗),它只代表一个采样的色值。

 

2、任何图片作为数据信息被保存在存储盘中时,只有宽高像素数是有意义的,此时的ppi对于图片来说时没有任何意义,也并不能描述这个图片有多少英寸的宽度或者高度,而只有在被打印出来后才有ppi的意义,被打印出来才可以描述这张图片有多高多宽。

 

3、平时制作H5页面时设计原型时,产品经理出的原型稿建议屏宽为320px,用这个尺寸一是为了浏览方便(现在很多手机的屏宽达到1440px,用这个尺寸去模拟显然不现实),二是以iPhone5s为标准的手机屏宽较小,进行内容排版布局时屏宽应该向下兼容。 

 

4、制作设计稿时,设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时,按照现在流行的做法,可以直接使用原型稿上的尺寸,也就是设计稿上的1/2。

 

5、一般情况下,H5页面设计稿做成640x1136px是最为稳妥的尺寸,在812px高度处增加一条安全线,重要内容在此线之上(网上有些文章说安全线是960px处,个人认为不太准确)。既保证了在移动设备上显示清晰,也保证了素材的最小尺寸。 


Copyright © 2015-2021 武汉巴布科技有限公司 版权所有
公安部备案号:鄂公网安备42018502003810
工信部备案号:鄂ICP备19007496号-1
友情链接: 武汉网站建设
QQ在线咨询