小程序设计须知 (小程序设计要求)

本文目录导航：

• 小程序设计须知
• 据说你预备开发小程序，这套设计规范送给你
• 微信WeUI设计规范具体解读
• 微信小程序组件设计要点

小程序设计须知

小程序设计的外围在于繁复与便利，它谋求的是无需下载、即点即用的用户体验。

设计者需充沛了解其独个性，以确保开收回的产品不只能满足用户需求，还能在微信生态中施展最佳效劳。

本文将围绕小程序设计的关键点倒退探讨，以助设计师更好地把握设计规范，制造出高效且用户友好的小程序。

首先，设计稿的尺寸规范至关关键。

小程序驳回的是750*1334的二倍图设计，单位为rpx（1px=1rpx），以顺应不同屏幕宽度。

设计稿只有一套一倍尺寸的切图即可，这大大简化了开发流程。

导航栏设计需遵照一致规格：128px高度，仅允许颜颜色整，不允许突变或透明度变动（游戏类小程序例外）。

按钮样式仅限白色与彩色，不透明度为20%。

这些限度有助于坚持界面的分歧性和明晰度。

标签分页导航（标签栏）设计需防止加大关键配置图标，以确保用户界面的整洁与分歧性。

同时，防止经常使用投影成果，以简化开发流程并缩小前期保养的费事。

图标无法增加动效，组件设计应遵照一致规范，标签数量坚持在2-5个，以提高界面的易用性。

视频允许是小程序设计中的一个限度点。

准则上，视频不应出如今滚动控件中，且视频窗口最多只能固定在界面上面。

这需要设计者在内容选用与出现方式上启动翻新，以满足用户需求。

弹窗设计需留意不笼罩导航栏，以坚持界面的完整性和用户的导航体验。

只管小程序正逐渐开明更多配置，但目前代码包大小限度在2M以内，因此在设计时应尽量简化配置，确保内容精炼，以提供更方便和优质的服务。

综上所述，小程序设计需紧扣其轻量级、高效服务的外围思念。

经过遵照上述设计要点，设计师可以有效优化小程序的用户体验，使其在微信生态中锋芒毕露，为用户带来愈加方便、优质的服务体验。

据说你预备开发小程序，这套设计规范送给你

欢迎关注独立开发者Larry的分享。

微信小程序因其低老本、短周期和低保养老本，吸引泛滥开发者投入。

当天，我将深化解析微信小程序的设计规范，防止经常出现的设计圈套，助力你的开发环节。

首先，设计尺寸方面，小程序设计以iPhone 6的750x1334px为基准，经常使用rpx单位。

rpx能依据屏幕宽度智能调整，确保1px在iPhone 6下等于1rpx，尺寸转换方便明了。

在设计区域，微信小程序会在页面右上角固定显示官网菜单，开发者无法改变其内容，但可以选用基本配色。

设计时务必思考菜单区域的规划和交互元素，防止或者的抵触。

字体规范方面，遵照微信原生视觉规范，经常使用经常出现的字号，如20、18等。

字体颜色则有明白的规则，如主内容经常使用彩色，链接用蓝色，成功字样绿色，失误消息白色。

顶部导航栏（navigationBar）高度固定，仅可调整底色，自定义部分需留意与官网菜单区别。

底部标签栏（tabBar）用于分页切换，数量不宜超越4个，保障点击区域，可自定义图标和文案。

弹窗设计需留意其层级疑问，防止与导航栏抵触。

启动页则需突出品牌特色，其他元素由微信一致解决。

加载样式上，微信提供了多种规范，如页面下拉刷新、部分加载反应等。

最后，官网文档提供了设计资源，包含Sketch和PS的组件库，以及我团体整顿的样式和UI控件。

回复群众号『小程序设计规范』失掉下载链接。

假设你对产品内测感兴味，回复『加群』参与咱们的开发者社区。

微信WeUI设计规范具体解读

微信WeUI设计规范深化解析：

微信WeUI是一个与微信原生视觉体验坚持分歧的样式库，由官网设计团队为微信网页和小程序定制，以成功一致的用户感知。

包含button、cell、dialog等元素，WeUI组件库提供丰盛的设计资源，协助设计师极速启动产品设计。

微信小程序组件设计要点