为 PC 端设计小程序

Sharing

移动端与 PC 端有着各自独特的优势，随着小程序在越来越多的设备终端上普及，PC 端已成为下一个小程序发挥能力的重要场所。
PC 端相较于移动端具有屏幕更大、操作更精准、效率更高的优势。那么如何利用这一优势，将小程序更好地呈现在 PC 端呢？在这里我们总结了一份《小程序适配设计指南》，希望可以帮助你完成小程序从移动端到 PC 端的适配。                  本期提纲：1. 移动端与 PC 端的根本体验差异• 物理尺寸• 操作体验• 互动交互

2. 小程序 PC 化的关键适配设计要点

• 小程序在 PC 端的内容布局方法• 互动交互方式的转译

3. 特殊场景注意要点

• 小程序弹窗控件不同端口的体验区别• 具有隐藏性的操作• ⻚面刷新的互动交互

1移动端与 PC 端的根本体验差异

移动端与 PC 端的差异从物理尺寸初识、系统能力感知、操作体验熟悉。
接下来我们将从物理尺寸、操作系统、互动交互 3 个部分来讲述这两端的差异性。

1. 物理尺寸

在物理尺寸上，PC 端尺寸远大于移动端。现在主流的屏幕尺寸前三名分别为1920 x 1080、1400 x 900、1366 x 768，这意味着大屏幕已经成为未来发展趋势，更大的尺寸意味着可以展现更多的信息和操作。
当然更大尺寸并不能直接等于更好地体验，为了充分利用尺寸优势，你可能需要对自己的小程序做一些适配工作，这部分将在文章第二部分详细赘述。

2. 操作体验

在操作体验上，PC 端的操作视窗具有多任务同时处理、任意调整视窗尺寸的特性。
在移动端则更关注于单个的窗口的内容展现，它需要将单个窗口的任务单一化、简洁的呈现在用户面前。
在单个视窗操作的体验中，还有一项人机交互上的差别。移动端为了适应人们的单手操作，通常会把控件放置在视窗的中间或底部；而在 PC 端，人们通常不会这样使用，所以基于人机工程，PC 端屏幕上的每一个区域和其他区域一样都容易触达。

3. 互动交互

互动交互上，目前可⻅的移动端都是为触摸而设计。触摸意味着提供更大、更易于访问的触摸目标，它允许多个手指进行交互操作。例如轻触、⻓按、双指放大 / 缩小、边缘滑动等。
而 PC 端是通过鼠标键盘的配合来进行交互的，这样的交互形式可以为用户提供更高精度和速度的输入能力。
在 PC 端设计的小程序中，特别需要注意将可能遇到的互动操作形式进行转译，使 PC 端的小程序更友好、易于使用。

2小程序 PC 化的关键适配设计要点

在上文里，我们已经了解到移动端和 PC 端根本体验差异。你可能会困扰 “为了适配 PC 端，我是不是需要重新设计我的小程序？”
如果你的小程序已经使用的了官方小程序框架，且交互较为简单，那么你只需要维护一套代码即可实现移动端与 PC 端的呈现。为了让你的小程序展现的更加优秀，你可能需要对你的小程序做一定的适配优化。
那么小程序的设计开发者如何将自己的小程序适配于 PC 端呢？接下来我们为你提供了以下几点建议。1. 为了更好地适应 PC 端的大屏体验，你需要优化小程序的内容布局; 2. 你需要关注那些移动端转译至 PC 端的互动交互方式。

1. 小程序的内容布局如何适应 PC 端的大屏幕体验?

首先，我们需要解决小程序在 PC 端窗口尺寸产生切换后的使用体验。
PC 端多任务处理、随意调整视窗尺寸的操作体验，意味着小程序在 PC 端需要具有动态布局的适配能力。
未适配的小程序，将无法在 PC 端切换小程序窗口的尺寸，这样用户对于小程序的体验只能限制于默认展示的尺寸大小，难免产生 “小程序窗口为什么不能放大？” 的疑问。

▲ 不能在 PC 端切换窗口尺寸的小程序

为了适应 PC 端窗口尺寸切换的能力，我们建议使用栅格系统、配合响应策略来实现小程序内容随窗口尺寸变化而变化的动态布局。
关于动态布局，常⻅的适配方法有以下 7 种。这些适配方法可以让你的小程序更好更高效的呈现在用户面前，当然你也可以找到自己更独特的适配方式。
(1) 左右伸缩

布局特点：将⻚面元素水平拉伸至屏幕尺寸合适的区域。常用于元素 / 结构简单的⻚面，例如列表、表格等。

适配规则：⻚面显示高度固定，宽度不是固定值；当布局的显示大小发生变化时，元素的显示宽度随之改变。

▲ 左右伸缩适配

(2) 换行排列

布局特点：将⻚面元素根据布局宽度来选择由上下、左右排布。常用于信息架构层级较少的内容呈现型⻚面，例如内容详情⻚等。

适配规则：判断布局区域的横向宽度，是否能容纳若干元素，若能容纳就使用左右排布，容纳不了就使用上下排布。

▲ 换行排列适配

(3) 横向拓展

布局特点：将⻚面元素重复延伸至相对屏幕尺寸合适的区域。常用于模块结构固定，且模块内布局简单有序的⻚面，例如电商等。 

适配规则：保持⻚面元素尺寸或间距其中之一不变的前提下，基于布局区域的横向宽度，在横向增加更多元素。

▲ 横向拓展适配

(4) 分⻚展现

布局特点：利用屏幕宽度优势，将相同属性的布局组件，横向并列排布。常用于信息架构层级较少的内容呈现型⻚面，例如歌单、应用列表等。

适配规则：可定义单个组件的宽度规则，随布局区域横向宽度的变化，自动计算可重复的元素个数。

▲ 分⻚展现适配

(5) 分层展现

布局特点：将⻚面分为多栏，分区域展示各模块内容。分栏具有明显主从关系，从属部分依赖于主导部分存在。常用于层级结构明确，且分栏展示不影响信息获取的⻚面，例如工具类应用，左侧为母菜单，中间为子菜单，右侧为内容详情。

适配规则：设定每栏最小宽度，依据布局区域的横向宽度，判断能容纳层级数量，展现可呈现的栏数。

▲ 分层展现适配

(6) 自由布局

布局特点：将⻚面分为多个功能模块，确定主模块后，从属模块围绕主模块布局。常用于⻚面内存在多个功能模块情况，其中有且只有 1 个主模块，例如内容详情⻚等。

适配规则：确定主模块显示最大值与固定位置，从属模块随布局区域横向宽度的变化，围绕主模块自动计算可呈现模式。

▲ 自由布局适配

(7) 侧边栏

布局特点：⻚面中存在明显主从关系，主模块为导航模块，在大尺寸下主模块可使用侧边栏形式显示，使⻚面同时能快速浏览或操作主从模块。

适配规则：设定⻚面断点宽度，超过断点尺寸，主模块变化成⻚面侧边栏，从属模块依据布局区域的宽度自动计算可呈现信息量。

▲ 侧边栏适配

作为一名设计师，你还需要注意，在小程序布局发生变化后保证视图内的信息完整可读。例如，⻚面中的图片、文字、icon 等信息。

▲ 视图内信息可读性对比

2. 互动交互方式如何对应 PC 端进行转译?

与 PC 端互动交互不同的是，人们已经在移动端培养出成熟的手势操作习惯。当这些移动端的小程序重新在 PC 端出现时，相同的预期行为，必须要找到对应的交互方式。
正如下表展现的，我们提供了一些基础的交互操作转译方式。如果你的小程序使用了很多移动设备特有的手势交互，你可能需要找到相应的替代方式。

▲ 互动交互转译表

3特殊场景注意要点

接下来我们需要聊聊，在小程序适配 PC 端之后还有哪些需要注意的场景。

1. 小程序弹窗控件不同设备的不同体验

为了符合用户在移动端单手操作的特性，小程序的弹窗控件通常出现在视窗的中间或底部。而在 PC 端，用户普遍是用鼠标进行操作。弹窗在用户对 PC 端视窗进行尺寸切换后，会因适配而产生形变。

针对这种情况，可采用居中弹窗的形式呈现。

▲ 弹窗样式示意

2. 具有隐藏性的操作

移动端交互中，常通过手势来展现无需直观展露的隐蔽操作。在 PC 端，这类操作会造成一些可用性问题。
在 PC 端适配中，如果需要在小程序中提供此类能力，建议转译为 PC 端特有的交互方式，例如将移动端左滑菜单转译为鼠标右键菜单。

▲ 具有隐藏性的操作示意

3. 页面刷新的互动交互

页面刷新操作在移动端通常采用手指下拉的操作，但这样的操作形式在 PC 端并不适用。
在 PC 端，通常采用固定位置按钮，例如用鼠标点击的操作实现页面刷新。所以适配过程中，如果你的小程序页面需要刷新能力，你需要采用一种相对稳定展现形式去呈现。

▲ ⻚面刷新操作示意

最后，未来微信团队还会为小程序开发者带来更加简单、快捷的适配方案，通过我们的努力，进一步的降低适配多平台所产生的成本。
PC 端的适配仅仅是小程序在更多平台上亮相的一个开端，可以想象的是随着用户使用的屏幕越来越大，适配后的小程序所能展现的舞台将具有更大的想象空间，这才是小程序适配最迷人的地方。
上述能力将会发布于微信 Windows 版 2.9.5 及以上。
《大屏适配技术指南》

《小程序适配设计指南》

—  The end  —参考文献：《Apple —— 人机界面准则》《Windows —— 用户界面和设计准则》 《华为折叠屏应用开发指南》 《Bootstrap 中文网》

*本文仅代表作者观点如需转载，请注明来自WeDesign

作者：Moonlu

Perfer et obdura; dolor hic tibi proderit olim.