微信小程序组件设计规范分享

news2024/12/23 1:54:38

WeUI是一套与微信原生视觉体验一致的基本样式库。微信官方设计团队为微信网页和微信小程序量身定制设计,使用户感知更加统一,包括button、cell、dialog、progress、toast、article、actionsheet、微信weui开发团队可以直接使用icon等各种元素。下面资源社区中WeUI微信小程序组件库的WeUI设计规范和技巧,帮助设计师快速启动WeUI的产品设计。

微信小程序组件设计规范

weui的所有页面,包括嵌入式网页和插件的小程序,都将在其右上角放置官方的小程序菜单。开发人员不能定制内容,但可以自由选择颜色匹配的深度来适应weui页面的设计风格。在即时设计中,可以直接免费使用两种颜色的weui微信小程序组件库。

​1、轻视觉

在设计WeUI微信小程序时,我们需要尽可能简化界面。当用户第一次点击微信小程序时,繁琐的页面会影响用户的第一次体验。当文章、积分等内容出现在页面上时,搜索应弱化显示。因此,搜索可以逐渐从原来的搜索框转变为右上角的图标。当有搜索需求时,可以找到,不会给用户的普通预览带来麻烦。

2、导航栏

微信对导航的官方要求是导航清晰,来去自如。导航是为了确保用户在微信应用程序中浏览他们感兴趣的内容。导航需要告诉用户目前在哪里,你可以去哪里,以及如何回到初始页面。微信在小程序中不提供统一的导航栏样式,开发人员可以根据需要设计微信应用程序主页和二级页面界面导航。建议所有二级页面的左上角提供返回上一级页面的操作。此外,许多具有全屏手势的操作系统也可以通过界面边缘向右滑动,返回上一级小程序或微信页面。

3、弹窗设置

WeUI页面整体操作结果-图标弹出提示图标弹出提示适用于轻量级成功提示,1.5秒后自动消失,不中断过程,对用户影响小,适用于不需要强调的操作提示,如成功提示。特别注意,该形式不适用于错误提示,因为错误提示需要清楚地告知用户,因此不适用于闪光弹出提示。

4、按钮

微信小程序的官方文档提供了各种按钮的默认风格,设计师可以作为参考。至于实际项目中按钮的风格、颜色和状态,可以根据实际项目进行定制。对于熟悉网络应用设计规范的设计师,特别是iOS平台软件设计,网络用户界面微信小程序设计容易掌握,只是微信小程序的平台特点,需要遵循官方设计规范,加上网络用户界面微信小程序和许多不完善的功能组件,功能和性能需要进一步提高。

5、颜色设计

搭配时需要先选择主色,再确定副色。配色目标可以根据产品的特点来确定。副色不能与主色相得益彰。一般选择主色后,WeUI微信小程序的整体基调就会确定。但是,副色的使用会影响整体色调。我们应该尽量简化颜色的层次。过多的层次也会影响用户的视觉效果。

6、状态栏

根据微信小程序的官方文档,不需要设计状态栏,因为状态栏遵循每个手机操作系统。例如,内容区域,小程序胶囊,状态栏不需要设计。设计师只需要根据需要使用安卓和iOS两个状态栏组件。

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

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

相关文章

基于postman测试接口(整套接口测试)(附视频教程加源码)

目录 可以解决的问题 开启控制台 单个测试尝试 使用请求结果当参数 打印结果(JSON) 自定义可视化结果 随机参数 测试用例连接 一键测试接口集合 从swagger导入接口 自定义全局变量 可以解决的问题 几百个接口人工测试接口过于繁杂大多测试无法使用请求结果当参数可以…

(转载)从0开始学matlab(第12天)—选择语句(if、switch、try/catch)

选择结构可以使 MATLAB 选择性执行指定区域内的代码 ( 称之为语句块 blocks),而跳过其他区域的代码。选择结构在 MATLAB 中有三种具体的形式 :if 结构, switch 结构和try/catch 结构。 1 if 结构 1.1if语句的基本形式 if 结构的基本形式如下: 其…

菜鸡shader:L3三色环境光材质、阴影及光衰

三色环境光材质 先放上最终效果这里将环境光分为上中下三层,顶层是红色的,中间那层是绿色的,下层则是蓝色的。环境光遮蔽效果则是直接采样事先准备好的AO贴图。 首先是上层环境光: 这里我们只需要法线向量的第二个分量&#xf…

casbin基于RBAC模型实现权限管理

在casbin中权限都是基于匹配规则和访问控制模型实现的,除了上一章的ACL的实现方式,还有一个常用的访问控制模型RBAC。该模型带上了用户角色,基本满足大多数角色管理的系统。 在RBAC模型中多了一个角色的策略机制,其访问模型规则如…

消息中间件 - RabbitMQ篇之入门及进阶

这里写自定义目录标题 一. RabbitMQ简介1.1. 消息中间件1.1.1.什么是消息中间件1.1.2.消息中间件的传递模式1. 1.2.1 点对点1. 1.2.2 发布订阅模式 1.1.3 消息中间件种类1.1.4 消息中间件的作用 2. RabbitMQ介绍2.1.RabbitMQ的起源2.2.RabbitMQ的安装及简单使用 3. RabbitMQ的简…

Unity UI -- (6)增加Toggle和Slider

在前面的小节中,我们已经有了一个空的设置菜单。现在让我们来添加设置选项。 在本节最后,我们的设置菜单的样子参考如下: 添加一个音乐开关(Toggle) 现在让我们来增加一个toggle,让用户能够通过它来对场景的…

多功能语音芯片​NV040C的应用,为洗地机开辟新的应用领域

随着科技的快速发展,智能化和自动化已经成为了各个行业发展的主流趋势。传统的家庭洗拖工作日渐被各类洗地机、扫地机器人等取代,其中作为洗地机作为近几年家庭清洁的好物。近年来,不少洗地机厂商开始将语音芯片技术应用到产品中,…

多商户商城系统开发功能优势与选择技巧

电商行业的持续发展,让越来越多的商家企业开始选择入驻多商户商城,通过该系统不仅能够为消费者提供更加便捷良好的购物体验,而且也能够为企业提供一个高效稳定的电商平台,可以说是未来电商行业发展的重要趋势。那么多商户商城系统…

Milk -v 开发板烧录系统以及ssh连接

Milk -v 开发板烧录系统以及ssh连接 0. 前言1. 系统下载2. 驱动安装3. ssh连接 0. 前言 操作系统:Windows10 专业版 开发板:Milk -v 准备读卡器、内存卡、Typec 数据线 Milk-V开发板官方文档 到手后它的外形和宣传图片是一致的,但是更加的…

微信小程序云开发学习记录--1

目录 1.配置小程序项目 2. 云创建 3.新建云文件夹 4.数据库的建立和使用 5.增、删、改、查四种数据库基本操作 增加数据 查询数据 修改数据 删除数据 拿到微信小程序,首先可以先配置好自己的服务器或者是云环境,服务器的方法就不说了&#xff0…

前端实训——Day01

前言 学校最近开始实训周了,一上就是一个月,本来想在课上学点考研的东西的,但是无奈任务重,而且最后还能有点小奖励,就认真学了,再者说,html也挺重要的,学一学也不算浪费时间。 软…

Linux——安装tomcat并部署项目

目录 1、准备阶段 2、具体步骤 2.1、下载tomcat安装包 2.2、上传tomcat安装包 2.3、启动tomcat 2.4、访问页面 3、部署Maven项目至tomcat 3.1、打包Maven项目 3.2、上传打包后的war包至Linux 3.3、修改连接数据库配置文件中的ip 3.4、访问项目 3.5、直接访问ip访问…

Promise理解+ JS 的执行机制

做一道题,理解一下: function getPrinterList() {let res 初始setTimeout(() > {res 1},1000)return res }let res getPrinterList() console.log(res); //输出初始 在getPrinterList函数中,先分清同步异步. JS执行语句时,会区分同步异步,把所有的同步放在同步队列中,把…

【Python pymongo】零基础也能轻松掌握的学习路线与参考资料

Python pymongo是一款基于Python的MongoDB数据库的驱动程序,它提供了操作MongoDB数据库的接口和方法。学习Python pymongo可以帮助开发者更好地使用MongoDB数据库,从而实现更好的数据存储和管理。在这篇文章中,我们将介绍Python pymongo的学习…

chatgpt赋能Python-python_bin__

Python中的bin()方法:将数字转换为二进制字符串 Python中内置的bin()函数是一个非常有用的工具,它可以将一个整数转换成一个二进制字符串。这个函数非常简单易用,对于任何需要进行二进制操作的开发者来说都是一个必不可少的工具。 什么是二…

chatgpt赋能Python-python_bio包

Python Bio包:简介、功能和应用 Python Bio包是什么 Python Bio包是一套专门为生物信息学而设计的Python模块。它包含了许多优秀的工具和算法,可以帮助生物学家们解决各种生物问题。Python Bio包主要由五个子模块组成: Bio.Seq&#xff1a…

EXP-00026: conflicting modes specified

今天下午现场项目经理问了一个问题,直接上截图,问是不是客户端不兼容? C:\Users\Administrator>exp usr_jwc/Test#123192.16.50.100:1521/orcl ownerusr_jwc fully fileC:\ABCD20230521.dmp logC:\imp_ABCD20230521.log Export: Release…

day38_Servlet

今日内容 零、 复习昨日 一、Servlet 二、HTTP 三、HttpServlet 零、 复习昨日 见晨考 一、Servlet 1.1 介绍 javaweb开发,就是需要服务器接收前端发送的请求,以及请求中的数据,经过处理(jdbc操作),然后向浏览器做出响应. 我们要想在服务器中写java代码来接收请求,做出响应,我…

chatgpt赋能Python-python_aipspeech

Python Aipspeech介绍与优势分析 什么是Python Aipspeech? Python Aipspeech是一种基于Python编程语言的语音识别API,可以实现语音转文字、语音合成、语音唤醒等功能。它基于Aipspeech强大的语音识别引擎,可以实现高精度的语音识别&#xf…

香港VPS服务器如何屏蔽指定访客ip?

​  如果你是一个香港VPS服务器的管理员,你可能会遇到一些不良用户或者恶意攻击者,这些人会尝试通过不断的访问和攻击你的网站来破坏你的网站的运行。如何保护你的网站,你需要使用一些方法来屏蔽这些指定的访客IP。 首先,你需要…