推荐

为了追求高性价比,我们通常这样来做页面适配

2021-04-19 00:00 5080 浏览

为什么要适配

通常产品经理在立项前都要思考需求的实现方式:是原生做?还是 H5 做?

问题的答案会因实际情况有所不同,如果追求极致体验,那原生效果更好,如果追求短频快,那就选用 H5,或是两者结合。

CCtalk 是个涉及 7 大端的跨平台产品:iOS、Android、PC、Mac、Web、触屏、小程序。我们在日常项目中(尤其是用户增长类的项目)越来越多选择用 H5 实现,然后以低成本适配方式应用到不同客户端。

这样做的好处在于:

降低了开发成本。原本要涉及 iOS、Android、PC(PC 和 Mac 用同一套 Qt 实现)、H5 这 4 个端的开发人员,现在采用内嵌页的方式,可以做到完全不涉及移动端和桌面端,或者仅是入口放置这类比较简单的工作。

降低了维护成本。如果有优化调整,可以只改 H5 页面,不用各个端都动手。

好处显而易见,当然这也不是件一本万利的事。看下面这张 App 和 PC 屏幕尺寸的对比图就明白了,长宽比差异这么大,页面在适配的时候,有时需要优化调整布局。

△ App和PC屏幕尺寸对比

如果要真正做到流畅顺滑的体验,流式布局是最佳选择,但是对设计和开发的要求都很高,维护成本也不小,这让大多数团队望而却步。所以还是自动适配宽度、媒体查询(断点适配)等相对低成本的方式比较香。

框架和页面

如何以低成本的方式做适配?这个问题涉及 2 个方面:框架和页面。

△ 框架和页面

先来看看框架,大致有 4 种:触屏、App、PC、Web。通常一个项目会涉及其中的几种,也有少数情况都涉及。(此文暂不讨论小程序,有机会再写一篇关于小程序设计的文章)

1. App

CCtalk 用的 App 框架容器是公司横向团队提供的 Web View,有 2 种:

常规的导航样式。元素包括:返回、页面标题、分享(根据需要选择展示或不展示)。安卓和 iOS 略有区别,iOS 为了导航栏的顺滑过渡效果,用的是同一个 Web View,所以无法满足在一系列页面中部分页面有分享按钮,部分页面没有分享按钮。安卓用的不是同一个 Web View,所以没有这个问题。(此处不展开讨论)

透明头部导航。常规导航无法满足一些个性化的设计需求,所以透明头部导航就应运而生了。可以对导航栏进行自定义设计,营造沉浸式的体验。

△ 2种头部

2. PC客户端

PC 客户端的框架导航包括:返回上一页,返回首页。页面内嵌时,要留意容器导航和页面导航是否有重复或遗漏。假如要保留页面导航栏,那需隐藏返回按钮;如果去掉页面导航栏,则需将导航栏上原有的操作(例如分享)通过悬浮等方式保留。

△ PC端的全局导航

3种常见的适配方法

一般的设计流程是:先设计触屏页面,再去看看 PC、Web 页面是否需要调整。

响应的总原则:提高屏幕利用率。

具体评估标准有 3 点:

  • 确保页面比例协调——不丑;
  • 减少阅读障碍——易读;
  • 减少操作负荷——易操作。

页面元素从小到大可分为:控件→组件→模块→页面,按照不同维度的复用,并结合自身的项目经验,整理出 3 种常见的方法(此处是重点,看我看我)。欢迎小伙伴一起讨论补充。

△ 3种常见的适配方法

方法一:保持页面不变,简单拉伸适配

这种方法最简单,几乎不用动脑子。具体实施方式又分两种:

  • 把页面拉伸到容器的指定宽度。
  • 将内容主体居中显示,两边留白。

案例1-拉到指定宽度:

像帖子这类结构简单的内容页一般都可以直接拉伸。注意检查是否有遗漏操作,一般在 PC 端可以采用悬浮按钮的方案将移动端的操作保留。

△ 帖子页

案例2-居中显示,两边留白:

如果页面直接拉伸给用户增加了操作成本,可以采用将主体内容居中,页面两边留白的方式。

实名认证项目是将同一套实名认证流程复用到 3 个不同的使用场景中,所以页面需要适配触屏、web、PC 弹窗 3 个框架尺寸。如果将触屏页直接在 Web 上拉伸,那不仅样式上不美观,而且右侧的「修改」、「获取验证码」等操作按钮距离左侧的标题太远,根据格式塔的接近原理,右侧的一列蓝色操作反而会被误以为是一个整体,脱离和主体的关系,不易于操作。所以我们的做法是放弃拉伸,而是将主体内容居中显示,页面两边留白。

△ 实名认证页

这种方式虽然简单,但也要注意可能会涉及一些细节调整:

  • 留意容器导航和页面导航是否有重复/冲突。这点前面也讲过了,此处不再赘述。
  • 触屏端和 Web 交互习惯不一致的特殊组件。例如 Web 页用下拉框,触屏端一般是用系统自带的轮播选择器。
  • 根据平台特性增减内容/操作。例如在任务墙的项目中,由于移动端可以追踪到分享至第三方平台,但是 PC 端追踪不到,所以页面适配时,在 PC 端去掉了分享这个任务。

如果所有页面都能这么轻松适用于各个不同端,那对设计和开发来说真是省心省力,皆大欢喜。然而现实不会这么顺风顺水,有些页面放到不同的框架内会「水土不服」,这时就需要设计师出马做些调整。

方法二:保持页面框架,调整模块内的样式

这种调整适用于有图片和列表的页面。从设计层面改动不算大,而且开发量适中,开发也比较能接受。

案例1-排行榜

在课程排行榜项目中,有一个榜单列表页,展示榜单的具体排名和奖励等信息。

如果直接把触屏页面搬到 PC 端,满眼是大写的「丑」,从设计角度分析,用户的阅读负担和操作负担也过重,屏幕利用率低,鼠标滚了半天也没看完一半榜单。

△ 直接拉伸——丑&不好用

所以这个页面需要设计师改造一下才能适配到 PC 端,具体怎么做呢?

我们来分析一下它的页面框架和模块。页面从上到下分为:奖励 Banner、tab 区、列表区和我的排名 4 部分,结构相对来说比较简单,在 PC 端可以保持大的框架结构不变。

△ 页面结构

因为移动端是以纵向为主的屏幕,而 PC 端是宽屏,需要进行调整的模块分别是:奖励 banner区(图片类),其他名次列表(列表类)。对于图片适配,在这个项目中可以采用不同端使用不同比例图片的方案。对于列表适配,在 PC 端由 1 列调整为 2 列,以提升阅读效率。

△ 保持页面框架,调整图片和列表模块样式

案例2-课程售卖页

图片的适配处理,除了采用不同比例的多套图之外,还有另一种方式——保持图片比例不变,调整页面布局。将图片和标题从上下结构改成左右结构。

△ 课程售卖页

小结:

保持页面框架,调整模块内样式的方法适用于结构相对简单,有图片和列表等特殊元素的页面。

对于图片适配,有 2 条思路:

  • 提供不同比例的图片。优点是可以较好的展示图片,缺点是需要出 2 套图。适用于图片不多,而且非用户自定义图片的场景。
  • 保持图片比例不变,调整图片和标题的布局。一般是将上下结构改成左右结构,适合用户自主上传图片的场景。
方法三:复用模块,重组页面布局

如果页面模块多、结构复杂,靠小改还是会造成阅读障碍和操作负荷,那就要用方法三——模块级复用,重组页面布局。

案例-课时学习页

课时学习页是个多模块的复杂页面,分别有视频播放区、课时基本信息、目录、网师、评价和推荐。整体思路是将页面结构由 1 列调整为左右 2 列,以此来提高屏幕的利用率。

模块的具体位置根据其重要性以及和内容主体的相关度来排布,例如目录:从平台角度希望用内容吸引用户,增加观看时长;从用户角度是需要经常点击切换的,对于这种重要性高又操作频繁的模块,当然应该放在第一屏内。例如推荐:和内容主体的关联度不高,所以优先级低,放在右侧较小的区域内。

△ 课时学习页

在复用模块时,要注意是否有手势操作的场景。如果触屏端有左右滑动的模块,在 PC 端适配有 2 种做法供参考:

  • 改成点击操作。例如在模块上加箭头,允许用户通过点击切换。
  • 由横向排列改成纵向排列。例如这个案例中的目录模块,在手机端是 5 个课时一列左右滑动切换,在 PC 端改成整个课时列表都是纵向排列。

另外,要注意浮层的特殊处理。手机端一般通过浮层展示更多信息,在 PC 端适配时,需将浮层调整为固定模块。例如移动端吸底的课程介绍浮层,在 PC 端改成固定在目录下方。

△ 浮层的适配

以上是我结合项目经验总结的 3 种低成本页面适配方法。当然,在具体的适配中还会遇到许多细节问题,需要 case by case 去处理。

分享:
相关内容
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。所以如果只是停留在以用户为中心的思路进行产品
  • 从这3个方面,快速了解产品图标设计体系的炼成
    那一次因为主题的缘故,不能偏题太远,所以对图标本身的讲解我没有进行太多的剖析,更多是在讲标签栏图标的切图、对接前端落地等项目实操的手法。于是有部分读者在后台给我留言,让我再全面地讲解一次图标。所以这一期我将分三个步骤来总结一下一个产品图标体系的诞生。认识:图标的分类不论是从应用场景还是视觉效果来讲,图标的种类都是非常繁多的。所以对
  • 用一篇干货,帮你完整掌握这套系统的竞品分析方法论
    引言在产品设计中,竞品分析是一项必备的基本技能。做竞品分析本身并不难,网络上到处都是可以参考的模板,但是怎么从这个过程中总结提炼出最有效的关键信息、为后续的业务决策/设计工作带来较大参考价值,而不是产出一份看上去详实全面却是花瓶报告,仍然值得我们不断去思考。今天这篇文章参考张在旺老师的《有效竞品分析》一书,从流程、工具、方法等方面介
  • 腾讯设计师:如何从零开始完成一套3D图标设计?
    QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级,其中也包括重要的图标图形。1. 延展思考因此基于目前较为完整的图标图形,希望可以拓展出更多不一样的设计内容,并且可以应用在不同的位置,例如空白页、运营内容、背景等等。2. 问题分析基于目前的图形可以很明显的得到 2 个问题:图标的
相关推荐
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。所以如果只是停留在以用户为中心的思路进行产品
  • 从这3个方面,快速了解产品图标设计体系的炼成
    那一次因为主题的缘故,不能偏题太远,所以对图标本身的讲解我没有进行太多的剖析,更多是在讲标签栏图标的切图、对接前端落地等项目实操的手法。于是有部分读者在后台给我留言,让我再全面地讲解一次图标。所以这一期我将分三个步骤来总结一下一个产品图标体系的诞生。认识:图标的分类不论是从应用场景还是视觉效果来讲,图标的种类都是非常繁多的。所以对
  • 用一篇干货,帮你完整掌握这套系统的竞品分析方法论
    引言在产品设计中,竞品分析是一项必备的基本技能。做竞品分析本身并不难,网络上到处都是可以参考的模板,但是怎么从这个过程中总结提炼出最有效的关键信息、为后续的业务决策/设计工作带来较大参考价值,而不是产出一份看上去详实全面却是花瓶报告,仍然值得我们不断去思考。今天这篇文章参考张在旺老师的《有效竞品分析》一书,从流程、工具、方法等方面介
  • 腾讯设计师:如何从零开始完成一套3D图标设计?
    QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级,其中也包括重要的图标图形。1. 延展思考因此基于目前较为完整的图标图形,希望可以拓展出更多不一样的设计内容,并且可以应用在不同的位置,例如空白页、运营内容、背景等等。2. 问题分析基于目前的图形可以很明显的得到 2 个问题:图标的
热门内容
  • 想做好线下物料?收了这份平面设计师必修的基础印刷知识
    如果一个设计师对印刷流程和工艺不够了解,那么作品落地时必将大打折扣,所以了解印刷技术方面的基础知识,是每个平面设计师的必修课。平版印刷平版印刷是将油墨印至橡皮滚筒,再藉由压力滚筒印刷至纸上。这是多种印刷方式中最常见的一种,印刷质量较好,图文精细、层次丰富,图像色彩的还原性好,大部分画册、海报、杂志、书刊、包装等都是用单张纸平版胶印
  • 如何设计小程序?来看这份超全面的指南!
    前言最近正好在做小程序相关的项目,发现现在关于小程序相关的文章还比较少,能吸收的运用到实际工作中的技巧也「比较有限」,所以我想着自己来尝试写一篇「相对全面和实战」的文章,来帮助到越来越多做小程序的设计师们。小程序的发展史2017 年 1 月 9 日,张小龙在 2017 微信公开课 Pro 上发布的微信小程序正式上线。2017 年 1 月 9 日微信小程序平台正式发布,在业界
  • 用经典的设计原则,深度解析闲鱼的用户体验设计
    今天我们主要从用户体验的部分原则来看闲鱼,主要以产品视觉设计四大原则、交互设计十大可用性原则、情感化设计来看闲鱼,今天先讲两个部分:视觉和交互的用户体验。其实主要是因为用户体验分为这个几个方面:视觉的感官体验,给用户带来的是视觉表现层的体验,所以我们把产品视觉设计四大原则来对照用户的感官体验。交互的用户体验,也就是产品设计中给用户
  • 资深UI设计师搞定输入框和表单的20个秘诀
    编者按:这篇文章来自资深设计师Taras Bakusevych,长期从事金融和企业类数字产品的设计,在表单设计领域造诣精深。这篇文章梳理了他总结的 20 条表单和输入框的设计经验,实用性极强。表单是 UI 界面中最为常见的元素,它通常是用来搜集和呈现一些数据、信息和特定的字段。在现实世界中,印刷的表格存在的时间更为久远,它们身上有很多设计可以作为重要的参考,帮助
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。所以如果只是停留在以用户为中心的思路进行产品
联系方式
  • 400-1234-5678
  • 13333333333
  • test#qq.com