网站推广.NET

网站推广.NET

优化的解决方案:干货:小程序开发文档和设计指

来源:互联网

本文主要介绍微信正式发布的开发文档和设计指南:

小程序开发文档

小程序开发方法的完整介绍和官方示例。如果您是受邀的开发人员,则可以扫描代码以获得小程序体验。

小程序设计指南

小程序设计规范非常全面,从用户体验,元素样式到排版。这可以很好地反映出微信对小程序的重视及其强大的功能,并担心如果不加限制地匆匆打开它,将会导致严重的产品分散。

接下来,我们开始介绍两个文档的具体内容。

一、小程序开发文档

如文档开头所述:

支持调用微信本机API,您可以轻松调用微信提供的功能,例如获取用户信息,本地存储,付款功能等。

实际上,此处举例说明的几个功能可以在以前的官方帐户开发中实现。对我们来说,这句话的重点是“本机”-基本上可以判断出,诸如导航条和按钮之类的组件实际上是通过微信的中间层转换为本机组件的,这将有效地提高该组件的渲染速度。页面和操作效率,提供更接近本机App的体验。

演示程序中显示了几个新组件,例如下拉菜单,导航栏等。由于小程序还提供了HTML + CSS之类的组合语言工具,因此我们对新组件并不感到惊讶。只要您能想到,开发人员就应该能够通过微信提供的开发工具来实现更多组件。

二、小程序设计指南

微信这次设计规范更加具体和深刻。目前尚不清楚官方法规是否需要按照微信规范进行设计,否则将不会上架,但是我个人认为随着生态逐渐成熟,请遵循微信]不可能。

从另一个角度来看,微信提供了一种称为WXSS的样式定义语言(CSS是它的子集),即使设计规范受到限制,它也为用户提供了非常强大的样式自定义功能。它不应太死板。

1、WeUI更新

通过新的设计样式和组件,微信官方的前端ui框架WeUI也迎来了重大更新,并且具有独立的io域名:。

此更新还包括:

草图设计控制库:

Photoshop设计控件库:

通过提供设计源文件,设计人员可以更轻松地参与微信小程序设计过程。

为获得更好的一致性设计,最新的设计源文件中还提供了相应的字体文件。中文字体使用Pingfang(iOS)和Siyuan Heibody(Android),英文字体则是SF UI Display(iOS)和Robot(Android)。

2、用户体验规范

文档中还部分定义了用户体验规范。解释了什么是好的,什么是不好的,并且可以接受该文档的阅读经验。

小程序的一些重要视觉特征可以从设计规范中窥见:

3、级别规范

虽然微信的层次结构很简单,并且没有很酷的本地动画,但是这次的页面级规范仍然让我想起了Google Material Design首次发布时的惊人感觉。

类似于微信本身,微信小程序 4个级别很容易理解:

弹出窗口:弹出窗口

遮罩:遮罩层

导航:底部导航

内容:内容

“ H5计划俱乐部”是一个微信公共帐户,专注于微信小程序学习交流,并发布了相关的外包/招聘要求信息。

“ H5计划俱乐部” 微信号:wxappclub或微信扫描并关注