1. 轻设计

总的来说，小程序相较于app都化繁为简，突出主要功能。还可以将并联功能改为串联/触发功能来实现页面的简化，如小红书。

2. 注意统一性

小程序的色彩、图标、风格应和app内一致，但是要考虑目标受众的不同做适量更改。减少banner、实物图标的使用，要实现页面简化和色彩统一。实物icon到小程序中都变成了简约的线性图标配以及加大后的字体。

3. 是否应当使用水平滚动列表

这一点从技术上讲是可以实现的，但是目前大多数小程序都不采用这样的做法，水平滚动列表和垂直滚动列表在小程序中是二选一关系，一个若为可以无限拉动，另一个应为有限。

4. 注意加载动效

小程序内容的轻量也有一个重要原因——减少打开时间，用户对于小程序的等待时间要比app少很多。此时加载动效就能够作为一个留住用户的加分项。

5. 导航栏样式

小程序的底部导航栏较为死板，配置空间为2-5个，且图标和文字空间规定严格。可以多使用顶部导航栏和悬浮导航按钮。

NO:1 顶部导航栏

App：可以保留导航栏，也可以去掉，可拓展性强，灵活性高。小程序：导航栏右侧有个无法去除和编辑的胶囊（titlebar），设计时也不能在导航上增加其他功能。所以在 App 转小程序时，导航栏的功能要换位置或者在放在导航栏下。

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

（一）原生的导航栏支持更改颜色，但字体颜色仅支持黑/白两种；

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

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

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

NO:2 标签栏

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

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

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

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

NO:3 拖动排序

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

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

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

NO:4 文本省略

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

小程序：文本限制行数，加省略号，并且增加全文展开方案实现有问题。无法预估到行尾位置省略。

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

NO5:原生组件

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

小程序：部分组件是由微信创建的原生组件，有系统相机、输入框、地图、文本输入...等等，原生控件使用有一定的限制，不能在滚动、轮播、选择器、拖动区域中使用，层级最高无法被覆盖，可供修改的参数由微信提供。

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

NO6: 动画实现

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

小程序：动画能力低于 H5 和 App ，动画对性能消耗大，尤其是在 Android 机型上，卡顿有稍显明显。当加载代码包时，当微信认为这个小程序占用过多的内存，会把此小程序强行退出，以保证微信的正常使用。

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

·3.总结·

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

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

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

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

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

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

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

内容为转载，侵权可联系我删除