欢迎访问自学路径

您尚未登录

登录后即可免费访问自学内容

点击登录

UI设计12讲!NO.08 小程序设计规范及案例演示

时间:2022-09-08
B站视频:av857765719
类别:UI设计
水平:入门
观众:1.6w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

UI设计12讲!NO.08 小程序设计规范及案例演示

本集讲师:@陈童鞋

免费使用即时设计,请点击右侧链接👉 即时设计

获取海量免费设计资源,请访问👉 资源广场

获取课程课件及演示案例源文件,请访问👉 教程文件

本集教程内容概要

本集视频是 UI 设计基础入门自学手册系列教程「UI 设计12讲」的第八集,本集将为大家介绍小程序的发展过程、设计规范和设计方法实例演示。

即时设计是一款在线可协作的UI设计工具,目前支持Sketch、figma、XD的本地导入和链接导入。支持创建交互原型、获取设计标注、快速切图、团队协作等。

如果想要了解即时设计的基本功能和操作用法,可以观看即时设计入门系列教程:

编者按:图文内容简概为视频内容的提炼总结,想要了解详细教程内容,请观看文章顶部完整的视频教程。

1、什么是小程序?

小程序是一种不需要下载安装即可使用的应用程序,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念。

UI设计12讲!NO.08 小程序设计规范及案例演示

小程序的由来:

  • 2016微信公开课PRO版在广州举行,“微信之父”张小龙首次公开演讲,宣布微信公众号将推出“应用号”,通过公众号完成一些App的部分功能。
  • 2016年9月,微信官方向部分公众号发出了应用号的内测邀请。
  • 2016年11月,微信团队宣布:微信小程序正式开放公测。

在这之后才有其他的应用软件跟进小程序研发,目前很多app里面都有小程序,这次我们主要讲解的大家最常见的微信小程序。

微信小程序的特点:

  • 对于用户来说:微信小程序是不需要下载安装的,即用即走,基于微信客户端,避免了下载,注册登录等繁琐操作
  • 对于企业来说:1.灵活性强,开发周期短、节省成本。2.推广便捷,能与公众号结合开展推广,并且本身就具备易传播的特点。

UI设计12讲!NO.08 小程序设计规范及案例演示

2、小程序的视觉规范

微信小程序官网已经给我们做好了规范文件,包括色彩、空间尺寸、文字、图标尺寸。也可以在即时设计左下角的资源广场中找到Weui设计规范库。

UI设计12讲!NO.08 小程序设计规范及案例演示

UI设计12讲!NO.08 小程序设计规范及案例演示

UI设计12讲!NO.08 小程序设计规范及案例演示

UI设计12讲!NO.08 小程序设计规范及案例演示

UI设计12讲!NO.08 小程序设计规范及案例演示

UI设计12讲!NO.08 小程序设计规范及案例演示

3、小程序是怎么设计的?

我们按照750宽度的尺寸进行设计。这时候我们点击创建新文件,按住A键盘,选择好需要的750*1624的画板,新建一个空白画板。在即时设计左下角的资源广场中找到之前打开的【Weui设计规范库】文件,从中拿出我们需要的基础文件复制状态栏等组件。

然后确定小程序类型制作低保真原型,根据产品的低保真原型图添加内容,添加图片文字内容以及整体UI配色

UI设计12讲!NO.08 小程序设计规范及案例演示

UI设计12讲!NO.08 小程序设计规范及案例演示

UI设计12讲!NO.08 小程序设计规范及案例演示

UI设计12讲!NO.08 小程序设计规范及案例演示

UI设计12讲!NO.08 小程序设计规范及案例演示

UI设计12讲!NO.08 小程序设计规范及案例演示

UI设计12讲!NO.08 小程序设计规范及案例演示

以上就是我们这节课的全部内容啦,下一集将会给大家讲解智能穿戴设备中的UI设计,一定要持续关注我们的教程噢~

5 收藏 24

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 快来秀出你的观点

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了
/

支持键盘 ← → 键翻阅图片