分享

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

 pgl147258 2014-10-11

JJ Ying的回答(43票)】:

我个人的理解是「交互设计」负责把东西做得「好用」,「视觉设计」负责在好用的基础上把东西做得「好看」,两者合起来就是界面设计。当然有时候交互和视觉的职责不只单纯地在软件界面上。

【JimSoup的回答(54票)】:

.

怒答。

我回答前大概知道很多人会把交互设计定义为使产品更好用,而视觉设计则是美化产品。

说实话,我并不完全接受这种说法。

如果交互定义是如此广泛,那么交互就显得没有深度。毕竟绝大多数互联网岗位都是为了让产品更加好用。而且视觉设计也并不等于美工。

.

这正是因为这种想法,在设计流程中,导致工作定义模糊,交互设计和产品经常纠结在一起,进行一轮轮的PK,而视觉设计最后也被当成美工来输出使用。

我之前在知乎提出了一个问题:交互设计师和视觉设计师是否应该是同一个职位?

实际上答案的“是”或“否”并不重要。重要的是作为交互或视觉的其中一员,如何看待彼此的工作。有趣的是,你会看到屁股决定脑袋的回答。

题外话是,这种不理解其他同事的工作性质的想法,在很多设计师中也有。设计师也会说开发只是一个程序员罢了,他不懂用户体验。但是载入速度快,缓冲时间短,没有卡顿,这些会不会为用户体验加分?

简单思考一下,易用性和美观难道可以分开么?难道一个应用操作流程非常顺畅,这个不会让这个应用变得更加楚楚动人?难道一个各种控件视觉效果出众,位置排版整齐的软件,不会显得更好用?

不论是产品,设计还是开发(开发许多地方也是为了用户体验,不然前端不用那么累)都是殊途同归——为了更好的用户体验。我们很难说一个好的交互,差的视觉可以出来一个产品,结果用户说交互是非常棒的。同理,一个差的交互,好的视觉,出来的产品视觉效果也不会太好。

所以,不用把交互和视觉的职责目的分得太开,他们只是使用的工具不同而已

交互设计师需要用非常清晰和流畅的操作和逻辑框架来提高用户体验,这些交互流程更多是隐藏在操作过程中,有各种逻辑关系的层次。而视觉设计师使用让我们眼睛直接感受到的视觉效果来传达一个产品的意图,更加浮在表层上。

可能这些说法并不是非常具象。我一直以来比较赞同的是建筑设计行业的一套说法——建筑设计(界面设计)、交互设计师(结构师)、视觉设计师(建筑/外观设计师)。

首先接到建筑需求后,经理(产品)会评估整个建造过程并统筹安排,他应该是最了解整个工程项目的进度和细节的,最具有大局观的人。

在建筑设计的过程中,结构师(交互设计师)会设计整座建筑的结构——楼层得有多少层,占地面积多少,每层多少户,什么结构更加稳妥,楼梯和各种管道如何铺设。居客很难看到结构师做了什么,但他们的确很重要。

而建筑/外观设计师(视觉设计师)则会设计整座建筑的外观,甚至细节到每户中房间和大厅的布局和装修。

这些都是为了让居住这里的人住得更舒服。你并没办法说哪个更重要,只能说缺谁都不行。

如果说一个产品就好像一个人一样,那么交互为其骨骼,视觉则是其肌肤。开发为其肌肉和器官,产品为其大脑,而运营为其血液。

所以,设计师的同行,不要只是认为交互只是把操作流程做得流畅,视觉也肯定不是为了把界面做得更漂亮。这些都不是目的。

相比开发来说,设计能为产品解决的问题的确不多。但是,设计可以做到——让用户享受问题

【张书泓的回答(17票)】:

先区分一下“界面”、“视觉”、“交互”这三个词。

“界面”是机器中的一部分——通过这个部分,用户可以了解机器的状态、对机器进行控制、并获取反馈。“界面”不仅包括图形界面,也包括实体界面。

“视觉”是一种人的感官类型——通过这一个感官,用户可以了解信息,感知物体,被激发情绪。“视觉”不仅包括美观,更包括引导。

“交互”是一种行为类别——在这种行为类别中,用户会发出自己的行为请求,接受者随之给予用户反馈和后续行为的引导。

本质上来讲这三者没有比较的意义,因为它们是不同视角下的概念。

如果非要画个范围,大致会是这样:

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

它们有大量不重叠部分。界面设计还包括很多技术层面的东西,视觉设计包括大量感官传达的东西,交互设计也有一些其他的纯行为流程类的东西。

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

它们有大量不重叠部分。界面设计还包括很多技术层面的东西,视觉设计包括大量感官传达的东西,交互设计也有一些其他的纯行为流程类的东西。

-------------------------以上只是广义上的看法------------------------------------------------------------

现实工作中一般不会牵涉这么广的看法,互联网业界对着三者的理解是窄化了的概念。

如果你到互联网公司求职,职能上可能会这样划分:

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

千万注意,这只是职能上这么划分。

部分职能所做的事也并不是和广义上一致的。

例如一般不存在界面设计这个层面的职位。

例如界面布局也可能划到交互设计范畴。

例如界面的跳转引导也可能归到视觉设计。

总之,这只是职能上这么划分。

如果你希望成为一个合格的设计师,对设计的理解和能力的千万别受这个边界限制。

一个合格的设计师“最起码”应该这样理解:

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

要做出好东西,理念和能力都应尽量融通,走得远一点,了解得广一点更好。

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

要做出好东西,理念和能力都应尽量融通,走得远一点,了解得广一点更好。

【Tori Chao的回答(10票)】:

本人是在北美某艺术大学准备进入大二的设计系学生.对于这个问题我本人也有疑惑.在此,我就以我们学校设计系的课程为例来探讨一下.(先强调,我自己也还未有准确的答案.)

我们学校的设计系一共分为3个分支,以下是这三个分支的详细课表.

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

仔细对比课表会发现什么呢?

Interaciton design的课程,基本上可以说是前两者的结合,工设占的比例大一些.

communication这个分支在我们学校基本上是默认为graphic design,但据说也需要学一些coding.工设就是传统的工设.

因此我可以得出的结论是:交互属于一个新的设计分支,现在来看,交互需要综合工设和平面两方面的基础知识,外加适应发展越来越快的互联网和移动端设计需求.

回到问题上来说,界面设计要看怎么理解.这个词组,我看到的第一反应是视觉性的设计,因此可以归入视觉设计的分类.但转念一向,界面的易用性又要归于交互设计的范畴.所以我认为答案有两个.

我记得上学期final project做的那个app,我基本上就是构思界面,流程,同组法国妹子ps技术杠杠的,她负责搞图标和效果,然后时不时对我的流程提出一点意见,那合作真是水乳交融..(大雾

总之我个人的期望,以后和一个美术功底扎实的做视觉的妹子合作,一定很不错.

【林朝辉的回答(13票)】:

这样的问题,我认为还是用岗位职责来回答你比较容易理解:

1、界面设计和视觉设计都是美术类的岗位,但工作分工不同:

界面设计:UI(User-Interface Design),用户界面设计,例如软件、网站、APP等;

视觉设计:Visual Design,更多偏向品牌、形象设计,例如广告、海报、周边等;

2、交互设计(Interaction Design)则是对人机交互界面、反馈、流程的设计,与界面设计配合;

3、如果以一个手机APP项目为例,

交互设计让产品更好用,

界面设计让产品更好看,

视觉设计让产品更好卖(用户更想用或买)。

【杨颜的回答(2票)】:

交互设计 + 视觉设计 = 界面设计

交互设计内容:1. 功能,2. 流程,3. 逻辑

视觉设计内容:1. 形状,2. 色彩,3. 质感

两者重叠的内容:布局(元素排版)

这点是我和 JJ Ying 理解不太一样的地方,因为视觉设计也会定义布局,所以也要对易用性负责

【邓毅的回答(1票)】:

你可以问别人贝克汉姆是踢中场的还是踢前锋的,但你不可能问他是踢中场的还是踢足球的---足球里包含了中场和前锋。一样的道理,界面设计是个笼统的说法,它包含了视觉和交互。

关于它们之间的关系,看到很多知友都有精彩解答,我不重复了。

虽不谈国事,但却想聊聊风月,主要是因为看到了某些知友的观点吧。

有的朋友崇尚不区分视觉与交互,好像白鸦前辈也是这么提的,在这里鄙人真不是有意想挑战他们的思想,只是我有一些自己的理解想说说。

的确有的工作相互之间交集很大,大到在外人看来(尤其是外行)甚至可以互相搞定。就好比踢足球,在我这个门外汉看来下底传中都是那一脚,按理来说场上除了守门员大家都是用脚踢球的,都应该能传好,但现实情况就是中场、后卫、前锋传出来的效果不一样。

为什么效果不一样?为什么球场上要分前锋、中场、后卫、守门员?我们是不是要好好想想?

说到底还是因为术业有专攻,这是现实,也是需要。每一种不同的岗位都有其差异,差异或大或小,但是只要有差异就一定会造就出不同的专攻,而且这种专攻会随着时间的推移慢慢深化,慢慢强化。

一款产品需要的是美与舒适。让产品美,让产品舒适的方法在根上都是源自于心理学,但是向下分支不同侧重点有变化。

图有抽具,色分冷暖,情在喜厌,层带深浅。如何让产品看起来很美这绝对是一门很深奥的学问,而且这门技艺就算是你完全掌握了,如果不能保证持续不断的强化它,它仍然会在某一天离你而去。你花10年时间成了一位视觉设计大师,但从此放下,再花10年时间去研究交互,其结果是你成了交互大师,但视觉设计能力也被远远的甩在了后面。

同样的道理,交互设计也是一样,犹抱琵琶半掩面才会更让人想去一窥桃花真容颜,这种对人性的理解源需要的是不断地修行,而让产品使用起来行云流水所需要的功力又岂在一朝一夕?你敢分心它用吗?

中场能传出准确的落点就是好中场,前锋能把皮球射到门框以内就是好前锋,视觉搞的好看就是好视觉,交互搞的好用就是好交互,这都需要在自己的业务内持续不断地修行与强化。

这世界不需要“差不多”先生,也很难造就“万金油”先生,物竞天择适者生存,自然法则很残酷。

【梁柱华的回答(1票)】:

界面设计=视觉设计(好看吗?看得懂吗?)+交互设计(怎么用?好用吗?)

看了楼上某同学的怒答,补充一点注意视觉和交互是整体性工作,只是拆分给两个职能来做而已,分工后要注意两者的交叉协作。

【diecxters的回答(0票)】:

交互和视觉是一个体系下的,界面设计是另一个层面,其中可以包括视觉于交互。

在流程中交互是前置于视觉设计的,因为离产品核心比较近,这也是总在说交互和产品既生于何生亮。

在交互完成了架构、流程、细节等设计工作后,就可以移交视觉设计开始着手渲染了,这个时候容易出问题,理念没有传达清楚时视觉会找不到方向和重点,产出的效果会发现跟交互想体现出的各项用户感知级别不一样

我觉得交互和视觉是情侣一样的关系,一定要多沟通,让对方清楚表自己的想法,不然会喧宾夺主、自相残杀

【小九的回答(0票)】:

给你拓展一下,把一个产品当一个人来说的话:

产品需求——这个人的性格;

界面设计——这个人的脸是方是圆,身材是胖是瘦,穿的是裤子还是裙子;

视觉设计——这个人的肤色、发色、眼睛颜色,衣服的颜色、样式;

交互设计——这个人的言行举止;

开发——这个人的骨架和血肉。

【饶东的回答(0票)】:

个人理解:界面设计要表现出产品的功能,而视觉设计应该好看且用户能看得懂,交互设计则使用户的体验统一、流畅。

【安永生的回答(0票)】:

如果要一个顺序的话,我觉得是交互设计—>界面设计---->视觉设计,产品有了功能架构之后,交互设计师需要把他们串起来,什么功能放哪里,怎么样的流程,之后做界面设计,每个页面,每个元素怎么排布,放在哪里比较合适,他们的大小,位置等,然后就是视觉设计,给所有界面上色,美化。当然这是理想状态下的流程,人手不够的小公司可能是一个人全干完了。

【ABEL苏的回答(0票)】:

尝试一下,举例描述,肯定有不准确的地方,请不吝拍砖:

一辆车。

视觉设计,就是你看到的所有外观上的设计。

界面设计,是车内操作面板的设计。

交互设计,是车内所有操作按钮的分布摆放和触发方式等设计。

【千秋的回答(0票)】:

用户界面设计在工作流程上分为结构设计、交互设计、视觉设计三个部分。

【廖兆龙的回答(0票)】:

我的理解是:

什么是交互设计?

交互设计的对象是行为,目的是引导协助用户完成一个事件或任务。在特定的环境下,设计师通过对用户进行研究,综合考虑实现的方式和途径,完成对用户行为有逻辑的设计。

什么是视觉设计?

视觉设计的对象是产品的表现形式,目的是提供愉悦的视觉感受,吸引用户关注。设计师通过视觉元素的运用,打造出一套视觉语言,让用户获得更加愉悦的使用体验。

什么是界面设计?

界面设计是一个交叉领域的产物。它背后需要交互设计的支持,来构建完善的逻辑架构和信息架构,保证产品的可用性。在前端,它需要视觉设计的支持,为用户提供愉悦的和一致的视觉感受。可以说界面设计是交互设计和视觉设计最终落地的成果。

在实际工作中,一个界面的设计一般是先由交互设计完成原型的设计,再交由视觉设计师完成高保真设计。

【谢金福的回答(0票)】:

怒答!理由是看到那个晦涩难懂的比喻回答尽然跑到了一楼!@Na Wong

我用通俗的比喻来。请看图:

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

我就不说是什么菜什么雕了。你知道这是一道菜就行。

做产品就像做一道菜。

交互设计是构思一个菜谱,选什么颜色、材质的主料,搭配什么样的佐料啊,打扮成什么形状样子啊,希望发出什么香味啊等等这些是交互设计师想的;

视觉设计师呢,就是大致遵守交互设计师的意愿来摆放、雕刻菜的形状,可以根据自己的想法进行最理想的美化,让菜更美观;

程序员呢,就是下锅煮菜的啦,负责把菜能成能吃的。

至于题主说的界面设计,相对来说,他应该是个行为词,而不是一个职位名词,很少有叫做界面设计师的,一般都是交互设计师和视觉设计师共同完成,很多情况下,他们的产出物就是若干个界面。当然,这并非说交互或者视觉仅仅是做软件界面的哈,国外的交互设计师在工业设计上也很流行。

【Wilson Xu的回答(0票)】:

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

用户体验的要素 (豆瓣) by Jesse James Garrett

【杨迪的回答(0票)】:

「界面设计」就是你的人机界面由哪些元素构成。即「设计用户能做哪些操作及获得怎样的反馈」。举例,洗衣机的面板上要安装哪些元件。

「交互设计」是设计系统如何响应用户的任意可能的输入。通常可以由一系列的「状态转移图」来描述。一般界面设计和交互设计同时进行,并不会严格分离。举例,洗衣机的操作说明书。

「视觉设计」指具体的系统画面的设计,必须以指定的软件和硬件环境为基础。范围小的,只需指定字体、字号、配色方案等等。范围大的,比如游戏,那就可能要决定到每个像素。举例,不同牌子的洗衣机,哪怕功能完全一样,面板也不同。

【柳三的回答(0票)】:

每个角色的定义其实是很清楚的,这里不再赘述。但是在实际工作中,不同角色之前会有重叠、甚至冲突。以下是我理解的。

1. 交互设计

Interactive Design (IxD)。IxD在产品经理的设计原型基础上设计交互细节(一般和产品经理一起完成,但小的团队中,一般就有产品经理代劳了),完成交互原型。

2. 视觉设计

Visual Communication Design。视觉设计更多偏向品牌、形象设计。对于大的团队,除视觉设计外,还会有User Interface Design(界面美工设计,俗称美工、UI),其实都可以成为Graphic Design。在小的团队中,并不区分视觉设计和美工设计。视觉设计完成整个界面设计风格定型、并提供主要几个界面的视觉效果图。继续细化下去,由UI(美工)在视觉效果图、交互原型基础上,完成剩余界面的效果图。

3. 前端开发

通常指在互联网产品设计中,在UI输出的效果图基础上,输出HTML+CSS界面。这部分工作不涉及业务处理、不用写js,有的团队就是由UI兼做,也有的由开发完成归属开发部。

界面设计:

以上的视觉设计(含UI)+交互设计+前端开发统称为界面设计,在言必称用户体验、人人都是产品经理时代,大家更多用 User Experience Design(UED 用户体验设计)来称呼。

【李宁的回答(0票)】:

个人觉得这3个概念还是有区别的:)

交互设计,主要指创造,人与产品、系统或者服务之间的会话方式。

界面设计,主要关注在对于一个界面用什么颜色,控件怎么摆放,一些比较具体和细节的东西。通常在交互设计方式确定后,才需要考虑界面设计

视觉设计,更专指针对视觉感官上的设计。(所以,如果是针对盲人的交互设计,就不存在视觉设计)

【王莹的回答(0票)】:

写回答…界面设计:界面设计从整体布局和视觉效果、文字使用、图像使用、色彩使用、操作方便性和超链接等六方面着手。

视觉设计:视觉设计的趋势是以人为本,关注人的感受和情感。

交互设计:交互设计在使用网站、软件、消费产品等各种服务的时候,使用过程中的感觉就是一种交互体验。

【简生的回答(0票)】:

关于题目中的疑问,我觉得@张书泓 已经回答得很系统很规范了。

所以我就纯粹东扯西扯一下吧。

要理解「视觉」和「交互」,实体产品会更加直观。

如下图:

第一眼看过去,眼睛充分感受到真皮坐垫的高雅气质!

坐下之后,屁股也完全体会到真皮坐垫的舒适感!

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

对于PC端的互联网产品,一般情况下很难划分「视觉」和「交互」这两样东西。

大多数互联网产品的操作,都是通过鼠标来完成。

而鼠标操作中,绝大部分都是「点击」操作,当然还有一些类似「拖放」的操作,但比例远低于「点击」。

所以,对于「触感交互」来说,鼠标的质量已经决定了绝大部分的「触感交互」体验。

回到互联网产品,它带给用户的交互,无非就是脑补!

为什么是脑补?

因为互联网产品里面,绝大多数的「交互反馈」都是「视觉反馈」,偶尔也会用到「音频反馈」。但毫无疑问,视觉所占的比重是最大的。

例如:点击一个按钮,按钮的阴影(视觉)有没有及时出现(交互)。如果超出了有效脑补时间才呈现,那体验就十分糟糕了。

上面的设计,你们说怎么划分功劳?

阴影(视觉)做得不好,交互就差了。

响应(开发)不够快,交互就差了。

额,这样一看,貌似交互设计师什么都没做。好吧,先把发现问题的功劳归他。

当然,这个例子属于操作细节上的交互。假如电脑内存吃紧导致卡机,这时用户体验就会很差,也就是指操作细节的交互很糟糕。

对于智能手机的产品,交互点就丰富多了。

看看下面这个经典的例子——下拉刷新:

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

如果单看这张图,交互重点依然是视觉。

「界面设计」「视觉设计」「交互设计」之间的关系是什么?如何理解?

如果单看这张图,交互重点依然是视觉。

但这是一个爱疯上的App,可以加上震动来分担视觉交互上的压力,让用户的触觉是多维度的。

而整个操作中,手指的摆放和滑动方向是否舒适,也占了交互体验的很大比例。

我觉得,交互设计师更大的价值是在于业务流程的打磨和剖析。

把一个需要10步完成的操作,压缩到5步去完成。又或者是,减少每一步操作的消耗时间。

毫无疑问,这些也是脑补行为。假如你没有试过10步才能完成的操作,你就不会觉得5步的操作是多么的美好。

然而这些,往往才是一个产品的竞争力。

对于一批核心功能相同的产品。

精美的视觉设计,决定了尝鲜用户的数量。

畅快的视觉交互,决定了活跃用户的数量。

良好的业务流程,才能让用户形成依赖,增加了用户的更换产品的成本,形成一定的竞争力。

是不是想知道,什么才是最核心的竞争力呢?

答案在本文最后放出。XD

说到这里,你是不是觉得交互设计师牛逼哄哄的,立马想卷起袖子找这样的工作。

哎,孩子!还是洗洗睡吧。

业务流程的最大瓶颈,几乎都是技术瓶颈。

在没有Flash插件的年代,靠浏览器提供的API想一次上传多张图片?工程师只会对你:呵呵...

所以,那些真正具有颠覆性的交互操作,往往都是工程师驱动的。

看看Google X的那些项目就知道。当中的自动驾车系统,对于有视觉障碍的用户,就是一级棒的交互体验。

并没有黑交互设计师的意思。

但说句老实话,绝大多数公司,哪有分工分得那么仔细的。

哪怕真的分开了视觉和交互的岗位,保不准哪天缺人手,交互也要做UI。

而且交互设计师这类工种,显然就是需要依赖在分工极度明细的公司之下。

一个理论化的产品开发流程:

> 上厕所闪过一个点子

> 分析调研后写需求分析

> 跟上级汇报获得资源

> 确定主业务逻辑

> 产品原型

> 操作流程优化

> 技术可行性分析

> 视觉设计

> 开发

> 测试

> 发布

> 维护(更新)

最后,

什么才是最核心的竞争力?

免费!

原文地址:http://www.zhihu.com/question/21015732

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多