UI——day15.H5和小程序的设计

最新推荐文章于 2024-05-23 16:47:38 发布

Tiny_G

最新推荐文章于 2024-05-23 16:47:38 发布

阅读量583

点赞数

分类专栏： UI设计文章标签： ui设计

本文链接：https://blog.csdn.net/qq_45801179/article/details/110336006

版权

UI设计专栏收录该内容

23 篇文章 4 订阅

订阅专栏

认识微信小程序

微信小程序(英文Mini Program)

是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开使用
小程序的优缺点

优点：
1. 对用户来说，无需下载卸载，即用即走，不占手机存储空间
2. 打开速度比h5要快，堪比app
3. 可以调用比H5更多的手机系统功能来进行开发
4. 运行速度跟APP差不多，但相对来说开发成本比APP要低
缺点：
1. 微信小程序只有1M的大小，这样导致无法开发大型的小程序。
2. 不能跳转外链网址，所以间接影响了小程序的开放性。
3. 不能直接分享到朋友圈
4. 需要像APP—样审核上架
小程序的制作流程
1. 注册
  在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发。
2. 小程序信息完善
  填写小程序基本信息，包括名称、头像、介绍及服务范围等。
3. 开发小程序
  完成小程序开发者绑定、开发信息配置后，开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。
4. 提交审核和发布
  完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布
小程序的设计规范
1. 界面规范
  
  顶部：88+40px，底部：98px
2. 小程序菜单tab bar:黑白
3. 导航机制:推荐4个,规范2-5个
4. 字体规范·字号
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R1ziOeuw-1606641514195)(E:\learning\笔记\img\image-20201129141720871.png)]$
1. 字体规范·颜色
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sziHoRCs-1606641514197)(E:\learning\笔记\img\image-20201129141927931.png)]$
2. 字体规范·其他颜色
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mDwAmVXb-1606641514197)(E:\learning\笔记\img\image-20201129142139242.png)]$
3. 列表规范
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-irNmI7yu-1606641514199)(E:\learning\笔记\img\image-20201129142256998.png)]$
4. 表单规范
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8gp9Dm4j-1606641514201)(E:\learning\笔记\img\image-20201129142423000.png)]$
5. 按钮规范
6. 图标规范
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i6WgajDw-1606641514202)(E:\learning\笔记\img\image-20201129142546112.png)]$
7. 图标规范·菜单
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CnOhepre-1606641514203)(E:\learning\笔记\img\image-20201129142717548.png)]$
  
  Tips:
  
  更多规范详见微信小程序设计指南：微信小程序设计指南 | 微信开放文档 (qq.com)
  
  注意：设计的时候注意单位是一倍图的单位
认识H5

HTML是Hypertext Markup Language的缩写,即超文本标记语言。它是用于创建可从一个平台移植到另一个平台的超文本文档的一种简单标记语言,经常用来创建Web页面。

H5是HTML的第五次改革，也叫第五版本，现在很多都把H5通俗的称为具有h5特性的页面，多指移动端
H5页面的特点
1. 开发周期短
2. 更新迭代方便
3. 传播速度快
4. 多平台打开
H5常见的应用场景
1. H5微场景
2. 在线表单
3. 微信投票
4. 微信红包
5. 抽奖
6. H5小游戏
  . 多平台打开
H5常见的应用场景
1. H5微场景
2. 在线表单
3. 微信投票
4. 微信红包
5. 抽奖
6. H5小游戏
7. VR全景