交互设计流程中的原型构建人人都是产品经理

在最终产品诞生之前,所有我们构建的设计表达(包括文字、图表、草图以及各种维度的模型等)都可以认为是原型。原型的构建是贯穿整个设计流程与设计评估以及设计决策的,原型是探索与表达交互设计的重要媒介与手段。可以这么讲,交互设计的目标是增进人与人之间的沟通与交流,而交互设计的流程是以原型构建为核心的,原型构建作为一项设计实践活动是推动交互设计中创新的核心动力。

设计交互产品往往需要基于多学科团队的合作。例如:在设计儿童交互产品时就会在需要工业设计师,电子工程师,机械设计师的基础上,有必要邀请儿童心理研究专家与儿童行为研究专家一起参与,如果产品是基于软件的,那么擅长撰写代码的程序员也需要加入进来;如果产品还需要网络支持,那么网站设计师、信息架构师等等专业人员都需要被邀请进设计团队。

虽然目前为止,中外关于交互设计中如何构建原型的专著还颇为鲜见。但是,综合现有文献和自己的设计实践。现阶段,我们讨论原型的方法主要是基于原型本身的特质出发的,主要可以分为:第一类,原型的构建方式;第二类,原型的保真度。以下试作进一步辨析。

第一类,原型的构建方式

一般,我们在讨论一个原型时,总是会先提到这个原型是用什么做的。比方说,是纸原型还是用实体材料搭建的,是用原型设计工具设计的。我们往往会觉得用一些更高级的工具或材料做的原型会显得设计师更专业;用更高级的工具代表着设计进入了更深的阶段;同样会显现更好的效果。

第二类,原型的保真度

大多数关于交互设计的专著中将原型分为两类即:低保真(Low-Fidelity)原型与高保真(High-Fidelity)原型。同样很多时候,我们也容易将低保真原型等同于初级设计阶段,而将高保真原型等同于接近完成的设计。

这可能是原型构建的第二大误区。设计师需要很好地利用各种工具来构建不同种类的原型。有些时候,高保真原型的确意味着接近设计完成,但是需要指出的是,这不是所有项目中的情况。很多时候保真度很高的计算机3D虚拟原型在设计流程的早期就被构建出来,而关于内部机构的低保真原型构建却会在稍后才能跟进。要被着重认清的是,原型的保真程度并不相当于设计的实质,那只是整个设计流程中的一些特殊阶段而已。

1、目前一些设计流程的问题

在我们的设计实践与设计教育中,设计流程指的是设计师或者设计团队为产品或服务的开发而作的一系列设计活动。目前流行的典型设计流程表述大概可以描述为如下内容:

设计定义:确定设计的目的以及设计的技术要求与指标;

设计分析:对现有的产品(针对改良或改进设计)或潜在的用户需求(针对创新设计)的评估与分析;

设计点确认:详细说明设计中的具体要求,提出设计概念与具体的设计方案文本;

设计表达:通过视觉化语言或工具或者通过构建实体模型来表达设计方案;

完善开发:在已有的设计方案上继续设计细化,深入完善各方面的可行性;

测试评估:对最后的设计提案进行测试与评估,决定是否量产。

以上这种看似详细规范的设计流程,在很多经验丰富的设计师眼中,可能只是一个参考而已。因为这样理想化的设计流程,在遇到具体的设计问题时,往往只能是纸上谈兵。为什么这种环环相扣看似有着合理逻辑关系的设计流程往往不会在设计实践中按部就班的展开,也往往不能成为好设计的驱动力呢?

原因有如下几项:

前期过长:一般我们会认为小公司经不起一个产品失败的打击,其实越是大的公司,也越惧怕在设计开发上的失误而带来的可怕效应。所以越是知名企业越是重视设计前期的准备工作,他们往往寄希望于通过大量深入的调研工作,使设计前期就少犯错误,并通过依靠设计研究找到正确的产品开发方向并驱动产品走向成功。事与愿违的情况是,等做完一个完美的前期分析在开始着手投入力量设计时,总会错过产品开发的最好时机。太长的前期调查研究不仅消磨了设计师们的创造热情,还容易使在各个不同知识背景研究所得各种数据资料成为设计团队相互融合的障碍。线性发展:我们一般的认识中,设计流程往往是一步步递进发展的,很多设计团队还会在各个不同的阶段设定一些评估的机制,以保证各个设计阶段的工作质量和整个设计的方向。但是正如麦克卢汉所言的,“只注重逻辑思维、线性思维的人再也行不通了,电子时代的人应该是感知整合的人、整体思维的人、整体把握世界的人。”[2]同样在交互设计流程中,整体思维同样需要受到重视,设计过程应该是动态的,非线性的过程,这里充满了未知与挑战。设计师必须在众多限制条件中,依靠潜知识来找到好的方向。

条块分工:线性发展的必然结果是条块分工,每个设计环节都会造就一批狭隘的专家。专家们总是容易过于突出自己专业局部的考量而忽略通观全局。这种情况一旦产生,那么多学科交叉的交互设计必然变成各学科自说自话的传统工业分工了。虽然我们常常把富于创意产出之地,称之为“创意工厂”,但是创意活动本身是不能用流水线式的方法来生产、制造的。保持创意活动的自由度,应该是符合一切艺术创造规律的。

针对原型构建在交互设计流程中的重要性,在最初的交互设计研究与实践中,交互原型构建的一般流程:

b.在有了发现,产生灵感后,进需要进入策略制定的阶段,我们需要在前面工作的基础上进一步细化设计工作与策略。我们需要运用人物角色设定的方法构建出典型的用户,并将其放到一个我们日常生活的典型场景中去,进一步观察人物角色在场景中与我们前面构建的低保真原型之间的交互过程,明确整个交互过程中所涉及的主要技术细节与需要解决的问题。在此基础上,我们便可以进一步构建出一些更接近最终原型的高保真原型,这些高保真原型会从交互方式、机构、形态以及色彩等多方面完善我们的设计,并逐渐整合为一体,接近最终原型。

c.在最后的设计评估中,设计团队需要提交的是完整的最终原型,我们可以在真实的环境中从各个方面考量以确定是否进入实际生产阶段。需要强调的是,在整个设计过程中,设计评估事实上是贯穿始终的,之所以在最后才列出来,是因为之前的评估都是在设计团队内部的,凭借团队成员的经验与直觉不断做出的,在实际案列中甚至在一次基于低保真原型的讨论后,设计都会产生一些直观的变动。而在最后的设计评估中,各种宏观微观的评估方法将会被充分利用起来,甚至可以小批量生产以便进行完整的综合测试。

但是在研究优秀设计案例与设计文献后,发现在这个流程中,设计的动态性还是被显著的体现出来。整个设计流程基本上还是按部就班的,与目前流行的典型设计流程并没有本质上的差别。

THE END
1.原型图交互设计UI图,到底啥关系交互原型与静态原型设计时间区别因为sketch做图又快又美还是像素级,三人同时参考避免最终成果有偏差。所以我拿去套进axure,页面配上功能说明、规则逻辑、流程图等,生成产品经理版交互原型,用来汇报领导、沟通协调、需求评审与讲解、与技术进行项目开发计划评审评估工期等。 他继续把线稿图用axure做完全部交互细节设计,期间与我反复沟通确认,最后生成交互https://blog.csdn.net/lucky_girl11/article/details/70233332
2.ProtoPie官网适用于软硬件交互的高保真原型工具30秒一起制作“地图缩放”原型 支持设计素材一键导入 被世界顶级设计团队信赖的工具 不要让硬件限制了你的设计 跟上各领域交互趋势 车载HMI交互 网页端 移动端和网页 智能电视 & 媒体 智能手表 游戏交互 让逼真的车载体验和HMI 多屏幕交互变得触手可及。 https://www.protopie.cn/
3.谁说交互原型制作难?那是你还没用过这个神器!优设网孔子曰:「工欲善其事必先利其器!交互制作太不易,选个工具善待自己。」我本人是做UI设计的,同时也是个工具癖,市面上新出的工具都会去用一下,为的就是以后工作上有需要的时候,能快速判断应该选择哪个工具。? 今天就来说说设计工具里面的小分支:交互原型工具。选个好的交互工具很重要,而好的原型工具应该具有以https://www.uisdc.com/interactive-prototyping-tool-protopie
4.交互原型人人都是产品经理如何画交互原型?展现5类信息就够了 一份好的交互原型,首先必须提供一个好的解决方案。一份优秀的交互原型,还必须符合基本的设计原则、使用符合规范的控件、对各种可能出现的情况都给予考虑和展现。那么 沐风 1年交互原型初级 交互体验 交互原型工具:好的工具是利器,坏的工具是钝器 https://www.woshipm.com/tag/%E4%BA%A4%E4%BA%92%E5%8E%9F%E5%9E%8B
5.如何9步完成可交互原型制作?在正式进入开发之前,最好的办法就是将这些不同的方案全部都以可交互原型的方式展现出来,让老板、客户、团队成员、目标用户亲自测试,以此来收集有价值的反馈信息,然后根据这些信息再次审视产品目标与用户目标是否与项目目标吻合,并逐步将产品原型推向最终版本。https://study.163.com/topics/coursefinder36_m/
6.交互原型合集八、附录1:画好交互原型图的4个技巧: 一)完整的主干闭环+可能出现异常反馈 1、确定一个目标,例如:新用户注册,从第一步开始,按用户页面跳转顺序摆放界面。 2、针对新用户注册这个功能,完整的功能交互流程图,必须包含:新用户开启APP,触发注册,注册流程,完成注册,进入游戏这几个关键步骤的完整闭环。 https://www.jianshu.com/p/9514d1da3ab8
7.什么是交互原型设计交互原型设计工具如何画交互原型→MAIGOO知识摘要:交互原型设计是交互设计师通过原型工具,将文字产品需求转化成具体的图形产品方案的产物,一般使用原型设计工具画交互原型时,主要考虑设计思路和方案展示两方面,一般要画原型展现完整的流程、界面以及界面中的元素展现需求的所有功能点、界面中元素的各种状态说明、元素操作后的效果等内容。下面一起来了解一下交互原型设https://www.maigoo.com/goomai/265841.html
8.交互原型设计必看指南来了!交互原型设计怎么做?优秀的交互原型始于对产品需求的深入分析,确立清晰的设计目标,并采用恰当的交互方法来实现这些目标。它还需遵循设计原则,采用标准化控件,并全面考虑各种潜在场景,确保原型的实用性和前瞻性。还没看懂的话也不用担心~交互原型设计其实非常简单,下面这份必看指南帮你搞定:首先选择合适的交互原型设计软件https://js.design/special/article/interactive-prototyping.html
9.手把手教你做原型交互在这里,你可以学习到专业的原型设计相关知识,不管你是产品经理、设计师、开发人员,还是营销、市场人员,都能得到你想要的内容。https://modao.cc/prototyping/
10.9款原型设计工具与Sketch的强强组合,轻松构建交互原型!Sketch中的原型设计依赖于画板(Artboards )和热区( Hotspot )链接实现页面间的跳转,实现动态交互原型(类似于原型设计软件Mockplus中的拖拽式链接点 )。然而不得不吐槽的一点是链接线加的太多会让你眼花缭乱。 官方教程:https://www.sketchapp.com/docs/prototyping/ https://cloud.tencent.com/developer/article/1387446
11.快速做出逼真的移动交互APP原型工具—乎之原型而今天继续跟大家分享一款属于移动互联网时代的原型工具——乎之原型APP,同时也是一款非常不错的APP demo 设计工具。 乎之原型,是一款快速交互原型制作工具。 -创建原型:导入效果图,编辑事件,演示原型。可以使用点击、滑动、双击等各种动作事件,并支持移入、渐隐、翻转等各种页面加载效果。 -https://www.25xt.com/appdesign/8748.html
12.移动端典型页面高保真交互原型模板作品类型:移动端APP高保真原型源文件版本:Axure8(适用axure8、axure9、axure10)此原型是收集市面上流行的APP移动端相关典型界面,高度还原交互的高保真页面模板原型。https://www.axured.cn/a/1368.html
13.4款交互原型设计工具评测控件新闻4款交互原型设计工具评测 做原型设计应该用什么工具?这是一个令人感兴趣的话题,也是一个值得思考的问题。从最基本的纸笔,到Visio 再到AxureRP Pro,也许您在不断的尝试和比较中,依然没有一个明确的答案。其实,我们如果脱离了目的,而在这里单纯地讨论工具是没有价值的,所以,在这里我们简单介绍一些关于原型设计的https://www.evget.com/article/2012/11/15/18107.html
14.交互设计原型什么意思?我本科学的是 工业设计产品专业 现在在读研生 还有就是想问一下 交互设计 与 用户体验 以后找工作机会多么? 还是学产品专业找工作机会多呢?湖上湖 浏览1829回答1 1回答 潇湘沐 交互设计简单点将就是指产品上某个按钮操作了之后会引发什么样的操作,这个过程要考虑用户体验的因素。原型是指将产品概念形象化的产物https://m.imooc.com/mip/wenda/detail/427268
15.Axure原型及交互设计实例Axure原型模板、Axure元件库、Axure大屏原型模板、Axure大数据可视化,专业的交互原型素材原创分享平台https://www.axureux.com/home/example.html
16.principle一款非常值得一试的交互原型软件用户体验日志principle是一款在mac上的交互原型制作软件。界面类似 Sketch,动画的思路有点像 Keynote的神奇移,只要两个画板的元素之间发生了变化,那中间的动画过渡就会自动的补上,像flash的补间动画,制作非常的简单,效果出奇的好,同时还支持移动端镜像预览,可以在iphone和ipad上安装app,通过数据线连接,操作体验十分完美。 https://dtop.powereasy.net/rz/yhty/content_14925
17.了解如何创建他人可用于测试优化和完善用户体验的交互式原型。录制原型交互 指定名称和保存录制内容的位置。录制内容会被保存为 .mp4 文件。 了解详情 以下视频可帮助您开始进行交互: 使用语音命令创建原型 制作原型动画 告知我们 如果您有问题要问或要分享想法,欢迎加入Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品。 https://www.adobe.com/cn/products/xd/prototyping-tool.html
18.原型交互讲解OTHER理论基础巧匠课堂原型交互讲解 20分35秒 分享到: 课程标签: Adobe 丨 基础 丨 教程 丨 XD 丨 课程介绍 问答交流 素材下载 本次Adobe XD系列教程会主要讲解以下几个方面的知识点: 01:Adobe XD的下载与安装 02:插件和用户界面套件的下载 03:文本工具和资源面板的讲解 04:原型交互讲解 使用软件:Adobe XD 使用工具:矩形工具https://www.2qj.com/video/1304_4.html
19.Axure交互怎么做?送你一套超高效的万能公式!交互事件演示:实现页面跳转,使用鼠标交互、手势交互、键盘、延时等路径动画,制作引人入胜的产品演示。 丰富的转场动画:支持即时、溶解、智能动画、推动、滑入、滑出等多种渐入渐出动效,轻松构建出色用户体验原型交互,体验最终产品形态。 缓动曲线设置:支持自定义曲线运动时间,支持线性动画、缓出动画、缓入动画、缓入缓出https://pixso.cn/designskills/how-to-do-axure-interaction/
20.收集需求中的系统交互图和原型法是什么?Worktile社区系统交互图是范围模型的一个例子,它是对产品范围的可视化描绘,显示业务系统(过程、设备、计算机系统等)及其与人和其他系统(行动者)之间的交互方式。原型法是指在实际制造预期产品之前,先造出该产品的模型,并据此征求对需求的早期反馈。 一、系统交互图 系统交互图是https://worktile.com/kb/ask/11689.html
21.AxureRP移动端交互元件库/交互原型模板–AxureShop产品原型网Axure RP移动端交互元件库/交互原型模板 编辑推荐 ¥ 159.00 – 立即购买 在线演示 兼容性提醒:此作品只兼容Axure RP 9.0及以上版本,低版本软件无法使用。 一、基本信息 作品名称:Axure RP移动端交互元件库/原型模板 作品类型:元件库/原型模板 更新日期:2024-07-06 当前版本:V1.5 适用范围:App应用/小程序https://www.axureshop.com/a/748229.html
22.Axure9.0原型教程:学好这篇交互知识,你也可以做出高保真有了Axure这一神器,产品、设计、运营等非开发岗位的同学,不用写一行代码,只需要通过几步简单的配置,就能够实现前端工程师们平日里通过大量代码实现的交互功能。Axure生成的Html文件之所以能够被称作为原型,而不仅仅是一个线框图或者是草图,就是因为其强大的交互基因,决定了它不是一款普通意义的界面设计工具。 https://www.hxsd.com/information/6693/
23.我拆解了一套完整的产品设计流程,希望对你也有用6. 交互原型Prototype,做出来好像可以用的东西,有很多原型工具可以利用。 评测阶段 7. 专家评测Expert Evaluation,至少两名设计师或对交互设计比较了解的人通过反复测试原型。找到问题后修改线框图并更新原型。 8. 用户评测User Evaluation,让用户使用原型,可以给他们一些任务去完成。根据用户在使用过程中的问题和建议进https://maimai.cn/article/detail?fid=1359670297&efid=IHFXGwN-xvLAjW62WSO5Eg
24.UI设计:ui设计和原型设计和交互设计有不同?UI设计、原型设计和交互设计是三个不同的设计领域,它们在设计的层面和目标上有一些区别,但也存在一些重叠和交集。 1.UI设计(User Interface Design),即用户界面设计,是指设计人员通过对视觉、图形、排版等方面的设计,来提高用户使用产品时的可用性和美观性。UI设计注重的是用户界面的外观和交互方式,力求让用户在使用https://www.adinnet.cn/bloginfo/2023_04/blog_6022.html