Ⅰ 小程序设计稿能用828吗
微信小程序的设计只需要以iPhone6屏幕尺寸750x1334px为视觉稿进行设计即可,因为微信小程序以rpx为css尺寸单位,rpx可以根据屏幕宽度进行自适应,规定屏幕宽度为750rpx,因此在iPhone6设计稿上1px=1rpx,在尺寸换算上就会很简单。
在这里插入图片描述
小程序的所有页面,包括小程序内嵌网页和插件,微信都会在其右上角放置官方小程序菜单,样式尺寸及布局如上图。开发者不可对其内容自定义,但可选择深浅两种基本配色以适应页面设计风格,如下图。
在这里插入图片描述
字体规范
在这里插入图片描述
小程序的字体依然遵循微信原生视觉规范:微信内字体的使用与所运行的系统字体保持一致,常用字号为20, 18, 17, 16,14 13, 11(pt),使用场景具体如上图。
在这里插入图片描述
无彩色——主内容Black黑色,次要内容Grey灰色;时间戳与表单缺省值Light灰色;大段的说明内容而且属于主要内容用Semi黑;
在这里插入图片描述
有彩色——蓝色为链接用色,绿色为完成字样颜色,红色为出错用色,Press与Disable状态分别降低透明度为20%与10%;
顶部导航栏navigationBar
在这里插入图片描述
顶部导航栏一般简称导航栏,标准高度:128rpx,一般只做底色修改,标题区与导航区要进行自定义开发也是可以的,不过要注意设计的自有导航样式与微信官方小程序菜单样式要保持一定差异,以便区分。
标签分页导航tabBar
标签分页导航栏一般简称标签栏,标准高度:98rpx,可固定在页面的顶部或底部,便于用户在不同分页间做切换。标签数量在2-5个,为确保点击区域,建议标签数量不超过4项。一个页面也不应出现一组以上的标签栏,可根据产品需求选择或去掉标签栏。
1.底部标签栏
在这里插入图片描述
顶部标签分页栏颜色可自定义。在自定义颜色选择中,务必注意保持分页栏标签的可用性、可视性和可操作性。
弹窗
在这里插入图片描述
无论是APP还是Web网页,弹窗总是出现在页面的最上层,但是在小程序里导航栏跟标签栏的层级是最高的,以至于优先级较高的弹窗在这里也要有所收敛,因此在设计和开发时,都需要注意避免踩坑。
启动页
在这里插入图片描述
小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志( Logo )展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需开发者开发。
加载样式
无论是APP还是小程序,加载都不可避免,同样长时间的加载等待会引起用户的不良情绪,因此,在不可避免的加载和等待时,给予及时的反馈以舒缓用户等待的不良情绪都是必需的。小程序里除了自定义加载样式,更是依赖微信提供了一系列加载样式:
1.页面下拉刷新加载
在这里插入图片描述
在微信小程序内,微信提供标准的页面下拉刷新加载能力和样式,开发者无需自行开发。
2.页面内加载反馈
在这里插入图片描述
开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载,自定义加载样式都应该尽可能简洁,并使用简单动画告知用户加载过程。
3.模态加载
在这里插入图片描述
模态的加载样式将覆盖整个页面,由于无法明确告知具体加载的位置或内容可能引起用户的焦虑感,因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。
4.局部加载反馈
在这里插入图片描述
局部加载反馈是只在触发加载的页面局部进行反馈,这样的反馈机制更加有针对性,页面跳动小,是微信推荐的反馈方式。
5.全局加载反馈
Ⅱ 微信小程序图标变成白色
因为该手机主题所携带的微信图标是白色的。
微信图标变成白色的是因为该手机主题所携带的微信图标是白色的。解决步骤如下:1、首先在手机桌面上点击“主题”选项。2、在此页面可看见“精选主题”栏目,然后点击此页面的“精选主题”栏目后方的“更多”选项。3、然后在此页面继续点击“分类”选项,点击下方分类中的其中一种。4、然后在此页面选择然后点击一款主题样式。5、然后此时就会跳转到该主题的详情页,在此详情页点击下方的“下载”选项,下载完成后自动应用该主题,然后微信的图标的颜色就会变回去了。
微信小程序,小程序的一种,英文名Wechat-Mini-Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
Ⅲ 微信小程序 切换主题色
项目的需求是: 根据后台返回的配色信息,前端根据返回配色信息进行配色全局引用到小程序
网络和Google查了一番,都只查到用添加类的方式,但是不满足需求,因为类里面的颜色都是写死的,我是想要样式动态,最后无奈想到全局变量的方式解决切换主题
具体实现:(在app.js文件中将小程序主题加载完成)
改变tabbar(我这里只改的图标颜色,如需改变背景色,可添加修改背景样式进行修改)
页面实现改变主题色:
组件中实现改变主题色:(大致都是一样的处理方式)
总结: 这种方法虽可以改变主题,但是也是有缺陷,比如每个页面去添加行内样式和每个页面去改变导航栏主题色,都是比较繁琐和麻烦的,而且页面改变导航栏主题色的时候,会有瞬间闪屏(真机上展示效果比编辑器好多了,所以闪屏问题还算能接受),但最后实现了项目需求,也还不错.如你有更好的的方式方法,请留言告知,相互学习才能更快进步.
Ⅳ 如何为应用程序设计好看的图标
1. 颜色问题
图标的颜色选择是设计师面临的第一个问题,图标颜色的使用不仅要符合整体的设计理念,而且要让用户看起来简洁大方。这里小编可以给各位设计师一个好的建议,那就是在图标中使用您的应用配色方案。最好使用一种商标颜色作为主要颜色,这样效果会易受控制一点。
如何选择让用户过目不忘的颜色?
颜色的选择不仅是设计师的事情,而且还要经过品牌和营销的相互决策。如何选择让用户过目不忘的颜色是一个关键问题,所以在颜色选择之前,了解一定的配的原理是很必要的,还有色彩心理学的基础知识也应该有所学习。
2.使用多变的形状设计图标
形状是在图标设计中的关键元素,一般情况下,Google希望设计师以原始的方式使用形状和颜色,而苹果更倾向于为应用设计标准化的图标。当然形状只是帮助设计人员的一种工具,但并非一成不变。您可以自由探索自己喜欢的任何自定义形状,有时将图标中的元素直接使用会很好。所以,形状的设计要素可以依照具体的情况而定。
3.文本、格式和图像
这些是图标的核心。虽然形状和颜色是设计的基础,但您的图标还需要其他一些东西才能变得独特和可识别。比如图标中通常包含公司的徽标或至少是简化版本。
通过上述阅读,大家应该明白,设计优秀的图标并不是一件简单的事情。图标设计的三大核心就是色彩选择、形状以及内容,如果你想设计出优秀的图标设计,那么不妨先从这三个基本方面开始学习吧!
Ⅳ 小程序添加图标和logo图标 设置背景颜色
小程序设置背景图片: background-image: url(../../文件路径);
background-image设置背景图片要使用base64位或者网络路径
设置背景图图片如果无法全部显示,拉伸 则加上background-size: 100% 100% ;
设置背景颜色s
Ⅵ 如何创建自己的微信小程序
打开网络浏览器,网络搜索“小程序生成平台”或者其他的小程序第三方制作平台。
2.首先打开微信公众平台,登陆你自己的微信小程序,打开设置,基础设置里面的原始id,...
3.进入管理,选择我们要用的小程序模板,这里小编选择的是电商模板,我们点击进入,...
4.填充完信息之后,我们可以选择我们喜欢的小程序的颜色风格,然后自主设置我们的底部菜...
5.登陆我们的微信公众平台小程序账号,设置里面的开发设置,我们把服务器域名设置一下
Ⅶ 微信小程序里发文图案有什么
1)原生支持类型
小程序的icon支持以下类型:
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
对应图像效果依次为:
主要失败、成功状态的提示,加三个下载、搜索、关闭图标。
2)示例与属性
图标使用的代码示例为:
<icon type="success" size="30px" color="green" />
图标共有三个属性:
属性说明type图标类型,有效值在上面已经讲过了size大小,支持两种单位,rpx与px。如果值是数值类型,默认使用px单位。color图标的颜色,css支持的颜色格式都可以使用
3)图标与图片有什么不同
通过size属性,可以改变图标的大小:
使用图片也可以达到同样的效果,但是图片如果像素不够,放大了之后效果会虚;还有,图片需要另外存储与加载,使用起来不如图标只使用一个名称方便;再者就是,接下来会看到,图标可以随意改变颜色,而图像不能。
4)color改变的是像素的颜色
图标可以看作是一些像素点区域的集合,至于这些像素点是什么颜色,是由color属性决定的。像上面绿色的success图标,它的默认色是绿色,中间对勾部分是镂空的。如果我们给图标所在的容器一个背景色,那么对勾呈现的就是背景的颜色:
代码:
<view class="group" ==style="background:grey;"==> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}px"/> </block> </view>
我们可以通过color属性随意改变图标颜色:
但是中间对勾的颜色同时改变不了,因为它是由背景决定的。
Ⅷ 微信小程序01:底部菜单(tabBar)
tips:
1.小程序底部菜单标签个数不少于2个,最多不超过5个。
2.可以在 阿里巴巴矢量图标库 找到你需要的图标。
3.小程序建议图标大小为81*81px
我这边选择的是64尺寸的png图片,每一个图标选择两种颜色,分别对应未选中状态和选中状态,具体按照你们设计项目进行
tips:
1.建立项目图片文件夹:images
2.在pages中建立相对应的菜单栏目文件夹
3.配置app.json: tabBar配置
1.app.json中,"window":{}和"tabBar":{}是同级
2. 全局配置
3. 设置tabbar地址:wx.setTabBarBadge(Object object)
Ⅸ 微信小程序底部tab图标大小
制作的icon要在50*50px以内(红色),小程序导航icon周围系统自留了空间(蓝色),此处的小房子icon是34*39px
微信小程序,简称小程序,英文名MiniProgram,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
(9)小程序图标用什么颜色扩展阅读:
安全管理
2018年12月27日,腾讯公司发布《腾讯隐私保护白皮书》,倡导“科技向善,数据有度”的隐私保护理念。在小程序的《服务条款》、《运营规范》中,分别设有“用户个人信息保护”和“用户隐私及数据规范”专章介绍。
微信小程序在产品功能设计上给用户更多控制力。在小程序的设置页,为用户提供了数据权限开关,一旦用户授权之后又关闭,小程序再次使用该用户数据时需要重新获得授权,为用户提供更方便的数据控制权。用户在小程序的资料页还可以看到隐私数据保护的提示以及投诉入口。
小程序在收集、获取用户数据上,小程序坚持“必要+合理”原则。必要是指只有在小程序的具体业务中,确实有场景需要获取用户数据的情况下,开发者才能去获取用户的同意授权;合理是指开发者获取数据的范围不应该超出具体场景所需要的数据范围。
例如一个提供外卖服务的小程序,可能需要获得电话、地址等数据,但没有必要获取性别、年龄等数据,否则平台会认为小程序收集用户数据的行为违反了“必要并且合理”的原则,会对这类小程序进行处理。
Ⅹ 微信小程序图标变成白色
是无需安装的小程序。微信小程序呈现白色是小程序无需下载安装的一种,它实现了应用触手可及的梦想,用户扫一扫或搜一下即可打开应用。