移动和PC具有自己独特的优势。随着迷你程序在越来越多的设备终端上的普及，PC终端已成为迷你程序发挥其功能的重要场所。

与移动端子相比，PC终端具有较大屏幕，更准确的操作和更高效率的优势。那么，我们如何利用这一点更好地在PC侧介绍迷你程序呢？在这里，我们总结了“迷你程序改编设计指南”，希望帮助您调整Mini程序从移动设备到PC。

这个问题的概述：

1。移动和PC之间的经验基本差异

•物理尺寸

•操作经验

•交互式相互作用

2。微型编程的密钥适应设计点

•PC上的MINI程序的内容布局方法

•交互式交互方法的翻译

3。注意特殊场景

•迷你程序的不同端口之间的经验差异弹出控制

•隐藏操作

•与页面刷新的互动互动

移动和PC经验的根本差异

移动终端和PC终端之间的差异来自对物理维度，系统能力感知和操作经验熟悉的最初理解。

接下来，我们将讨论这两个部分与三个部分之间的差异：物理大小，操作系统和交互式交互。

1。物理尺寸

就物理尺寸而言，PC端尺寸远大于移动端的尺寸。前三名主流屏幕尺寸现在为1920 x 1080、1400 x 900和1366 x 768，这意味着大屏幕已成为未来的开发趋势，更大的尺寸意味着可以显示更多信息和操作。

当然，较大的尺寸并不直接意味着更好的体验。为了充分利用尺寸优势，您可能需要为迷你程序做一些适应性工作。该部分将在文章的第二部分中详细介绍。

2。操作经验

在操作经验方面，PC侧的操作窗口具有多任务处理的特征，并任意调整窗口大小。

在移动终端上，它更多地关注单个窗口的内容表示，该窗口需要单个窗口的任务，以单一而简洁的方式向用户展示。

在单窗操作的经验中，人类计算机的交互也有所不同。为了适应人们的单手操作，控件通常放置在窗户的中间或底部。在PC侧，人们通常不会使用这种方式，因此基于人体工程学，PC侧屏幕上的每个区域和其他区域。区域也很容易到达。

3。交互式相互作用

就交互式互动而言，目前可用的移动终端是为触摸而设计的。触摸意味着提供更大，更容易访问的触摸目标，从而允许多个手指相互作用。例如，触摸，按，用手指缩小/缩小，边缘滑动等。

PC终端通过鼠标和键盘的合作进行交互，这种交互式形式可以为用户提供更高的精度和速度输入功能。

在PC侧设计的迷你程序中，应特别注意转换可能遇到的交互式操作表格，以使PC侧的迷你程序更友好且易于使用。

小型 的钥匙适应设计点

在上面，我们了解了移动和PC之间经验的根本差异。您可能会困扰“我需要重新设计我的小程序以适合PC侧吗？”

如果您的小程序已经使用了官方的框架，并且交互相对简单，则您只需要维护一组代码即可实现移动和PC侧的呈现。为了使您的小程序表现更好，您可能需要对小程序进行一定的适应和优化。

那么，迷你程序的设计师如何将其迷你程序改编到PC方面？接下来，我们为您提供以下建议。

1。为了更好地适应PC侧的大屏幕体验，您需要优化Mini程序的内容布局；

2。您需要注意移动终端转换为PC终端的交互式交互方法。

1。迷你程序的内容布局如何适应PC侧的大屏幕体验？

首先，在切换PC侧的窗口大小后，我们需要解决迷你程序的体验。

多任务在PC侧的操作经验并任意调整窗口大小意味着Mini程序需要在PC侧具有动态布局适应性。

如果一个未适应的迷你程序，则无法在PC侧切换Mini程序窗口的大小。这样，用户对迷你程序的体验只能限制在默认情况下显示的大小，而不可避免的是“为什么不能扩大迷你程序窗口？”的问题。

一个无法在PC侧切换窗口大小的小程序

为了适应窗口尺寸在PC侧开关的能力，我们建议使用网格系统和响应策略来实现内容的动态布局，随着窗口尺寸而变化。

关于动态布局，有7种常见的适应方法。这些适应方法可以使您的迷你程序更好，更有效地向用户展示，当然，您还可以找到自己更独特的适应方法。

（1）左右缩回

布局特征：水平将表面元素扩展到具有右屏幕尺寸的区域。通常用于具有简单元素/结构的页面，例如列表，表格。

适应规则：表面显示高度是固定的，宽度不是固定值；当布局的显示大小变化时，元素的显示宽度相应地变化。

左右伸缩适应

（2）折线安排

布局功能：根据布局宽度选择顶部和底部元素的布局。它通常用于内容架构级别（例如内容详细信息页面）的内容演示页面。

适应规则：确定布局区域的水平宽度以及是否可以容纳多个元素。如果可以容纳它，请使用左右安排，并使用上下安排。

线路休息安排适应

（3）水平膨胀

布局特征：将表面元素重复到具有正确屏幕尺寸的区域。它通常用于具有固定模块结构的页面，并且在模块中（例如电子商务等）中使用了简单而有序的布局。

适应规则：基于布局区域的水平宽度，在水平方向上添加更多元素，同时使表面元素之一保持不变。

水平膨胀适应

（4）分数显示

布局功能：利用屏幕宽度来排列具有相同属性的布局组件。它通常用于具有较少信息架构级别的内容演示页面，例如播放列表，应用程序列表等。

改编规则：您可以定义单个组件的宽度规则，并自动计算可重复元素的数量，因为布局区域的水平宽度会发生变化。

显示适应

（5）分层显示

布局功能：将页面分为多列，并在不同区域显示每个模块的内容。该列具有明确的主奴隶关系，而奴隶部分取决于主要部分的存在。它通常用于具有清晰层次结构的页面，列显示不影响信息获取的页面。例如，类似工具的应用程序，左侧是父菜单，中间是子菜单，右侧是内容详细信息。

改编规则：设置每列的最小宽度，根据布局区域的水平宽度来判断可以安装的级别数，并显示可以显示的列数。

适应的分层显示

（6）免费布局

布局功能：将页面分为多个功能模块。确定主模块后，从主模块周围布置了从模块。在页面中存在多个功能模块的情况下，通常使用它，其中包括1个主要模块，例如内容详细信息，等等。

改编规则：确定主模块的最大显示值和固定位置。从设备模块随布局区域的水平宽度而变化，并自动计算主模块周围的渲染模式。

免费布局改编

（7）侧边栏

布局功能：页面中有明确的主奴隶关系。主模块是导航模块。大尺寸，主模块可以以侧边栏形式显示，因此页面可以同时浏览或操作主奴隶模块。

适应规则：设置表面断点的宽度。如果断点大小超过断点大小，则主模块会变为表面的侧边栏。从属模块会根据布局区域的宽度自动计算信息量。

侧边栏适应

作为设计师，您还需要注意以确保更改后，视图中的信息是完整且可读的。例如，页面上的图片，文本，图标和其他信息。

视图的信息可读性比较

2。如何根据PC侧转换交互式交互方法？

与PC侧的相互作用不同，人们已经在移动方面养成了成熟的手势操作习惯。当这些移动迷你程序再次出现在PC上时，对于相应的交互方法，必须找到相同的预期行为。

如下表所示，我们提供了一些基本的交互式翻译方法。如果您的使用许多特定于移动的手势交互，则可能需要找到相应的替代方案。

互动互动翻译表

在特殊情况下要注意的要点

接下来，我们需要谈论在Mini程序适应PC端之后还需要注意其他哪些方案。

1。不同设备的弹出控件的不同体验

为了满足在移动侧操作的用户的特征，该小程序的弹出窗口控件通常出现在窗口的中间或底部。在PC侧，用户通常使用鼠标进行操作。在用户切换PC窗口大小后，弹出窗口将变形。

在这种情况下，可以以中心弹出窗口的形式呈现。

弹出窗口样式图

2。隐藏操作

在移动互动中，手势通常用于显示隐藏的操作而没有直观的曝光。在PC侧，这种类型的操作将引起一些可用性问题。

在PC 中，如果您需要在小程序中提供此类功能，建议将其转换为PC侧的唯一交互方法，例如将移动侧的左套件菜单转换为右键单击菜单。

隐藏的操作说明

3。页面刷新的交互式互动

页面刷新操作通常在移动终端上使用手指下拉操作，但是此操作模式不适用于PC终端。

在PC侧，通常使用固定位置按钮，例如单击鼠标以实现页面刷新。因此，在适应过程中，如果您的迷你程序页面需要刷新能力，则需要以相对稳定的演示形式进行表达。

页面刷新操作说明

最后，将来，微信团队还将为迷你计划开发人员带来更简单，更快的适应解决方案。通过我们的努力，我们将进一步降低适应多个平台所产生的成本。

PC端的改编只是Mini计划在更多平台上的首次亮相的开始。可以想象，随着用户使用的屏幕变得越来越大，改编的迷你程序可以显示出更大的想象力。空间，这是微型编程改编的最迷人的地方。

上述功能将在微信版2.9.5及以上发布。

“大屏幕改编技术指南”

“迷你计划适应设计指南”

- 结局 -

参考：

“ - 人类计算机接口指南”

“ - - 用户界面和设计准则”

“华为折叠屏幕应用程序开发指南”

“中国网络”