微信小程序设计规范

news2025/7/10 9:31:43

        一、宏观角度
        微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的,旨在微信生态类建立有号、高效、一致的用户体验的同时,最大程度顺应和支持各业务需求设计,实现用户与程序的共赢。

        二、清晰明确
        作为一个负责任的开发者,一旦用户进入我们的小程序页面,就有责任和义务清晰明确告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路,这样才能为用户提供安全的愉悦的使用体验。减少等待,反馈及时。页面的过长时间的等待会引起用户的不良情绪,使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此,当不可避免的出现了加载和等待的时候,需要予以及时的反馈以舒缓用户等待的不良情绪。

        三、设计尺寸和区域
        微信小程序的设计只需要以iPhone6屏幕尺寸750x1334px为视觉稿进行设计即可,因为微信小程序以rpx为css尺寸单位,rpx可以根据屏幕宽度进行自适应,规定屏幕宽度为750rpx,因此在iPhone6设计稿上1px=1rpx,在尺寸换算上就会很简单。
        1、对于页面局部的操作,可在操作区域予以直接反馈。
        2、对于常用控件,微信设计中心已提供控件库及WeUI控件库,其中的控件都已设计有完整的操作反馈。
        3、页面全局操作结果——toast
        其中toast适用于轻量级的成功提示,1.5秒后自动消失,并不打断流程,对用户影响较小,适用于不需要强调成功专题的操作提醒。特别注意toast形式不适用于任何错误提醒。
        4、页面全局操作结果——弹框
        对于需要用户明确知晓的操作结果状态可通过弹框来提示,并可附带下一步操作指引。
        5、页面全局操作结果——结果页
        对于操作结果已经是当前流程的终结的情况,可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成,并可根据实际情况给出下一步操作的指引。

        四、统一稳定
        除了以上所提到的种种原则,建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性,在不同的页面尽量使用一致的控件和交互方式。统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标,减轻页面跳动所造成的不适感。正因如此,小程序可根据需要使用微信提供的标准控件,以达到统一稳定的目的。

        五、微信小程序相关素材的几个尺寸

        1、小程序头像的图片尺寸大小 144px*144px

        2、小程序菜单icon尺寸大小,81px*81px

        3、小程序轮播图的尺寸长宽比例是16:9

        4、小程序分享图片尺寸长宽比例是5:4

        5、小程序全屏封面用主流尺寸 1080 x 1920 来做设计稿尺寸,也可使用其等比例缩放的尺寸,如:540 x 960 , 文件大小150KB以内,JPG或PNG格式

        rpx单位是微信小程序中css的尺寸单位的,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750物理像素,1rpx=0.5px=1物理像素。

设备rpx换算px(屏幕宽度/750)px换算rpx(750/屏幕宽度)
iPhone51rpx=0.42px1px=2.34rpx
iPhone61rpx=0.5px1px=2rpx
iPhone6s1rpx=0.552px1px=1.81rpx

注:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。

建议:设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px,这样的话,设计图上量出来的尺寸是多少px就是多少rpx,至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406029.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PHP+MySQL制作简单的用户注册登录界面(注释超详细~附源代码)

成果 网站能实现判断账户信息是否合法,同时附带验证码验证登录。在用户输入正确的用户名与密码后会有登录成功的弹窗,若输入的账户不存在,则会跳转至注册页面。 实现过程 项目文件分配: 1.首先创建login.html 实现的是用户登录…

vue-element-admin--使用体验

原文网址:vue-element-admin--使用体验_IT利刃出鞘的博客-CSDN博客 简介 说明 本文用示例介绍vue-element-admin的用法。 vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国…

小满Vue3第三十九章(Vue开发桌面程序Electron)

建议视频教程小满Vue3(第三十九章 electron桌面程序)_哔哩哔哩_bilibili Electron官网Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS. 我们用的VsCode 也是 electron 开发的 electron 内置了 Chromium 和 nodeJS 其中…

【最简便方法】element-plus/element-ui走马灯配置图片以及图片自适应

首先展示官网给的模板 <template><el-carousel :interval"4000" type"card" height"200px"><el-carousel-item v-for"item in 6" :key"item"><h3 text"2xl" justify"center">…

前端实现文件下载的方法

前端实现文件下载 前端下载一般分为两种情况&#xff0c;一种是后端直接给一个文件地址&#xff0c;通过浏览器打开就可以下载&#xff0c;另外一种则需要发送请求&#xff0c;后端返回二进制流数据&#xff0c;前端解析流数据&#xff0c;生成URL&#xff0c;实现下载。 一、…

css添加边框阴影

css边框阴影如何设置&#xff1f; 语法&#xff1a; <style> box-shadow: h-shadow v-shadow blur spread color inset; </style> 取值&#xff1a; h-shadow&#xff1a;必需设置的值&#xff0c;定义水平阴影的位置。允许负值。 v-shadow&#xff1a;必需设置…

微信小程序web-view与H5 通信方式探索

本文作者为奇舞团前端开发工程师小程序简介小程序是一种全新的连接用户与服务的方式&#xff0c;它可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。需求微信小程序 H5 混合开发就是 在一个小程序中&#xff0c;采用部分小程序原生页面&#xff0c;部分通过…

Vue组件通信——父子组件通信的四种方法

引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from /views/components/ChildrenDemo Vue.component(ChildrenDemo,ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)&#xff0c;第二个参数&#xff1a;引入的组件名&#xff08;一般都与组件名保持…

【前端开发环境安装、配置、项目搭建全教程】

前端开发环境安装、配置、项目搭建全教程 1.Node环境安装 简单的说 Node.js 就是运行在服务端的 JavaScrip&#xff0c;基于 Chrome JavaScript 运行时建立的一个平台&#xff0c;Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境&#xff0c;基于 Google 的 V8 引擎&…

uniapp页面跳转的几种方式

uniapp页面跳转的几种方式 一、uni.navigateTo 定义&#xff1a;保留当前页面&#xff0c;跳转到应用内的某个页面&#xff0c;使用uni.navigateBack可以返回到原页面。使用&#xff1a; // 1.不传参 uni.navigateTo({url:./home/index }); // 2.传参字符串 uni.navigateTo(…

Vue后台管理系统模板

推荐一些 Vue 常用后台管理系统模板 前言 Vue.js 是一个目前比较流行的前端框架&#xff0c;已经到了前端人人都会的地步&#xff0c;今天这里为大家罗列一下基于 Vue 的后端管理的框架。目前比较流行和 Vue 搭配的 UI组件 有Element-UI、iview、Bootstrap-Vue、Ant-Design-V…

项目中报错 Uncaught (in promise)

项目中报错 Uncaught (in promise) 一、问题&#xff1a;当你调用 Promise.reject() 回调的时候&#xff0c;Chrome 控制台中出现一条警告消息“Uncaught (in promise)”。 例如你简单封装axios的响应拦截器的时候&#xff1a; // 响应拦截 service.interceptors.response.u…

VUE 富文本编辑器 tinymce - - - - 对懒人 非常友好 一看就懂

首先个人觉得 tinymce这个富文本编辑器是最好用 最编辑的 &#xff0c;对懒人非常友好 的一款编辑器&#xff0c;刚 有哟个项目 &#xff0c;就遇到了 使用富文本编辑的坑 &#xff0c;因为赶项目进度自己在网上随便找了一个富文本编器&#xff0c;就是 quill 这个 坑 实在太多…

【个人网站】零基础个人网站搭建完整教程(附免费源码)

零基础个人网站搭建完整教程&#xff08;一&#xff09; 内容包括&#xff1a;前端搭建后端搭建源码网盘链接搭建服务器网站上线&#xff08;完整教程&#xff09; 从0到1搭建网站零基础个人网站搭建完整教程&#xff08;一&#xff09;前言一、前端搭建一、副页设计1.显示文字…

最新Eclipse安装教程(2022-09)

前言 现在是在校大学生&#xff0c;未来想从事大数据相关的工作&#xff0c;目前在b站学习大数据&#xff0c;写这些的目的是为了整理、巩固学过的知识&#xff0c;以后自己工作了也可以回头看看&#xff0c;如果还能够帮助到大家&#xff0c;就再好不过了&#xff01; 一、Ec…

Python Flask框架-开发简单博客-项目布局、应用设置

作者&#xff1a;Eason_LYC 悲观者预言失败&#xff0c;十言九中。 乐观者创造奇迹&#xff0c;一次即可。 一个人的价值&#xff0c;只在于他所拥有的。所以可以不学无术&#xff0c;但不能一无所有&#xff01; 技术领域&#xff1a;WEB安全、网络攻防 关注WEB安全、网络攻防…

Vue3父子组件通讯一目了然

文章目录&#x1f31f; 写在前面&#x1f31f; 父 &#x1f449; 子&#x1f31f; 子 &#x1f449; 父&#x1f31f; 写在最后&#x1f31f; 写在前面 专栏介绍&#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章&#xff0c;应粉丝要求开始更新 Vue3 的相关技术文…

前端直接生成GIF动态图实践

前言去年在博客中发了两篇关于GIF动态生成的博客&#xff0c;GIF图像动态生成-JAVA后台生成和基于FFmpeg的Java视频Mp4转GIF初探&#xff0c;在这两篇博客中都是采用JAVA语言在后台进行转换。使用JAVA的同学经过自己的改造和开发也可以应用在项目上。前段时间有朋友私下问&…

chatgpt这么火?前端如何实现类似chatgpt的对话页面

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;…

【毕业季|进击的技术er】作为一名职场人,精心总结的嵌入式学习路线图

活动地址&#xff1a;毕业季进击的技术er 文章目录0、作者介绍1、前言2、嵌入式基础必备知识2.1、学习内容2.2、学习建议2.3、学习资料3、嵌入式入门篇——51单片机3.1、学习内容3.2、学习建议3.3、学习资料4、STM32进阶篇4.1、学习内容4.2、学习建议4.3、学习资料5、小而美的R…