给小白看的交互设计启蒙帖(一)

通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

给小白看的交互设计启蒙帖(一)

通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。

文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理解。如果有不严谨的地方或表述不清晰的地方,欢迎各位大大们指出。

什么是交互设计

1.什么是交互


交互设计顾名思义就是交互的设计,所以解决这个问题的关键在于,首先要知道什么是交互。

交互,即交流互动,其实这个词语离我们的生活很近,例如中国式打招呼:

给小白看的交互设计启蒙帖(一)

简单几个字的你来我往,搭配眼神和动作,传递出了礼貌、亲近、尊敬等诸多丰富含义。

人和人之间的交互我们很好理解,那么人和机器间的交流互动是什么呢?举个例子,如果你想解锁一个手机,你与手机的交流可能是下面这种情景:

--按home键(嗨,手机,好久不见啊!)

--屏幕亮了没解锁,弹出输入密码页面(哎?是小明来了么?)

--输入密码(是啊!)

--解锁(哦哦,欢迎欢迎快请进~)

所以简而言之,当人和一件事物(无论是人,机器,系统、环境等等)发生双向的信息交流和互动,就是一种交互行为。

要注意的是,这种交流和互动必须是双向的,如果只有一方的信息输出,而没有第二方的参与,那么只能是信息展示而不是交流互动。例如,图左的包装是单方面的信息展示,只能让人从中获取信息,而不能反过来接收信息并作出反馈,所以智慧信息展示而不是交互。

图右输入框会根据输入的内容作出正确和错误的反馈,有信息的交流,所以是一种交互。

给小白看的交互设计启蒙帖(一)

2.什么是交互设计


词条给出的解释是:“交互设计,是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。”

我们来做一个精简:”交互设计,是交互行为的外在表现的设计“。其实可以简单的理解为,交互设计把一个或者一系列交流互动,用文字、图像或文档等方式,从交流的内容、方式、规则等维度进行统一的设计。

用一个不算太恰当但是很形象的例子来比喻:那就是交互设计就是给一个或一系列交互行为设计一个剧本。

就像之前例子中提到的输入框,输入的字数限制是多少,什么情况是正确的,什么情况是错误的,在正确的时候有什么反馈,在错误的时候有什么反馈,这些都会像是剧本里的故事情节和台词一样被提前设计好,并由演员(图形界面)来表演出来,用户在这个过程中,既是观众(观看情节发展)也是演员(与图形界面互动,触发情节)。

3.交互设计的范畴


交互设计涉及到人与人、机器、环境等等,其实是一个很宽泛的概念。

给小白看的交互设计启蒙帖(一)

上图我们可以看出,交互设计跟工业设计、建筑学、信息架构、视觉设计和人机交互都有相重叠的部分,或者换言之,但凡是涉及到与人产生交流互动的领域都可能涉及到交互设计的部分。

今天我们讨论的在互联网行业内大热的交互设计,其实主要是人与互联网产品(网站、App、智能手表等)的交互行为的设计。例如,跟手机淘宝App进行交流从而买到一款心仪的鞋子;跟大众点评App交流让它推荐一个附近性价比高的川菜馆; 跟支付宝交流让它给你刚买的一瓶矿泉水付账...

4.常见缩写


UI (User Interface):用户界面。

UE或UX (User Experience):用户体验。通常国外和国内的的外企叫UX,国内叫UE。

IxD (Interaction design):交互设计。区别于工业设计,加了个”x”。

UID(User Interface Design):用户界面设计,现在一般很少用到。

UED (User-Experience Design):用户体验设计。

UCD (User-Centered Design):以用户为中心的设计

其实交互设计准确的说法应该是IxD,但是在国内,似乎已经约定俗成为“UE”,所以为了便于大家理解,下文我都以UE指代交互设计。

什么是交互设计师

1.交互设计师是做什么的

如果你已经大致明白了什么是交互设计,那么交互设计师的工作内容也就呼之欲出了。简单来说,如果交互设计是给交互行为写剧本,那么交互设计师就是编剧,负责构思、撰写和修改这个剧本。

例如:你想让大众点评App给你推荐一个附近性价比高的川菜馆,那么剧本大概包括以下这些

【主线】打开 App-搜索关键词-筛选-查看详情-导航到达-评价

【剧情】在哪个页面找到搜索,搜索在什么位置,点击哪个按钮进入搜索,App 在什么情况下给出怎么样的提示...

【分支剧情】插播一条广告,推荐给你相似的商家

【大结局】你最终找到了符合你要求的餐厅。

有人理解交互设计师,就是个画流程图、线框图的。这种说法有点片面,但也不是全错,因为流程图线框图确实是交互设计师进行设计的一种产出方式。但这种说法忽略了在这些可视化产出物之外,设计师所进行的思考工作。

给小白看的交互设计启蒙帖(一)

思考是不易于可视化的,即便是有思考过程的产出,也很少被大众看到;即便是被大众看到,除了同行交流学习外,很少有人会耐心研究。所以有这样的误解也是情理之中。那么如何判断一个交互设计师发挥了怎样的价值呢?

就像是编剧的能力有差异,写出来的剧本可能是神剧,也可能是烂片。一个交互设计方案可能会让用户爱不释手,比如探探的左划右划挑选聊天对象,一度风靡陌生人社交圈;反过来一个糟糕的交互设计也能让用户万分沮丧,被用户打入冷宫,你可以回想一下在最早期12306网页买车票的经历。

2.交互设计师的上下游合作伙伴

用一张图来描述交互设计师的上下游合作伙伴们

给小白看的交互设计启蒙帖(一)

如图所示,交互设计师UE最主要的三位小伙伴主要是产品经理PM,视觉设计师UI,用户研究UR。这种配置比较完善的团队,一般出现在比较成熟的中大型互联网公司,对于创业公司或者微型公司,通常来说进行一些精简或合并。最先被精简掉的一般来说都是UR岗位,在公司初期阶段可能并没有足够的成本预算来设立这样一个岗位,所以很多公司是没有UR的;其次就是UE,很多公司是由PM或者UI兼做UE的工作。

UR和UE之所以可以被替代,并不是因为这两项工作不重要,而是因为不同的阶段公司有不同的诉求。在产品初期,最先要解决的是”有没有“的问题,其次才是”好不好“的问题,而UR和UE解决的正是”好不好“,所以在早期是可以暂时不设立专门的小组的。但是,观察实际案例你就可以发现,大凡是产品发展到一定阶段的公司,一定会增设UE和UR岗位,这恰恰说明了这两个职位的重要性。简单来说,PM和UI决定了产品走多快,UR和UE决定了产品走多远。

有人可能会问,既然PM和UI都能把UE的工作兼掉,那是否说明PM与UE、UI与UE的工作是有重叠之处呢?他们之间是如何划分岗位职责的。

1)UE vs. UI


常见的错误理解方式有:

       ①UE是UI的概念炒作,其实是一样的

       ②UE是高级UI

       ③会画线框图的UI就是UE

这是最容易被混淆的两个岗位,特别是一些外行人员或初学者,但真实的情况是,这两个是完全不一样的。之前我们把UE设计类比为写剧本,我们继续沿用这个比喻。

如果说做一个产品就是拍一部电视剧的话,UE就是编剧,负责脚本的撰写,而UI的岗位其实就是剧组里面的”服化道+灯光+布景“,主要负责剧中所有视觉呈现的工作。在剧组急着开拍的时候,等不及编剧到位,如果对剧本质量没有什么要求,服化道负责人承担起写剧本的职责,也是可以接受的。不过为了电视剧长期的口碑,等条件允许了,剧组还是会请专业编剧的。

所以,回到实际工作中,UE负责交流互动的设计,而UI负责产品的视觉表现设计,可以说是完全不相同的领域。比如当你在浏览手机淘宝App时,弹出一个广告弹窗,这个弹窗是在什么时候出现,以什么方式出现,以什么方式消失,是否还会再出现...这是交互设计师来设计的;这个弹窗是什么颜色,什么形状,什么尺寸,有什么配图...这是UI设计师来设计的。

2)UE vs. PM


常见的错误理解方式有:

       ①UE是PM分离出去的

       ②UE是PM的画图助理

       ③PM和UE是一样的

因为在很多初创公司都是由PM承担UE的工作,所以对PM和UE的岗位职责很多人都难以分辨。

让我们再次回到剧组,如果要给PM安排一个角色,那应该是制片人,他需要发掘市场需要什么样的作品,制定计划,寻找投资,组织生产,最后还要持续跟进发行后续工作,并对结果负责。类比到实际工作中,PM要做的是深度挖掘市场需求,制定产品计划,提出需求,并组织和协调后续的设计与开发过程,并且对结果负责。

有人可能会问,既然PM是产品的总负责人,那么是否意味着PM是UE、UI的领导部门?

这就像是制片人是编剧的领导么?其实并不是,三者是合作关系,而没有领导关系。UE对交互设计结果负责,UI对视觉设计结果负责,PM对产品成长负责,UE和UI的产出物可以接受PM的建议进行调整,但并不意味着是服从关系。

总结


如果看完上面的介绍,你还是有点困惑的话,那么就这样简单来记:PM负责“该做什么”,UE负责“怎么做最好”,UI负责“长什么样子”

以下列举一个简单的例子,仅做参考,让大家对三者工作有个比较直观的感受,强调!仅是示例,并不是实际中工作形式。

给小白看的交互设计启蒙帖(一)

交互设计师的一般工作流程

先来看一下一个产品需求是怎么实现的:

给小白看的交互设计启蒙帖(一)

通过上图我们可以看出一个产品需求的实现是PM/UI/UE/RD通力配合的结果,当然这中间也有UR的研究支持。UE主要参与产品需求评审、交互设计、视觉评审、开发验收这四个阶段,其中交互设计阶段是交互设计师的主要工作范畴。

给小白看的交互设计启蒙帖(一)

1.需求评审

需求评审阶段通常来说是PM内部的评审,由PM发起,UE参与讨论,最终的评审决定人是全体PM或者PM负责人,最终输出的产物是PRD文档和项目的时间排期。如果是从UED内部发起的需求,不涉及产品功能,那么需求评审可能会在UED内部进行,需求文档和排期表也可以是UED内部制作的。

在这个阶段,虽然UE是参与,但并不意味着只是被动接受结果,而是需要积极参与到需求的分析和评审过程中。如果UE在评审之前就已经对项目相关的用户需求、市场需求有所了解并有理有据,应该主动和需求方从专业角度进行讨论、研究需求的合理性、可行性。

2.设计阶段

设计阶段是交互设计师的主要战场,过程可以拆解为分析-初稿-评审-终稿四个阶段,最终的产出物是产品原型图、交互说明文档和视觉排期表。

1)分析:这个阶段是花费时间最长,也最为重要的阶段。在这个阶段我们要研读PRD文档、收集历史信息,考察竞争产品、并结合行业现状、公司现状等各客观条件,对项目相关数据做详尽的收集和分析,明确最终的目标;同时借助用研方法(有用研支持可以直接发布用研需求)对用户需求进行深度挖掘,找寻同时满足业务需求、产品需求和用户需求的最佳解决方案,对达成目标所涉及的重点突破点有理性的分析判断。在此阶段,竞品分析报告、用户需求分析报告和可能性方案是交互设计师专业度的重要表现。

2)初稿:根据上个阶段产出的分析结果,从几个可能性方案中优选出最佳方案,并落实到交互流程图与原型图上。这个阶段可以不必输出详细的交互说明文档,只需要有必要的说明让流程图和原型图便于理解即可,详细的交互逻辑和状态可以在评审通过后予以补充。

3)评审:PM发起并从需求角度对方案初稿进行评审,UI参与了解。若未通过,则需要对方案进行重新调整和评审,直至通过。

4)终稿:若评审通过,UE可以补全交互说明文档并推进到UI进行视觉设计。

3.视觉评审

设计评审阶段由PM发起,UE和UI参与,最终的评审决定人是PM和UE。最终输出的产物是产品设计稿。这个阶段UE主要从交互需求角度对设计稿进行评审,给出合理化建议。

4.研发验收

研发验收阶段由PM发起,UE和UI参与,最终的评审决定人是PM、UE和UI。UE主要从交互设计还原度进行评审,审查流程、状态、交互方式等是否符合交互说明文档,如果有缺失或错误的地方,要根据公司内部的反馈流程,向研发提出修改需求。

有条件的公司,在研发上线产品之前,会先研发一个仿真Demo,以供PM、UE、UI做第一步的测试和修正,之后才会开发正式上线的版本。不过这种方式成本更高,周期也更长,所以初创型和小型公司可能会跳过demo,直接开发上线版本。

交互设计师的常用工具

1.原型工具

是交互设计师必备的工具,流程图、原型图、交互说明都靠它。

Axure

必要性 ✭ ✭ ✭ ✭ ✭

难易程度 ✭ ✭ ✭

特点:主流、功能强大、多人协作、版本管理

官网: https://www.axure.com/

墨刀

必要性 ✭ ✭ ✭

难易程度 ✭ ✭

特点:操作简单、快速预览、界面美观、支持Sketch导入

官网: https://modao.cc/

2.脑图工具

分析阶段你需要用脑图工具整理你的思路,协助制定方案。

XMind

难易程度 ✭

掌握需求 ✭ ✭ ✭

特点:国产、有免费版,界面友好

https://www.xmind.cn/

MindManager

难易程度 ✭

掌握需求 ✭ ✭ ✭

特点:功能强大

http://www.mindmanager.cc/

3.动效工具

页面交互动效让你的交互方案更加直观,现在市面上有很多这类型的工具创新,选择你用着最顺手的吧

墨刀

必要性 ✭ ✭ ✭ ✭

难易程度 ✭ ✭

特点:操作简单、内置丰富的页面切换方式、交互手势及动画

官网: https://modao.cc/

Principle

必要性 ✭ ✭ ✭ ✭

难易程度 ✭ ✭ ✭

特点:功能强大,质感好,速度快,支持OG和Sketch素材导入

官网: http://principleformac.com/

Flinto

必要性 ✭ ✭

难易程度 ✭

特点:操作简单

官网: https://www.flinto.com/

4.文档工具

文档工具是撰写分析报告、梳理状态等必备工具,重要性自不必说

Office/WPS 三件套

掌握需求 ✭ ✭ ✭ ✭ ✭

难易程度 ✭ ✭

交互设计师资源网站推荐

1.英文类网站

https://uxdesign.cc/

UX Collective:Curated stories on user experience, usability, and product design.

http://uxmag.com/

UX Magazine:A free community resource exploring all facets of experience design.

https://uxmastery.com

UX Mastery:We write articles, ebooks, newsletters, host podcasts, and teach in-person workshops that are fun, practical, and highly regarded by industry.

http://uxmovement.com/

UX Movement: A user experience blog that publishes articles showing how good and bad design practices affect user behavior. 

https://www.uxmatters.com/

UX Matters:Insights and inspiration for the user experience community

https://uxplanet.org/

UX Planet:One-stop resource for everything related to user experience

https://www.smashingmagazine.com/

Smashing Magazine: Deliver reliable, useful, but most importantly practical articles to web designers and developers.

https://www.nngroup.com/

Nielsen Norman Group:Evidence-Based User Experience Research, Training, and Consulting

2.中文类网站

http://uxren.cn/

UXRen:用户体验人专业社区,提供公开课、文章、招聘、培训、翻译、会议及外包等服务,翻译200多篇优质UX外文

https://www.jianshu.com/

简书,国内优秀的创作社区,任何人均可以在其上进行创作。用户在简书上面可以方便的创作自己的作品,互相交流。

https://www.zhihu.com/

知乎,国内优秀的网络问答社区,连接各行各业的用户分享着彼此的知识、经验和见解。

总结

以上是关于交互设计与交互设计师的基本信息分享。我本人在交互领域也只是经验尚浅,谈不上登堂入室,所以写的很多内容也是我站在交互这个领域的大门前的所见所感,希望能让后来的小伙伴对前面的路有个提前的预知与参考,也让隔壁间感兴趣的小伙伴做一个简单的了解。这写内容还较为基础,还有很多重要的部分例如交互设计师的产出物、必备能力等会在之后继续完善。欢迎大家随时提出意见或建议。

给小白看的交互设计启蒙帖(一)
给小白看的交互设计启蒙帖(一)

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35883/

(0)
交互精选交互精选
上一篇 2018-03-13
下一篇 2018-03-14

相关推荐

  • 交互设计:超越人机交互(原书第4版)

    本书由交互设计界的三位顶尖学者联袂撰写,是该领域的经典著作,被全球各地的大学选作教材。新版本继承了本书一贯的跨学科特色,并与时俱进地更新了大量实例,涉及敏捷用户体验、社会媒体与情感交互、混合现实与脑机界面等。全书紧紧围绕设计与评估的迭代过程,不仅包含了传统的理论知识、实例解析、实践指导等内容,还通过“窘境”模块讨论了一系列启迪思考的开放问题。此外,本书网站www.id-book.com也为读者提供了丰富的资源,包括教学PPT以及大量的案...

    2018-03-09
  • 用户体验是家电实体店独享红利

    不可盲目自信,也不能过度自卑。对于众多的家电实体店来说,满足用户的体验、持续带来新的用户体验,是应对一切外来不利因素挑战和冲击的最大筹码,也是生存的底线。蔓欣||撰稿现在,主题乐园正成为现在人们选择度假的方式,在春节旅游大报告中,上海迪士尼赫然位于“最热门景点”第四,而其他像常州中华恐龙园、顺德长鹿农庄、上海长风海洋世界、武汉欢乐谷等也是今年春节期间最热门的主题公园。尽管,现在基本上所有的购物、娱乐和消费,都可以在线上解决。但是,更多的...

    2018-03-09
  • Axure RP 8 入门手册 – 第1章(下)

    第2节原型相关的文件类型芝芝:小楼老师,我不小心把软件关闭了,我编辑的文件在哪?小楼:你新建完文件没有保存吗?芝芝:我有生成HTML文件,但是好像不能用软件打开呀?小楼:看在颜值的份上,我给你讲讲吧!与Axure相关的文件有几种类型:分别是“.rp”文件、“.rplib”文件、“.rpprj”文件以及“HTML”文件。“.rp”文件:独立原型项目的源文件,这是最重要的文件,只有这个文件才能进行原型的编辑与输出。“.rpprj”文件:团队...

    2018-03-31
  • 这样学Axure,效果更好,面试更容易拿高薪|1433人的经验贴

    众所周知,Axure是产品经理必备的工作软件。但为什么要学好Axure,仅仅是因为它是必备的软件?为了不错过更好的发展机会BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别等要用时,才发现自己没有!别让Axure阻碍你的高薪产品路。怎样学Axure,效果更好?想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?没人监督指导,自学还没到一个周,就想放弃按教程操作,却出不了效果,又不知错在哪里难的知识内容看着费劲,...

    2018-04-20
  • 交互设计 | UX设计想法表达太难?——试试故事版StoryBoard

    UX设计中一些针对用户调研的方法Workshop、Observation、Interview调研结束后需要将调研结果整合反馈单纯以文字去呈现无法将设计信息最大化故事板、线框图等视觉化的信息传达方式直观准确的解决设计问题下面小编将为同学们详细介绍故事板在交互设计作品集创作中的应用及优点,帮助大家在设计过程中能更高效的完成设计想法的交流和沟通。故事板的应用故事板可看作代表镜头的插画,同学们在设计时需要把图像排列在一起,使自己的设计能够故事化...

    2018-03-17
  • 对交互设计的思考(译文)

    本文是一篇译文,介绍了国外设计师对于交互设计师的现状和他认为的理想状态的思考。老外的思路还是比较清奇的,在这里介绍给大家。数字革命对于有好奇心的人来说就像是淘金热。没有人知道数字媒体究竟是什么,但它实实在在的深刻影响着我们的生活。 它是一个新的未知的领域,等待用新的艺术形式,设计和方式来填充,以更好地了解这个世界。然后,世界就变成了下面这样:这是怎么回事?1.基于技术思维的交互设计交互设计从数字技术革命中应运而生。所以就像工程师一样,设...

    2018-02-02
  • 【设计竞赛】2018UIA-霍普杯竞赛开题!扎哈事务所新任掌门人帕特里克 · 舒马赫担任主席

    编者按 :期待已久的2018UIA-霍普杯国际大学生建筑设计竞赛题目新鲜出炉啦!扎哈 · 哈迪德建筑师事务所(ZHA)负责人帕特里克 · 舒马赫担任本次竞赛主席并拟定题目。帕特里克 · 舒马赫Patrik Schumacher扎哈·哈迪德建筑师事务所负责人竞赛主题演变中的建筑Architecture in Transformation竞赛题目城市共生:定制化社区模块Urban Co-living: Customizing Modules...

    2018-02-02
  • 交互设计——绘制流程图

    在上一篇文章中了解如何寻找接触点、梳理接触点,在这篇文章中主要就是如何来绘制流程图。现在普遍对流程图的分类有四种:业务流程图、页面流程图、功能流程图、程序流程图。在这主要通过现有的APP分析来进行区分不同流程图以及如何交互设计师或者产品经理选择应该使的流程图。何为流程图在上文中讲到了流程,流程是事物进行中的次序或顺序的布置和安排。流程是自然而然就存在的,它可以不规范,可以不固定,可以充满问题。而流程图的核心就在于如何排布事物进行的次序,...

    2018-05-06
  • 输出专业交互设计文档清单

    原文转自:http://www.uisdc.com/export-professional-interactive-documents在项目设计中,交互设计师与上游的产品经理,下游的视觉设计师,开发工程师和测试等岗位的工作密不可分。不论是承上启下的工作沟通, 还是方案评审的设计讲解,专业的交互设计师应该具备优秀的表达能力,不仅是语言方面的表达,交互文档的表达也尤其重要。交互文档是对接上下游岗位,利于协同团队工作的重要输出件。(本文会以 ...

    2018-03-25
  • 交互设计脉络概要

    一般做交互设计师有的是刚毕业的时候就会去做。也有的是本身是做视觉设计的,然后在未来的职业规划可能对交互设计感兴趣,所以呢,有时候对产品说,我想转交互行不行,那其实整体还是要看公司对你的角色的一个定位和是否给予的机会了。当然啦,很多机会是靠你自己去争取的,这个无论是在公司本身或者另外的公司,就自己去考量自己人生一个选择。一:什么是交互到底交互设计的一个定义是什么呢,因为了解一个新行业我们首先需要知道的就是他的定义,这样才是一个准确的、一个...

    2018-04-28