互联网时代犹如春雨般润物细无声，网络技术不断地迭代更新升级与进化，一直以来工程师都在孜孜不倦的寻求多终端页面适配的捷径。然而自适应方式需要开发多套页面，响应式不适用于复杂业务的页面。那么羚珑智能设计是如何做到既保证多终端页面精细化设计的需求，还可以省去开发与设计环节呢？ 下文就给大家详细说明~

一、先聊一聊自适应与响应式设计

提到 “多端”，不可避免的我们会想到这两种页面设计方式，那么我们先花几分钟时间来看下这两种页面开发方式的优缺点和应用场景吧。

自适应网页设计：

针对多种屏幕尺寸进行不同的布局设计，需要对多个设备和平台进行针对性的设计。比如我们京东移动端和 PC 端的页面两个场景有很大的差异，是针对各自场景通过两套设计与代码来分别实现。优点是可以精细化的针对场景设计和运营。

响应网页设计：

一些简单的官网或者展示类页面，逻辑简单并且内容大致相同，通过一套代码适配多种尺寸屏幕，是可以无缝匹配符合电脑、平板、手机等不同客户端下的效果。优点是开发和设计的维护成本较低。比如下面耐克的官网，除了在导航分类上有做两端的差异化适配之外，其他内容都是通过简单的拉伸和删减处理的。

二、为什么要羚珑要做页面的多端转化？

羚珑的多端转化功能是因活动场景而起，但不仅限于活动页面的，先看一下活动场景运营、设计与研发面临的普遍问题吧：

1 商家一年有 3 次大促，N 次小促以及 N + 次日常活动~
2 当下移动端是主要阵地，但 PC 端页面也必不可少！
3 活动期间不同时段有不同的运营策略，需要对页面进行多次修改，于是陷入做移动页面→做 PC 页面→改移动页面→改 PC 无限循环~
4 一个项目往往要经历以下复杂而漫长的流程：业务发起需求＞产品撰写需求文档＞产品需求评审＞交互设计＞交互设计评审＞视觉设计＞视觉设计评审＞产品开发＞上线前测试＞正式发布上线~@#￥%……&*

三、羚珑多端转化可以达到什么效果？

羚珑智能页面设计通过组件化的可视化搭建系统为用户提供 “无需设计 & 无需开发” 的页面设计级上线服务。
羚珑移动 / PC 一键转化功能在可视化搭建端基础上实现了：页面布局一键转化、图片 / 文案一键转化、智能配色一键转化、商品数据一键转化。除此之外可以实现一端发布，即时同步两端。

在转化效果上：“羚珑多端转化”保证了与 “自适应设计” 一样的的精细化展示效果，除了页面布局和模块布局做了场景化区分，颗粒度精细到了图片内元素的排布方式。

在制作成本上：“羚珑多端转化”相比 “响应式设计” 节省了研发与设计的步骤，大大节省了资源，也缩短了项目周期。

因此在活动营销项目中，不需要专门的设计与研发资源，只需要活动实施者在羚珑平台上传活动素材，即可实现移动端与 PC 端的即时一键发布上线。整个搭建或者修改的过程仅仅需要三个步骤：

四、一键转化的黑科技是如何实现的呢？

羚珑的转化关系基础原理仍然源自响应式设计的规则。只是将页面容器切分成了模块容器，并在内容方面依据容器做了更加精细的匹配关系。李小龙在面试好莱坞时这样描述中国功夫：
功夫就像水一样，
将水倒入杯子中，就变成杯子；
把水倒入瓶中，就变成瓶子；
把它放在茶壶中，水就变成茶壶了。”
引用李小龙的哲学，内容置于页面恰如水置于容器中~

我们所做的只是在不同的容器规定其内容如何展现。

4.1 首先我们先来看看容器里的内容是什么？

像所有可视化搭建系统一样，羚珑是以元丰富的组件库来作为搭建系统的基石。组件的命名和规则在系统中是统一的，均为：【端】-【类别】-【功能】-【结构布局】。每个端都有近 100 多个含不同布局的组件，如下如移动端组件分布示意图：

每个移动端组件都结构化的拆分为了元素的颗粒度，并且每个元素在可视化搭建的编辑器中是可以编辑的。如下商品组件在编辑器中的示意图：

4.2 移动端和 PC 端的内容是怎样一一对应的？

上文提到了我们所做的只是规定了在不同的容器中规定内容如何展现。所以 PC 端的内容其实是跟移动端的内容做了对应关系。并且根据端的特性做了一系列通用的变换规则。比如秒杀商品中秒杀倒计时与商品在移动端为上下布局，而在 PC 端则为左右布局，商品单元在移动端为一排 2 个，在 PC 端则增加为一排 4 个。

除此之外每个结构化的字段都是数据一一对应的，保证在一端修改数据之后在另外一端能够同步的变化。
组件是结构化的内容，那么图片又是如何做的对应关系呢？实际上不仅在组件的层面上做了原子的拆分，在图片维度我们也将图片中的元素进行了拆分，譬如将首焦 banner 拆分元素为：背景图、商品图、装饰元素、主文案、辅助文案、按钮，并且这些元素针对两端进行了规则的重排，这样才能保证在不同端以最佳的布局形式展现给用户。同样，元素颗粒度的拆分也保证了在一端修改配色之后在另外一端能够同步的变化。

4.3 转化的规则是什么？

1. 拉伸：

在布局不发生改变、内容没有增减的情况下进行拉伸，如广告组模块：

拉伸的方式需要根据具体的场景做区别。

文本：文本内容较重要时我们会做无增减的拉伸，当空间位置受限，同时文本内容又不是非常关键的信息时会选择文本截断的方式进行拉伸。

图片：一般来说细节图去做等比拉伸，这样尽最大可能的保证两端效果的一致性。

由于移动端宽高比相比 PC 端要小很多，为了保证在大屏上的效果不至于出现 ““霸屏” 的情况，还会有取舍的进行裁切。

模块：移动端通常会将一个楼层划分为一个模块，对应到 PC 端会将模块在横向进行拉伸。

2. 布局改变：

布局发生改变时需要将元素进行重排，如头图 banner 模块，如果采取等比拉伸的策略会导致头图特别高，在 PC 端影响第一屏的页面效率，如果采取裁切的形式将会影响图片的展示效果，所以采取图片内元素重排的形式进行变化。

再比如锚点导航模块在移动端是横向的导航，上滑页面时会吸附到页面的顶部，而在 PC 端我们一般会吸附在页面的侧边固定位置。

3. 内容增减：

单元重复展示模块一般会用内容增加和删减的形式来处理，比如商品模块在 PC 端横向空间比较大的情况下会多展示单元格数。

4.4 转化过程中的小技巧

元素颗粒度的对应关系是非常大的一个工作量，当一些细颗粒度的内容没有做关联时可以通过简单的对应关系来解决。为了保证转化的效果，组件之间的正向转化和逆向转化并非一一对应的关系，允许多对一的转化而不允许一对多的转化。

比如锚点导航组件，移动端文字型与图文型转化至 PC 端都将转化为文字电梯。而 PC 的文字电梯和图文电梯转化至移动端时都将转化为文字型锚点导航。究其原因是因为没有设定移动端和 PC 端图标之间的对应关系，直接拉伸展示的话转化效果将无法保证。这样 “偷懒” 的做法可以使得我们产品节奏快一些，后面再慢慢补齐其中的转化规则。

五、写在最后

PC / 移动一键转化的功能在上线后得到了商家的认可，在两个月内占据了活动页整体上线项目的 56.1% 。 产品的顺利上线更多的是依赖于羚珑强大的基石，研发团队的专业支持和团队共同推进的力量。
前面主要讲了项目的背景和项目实施的原理。但一个方案从想法到用户投入使用我们还做了平台应用方面的设计、商家用户的推广和客服服务跟进。例如： 在哪些推广渠道曝光我们的卖点？如何引流至我们的站点？在什么样的场景适时的提示用户使用？如何让用户快速理解这个功能？商家遇到问题如何反馈？以及后续我们如何迭代和优化…
这个项目是我从一个交互设计师向产品经理迈出的第一步，虽然踩了很多坑但也是第一次接触了完整项目的各个触点。后续将会推出更多羚珑项目的总结，敬请期待…

欢迎大家在 PC 端打开链接体验转化效果 ~➡️ https://ling.jd.com/atom_v2/activity?topic=h52pc。备注：Chrome 体验效果更佳

参考文献：自适应与响应式网页设计 https://uxplanet.org/adaptive-vs-responsive-web-design-eead0c2c28a8
李小龙插图源自网络：https://stephaniewalter.design/blog/download-illustration-content-is-like-water/