小程序体验设计：框架层，布局策略

小程序的框架层就是对这个小程序的整体布局，如果能够在框架层上有一个良好的策略，就一定能够使小程序有一个非常美观而便捷的布局。

小程序的框架层主要由三个方面构成：界面设计、导航设计和业务逻辑设计，这三个方面之间是相互独立的，并且拥有一定的相互关系。

界面设计能够提供给用户做某事的能力，并且使用户能真正接触到那些“在结构层的交互设计中”确定的“具体功能”。导航设计能够提供给用户去某个地方的能力，用户可以通过它看清楚“在信息架构中”确定的结构，并且可以实现在其中的自由穿行。业务逻辑设计能够使用户明白小程序想要传达的想法。

一个优秀的小程序框架层，在界面上应该有一个美观的设计，在导航上有一个便捷的设计，在业务逻辑上比较顺畅。

界面设计的美观性

小程序的界面对于用户来讲，能够带来最直观的体验，一个界面往往会决定用户对这个小程序的第一印象。用户渴望能够在流畅使用的同时，享受到美观的界面，美观也是小程序界面最大的追求。

界面设计需要完成的工作就是合理选择界面元素，哪一个功能需要在哪一个界面上去完成，是需要在小程序结构层的交互设计中就确定的。但是这些功能如何出现在界面中，如何被设计则是设计师需要考虑的内容。

一个成功的界面能够让用户在第一眼就能够迅速发现自己想要的东西，对于那些用户不太关心的东西，则不会被关注到。对于那些复杂的设计，在明白用户的需求之后，减少这种可发现性是最重要的。界面设计应注意的事项如图所示。

界面设计的注意事项

使用空白或轻微的背景色划分界面，尽量不使用线条，这是因为如果线条在前景中，而空白和颜色在背景中，前景会吸引用户的注意力。如果把所有内容都放在前景中，用户的体验会非常糟糕。

尽可能使用强调，在界面中如果加粗就可以满足强调的要求，就不必对内容在加粗之后又放大，或者再改变一种颜色。使用均匀浅色的线条比较好，尽量避免粗黑色的线条。

如果界面中的信息超过三个或者是三个层次，会使用户有一种迷惑感。在这种情况下就需要少使用数字、大字体或者是加粗字体，最后的层次最好不超过三个方面，有标题、副标题和正文就可以了。

减少元素的变化，比如，要设计一款音乐方面的APP，可能会有一部分界面用来专门放置专辑封面，这个时候应该注意的是不能在界面中出现好几个大小不同的区块。因为区块太多，会导致一些区块占用其他的位置，和其他功能项相重合，用户在使用的时候会非常不方便。

比如，音乐APP Nokia Mix Radio，就是一款非常漂亮的音乐APP，首页由三个大小不同的区块组成，能够给予用户播放情况的反馈，并且隐藏了页面最顶部的手机方面的图标，使整个界面显得简洁且易用，给人一种独特的美感。

整个界面尽量使用一种样式，如果样式过多，会有一种花里胡哨的感觉。比如，优酷APP的首页推荐主要由两个部分构成：一部分是推荐内容，另一部分是最近的热门视频，这就会使用户非常清楚。

以上要求都是从整体上来看，除此之外，对于具体的内容可以有具体的要求。比如，在文字的使用上，要符合人们的阅读习惯。颜色要比较协调，不能太突兀。在动效的使用上，也要控制好度，才能起到美化的效果。

美观是界面设计不懈追求的目标，除此之外，界面设计必须满足清晰、流畅、统一的标准。一个界面只有使用户清晰地辨认它的各种功能和服务，在使用的时候比较流畅，让用户与小程序形成一个良好的互动，才会使用户在使用小程序的时候有一个良好的体验。

导航设计的便捷性

小程序导航设计又被称为框架设计，设计的内容就是将分类好的内容，以什么样的具体形式展现给用户。一个便捷的导航能够组织用户最常用的行为，同时能够让用户很容易就获取到界面元素。

导航设计具有便捷性的特点，方便用户使用。用户在一种应用中可以实现不同的跳转方法，导航将对用户的跳转性行为具有促进或者是引导作用。

一个优秀的导航设计必须能够清楚地向用户传达出跳转入口和内容之间的关系，如果只向用户提供一个跳转入口的列表是不可能完成上述目的的。不同的入口按钮之间的关系，功能的侧重点之间的相互差异对一个小程序来说，都是非常重要的。

导航设计还必须能够传达出具体的内容，以及与用户当前浏览页之间的关系，简单来说，就是帮助用户理解在哪一个跳转入口可以更好地执行他们的任务或者想要达到的目标。

在很多互联网产品中，导航设计有几种固定的方法，如Tab式导航、抽屉式导航、跳板式导航、列表式导航等几种导航方法，下面就来具体看一下这几种导航方法能给小程序的导航设计带来哪些经验。

（1）Tab式导航目前被使用得比较广泛，很多超级APP都是使用这种导航方式，如微信、大众点评、携程等使用的都是Tab式导航方式。这种导航方式最突出的地方就是功能突出，不需要用户去寻找，非常容易被用户发现进而使用。用户可以实现在各个入口的轻松跳转。即使用户处于很深的流程之中，也可以快速返回首页。

但是这种Tab式导航方式也有一定的缺陷，当小程序的核心功能比较多时，Tab式导航上就会显得比较臃肿。带给用户的沉浸式体验并不会很深，用户的使用行为很可能会被打断，导致用户不能沉浸于体验之中。

（2）抽屉式导航也是一种使用比较广泛的导航方法，菜单内容被隐藏起来，只有单击入口之后才会下拉出菜单。这种导航方式在2011年非常流行，如今采用的频率已经比较低，不过像QQ、邮箱大师等应用仍然在使用这种方式。

这种导航布局的优点是能够给页面提供足够多的空间，让用户专注于当前的页面，从而提高用户的沉浸式体验。拓展性也比较好，侧边栏可以给用户提供更多功能入口的展示空间。

对于用户来说，学习这种界面的成本较高，尤其是刚入手的时候，用户很难发现这是一个抽屉式的导航。入口的切换需要进行二次单击，用户才能够找到想要的功能。

（3）跳板式导航也被称为九宫格式导航，这种导航布局非常适合功能比较多的小程序。但是从目前的情况来看，采用纯粹的跳板式导航布局其实是比较少的，大多小程序都是使用与其他导航方法相结合的方法。

这种导航布局的优点是能够为用户清楚地展示每个入口，并且实现一次性展示。支付宝采取跳板式导航布局可以实现用户在第一时间进行选择，无论是充值还是转账，不需要多次跳转，就能够快速使用某项功能或服务。

当然，这样的布局很容易使重点功能不够明确，各个入口之间的跳转不灵活。如果用户想要使用某个路径较深的功能，就不能快速地跳转到任务界面中。

（4）列表式导航就是把入口或者是内容按照列表的样式，展现在页面之中，它比较适合内容型的小程序，比如，网易新闻类。这种导航布局的内容层次非常清晰，一次性可以加载出的内容比较多，当然这样一来，重点就无法凸显了。

小程序和APP相比，在功能上会比较少，界面设计肯定会更加简单，但至于适合哪种导航布局方式，需要根据小程序的实际情况和具体内容而定。不同的小程序适合的导航布局也不太相同，但是它们共同的目的必须是通过一定的导航布局使界面更加简洁，用户在使用的时候更方便。

业务逻辑的顺畅性

小程序都是在某个领域之中实现的一些特定业务，所以，任何小程序都可以分解为界面交互部分和业务逻辑部分，其中的业务逻辑是小程序的核心。业务逻辑存在于小程序内部，虽然无法直接对用户产生作用，但可以透过界面交互部分与用户进行交流，使小程序发挥作用。

对于业务层的职责，可以通过具体的例子来了解。当用户进行注册的时候，在注册界面上一般都会有手机号、验证码、密码以及确认密码，但是在API的接口中，一般只有前三个参数，并不会有确认密码。因此，在调用接口之前，密码和确认密码是否具有一致性需要检查清楚。

同时，还需要检查这些数据是否完整、数据是否为空、手机号是否规范等内容，所有的检查都确定无误后，就可以直接调用API接口了。在调用接口之后，还需要调用一次登录接口，并将用户的登录信息缓存起来，这样，用户在下次启动的时候就可以自动登录了。上述的所有处理活动都属于小程序的业务逻辑处理，这也是业务层的工作。

还有一个典型的场景，比如，一个电商类的APP，用户想要在浏览某一个商品的时候，单击购买，APP就会判断出用户有没有登录，如果用户没有登录，页面就会跳转到登录页面，让用户登录之后再返回到之前的页面中。或者是用户已经登录，但是已经过期，那么只要获取新的token，就可以进行购买操作行为。这个例子讲述的也是业务层的工作，处理的正是业务逻辑内容。

通过以上两个例子可以看出，业务逻辑是对一些功能模块的设计，能够涉及关键的功能和参与者流程。业务逻辑还能够帮助各位参与者进行角色分工，帮助开发者进行小程序业务流程方面的设计。