查看原文
其他

为 PC 端设计小程序

WeDesignCenter We-Design 2022-09-06
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.

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存