如何设计小程序?设计师必看的超全实战指南

• 出色的用户体验：加载速度快于网页，可达到近乎原生 App 的操作体验和流畅度。

• 更低的开发门槛：一次开发，多端兼容，免除了对各种手机机型的适配。

• 社交分享属性：坐拥微信 10.83 亿用户，基于微信强大的社交关系链，可以在微信内被便捷的传播和获取。

• 服务号：主要偏于服务交互（类似银行，114，提供服务查询），认证前后都是每个月可群发 4 条消息；

• 任务栏、发现-历史列表

• 群聊、单聊、消息

1. 出行类-滴滴

2. 笔记类

还有一个很「微信」的功能就是导入微信文件，此功能能够一键导入微信聊天记录中的一些文件到印象笔记 APP 中，及时保存防止用户的文件过期无法使用。

3. 新闻类

4. 知识付费类

5. 视频类

重点突出

流程明确

顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。

标题栏「被占用」，常用的几种搜索设计手法：

弹窗尽量不遮挡顶部标题栏和底部tab栏

关于适配的问题

应该怎么做适配的呢？怎样做适配才能更高效且能满足内容不被裁切呢？

有一个很好的方法就是利用组件化对图片进行内容有效范围的规定，不论是哪位设计师设计，都需要在规定区域内进行设计，之外的区域可以放「非重要内容」比如背景颜色或者延展图片(可以裁切掉的部分)等。

以上这么多机型的适配，其实设计师只需要在 2 个尺寸里进行设计稿的变化，即可基本满足主流机型的适配。

• API ：如微信登录、支付、生物认证等开放界面能力以及位置、数据、录音、视频等基础能力。

这样的适配好处在于，既能够满足手机多尺寸的需要又能够很好地扩展尺寸，这也是大部分大厂的普遍做法。

切图标注部分推荐的高效共享的平台：蓝湖、Figma、Pxcook

爱奇艺在视频播放页出现「用 APP 打开」

Keep 中，当你要看更多课程安排时，会有引导入口提示「下载 Keep APP 体验完整版」

图文来源于网络，侵权删。