【再挖宝藏】Adobe全家桶你未必知道的5个神仙技巧(第二弹),效率再升级!

兄弟姐妹们,C站的各位技术宅、设计狮、程序猿同好们,我又胡汉三般地回来啦!

之前那篇分享后,不少朋友表示意犹未尽,后台私信都快被塞满了(开玩笑,其实也没那么多,但热情我感受到了!)。算算日子,我那英国Parvis音乐学院的Adobe全家桶正版教育订阅也用了有小半年了。不吹不黑,体验感依旧是“舒服”二字。1500点的Firefly积分,用到现在还富余得很,随便挥霍。那个一键自助解决99%订阅问题的修复链接,简直是懒人福音,至今稳如老狗,没出过岔子。而且,两个组织账号激活四台设备,对于我这种偶尔需要多设备操作或者跟小伙伴协作的场景,简直不要太方便。最核心的是,正版订阅就是省心,告别了三天两头换号、担心试用期结束的提心吊胆,创作的时候心情都舒畅不少。还有那个在线查询订阅有效期的功能,对我们这种个人用户来说,简直是及时雨,再也不用稀里糊涂不知道企业订阅啥时候到期了。我知道你们又要问车票了,唉,还是那句话,车队规模已定(1800+人的大部队,不能再加了,安全第一),大家就别惦记啦。我嘚啵这么多,真不是凡尔赛(这次你信我一次嘛,好吧,我承认,有那么一丢丢)。

闲话少叙,老规矩,上硬菜!下面这波技巧分享,依旧可能涉及Adobe的付费功能,所以“等等党”和“白嫖用户”……你们先精神上支持一下哈!


正文:Adobe系列软件另5个冷门但超实用的技巧(第二弹)

上次分享的5个技巧大家反馈不错,这次我再从我的“军火库”里掏出5个不一样的“秘密武器”,希望能让大家在Adobe的宇宙里探索得更畅快,工作效率“噌噌噌”往上涨!

技巧一:Photoshop - “画板”(Artboards)工具:同一文档管理多设计稿,UI/社交媒体设计师福音

很多用Photoshop多年的老鸟,可能都习惯了一个PSD文件对应一个最终设计。但如果你经常需要设计一系列相关的视觉稿,比如一个App的不同界面、一个网站的多个页面布局、或者一套社交媒体的多种尺寸广告图,那么“画板”(Artboards)功能绝对能让你大呼相见恨晚。它可以让在一个.psd文件里创建和管理多个独立的画布。

步骤详解:

  1. 创建画板文档或转换现有文档:

    • 新建时创建: 点击 文件 (File) > 新建 (New)。在新建文档对话框中,除了设置宽度、高度、分辨率等,务必勾选右侧的 “画板 (Artboards)” 选项。你还可以直接在“预设详细信息”的“文档类型”中选择“画板”。并且可以直接选择一些预设的画板尺寸,如iPhone、iPad、Web等。
    • 将现有文档/图层转换为画板:
      • 如果你已经有一个打开的PSD文件,可以在“图层”面板中,选中一个或多个图层组,然后右键点击,选择 从图层建立画板... (Artboard from Layers...)从组建立画板... (Artboard from Group...)
      • 或者,直接使用“画板工具”。
  2. 认识“画板工具” (Artboard Tool):

    • 它通常与“移动工具” (Move Tool) 分享同一个工具栏位置。长按“移动工具”图标,就能看到“画板工具”,或者直接按快捷键 V,然后按住 Shift 再次按 V 可以在移动工具和画板工具之间切换。
    • 激活“画板工具”后,你的鼠标会变成一个可以拖拽创建画板的样式。
  3. 操作画板:

    • 添加新画板:
      • 使用“画板工具”,在画布的空白区域点击并拖动,可以绘制一个自定义尺寸的新画板。
      • 在激活“画板工具”的状态下,你会看到每个现有画板的边缘都会出现 + 号图标。点击这些 + 号,可以在该画板的对应方向(上、下、左、右)快速添加一个与当前画板尺寸相同的新画板。
      • 在顶部选项栏,当“画板工具”激活时,也可以选择预设尺寸来添加画板。
    • 命名画板: 在“图层”面板中,每个画板都会像一个特殊的图层组一样显示。双击画板的名称(例如“画板1”)即可重命名,这对于后期导出非常有帮助。
    • 调整画板尺寸和位置:
      • 选中画板(在图层面板点击画板名称,或用“画板工具”在画布上点击画板边缘或名称),其周围会出现控制手柄,可以像调整普通矩形一样拖动手柄来改变大小。
      • 在顶部选项栏,也可以精确输入画板的宽(W)和高(H)。
      • 用“画板工具”或“移动工具”(需在选项栏设置“自动选择:画板”)直接拖动画板来改变其在工作区的位置。
    • 复制画板: 选中一个画板,按住 Alt (Win) / Option (Mac) 键,然后用“画板工具”或“移动工具”拖动它,即可快速复制整个画板及其内容。
    • 对齐和分布画板: 当你有很多画板时,选中它们(在图层面板按住Ctrl/Cmd多选),顶部的对齐和分布选项(类似于对齐图层)就可以派上用场了。
  4. 在画板中组织内容:

    • 图层面板的组织方式会发生一些变化。所有不属于任何特定画板的图层会显示在画板列表的外面。
    • 当你将一个图层拖拽到某个画板的区域内时,该图层会自动归属于那个画板(在图层面板中会嵌套在画板“组”内)。
    • 跨画板移动或复制元素也非常方便,就像在不同组之间移动图层一样。
  5. 导出画板: 这才是画板真正发光发热的地方!

    • 文件 (File) > 导出 (Export) > 画板导出为文件... (Artboards to Files...):可以一次性将所有画板或选定的画板导出为单独的图片文件(如JPG, PNG, GIF, PDF, TIFF等)。你可以指定文件名前缀、导出格式、质量等。画板的名称通常会作为导出文件名的一部分。
    • 文件 (File) > 导出 (Export) > 快速导出为PNG (Quick Export as PNG)导出为... (Export As...) (快捷键 Alt+Shift+Ctrl+W / Option+Shift+Command+W):右键点击图层面板中的画板名称,也可以快速导出。

画板工具的牛X之处:

  • 集中管理: 一个项目的所有相关设计稿都在一个文件里,方便对比、修改和迭代。再也不用开一堆PSD文件了。
  • 版本控制/变体设计: 轻松复制画板来尝试不同的设计方案或颜色搭配。
  • 响应式设计初探: 可以创建不同设备尺寸的画板,直观预览设计在不同屏幕上的效果。
  • 批量导出: 一键导出所有需要的尺寸和格式,对于需要交付大量社交媒体图片、App截图或者UI元素的场景,效率提升不是一点半点。
  • 团队协作: 单一文件也更方便团队成员之间的交接和审阅。

对于经常需要和多界面、多尺寸打交道的程序员(比如自己也搞点前端设计、App皮肤、或者运营用的宣传图),Photoshop的画板功能绝对值得你深入研究。


技巧二:Illustrator - “混合工具”(Blend Tool)的N种创意玩法,不止是颜色渐变

Illustrator的“混合工具”(Blend Tool,快捷键 W)常常被初学者简单理解为创建颜色之间的平滑过渡。没错,这是它的基本功能之一,但它的潜力远不止于此。通过混合不同的形状、控制混合的步数或距离、甚至让混合沿指定的路径进行,你可以创造出非常惊艳的图形效果、抽象背景、以及复杂的图案。

步骤详解:

  1. 激活“混合工具”: 在左侧工具栏中找到它(通常是一个圆形渐变成方形的图标),或者直接按快捷键 W

  2. 基本混合 - 两个对象之间:

    • 创建至少两个不同的对象(可以是形状、路径、甚至文本对象)。它们可以有不同的颜色、大小、形状。
    • 激活“混合工具”。
    • 先在第一个对象上点击一下,然后在第二个对象上点击一下。Illustrator会自动在这两个对象之间创建一系列中间过渡形状。
  3. 修改混合选项 - 核心控制: 双击工具栏中的“混合工具”图标,或者选中已创建的混合对象后,转到 对象 (Object) > 混合 (Blend) > 混合选项... (Blend Options...)。这里是控制混合效果的关键:

    • 间距 (Spacing):
      • 平滑颜色 (Smooth Color): AI会自动计算足够的步数来创建看起来平滑的颜色过渡。这是默认选项,适合颜色渐变。
      • 指定的步数 (Specified Steps): 你可以精确控制在原始对象之间生成多少个中间形状。比如输入10,就会生成10个过渡形状。这个选项对于创建重复图案或有节奏感的视觉效果非常有用。
      • 指定的距离 (Specified Distance): 你可以定义每个混合步骤之间的距离(例如,每隔5毫米出现一个形状)。这对于沿着路径创建等距排列的元素很有用。
    • 方向 (Orientation):
      • 对齐页面 (Align to Page): 混合对象的方向相对于页面。
      • 对齐路径 (Align to Path): 当混合是沿着一条自定义路径进行时(见下文),这个选项让每个混合步骤都垂直于路径的方向。
  4. 高级混合技巧:

    • 替换混合轴 (Replace Spine): 默认情况下,两个对象之间的混合是沿着一条直线进行的。你可以让混合沿着你绘制的任何开放或闭合路径进行。

      1. 先创建好你的基本混合(例如,一个小圆形混合到一个大星形)。
      2. 另外绘制一条你希望混合效果依附的路径(比如一条曲线、螺旋线)。
      3. 同时选中你的混合对象和你绘制的路径。
      4. 转到 对象 (Object) > 混合 (Blend) > 替换混合轴 (Replace Spine)。你会看到混合形状现在会沿着你指定的路径排列。
    • 反向混合轴 (Reverse Spine): 如果混合的方向反了,可以用 对象 (Object) > 混合 (Blend) > 反向混合轴 (Reverse Spine)

    • 反向堆叠 (Reverse Front to Back): 改变混合对象原始形状的堆叠顺序对混合结果的影响。

    • 扩展混合 (Expand Blend): 如果你想把动态的混合效果转换成一系列独立的、可编辑的对象(比如你想单独修改某个中间步骤的形状或颜色),可以选择混合对象,然后去 对象 (Object) > 混合 (Blend) > 扩展 (Expand)。注意:这是一个破坏性操作,扩展后就不能再用混合选项去动态调整了。

    • 编辑原始形状: 即使创建了混合,你仍然可以使用“直接选择工具”(白箭头,快捷键A)去单独选中并修改原始的两个(或多个)对象的形状、颜色、大小、位置,混合效果会实时更新。这是混合工具非破坏性编辑的魅力之一。

  5. 混合多个对象: 混合工具不仅限于两个对象。你可以先混合A和B,然后这个混合结果可以再和C混合,以此类推,创造更复杂的层次。或者,先选中多个对象,然后执行 对象 (Object) > 混合 (Blend) > 建立 (Make) (快捷键 Alt+Ctrl+B / Option+Command+B)。

“混合工具”的创意应用场景:

  • 创建流畅的3D感线条/光效/丝带效果。
  • 生成复杂的几何图案和背景纹理。
  • 制作抽象艺术图形。
  • 模拟毛发、草丛等有机形态的生长。
  • 沿着路径排列和变形一系列图形,如制作花边、链条等。
  • 进行富有创意的文字特效设计。

对于喜欢在代码之外,尝试用视觉元素表达创意的程序员来说,Illustrator的混合工具就像一个充满可能性的算法,输入不同的参数(形状、颜色、路径、步数),就能输出千变万化的结果。


技巧三:Premiere Pro - “代理”(Proxy)工作流程:流畅剪辑高分辨率素材的救星

随着4K、6K甚至8K视频素材的普及,很多朋友(包括我这种偶尔玩票的)都会发现,自己的电脑在剪辑这些高分辨率、高码率的“庞然大物”时,预览卡顿、操作延迟,简直是“PPT”级别的体验。Premiere Pro的“代理”(Proxy)工作流程,就是专门为了解决这个问题而生的。它的核心思想是:在剪辑时使用低分辨率的“替身”文件,输出时再自动链接回原始的高质量文件。

步骤详解:

  1. 理解代理文件: 代理文件是原始素材的低分辨率、低码率版本(例如,将4K H.265转成1080p ProRes Proxy或CineForm)。它们体积小,对电脑性能要求低,剪辑起来会非常流畅。

  2. 创建代理的两种主要方式:

    • 在导入时创建代理 (Ingest Settings):

      1. 打开“媒体浏览器”(Media Browser) 面板 ( 窗口 > 媒体浏览器 )。
      2. 在“媒体浏览器”面板的右上角,找到并勾选“收录”(Ingest) 复选框。
      3. 点击旁边的扳手图标(收录设置),打开“收录设置”对话框。
      4. 在下拉菜单中选择 创建代理 (Create Proxies)
      5. 预设 (Preset): 选择一个合适的代理预设。Premiere Pro内置了一些常用的,比如 1280x720 ProRes Proxy1024x540 CineForm。你也可以通过Adobe Media Encoder创建自定义预设。原则是分辨率够用,编码对剪辑友好(如ProRes, CineForm, DNxHD/HR,避免H.264/H.265做代理)。
      6. 代理目标 (Proxy Destination): 选择代理文件存储的位置。建议选择“代理文件夹旁边的媒体文件”(Next to original media, in Proxy folder),这样代理文件会和原始素材放在一起,方便管理。或者你可以指定一个专门的快速硬盘作为代理盘。
      7. 点击“确定”。
      8. 现在,当你通过“媒体浏览器”将素材导入到项目时,Adobe Media Encoder会自动在后台启动,并根据你的设置开始转码生成代理文件。你可以在项目面板看到原始素材旁边可能会有一个特殊的图标指示代理状态。
    • 为项目中已有的素材创建代理:

      1. 在“项目”面板中,选中一个或多个你想要为其创建代理的素材剪辑。
      2. 右键点击选中的素材,选择 代理 (Proxy) > 创建代理 (Create Proxies...)
      3. 会弹出“创建代理”对话框。
      4. 格式 (Format): 选择一个对剪辑友好的格式,如 QuickTime
      5. 预设 (Preset): 选择一个合适的代理预设(同上)。
      6. 目标 (Destination): 选择代理文件的存储位置。
      7. 点击“确定”。Adobe Media Encoder会自动打开并开始转码。
  3. 启用/切换代理预览:

    • 在“节目监视器”(Program Monitor) 或 “源监视器”(Source Monitor) 面板的右下角,找到播放控制按钮栏。
    • 点击 + 号(按钮编辑器 Button Editor)。
    • 在弹出的按钮列表中,找到并拖拽 “切换代理”(Toggle Proxies) 图标(通常是一个带有两个小方框和箭头的图标)到你的播放控制栏上。点击“确定”。
    • 现在,你的监视器下方就有了一个“切换代理”按钮。
      • 蓝色高亮: 表示当前正在使用代理文件进行预览和剪辑。你会发现播放和操作非常流畅。
      • 灰色(未高亮): 表示当前正在使用原始高分辨率文件进行预览。
    • 你可以随时点击这个按钮来回切换,以检查细节或在性能不足时切换到代理。
  4. 剪辑和输出:

    • 在启用代理模式下进行你的所有剪辑操作:打点、切割、添加效果、调色等等。
    • 当你完成剪辑,准备输出成片时,无需手动切换回原始文件。Premiere Pro在导出时会自动链接回原始的高分辨率素材进行渲染和输出,确保最终成片是最高质量的。当然,如果你想确认效果,可以在导出前关闭代理开关,用原始素材预览一下关键部分。

代理工作流的巨大优势:

  • 极致流畅的剪辑体验: 即使你的电脑配置一般,也能流畅剪辑4K甚至更高分辨率的视频。
  • 节省存储空间(在协作时): 如果是团队协作,可以将轻便的代理文件发给剪辑师,剪辑完成后再由拥有原始素材的后期人员进行套底输出。
  • 提高工作效率: 告别卡顿等待,将更多精力投入到创作本身。
  • 对最终输出质量无损: 因为输出时用的是原始文件。

对于需要处理高规格视频素材,又不想被硬件性能拖后腿的程序员(例如,录制高清屏幕教程、制作产品演示片、或者用无人机拍了些4K风景想剪辑一下),代理工作流绝对是必备技能。


技巧四:After Effects - “空对象”(Null Objects)的妙用:化繁为简的动画控制器

在After Effects中制作复杂动画时,我们常常需要同时控制多个图层的某些属性(如位置、旋转、缩放),或者需要一个虚拟的“父级”来驱动一组元素的整体运动,同时这些元素自身还有独立的动画。这时,“空对象”(Null Object)就能派上大用场。它是一个在最终渲染时不可见,但在合成中可以作为其他图层父级或控制器的“隐形帮手”。

步骤详解:

  1. 创建空对象: 在AE中,可以通过以下方式创建空对象:

    • 顶部菜单栏:图层 (Layer) > 新建 (New) > 空对象 (Null Object)
    • 快捷键:Ctrl+Alt+Shift+Y (Windows) / Command+Option+Shift+Y (Mac)。
    • 在时间轴面板的空白处右键,选择 新建 (New) > 空对象 (Null Object)。 创建后,你会在合成窗口看到一个带有红色边框的小方块(锚点默认在中心),在时间轴面板会多出一个名为“Null X”(X是数字)的图层。
  2. 父子链接 (Parenting): 这是空对象最核心的用法。

    • 方法一:使用“父级与链接”列的螺旋拾取器 (Pick Whip)。
      1. 在时间轴面板,确保“父级与链接”(Parent & Link) 列是可见的(如果不可见,在列标题栏右键,从“列”中勾选它)。
      2. 对于你想要被空对象控制的子图层,找到其“父级与链接”列下的螺旋图标(像个小蚊香)。
      3. 按住鼠标左键拖动这个螺旋图标,直接拖到你创建的那个“空对象”图层上,然后松开。
      4. 此时,子图层的“父级与链接”下拉菜单会自动显示为你空对象的名称。
    • 方法二:使用下拉菜单。 直接在子图层的“父级与链接”列的下拉菜单中,选择你的空对象图层作为父级。
  3. 通过空对象控制子图层: 一旦建立了父子关系:

    • 当你对父级(空对象)的变换属性(位置、缩放、旋转、透明度)进行动画或修改时,所有链接到它的子图层都会相对于空对象进行同样的变换,就好像它们被“粘”在了空对象上一样。
    • 同时,子图层自身仍然可以拥有独立的动画。例如,你可以让一个空对象带着一组文字图层整体平移入场,而每个文字图层自身还可以有独立的旋转或淡入效果。
  4. 空对象的常见应用场景:

    • 整体控制一组动画: 比如制作一个复杂的logo动画,logo由多个小部件组成。可以将所有小部件都链接到一个空对象上,然后只对这个空对象制作整体的入场、强调、退场动画,会比分别K每个部件省事得多。
    • 创建虚拟摄像机控制器: 虽然AE有摄像机图层,但有时你可以用一个2D空对象来模拟摄像机的推拉摇移,控制一组2D图层的“景深”感或视差滚动效果。例如,所有前景层链接到一个空对象A,背景层链接到空对象B,让A比B移动得更快,就能产生视差。
    • 作为复杂表达式的控制器: 可以给空对象添加“表达式控制”效果(效果 > 表达式控制,例如“滑块控制”、“角度控制”、“颜色控制”等),然后让其他图层的属性通过表达式链接到这些控制器上。这样,你只需要调整空对象上的滑块,就能驱动一大片复杂的动画效果,非常适合制作模板(MOGRT)。
    • 辅助绑定和角色动画: 在简单的2D角色动画中,空对象可以作为关节的控制点,比如用一个空对象控制手掌的旋转,而手臂的其他部分则相应地跟随。
    • 定位效果的中心点: 某些效果(如径向模糊、镜头光晕)的中心点默认是图层中心。如果你想让效果中心在别处或动态变化,可以将效果应用到一个固定的图层上,然后用空对象通过表达式控制效果的中心点坐标。
  5. 空对象的命名和颜色标签: 当合成中有很多空对象时,给它们起有意义的名称(例如“主控制器_位置”、“左手_IK控制器”)并设置不同的颜色标签(在图层名称前的小方块上点击),能帮助你保持合成的整洁和可维护性。

为什么空对象对AE动画如此重要?

  • 简化复杂性: 将多个图层的共同运动抽象到一个控制器上,减少了需要K帧的图层数量。
  • 提高可维护性: 想修改一组元素的整体动画?只需要调整那个父级空对象即可,无需逐个修改子图层。
  • 增强灵活性: 允许子图层在继承父级动画的同时,还拥有自己独特的动画。
  • 是高级动画和绑定的基础: 很多复杂的表达式应用、角色绑定技术都离不开空对象作为中介和控制器。

对于想在AE中挑战更复杂动画的程序员朋友们,理解并熟练运用空对象,就如同在编程中掌握了类和对象的概念一样,能让你的“动画代码”结构更清晰,功能更强大。


技巧五:Adobe XD - “组件”(Components)与“状态”(States):高效UI设计与交互原型利器

Adobe XD作为一款专注于UI/UX设计和原型制作的工具,其“组件”(Components,早期版本中可能称为Symbols)和“组件状态”(Component States)功能是提升设计效率和创建逼真交互原型的核心。对于偶尔需要客串产品经理或UI设计师,或者想快速验证自己App/Web想法的程序员来说,这套组合拳能帮你节省大量重复劳动。

步骤详解:

  1. 创建组件 (Making a Component):

    • 在XD中设计一个你希望复用的UI元素,例如一个按钮、一个图标、一个卡片、一个导航栏项目等。这个元素可以由多个形状、文本、图片等对象组合而成。
    • 选中你设计好的这个组合对象(或单个对象)。
    • 通过以下任一方式将其转换成组件:
      • 右键点击选中的对象,选择 制作组件 (Make Component)
      • 使用快捷键 Ctrl+K (Windows) / Command+K (Mac)。
      • 点击属性检查器右上角的 + 号按钮(在“组件”部分)。
    • 创建成功后,该对象在图层面板中会有一个菱形的组件图标,并且在“资源”面板(Assets Panel, Ctrl+Shift+Y / Command+Shift+Y)的“组件”部分会出现这个“主组件”(Main Component)。主组件通常会有一个绿色的边框或标记。
  2. 使用组件实例 (Using Instances):

    • 一旦创建了主组件,你就可以在设计稿的任何地方创建它的“实例”(Instances)。
    • 从“资源”面板中将组件拖拽到画板上。
    • 或者,复制粘贴主组件或任何一个已有的实例。
    • 所有实例都链接到主组件。
  3. 组件的核心优势:一处修改,处处生效

    • 如果你修改了“主组件”的设计(例如,改变了按钮的背景色、圆角大小、文字字体),所有链接到它的实例都会自动同步这些更改。这对于保持设计稿中重复元素的一致性至关重要,尤其是在项目后期需要统一调整视觉风格时。
  4. 覆盖实例属性 (Overriding Instance Properties): 虽然实例会继承主组件的样式,但XD允许你对单个实例的某些属性进行“覆盖”,使其与主组件有所不同,同时又不破坏链接关系。

    • 文本覆盖: 你可以修改实例中按钮的文字内容,而主组件的文字保持不变。
    • 位图覆盖: 如果组件中包含图片,你可以为不同的实例替换不同的图片。
    • 样式覆盖(部分): 对于形状的填充颜色、描边等,有时也可以在实例级别进行调整,但这取决于组件的复杂性和你想要达成的效果。通常,结构性的修改还是要去主组件。
    • 如果一个实例被覆盖得“面目全非”,你仍然可以右键点击它,选择“重置为主组件状态 (Reset to Main State)”来恢复。
  5. 组件状态 (Component States) - 让组件“活”起来: 这是XD组件功能的精髓所在,让静态组件能够响应交互。

    • 选中一个主组件(或者一个实例,但通常在主组件上定义状态更合理)。
    • 在属性检查器的“组件”部分,你会看到“默认状态 (Default State)”。
    • 点击旁边的 + 号,选择 新建状态 (New State)悬停状态 (Hover State)切换状态 (Toggle State) 等。
      • 新建状态: 创建一个自定义名称的状态,例如“按下状态 (Pressed State)”,“禁用状态 (Disabled State)”,“选中状态 (Selected State)”。
      • 悬停状态: 专门用于鼠标悬停时的视觉变化。
      • 切换状态: 用于创建可以来回切换的两种状态,如开关按钮。
    • 为每个状态设计不同的外观。例如,“默认状态”的按钮是蓝色背景,“悬停状态”时背景变深蓝色,“按下状态”时再加个内阴影。你可以在不同状态下修改组件内元素的颜色、大小、位置、透明度、文字内容等。
    • 切换状态进行编辑: 在属性检查器的组件部分,你可以通过下拉菜单或点击状态名称来切换到不同的状态进行设计。
  6. 为状态添加交互 (Adding Interactions in Prototype Mode):

    • 切换到XD的“原型”(Prototype)模式。
    • 选中一个包含多种状态的组件实例。
    • 你会看到组件上可能会出现一个蓝色的交互连线手柄(通常在“默认状态”下)。
    • 拖动这个手柄到它自身(或其他目标),或者直接在右侧的“交互”(Interaction) 面板点击 + 号。
    • 触发方式 (Trigger): 选择触发状态改变的动作,如 轻触 (Tap)悬停 (Hover)按键/手柄 (Keys & Gamepad)语音 (Voice) 等。
    • 操作 (Action): 选择 过渡 (Transition)(如果想转到其他画板或状态并带有动画)、自动动画 (Auto-Animate)(在同一画板内不同状态间平滑过渡)、组件状态 (Component State)(直接切换到指定状态)等。
      • 当触发方式是“悬停”时,通常会自动关联到组件的“悬停状态”(如果已定义)。
      • 当触发方式是“轻触”时,你可以设置操作类型为“组件状态”,然后在“目标状态”中选择点击后要切换到的状态,例如从“默认状态”切换到“按下状态”,再从“按下状态”自动延时切换回“默认状态”或“选中状态”。
    • 动画 (Animation): 如果选择了“自动动画”或“过渡”,可以设置动画类型(如溶解、推移、缩放)和缓动效果。XD的“自动动画”能智能地在不同状态的同名图层之间创建平滑过渡。

组件和状态的强大之处:

  • 设计一致性与效率: 主组件确保了UI元素在整个项目中的统一性,修改一处,全体更新。
  • 可维护性: 项目大了以后,维护和迭代设计变得非常轻松。
  • 创建逼真的交互原型: 通过状态和交互,无需写一行代码就能模拟出按钮点击、悬停、开关切换、下拉菜单展开等丰富的用户交互效果。
  • 减少画板数量: 以前需要用多个画板来展示一个按钮的不同状态(默认、悬停、按下),现在一个组件通过不同状态就能搞定,让原型逻辑更清晰。
  • 设计系统(Design System)的基石: 组件是构建强大设计系统(包含颜色、排版、图标、可复用UI控件库)的基础单元。

对于需要快速搭建产品原型、验证交互逻辑,或者只是想把自己脑海中的App界面具象化出来和团队讨论的程序员来说,掌握Adobe XD的组件和状态功能,能让你以设计师的思维和效率来表达自己的想法。


好了,第二弹的5个Adobe“私房”技巧也倾囊相授了!希望这些能像咖啡因一样,给各位在工作学习中带来一点点提神醒脑的效果。独乐乐不如众乐乐,如果你觉得有用,或者你有更“骚”的操作,评论区就是你的舞台,大胆秀出来!一起探索,一起进步!(老规矩,你懂我意思的眼神 ?.?.?)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值