小程序界面怎么设计?如何设计小程序界面?

　　小程序界面怎么设计?如何设计小程序界面?怎么样去设计一个好的微信小程序界面呢?如果您想要为自己的小程序设计一个好看的界面，请往下看小编整理的小程序界面怎么设计的内容。

　　小程序界面设计

　　知晓程序(微信号 zxcx0101)建议：没小程序产品设计经验的开发者请尽可能使用微信提供的组件样式，这样可以在快速开发的前提下，保证小程序的用户体验。

　　1. 友好礼貌

　　微信官方希望小程序专注解决用户当前的问题，做一个「管家」，而非是在用户处理问题时候，一直制造干扰的「推销员」。

　　首先，每一个页面都应该聚焦于某个重点功能，不能与该功能无关。

　　例如，搜索页面的功能应该是「搜索」，与搜索无关的功能或内容(如 banner 广告以及诱导搜索关键词推广等)应该尽可能去除掉。

　　官方错误示例，在搜索页中添加无用信息

　　其次，页面的导航应该按照用户的预期进行。

　　例如，用户跳转进入一个页面时，小程序不应该弹出与之无关的广告，因为广告不符合用户进入页面的预期。

　　官方错误示例，进入页面弹出与功能无关广告

　　知晓程序(微信号 zxcx0101)建议：小程序设计时应该以快速解决用户问题为目标，并为其提供明确且符合预期的步骤导航。而这与张小龙在演讲中提到的「用完即走」的概念是吻合的。

　　2. 清晰明确

　　用户在操作小程序时，小程序应该为用户明示当前状态，同时应尽力减少用户在操作上的限制和等待时间。

　　微信官方已经为小程序链接提供了全局导航栏，包括导航区(返回按钮)、标题区和操作区三组。

　　如果开发者有需要，可以在小程序的首页中使用页面内导航，包括顶部 Tab 样式和底部标签样式。每种样式至少需要两个标签，最多不能超过五个标签，而微信官方给出建议是最多不要超过四个。

　　官方提供的底部标签和顶部 Tab 样式

　　开发者可以定义导航栏和页面内导航的风格颜色。在定义颜色时，开发者需要注意元素辨识度，不能出现刺眼、按钮与文字可视*差的情况。

　　小程序中的加载反馈细节也是影响整体体验的重要部分。微信提供了一个下拉刷新组件，只需要按照要求套用即可。

　　同时，页面内的加载提示推荐使用局部加载反馈而非全局加载反馈。加载时间较长时，建议提供进度条以减缓用户等待的焦灼感。

　　下拉刷新样式和局部加载示例

　　微信小程序提供三个结果提示方式，提示效果从轻至强的分别为小弹窗提示(toast)、模态框提示(modal)和单独的成功结果页面。开发者需要根据实际情况，对不同程度的提示进行合理利用。

　　建议：操作反馈时用 toast，询问行为时用 modal，表单提交后用页面。

　　Toast、Modal 和成功页面

　　这份设计文档特别强调了异常情况的设计。在小程序中，异常情况需要明确告知用户出现了问题，同时明确告知用户问题出在哪里、应该如何解决。

　　文档对表单中填写出错情况的提示样式进行了规定。

　　表单错误提示示例

　　如果表单中出现错误，小程序应该在顶部弹出提示，并在错误项目的右侧提供错误 icon，以便用户定位问题。

　　3. 便捷优雅

　　微信官方希望小程序可以敏捷地解决问题。

　　比如，当用户在进行输入时，可以通过联想、API 接口以及其他方式(例如扫描银行卡等)，帮助用户快速准确地填充输入内容。

　　扫描银行卡快速填充内容

　　在设计时，应该确保用户的误操作概率更低。

　　微信官方在文档中提到，可点击元素应该要保证足够大，以便用户能够有明确的点击反馈。但知晓程序提醒，文案及 icon 不让用户困惑也是减少误操作的重要方式之一。

　　以上就是小编整理的小程序界面怎么设计的内容了，教您怎么设计小程序界面，以上内容供大家参考，如果您想了解更多的相关内容，请多多的关注微小乔。

　　微信小程序适合应用于哪些场景?

　　到底是做微信小程序还是服务号?

　　微信小程序盈利模式是怎样的?微信小程序如何盈利?