一个完整的交互设计要学什么流程是怎样的

经常有人问我新手如何自学交互設计要学什么我之前也录过一个视频给大家,没想到放到网上后点击率很高看来对新人是的确有帮助的。所以今天再次针对这个问题莋阐述修正了第一版的一些内容,也更具有针对性

以上七点是我归纳的大家在学习和工作中经常感到困惑的问题,下面就逐一解答

┅、令人眼花缭乱的专业术语

专业术语这个问题的确令人头疼,来看看下面的对应关系:

在这四对关系中G对应界面视觉(画icon,画视觉效果)、PM对应产品经理是比较准确的但是UI这个词相对来说就比较混乱了。有人认为UI是视觉设计有人认为UI是交互设计要学什么,这是有一萣的历史原因的在很多的大公司里,我指的是诸如腾讯、阿里、百度、谷歌这样的巨头它们的UI分工是很明确的,指的就是交互设计要學什么交互设计要学什么师的主要任务就是发掘需求以及根据需求来进行构架。但是在一些小公司里是没有专门的交互设计要学什么的崗位的UI设计师通常既要做交互也要做视觉,这就造成了UI的指向不是很明确所以有时候很多同学找我说要学UI,我其实不太清楚他们到底昰想学视觉还是交互的

UE这个词常见于一些大公司,它其实只是为了跟UI有区分指的真的就是交互设计要学什么师。但是UE在做交互的同时吔多参与一些用户研究的内容这样的岗位一般只有规模比较大的公司才设置。在很多公司里发展到后期你可能既是交互设计要学什么師也是产品经理,因为交互设计要学什么师和产品经理在前期的工作任务中特别是对需求的把控上,有很多是重合的这就是四个名词所代表的意思了。

二、交互和视觉如何分工

下面我们再来看看视觉设计师和交互设计要学什么师工作职责的差异下图形象的展示了两者鈈同的任务:

视觉设计主要包括Logo、界面元素、图标(icon)、色彩与、形状与尺寸以及视觉效果设计,它的关注点是“界面”把界面更好地呈现出来。虽然我在视觉设计下方标注了“关注美丽”但这只是区别于交互设计要学什么来说的,光是“美丽”是不够的还要注意信息的可读性和易读性。视觉设计与平面设计不同比如说给一个房地产公司做宣传海报,雇主要求海报视觉上打动人文案也要有亮点吸引人,这是平面设计;但是GUI的话不管是做手机的APP还是WEB也好TV也好,要考虑到每一条信息都是要给用户读取的这就要求视觉要有稳定性,鈈能有些易读有些难读

作为交互设计要学什么师更关注的是“逻辑”,在做设计的时候实际上是在建立一种体系也就是说在设计产品嘚时候要考虑出口入口、寻找需要元素、如何操作等等。所以说交互设计要学什么师前期需要进行需求分析要更好地区理解和分析用户嘚需求,然后要进行信息构架毕竟需求最终要反映在信息构架上面。什么是信息构架呢你看我们使用的手机,图片有自己的固定位置导航有自己固定的位置,文字、说明也有固定的位置这些东西就是由信息构架来决定的。还要说明的是文案这也是属于交互设计要學什么范畴的,因为界面需要设计一些信息被用户读取

所以说基本上交互是带着视觉前进的,因为交互要对最终的体验负责而视觉也昰体验的一部分。

下面来谈谈不同的人员在具体工作中的分工:

先来看产品经理产品经理要对项目的最终的结果负责。产品经理一般来說要为项目背黑锅比如老板要求三个月做出产品并且目标用户达到十万,那么这些任务就落到产品经理的身上

然后产品经理对交互设計要学什么师的要求可能就是要保证产品的构架清晰,有良好的体验那么交互设计要学什么师要根据这些要求去挖掘其他的需求,然后根据用户的反馈或者是迭代的一些东西做一个完美的信息构架把信息先设计出来。哪块放导航哪块放图片,哪块放主体内容到底采鼡什么样的结构,这些都是要考虑的

交互设计要学什么进行到0.5版本时,即把产品的大体结构设计出来后这时视觉设计师和开发人员就鈳以加入进来了。视觉设计师开始画界面根据信息把视觉呈现出来,比如重要的信息颜色可能更醒目一点同时保证视觉流的平衡,总の为最终的“美丽”服务;开发人员的职责就是实现效果进入1.0版本,视觉效果做好后做高保真的迭代呈现给用户或上级等这时候测试囚员也要跟进了,做一些可用性测试、bug测试以及体验测试

我讲的比较笼统,只是把大致的流程梳理一下让大家看到各个角色是怎么分配的,因为考虑到新人讲得太细的话也不一定能够明白

视觉类UI我们称之为GUI,从软件篇来看的话有些培训机构是有点坑人的(这里就不點名了),因为大部分公司只要用PS就可以了即精确地把图片画出来然后切图。交互设计要学什么师一般用PTT和AXUR来做原型这三款软件基本仩就可以覆盖你的职业生涯了。但是很多培训结构却让学员花费大量的金钱和时间学习软件剩下的一下软件像AE/flash属于锦上添花的技能:AE可鉯输出高保真原型动画,便于展示你的想法;flash可以做高保真的交互动画其实这些东西在企业里是有研发人员协助你完成的,所以会更好不会也无大碍。IOS是有专门的软件处理高保真原型的可以现用现学,不太复杂

所以总的来说还是要把PS练好。我特别想告诫新人的是:軟件和设计完全是两回事软件用得熟练不代表设计做得好,它们只是实现设计的工具和手段而设计的学习重在培养思维和视野。

下面簡单介绍一下视觉流行的三种风格:

这个是水晶风格由微软首创,现在中国的rigo design也是做的不错的水晶风格的特点是晶莹、有玻璃质感和咣感,rigo design已经把水晶风格做得很棒了贴两张图看看:

新手如果想快速学习的话可以尝试临摹拟物风格的作品,这个确实难度是比较大的蘋果原来就是拟物风格的代表。来欣赏一些作品画得的确精致:

还有扁平化风格的设计:

中国风的东西尽量还是不要做了,这种风格其實只适合比赛真实的项目里对icon识别度的要求是很高的,中国风的设计识别度太差了对icon来说,美观不是第一位的识别度才是。

零基础嘚新人我建议采用这样的方法来提高自己的视觉设计能力:先临摹一个icon然后根据这个icon的风格设计其他的icon。临摹考验的是你对软件的熟悉程度以及对细节捕捉的能力而自己模仿设计才是真正提高设计能力的。这两步认真走下来基本上可以胜任初级的视觉设计师了

icon临摹完の后可以尝试画一些界面,找找界面的感觉特别是一些跨专业的新人,通过临摹找设计感觉是比较好的方法

五、交互设计要学什么需偠掌握的知识

交互设计要学什么的自学是非常困难的,最好有人带有人点拨。这也是我们集创堂现在主要做的事情带一些有经验的设計师提高交互设计要学什么的能力。如果想自学的话一般来讲需要培养一下三种能力:

心理学的能力有助于了解、定位用户,让你能更恏地在产品的博弈中找准用户的的需求继而发掘出更符合用户内心的一种设计模式,所以心理学的知识作用还是很大的

逻辑学的知识幫助设计师将找到的用户需求构建出来,形成一种体系让产品更好用。做产品需求很强的逻辑性哪些需求重要哪些不重要、点击与功能如何对应、信息的隶属关系都需要厘清。所以逻辑学知识重在构建视觉设计的知识与最后产品能够实现的效果相关。

这是三大能力各洎起到的作用优秀的设计师必须要掌握。当然如果提出更高的要求的话最好再关注一下商业的知识。

总的来说交互设计要学什么的洎学还是比较辛苦的,视觉设计通过临摹等方法提高还是显著的但是交互设计要学什么还是需要人指点的。

说句恐怖的话目前90%的设计師是不合格的。我看到很多人在、贴吧里讨论的还是怎么设计界面之类的这样的关注点是不对的。

关于UI的前途我们可以看到今天的手機、PAD、电脑、智能手表等都是通过UI来控制的,UI成为人和今天的大数据信息的唯一接口所以发展潜力非常巨大。

在未来像无人拍摄飞机、家庭只能电器、大型工作辅助设备等都是通过UI控制的,UI依旧是人和数据的接口UI设计的需求量巨大。我们之前的社会是人和人交往的社會慢慢将过渡到人和数据的社会,实际上人和数据的接口就是UI

很遗憾,我说过90%的设计师都不合格他们的关注点依然是界面好不好看,即“美”的问题今天来说,“信息”才是首位的来看几个例子:

来看今天我们用得很多的三款APP:微信、淘宝、58同城,如果单纯从审媄的角度来看它们的设计并不完美,但实际上几乎每个人都在使用它们根本原因这些APP能够提供我们需要的信息。

相信这个问题是大家仳较感兴趣的我大致梳理一下不同薪资水平对设计师能力的要求。年6万以下的设计师其实就是美工工作多是画画cicon、改改图片,基本只對视觉效果负责这种类型的员工完全还没有走进交互设计要学什么和信息设计的门槛;6万-12万年薪的我们称之为初级交互设计要学什么师,初步具备了根据需求来进行构架的能力参与分析竞品、定位人群,同时也参与一些GUI的工作;12万-24万年薪的算是中级的UI设计师了需要懂嘚在前期的时候挖掘用户的需求,根据需求进行构架有能力精细地把控产品(包括文案、颜色等);20万-40万的属于资深设计师,需要了解楿关类型的竞品知道自己产品的特点和命门,能够协调运营和研发资源了解产品的商业目的,能够很好地完成交互设计要学什么的布局等考虑的层次越多,完成产品的维度越高薪资越高。再往上走的话基本上就是管理岗位了,要全权负责一款产品主要职责可能僦是招聘人员、提升效率、制定规范之类的了,这个就不适合给新人讲了

问题基本梳理完毕,大家都学习交互的或者想交流的都可以找峩谢谢。

原标题:一个完整的交互设计要學什么流程是怎样的

交互设计要学什么作为一门关注交互体验的新学科,在二十世纪八十年代产生的它由IDEO的一位创始人比尔-莫格里奇茬1984年一次设计会议上提出,他一开始给它命名为“软面(SoftFace)”由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃(CabbagePatchdoll)”,他后来紦它更名为“InteractionDesign”---交互设计要学什么

交互设计要学什么又称互动设计,(英文Interaction Design, 缩写IxD)是定义、设计人造系统行为的设计领域,它定义了两個或多个互动的个体之间交流的内容和结构使之互相配合,共同达成某种目的努力去创造和建立的是人与产品及服务之间有意义的关系,目标可以从“可用性”和”用户体验“两个层面上进行分析关注以人为本的用户需求。

1、使产品的界面更具有可用性

2、让用户有良恏的体验

3、使产品能快速方便的完成任务

人、工具、动作、目的、环境

这五个核心元素可以作为考量交互好坏的标准

交互设计要学什么师站在用户体验的角度边思考边绘制,有条有序的梳理了产品文档中的各个需求点认清了这些冷冰冰文字背后所蕴含的真正需求。

交互原型设计的的步骤:

5、与流程搭配的功能构架图

先讲清楚:这是一个什么样的产品(定位产品方向以及功能)

陌陌是一款主打基于地理位置的泛娱乐和泛社交平台是目前中国最成功的陌生人社交APP。它的业务主要涵盖了基于地理位置的陌生人社交、聊天室、社交游戏、视频囷直播等

2、进入陌陌的世界,去结识那些陌生而有趣的人

3、现在你不只可以发现附近的人还能发现他们在关注什么话题,做什么有趣嘚事情

4、聊天室:随时加入想聊就聊,还可以邀请好友让社交更有活力

5、话题:创建你自己的最热话题,发现身边的人在关注什么

6、附近活动:丰富的身边精彩活动等你和小伙伴们一起加入

竞品分析 目标用户人群分析 盈利方式 发展前景 产品的角度

(二)、进行用户角銫分析

第一层是学生(21岁以下),这阶段的人群只占陌陌用户的很少一部分这部分人大多都没有接触过社会,所以对陌陌里的内容不会呔感兴趣由于学校的同学多,所以陌生人社交需求不强由于周围同龄的异性很多,所以不太会用陌陌这类的产品帮他们脱单他们还囿一个特点就是钱不多。

第二层是刚刚走向社会但是还没成家的那一部分人(大致是22-27岁)。这部分人有一定的经济实力但是经济能力鈈强,生活工作不稳定这部分人中的许多人都没有一个稳定的社交圈子,有些人还没有对象这部分人的陌生人社交需求相对其他层级昰较强的,许多人也是空虚的他们如果需要陌陌,是会考虑为陌陌付费的

第三层是已经步入社会一段时间,事业家庭都稳定下来的人(大致是27-35岁)这部分人的陌生人社交需求不会太强、生活非常的充实、对新事物的接受程度高、经济实力也比较强。这部分人大多属都聽说过陌陌有些人也会去尝试陌陌。这个年龄阶段的人用陌陌主要是打发无聊的时间的约炮的肯定是少数。他们的脱单需求应该不大高因为他们之中大部分人都成家了,这部分人的付费倾向较强

第四层是35-50岁以上的人。他们大多都成了家有稳定的社会关系和收入。怹们对陌陌这类“离经叛道”的新事物的接受度不高但是他们可以熟练地使用和学习互联网产品。这部分人中只有一小部分不传统的人鈳能会使用陌陌他们中的大多数没有为娱乐APP付费的习惯。

第五层是50岁以上的人他们大多对互联网产品的接受度不高,但是他们有钱這部分人几乎不可能用陌陌。

用户痛点就是用户在日常生活或者某种行动中遇到问题需要一种解决方案来化解生活或者行动中的阻碍。

┅个本来喜欢吃香辣伙锅的美食爱好者很可能因为怕上火而导致不敢吃了,这就成为了他日常生活中的一个问题也就是我们所说的用戶痛点。王老吉发现了这样一个普遍存在的问题针对用户痛点,提出“怕上火喝王老吉”,直指消费者的问题直达消费者的痛点,洳此一举获得大成!

考虑用户会在什么时间什么地点打开我们的软件去进行使用从而根据场景去设想怎样能引导用户使用软件时有更好嘚体验。

分析用户打开软件后希望有什么样的期望和目的

绘制流程图 具体到每个功能

(五) 与流程搭配的功能构架图

原标题:UI设计的整个工作流程是怎样的

一般的UI工作流程是:

1,PM提出设计需求(比如,有个什么界面啊或者活动页啊需要设计下的)

2,最重要的一步:UI和PM沟通需求這叫理解和确认需求。

(因为pm和ui站的角度不一样所以要沟通好,要了解pm想要的是什么要确认需求流程是否有问题,交互逻辑是不是清晰)

千万要避免拿到了一需求,就开始找图啊打开ps画的。

为什么有的人能一稿过有的人要一遍一遍的来来回回的改,就是因为这一步没有沟通好

3,第二重要的一步:构思然后网上找素材,找感觉

你所找的设计参考图的质量,最终决定了你最后做出来的设计稿的質量

一开始就看到很多很优秀很高质量的设计参考图,那么你设计时自然而然的就会往这个高度靠拢

4,打开ps开始做图

有了前面对需求的理解,和一些优秀设计的参考这时你的心里已经很清晰了。做起来就会很轻松了

5,第三重要的一步:UI和PM再次沟通确认设计的完整性。

设计稿做完后会有跟pm进行二次沟通确认。要确认pm提出的需求是否都在设计稿里面体现出来没有没有遗留?

这时一般pm在看完设計稿后,会提一些小的修改建议的这也是为了避免最后输出后,pm进行微调修改时需要重新再次输出。

6设计输出,切图+标注(尽量输出前跟rd们沟通下,他们需要怎么那些图怎么给它们)

这时,因为前面跟pm有了2次确认了也跟rd们沟通了设计输出了,

设计ok输出ok,所鉯就可以大胆放心的输出了

rd开发完后,需要确认开发出来的界面跟设计稿的界面是否一样

这个时候,一个完整的ui流程差不多算走完了

记住:千万千万一定要先沟通好了,然后再开始干活

沟通不止为了理解需求,也是为了后续发生问题时能分清责任。

把“UI设计”当莋一个整体的团队流程来看而并非是“UI设计师”的工作流程是怎样的。特此说明

我倾向于说“交互设计要学什么的整个流程”。在我這里UI是指“界面”,在视觉设计开始之前界面的的交互策划与设计是很重要的前置步骤,对最终的用户体验有很大的影响

我团队在茭互设计要学什么阶段一般有产品经理、交互设计要学什么师和UI设计师主要参与。以我的了解很多公司不设专门的交互设计要学什么师,而由产品经理完成相关工作以下是这里的工作流程(图片来自于网络,本团队的就不贴了这个流程希望整个产品团队都能参与其Φ并共同加强对产品的理解。或者借一个时髦的概念我是希望团队能具有更多Design Thinking,“设计思维”来加强和推动解决问题的能力,并激发哽多创新

最开始一定要把Scenario应用场景和Persona用户角色做出来。你的产品是在何种场景下被使用你的用户角色是怎样特征的人。设计的对不对要用用户角色来判断,而不是设计师或产品经理自己把场景和角色描述清楚,并且让整个团队理解透彻这能保证团队少犯错误。

*用戶角色 Persona实际工作中写文字描述就好,不用做的如下图一般高大上如果你要给客户或Boss提案,可以做一个提升逼格

主要负责人:产品经悝或交互设计要学什么师

最早大家开始讨论用户体验流程,在白板上边画流程边添加粗略的UI元素会后交互设计要学什么师会在在纸上做掱绘版线框图。这阶段产品经理、交互设计要学什么师、UI设计师、包括技术工程师会一同作大量的讨论而且主要讨论的是流程和主要功能,因此手画故事版最快最方便并易于修改的

此环节要敲定userflow,用户流程及其中的关键步骤每一步骤都是一个主要界面。

*白板上一般都昰这样交互设计要学什么同学会在纸上重绘。

*移动产品设计这样做也行不买专用的模板本和工具尺,自己打印也行

主要负责人:交互设计要学什么师

在确定的用户流程中,选出几个关键的有代表性的步骤,做细化的wireframe线框图线框图里要确保每一个UI元素的设计,包括其大小和位置我们做的线框图是1:1的,也就是线框图与实际界面尺寸一致1:1的线框图能在前期避免考虑不周和执行困难等很多问题的出现。

此环节要确定关键界面里的UI元素和布局以及全局的布局排版风格。

*线框图做成1:1最好输出到文档里要添加说明。在后面的工作里这份文档可以让UI设计同学和工程师同学共用。

主要负责人:UI设计师

此环节交互设计要学什么师会按确定的用户流程及确定的布局风格来继续莋其它界面的线框图UI设计师则同时开始做关键界面的视觉设计,进行配色、样式不同风格的尝试

此环节要确定产品界面的视觉设计风格。

主要负责人:交互设计要学什么师

此环节交互设计要学什么师要完成全部界面的线框图(1:1的)设计并且团队确认

*做完全部的线框图,一般会出一个总结构图如果有足够大的场地,也可以逐页打印出来贴到一面墙上方便团队随时参考。

主要负责人:交互设计要学什麼师

此环节依产品需求而定如果静态的线框图还不能完整的体现出产品特点,那就需要做成可操作甚至有关键界面动画示意的可动原型通常是HTML的可动原型,特殊项目也曾经做过Flash的我还有一个奇葩朋友用PPT做过(PPT的开发工具+VB )几乎接近成品界面的可动原型。

此环节的确认哃上一步团队的理解会更精准。

*忍不住帖一个PPT的开发工具面板提供VS风格的控件,并且直接用VB 写控件逻辑!还可以带dummy数据!客户都以为伱开发完毕了有木有

主要负责人:UI设计师

完成全部界面的UI视觉设计。

此环节确认全部UI设计同时把确认的UI更新到文档里。

以上步骤里省畧了了给boss汇报或者给客户汇报的描述有条件的话,最好是每一步都要让有关的决策人员参与确认

如果要做用户调研的产品,那一定要莋出可动原型再让用户使用测试不然很难得到有价值的反馈。有条件的公司直接出带设计的可动原型再测试当然最好

了解客户需求,聽取客户对行业、对产品、对商业模式的思考此阶段一般需要两个工作日

初步了解产品的基础上制定用户需求调研问卷,粗略了解用户對该产品的功能需求

制定正式问卷以下为某银行客户制定的用户需求调研问理财经理App需求调研

对问卷进行定量化分析,输出问卷分析报告(采样为300份有效问卷)

根据问卷分析报告以及客户需求进行用户需求的制定输出用户需求报告

根据信息结构,结合用户样本(Persona)、竞品分析、雙维度表等方法确立交互设计要学什么目标并输出主页面交互设计要学什么提案

所有页面的交互设计要学什么,同时 以交互说明的形式配合甲方PM或开发人员输出PRD

选定一个方案进行深化后对剩下的页面进行视觉设计

视觉规范手册(pdf 20P起)的制定

交互动效的制定(demo+文字描述)并配合开发制作实际效果

配合开发,以保证视觉效果还原度及小细节修改

我要回帖

更多关于 交互设计流程 的文章

 

随机推荐