为PC端设计小程序

见贤思齐

Sharing移动端与PC端有着各自独特的优势，随着小程序在越来越多的设备终端上普及，PC端已成为下一个小程序发挥能力的重要场所。PC端相较于移动端具有屏幕更大、操作更精准、效率更高的优势。那么如何利用这一优势，将小程序更好地呈现在PC端呢？在这里我们总结了一份《小程序适配设计指南》，希望可以帮助你完成小程序从移动端到PC端的适配。           本期提纲：1. 移动端与PC端的根本体验差异•物理尺寸•操作体验• 互动交互2. 小程序PC化的关键适配设计要点•小程序在PC端的内容布局方法•互动交互方式的转译3. 特殊场景注意要点• 小程序弹窗控件不同端口的体验区别• 具有隐藏性的操作• ⻚面刷新的互动交互1移动端与PC端的根本体验差异移动端与PC端的差异从物理尺寸初识、系统能力感知、操作体验熟悉。接下来我们将从物理尺寸、操作系统、互动交互3个部分来讲述这两端的差异性。1.物理尺寸在物理尺寸上，PC端尺寸远大于移动端。现在主流的屏幕尺寸前三名分别为1920x1080、1400x900、1366x768，这意味着大屏幕已经成为未来发展趋势，更大的尺寸意味着可以展现更多的信息和操作。当然更大尺寸并不能直接等于更好地体验，为了充分利用尺寸优势，你可能需要对自己的小程序做一些适配工作，这部分将在文章第二部分详细赘述。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及以上。《大屏适配技术指南》《小程序适配设计指南》—  Theend  —参考文献：《Apple——人机界面准则》《Windows——用户界面和设计准则》 《华为折叠屏应用开发指南》 《Bootstrap中文网》*本文仅代表作者观点如需转载，请注明来自WeDesign作者：MoonluPerferetobdura; dolorhictibiproderitolim.