小程序设计稿能用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.底部标签栏

在这里插漏悉运入图片描述

顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可 *** 作性。

d窗

在这里插入图片描述

无论是APP还是Web网页，d窗总是出现在页面的最上层，但是在小程序里导航栏跟标签栏的层级是最高的，以至于优先级较高的d窗在这里也要有所收敛，因此在设计和开发时，都需要注意避免踩坑。

启动页

在这里插入图片描述

小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志（ Logo ）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。

加载样式

无论是APP还是陆扮小程序，加载都不可避免，同样长时间的加载等待会引起用户的不良情绪，因此，在不可避免的加载和等待时，给予及时的反馈以舒缓用户等待的不良情绪都是必需的。小程序里除了自定义加载样式，更是依赖微信提供了一系列加载样式：

1.页面下拉刷新加载

在这里插入图片描述

在微信小程序内，微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。

2.页面内加载反馈

在这里插入图片描述

开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。

3.模态加载

在这里插入图片描述

模态的加载样式将覆盖整个页面，由于无法明确告知具体加载的位置或内容可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性 *** 作下不要使用模态的加载。

4.局部加载反馈

在这里插入图片描述

局部加载反馈是只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。

5.全局加载反馈

ui设计小程序商城尺寸最好是多少？

1.设计小程序上的轮播图的图片是16:9的宽高比例,所以商家在给小程序商城设计轮播图的时候，尽量按照这个尺寸来选择。如果有多塌颤扒张轮播图，建议几张的轮播图的尺寸大小保持一致，这样整体的视觉上看起来就非常美观、整洁。

2.设计商品图尺寸，建议详情图尺寸：宽度800，高度不限，输出画质70%，格式:jpg.

3.目前微信小程序分享图片分洞帆享卡片的图片尺寸长宽比例是5:4，只要是这样的比例就可以了，比如50px*40px；100px*80px…设置成这样的图片大小，在分享卡片是就不会出现图片变得扭曲或者宽高被隐藏的问题团昌出现了。另外还需要注意的是，图片尽量设置成jpg、png等常见格式.

应用程序图标 （Icon）应当是一个 Alpha 通道透明的32位 PNG 图片。

由于安卓设备众多，一个应用程序图标需要设计几种不同大小，如：

LDPI (Low Density Screen，120 DPI)，其图标大小为 36 x 36 px。

MDPI (Medium Density Screen, 160 DPI)，其图标大小为 48 x 48 px。

HDPI (High Density Screen, 240 DPI)，其图标大小为 72 x 72 px。

xhdpi (Extra-high density screen, 320 DPI)，其图标大小为 96 x 96 px。

建议在设计过程中，在四周空出几个像素点使得设计的图标与其他图标在视觉上一致，例如:

96 x 96 px 图标可以画图区域大小可以设为 88 x 88 px， 四周留出4个像素用于填充（无底色）。

72 x 72 px 图标可以画图区域大小可以设为 68 x 68 px， 四周留出2个像素用于填充（无底色）。

48 x 48 px 图标可以画图区域大小可以设为 46 x 46 px， 四周留出1个像素用于填充（无底色）。

36 x 36 px 图标可以画图区域大小可以设为 34 x 34 px， 四周留出1个像素用于填充（无底色）。

扩展资料：

手机图标就像电脑图标一样，是一个程序的标记。如：照相机、设置、信箱、通讯录等。

通常为透明背景的图片如PNG格式。在手机中一半内置的图标都是经过美化的，后来安装的软件由于是个人制作，一定程度上不是那么完美，包括大小、 尺寸、比例等等，如果嫌不美观， 可以到安装目录比对标准的图标尺寸然后替换，用PHOTOSHOP或者其他绘图软件工具制作。

注意：一定要名称一样，格式一样或者修改安装表文件，指向你所更换的图标文件，起到一定的美化作用。同时手机图标要有一定的共同性，便于不同品牌的图标的图标功能相近性，便于使用。

手机图标制作：

一、主题风格：

做手机图标先要定好主题，风宏兄搏格，以及表现方式，如：简洁大方；古朴厚重；晶莹剔透；是写实的3D图标还是平面化的图标。这一环是和整个交互界面密不可分的。

二、选定软件：

根据风尘梁格定位，可以确定出是用哪种蔽祥方法：用max建模>渲染>ps处理；用ps直接表现；用AI绘出>再经ps处理（推荐）易修改大小以及之后的调整。

三、注意要点：

由于AI是矢量软件，可以很好的表现出画面图标的细节，尤其是复杂形体的表现，性能远远高于PS去制作，还有一个原因就是在制作手机图标时图标的大小都是很明确的，对于一些级小的细节AI很有优势，如果ps的话不易画出，如果放大制作，再缩小的话，会模糊掉，显得边缘粗糙。

参考资料来源：百度百科  手机图标

---