如何设计小程序好看又实用？来看这份保姆级UI设计千字规范！

摘要：

微信小程序工具+UI设计素材+行业解决方案。可视化的小程序制作工具+丰富的UI设计素材+建设性的行业解决方案，这整一个小程序的行业生态体系也是一个方向。

一、小程序UI规范的官方设计规则只支持选中一个链接时生效

这是官网上的内容，以下是我总结是对小程序UI规范一些重点及解释。

1.友好礼貌

做小程序时，我们要做用户体验友好型的设计。可能以往我们会去追求张扬独特的UI界面，因为它们特别扎眼，仿佛在众多同类中脱颖而出。但是在轻量的小程序UI设计体系中，我们需要的往往是简单的，易读的页面去引导客户操作。我们设计的的小程序UI需要做一个近人的朋友而不是遥远的花瓶。

而以下的页面很简单，甚至可能会把它们误认为是上个世纪还未迭代的页面，但是这并不妨碍它们能造成每日数百万的访问量！

德拉吉报告（新闻聚合网站http://www.drudgereport.com/）

2.重点突出

每个小程序的UI页面应该有要突出的重点，如果百花齐放可能会让用户在页面中迷失，难以聚焦，全是重点等于没有重点，能隐藏的功能可以尽量隐藏。

3.减少等待，反馈及时

小程序UI页面的过长时间的等待会引起用户的不良情绪，当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪，以免让用户产生死机的错觉。预加载模块和结果反馈的设置是减少用户焦虑的重要因素。

二、视觉规范

1.整体框架

以iphoneX为例，状态栏高度：44px

导航栏高度：44px，文字大小：18px

标签栏高度：49px，文字11px，icon：48*48px

home条高度：34px，页边距15px（一般为偶数 ）

2.文字规范

小程序UI界面中一般用思源黑体，因为他是免费商用，一般不会侵权，而且有粗，中，细等等选择。

正文/普通文字            思源黑体 Normal

标题                          思源黑体 Medium

特殊文字                    思源黑体 Bold

辅助文字/最小文字     11px (字号不要太小，一般移动端最小字号为12px)

描述文字                    12px

正文文字                    13/14px

标题                           15/16/17px

3.颜色规范

4.图标大小要统一

可以放在一个24*24的框内衡量，做的太大可能会缺少精致感。如果图标是第一个图标是线的，那应该整体风格的图标都是线的，如果是 面、线面结合的应都如是统一。在UI小程序中包括圆角、风格类的也要整体。

5.亲密性原则

在小程序UI界面中的每行的文字或块面之间不要若即若离，要能够让用户一眼望去，明白UI界面中哪些内容之间有联系，这样能减少负担，提升用户体验，逐渐形成UI设计规范。

以上规范只是建议，并不是绝对的铁律，可根据实际需求灵活改变。

制图软件推荐：Adobe XD or Skeach

图片搜集软件推荐：Eagle

三、切图的规范

在导出的时候，有一倍二倍三倍的设置。设计稿用二倍图做的（750*1334），只需给一倍的切片；如果是按一倍图设计的（375*667），只要给二倍的切图。不用每个机型都去适配，这样不管是什么屏的手机适配都方便。

推荐软件：蓝湖、像素大厨、Cutterman

四、弹窗不遮导航栏和标签栏

小程序中标签栏和导航栏是信息层级最高的，即使弹窗也不能遮住它们，不然会影响用户体验，滞后操作。这是小程序UI界面规范中的重要原则之一。

五、统一稳定

APP内的交互流程及UI界面，  到了小程序上流程也要不变。因为过大的变动会增加用户的学习成本。公司内部也可以做个小程序界面常用的控件库，便于设计师的运用。小程序也可用微信提供的标准控件，也可达到统一稳定。以上就是关于小程序UI界面规范的全部内容。

引用文献

微信小程序工具+UI设计素材+行业解决方案