小程序设计规范及经验分享

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
40506 47 1194 2019-05-06

近期刚结束几个小程序项目,总结一些经验,并结合微信小程序的官方设计指南,一起分享给大家。(附件含19年最新样式库!)

最近设计群里经常有人问起小程序设计规范的问题,虽然官方有提供样式库的下载,但是停留在16年版,不是最新的,而设计经验这部分网络上也没有比较全面的分享,这促使我停下手上计划,加快输出本篇文章,正好近期刚结束几个小程序项目,总结下经验,并结合微信小程序的官方设计指南,一起分享给大家,希望帮助大家更快速的上手。


随着2018年小程序的迅猛发展,小程序现已为各大企业广泛采用,“触手可及、用完即走”的用户体验备受青睐,随之小程序设计也成为设计师的必备技能,那在进行小程序界面设计时,应该如何快速做设计?过程中又要注意哪些问题呢?

接下来是干货时间~

Image titleImage title

Image title

Image title

Image title


(附件中是我根据设计需要,重新绘制的最新版本,有需要的去下载吧,别忘了文末点赞支持下哦!)










全部评论:47

  • Even_HO

    2019-12-13 16:38

    请问有PSD的源文件吗?

  • H_Jun

    2019-07-05 01:53

    小红花\/99朵

  • lollipopapple

    2019-06-29 11:51

    请问ios和Android都是用1334x750的设计稿吗?那切图配适的时候图标资源是否和制作app的方法一样?

  • 设计喵的日常

    2019-05-29 12:00

    很实用

  • ♚ 时光会咬人i

    2019-05-26 15:08

    满满的干货啊,以后设计的时候有问题还得需要倚靠大佬解答呀

  • 风雨雾

    2019-05-25 17:58

    @Hermi: 几个ui啊,10天120个页面还是挺多的

  • jansseney

    2019-05-25 10:06

    @Alex: 官方提供的样式中是54px的,大小适中

  • 未央412

    2019-05-24 17:39

    @Alex: 81*81px

  • Alex

    2019-05-24 11:05

    问一下小程序tab栏。图标偏大怎么办,具体尺寸是多少啊?

  • oujy527

    2019-05-23 10:51

    附得的链接都是图片啊

  • UI小妖精

    2019-05-20 16:02

    亲,你好,我下载了你分享的新的规范,可是打开发现关闭按钮蚂蚁显示,想问下一那个关闭按钮的边是多少像素,色值是什么

  • Hermi

    2019-05-20 14:15

    @黄皮皮: UI的话10天能解决,就120个页面,前端会久一些

  • 海伦__哥哥

    2019-05-17 17:08

    想问下前辈这个小程序的控件源文件是在哪里下的啊,他们的规范网站么

  • 地心引力seven

    2019-05-15 23:27

    你好,我想问一下你,一般个人中心标题左侧的图标还是30吗

  • YUSUC

    2019-05-14 16:56

    你好,请问在图上标注的工具是sketch什么插件啊?

  • 三圈儿哥

    2019-05-14 09:48

    @弦了那个歌: 总结的很到位,自己在做小程序的时候同样遇到这样的问题,但是没有像你这样做个总结

  • 一笔勾销

    2019-05-13 18:21

    @弦了那个歌: 学习了,公司刚好做的小程序点击分享的进去之后无法回到首页,所以只能加一个浮动的按钮到首页,看了你这个就学习了,谢谢。

  • 黄皮皮

    2019-05-13 09:36

    你好,想问一下你们公司的小程序,做一个项目的时间大概多久,页面的话大概有多少张呢?因为我在公司也是做小程序的,只是想知道一下其他做小程序的人的项目进度,以供学习。

  • 甄真珍

    2019-05-13 09:08

    如果没记错,小程序导航栏可以透露背景颜色,也就是不单单纯色

  • J_lin

    2019-05-11 10:08

    学习了

  • 孙青Cynthia_Sun

    2019-05-09 16:58

    @莫妮卡在隔壁: 由于没有使用过字体作为图标来表现,还没有这块经验,谢谢你的分享哦,感谢感谢

  • 孙青Cynthia_Sun

    2019-05-09 16:54

    @一刀非文: 你好,其实我也有想过,但是担心审核有影响,所以没有这么做,另外,我也有尝试把链接发评论里,结果被拒绝,只剩最后一个办法,加我微信发给你:susan356672227

  • 一刀非文

    2019-05-09 16:15

    好文,提个小建议,最后贴的链接如果不使用图片,而是用UI中国文字输入更有利于读着访问。

  • 莫妮卡在隔壁

    2019-05-09 15:22

    在做小程序的项目时候遇到过几点问题这里没提到 1.在使用字体图标的时候最好需要转换成base64格式的 2.底部的tabbar的图标用不了字体图标,而且用官方的尺寸替代,会出现轻微的拉伸

  • 弦了那个歌

    2019-05-08 15:16

    总结得很充分了,我来补充一些,都是我在做时候和技术磨合中发现的: 1.作者在文中提到的【小红书】自定义的左上角按钮不太合适,其实是有原因的。首先微信官方的顶部导航支持【A.仅保留右侧小的官方按钮】和【B.带页面返回按钮的完整导航】两个状态,A多用于游戏,B多为应用类。虽然B提供了页面间的返回功能,但是只有一个返回按钮,不能自定义,有一些应用为了能加入更多功能,选择了A方案然后自己写页面间的返回,这才出现了小红书的那个样式,为了加入返回首页按钮才决定这么做的。(这是小程序的一个痛点,进入的时候直接到详情页,无法通过返回到首页,所以一般直接给一个回首页按钮)2.上面提到的方案B,导航栏【支持颜色自定义】但是【访问过程中禁止修改颜色】 3.由于小程序导航栏的限制,【模态弹窗】虽然可以做,但是不能像APP一样黑色遮罩能覆盖整个屏幕,顶部导航会浮在遮罩之上 4.在方案B的基础上,某个元素如果设置为页面居中的话,会在实际页面中偏下,因为页面的面积不包含顶部导航 5.其实小程序可以理解为一个浏览器,方案B中提供的返回按钮更像是浏览器里的返回按钮,不能像app一样有很多智能功能 仅从设计角度,欢迎指正

  • 孙青Cynthia_Sun

    2019-05-08 14:37

    @嘚啵嘚的松: 是Ai的变换形状工具哦,具体位置:效果——扭曲和变换——变换

  • Forther

    2019-05-08 13:31

    @嘚啵嘚的松: 我帮楼主回复一下 AI混合工具

  • 嘚啵嘚的松

    2019-05-08 12:47

    请问下你首页封面里的那个波纹线是怎么画出来的?

  • RTFLY

    2019-05-08 10:34

    感谢分享

  • 更多

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票