赞助商
立即赞助

做小程序设计,不得不说的7个坑

UI设计3年前 (2021)更新 流光
2.3K 0 0

一半的时间,我们亲眼见证了小程序从萌芽成长为参天大树,支撑起我们现今的生方式,我们在他的树荫享受着舒适。很多公司自然会错过这次机会,纷纷入到小程序的行列。

做小程序设计,不得不说的7个坑

这对设计和开发而言算是一次挑战,毕竟要快速上线的步伐没有留给我们太多时间,而面上的相资都太零碎,在实际中会遇到很多的坑,官方档没有说明。我拉着我们开发小哥哥 Yog,帮大规避小程序设计中的坑。

一、设计稿最好用二倍图

UI设计师喜欢用一倍图,但为什么用一倍图,方便适是表面现象,正原因是开用的开工具支持一倍图开,开不用换数值。而小程序的开工具不支持一倍图开,支持二倍图开。小程序里的尺寸单位叫 rpx,以根据屏幕宽度进行自适应。在750*1334的设计稿里,1px = 1rpx。

做小程序设计,不得不说的7个坑

果你心疼你的开小哥哥,让他少掉点头,设计稿用750*1334的尺寸。但果你的开小哥哥之前老欺负你,你就看着办吧,他能搞定。

做小程序设计,不得不说的7个坑

二、切图只需切750的尺寸

计稿用二倍图做的(750*1334),只需给一倍的切片;如果是按一倍图计的(375*667),只要给二倍的切图。真的不管其它尺寸吗?不是不想管,而是程序的开发工不支持。

三、导航栏不要自定义

标准高度:128rpx

小程序很轻量,同时也有很。导航栏不能自定义就是其中之一,能改变的只有颜。

做小程序设计,不得不说的7个坑

是官方的意思,但是,要改也是以的,需要客户端版是6.6.0以上,而且下拉使整个页面下拉,也不护。

做小程序设计,不得不说的7个坑

你说不有小程序已经使用嘛,是,个小程序叫汪卡,现在,他们已经改回来。所以,你也别难为你的开小哥哥。

做小程序设计,不得不说的7个坑

四、标签栏爱素颜

这个标准名称叫:标签页导航,标准高度:98rpx,简称标签栏。

1. 偷笑别人花了脸

是一个安静的晚上,一个人窝在公计,承认这真的无奈,和其它程序一。听说你还在搞什创,加个投来点渐变,以为这棒简直无懈可击。结果开发哥哥哭了,相是美美的图,但是开发做不啊,那种表情可以想象。

做小程序设计,不得不说的7个坑

虽然也可以,做点其它形,那就拜托别让开发见你。如果再能你,一定就是这说,生控件好多多最好能用它。不用担心出问题,不用维护怕麻烦。

2. 图标只要81rpx

还是一个安静的晚上,还是在做计,这次真的按耐不住,和其它程序一。听说你再搞什创,中间图标变大大,破形破形再破形,燃烧开发脑细胞。

做小程序设计,不得不说的7个坑

但是,要知道,图标只要81rpx,于大于都变形,一定记得规格框。数量只能2至5,多了少了不算数,你只能去改图标,其它组件说了算。

五、弹窗不覆盖导航跟标签

在程序导航栏跟标签栏的层是最高的,以至于享受惯最高待遇的弹窗在这,也要臣服于。

做小程序设计,不得不说的7个坑

六、视频限时多

小程序视频支持不是特好,原则上在滚动控件里不能放视频,而微信官文档里是这样要求。这我也像我们开发小哥哥求证,确实是这样,优酷和腾讯视频都是将视频固定。

做小程序设计,不得不说的7个坑

其实吧,这已经被有些公司攻克了,比如开眼跟京东。攻克是攻克了,是体验不怎么好。如公司品需要放视频,议专新开个页,视频部分最好不要有左右滚动。

七、一稿适配

iPhone X 怎么办,安卓怎么办,这些都不用再设计了,开发小哥哥都能搞定,相信他们。

做小程序设计,不得不说的7个坑

八、关于设计资源

微信官方虽然提供,但新时间停留了2016,新版的小程序样式,的区别就顶部导航栏。

最近我正好在看小程序设计,便动手加上了这些新样,虽然不多,都是很认真跟开发小哥哥过,里也附带了官 UI 控件,提供大家。《资:新版小程序 UI 控件,Sketch 版》

做小程序设计,不得不说的7个坑

欢迎关注作者微信公众号:「动像」

做小程序设计,不得不说的7个坑

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

QQ 小程序游戏中心主打丰富多样化的小游戏,作为设计师如何通过视觉表现构建一个更好玩的平台,向用户传达「好玩」的感受。 ...
QQ
粤省事小程序是一个基于移动端的聚合式政务服务平台。作为一个平台型产品,它集成了广东省各地市、各部门的多项民生、政务类...
实战案例
怎么能够防止用户在核心流程中中断操作,避免产生流失?以下,笔者将与大家分享他进行实际方案优化时测试过的四种方法。 笔...
交互流程
「本文授权转载自小程序报道第一媒体知晓程序(微信号 zxcx0101)。关注「知晓程序」,让你更知小程序。」 12月30日,微信7....
微信7.0
@设计之青 :最近设计群里经常有人问起小程序设计规范的问题,虽然官方有提供样式库的下载,但是停留在 16 年版,不是最新的...
小程序
编者注:本文腾讯设计师用「云游敦煌」的小程序设计实战案例,为你揭秘大厂的产品构思方法、设计历程等。 缘起 在工作中遇到...
云游敦煌
2017年1月9日微信小程序平台正式发布,在业界引起很大的轰动。我们QQ空间团队,希望在微信小程序平台也能去做一些尝试,能获...
小程序设计
微信的最近一次更新,小程序入口变浅了很多。最近使用的小程序,被放置在微信打开后初始页面的下拉菜单中,而且给的下拉栏空...
ui设计