[小程序]你也要开发小程序？设计规范少不了
你也要开发小程序？设计规范少不了
听说你准备开发小程序，这套设计规范送给你
目录：
1.设计尺寸
2.设计区域
3.字体规范
4.字体颜色规范
5.顶部导航栏 navigationBar
6.标签分页导航 tarBar
7.弹窗
8.启动页
9.加载样式
1.设计尺寸
2.设计区域
小程序的所有页面，包括小程序内嵌网页和插件，微信都会在其右上角放置官方小程序菜单，样式尺寸及布局如上图。开发者不可对其内容自定义，但可选择深浅两种基本配色以适应页面设计风格，
官方小程序菜单放置在界面固定位置，在设计界面时要预留出该区域空间，若要在此区域附近放置可交互元素，要特别注意交互事件是否会冲突，操作是否容易被使用。
3.字体规范
小程序的字体依然遵循微信原生视觉规范：微信内字体的使用与所运行的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 11(pt)，使用场景具体如上图。
4.字体颜色规范
无彩色——主内容Black黑色，次要内容Grey灰色；时间戳与表单缺省值Light灰色；大段的说明内容而且属于主要内容用Semi黑；
有彩色——蓝色为链接用色，绿色为完成字样颜色，红色为出错用色，Press与Disable状态分别降低透明度为20%与10%；
5.顶部导航栏 navigationBar
顶部导航栏一般简称导航栏，标准高度：128rpx，一般只做底色修改，标题区与导航区要进行自定义开发也是可以的，不过要注意设计的自有导航样式与微信官方小程序菜单样式要保持一定差异，以便区分。
6.标签分页导航 tabBar
1) 底部标签栏
小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等。特别说明：这里图标控件尺寸是54x54px，但是小程序开发需要的是81x81px，正好是1.5倍，需要注意一次给到位。
2.)顶部标签栏
顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。
7.弹窗
无论是APP还是Web网页，弹窗总是出现在页面的最上层，但是在小程序里导航栏跟标签栏的层级是最高的，以至于优先级较高的弹窗在这里也要有所收敛，因此在设计和开发时，都需要注意避免踩坑。
8.启动页
小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志（Logo）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。
9.加载样式
1)面下拉刷新加载
在微信小程序内，微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。
2)页面内加载反馈
开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。
3)模态加载
模态的加载样式将覆盖整个页面，由于无法明确告知具体加载的位置或内容可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。
4)局部加载反馈
局部加载反馈是只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式
5) 全局加载反馈
全局加载将加载图标放到导航标题左侧，使用标题栏提示加载小程序页面内容的过程。
see you again
[小程序]你也要开发小程序？设计规范少不了相关推荐
- 小六六平时的开发小技巧二（Nacos在服务配置中心的妙用）
前言 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/bin392328206/six-finger 絮叨 小六六打算开一个系列把自己平时的一些开发经验分享出来和 ...
- asp.net程序涉及案例_定制小程序 | 企业在开发小程序前需要满足哪些条件？
目前深圳小程序开发行业发展愈发迅速,小程序开发已成为目前的潮流趋势,制作属于自己的小程序刻不容缓.那么在开发小程序前,企业需要满足什么条件呢? 1.注册账号 万纵联小编告诉你,要想开发小程序,申请账号 ...
- 小程序资源服务器,开发小程序没有服务器资源
开发小程序没有服务器资源 内容精选 换一换 在性能优化时,需要遵循一定的原则,主要有以下几个方面:对性能进行分析时,要多方面分析系统的资源瓶颈所在,如CPU利用率达到100%时,也可能是内存容量限制, ...
- 微信小程序 - 使用 uni-app 开发小程序以及部分功能实现
文章目录 一.uni-app 1.简介 2.开发工具 3.新建 uni-app项目 4.把项目运行到微信开发者工具 二.实现tabBar效果 1.创建tabBar页面 2.配置tabBar 三.配置网 ...
- 用java开发一个简单的安卓程序,Android NDK开发简单程序分享（Hello Word!）
在之前的博客中已经为大家介绍了,如何在win环境下配置DNK程序,本篇我将带大家实现一个简单的Hello jni程序,让大家真正感受一下NDK开发的魅力.这里我们选择使用C+JAVA开发Android ...
- android studio小案例代码,AndroidStudio开发小相册实例
郑州app开发AndroidStudio开发小相册实例代码如下. 布局代码如下: java代码如下: package cn.xhhkj.xhhkjtest; import android.app.Ac ...
- 开发一个c语言程序要经过,开发c程序的基本步骤
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 开发c语言的七个基本步骤是: 1.定义程序目标.在开始写程序之前,应对希望程序要做什么有一个清晰的想法.考虑程序需要的信息,程序需 ...
- 用Java开发桌面应用程序（Swing开发GUI程序）
前面学过了面向对象基本概念.面向对象基本特征.Java基本包和API:异常.多线程.IO等. 基本概念 Swing:java中的一个包,负责开发GUI程序 GUI:图形用户界面,一般指可视化桌面系统中 ...
- 定制化开发小程序与模板开发小程序的区别？
随着小程序关注度的持续走高,越来越多的企业商家开始涌入这片流量红海抢占商机,都想用微信小程序给自己带来红利,但在小程序开发之前,很多人会纠结,深圳小程序模板开发和深圳小程序定制开发,该怎么选? 今天, ...
最新文章
- linux驱动：音频驱动（六）ASoc之codec设备
- java人名识别_HanLP中人名识别分析(示例代码)
- Oracle常用操作之登录名和密码大小写问题
- Nginx安装成Windows服务
- python中a=a+2与a+=2的区别
- make工具和Makefile基础语法(含有交叉编译、pthread_create()的处理)
- Effective C++学习第八天
- 【HDU - 5875】Function（线段树，区间第一个小于某个数的数 或 RMQ二分）
- syslog 向内存中缓存_动画：深入浅出从根上理解 HTTP 缓存机制及原理！
- Java 判断字符串的存储长度
- ORB-SLAM2介绍（1）
- php sesssion,php sesssion原理
- 研华数据采集卡如何采集压力信号转化为数字信号_感知世界的模拟量信号
- T6企业管理软件 5.1 - 导出单据列表显示“数据库已达到最大值”“创建临时表失败”
- 51单片机数码管闪烁c语言,AT89C51单片机数码管闪烁问题怎么解决
- 小鑫の日常系列故事（一）——判断对错 (sdut oj)
- HTML5期末大作业：京东商城网站设计——京东商城购物网站(4页) 基于Html+Css+javascript的网页制作（购物主题）
- Python库collections中的计数器（Counter）
- python简历模板_于是我用 Python 重写了那个上千 star 的“开源”简历模板
- web 框架的本质及自定义web框架 模板渲染jinja2 mvc 和 mtv框架 Django框架的下载安装 基于Django实现的一个简单示例...