Skala Preview 简介

Skala Preview 是一款由 Bohemian Coding（也就是制作 Sketch 的那家公司）开发的实时设计预览和标注工具，它的核心价值在于：

skala preview教程
（图片来源网络，侵删）
  • 实时同步：在 Sketch (Figma, Adobe XD) 中修改设计，你的手机或平板上的预览会实时更新。
  • 精准标注：一键导出所有设计元素的尺寸、间距、颜色和字体信息，生成清晰的标注图，方便开发。
  • 交互演示：支持点击热点，制作简单的交互原型，在真机上模拟点击效果。

第一部分：安装与基础设置

安装

  • 桌面端 (Mac/PC):

    • 访问 Skala Preview 官网。
    • 下载并安装适用于你操作系统的版本,它支持 macOS 和 Windows。
    • 注意：桌面端是免费的，但功能有限（主要是接收预览和查看标注）。

  • 移动端 (iOS/Android):

    • 在 App Store 或 Google Play Store 搜索 "Skala Preview"。
    • 下载并安装到你的 iPhone, iPad 或 Android 手机/平板上。
    • 移动端需要订阅才能解锁全部功能（如实时预览、标注等），通常提供免费试用。

连接设备 (Wi-Fi)

这是最常用和最稳定的连接方式。

  1. 确保设备在同一网络：将你的电脑和手机/平板连接到同一个 Wi-Fi 网络下。
  2. 获取电脑 IP 地址：
    • Mac: 点击左上角苹果菜单 > “系统设置” > “网络”，选择你正在使用的 Wi-Fi，点击 “详细信息...”，找到 “IPv4 地址”。
    • Windows: 打开 “设置” > “网络和 Internet” > “属性”，找到 “IPv4 地址”。
  3. 在移动端输入 IP 地址：
    • 打开手机/平板上的 Skala Preview App。
    • 在主界面,点击右上角的 号。
    • 选择 "Add by IP"。
    • 在弹出的窗口中,输入你刚刚从电脑上查到的 IP 地址，然后点击 "Connect"。
  4. 在桌面端确认：
    • 打开电脑上的 Skala Preview。
    • 它会自动检测到连接请求,弹出一个窗口，显示你的设备名称。
    • 点击 "Accept" 接受连接。

连接成功后,你的设备屏幕上会显示一个二维码和一串代码。

skala preview教程
（图片来源网络，侵删）

连接设备 (USB)

USB 连接更稳定，延迟更低，且不依赖于 Wi-Fi。

  1. 安装驱动：
    • Android: 通常需要安装 ADB (Android Debug Bridge) 驱动，具体安装方法请搜索你手机品牌的 "USB debugging" 开启指南。
    • iOS: 相对简单，但需要信任电脑。
  2. 在桌面端设置：
    • 打开电脑上的 Skala Preview。
    • 进入 "Settings" (设置) > "Connection" (连接)。
    • 确保 "Enable USB connection" (启用 USB 连接) 选项是勾选状态。
  3. 用 USB 线连接设备：
    • 用数据线将你的手机/平板连接到电脑。
    • 对于 Android：在手机上开启 “USB 调试” 模式，并授权电脑。
    • 对于 iOS：在手机上弹出的信任对话框中，点击 “信任”。
  4. 自动连接：

    连接成功后,Skala Preview 应该会自动在你的设备上启动预览模式，无需手动输入 IP。

第二部分：核心功能详解

实时预览

这是 Skala Preview 的灵魂功能。

  • 如何工作：

    skala preview教程
    （图片来源网络，侵删）
    1. 在 Sketch (或 Figma, XD) 中打开你的设计文件。
    2. 在 Sketch 的菜单栏中，找到 Plugins > Skala Preview > Show，这会打开 Skala Preview 的桌面端窗口，并显示当前画板。
    3. 确保你的移动设备已通过 Wi-Fi 或 USB 连接到电脑。
    4. 在 Sketch 中任意修改一个元素（比如改个颜色、拉个框），你会看到手机屏幕上的画面在零点几秒内就更新了！

  • 实用技巧：

    • 切换画板：在桌面端 Skala Preview 的窗口下方，可以下拉选择不同的 Sketch 画板。
    • 缩放与拖动：在手机上，可以用双指手势来缩放和拖动预览画面，查看细节。
    • 全屏模式：在手机上，点击全屏按钮可以获得最佳的演示体验。

设计标注

标注是设计师与开发者沟通的桥梁,Skala Preview 让这件事变得极其简单。

  • 如何生成标注：

    1. 在 Sketch 中，确保你想要标注的图层是未被锁定的状态，并且命名清晰（btn_primary, txt_title）。
    2. 在 Sketch 菜单栏中，选择 Plugins > Skala Preview > Show。
    3. 在桌面端 Skala Preview 窗口中，找到工具栏，点击 "Annotate" (标注) 按钮。
    4. 稍等片刻,它会自动处理并生成标注图。
    5. 在桌面端窗口的右侧,你可以选择不同的标注样式（如包含/不包含间距、颜色、字体等）。
    6. 点击 "Export" (导出) 按钮，选择 "Export to PNG"，一张高清的标注图就保存到你的电脑上了。

  • 标注图包含什么：

    • 尺寸：每个元素的宽高。
    • 位置：元素相对于画板或父容器的 X、Y 坐标。
    • 间距：元素之间的间距。
    • 颜色：元素的填充色和描边色，并提供 HEX 和 RGB 值。
    • 字体：字体名称、字号、字重和行高。
    • 图层名：清晰显示每个元素的 Sketch 图层名。

交互原型

通过简单的点击热点,制作可交互的原型，非常适合向客户或产品经理演示。

  • 如何设置热点：

    1. 在 Sketch 中，使用 热区 工具（通常在工具栏的矩形工具下长按或按 R 键找到）。
    2. 在你希望用户点击的元素上绘制一个热区矩形。
    3. 选中这个热区矩形,在右侧检查器中，找到 "Interaction" (交互) 面板。
    4. 点击 号添加一个新的交互。
    5. 设置触发：选择 "Tap" (点击)。
    6. 设置动作：
      • Go to Screen: 跳转到另一个画板，这是最常用的功能。
      • **Open URL`: 在浏览器中打开一个链接。
      • **Back`: 返回到上一个画板。
    7. 为热区命名：给这个热区起一个清晰的名字，方便在预览时识别。
    8. 重复以上步骤,为所有需要交互的元素设置好热点。

  • 如何预览交互：

    1. 确保你的设备已连接并处于实时预览模式。
    2. 在手机上,你会看到预览画面上有一个 "Hotspots" (热点) 的开关按钮。
    3. 打开这个开关。
    4. 当你点击手机屏幕上的热区区域时,就会触发你设置的交互动作（跳转到登录页面）。

第三部分：高级技巧与最佳实践

使用本地 Wi-Fi (推荐)

如果你在公司或网络复杂的环境下,连接不上，可以尝试以下方法：

  1. 在电脑上打开 终端 (Terminal)。
  2. 输入命令 ifconfig | grep "inet " (Mac) 或 ipconfig (Windows) 查找你的电脑 IP。
  3. 确保手机连接的是同一个 Wi-Fi。
  4. 路由器的防火墙会阻止连接,尝试临时关闭电脑或手机的防火墙，看是否能连上，如果能，说明是防火墙规则问题，需要相应地调整设置。

Sketch 命名规范

为了获得清晰的标注,养成良好的命名习惯至关重要：

  • 组件命名：组件名_状态 ( btn_primary, btn_secondary_disable)
  • 图标命名：icon_名称 ( icon_search, icon_close)
  • 文本命名：txt_类型 ( txt_h1, txt_body)
  • 图片命名：img_内容 ( img_banner_hero)

结合其他插件

Skala Preview 可以和很多 Sketch 插件无缝配合，

  • Sketch Measure: 一个强大的标注插件，可以生成更详细的 HTML/CSS 代码，你可以用它生成代码，再用 Skala Preview 做实时预览。
  • Craft: 可以将 Sketch 设计同步到手机上进行实时预览和原型演示，功能和 Skala Preview 类似，你可以根据自己的喜好选择。

团队协作

如果你的团队都在使用 Skala Preview，可以共享 IP 地址或建立一个简单的连接指南，确保每个人都能快速地将自己的设计展示给同事或客户。

Skala Preview 是一款轻量、高效且强大的设计交付工具，它完美地弥补了设计稿和最终产品之间的沟通鸿沟。

回顾一下核心流程：

  1. 连接：用 Wi-Fi 或 USB 将电脑和手机连接起来。
  2. 预览：在 Sketch 中修改设计，手机上实时查看效果。
  3. 标注：一键导出高清标注图，交给开发。
  4. 演示：设置交互热点，在手机上向他人演示产品流程。

掌握 Skala Preview，能让你在设计流程中更加自信，与开发团队的协作也更加顺畅，希望这份教程对你有帮助！