什么是小程序？

小程序是一种不需要下载安装即可使用的应用，用户扫一扫或搜一下即可打开应用。

它是一种全新的连接用户与服务的方式，可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

为什么要做小程序？

更低的成本 更流畅的体验 更多的曝光机会 更易留存用户

小程序设计规范

尺寸：小程序的开发工具支持二倍图开发，不支持一倍图开发。

小程序里的尺寸单位叫rpx，可以根据屏幕宽度进行自行适应。

规定屏幕宽为750rpx

如在750*1334的设计稿里，1rpx=1px（物理像素）=0.5pt（逻辑像素）

一倍图：1rpx=1pt

设计微信小程序用iphone（750*1334）作为视觉稿的标准

切图

设计稿用750*1334的尺寸，切图只需给出当前尺寸的即可（二倍图）。

需要注意：小程序底部标签栏的图标，切图大小需要固定54*54rpx（若是开发有特别需要，在提供81*81rpx的），其他正常切图。

适配

小程序支持一稿适配，只需要提供一套750*1334设计稿及切图，别的尺寸（包括安卓）均不用再设计，程序员GG会搞定

字体

微信小程序的使用与运行的系统字体保持一致。

ios系统：中文字体：苹方 英文字体：San Francisco

Android系统：中文字体：思源黑体。英文字体：Roboto

字号

常用字号为20，18-16，14，13，11（pt）

20pt：页面大标题，一般用与结果、空状态等信息单一页面

18pt：页面内大按钮字体

17pt：页面内首要层级信息，如列表标题、消息气泡等

16pt：页面内主要描述信息

14pt：页面内次要描述信息，如列表摘要

13pt：页面辅助信息，需弱化的内容，如链接、小按钮

11pt：说明文本，如版权信息等不需要用户关注的信息（纯英文的最小11pt）

顶部导航栏

小程序的导航栏，开发者可根据自身功能设计需要在页面内添加自有导航，建议所有的次级页面左上角提供返回上一级页面操作。

小程序页面的导航应尽量简单，通常只改导航栏背景色。

底部标签栏

底部标签栏，不要自定义样式，标签栏背景色一般是白色#ffffff。

底部Tab的数量，最少两个，最多5个。

启动页加载

小程序启动页将突出展示小程序品牌特征和加载状态。

启动页除品牌标志（logo）展示外，页面上的其他所有元素如加载进度指

页面下拉刷新加载

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

弹窗

小程序中的弹窗是不覆盖导航栏和标签栏的

小程序设计原则

一、友好礼貌

小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行操作。

二、清晰明确

导航是确保用户在页面中浏览跳转时不迷路的嘴关键因素。导航需要告诉用户，当前在哪，可以去哪，如何回去等问题。

三、便捷优雅

手机键盘区域小，输入困难也易误操作，在设计小程序页面时应尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

四、统一稳定

小程序应注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式

统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动锁造成的不适感

小程序与app截图对比

小程序留下比较重要的内容

资讯类，电影，音乐和小程序不搭

小程序与app 的区别

一、获取方式

app冲应用商城

小程序通过微信（扫描二维码、搜索）直接获得

二、内存占用情况

小程序因为不需要安装，占用内存空间忽略不计

三、广告推送

app会隔三差五给用户推送广告，太多未剃时会逼死强迫症

四、用户群体

app面向所有智能手机用户

小程序面向所有微信用户，约10亿人

五、开发及功能实现

App需要适配市场上很多款的主流手机，开发成本大；

小程序一次开发就可以自动适配所有手机；

app可以实现完整功能；

小程序仅限微信提供的接口功能；

小程序开发周期：两周不等

六、发布及推广难度

上传app路径复杂，需要向app store等多个应用商店提交审核，且应用商店之间要求的资料不太一样，比较繁琐；

小程序只需要提交到微信公众平台审核；

app在没有一定知名度前提下，推广的成本很高，获客成本高；

小程序依托腾讯巨大的流量，并且可以通过二维码、微信搜索等方式直接获得，推广难度大大降低；

高屏类

小程序总结

小程序比普通的app更讲究扁平化的设计

产品设计要轻视觉，表现的轻盈、干净、高效；

功能层级上要轻交互、跳转少、结构层级简单；

好高效率

微信插件