交互设计心得体会与总结,关于交互设计课程的心得

http://www.itjxue.com  2023-01-21 02:46  来源:未知  点击次数: 

人机交互过程中的感受,500-1000字 用物体实例进行逆的观点的论述,可以加入图片说明

人们期盼着能拥有并使用更为人性化和智能化的计算机。在人机交互中,从人操作计算机,变为计算机辅助人;从人围着计算机转,变为计算机围着人转;计算机从认知型,变为直觉型。显然,为实现这些转变,人机交互中的计算机应具有情感能力。情感计算研究就是试图创建一种能感知、识别和理解人的情感,并能针对人的情感做出智能、灵敏、友好反应的计算系统。

情感——人际通信交流的重要手段

情感被用来表示各种不同的内心体验(如情绪、心境和偏好),情绪被用来表示非常短暂但强烈的内心体验,而心境或状态则被用来描述强度低但持久的内心体验。情感是人与环境之间某种关系的维持或改变,当客观事物或情境与人的需要和愿望符合时会引起人积极肯定的情感,而不符合时则会引起人消极否定的情感。

情感具有三种成分:⑴主观体验,即个体对不同情感状态的自我感受;⑵外部表现,即表情,在情感状态发生时身体各部分的动作量化形式。表情包括面部表情(面部肌肉变化所组成的模式)、姿态表情(身体其他部分的表情动作)和语调表情(言语的声调、节奏、速度等方面的变化);⑶生理唤醒,即情感产生的生理反应,是一种生理的激活水平,具有不同的反应模式。

概括而言,情感的重要作用主要表现在四个方面:情感是人适应生存的心理工具,能激发心理活动和行为的动机,是心理活动的组织者,也是人际通信交流的重要手段。从生物进化的角度我们可以把人的情绪分为基本情绪和复杂情绪。基本情绪是先天的,具有独立的神经生理机制、内部体验和外部表现,以及不同的适应功能。人有五种基本情绪,它们分别是当前目标取得进展时的快乐,自我保护的目标受到威胁时的焦虑,当前目标不能实现时的悲伤,当前目标受挫或遭遇阻碍时的愤怒,以及与味觉(味道)目标相违背的厌恶。而复杂情绪则是由基本情绪的不同组合派生出来的。

情感可以测量应用深远广阔

情感测量包括对情感维度、表情和生理指标三种成分的测量。例如,我们要确定一个人的焦虑水平,可以使用问卷测量其主观感受,通过记录和分析面部肌肉活动测量其面部表情,并用血压计测量血压,对血液样本进行化验,检测血液中肾上腺素水平等。

确定情感维度对情感测量有重要意义,因为只有确定了情感维度,才能对情感体验做出较为准确的评估。情感维度具有两极性,例如,情感的激动性可分为激动和平静两极,激动指的是一种强烈的、外显的情感状态,而平静指的是一种平稳安静的情感状态。心理学的情感维度理论认为,几个维度组成的空间包括了人类所有的情感。但是,情感究竟是二维,三维,还是四维,研究者们并未达成共识。情感的二维理论认为,情感有两个重要维度:⑴愉悦度(也有人提出用趋近-逃避来代替愉悦度);⑵激活度,即与情感状态相联系的机体能量的程度。研究发现,惊反射可用做测量愉悦度的生理指标,而皮肤电反应可用做测量唤醒度的生理指标。

情感是一种内部的主观体验,但总是伴随着某种外部表现,即表情。面部表情、姿态表情、语调表情三种表情被称之为体语,构成了人类的非言语交往方式。面部表情是指通过眼部、颜面和口部肌肉的变化来表现各种情感状态。面部表情不仅是人们常用的较自然的表现情感的方式,也是人们鉴别情感的主要标志。研究表明,人脸的不同部位具有不同的表情作用,例如,眼睛对表达忧伤最重要,口部对表达快乐与厌恶最重要,前额能提供惊奇的信号,而眼睛、嘴和前额等对表达愤怒很重要。使用特定的仪器可以对面部的微小表情变化进行研究,甚至可以区分真笑和假笑:人在真笑时面颊上升,眼周围的肌肉堆起,大脑左半球的电活动增加;而人在假笑时仅有嘴唇的肌肉活动,下颚下垂,大脑左半球的电活动不明显。脸部运动编码系统facs通过不同编码和运动单元的组合,可以在脸部形成复杂的表情变化,其成果已经被应用于人脸表情的自动识别与合成。还有mpeg-4 v2视觉标准,定义了3个重要的参数集,即人脸定义参数、人脸内插变换参数和人脸动画参数,其表情参数具体数值的大小代表人激动的程度,可以组合多种表情以模拟混合表情。目前面部表情的研究侧重于对三维图像的更细致的描述和建模,也注重使用复杂的纹理和较细致的图形变换算法,以达到生动的情感表达效果。

人的姿态即身体表情,一般伴随着交互过程而发生变化,并表达着一些信息。而语调表情是通过语音的高低、强弱、抑扬顿挫来表达说话人的情感。在人际交往中,语音是人们最直接的交流通道。通过语音人很容易就能感受到对方的情感变化,就像“你真行!”这句话,既可以表示赞赏,也同样可以表示讽刺或妒忌。情感语音研究目前主要侧重于情感的声学特征的分析。语音中的情感特征往往通过语音韵律的变化表现出来(如当一个人发怒时,讲话的速率可能变快,音量变大,音调变高等),但也可同时通过一些音素特征(如共振峰、声道截面函数等)表现出来。中国科学院心理研究所、中国科学院自动化研究所、清华大学计算机系等机构都在从事相关研究。

在人机交互研究中已使用过很多种生理指标,例如,皮质醇水平、心率、血压、呼吸、皮肤电活动、掌汗、瞳孔直径、事件相关电位、脑电eeg等。生理指标的记录需要特定的设备和技术,在进行测量时,研究者有时很难分离各种混淆因素对所记录的生理指标的影响。

情境化是人机交互研究中的新热点

情感计算研究的内容包括三维空间中动态情感信息的实时获取与建模,基于多模态和动态时序特征的情感识别与理解,及其信息融合的理论与方法,情感的自动生成理论及面向多模态的情感表达,以及基于生理和行为特征的大规模动态情感数据资源库的建立等。

欧洲和美国的各大信息技术实验室正加紧进行情感计算系统的研究。剑桥大学、麻省理工学院、飞利浦公司等通过实施“环境智能”、“环境识别”、“智能家庭”等科研项目来开辟这一领域。例如,麻省理工学院媒体实验室的情感计算小组研制的情感计算系统,通过记录人面部表情的摄像机和连接在人身体上的生物传感器来收集数据,然后由一个“情感助理”来调节程序以识别人的情感。如果你对电视讲座的一段内容表现出困惑,情感助理会重放该片段或者给予解释。麻省理工学院“氧工程”的研究人员和比利时imec的一个工作小组认为,开发出一种整合各种应用技术的“瑞士军刀”可能是提供移动情感计算服务的关键。而目前国内的情感计算研究重点在于,通过各种传感器获取由人的情感所引起的生理及行为特征信号,建立“情感模型”,从而创建个人情感计算系统。研究内容主要包括脸部表情处理、情感计算建模方法、情感语音处理、姿态处理、情感分析、自然人机界面、情感机器人等。

情境化是人机交互研究中的新热点。自然和谐的智能化的人机界面的沟通能力特征包括:⑴自然沟通:能看,能听,能说,能触摸;⑵主动沟通:有预期,会提问,并及时调整;⑶有效沟通:对情境的变化敏感,理解用户的情绪和意图,对不同用户、不同环境、不同任务给予不同反馈和支持。而实现这些特征在很大程度上依赖于心理科学和认知科学对人的智能和情感研究所取得的新进展。我们需要知道人是如何感知环境的,人会产生什么样的情感和意图,人如何做出恰当的反应,从而帮助计算机正确感知环境,理解用户的情感和意图,并做出合适反应。因此,人机界面的“智能”不仅应有高的认知智力,也应有高的情绪智力,从而有效地解决人机交互中的情境感知问题、情感与意图的产生与理解问题,以及反应应对问题。

显然,情感交流是一个复杂的过程,不仅受时间、地点、环境、人物对象和经历的影响,而且有表情、语言、动作或身体的接触。在人机交互中,计算机需要捕捉关键信息,觉察人的情感变化,形成预期,进行调整,并做出反应。例如,通过对不同类型的用户建模(例如,操作方式、表情特点、态度喜好、认知风格、知识背景等),以识别用户的情感状态,利用有效的线索选择合适的用户模型(例如,根据可能的用户模型主动提供相应有效信息的预期),并以适合当前类型用户的方式呈现信息(例如,呈现方式、操作方式、与知识背景有关的决策支持等);在对当前的操作做出即时反馈的同时,还要对情感变化背后的意图形成新的预期,并激活相应的数据库,及时主动地提供用户需要的新信息。

电脑能像人一样具有情感

计算智能领域“百花齐放”,进化计算、遗传算法、混沌理论、粗集理论、情感计算、免疫计算等研究方兴未艾。不少人都翘首以盼,计算机会变得越来越聪明,在不久的将来,电脑就能像人一样具有情感,与人进行自然、亲切和生动的智能交互。

情感计算是一个高度综合化的技术领域。通过计算科学与心理科学、认知科学的结合,研究人与人交互、人与计算机交互过程中的情感特点,设计具有情感反馈的人机交互环境,将有可能实现人与计算机的情感交互。迄今为止,有关研究已在人脸表情、姿态分析、语音的情感识别和表达方面取得了一定的进展。情感计算研究将不断加深对人的情感状态和机制的理解,并提高人机界面的和谐性,即提高计算机感知情境、理解人的情感和意图并做出适当反应的能力。

目前情感计算研究面临的挑战仍是多方面的:⑴情感信息的获取与建模,例如,细致和准确的情感信息获取、描述及参数化建模,海量的情感数据资源库,多特征融合的情感计算理论模型;⑵情感识别与理解,例如,多模态的情感识别和理解;⑶情感表达,例如,多模态的情感表达(图像、语音、生理特征等),自然场景对生理和行为特征的影响;⑷自然和谐的人性化和智能化的人机交互的实现,例如,情感计算系统需要将大量广泛分布的数据整合,然后再以个性化的方式呈现给每个用户。

情感计算有广泛的应用前景。计算机通过对人类的情感进行获取、分类、识别和响应,进而帮助使用者获得高效而又亲切的感觉,并有效减轻人们使用电脑的挫败感,甚至帮助人们理解自己和他人的情感世界。计算机的情感化设计能帮助我们增加使用设备的安全性,使经验人性化,使计算机作为媒介进行学习的功能达到最佳化。在信息检索中,通过情感分析的概念解析功能,可以提高智能信息检索的精度和效率。在电子商务领域,在设计购物网站和股票交易网站等时能充分利用人的情感因素的作用,以改变客流量。多模式的情感交互技术能构筑更贴近人们生活的智能空间或虚拟场景,而机器人、智能玩具、游戏等产业则能构筑出更加拟人化的风格和更加逼真的场景。

展望现代科技的潜力,我们预期在未来的世界中将可能会充满运作良好、操作容易、甚至具有情感特点的计算机。

交互设计工作流总结

交互设计就是建一座楼时,画图纸的那个……工作10个月,总结下我眼中的交互设计工作流以及各阶段我get到的一些经验。

下图是个人从整体上做的总结:

在整个工作流程中,我找到了一些万变不离其宗的点,在整个过程中,把握这几点,可以提高思考效率,提高与同事的沟通效率,方便工作更好开展。

场景是需求立足的根本点。

在解释问题时,思考问题发生的场景,结合场景的时间点与用户所处的环境,就可以设身处地地明白使用者是怎样的境况,所提供的方案是否可以帮助用户解决问题。

提供方案或做解释时,结合这三个角度、当前的产品目标,使方案走向更清晰。

定位所设计的流程属于什么地位,或确定该流程的优先级、重要程度等,就可以确定该流程实现的最适合方式。

fogg行为模型是要实现一次用户转化行为,需要有三个要素:足够的动机 (Motivation)、用户完成动机转化的能力 (Ability)、用户实现转化的触发因素 (Trigger)。

实现某功能,就需要用户触发操作,操作的方式即可能存在的交互方案,如button、开关、选择等方式。

思考在什么时间点上,提供方案入口最合适。

思考方案在真实使用场景下,会出现的页面效果。向下思考可以帮助完善设计流程,发现一些业务相关的交互问题。

平时在使用某交互组件时,留心该组件的反馈,尤其是出错时的反馈。

了解了存在的犯错情况,能帮助提高个人控件、组件熟练度,并给到前端更精细的交互要求。

工作中,我基本是处理一个接一个的需求,往复循环,得到如上经验,如有其他经验,还请留言分享。

「要得说」UAL交互设计专业带来的成长和改变

??韩玉滢 ? ?

现伦敦艺术大学交互与信息传达设计专业硕士

早年就职于迈瑞医疗 用户体验设计师

深圳腾讯 交互设计师

本科毕业于深圳大学广告设计

「要得说」

「要得说」访谈系列通过采访历届优秀学长学姐,跟大家一起分享他人不一样的精彩人生。

第二期「要得说」访谈,我们邀请来自伦敦艺术大学(2019 QS ArtDesign Rank No.2)韩玉滢小姐姐分享-在UAL学习半年交互设计后的心得体会。

(图片出自伦敦艺术大学官网)

Y(Yaodee):?先给大家做下简单的自我介绍吧!

H(韩玉滢): 我的本科读的是深圳大学的广告设计专业,我是在大三的时候开始决定未来的学习方向是交互设计的,之后有在腾讯、迈瑞医疗这些地方进行实习,说起来也算是互联网交互设计和传统的实体工业用户体验设计的工作都有做过,如果是有想要在做作品集的过程中有实习经历的同学也可以找我,我们可以聊一聊时间安排还有找什么样的实习会对你的申请更有帮助。那最终的申请结果是收到了来自伦敦艺术大学、拉夫堡、爱丁堡、利兹、布鲁内尔以及香港理工大学的交互设计专业offer,并最终选择了伦艺的 Interaction Design Communication,于2019年的9月开始就读。

Y(Yaodee): ? IDC是一个什么样的专业?

H(韩玉滢) :我读的专业全称是Interaction Design Communication (后面简称IDC),除了大家熟知的交互设计部分还有一个Communication的部分在里面, 也就是说它会更加的偏向于以传达信息作为主要目标的交互设计 。教学的内容包含但 绝不限于大家一听到交互设计就想到的app和网页架构设计 。探究什么是交互设计会是这一年半学习中的主线内容,老师并不会用一句话告诉你交互设计的定义,但会通过课程贯穿系统的交互设计理论、通过邀请不同领域的艺术家进行讲座来拓宽你对于现在行业存在的各种可能性、并且通过连续不断的项目实践来达到你自我寻找和反思的过程。通过这半年来的学习,我可以很严肃(严肃脸.jpg)的说这绝对不是一个轻松的专业,反而,这是一个需要不断探索,需要你对交互设计这个领域有自己的理解的专业。

通过我目前这段时间的学习来看,交互这个词本身像是在邀请人们参与到你的作品之中去,成为你作品中的一部分,与“沉浸式”一词有点类似。但是在体验结束之后,人们会因为你的作品对某些事物产生新的想法或是在你的引导下进行思考。那作为设计师的你就是通过创造这个话题和这个空间来让人们产生思考的人。例如下图是我在伦敦一个艺术展里看到的装置艺术,在模糊不清的烟雾中是一颗美丽的,正在旋转的地球,周围有一个女中音的歌唱家正在配着地球的旋转歌唱,宛若地球自己的自述曲。艺术家希望通过这样的一个装置来和让人们重新的面对地球的美丽以及它现在所处的危险环境。

?

(图片 出 自伦敦皇家艺术馆 –生态交互艺术展 )

Y:? ?? 这半年来你觉得你有哪些比较明显的改变吗

H:? 有啊,改变非常多,分成学习和生活两部分来讲讲好了:

从学习上来说, 首先我是自己感觉自己的 硬实力 进步了很多,例如英语(这个真的就跟待的环境有关系,一段时间后英语突飞猛进是必然的)。还有 对于交互有了一个更加系统和专业的理解 吧,因为之前的背景其实不是交互设计,在这方面有想要了解的需求的师弟师妹我其实有很多想要推荐的书还有网站给你们。然后就是一些其余的专业技能了例如怎么样更加 科学的做research、发现问题、进行调研、产出设计概念、还有一些软实力例如像团队的协作能力啊、沟通能力 。还有更加重要的是自己的 视野和平台变的更高了 ,就像是平常Course Leader很喜欢没事跟我们讨论问题就会讨论一些例如AI人工智能未来到底会怎么发展、VR/AR的虚拟现实究竟会不会成为现实、人类这个物种在未来应该如何和自然生态共生…这种问题。一开始你会觉得他们怎么要想这么多有的没的,但是久而久之就发现其实他们是真的在认真的关注这些问题,尤其是在国内才刚刚兴起这些概念的时候,他们其实已经对这方面的问题有了很多的思考和讨论了,这个会让你感觉真的是在 为未来做设计、而且做得事情是有价值的,我觉得这点也为我自己未来的职业愿景有了很多的塑造和帮助。

那从生活上来说 ,自己一个人到国外开始独居、租房、自己做饭、规划自己的空余时间,一开始会觉得特别特别爽,终于可以脱离父母的控制掌握自己的人生了的感觉。但是到我发现其实一段时间后给留学生留下的更多是自律吧,就要对自己过的生活负责,像我现在会每天早上起床去楼下健身房健身,然后去买点水果做个中午饭,完成作业,上课,空闲时间见一下朋友。英国的慢节奏生活还是很容易帮你 培养出自律和健康的生活 。

(图片 出 自本人拍摄 )

Y:? ? ?关于交互,可以简单讲讲你学习到的核心知识吗

H:? 下面这张图可以很好的展现我们这学期学习的内容,这学期一共会有两节主要课程,分别是下面标为了蓝色圆圈的Speaker Design 和 Human Central Design。当然,在学习和实践的过程中,也会因为表达方式的选择不可避免的基接触到Translation Design。

(Map of ARTS andDESIGN- 出自IDC专业教案)

【Speaker Design】 右上角的Speaker Design主要学习的是利用可互动的艺术装置来探讨你想要探讨的科技,每个人都可以选择他们所感兴趣的科技,例如有同学会选择网络虚拟人物、面部识别技术、声音加密和解码技术等等,然后我们会对这些技术进行很深入的研究和了解,最后通过一个作品来进行自己的表达。这像是一个关于自我表达的作品,阐述的是你自己对于这个科技的了解,并且希望将你自己的了解传达给观众,让他们了解你的想法。

(What is Design?- 出自IDC专业教案)

?

【Human Central Design】 而左下角的Human Central Design则恰恰相反,你需要首先了解观众的想法,他们想要的是什么不是什么。下图的Desire Line就是一个很好的例子—— 设计师想要用户体验逛花园的乐趣,但是赶时间的人却只想快速的穿过这里。我们要做的是通过观察和了解人们的想法,然后以他们的需求为中心来为他们进行设计,这里没有自我的表达,做出来的是真正易用的产品,因此称为Design而不是Art。需要做的是从需求入手,进行倒推,来得到产出。

(Desire Line - 出自IDC专业教案)

?

【Critical Thinking】 不管是上面的哪一个课程,Critical Thinking都是一直在反复强调的一个观点,简而言之它就是告诉你不管是什么事情都不能直接的接受别人的结论,而是应该接受很多很多的观点之后,通过你自己的思考得出你的想法。并且需要更多的观察身边和周围的事物,你会发现如果一直被强调这一点一段时间后,你的想法真的会发生一些变化,会在看到一些事情的时候保持更加客观的观点。

(What is Design?- 出自IDC专业教案)

?

Y:?? ??在UAL读书有什么最大的感触

H:? 在UAL读书有一个好处就是有很多很多可以利用的资源,在我上第一节专业课的时候Course Leader就会说研究生的学习其实就是给你一个很大的平台和所有的资源,来帮助你实现你的想法,不管它听起来有多疯狂。我下面会列一些在UAL里可以利用的资源,当然这些肯定不是全部,剩下的就要等我或者是你们自己来探索啦

图书馆 可以到借各种各样和设计相关的书籍、杂志、DVD、电子书、论文、网课等等资料。

可以认识周围 各种各样专业的同学 ,例如动画、插画、平面、3d、电影…你会发现一些很有意思的想法,如果你愿意的话甚至可以跟他们一起组队做项目,学校会非常支持。

各种各样的设备和实验室,帮助你将你的想法落地 。例如会有很大型的印刷设备、木制品切割实验室、3d打印实验室、摄影棚、录音室、VR/AR实验室、创意科技实验室、投影实验室等等,而且每个实验室里都有对这个领域非常了解的老师,帮助你了解这些设备,实现你的想法。

(图片出自伦敦艺术大学官网)

各种各样的讲座、项目、和伦敦的很多艺术馆合作,像我接之后要介绍的我们专业和伦敦的VA艺术馆有合作的项目,就是作为参展艺术家将自己的交互设计作品展览在英国除了大英博物馆以外第二大的博物馆里。 这样的经历不仅可以帮助你了解真正举办展览的过程,当然你的作品放在这些大牛的艺术馆里展出本身就是一件非常值得骄傲的事情。

学校还会提供更多贴心的服务,例如为英语不是第一语言的学生提供语言课、签证辅导、生活辅导、甚至细小到心理辅导和社交融入,反正只要你有问题,学校总能找到合适的人帮你解决。

?/ 两个交互作品分享/

H:? 在结束之前跟大家分享两个作品吧,这两个是我最近非常喜欢的作品,一个是我前面提到的在前段时间去伦敦VA博物馆参加交互装置艺术展的参展作品《Gazing Through Colour》,还有一个是我最近非常喜欢的一个艺术家FILIPE的作品《Onomaphonic》。我认为这两个作品都很好的体现了装置艺术中应该有的‘ 能够让人在参与中产生快乐的同时收获知识 ‘的基本准则。

(Gazing Through Colour- 出自我的个人项目)

Gazing Through Colour 的想法来自于我们发现颜色的存在对于人们来说远比他们所意识的要重要,颜色是我们通过视觉观察事物的第一步,我们之所以会喜欢某种颜色,除了对于它在视觉上的喜爱之外,还和我们跟这个颜色的‘关联’有关:它让你想起了什么事物,在你的文化背景下这个颜色代表着什么。但是在机器的视觉中,颜色仅仅只是它所看到的一个像素值,机器对于颜色的偏好仅仅因为其背后数据的存在而存在。所以在‘EYES’的主题下,我们尝试以颜色作为媒介,去讨论人类和机器在视觉上的不同:观众需要先通过DIY自由选择自己喜欢颜色的镜片拼装眼镜,然后通过这幅‘有色眼镜’对尝试和机器对话,如果机器也同时选择了你眼镜上的颜色,那么它会开始追踪你,它桌面上也会反映出显示你们所喜爱的共同的颜色。

(图片出自?Onomaphonic - FILIPE)

Onomaphonic这个作品对我本人的影响很大,我觉得它在每一个元素的选择和整体的娱乐性上做到了很完美的程度。它通过让人们选择不同的元音字母,摆放在五线谱上,每一个元音本身具有一个发音,再加上五线谱上的旋律,就形成了一首观众自己创造的独一无二的歌曲。观众可以戴上耳机享受这个歌曲,也可以选择把它放给现场的所有人听。艺术家FILIPE通过了一种极富趣味性的方式让大家重新的认识了元音和辅音能够组成一个发音的方式,我认为是一个同时具有教育和参与感体验感的一个艺术装置。

/与Yaodee Studio相遇/

H:? 每个人都可以对交互设计有不同的理解和看法,但是对于这个行业的热情和坚守,最终也会让我们殊途同归。我认为Yaodee Studio是国内兴起的活力四射充满未来的平台,集结了各个有趣领域的优秀设计师们,他们不仅是良师,更是益友。他们每个人都对设计有着自己独特的理解和力量。当这些力量叠加在一起,必然能够帮助大家走的更远,更加平坦。我一直以来的的职业追求是做有价值的设计,加入Yaodee是一件让我觉得饮水思源,很有价值的事情,我愿意和学生们一起成长。

最后的最后,如果同学们有任何想了解的关于我学习到的交互设计系统的理论、亦或是我们每个阶段的项目brief和最终成果、或是想要了解UAL的User Experience、Service Design和Information Design这些其他类似专业、甚至是对未来在伦敦的生活有任何想法或者问题,都可以咨询我喔。 愿你斩获OFFER,前程似锦。

交互总结篇(一):框架布局篇

上篇文章里面简单介绍了一下关于交互设计分析的三维度,即框架、流程和状态;这里就不做特殊介绍了,详细内容请见 《三维度解析一个产品的交互设计》 。

而本文作为交互设计总结篇的第一篇——框架布局篇,主要是系统地整理一下交互框架设计所需要考虑到的方方面面。

首先我们要先理解一个概念:

什么是交互框架? (主要是指互联网产品)

框架是整个或部分系统的可重用设计,表现为一组抽象构件 及构件实例间交互的方法

这是官方的定义,翻译成人话就是搭建一个产品能够使其可拓展,规范化,有条理,可快速迭代优化的方法。好像还是不好理解,让我们举一个通俗易懂的例子:假如我现在有个空房子,我要重新改造它,那么我首先要考虑的就是其房间结构( 也就是框架 ),比如我要设计几个卧室,几个客厅,分别占多大面积,在什么位置等等( 信息架构 );然后还要考虑如何设计门和窗户,怎么能够在不同房间互通( 导航方式 );接着再思考每个房间里面分别需要怎么布局,分别需要哪些家居和电器,具体在什么位置( 页面结构 );然后再不停的细分下去,直到考虑全每个细节,那么一个产品完整的框架就基本上搭建出来了~

理解了框架的概念后,可能我们还是会有疑问:

为什么要做框架设计?

还是上面房子的例子,假如我不考虑房间布局,随心所欲地将我的家具和电器到处摆放,我将卧室放在房子的最里面,我需要依次穿过客厅、厨房、洗手间才能到到达;我将马桶放在卧室,把床放在客厅,把厨具放在洗手间,把衣柜放在阳台,把洗衣机放在厨房……各位可以想象一下你的房子要是要被设计成这样你还想住吗?同理,一个框架结构混乱的产品你的用户也是不会用的。但凡在行业里有些影响力的互联网产品,其产品的框架和结构必定是由产品和设计人员精心思考并设计过的。框架是一个产品的骨骼和经脉,它是一个产品能用与否的基础所在,所以在开始产品设计之前先进行框架结构的梳理是非常非常重要的!

那么对于交互框架:

我们又该如何去思考和设计呢?

我将其总结为3个步骤:

对于产品和设计来说,这个词肯定是不陌生的,那么信息架构是个什么东西呢?

这就是某app产品的信息架构图,通过不同级别的分类,将其所有的功能点展示出来的一个功能信息框架图。一般来说这种架构图主要是由产品产出,而有些比较专业的交互前期也会参与其中,下面还是以设计房子为案例来探究一下信息架构到底该怎么做。

首先我们要想清楚房子有几个房间,分别需要哪些家居和设备(收集需求)

收集完需求后,我们需要开始对需求进行整理和分类,这里整理的规则可以参考 卡片分类法和卡诺模型 :

整理完成后最后产出信息架构图:

信息架构完成后并没有结束,你还需进一步思考: 还有没有其他问题呢?有没有漏掉的功能?功能分类有没有问题?这个框架拓展性如何?结构是否足够扁平? 等等……如果不考虑清楚那么就很有可能会出现马桶被摆放在卧室这种情况了。

当信息架构确定好了之后开始思考第二步:

导航就像是房子里面的门,是贯穿整个产品的入口,导航做的好的能让用户快速达到目标,导航做的不好会让用户迷失在茫茫的信息海洋中不知所措,目前在app业内主要的导航模式有3种: 选项卡式导航、抽屉式导航和跳板式导航。

选项卡导航:iOS上又叫Tab bar,典型代表像淘宝、微信,这类产品相对体量较大,产品结构和流程逻辑也都较为复杂多变;

抽屉式导航:代表如滴滴、摩拜等,这类产品都有一个很共性的特点就是“单线程”,即用户目标明确,操作流程单一,属于“强流程,弱框架”的类型。

跳板式导航:也叫9宫格式导航,典型代表如美图,这类产品也有着比较鲜明的特点“多线程单流程”,即功能入口较多(一般5个以上),操作流程单一,常用于美图类产品和一些B端类产品。

虽说不同的产品形态决定了其不同的导航模式,然而业内几乎90%的app都是采用选项卡导航,选项卡式导航的确拥有非常显著的优势:结构简洁清晰,操作便捷,拓展性强,稳定性好,确实是很多app首选的导航模式,然而并非一概而论, 你所选择的导航一定是跟你的产品类型和框架结构相互关联的,滴滴采用抽屉式导航而非选项卡导航是由其产品本身属性所决定,豆瓣一刻的导航采用抽屉式是因为本身产品框架结构较为简单的原因。 所以采用什么导航方式要灵活变通,没有最好的只有最适合的,比如下面3个例子:

片刻使用的是驼式导航,是选项卡导航的一种变形,强化了某一个重要或高频繁操作的功能,多用于博客类,直播类app中;

好奇心日报用了一种很罕见的悬浮导航,至于为什么会这么做,各位可以自己去思考;

Hyperlapse更是大胆,它根本就没有导航,这个产品全身上下就只有一个功能;

结合自己产品类型和框架结构,灵活选择导航,不要拘泥于形式,多尝试多思考,总会发现最合适的那个。

完成导航设计后,来到最后一个步骤:

页面结构即页面布局,是针对单个页面不同控件和元素的布局展示关系,就像房子的房间大小位置都设计好了,那么接下来就考虑每个房间里面该怎么添置家居了,比如卧室里面的床,衣柜,台灯,空调等等这些东西该怎么布置,分别放在什么方位,具体占多大位置,这样摆有什么影响等等,房间里面布局的好坏影响空间的运用,也影响了房间的美观整洁和整个房子的格局风格,同理, 页面的布局好坏就决定了用户的使用和阅读体验,决定了整个产品的调性和品位,最终影响了产品的转化。

那么一个优秀的页面布局具备哪些特点呢?

1、主次分明,结构清晰:

结构清晰的页面各个元素和控件处理的非常得当,相反结构混乱的用户的关注没有焦点,看了很长时间都不知道你的页面想表达什么,也不知道该如何操作,下面看两个例子:

12306的首页结构看起来似乎毫无层次感,页面结构就像是随意的信息排列,再看看智行的首页,卡片式结构视觉焦点更清晰,信息的排版和布局也更有层次感。

2、化繁为简,引导清晰:

特别是移动端产品,手机屏幕尺寸有限,如何在最短的时间里吸引用户的眼球, 设计师需要做的是做减法,删除干扰用户的不必要的内容,强化核心的操作流程,快速引导用户达成目标。

让我们再看一下上面12306的首页,可以发现它的查询页面包含了出发点、目的地、出发日期、出发时间、席位、车次筛选和添加乘客,也就是说用户需要浏览这些信息后然后再进行一步步的操作选择,等这些全部设置好了之后估计票早都抢完了,而智行就机智了很多,它将出发时间,席位,添加乘客等非重要信息进行了删减,就连车次筛选也只是用了开关设置,所以大大提升了用户的查询效率。操作指引方面,出发时间是一个非常重要的必填操作,智行对于时间选择有比较强的引导,而12306的出发时间根本看不出来是可以点击操作的。

3、操作方便:

这里操作方便更多适用于移动端,特别是现在手机尺寸普遍越来越大,用户单手操作越来越困难,所以我们在设计页面结构布局的时候也是要考虑到人体工程学的,特别是某些特殊场景使用的app,比如地图类应用,用户使用场景多在户外(步行、骑行、公交车),用户单手操作的场景非常之多,如下图所示:

左图是用户单手操作的触摸区域图,从图中可以看出界面的左上区域属于触摸困难区,下方是舒适触摸区,所以在处理页面信息布局的时候就可以考虑将重要展示类信息放在页面的头部和中部,而需要操作类的控件和按钮可以考虑放在下方用户容易操作到的区域。我们再看右图,是高德的首页,我们可以看到高德的头部有个搜索框,是属于重要按钮控件,然而却放在了头部用户难操作的区域,那么高德当然也意识到了这个问题,于是乎他们在页面的底部放了一个“路线”入口,能够让用户在单手操作的情况下同样也能快速完成路线查询。

其实关于页面结构,设计师们要考虑的点很多,也不仅仅单纯地用几个点就能完全涵盖进去的,不同的产品属性会决定其框架和导航,也决定了其页面的展示布局,比如网易新闻和淘宝的信息展示方式就完全不同,一个是浏览,一个是逛,两者间的使用场景和用户心理是完全不一样的。即使是同一属性的产品其页面结构和布局也是千差万别的,比如下面4个例子:

虽然都是互联网金融产品,也都是展示首页,然而可以看到每个产品的首页展示形态完全不同,有的主推产品和收益,有的引导登录购买,有的主推运营活动,有的主打社区互动, 究其背后形态各异的原因跟其产品定位与运营策略有重要的关联,设计师们分析产品的时候不仅仅需要从设计本身出发,还要思考更多背后潜在的原因,从而达到真正意义上的“闭环”。

好了说了这么多,最后总结一下,产品交互框架设计需要经历的3个步骤:

1、信息架构: 功能需求的筛选与分类,根据不同权重和属性进行级别的划分;

2、导航模式: 根据产品属性和产品架构来选择最为合适的导航方式;

3、页面结构: 结构主次分明、结构清晰、引导明确以及操作方便是一个优秀的页面结构的必要条件;

框架是死的,人是活的,设计的思维大多都是发散的,合适的方法论确实能够在关键的时候提供思考的方向,但不可固步自封,设计师需要不停地学习、思考、交流、总结、创新,因为这个过程本身才是设计最重要的意义~

(待续……)

(责任编辑:IT教学网)

更多

推荐微软认证文章