搜狐交互设计师:我常用的一套交互设计工具

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

搜狐交互设计师:我常用的一套交互设计工具

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

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

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

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.miyuhao.com/2016/01/09/129/

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

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

(0)
CatherineCatherine
上一篇 2017-05-25 15:19
下一篇 2017-05-25 17:28

相关推荐

  • 泡泡UI英语:交互设计精髓1

    最近在读《About Face 4:交互设计精髓》,他全面系统地讲述了交互设计过程、原理和方法,涵盖内容广,刨析知识深,被奉为交互设计指南。也正因为如此,大量的专业词汇给阅读造成了不小的难度,推荐大家双语共读,…

    2017-08-01
  • Sketch49-原型设计才刚刚开始

    官方说明:草图49已经到来,在我们的图书馆更新之后,我们又为Sketch增加了另一个巨大且备受期待的功能。我们了解设计,所以我们知道你不能总是根据静态屏幕判断是否有效。有时你需要看到整个流程的实际运行情况,最好的方法是将你的设计变成交互式原型。通过我们的最新更新,我们正在使整个过程无缝 - 在Sketch中与原型设计师打招呼。Sketch 49带给我们的是最值得期待的功能之一:能够在本地创建和分享快速交互式原型当我听到这个消息时候,脑子...

    2018-03-02
  • 聊天的未来不是人工智能 ,及时交互才是关键

    作为Kik首席执行官,对于即将到来的聊天机器人革命,我思考了很长时间。一年半前,我们率先推出了一个基本版聊天机器人平台,之后,数百万Kik用户和这个机器人进行了对话。其他消息应用(比如Telegram和Slack)也在开发自己的聊天机器人,此外有传言称,Facebook将会在四月12日举办的f8大会上为Messenger推出自主开发的机器人平台。可能是有史以来第一次,聊天机器人能实现你和你周围世界的即时互动。最近,我亲身经历过的一件事,可能最好说明这一切。我的所有操作如下
    打开聊天应用 > 扫码> 输入“2”> 输入“百威”> 选择卡号。搞定!这种即时交互,只有聊天机器人能够做到。你不需要下载App应用,也不需要创建新账号,还有最重要的,你不用学习了解一款新应用里的操作界面了!只需扫码、聊天就能满足需求。这种体验,就像是我在手机上按了一个按键,三分钟之后一辆Uber出现在我面前。如今,科技行业喜欢把它称为O2O模式——在一款App里预订到实体产品或服务。而现在,你甚至不再需要一款App应用,只需用聊天的方式,就能满足自己的日常生活需要。

    2017-05-26
  • KY技术招聘详情 | 心理领域互联网公司KnowYourself

    如果对【KY内容中心】、【研发中心】、【市场品牌商务】、【运营、创意、用研】、【人事】等更多岗位感兴趣,请查看今天的其他几条推送内容。KY技术部,是KY的技术支持部门。我们通过各种技术手段,提升大家使用KY产品的体验,并为各种创意提供实现支持。我们希望能够以各种技术的优化,能让大家更精准的匹配到适合自己的朋友,能够找到合适的咨询师,能够与KY的交互中找到真正的自己,玩得意犹未尽。本次我们招聘需求详情如下:· 测试工程师 ·工作内容:1....

    2018-03-18
  • 做交互方案时,请注意检查这4个点

    作为一名交互设计师,到底什么程度才能算得上是“专业”?成为一名专业的设计师是否有方法与捷径呢?答案是肯定的,但是今天我分享的内容还不敢称之为体系,只能说是几个小小的经验吧,希望能给正在奔向专业路上的你有所启发。

    2017-05-11
  • 用户体验(UX)专家是如何进行设计评审?

    设计评审是一种可用性测查工具,通常由一个评审员审查设计方案中的可用性问题。本文摘自https://www.nngroup.com/articles/ux-expert-reviews/原文标题:UX Expert Reviews原文作者:Aurora Harley什么是“设计评审”?定义:设计评审是一种可用性测查工具,通常由一个评审员审查设计方案中的可用性问题。“设计评审”一词颇为广义,涉及数种可用性测查方法,且每一种的运用因人(评审员...

    2018-04-19
  • 掌握这六步,每个人都可以是体验分析专家

    随着体验经济的到来,体验成为商业的驱动力。那么当我们进入一个行业、拿到一个产品,如何从体验角度去分析和判断进而从体验角度进行驱动?莫急!! 本文简单总结作者多年奋战在体验第一线的理论和实战经验,送给大家一套清晰简便的分析方法。

    2017-05-25
  • 这些设计灵感,或许可以改变我们阅读新闻的方式

    在做设计之前,我们都需要很多的灵感,这就是我写这篇文章的目的。本文中我将重点介绍和评论一些新闻类APP或网站中的一些让人眼前一亮的优秀设计。有些是已经上线的,有些则只是概念设计稿。

    2017-05-14
  • 【上海实习】上海最TOP实习

    TG实习狗每日发布北上广深最新鲜的实习信息,陪伴你从大学到职场TG旗下媒体:TG实习狗、TG校招狗、TG内推狗▲ 点击图片马上了解 ▲招收15-20名高潜质学员进行为期1-2年系统定制化培养助力高潜质人才进入顶尖名企今日求职贴士发表于1秒前老狗查看:66666回复:233你真的适合咨询行业吗?在我看来任何选择咨询的人都会不可避免的询问自己以下几个问题1.Do I Love Solving Problems?2.Do I Think in...

    2018-04-09
  • Axure RP - 专业的原型设计工具

    俗话说的好,不会画原型的设计师不是好的产品经理。产品经理的一大技能就是可以熟练使用原型工具,画出优秀的产品原型。Axure RP是一个专业的快速原型设计工具,是美国 Axure Software Solution 公司旗舰的产品。产品经理能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。它比一般创建静态原型的工具如 Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver...

    2018-03-16