如何快速将PC模板转换为移动端模板

  • 文档创建者:Naya
  • 历史版本:1
  • 1. 概述

    在制作看板时,许多用户希望能够制作一张模板,同时用于 PC 端和移动端预览。

    然而,PC 端与移动端的看板设计通常存在差异,用户需要花费额外的时间和精力来为移动端重新制作模板。

    本文详细讲解,如何在制作看板时时,通过一些制作规范和细节调整,确保一张模板,在PC端和移动端均可正常浏览,无需为移动端进行额外设计的复用场景。

    2. PC 端基础制作规范决定移动端大体框架

    移动端模板通常采用流式排列,从上至下进行浏览。PC 端模板转换为移动端后,组件(单个组件,非组合)会默认按一行一个的方式展示。

    转换关键:PC模板多成组,PC模板制作越规范,转换到移动端调整成本越低

    2.1 按块制作,整体区块进行分组

    在制作模板前,请先考虑模板框架,将看板内容划分成多个区域。在每个区域中添加内容后,固定成组。如下图所示:

    组合设置方式有以下几种:

    • Shift 多选组件+Ctrl+G

    • Shift 多选组件+模板右侧工具栏中「组合」功能

    • Shift 多选组件+右键组合

    Group 25.png

    2.2 相似内容分组大小保持一致

    以下图为例,各区域的指标卡应尽量保持一致的大小,以确保整体画面舒适协调。

    Group 26.png

    2.3 不同区块的保持水平/垂直方向的对齐关系

    1)可以多选指标卡,在右侧面板中调整大小及间距,以确保整体美观

    Group 25.png

    2)也可以借助辅助线精准对齐,鼠标在上方或左侧的标尺处移动,会出现虚线辅助线。

    4.png

    3. 移动端调整

    按上述制作规范制作完成后,直接转为移动端布局效果如下,框架基本成型,仅有部分内容需要二次调整。

    Group 27.png

    3.1 页头背景

    PC模板移动端处理

    简单背景页头

    4.png


    推荐方式:在移动端布局上拖拽调整组件位置、组件大小、组件字号样式

    3.png

    复杂背景页头

    5.png

    由于屏幕尺寸变化,复杂的背景图片会变化,移动端展示效果不好。

    可以针对移动端宽度,重新制作一张页头背景上传,并设置合理的填充方式。

    Group 29.png

    3.2 组件标题

    PC 模板
    移动端模板初次转换问题/场景调整方法及效果

    图片 + 标题组件组合


    标题被截断

    Group 31.png


    调整方式

    在移动端布局下调整标题组件的大小或者标题内容字号

    如何避免标题被截断

    在 PC 端制作模板时,将标题组件宽度适当拉长(预留部分拉伸空间)

    调整后效果

    Group 32.png

    3.3 指标卡

    PC 模板
    移动端模板初次转换问题/场景调整方法及效果
    6.png调整指标卡布局排列为以下形式:

    7.png

    手动拖拽调整,利用辅助线达到垂直/水平方向的对齐

    组件宽度设置:

    Group 33.png


    附件列表


    主题: 导入数据源
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!