作者|太阳清

2019新版本迷你 - 程序控制+设计规范源文件在底部的底部说明

文本

最近，设计小组中的一些人经常提出小型编程设计规范的问题。尽管该官员下载了样式库下载，但它不是16年版中的最新版本。我停止计划加快本文的输出。它刚刚结束了几个小计划项目，总结经验，并与《微信》迷你计划的官方设计指南结合在一起，与所有人分享，我希望能帮助每个人更快地开始。

随着2018年小程序的快速发展，主要企业现在已广泛采用小程序。 “触手可以匹配和完成”的用户体验受到青睐。技能，设计小程序界面时我应该如何快速设计？该过程中有什么问题？

接下来是干货〜

大纲

1。迷你计划设计区域

2。导航栏设计

3。工具栏设计

第四，标签栏设计

5。开始页面设计

6。负载样式

七，如何设计没有应用

8。建议一些常用的平台设计网站

对于开发了应用程序的产品，在设计小程序设计时，有必要遵守小程序的规格，同时，有必要保持小程序界面设计的统一性和应用程序的样式。

注意设计过程中的以下几点：

1。迷你计划设计区域

的“所有页面”的右上角是用菜单固定的，并且在设计接口时需要保留区域空间。

2。导航栏设计

1。小程序菜单的固定样式

微信提供了两种色调颜色匹配样式，以更好地整合到各种样式的页面中。注意保持对小程序菜单的清晰识别。

在线案例：

2。交互式预防措施

如果要在小程序菜单附近放置交互元素，则应考虑是否存在交互冲突，并尝试避免犯错的可能性。

建议开发人员设计自己的导航风格和微信官方迷你菜肴，以保持一定的差异以区分。

如上图所示，小舒的个人导航风格不欣赏原因。原因如下：

1）样式与官方菜单样式没有区别，很容易引起怀疑

2）列的两端在顶部是对称的，并且视觉上似乎太僵硬了

微信读书既有DNA的微信线，也有与官方风格不同的。这是一个很好的综合。以上仅限于个人意见，并且还需要客观验证用户数据。

3。搜索框中的几种表达形式

三，设计

1。应用程序规格

可以定制顶部标签的颜色，通常使用应用程序的设计样式来确保两个平台的视觉统一性。

2。几种共同的表现

第四，标签栏设计

1。应用程序规格

微信具有小程序的底部标签样式，建议标签的数量为2-4。

您也可以根据产品需求选择或删除底部标签栏功能

2。几种共同的表现

5。开始页图标

除了删除品牌徽标的启动页面外，微信提供了其他元素，无法更改。设计师需要提供2和3x大小的徽标。

6。负载样式

1。应用程序规格

全局加载是小程序名称左侧的负载图标。模态状态的加载样式将覆盖整个页面。由于无法清楚地通知特定负载的位置或内容，因此可能会引起用户的焦虑，建议您谨慎使用它。

2。常用的负载样式

有必要告知用户特定负载的位置形状，以减轻用户的焦虑。

七，如何设计没有应用

对于没有开发应用程序，它可以根据官方的“微信迷你节目设计指南”设计，以确保符合标准的小计划的快速设计。

小型程序设计应遵循友好，高效和一致的设计的原则。每个页面都应清楚地侧重，清楚地告知用户在哪里以及可以去哪里，以确保用户在页面中间有班车的空间。不要迷路。

8。建议一些常用的平台设计网站

1。蝙蝠平台小程序设计规范网站

1）微信迷你编程指南：

2）小程序设计规格：

3）百度 - 玛特迷你计划设计规范：

2。其他常用的设计规范网站：

1）--接口指南

详细介绍iOS设计规范，还提供了UI设计资源下载

2。-MD设计指南

3。蚂蚁设计

提供移动和网络端设计和编队，以及具有设计案例和学习经验的文章

#ds

4。微信风格图书馆

在微信中提供网页和小程序设计规范

2019新版Mini - +设计规范源文件

附件文件是一个版本，背景回复了关键字“迷你程序控制”以获取下载链接。

阅读

3 ..

7。

8 ..

9。