小程序和App在设计上存在什么样的差异呢?
2020-01-17 15:46实搜网络
微信小程序和APP存在着明显的不同,小程序不占内存的,APP需要下载占据很大的手机内存。所以APP的设计和小程序的设计是存在一定的区别的。APP和小程序的设计具体区别表现在什么地方呢?实搜的小编就详细的为大家总结一下具体的差距。
1)顶部导航栏
App:可以保留导航栏,也可以去掉,可拓展性强,灵活性高。
小程序:导航栏右侧有个无法去除和编辑的胶囊(titlebar),设计时也不能在导航上增加其他功能。所以在App转小程序时,导航栏的功能要换位置或者在放在导航栏下。
实现效果也略欠缺一些,例如微信提供原生和自定义的两种导航栏:
(一)原生的导航栏支持更改颜色,但字体颜色仅支持黑/白两种;
(二)虽然自定义的导航栏可以去除原生导航栏,支持图片通到导航栏上,但是所有页面都需要重新调整(原先导航栏的高度没有了,界面元素会跟着上移),而小程序不支持单个页面修改。
这是目前最麻烦的地方,量级小的应用还可以,量级大的导致工作量大大增加。
同时,自定义导航容易带来标题无法对齐、页面机型不同安全区域不同、全局刷新时页面会被整个下拉等等问题。
2)标签栏
App:可支持最少2个,最多5个的tab切换,图标大小以及底部标签栏高度可自定义。
小程序:也可支持最少2个,最多5个的tab切换,使用原生控件时,要遵从icon尺寸81*81px。
使用自定义标签栏时,可支持加入交互效果,例如提示数量气泡等,但是体验相比原生差一点,如果标签页是首次进入的页面,那么标签栏切换会造成跳动,需要开发做规避。
建议不带有交互的情况,尽量使用原生控件,就像站酷小程序一样。
3)拖动排序
App:流畅、体验佳,例如发朋友圈时拖动照片排序。
小程序:除非必要,否则不建议使用拖动排序。图片和列表拖动在Android机型上体验不够,会有卡顿的情况。
4)文本省略
App:可实现日常所需的所有文字、段落效果。
小程序:文本限制行数,加省略号,并且增加全文展开方案实现有问题。无法预估到行尾位置省略。
建议通过换行增加全文展开按钮,或者控制字数,文本末尾增加全文展开。
5)原生组件
App:可以自定义组件库,对开发设计限制低。
小程序:部分组件是由微信创建的原生组件,有系统相机、输入框、地图、文本输入...等等,原生控件使用有一定的限制,不能在滚动、轮播、选择器、拖动区域中使用,层级最高无法被覆盖,可供修改的参数由微信提供。
建议在设计时以原生控件为基础修改,不要自造控件。同时注意使用场景,以免无法实现。
6)动画实现
App:动画流畅、无卡顿,想要的基本都能实现。
小程序:动画能力低于H5和App,动画对性能消耗大,尤其是在Android机型上,卡顿有稍显明显。当加载代码包时,当微信认为这个小程序占用过多的内存,会把此小程序强行退出,以保证微信的正常使用。
1)顶部导航栏
App:可以保留导航栏,也可以去掉,可拓展性强,灵活性高。
小程序:导航栏右侧有个无法去除和编辑的胶囊(titlebar),设计时也不能在导航上增加其他功能。所以在App转小程序时,导航栏的功能要换位置或者在放在导航栏下。
实现效果也略欠缺一些,例如微信提供原生和自定义的两种导航栏:
(一)原生的导航栏支持更改颜色,但字体颜色仅支持黑/白两种;
(二)虽然自定义的导航栏可以去除原生导航栏,支持图片通到导航栏上,但是所有页面都需要重新调整(原先导航栏的高度没有了,界面元素会跟着上移),而小程序不支持单个页面修改。
这是目前最麻烦的地方,量级小的应用还可以,量级大的导致工作量大大增加。
同时,自定义导航容易带来标题无法对齐、页面机型不同安全区域不同、全局刷新时页面会被整个下拉等等问题。
建议页面多、复杂的情况,尽量减少使用自定义导航,也可以使用像马蜂窝一样,导航栏背景和图片背景衔接,效果也不错。
2)标签栏
App:可支持最少2个,最多5个的tab切换,图标大小以及底部标签栏高度可自定义。
小程序:也可支持最少2个,最多5个的tab切换,使用原生控件时,要遵从icon尺寸81*81px。
使用自定义标签栏时,可支持加入交互效果,例如提示数量气泡等,但是体验相比原生差一点,如果标签页是首次进入的页面,那么标签栏切换会造成跳动,需要开发做规避。
建议不带有交互的情况,尽量使用原生控件,就像站酷小程序一样。
3)拖动排序
App:流畅、体验佳,例如发朋友圈时拖动照片排序。
小程序:除非必要,否则不建议使用拖动排序。图片和列表拖动在Android机型上体验不够,会有卡顿的情况。
建议使用上下按钮替换上下拖动,或者图片排序使用标记的方式来进行排序。
4)文本省略
App:可实现日常所需的所有文字、段落效果。
小程序:文本限制行数,加省略号,并且增加全文展开方案实现有问题。无法预估到行尾位置省略。
建议通过换行增加全文展开按钮,或者控制字数,文本末尾增加全文展开。
5)原生组件
App:可以自定义组件库,对开发设计限制低。
小程序:部分组件是由微信创建的原生组件,有系统相机、输入框、地图、文本输入...等等,原生控件使用有一定的限制,不能在滚动、轮播、选择器、拖动区域中使用,层级最高无法被覆盖,可供修改的参数由微信提供。
建议在设计时以原生控件为基础修改,不要自造控件。同时注意使用场景,以免无法实现。
6)动画实现
App:动画流畅、无卡顿,想要的基本都能实现。
小程序:动画能力低于H5和App,动画对性能消耗大,尤其是在Android机型上,卡顿有稍显明显。当加载代码包时,当微信认为这个小程序占用过多的内存,会把此小程序强行退出,以保证微信的正常使用。
建议动画精简,尽量做减法设计。以上就是关于APP和小程序设计的具体的区别,大家在设计小程序的时候应该注意到他们之间的区别,才能更好的为用户提供更多的流畅的体验。
标签:
相关推荐新闻
- 如何玩转公众号?微信公众号加粉技巧分享2019-10-28 13:10
- 抢占微信小程序红利市场,先入者更具优势2020-07-18 15:38
- 微信小程序商城具备了哪些特点呢?2020-04-29 17:30
- 小程序的未来决定者是微信还是商家2020-07-13 15:00
- 微信营销H5带来哪些新的营销体验2019-11-11 15:02
- 最新小程序运营推广价格是多少?2021-06-21 17:38
- 长按二维码识别微信小程序功能带来了流量爆炸式增加2020-01-04 09:16
- 企业如何解决微信加粉的痛点2019-11-17 13:56
- 小程序开发、小程序生产以及具有后台管理的多终端小程序的功能。2021-11-13 09:47