Website
我们是汉邦未来
将新闻&技术@与您一起共享
企业网站为什么要做个新闻资讯栏目呢?
原因很简单,除了传播企业观点和活动以外,最大意义在于网站的SEO优化推广,其实这都是网络营销的一种手段。
大家可能在网站建设时并没有认识到这有太多的意义和影响,但是对于我们很多人来说,如果能够利用好行业当中的合理关键词推广方法的话,相信对于每个企业网站的信息收录来说都会有很大突破。
小程序和App设计的差异
2022-01-21 标签:北京小程序制作、北京小程序开发 来源:北京汉邦网站建设公司

前言

由于小程序本身的特殊性,导致 UI 设计师不能够如同设计 App 一般自如。为了后续 UI 设计师和小程序前端开发能减少沟通,返工成本,将在这里和大家聊聊小程序和 App 设计的差异,以及差异具体的表现。

 

本文仅为个人工作学习心得,可能概述的较片面,有错误不妥之处欢迎指出。

 

1.为什么有差异——缺乏自主性

 

1)功能支持

小程序我们都知道是基于微信的应用程序,开发必须依靠微信给的接口(微信给啥就是啥),能实现的功能被大大的限制了。而且小程序上线也就2年的时候,还有一些功能不完善。

 

App 依靠于手机系统,可以实现复杂且多的功能,App 开发已经有近10年的积累,各类控件比较完善,换句话说就是开发者能力越大,展示效果越丰富。

 

2)内存体积

小程序代码提交不能超过规定大小2M,这部分程度上限制了开发的可能性。

 

App 就不同了,没有这部分的限制,我们更新软件的时候经常看到几十兆,几百兆,甚至游戏类的几个G的下载体积。

 

3)体验及流畅

小程序的体验略逊于 App , 小程序使用时没有那么稳定,容易出现错误闪退,特别是在一些功能复杂的应用中,虽然说小程序已经优化了很多,有时仍会出现卡顿感。

 

2.差异在哪里?具体表现

 

 

 

 

 

1)顶部导航栏

App:可以保留导航栏,也可以去掉,可拓展性强,灵活性高。

 

小程序:导航栏右侧有个无法去除和编辑的胶囊(titlebar),设计时也不能在导航上增加其他功能。所以在 App  转小程序时,导航栏的功能要换位置或者在放在导航栏下。

实现效果也略欠缺一些,例如微信提供原生和自定义的两种导航栏:

 

(一)原生的导航栏支持更改颜色,但字体颜色仅支持黑/白两种;

 

(二)虽然自定义的导航栏可以去除原生导航栏,支持图片通到导航栏上,但是所有页面都需要重新调整(原先导航栏的高度没有了,界面元素会跟着上移),而小程序不支持单个页面修改。

 

这是目前最麻烦的地方,量级小的应用还可以,量级大的导致工作量大大增加。

 

同时,自定义导航容易带来标题无法对齐、页面机型不同安全区域不同、全局刷新时页面会被整个下拉等等问题。

建议页面多、复杂的情况,尽量减少使用自定义导航,也可以使用像马蜂窝一样,导航栏背景和图片背景衔接,效果也不错。

 

 

2)标签栏

App:可支持最少2个,最多5个的tab切换,图标大小以及底部标签栏高度可自定义。

 

小程序:也可支持最少2个,最多5个的tab切换,使用原生控件时,要遵从 icon 尺寸81*81px。

 

使用自定义标签栏时,可支持加入交互效果,例如提示数量气泡等,但是体验相比原生差一点,如果标签页是首次进入的页面,那么标签栏切换会造成跳动,需要开发做规避。

建议不带有交互的情况,尽量使用原生控件,就像站酷小程序 一样。

 

 

3)拖动排序

App:流畅、体验佳,例如发朋友圈时拖动照片排序。

小程序:除非必要,否则不建议使用拖动排序。图片和列表拖动在 Android机型上体验不够,会有卡顿的情况。

建议使用上下按钮替换上下拖动,或者图片排序使用标记的方式来进行排序。

 

 

 

 

3.总结

 

由于小程序本身的开发特殊性,在和 App 设计的会有一些的不同之处,例如:

1.页面多、复杂的情况,尽量减少使用自定义导航。

2.不带有交互的情况,尽量使用原生控件。

3.使用上下按钮替换上下拖动,或者图片排序使用标记的方式来进行排序。

4.通过换行增加全文展开按钮,或者控制字数,文本末尾增加全文展开。

5.在设计时以原生控件为基础修改,不要自造控件。同时注意使用场景,以免无法实现。

6.动画精简,尽量做减法设计。

无事,不登三宝殿 :)
联系汉邦未来,免费获得专属《策划方案》及报价
咨询相关问题或预约面谈,可以通过以下方式与我们联系
业务热线:010-52451566
移动互联网@资深服务商
©2001 北京汉邦未来文化发展有限公司 版权所有
汉邦未来网站建设公司地址:
北京朝阳建国路88号SOHO现代城5号楼31层
京ICP备11043709号-4
支持: info@chinabang.net
汉邦未来提供:北京网站建设/北京网站制作/北京网页设计/商业摄影等服务
010-52451566