11-25小程序

2020-01-04  本文已影响0人  丿小蜗牛

什么是微信小程序?

小程序是一种不需要下载安装即可使用的应用,用户扫一扫或者搜一下即可打开应用。
它是一种全新的连接用户与服务的方式,可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

小程序的优点

小程序设计规范

尺寸

小程序的开发工具支持二倍图开发,不支持一倍图开发。
小程序的尺寸代为交rpx,可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx,
如在750 * 1334的设计里,1rpx=1px=0.5pt
设计微信小程序时用iphon8(750 * 1334)作为视觉稿的标准。

切图

设计稿用750 * 1334的尺寸,切图只需要给出当前尺寸的即可(二倍图)。
需要注意:小程序底部标签栏的图标,切图大小需要固定着54 * 54rpx(若是开发有特别需要,再提供81 * 81rpx的),其他正常切图。

字体

微信小程序内字体的使用与所运行的系统字体保持一致。
ios系统:中文字体——苹方 英文字体——San Franciso
android系统:中文字体——思源黑体 英文字体——Roboto

字号

常用字号为20,18,17,16,14,13,11(pt)
20pt:页面大标题,一般用于结果、空状态等信息单一页面
18pt:页面内大按钮字体
17pt:页面内首要层级信息,如列表标题、消息气泡等;
16pt:页面内主要描述信息
14pt:页面内次要描述信息,如列表摘要
13pt:页面辅助信息,需要弱化的内容,如链接、小按钮
11pt:说明文本,如版权信息等不需要用户关注的信息

顶部导航栏

小程序的导航栏,开发者可根据自身功能设计需要在页面内添加自由导航,建议所有的次级页面左上角提供返回上一级页面操作。
小程序页面的导航栏应该尽量简单,通常只改导航栏背景色。

底部标签栏

不要自定义样式,标签栏背景色一般是白色ffffff,底部tab的数量至少是2个,最多5个。

启动页加载

小程序启动页将突出展示小程序品牌特征和加载状态。
启动页除品牌标志(logo)展示外,页面上的其他所有其他元素如加载进度指示,均有微信统一提供不能修改,无需开发者开发。

页面下拉刷新

微信自定义

弹窗

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

小程序注意事项

一、友好礼貌

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

二、清晰明确

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

三、便捷优雅

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

四、统一稳定

小程序应注意不同页面之间的统一性和延续性,在不同页面尽量使用一致的控件和交互方式。
统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标,减轻页面跳动所造成的的不适感。

app和小程序差别

小程序总结

小程序比普通的App更讲究扁平化的设计。产品设计要轻视觉,表现的轻盈、干净、高效;功能层级上要轻交互、跳转少、结构层级简单;要高效地展示内容,设计风格要统一和谐;


上一篇 下一篇

猜你喜欢

热点阅读