先看看最终需要实现的效果：

  • 原型预览的时候，外侧有手机；
  • APP内容长度超过屏幕尺寸，可垂直滚动，但是底部菜单按钮固定，同时顶部时间、信号栏固定，仅中间内容部分滚动。

        如下图：

 一、实现预览带手机外框

  1. 鼠标左键点击编辑区域的任意空白处，目的是避免选中任何组件。如下图红圈内的这种区域，鼠标单击：

    2.点击页面右上方【Prototype】按钮，然后在“Device”下点击选择预览适配的设备。以上，就实现了在预览时加上设备。

二、实现溢出的垂直滚动

  1. 鼠标点选需要垂直滚动的页面；
  2. 点击右侧的【Prototype】按钮；
  3. 选择滚动的类型，Vertical scrolling表示垂直

    4. 将不需要滚动的元素固定

        第一步：点选需要固定的元素；

        第二步：点击右上方【Design】按钮

        第三步：勾选Fix position when scrolling，表示滚动时固定

        第四步：选择元素固定的位置，需要根据实际情况选择，例如底部导航栏选择“bottom”和"center"

        以上，全部步骤完成。

 

 

# figma # 交互 # ui
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

Expect脚本实战：多条件匹配与防卡死技巧

在自动化测试和系统初始化中，我们常常使用 Expect 脚本来完成一系列交互操作，比如自动输入密码、监听输出并作出响应。然而，实际项目中可能遇到多步骤输出匹配的场景：只有在 先匹配到某一行输出，再匹配到另一行输出 时，才需要做出响应。同时，如果 “testX failed” 出现了，但 “set params error” 没有在合理时间内出现，不要卡死，而是打印警告并继续。这个写法的问题在于：如

avatar 2048 AI社区

AI模型版本控制的标签管理：架构师的技巧

在AI模型生命周期中，版本控制是保障模型可追溯性、协作效率与生产可靠性的核心环节。而标签管理作为版本控制的"语义接口"，其设计质量直接决定了团队对模型版本的理解、检索与复用能力。本文从架构师视角出发，结合第一性原理与MLOps实践，系统阐述AI模型标签管理的理论框架、架构设计、实现机制与高级考量。通过拆解标签的"唯一标识+语义描述"本质，提出四维标签模型。

avatar 2048 AI社区

Expect脚本实战：多条件匹配与防卡死技巧

在自动化测试和系统初始化中，我们常常使用 Expect 脚本来完成一系列交互操作，比如自动输入密码、监听输出并作出响应。然而，实际项目中可能遇到多步骤输出匹配的场景：只有在 先匹配到某一行输出，再匹配到另一行输出 时，才需要做出响应。同时，如果 “testX failed” 出现了，但 “set params error” 没有在合理时间内出现，不要卡死，而是打印警告并继续。这个写法的问题在于：如

avatar 2048 AI社区