微信小程序设计的基本原则是微信设计中心针对微信内上线的设计指南及建议
发表时间：2023-08-30 13:15:14
文章来源：炫佑科技
浏览次数：195
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
微信小程序设计的基本原则是微信设计中心针对微信内上线的设计指南及建议
微信小程序设计的基本原则是微信设计中心针对微信推出的小程序页面总结的设计指南和建议。
以下设计原则基于尊重用户微信小程序开发设计，旨在在微信生态中建立有序、高效、一致的用户体验，同时适应和支持各种业务需求的设计，实现双赢对于用户和开发来说。
首先，要有礼貌
为了防止用户在微信中使用小程序服务时被周围复杂的环境分散注意力，小程序在设计小程序时应注意减少不相关的设计元素对用户目标的干扰，礼貌地展示所提供的服务由程序呈现给用户，并友好地引导用户进行操作。
1.突出重点
每个页面应该有明确的重点，以便用户每次进入新页面时都能快速了解页面内容。 焦点确定后，应避免页面上出现其他分散注意力的项目，影响用户的决策和操作。
反例
该页面的主题是查询，但却添加了很多与查询无关的业务条目，与用户期望不一致，很容易导致用户迷失。
校正信号
删除任何与用户目标无关的内容，明确页面主题，在技术和页面控件允许的情况下提供对用户目标有帮助的帮助内容，例如*近搜索词、常用搜索词等。
反例
操作没有优先级，用户别无选择。
校正信号
首先，要避免并行太多的操作供用户选择。 当多个操作必须并行时，需要区分主次操作，以降低用户选择的难度。
2. 流程清晰
为了让用户能够顺利地使用页面，当用户在执行某个操作过程时，应避免因用户目标过程以外的内容而打断用户。
反例
用户本想搜索，但进入页面时被突然的抽奖弹窗打断； 对抽奖不感兴趣的用户是非常不友好的干扰，增加了开发团队的愤怒； 而即使有些用户确实被“有吸引力”的抽奖所吸引，在离开抽奖的主流程后，也可能会忘记*初的目标，进而可能会失去对产品真正价值的使用和理解。
二、明确
作为一个负责任的开发，用户一旦进入我们的小程序页面，就有责任和义务清楚、明确地告知用户自己在哪里、可以去哪里，以保证用户可以在页面中自由穿梭，无需担心。迷路。 只有这样，才能为用户提供安全、愉快的体验。
1.导航清晰，来去方便
导航是保证用户在浏览网页时不迷路的*关键因素。 导航需要告诉用户我在哪里，我可以去哪里，如何返回等。首先，微信系统中所有小程序的所有页面都会有微信提供的自己的导航栏，可以解决我在哪里，如何统一回去的问题。 在微信级导航中保持一致的体验，有利于用户在微信中形成相对统一的体验和交互认知，而不需要在小程序和微信之间切换时增加学习成本或使用习惯。
微信导航栏
微信导航栏直接继承自客户端。 除了导航栏的颜色之外，开发不需要也无法自定义其他内容。 但开发需要指定小程序各页面之间的跳转关系，以便导航系统能够合理工作。
微信导航栏分为导航区、标题区和操作区。 导航区域控制节目页面流程。 目前导航栏分为深色和浅色两种基本颜色，在iOS和显示中有所不同，如下图所示：
导航区域（iOS）
导航区域通常只有一个操作，就是返回上一级界面。 开发可以定义其内容，但样式不能修改。
导航区()
通常，系统导航左侧唯一的操作是“离开小程序，返回微信，程序将在后台运行”。
当用户进入小程序二级页面时，我们建议小程序本身可以设计返回操作，用户也可以通过系统自带的硬件后退按钮返回上一级。
配色方案
小程序导航栏支持基本的背景颜色自定义功能。 所选颜色需要在实用性的前提下搭配和谐。 微信建议参考以下选色效果：
页内导航
开发可以根据自己的功能和需求在页面内添加自己的导航，并保持不同页面之间的导航一致。 但受限于手机屏幕尺寸，小程序页面的导航应尽可能简单。 如果页面只是一般的线性浏览，建议只使用微信导航栏。
微信控件库提供标签导航供开发选择。 标签栏可以固定在页面顶部或底部，方便用户在不同标签页之间切换。 为了确保可点击区域，选项卡项不应超过 4 个，并且一个页面上不应出现多于一组的选项卡栏。
2.减少等待并及时反馈
页面等待时间过长，会引起用户的不良情绪。 使用微信小程序项目提供的技术可以很大程度上缩短等待时间。 即便如此，当不可避免地出现加载等待的情况时，也需要及时反馈，以缓解用户等待的坏心情。
起始页设计
小程序的上线也是小程序在微信内容中一定程度上展现品牌特色的页面之一。
该页面将突出显示小程序品牌特征和加载状态。
除启动页上的LOGO品牌展示外，页面上的所有其他元素，例如加载进度指示器，均由微信提供，无法更改。 无需开发开发。
下拉区域
所有微信小程序页面，下拉的时候，都会出现微信设计的统一设计区域。 品牌展示区由品牌名称和微信小程序提醒组成，目的是强化品牌和用户对小程序产品认知。
下拉标记（iOS 深色和浅色方案）
微信提供了深色和浅色两套配色方案。 如图所示，文本颜色无法自定义。 开发在自定义背景颜色时，要注意保证下拉标记的识别。
下拉标记（深色和浅色方案）
微信下拉提示是为了让用户明确小程序的归属，防止诈骗和作弊。 这里的标记有深色和浅色两种选择，并且文字颜色不能自定义。 自定义背景颜色时，开发要注意保证下拉标记的可见性。
页面刷新交互（iOS）
开发可以通过下拉交互的方式自定义需要刷新的页面，微信将为此类交互提供标准的能力和样式。 风格上，刷新图标和下拉图标进行了颜色捆绑，分为深色和浅色两种方案。 开发在使用时要注意标题文字、下拉图标、刷新图标的和谐统一。 然而，当用户在此类页面上进行下拉交互时，就会出现微信小程序页面的标准加载动画。 开发不需要开发自己的样式。
如果开发没有在页面顶部设计tab，如果定义了可以通过下拉动作刷新页面，则刷新后标题下的小程序品牌展示区域会出现加载状态提示栏和页面顶部。 开发目前无法定义这种加载效果。
开发定义页面顶部的tab，并定义该tab下的内容页可以通过下拉刷新后，刷新后小程序品牌展示区顶部tab下会出现加载状态提示，并且只会刷新当前页面内容。 目前开发无法自己定义这种加载效果。
页面刷新交互()
与iOS相同，风格上，下拉刷新图标和下拉Logo进行了颜色捆绑，并分为深色和浅色两种方案。 开发在使用时要注意标题文字、下拉标识和刷新图标的和谐统一。
微信下拉标签错误用例
请避免以下错误使用情况，以确保信息的可见性和页面的可用性。
页内导航
微信控件库提供了深浅标签导航方案供开发选择。 标签栏需要固定在页面顶部，方便用户在不同标签页之间进行切换。 为了保证可点击区域，标签项不应超过4个，一个页面上不应出现超过一组标签栏。
选项卡栏的选中状态默认为 100% 纯色，未选中状态为 60% 不透明度。 可以自定义所选状态的颜色。 在自定义颜色选择中，保持选项卡的可用性、可见性和可操作性非常重要。
页面加载反馈
开发可以在小程序中自定义页面内容的加载样式。 建议无论是本地使用还是全局使用，自定义加载样式都应尽可能简洁，并使用简单的动画来告知用户加载过程。 开发还可以使用微信提供的统一页面加载样式，如图示例。
模态加载
模态框的加载样式将覆盖整个页面。 由于无法明确告知具体加载位置或内容，可能会引起用户的焦虑，因此应谨慎使用。 除某些全局操作外，请勿使用模态 。
部分加载反馈
它旨在触发加载页面上的部分反馈。 这种反馈机制更有针对性，页面改动较小。 是微信推荐的反馈方式。
加载反馈注意事项
A。 如果加载时间较长，应提供取消操作，并使用进度条显示加载进度。
b. 加载过程中，应保持动画效果； 没有动画效果的加载很容易给人一种界面卡住的错觉。
C。 不要在同一页面上使用超过 1 个加载动画。
结果反馈
除了在用户等待时及时反馈之外，还需要对操作结果进行清晰的反馈。 根据实际情况，可以选择不同的结果反馈方式。 对于页面本地操作，可以在操作区域直接反馈。 对于页面级的操作结果，可以使用toast、弹窗或者结果页面展示。
页面部分操作结果反馈
对于页面本地操作，可以在操作区域直接反馈，例如点击多选控件前后，如下图所示。 对于常用的控件，微信设计中心提供了控件库和WeUI控件库，控件的设计具有完整的操作反馈。
页面全局运营结果——toast
其中，toast适合轻量级的成功提示，1.5秒后自动消失，不中断进程，对用户影响不大。 适合不需要强调成功主题的操作提醒。 请特别注意，toast 表单不适用于任何错误通知。
页面全局操作结果——弹出框
需要用户清楚了解的操作结果状态可以通过弹框提示，并附上下一步操作指南。
页面全局操作结果—结果页
对于操作结果已经是当前流程结束的情况，可以通过操作结果页面进行反馈。 这种方式是*强烈、*清晰的方式告知用户操作已经完成，并且可以根据实际情况给出下一步的指导。
3、异常可控，有出路
在设计任何任务和流程时，异常状态和流程往往很容易被忽视，而这些异常场景往往是用户*沮丧、*需要帮助的时候。 因此，需要特别注意异常状态的设计，给用户必要的帮助状态提示，告知解决办法，使其有退路。
要防止出现用户异常状态卡在某个页面无处可去的情况。 图中提到的弹窗和结果页面都可以作为异常状态的提醒。 另外，在表单页面，尤其是表单项较多的页面，应明确指出错误的项，以便用户修改。
异常状态——表单错误
表单报告错误，在表单顶部告知错误原因，并标识错误字段提示用户修改。
三、方便、优雅
从PC时代的物理键盘和鼠标，到移动时代的手指，虽然输入设备大大简化，但手指操作的准确性却远不如键盘和鼠标精确。 为了适应这种变化，开发需要在设计过程中充分利用手机的特性，让用户能够方便、优雅地控制界面。
1、减少投入
由于手机键盘面积小且密集，导致输入困难，容易造成输入错误。 因此，在设计小程序页面时，为了尽量减少用户的输入微信小程序设计的基本原则是微信设计中心针对微信内上线的设计指南及建议，可以利用现有的界面或者其他易于操作的选择控件来改善用户的输入体验。 。
减少输入，巧妙使用界面
例如下图，添加银行卡时，摄像头识别SDK接口，帮助用户输入。 此外，微信团队还开放了地理位置接口等各种SDK接口（具体参见微信JS-SDK）。 充分利用这些接口将大大提高用户输入的效率和准确性，从而优化体验。
除了使用界面之外，当用户必须手动输入时，尽量让用户做出选择，而不是键盘输入。 一方面，回忆很容易记住，并且允许用户从有限的选项中进行选择通常比完全依赖记忆输入更容易； 另一方面，仍然认为手机键盘密集的单键输入很容易导致输入错误。 例如，图中，在用户搜索时提供搜索历史快捷选项，将有助于用户快速搜索，减少或避免不必要的键盘输入。
2.避免误用
在手机上，我们用手指触摸屏幕来控制界面。 手指点击的准确度远不如鼠标。 密集并导致误用。 当原本在电脑屏幕上使用的界面未经任何适配而简单地直接移植到手机上时，往往很容易出现这样的问题。
由于手机屏幕分辨率不同，*适合点击的像素尺寸并不完全相同，但换算成物理尺寸大致在7mm-9mm之间。 微信提供的标准控件库中，各种控件都考虑到了页面点击效果以及不同屏幕的适配，因此建议使用或模仿标准控件尺寸进行设计。
3.使用接口来提高性能
微信设计中心推出了一套Web标准控件库，包括设计控件库和WeUI重构代码库。 这些控件充分考虑了移动端页面的特点，能够保证其在移动端页面的可用性和操作性能。 ; 同事们，微信网页开发团队也在不断完善和扩展微信JS-SDK接口，并提供微信公共库。 使用这些资源不仅可以为用户提供更快的服务，而且对于提高页面性能也有很大的作用。 改善了用户体验。
四、团结稳定
除了上述原则外，建议接入微信的小程序要时刻注意不同页面之间的统一性和连续性，尽量在不同页面上使用一致的控件和交互方式。
统一的页面体验和连续的界面元素，有助于以*小的学习成本实现使用目标，减少页面跳转带来的不适感。 正因为如此，小程序可以根据需要使用微信提供的标准控件，以达到统一稳定的目的。
五、视觉规范
为了方便设计师进行设计，微信提供了一套可供网页设计和小程序使用的基础控件库，方便开发调用。
预览地址：或长按下方二维码：
1. 字体规格
常用的字体大小有20、18、17、16、14、13、11（pt），使用场景如下：
微信字体的使用与运行系统字体一致。 以导航为例，iOS及对应字体如下：
导航（iOS 和）
字体颜色
主要内容为黑色，次要内容为灰色； 时间戳和表单的默认值为浅灰色； 大段描述内容且属于主体内容为半黑；
蓝色为链接颜色，绿色为完成颜色，红色为错误颜色按下和状态，分别降低透明度为20%和10%；
2. 列出视觉规格
3.表单输入视觉规范
4. 按钮使用原则
列表外部按钮的文本条件
按钮高度为 44px，使用：颜色#/#字体大小 18pt。 可点击状态下文字调整透明度为60%； 不可点击状态下文字调整透明度为30%。
列表外部按钮的文本条件
按钮的高度为25px：颜色#/#字体大小14pt
页面线性按钮上的文本标准
使用按钮高度为35px：颜色#/#字体大小16pt
5. 图标使用原则
-
微信设计中心#/
B兄看到这份文件时，发现文章中有很多错别字。 他花了一个小时从头到尾仔细检查，把语法问题或者错别字一一改正。 可能有些错误，请指正，谢谢。
还没转发？
回复阿里查看“说实话！千万不要来阿里上班”
回复薪资 查看完整版《这可能是北半球薪资福利*好的公司：腾讯》
回复腾讯查看《一分钟了解腾讯*强大的群体：设计师》
回复图查看《一张图看懂在腾讯和阿里巴巴工作的区别》完整版
回复另一张图查看“一张图看懂腾讯和阿里巴巴的企业文化”
