如何在figma中做交互设计

2023-11-19

近一年来,Figma它可以说是体验设计领域最受欢迎的工具。最近,我开始频繁地工作。Axure9.0和Figma切换使用,深刻感受到设计细节带来的体验差异化。今天,通过一些细节和亮点,总结了工具软件体验设计的几个原则。

添加图片注释,不超过 140 字(可选)

工具软件的首要任务是追求效率,降低用户的运营成本。

1.模板化设置

1)组件化设计

Figma组件功能强大,类似于Axure母板,但更灵活。既有父子继承关系,修改父子组件后,子组件可同时修改。但子组件具有一定的独立性,内容可以编辑,以确保灵活性和可用性。Axure母版是强制性的,一旦修改了父组件的内容,子组件就必须修改。

2)样式模板化

在Figma在中间,用户可以创建自己的颜色、边缘和阴影风格库,随时调用设计,一劳永逸,降低频繁调整风格的操作成本。

2.选择代替输入

预设选项能有效提高用户效率。例如,在设置字号时,Axure没有预设选项,用户需要手动输入修改。Figma常用字号预置在中间,用户可以下拉选择。

另外Axure默认字体为13号,默认字体为13号Figma它是14号字体,更适合设计师的主流使用,减少了用户的修改次数。

3.批量修改

批量修改是提高效率最常用的设计手段。Figma和Axure都有padding设置功能Figma一键操作,用户输入一次即可修改四个边距,调整效率更高。Axure要设置四面等距,就要逐一修改,操作比较繁琐。

在工具软件中,对象的属性栏应为用户的高频操作区。

总体布局,Figma和Axure基本相同,包括三个模块。可设置对象的各种属性、交互效果设计等。基本属性模块是用户操作的首要任务。

不过Figma属性栏通过信息分级显示、内容简化、布局有序等设计方法,给用户带来更好的体验。

1.分级显示,隐藏不必要的内容

创建元素时,Figma默认情况下,属性栏只显示位置大小信息、层透明度、填充颜色等基本信息。边缘描述、投影、导出等设置项只显示标题,所有内容都隐藏而不显示,以确保操作信息的所见即所得。当用户添加设置项时,系统会给出默认设置,用户只需根据需要修改内容。

另外Figma它还采用了交互操作来减少页面的信息量。例如,可以下拉的选项默认不显示下拉按钮,而是在鼠标悬停时显示,使原始复杂信息的页面更加清新。

而Axure然后平面显示内容信息,无论用户是否需要操作,都会显示设置项的内容。这种布局设计确实可以减少用户的点击操作,但低频操作的设置项增加了页面信息量,成为页面的信息噪声。

2.适应用户习惯,减少页面信息量

为了提高自己的行为效率,用户不会命名所有页面元素,事实上,用户的命名频率并不高。Figma在元素属性设置中,没有修改元素名称的选项,而是在图层列表中修改。Axure在元素属性中,命名作为主要内容放置在顶部。

3.统一的对齐模式,使信息更加有序

两者在信息布局和对齐上也有差异。Figma采用上下布局的方式,上面是功能标题,下面是设置内容。信息水平更明显,也更符合用户的浏览习惯。它也有很好的一致性。

而Axure主要是左右布局,左边是标题信息,右边是内容项。我个人理解,这种布局是为了压缩高度方向的尺寸,尽可能确保设置项目完全显示,避免滚动条,增加用户的运营成本。但这种布局导致了内容显示的混乱。

此外,不同长度的底边输入框也增加了内容的复杂性和混乱感,导致页面信息的混乱。

在设计工具中,可视化设计更多地用于位置相关功能,帮助用户更好地理解信息,从而降低用户的思维成本。因此,可视化形式被添加到设置选项中。

比如上面提到的Padding设置,Fimga采用可视化形式,用户可以直接填写对号,用户的思维成本较低,甚至可以说是零成本。Axure圆角设置、边线可见性设置也采用可视化形式。而且可视化还具有操作功能,方便用户操作。

当然Figma设计细节不止这些,更多figma的内容可以参考:https://js.design/special/figma/,但很多设计都不是Figma新的创新,而是在Axure和Sketch在此基础上进行了优化。因此,有价值的设计不一定是为了翻天覆地,也可以站在巨人的肩膀上,制定出符合自己产品定位和特点的设计方案。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在figma中做交互设计 的相关文章

  • 免费的插画素材网站有哪些?

    面对紧急设计项目 设计师会选择使用外力来完成项目 免费插图网站可以帮助我们在这个时候解决问题 但大多数插图网站都是收费的 需要版权或特别丑陋的 基本上很少有免费的没有版权的好插图 但今天我想推荐一个免费的插图网站 即时设计资源社区 即时设计
  • 4-产品需求文档PRD

    一 掌握PRD主要内容 1 PRD常见形式 1 RP格式 借助原型绘制工具 如Axure 绘制原型 并在原型上直接撰写对应页面 内容的说明 产品简介 产品简介 版本说明 交互自查表 产品预览 功能清单 用excel做的 转图片存放 或者直接
  • 基于接口设计原则-java

    7种设计坏味道 1 僵化性 很难对系统进行改动 因为每个改动都会迫使许多对系统其他部分的其它改动 2 脆弱性 对系统的改动会导致系统中和改动的地方在概念上无关的许多地方出现问题 3 牢固性 很难解开系统的纠结 使之成为一些可在其他系统中重用
  • Figma实用小技巧

    1 介绍 原作 草帽 视频地址 文字版整理 岩鸣杨子 2 快速拖拽调整数值 按住option可在数值上拖拽调整 不按option时只能在X Y W H 旋转 圆角等的图标上拖拽调整 不能调整透明度的数值 3 属性粘贴复制 shift X 互
  • 做交互设计都有哪些需要掌握的思维方式

    由于目前的环境对这个细分领域仍然缺乏了解 我希望在这篇文章中写一些交互设计所需的思维方式 1 可用性优先 视觉靠边 一个功能个功能应该能够使用和使用 以便有人关心它是否好看 审美挑剔的用户实际上比你想象的要少得多 当然 这并不是说视觉设计并
  • Axure中引用javascript代码

    Axure支持原生javascript语法调用 Axure中默认的javascript位置存放在Axure安装目录axureRP DefaultSettings Prototype Files resources scripts文件夹下 如
  • 抓取第三方网站数据

    最近需要把某网站的统计数据聚合到我们自己的系统里 但是该网站没有提供标准API 所以就尝试自己抓取了一下 本文总结一下一般的方法 分析服务地址 通常网站有2种做法 一种是后端渲染 直接把渲染后的完整界面呈现在浏览器 另一种前端是静态页面 通
  • Axure Repeater系列---排序

    最新学习整理Repeater 网上也能找到一些实现排序的帖子 但是对于不熟悉中继器的同学来说 直接上手还是有点难度的 我也遇到一些坑 特整理记录下来 共同学习 学习之前最好了解下中继器的各个属性以及函数的含义 工具 Axure8 0 学习目
  • Axure RP--以一个导航为案例介绍如何做鼠标移入时事件

    鼠标移入时展开面板 在网页常见于鼠标移入在一级导航时展开二级导航 即手风琴式菜单 或见于电商网站的商品目录 鼠标悬停在一级分类时展开二级或更多分类 下面以一个导航为案例介绍如何做鼠标移入时事件 步骤1 从部件库拖拽一个矩形到线框图编辑区中
  • png透明通道分离

    关于photoshop中png打开问题 前面也说到过http blog csdn net shenmifangke article details 52638716 ps在打开png格式图片的时候 实际上是把透明通道应用到了所有通道上 这样
  • 为什么375×667是移动端原型设计的最佳分辨率:flutter 设计稿尺寸最好也是375×667...

    部分PM在设计移动端产品的时候 往往是随意画了个原型尺寸或者上网找个模板套进去 当然也有部分知道用375 667比较好 但是不知其所以然 接下来 我来讲清楚为什么以及前世今生 原型尺寸的历史 既然是设计移动端原型 理论上来说最佳的原型尺寸最
  • sketch基础教程大全,对象、图层、画板常见技巧

    sketch对象 图层 画板的使用技巧 1 通过快捷键调整图形的形状 选择图形 按住Command按键 然后通过上 下 左 右方向键按1像素调整图形形状 同时按住按钮 CommandShift方向键 可调整方向键 2 复制元素 选择一个元素
  • Axure RP9.0 for Mac安装包+安装教程

    Axure 是一款强大的原型设计和开发人员交接软件 经过重新设计和架构 具有新的硬件加速渲染引擎 旨在更快地保存和加载的文件结构以及用于平滑缩放和更快编辑的简化画布 软件 Axure RP 版本 9 0 语言 简体中文 大小 71 98M
  • Wire load model

    做综合时 经常提到wire loadmodel 一直不甚了解 只知道是针对0 18um以上的工艺的一种粗略估计线延迟的模型方法 最近有时间看primepower的文档 终于有一些理解了 Wireload模型 实际上就是综合库中 若干个fan
  • 学习笔记(01):MySQL数据库从入门到搞定实战-DDL之数据库

    立即学习 https edu csdn net course play 27328 362512 utm source blogtoedu SQL 结构化查询语言 用于访问和操作数据库 主要包括数据定义 数据操纵 数据查询和数据控制 DDL
  • 闲谈开闭原则——基于UI动画框架

    本文继续聊另外一个设计原则 开闭原则 在UI动画框架中 开闭原则在 动画策略 和 移动算法 这两个类体系中均有所体现 照旧 先看一下开闭原则的定义 1 开闭原则 一个软件实体如类 模块和函数应该对扩展开放 对修改关闭 有人说过 唯一不变的就
  • 7个学习UI、UX设计一定要经历的步骤

    我们不是一些有才华的设计师 我们天生就有艺术天赋 后天我们学会了设计技巧 设计的根本目的是解决问题 设计是不断发现和解决问题 有许多设计领域 UI UX 产品设计师 平面设计师 交互设计师 信息架构师等 所以要找出你最感兴趣的设计专业 现在
  • Axure RP PC电商平台Web端交互原型模板

    Axure RP PC电商平台Web端交互原型模板 原型图内容齐全 包含了用户中心 会员中心 优惠券 积分 互动社区 运营推广 内容推荐 商品展示 订单流程 订单管理 售后及服务等完整的电商体系功能架构和业务流程 在设计尺寸方面 本套模板按
  • Axure RP 8 for Mac/win中文版:打造完美交互式原型设计体验

    Axure RP 8 一款引领潮流的交互式原型设计工具 为设计师提供了无限的可能性 让他们能够创造出逼真的原型 从而更好地展示和测试他们的设计 Axure RP 8拥有丰富的功能和工具 让设计师可以轻松地创建出复杂的交互式原型 从简单的按钮
  • Axure RP 8 for Mac/win中文版:打造完美交互式原型设计体验

    Axure RP 8 一款引领潮流的交互式原型设计工具 为设计师提供了无限的可能性 让他们能够创造出逼真的原型 从而更好地展示和测试他们的设计 Axure RP 8拥有丰富的功能和工具 让设计师可以轻松地创建出复杂的交互式原型 从简单的按钮

随机推荐

  • 父进程等待子进程终止 wait, WIFEXITED, WEXITSTATUS

    wait 的函数原型是 include
  • jqGrid 编辑完数据后能返回到当前位置的方法

    jqGrid 是一个js的jquery组件 虽然不轻便 但功能还是蛮强大的 也比较方便使用 在数据加载后 经常需要对其中的记录进行编辑 修改完后再返回时需要看到修改后的数据 一般采取重新加载的方法reloadGrid 但问题是列表中的数据因
  • STM8自学入门方向

    我还是我 今年计划自学学习STM8和汇编基础 STM8花了半个月 学的一点皮毛 对芯片有一定的了解了 学完后 发现可以拿到的资源远远没有32多 学习了内部大部分常用资源的应用 IO操作 定时器 IO中断 RS232 IIC 后面会发布我的总
  • 大数据时代下的个人知识管理

    前言 说到个人知识管理 在之前通过网络查询了一些资料 定义看起来让人蠢蠢欲动 作用是能快速找到自己收藏的文档 每个人或多或少都必须的有一些文件管理的习惯 管理就是一种习惯 利用专业的软件可以更容易的养成个人知识管理的习惯 当不小心清空了自己
  • c++双向列表释放_Python 列表List常见操作和错误总结

    一 列表的输入 即从控制台读取输入 然后创建列表 1 一维列表创建常见的方法有 当然 可以进一步简化成下面这样 其中第二句 在列表里用到了列表解析式 这是非常Pythonic的写法 酷炫 2 二维列表的输入和创建 二维列表复杂一些 可以以矩
  • Quartz-Spring[一]之MethodInvokingJobDetailFactoryBean配置任务

    Spring中使用Quartz的3种方法 MethodInvokingJobDetailFactoryBean implements Job extends QuartzJobBean 动态启动 暂定 添加 删除定时功能 可传参数 Quar
  • React之state、hooks性能分析

    目录 一 state 1 为什么使用setState 2 setState异步更新 3 如何获取异步的结果 4 setState一定是异步吗 5 源码分析 6 数据的合并 7 多个state的合并 二 为什么需要Hook 三 Class组件
  • stm32之iap实现应用(基于串口,上位机,详细源码)

    开发环境 Window 7 开发工具 Keil uVision4 硬件 stm32f103c8t6 篇幅略长 前面文字很多 主要是希望能让小白们理解 后面就是实现步骤 包括实现的代码 在研发调试的时候我们一般用烧录器下载代码 对于stm32
  • 4.0创建型模式 描述

    创建型模式的主要关注点是 怎样创建对象 它的主要特点是 将对象的创建与使用分离 这样可以降低系统的耦合度 使用者不需要关注对象的创建细节 对象的创建由相关的工厂来完成 就像我们去商场购买商品时 不需要知道商品是怎么生产出来一样 因为它们由专
  • mysql按照某个字段值内容排序

    举个栗子 假如一个商品下 有多个货品 各个货品的状态值都不一样 那么当只想展示商品中的某一个货品时 希望用户端看到的优先级是在售的货品中的一个 根据mysql提供的方法 field column value1 value2 value3 可
  • RTThread学习有关的Keil的两个符号 $Sub$ $main 与 $Super$ $main

    Keil的两个符号 Sub 与 Super 是其做的打 补丁 功能 具体调用方法就是程序中包含有main函数 和 Sub main Super main 两个符号 源码先放出来 re define main function int Sub
  • 三校生计算机教育,三校生有什么专业

    三校生的专业有计算机信息类 旅游类 艺术类 电工技术类 农林类 机械类 建筑工程类 经济管理类 外语类 烹饪 生物化学类 国土资源类 体育类 教育类 交通运输类 自动化类 包装印刷类 医学类 护理学 药学类 铁道运输类 师范类 水利水电类
  • CTreeView

    ClassWizard为CTreeCtrl 树控件 添加的NM DBLCLK 双击 消息的响应函数中带有一个NMHDR 型指针形参 1 OnDblClkTree NMHDR pNMHDR LRESULT pResult 这个陌生的指针类型常
  • IDEA中使用Java连接MySQL数据库的配置和使用方法

    文章目录 IDE和必要配置 数据库连接代码 IDE和必要配置 IDE IntelliJ IDEA 2023 1 必要配置 1 安装好JDK 并且配置环境变量 2 导入MYSQL数据库所需的驱动 如果没有导入 可以参考这篇文章IDEA中的My
  • android Scroller

    参考 http www linuxidc com Linux 2016 01 127276 htm 以前只知道怎么使用scroller 照猫画虎 复制粘贴 今天遇到使用scroller 还是要去搜索 这样不行 要搞懂原理 上面的博客写的很漂
  • 静态链表

    include
  • Linux下防御ddos攻击

    1 Linux下防御ddos攻击 导读 Linux服务器在运营过程中可能会受到黑客攻击 常见的攻击方式有SYN DDOS等 通过更换IP 查找被攻击的站点可能避开攻击 但是中断服务的时间比较长 比较彻底的解决方法是添置硬件防火墙 不过 硬件
  • spring-boot的快速开发

    1 使用Intellij中的Spring Initializr来快速构建Spring Boot Cloud工程 菜单栏中选中Files gt New gt Projects 这个Initializr Service URL 我们一般使用默认
  • 短视频文案如何写,学会以下几种方法,离爆款绝对不远。

    短视频运营 视频肯定是关键 文案是对视频的一种衬托 但是也并不代表文案不重要 在短视频中的段子文案也是精心设计的 所以今天要分享的是视频介绍里的文案 是怎么炼成的 下面就跟大家讲讲如何写出比较好的视频文案 仅仅是形式 具体还是要看自己进行灵
  • 如何在figma中做交互设计

    近一年来 Figma它可以说是体验设计领域最受欢迎的工具 最近 我开始频繁地工作 Axure9 0和Figma切换使用 深刻感受到设计细节带来的体验差异化 今天 通过一些细节和亮点 总结了工具软件体验设计的几个原则 添加图片注释 不超过 1