一套交互设计工具推荐

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

一套交互设计工具推荐

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

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

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

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是我用过最好用的流程设计软件。

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

一套交互设计工具推荐

Page Flow

Keynote

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

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

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

一套交互设计工具推荐

报错提示交互

Pixate和Quartz Composer-Origami

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

制作精准的交互动效原型

一套交互设计工具推荐

复杂的Scroll交互动效(临摹)

Principle

刚出来不久的原型制作软件。操作界面和Sketch很相像,通过不同交互手势将页面连接起来,最大的特点是可视化程度高。在Sketch中制作的高保真原型图可直接拖拽到Principle中,为图片自身和图片之间赋予交互,mirror到手机上,用来汇报自己制作的demo非常方便。通过animate和drivers也可制作出略复杂带有条件语句的动画,但并不能和Pixate、QC-Origami相比拟。用Principle直接将手机连接到投影上展示demo,其他手机装上Principle后可打开用邮件收到的demo文件,评审更直观,省去了汇报过程中很多文字描述

制作简单交互原型;制作全局原型演示

一套交互设计工具推荐

制作交互原型演示

一套交互设计工具推荐

对页面上简单交互Mirror到手机上进行推敲

工具只是工具而已

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

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

 

作者:米亓

原文地址:http://www.jianshu.com/p/fa40b0b048c1

本文由 @米亓 授权发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30412/

(0)
CatherineCatherine
上一篇 2017-05-28 18:35
下一篇 2017-05-28 20:51

相关推荐

  • 一个产品设计师必须会讲的故事——用户体验设计中的故事板

    作为一名设计师,情绪板的运用想必你已轻车熟路了,然而情绪板其实还有个小姐妹不常被人们提及,她就是故事板。【情绪板】常用于品牌与形象设计领域,用来发掘用户对视觉体验的需求,而【故事板】则常用在用户研究和交互设计领域,通过还原用户使用场景来深度挖掘用户对产品整体体验的需求,是提升用户使用体验的有效研究方法。很多希望从视觉设计师过渡到体验设计师的新手设计师,心里很清楚要关注和挖掘用户除视觉以外的其他体验,但是却不知如何下手。各种用户研究方法虽...

    2018-05-08
  • 【交互设计】北京中技华软科技服务有限公司内部主题分享会第七期

    北京中技华软科技服务有限公司内部主题分享会第七期主题:交互设计时间:2018年4月23日主讲人:高旭2018年4月23日上午,北京中技华软科技服务有限公司进行了第七期内部主题分享会——交互设计。交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域。现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互。主讲人高旭分别从交互设计的起源、原则...

    2018-04-24
  • 设计师保持画草图是个不错的习惯

    一名优秀的设计师的经验之谈。 我从不敢放眼将来长远的看过去若干年,也许正是这个原因才让自己对很多事情不那么在意。其实我是个很安心于能让自己安心的事物的人,只是这样的事物随着时间的推移而越来越少;自己所…

    2015-05-19
  • 为什么交互设计师注定是一个走向没落的职业?

    当技术发展发现一定程度, 你会发现,没有什么东西是永恒的。

    2017-05-10
  • 怎样做好汽车交互设计?

    文章来源:汽车造型设计编辑整理:IO酱车内交互系统看似只是整车的一小部分,但由于承担了车辆和用户的“交流”任务,因此里面涉及到的内容很多,每一项拿出来都需要巨幅讨论,今天我们就和大家概括谈谈这里面的几点。目前重点汽车交互设计是决定智能汽车发展水平的重要标志,现阶段智能汽车在此方面关注的主要一点是用户体验。设计流程汽车交互设计的一般流程包括:1. 需求沟通;2. 资料调研;3. 专家评估;4. 用户研究;5. 需求及信息架构梳理;6. 概...

    2018-03-15
  • ios8设计规范 中文版 完整版

    文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 以内容为核心(Defer to Content) 1.1.2 保证清晰度(Provide Clarity) 1.1.3 用深度来体现层次(Use Depth to Communicate) 1.2 iOS应用解析(iOS App An…

    2016-05-12
  • 新版Material Design 官方动效指南

    在Material design的世界中,动效用一种优雅、流动的方式来描述空间关系、功能、和意向。

    2017-05-23
  • 帮你创造优质移动端UI的7项最佳实践

    在几年前,关于网页和APP谁做主导的话题还很热,但是现在看来,APP无疑已经是为用户提供内容和服务的主流了,它是用户最信赖的内容和功能的呈现方式。于是,随之而来的问题就是如何在竞争无比激烈的市场中,让你的APP在诸多同类中脱颖而出,并且让用户留在你的APP当中。留白常常被认为是一个活跃的元素,而非被动存在的间隙和背景。—— Jan Tschichold小贴士:有效的移动端APP信息推送策略是采用多种类型的信息推送机制,推送通知,电子邮件,应用内通知,新闻Feed等。多样化的信息推送通过合理的协调,创造良好的用户体验。

    2017-05-15
  • 设计心理学 | 设计中的防呆设计

    最近读到设计心理学的再次接触到防呆设计的概念,联系交互设计做一些总结。

    2017-05-25
  • 如何利用动效提升用户体验

    我们不再是设计静态的屏幕,用户将会从我们的设计中看到实际的内容。

    2017-05-16