阅读更多

0顶
0踩

Web前端

转载新闻 一套交互设计工具推荐

2016-01-27 15:53 by 副主编 mengyidan1988 评论(0) 有8542人浏览



刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出。所以完成基本工作同时也在积极寻找、学习适合自己又和工作环境相匹配的工具。与团队成员配合的时候没有人会在意你是用什么工具,成员们只想看到设计师产出的输出物。这个时候针对不同任务类型和团队大小找到合适的工具可以让设计师迅速输出团队想要的结果输出物,事半功倍。

随着移动互联网的快速发展,很多针对移动端开发的工具层出不穷,这些工具的小、快、针对性强的特点在一定程度上对产统设计工具造成一定的冲击。

下面介绍自己常用的一套设计工具和在配合项目使用过程中的心得:

Axure

虽然现在很少用到了,但作为步入互联网第一个接触的软件要纪念一下。功能大而全,有丰富的控件可以调用(网上对于Axure的控件资源很多),通过简单的逻辑关系组合出丰富的动画(8.0在动效制作有大幅提升)。但正是因为它的大而全使其在移动端设计上不够灵活,功能多而复杂。软件自身的设计不符合设计师工作习惯,当元素多时绘图面板非常混乱,产出物死板不美观。当然Axure可以做出高保真界面,但相比于Sketch要花费很大成本,如果未能多去建立母版,之后的二次三次修改成本很高。大部分产品经理在Axure上图配文并生成html作为文档传递给下一工作流程上的组员。

绘制高、低保真网页原型图;可作为产品、交互文档输出工具

Sketch

完全针对移动端设计而生的软件。界面干净直观,分层的概念符合设计师工作习惯,当界面复杂时明确的图层与分组使元素控件管理起来非常方便。Artboard、Symbol和Text style 的运用简化了重复内容调用的工作也减轻了后续修改工作,图配文的文档输出管理好过Axure。第三方插件的开发和控件库资源使设计更方便,还有很多其他的小功能,比如Share(用其他电脑可以实时观看设计进度),自己还要边使用边发现。与Axure对比,前者更适合网页原型设计而后者更倾向于移动端产品。国外Sketch已经有取代Ps、Axure的趋势了,国内也开始普及,一些公司团队强行统一使用Sketch。

绘制高、低保真移动端原型图;绘制图标、视觉设计稿;可切图输出;可作为交互文档和视觉设计说明文档的输出工具

Omni Graffle

一款流程图工具。流程图无非就是图和线的排布,自己也有用过Ai、Sketch画流程图。但当要修改时会很混乱,线要重新画,版面要重新布置。而Graffle专为流程逻辑而设计,移动图时线也随之移动,线的属性可更改,排版非常方便。图层的设计方便管理界面元素,很清楚认识到哪些元素是并列关系,哪些元素是父子集关系。交互的流程,功能的结构,组织的关系,凡是涉及到关系逻辑的设计Graffle是我用过最好用的流程设计软件。

产品功能需求逻辑图;产品页面交互逻辑图



Keynote

普遍当作汇报演讲的软件,其实还可以用来输出原型演示视频。在开发过程中设计师很多时候不能通过静止的图像清晰地向工程师传达交互过程,此时需要制作动画原型来展示方案。制作动画需要安排好展示逻辑,设置很多动效参数,有时甚至涉及到动效变化曲线,这些复杂的逻辑参数增加了制作成本。工程师只想看到简单的演示,他们并不care你这个交互反馈是否有spring,delay了零点几秒,这时可以使用keynote制作动效视频。首先画草图排好展示顺序和时间,在keynote上列出展示页面,用神奇移动和自带控件动画将页面联系起来,制作起来非常省力。

同时本身的图文编辑属性、分页展示属性、可插入原型演示动画的特点使keynote可作为交互文档和设计规范文档的输出工具

制作简单交互动效视频;撰写交互文档;撰写设计规范



Pixate和Quartz Composer-Origami

两者都是交互原型制作工具,可生成模拟器或者mirror到手机上,更直观地推敲设计交互原型。前者被Google收购已经免费,最大的特点是运用了图层概念,将交互手势、动画直接添加到图层上,并用base on将页面联系起来。后者是Facebook在苹果原生Quartz Composer动画设计软件上的插件,大大降低了设计使用门槛。特点是模块化,用编程的逻辑制作动画。不同的交互手势和动效样式有各自的一个模块,用线将模块联系起来,软件的动效调用基本源于FB的Pop Animation库。两者学习成本很高,尤其后者,页面多、交互多时制作面板非常复杂,但做出的动效精确优美。可适用于个别页面中少数重要、精确的交互原型制作。

制作精准的交互动效原型






工具只是工具而已

以上是自己从原型图、交互原型展示到文档输出经常使用的一系列软件。工具只是高效地将我们的想法用最合适的方式完整无缺地展示出来,便于别人理解与存档。根据不同场景和输出物选择恰当工具,工具自身并没有优劣。如果绘制拟物风格界面、图标,Sketch在Ps和Ai面前就显得力不从心;在大团队里文档输出用Indesign就比用Axure等输出的文档更正规,更有利于存档和日后查看,形成公司团队的知识库。

自己本科在刚做工业设计时常纠结于工具,看到别人优秀的作品总是把重点放到“这是用什么渲染的?这个模型有什么软件建立的?”而忽略了使用者的创意和想法。那时也学习了不少软件(Ps、Alias、Showcase、Keyshot等等),现在回想起来留下的更多是工业设计的想法思维。希望大家能清楚认识工具的意义,找到并掌握一套自己顺手的工具,更重要还是要看使用者达出来的创意想法,切不可纠结于工具。

本文转自:简书
  • 大小: 34.1 KB
  • 大小: 17 KB
  • 大小: 586.8 KB
  • 大小: 1.5 MB
  • 大小: 1.7 MB
来自: 简书
0
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • java swing-JFormattedTextField的使用

    JFormattedTextField是Swing库提供的一个带有格式的文本输入框组件。它允许用户输入特定格式的数据,例如日期、时间、货币等,并在用户输入时进行格式验证。

  • java swing 焦点_Java Swing - 如何改变JFormattedTextField焦点行为

    import java.awt.GridLayout;import java.text.ParseException;import javax.swing.JButton;import javax.swing....import javax.swing.JFormattedTextField;import javax.swing.JFrame;import javax.swing.t...

  • java键入格式_Java Swing - 如何定义JFormattedTextField以在您键入时应用格式限制

    import java.awt.BorderLayout;import java.math.RoundingMode;import java.text.DecimalFormat;import java.text.NumberFormat;import javax.swing....import javax.swing.JFormattedTextField.Ab...

  • Swing中的JFormattedTextField组件实例

    http://developer.51cto.com/art/200907/135469.htm 虽然Swing的JFormattedTextField组件看起来与 JTextField 相似,但是它的行为与 JSpinner完全不同。在最简单的情况下,您可以为电话号码提供一个类似“(###)###-...

  • java swing 失去焦点_Java Swing - 如何句柄焦点丢失和JFormattedTextField的文档事件

    import javax.swing.JFormattedTextField; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel; import javax.swing.SwingConstants; import javax.swing.border.EmptyBorder; ...

  • java文本框设置掩码_Java Swing - 如何为JFormattedTextField创建自定义掩码

    import javax.swing.JFormattedTextField;import javax.swing.JFrame;import javax.swing.text.MaskFormatter;public class Main {String formatString = "##/######";MaskFormatter formatCNP = createFormatter(fo...

  • Swing

    为什么需要Swing? 使用AWT已经能够实现图形界面,为什么还需要Swing? AWT依赖本地系统支持,在不同的系统上,外观不同. AWT只能实现所有平台上都有的组件,大大限制了AWT所支持的组件的数量. Swing完全使用100%Java...

  • SWing组件说明及使用

    文章目录SWing简介层级结构类层次结构顶级容器面板组件菜单相关组件基本组件及其他组件布局管理器事件监听 SWing简介 Swing是一个用于开发Java应用程序用户界面的开发工具包。其采用纯 Java 实现,不再依赖于本地...

  • java swing界面_java Swing图形化界面

    importjavax.swing.JFormattedTextField;importjavax.swing.JFrame;importjavax.swing.JLabel;importjavax.swing.JPanel;importjavax.swing.JPasswordField;importjavax.swing.JTextField;public class FrameDemo ...

  • java swing ip地址输入框,用户在文本字段Java Swing中输入时,屏蔽IP地址

    I have a JTextField to accommodate an ip address with 3 dots. 255.120.320.123.... JFormattedTextField f = new JFormattedTextField(mf); add(f); } catch (ParseException e) { e.printStackTrace(); }

  • Java Swing 第三版 英文

    ·新增了讲解JFormattedTextField和输入验证的章节 ·Mac OS X的编程介绍和范例 ·SDK 1.4引入的输入焦点系统 ·可插拔的外观风格 ·SDK 1.4引入的新布局管理器SpringLayout ·总结每个组件重要功能的属性列表 ·SDK...

  • Java Swing基础

    Java Swing基础 1. Swing的几乎所有组件都是根据MVC模式设计的 而JList才是使用MVC模式的经典例子。 ListModel,ListCellRenderer(ListUI),JList 2. JComboxBox是下拉列表框。 和JList类似,JComboBox使用...

  • Swing组件下载(常用组件)

    Swing组件(javax.swing.-) 面板:JPanel 标签化窗格:JTabbedPane 拆分窗格:JSplitPane 滚动窗格:JScrollPane 工具栏:JToolBar 桌面窗格:JDesktopPane 内部框架:JInternalFrame 分层窗格:JLayeredPane ...

  • JFormattedTextField使用心得

    文本框是使用率非常高的一个控件, 用于接收用户的输入信息。...于是java又提供了一个复杂的文本框JFormattedTextField来帮助我们实现一些常用的功能,当然,如果你要实现的功能太复杂,还是老老实...

  • java swing 目录,java swing图形界面开发目录

    java swing图形界面开发目录...请看以下的目录你就知道要学习哪些了:目录第1章 Java Swing概述 11.1 什么是Java Swing 11.1.1 Swing的发展史 11.1.2 Swing的功能 21.1.3 Swing的特性 21.2 Java Swing的包结构 31.3 ...

  • Eclipse+Java+Swing实现学生选课管理系统

    Java+Swing实现学生宿舍管理系统一、系统介绍二、系统展示1.登录页面2.学生端-主页面3.学生端-课程选择4.学生端-查看已选课程5.学生端-修改密码6.学生端-学生信息查询7.管理员-主页面8.管理员-查看选课情况9.管理员-...

  • Java -Swing-学习笔记

    Java -Swing-学习笔记 文章目录Java -Swing-学习笔记1. 基本组件2. 特殊容器2.1 JSplitPane2.2 JTabbedPane2.3 JLayeredPane、JDesktopPane、JInternalFrame3.拖放功能4.Java7新增的Swing功能4.1 用JLayer装饰组件...

  • JformattedTextField之MaskFormatter

    创建一个MaskFormatter对象 如 MaskFormatter formatter = new MaskFormatter("##########"); ...如 JTextField tf=new JFormattedTextField(formatter); 这样就限制输入的长度为10的数字了 M

  • java swing 用户登录_java swing 制作一个登陆界面,亲测有效

    packagecom.test.jframe;importjava.awt.Color;importjava.awt.EventQueue;importjava.awt.Label;importjava.awt.event.ActionEvent;importjava.awt.event....importjavax.swing.JButton;importjavax.sw...

  • AutoText:Java Swing 库,允许将自动完成的可能性添加到文本组件(JTextComponent - JTextField - JFormattedTextField 等)

    自动文本 Java Swing 库,允许将自动完成的可能性添加到文本组件(JTextComponent - JTextField - JFormattedTextField 等)

Global site tag (gtag.js) - Google Analytics