全局加载反馈：开发者可以参考图中样式，使用标题栏提示加载小程序页面内容的过程。例如：

 
加载反馈注意事项：

• 若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
• 载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。
• 不要在同一个页面同时使用超过1个加载动画。

结果反馈：除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。根据实际情况，可选择不同的结果反馈样式。对于页面局部的操作，可在操作区域予以直接反馈，对于页面级操作结果，可使用弹出式提示、模态对话框或结果页面展示。

页面局部操作结果反馈：对于页面局部的操作，可在操作区域予以直接反馈，例如点击多选控件前后如下图。对于常用控件，微信设计中心将提供控件库，其中的控件都已提供完整操作反馈。

页面全局操作结果——图标型弹出提示：图标型弹出提示适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示

页面全局操作结果——文字型弹出提示：文字型弹出提示适用于需要轻量化地用文字解释当前状态或提醒不严重的错误。1.5秒后自动消失，不打断流程，对用户影响较小。

页面全局操作结果——模态对话框：对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作指引。

页面全局操作结果—结果页：对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。

3.异常可控，有路可退：在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。

要杜绝异常状态下，用户莫名其妙又无处可去，停滞在某一个页面的情况。上文中所提到的模态对话框和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。

异常状态——表单出错：表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。

便捷优雅

从PC时代的物理键盘鼠标到移动端时代手指，虽然输入设备极大精简，但是手指操作的准确性却大大不如键盘鼠标精确。为了适应这个变化，需要开发者在设计过程中充分利用手机特性，让用户便捷优雅的操控界面。

1.减少输入：由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时因尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

例如：下图中，在添加银行卡时，采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 ，充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。

除了利用接口外，在不得不让用户进行手动输入时，应尽量让用户做选择而不是键盘输入。一方面，回忆易于记忆，让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入；另一方面，仍然是考虑到手机键盘密集的单键输入极易造成输入错误。例如图中，在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索，而减少或避免不必要是键盘输入。

2.避免误操作：因为在手机上我们通过手指触摸屏幕来操控界面，手指的点击精确度远不如鼠标，因此在设计页面上需点击的控件时，需要充分考虑到其热区面积，避免由于可点击区域过小或过于密集而造成误操作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时，往往就容易出现这样的问题。

由于手机屏幕分辨率各不相同，因此最适宜点击像素尺寸也不完全一致，但换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准组件库中，各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模仿标准控件尺寸进行设计。

3.利用借口提升性能：微信设计中心已推出了一套网页标准控件库，包括 sketch设计控件库 和 Photoshop设计控件库，后续还将完善小程序组件，这些控件都已充分考虑了移动端页面的特点，能够保证其在移动端页面上的可用性和操作性能；同时微信开发团队也在不断完善和扩充微信小程序接口，并提供微信公共库，利用这些资源不但能够为用户提供更加快捷的服务，而且对页面性能的提高有极大作用，无形之中提升了用户体验。

统一稳定

除了以上所提到的种种原则，建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。

统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动所造成的不适感。正因如此，小程序可根据需要使用微信提供的标准控件，以达到统一稳定的目的。

清晰

整个系统中，任何字号的文字都必须清晰易读，图标表达含义准确易懂，修饰恰到好处，以功能驱动设计。留白、颜色、字体、图形和其他界面元素能够巧妙地突出重点内容并传达交互性。

1.使用留白：留白可以使重要的内容和功能更加醒目、更易理解。留白还可以传达一种平静和安宁的心理感受，它可以使一个应用看起来更加聚焦和高效。

2.让颜色简化UI：使用一个主题色——比如Notes中用了黄色——高亮了重要区块的信息并巧妙地用样式暗示可交互性。同时，也让应用有了一致的视觉主题。内置的应用使用了同系列的系统颜色，这样一来，无论在深色或浅色背景上看起来都很干净，纯粹。

3.通过使用系统字体确保易读性：iOS的系统字体（pingfang)使用动态类型自动调整字间距和行间距，使文本在任何尺寸大小下都清晰易读。无论你是使用系统字体还是自定义字体，一定要采用动态类型，这样一来当用户选择不同字体尺寸时，你的应用才可以及时做出响应。

4.使用无边框的按钮：默认情况下，所有的栏(bar)上的按钮都是无边框的。在内容区域，通过文案、颜色以及操作指引标题来表明该无边框按钮的可交互性。当它被激活时，按钮可以显示较窄的边框或浅色背景作为操作响应。

顺应

流畅的动效和清晰美观的界面有助于用户理解内容并与之交互， 且不会干扰用户。当内容占据整屏时，半透明和模糊处理通常会暗示 他更多的内容。减少使用边框、渐变和阴影，使界面尽可能轻量化， 从而突显内容。

纵深

清晰的视觉层和生动的动效赋予界面层次感，使其富有活力并有助于理解。使可触发界面元素更容易被找到能提升体验的愉悦感， 让用户在触发相应功能或者获取更多内容时不至于茫然无措。当用户 浏览内容时，流畅的过渡能够提供纵深感。

iOS的延展原则有以下6条：

• 1.整体美感
• 2.一致性
• 3.直接操纵
• 4.反馈
• 5.隐喻
• 6.用户控制

1.整体美感：整体美感体现在一款 App 的视觉外观、交互行为与其功能结合的优异程度。例如，一款协助用户完成重要任务的 App 应该使用不易察觉且不会造成干 扰的图形、标准化控件和可预知的交互行为，从而使用户聚焦在任务本身。反之，一款沉浸式体验的 App(如游戏)，需要提供一个有吸引力的界面， 在鼓励用户探索的同时为用户带来无穷的乐趣和激动。

2.一致性：一致的应⽤程序通过使用系统提供的界⾯元素，众所周知的图标，标准文本样式和统一术语来实现熟悉的标准和范例。该应⽤程序以⼈期望的方式结合了功能和行为。

3.直接操纵：屏幕内容的直接操作吸引⼈并促进理解。用户在旋转设备或使⽤用⼿手势影响屏幕内容时会遇到直接操作。通过直接操纵，他们可以看到他们行动的直接，明显的结果。

4.反馈：反馈能够响应交互操作，呈现结果，便于用户了解情况。系统自带的 iOS 的App 对用户的每个操作都提供了明确的反馈。

• 交互元素在点击时会被高亮显示
• 进度指示器显示了需要长时间运行的操作进度
• 动效和声音使用户能够更清晰地感知交互行为的结果

5.隐喻：当一个 App 的虚拟对象和行为与用户所熟悉的体验相似时——无论这种体 验来源于现实生活亦或是数字世界，用户就能够更快速地学会使用这款App。隐喻在 iOS 中能够起作用是因为用户与屏幕在进行物理上的交互。

• 可以通过移动分层视图来显示被遮挡的内容
• 可以拖拽并滑动对象
• 可以切换开关，移动滑块，滚动数值选择器
• 可以通过轻扫来翻阅书籍和杂志

6.用户控制：在 iOS 中，用户是决策者，而不是App。App可以对用户行为提出建议，对 可能造成严重后果的行为发出警告，但不应该直接替用户做决策。优秀的 App在用户主导和避免不想要的结果之间找到平衡。为了让用户拥有掌控性， App可以使用用户熟悉且可预知的交互元素，让用户二次确认破坏性的行为， 并且保证可以停止正在执行中的操作。

详情请查看Material Dedign 设计指南中文网站：www.mdui.org

Material 是一种隐喻

通过构建系统化的动效和空间合理化利用，并将两个理念合二为一，构成了实体隐喻。与众不同的触感是实体的基础，这一灵感来自我们对纸墨的研究，但是我们相信，随着科技的进步，应用前景将不可估量。

实体的表面和边缘提供基于真实效果的视觉体验，熟悉的触感让用户可以快速地理解和认知。实体的多样性可以让我们呈现出更多反映真实世界的设计效果，但同时又绝不会脱离客观的物理规律。

光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关系、空间关系，以及单个物体的运动。

鲜明、形象、深思熟虑

新的视觉语言，在基本元素的处理上，借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。在这些设计基础上下功夫，不但可以愉悦用户，而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，让用户沉浸其中。

Material Design设计语言强调根据用户行为凸显核心功能，进而为用户提供操作指引。

有意义的动画

动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定，能够改变整体设计的触感。

动效应当在独立的场景呈现。通过动效，让物体的变化以更连续、更平滑的方式呈现给用户，让用户能够充分知晓所发生的变化。

动效应该是有意义的、合理的，动效的目的是为了吸引用户的注意力，以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。

本篇文章要讲的设计原则包含六类：

• 1.尼尔森十大可用性原则
• 2.三大原则定律
• 3.Ant Design设计原则
• 4.微信小程序设计原则
• 5.iOS设计原则
• 6.Material Dedign 设计原则

尼尔森（Jakob Nielsen）是一位人机交互学博士，于1995年1月1日发表了「十大可用性原则」。十大可用性原则不仅适用于Web端,也适用于移动端。

熟练掌握十大可用性原则对于指导设计来说意义重大，可提升整个产品的可用性体验。

十大可用性原则分别为：状态可感知、贴近用户认知、操作可控、一致性、防错、识别好过回忆、灵活高效、美学和最简主义原则、容错、人性化帮助。

原则一 状态可感知

定义：告知系统的当前状态，让用户可清晰的感知所处的操作状态。

例如：淘宝注册，用户所处流程情况通过步骤条，可以清晰告知用户注册整体的注册流程状态。

例如：微信转发消息，发送成功时，通过底部的snakcbar提示告知用户转发成功。

原则二 贴近用户认知

定义：尽量将生活中的逻辑和设计逻辑保持统一，这样就会更贴近用户的认知，用户上手成本也就更低。

例如：iOS7之前的iPhone解锁，滑动解锁，这和生活中的用户侧拉开门的场景一样。这个设计非常贴切日常生活认知，用户上手成本特别低。

例如：微信红包的设计，红包样式和现实中用户认知的红包基本一致，都是红色且外观相似。

用户要发红包时，先要塞钱进红包。其他人点击红包时，有一个拆开的按钮，用户拆开就会存入零钱，整个流程完全贴近用户的生活认知。

原则三 操作可控

定义：用户对于行为可预期可控制。对于用户的误操作，提供二次确认或者撤销的功能，这样可提高用户的操作可控性。

例如：移动端中对于毁灭性操作，大部分都做二次确认，这样是防止用户误操作带来的删除损失。用户不用因为操作带来的心里负担，从而提升操作可控性。

例如：微信聊天对话列表，用户删除列表，由于会清空消息记录，因此，通过对话框提示用户，这种做法可提升操作可控。

例如：gmail邮箱，用户发送邮件成功后，可点击撤回操作。

原则四 一致性

定义：遵循统一的产品设计规范／逻辑。这里的一致性也包含产品和跨平台产品之间的一致性。

产品间的一致性，包含视觉和交互的一致性，无论是文案、视觉风格、组件样式等都包含一致性。

例如：微信的卡片结构设计，列表的提示文案都是卡片里面，这个遵循Material design设计规范，ios中设计则提示语在卡片下方。

(责任编辑：PS家园网)