小程序和app的设计区别(7种不同类别对比)

小程序和app的设计区别(7种不同类别对比)

ID:hys-ssc

目 录

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

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

NO:1 功能支持

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

NO:2 内存体积

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

NO:3 体验及流畅

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

NO:1 顶部导航栏

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

这是目前最麻烦的地方,量级小的应用还可以,量级大的导致工作量大大增加。同时,自定义导航容易带来标题无法对齐、页面机型不同安全区域不同、全局刷新时页面会被整个下拉等等问题。

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

NO:2 标签栏

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

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

NO:3 拖动排序

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

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

NO:4 文本省略

App:可实现日常所需的所有文字、段落效果。

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

NO5:原生组件

App:可以自定义组件库,对开发设计限制低。

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

NO6: 动画实现

App:动画流畅、无卡顿,想要的基本都能实现。

建议动画精简,尽量做减法设计。

·3.总结·

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

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

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

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

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

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

参考链接:

UI设计刚入门?

怎么才能了解现阶段的自己需要补充什么?

·【今日互动福利】·

欢迎留言评论和本圈分享~

“原研哉-设计中的设计“电子版

每日朋友圈分享好货福利同样精彩

发表评论

登录后才能评论