从2017年小程序问世以来，便一路攻城掠地，因其“无需下载，触手可及、用完即走”的特点，使得大批互联网企业嫁接到这个生态当中，可以说大大地方便了我们的生活。

各式各样的小程序

在小程序设计的过程中，很多设计师朋友可能对其原理和规则有一定的认知偏差，特别是在初期的设计工作中，会产生微信小程序UI和APP的UI有何区别这样的疑惑。

其实小程序和APP的设计规范区别不大，而打造一个“爆款”的小程序就需要深刻的认知了，话不多说，看数艺君给大家带来的干货。

小程序UI：打造“爆款”小程序的设计规则

小程序的UI设计直接影响其呈现的效果，而小程序的呈现效果又直接与用户体验甚至是用户的留存紧密相关。可以说，“爆款”小程序的打造，离不开UI的设计。

01

界面元素设计保持一致

界面元素保持一致不仅是小程序UI的设计原则，更是所有移动UI都应遵循的准则，这种设计形式可以极大地减少用户的学习成本，他们在切换不同的界面时，不需要学习新的操作。例如，在“星巴克用星说”这个小程序中，每个界面中的相同元素的颜色、按钮、大小、形状等都是基本一致的，如图所示。

界面元素保持一致

当然，在一些特定的情况下，适当地打破常规的设计也是可以的，可以用来强调一些重点信息。

02、

功能设计满足用户需求

对于用户而言，一款应用的价值很大程度上取决于功能的实用性。因此，功能越实用的小程序，越能得到用户的青睐。虽然在运营者选择领域之后，小程序的功能基本上已经确定了，但是，如果用户是初次使用小程序，那么，他对于小程序实用性的感知基本上来自于小程序的UI设计。

所以，运营者在设计小程序UI时，应尽可能地体现其功能的实用性。这一点对于工具类小程序尤其重要。当然，大部分工具类小程序也特别注意这个问题。

以“车来了精准实时公交”（简称为“车来了”）小程序为例，用户进入该小程序之后，便可看到如图展示的默认界面。在该界面中，用户可直接查看附近的公交站点和经过该站点的线路，甚至可以看到某一线路到达站点的最短时间。而点击某一线路之后，还可查看该线路路经的站点，距离最近的3趟公交到达站点的时间，除此之外，用户还可点击下方的“换向”按钮，查看该公交的反向实时情况，具体如图所示。

“车来了”小程序的界面功能

查看线路信息

用户搭乘公交比较关心的问题主要包括 ：附近的站点、经历某站点的线路、线路经过的站点、某线路距离某站点的距离以及到达该站点需要的时间，而这些内容“车来了”小程序页面中都有体现。因此，用户用该小程序查看公交实时情况时便会觉得非常实用。

03、

头像设计要体现特色

头像是小程序的门面，它的设置对小程序的推广运营至关重要。小程序头像的设置和小程序名称的填写相同，都是在“填写小程序信息”界面。运营者只需在该界面找到“小程序头像”，并选择能够体现小程序功能特色的图片即可，具体如图所示。

小程序头像设置

04

用卡片流突出信息本身

卡片流是小程序UI常用的一种界面元素布局形式，将主要功能或信息采用卡片的形式突显出来，可以更好地展现主题。例如，“微信公开课”的“课程”界面就是采用卡片流的设计，每一节课就是一张小卡片，并通过不同的宽度来突出重点信息，如图所示。

用卡片流突出信息本身

卡片流的排版方式可以将主要信息从界面中突出显示出来，可以通过为卡片元素添加阴影和渐变等效果让界面富有层次。

05

考虑小程序的流畅性

考虑小程序的流畅性，即用户在使用小程序的过程中，应该不被突如其来的无关内容所打断。例如，有的小程序为了增强对用户的吸引力，会在用户的操作过程中弹出图所示的抽奖活动页面。

不合理的抽奖页面

虽然运营者这么做是给用户发福利，但是，面对突然出现的抽奖页面，许多用户并不会因为获得抽奖机会而欣喜，相反，却可能因为操作被打断而对该页面产生反感，甚至是对小程序产生反感。

因此，为了使用户获得流畅的操作体验，运营者应减少抽奖、广告和提醒类信息，但是，需要特别说明的是，如果提醒信息是与小程序的服务内容直接相关且不可跳过的，那么，此信息对于用户来说便是必要的信息，即使可能暂时打断用户操作，也必须进行设置。

例如，当用户进入“孕期提醒”这个小程序之后，页面中会跳出下图所示的“请设置预产期”提醒。因为该小程序中的内容都是根据怀孕的时间提供的，不同的怀孕时间，呈现的内容可能有较大的差异。所以，为了让用户获得更加准确的信息，设置预产期这一步是不可或缺的。因此，此时的设置提醒便具有了必要性。

必要的设置提醒

06

适当构图提高设计效率

在设计小程序UI时，需要对界面中的各个元素进行恰当地摆放，使画面看上去更有冲击力和美感，这就是构图。构图起初是绘画中的专有术语，后来广泛应用于摄影和平面设计等视觉艺术领域。一个成功的小程序UI作品，大多是拥有严谨构图的，能够使作品重点突出，有条有理，富有美感，赏心悦目，而且适当的构图形式还能够提高设计效率。

如下图所示，“未来便利店”小程序的构图非常简洁，采用中央构图 + 圆形构图的形式，突出了“结算开门”的主要功能。“i 麦当劳”小程序采用六宫格的构图形式来安排功能元素。在设计小程序UI的过程中，设计者需要对界面元素进行适当构图处理，让界面更加富有艺术感和美感，更加吸引用户的眼球。

中央构图+圆形构图

六宫格构图

07

使用空间和组块更干净

为了让用户快速获知页面中的信息，在设计小程序UI 时可以使用空间和组块有意识地突出重点内容，让界面看上去更加干净整洁。例如，OPPO的小程序界面就采用了3个分组，包括“首页”“商城”和“我的”，用来区分不同的功能模块，主次分明，如图所示。

使用分组让小程序UI更干净

08

创造更有意思的微交互

小程序UI同样要注意交互设计，满足用户的互动需求，可以设计一些有意思的微交互形式，如抽奖、小游戏或者用动画给予反馈，不但可以培养用户习惯，还能结合相应主题来实现更多的功能。例如，“跳一跳”就是一个非常有意思的小游戏，玩法非常简单，让整个小程序的用户体验得到了极大的提升，如图所示。

“跳一跳”小游戏界面

09

精简配色反映品牌特性

把小程序UI的配色设计好，让界面更好看一点，更漂亮一点，这样就会在视觉上吸引用户，给小程序带来更多的流量。小程序的配色首先要精简，然后尽可能地反映品牌特性。对于进入小程序的用户来说，他们首先会被界面中的图片色彩所吸引，然后根据色彩的走向对画面的主次进行逐一地了解。

下图为“头脑王者”小程序界面，使用差异较大的对比配色来对画面进行分割，使其色相之间产生较大的差异，让画面色彩丰富，具有感官刺激性，更容易吸引用户的眼球，使其产生浓厚的兴趣。

“头脑王者”小程序界面的对比配色

下图所示为“红包店”小程序的界面，画面中的状态栏、标题栏、导航栏及红包图形元素等都使用红色进行搭配，通过明度的变化使其产生强烈的差异，这类配色方式保持了色相上的一致性，所以色彩在整体效果上很容易达到调和。

调和配色

10

缩短用户流程优化体验

当我们需要在小程序界面中呈现多个服务项目时，建议列出相关的推荐项目，供用户快速选择，以免用户面临多个选择时无法快速做出决定。例如，“饿了么”小程序“外卖”界面中，就会针对每个商家的热销美食，自动在首页推荐3种不同的美食，并添加了非常形象的图片展示，帮助用户快速做出选择，当然，也许这些推荐无法满足所有的用户需求，此时用户还可以点击商家名称查看更多的美食来选择，如图所示。

首页中的推荐选择

商家详情页中的更多选择

除此之外，我们还可以使用一些比较贴切的默认值来减少用户的操作，帮助用户节省宝贵的时间。例如，很多注册和登录等表单元素就是采用了这种做法，设计者会在表单中添加一些适当的默认值或者预先填充好的表单字段，可以将用户的工作量大幅减少，如图所示。

使用默认值减少用户操作