内容摘要：

-随着微信越来越多元化的发展，从聊天软件、朋友圈，到微信支付，再到如今火热的微信小程序，如今微信的使用已经是人们一天中的日常了。微信小程序不仅仅是有着强大的功能，还有其独特的UI（即User Interface，用户界面的简称）设计理念。说起微信小程序的UI设计，它简洁现代化的风格，操作的便捷，重点的突出，流程的明确，完全遵从了用户界面设计的三大原则：第一用户控制界面，第二减少用户的记忆负担，第三保持界面设计的一致性。然而本设计的重点在于大家对于微信的色彩搭配以及排版形式多少会有些审美疲劳了，所以决定制作一套全新风格的适用于微信小程序的UI设计。在接下来的设计说明中，本设计将首先从单个的UI设计开始介绍，比如基本按钮，图标等。接着将单个设计结合起来形成一个组件，对组件的排版样式，以及交互效果进行详细介绍，其中还有与微信原本的UI设计的对比、截图展示。除此之外本设计还会结合WXSS代码的使用，以及一小部分JavaScript的使用来讲解。那么下面让我们一起感受微信小程序的UI设计之美吧！

关键词：微信小程序 UI设计 界面设计

目次

摘要

Abstract

1.-引言-1

2.-视觉规范-2

2.1.-按钮（Button）-2

2.2.-表单（Input）-3

2.3.-列表（List）-4

2.4.-图标（Icons）-5

2.5.-字体/颜色（Font/Color）-6

3.-导航/菜单-7

3.1.-导航栏（Navbar）-7

3.2.-页内导航-7

3.2.1.-顶部标签（Navbar）-7

3.2.2.-底部导航（Tabbar）-8

4.-操作反馈-8

4.1.-加载（Loading）-8

4.2.-成功弹出式提示（Toast）-9

4.3.-报错/成功提示页（Msg）-9

4.4.-表单报错/成功提示-10

4.5.-对话框（Dialog）-10

5.-界面综合布局-11

5.1.-文章（Article）-11

5.2.-面板（Panel）-13

5.3.-表单预览（Preview）-15

5.4.-进度条（Progress）-15

6.-结语-16

参考文献-17

致谢-.18