当前位置:文档之家› 交互设计的方法

交互设计的方法

交互设计的方法
交互设计的方法

交互设计的方法

交互设计的方法

长期以来我就有对几年来交互设计的心得进行总结整理的想法。回到中国来亲身体会到不少同行,主要是交互设计师和视觉设计师对于交互设计的困惑,以及其他行业对于交互设计的误解和滥用。后来我在小范围内开设了一个关于交互设计的讲座;现在把它整理成文,希望与同行切磋,共同进步。

这篇文章是我几年来在美国从事交互设计工作的一个经验总结。当时我们遵循以用户为中心(User-Centered-Design, 简称UCD)的设计原则,每一个项目都是不折不扣的按所有UCD的步骤进行。下面总结的交互设计的方法,是从UCD的过程中提炼出来,也就是说,同样适用于任何非UCD的设计过程。

交互设计的流程

如果一提到交互设计,你就想到画线框图或原型图,那你只对了五分之一。交互设计是一个过程,从开始到结束有一套系统的流程。原型图只是其中的一个环节。

当接到一个设计项目,怎么开始?都应该做哪些工作?怎样尽可能的保证交付物满足既定的功能以及用户体验层面的易用性?

第一步,是任务分析,列出界面所要完成的所有任务。第二步按各任务确定页面流程,建立信息架构。接下来是创建统一的页面布局包括分区等。然后在页面布局的基础上进行原型设计,可以是低保真和高保真的原型图。最后编写设计说明。

下面以设计一款动感相册界面为例,逐步讲解各个环节。

1. 任务分析

第一步任务分析。这里要做的是对于将要设计的这个新界面的所有任务的分析,也就是用户在界面上能进行的所有操作。这个分析在功能需求的基础上进行,需求方一般提供一个功能点的列表。

任务分析最常见的是任务列表,另外有任务流程和任务场景等。下面以任务列表为例。

列出所有主要任务,以及每个主要任务的子任务。再把子任务细分到各个步骤。形成下面这个列表。

主要任务1

子任务1

步骤1

步骤2

子任务2

步骤1

步骤2

主要任务2

以动感相册为例,任务分析列表如下:

1.浏览相册

1) 浏览相册列表

2) 选择相册

3) 浏览照片

2. 创建新相册

1) 添加照片

a) 选择已有相册

b) 选择照片

c) 排列顺序

d) 添加字幕文字

e) 选择动画效果

2) 添加模板

a) 浏览模板

b) 选择模板

3) 添加音乐

a) 浏览音乐列表

I. 试听音乐

II. 选择音乐

b) 增加新音乐

I. 打开本地文件

II. 选择音乐

4) 预览(略)…

5) 命名(略)…

6) 保存(略)…

3.修改相册(略)…

任务列表包括所有功能点,并对每一个功能点的逻辑关系进行整合。必要时会对各任务的使用频率和其它影响设计的重要因素进行分析,这里不做解释了。

2. 页面流程

任务分析完成后,进入设计的第一步,即设计页面流程。页面流程是设计的开始,也是重要的一环。它决定整个界面的信息架构和操作逻辑。

页面流程是上一步任务分析的自然转化。一般来说,一个主要任务就是一个页面,其它子任务也可以转化为页面。

以动感相册为例,页面流程如下:

页面几乎是把任务分析照搬过来了。所以上一步做好了,这一步很轻松,而且越往后越轻松。

注意这个流程图应该包括所有将要设计的新页面,一个不少,一个不多。它不仅确定页面内容,页面数量,还确定各页面之间的关系。如果在后来设计具体页面原型时,发现这个流程图多了或少了页面,或者页面关系发生了变化,说明你的功夫不到家(这个比

较难,我一般不苛求我们的设计师)。根据原型图来创建或者修改页面流程图,不是在做设计,而是在写设计说明。

3. 页面布局

第三步页面布局是具体页面设计的开始,在上一步知道有哪些页面需要进行设计后,这里对页面进行划分,对内容进行组织。最重要的一点是确定页面分区。

以动感相册为例,页面布局如下:

总布局,即通用布局,适合所有页面。

具体页面布局,在不与总布局冲突的情况下,有更细节的布局。

页面布局赋予零碎的内容以逻辑性,以分区的形式把页面各区域所对应的功能区确定下来,减少具体设计时的随意性。这是设计严谨与否的表现所在。把类似的操作放在一起,对于用户来说是可以预见的,用户能够判断哪个操作在哪个区域,减少盲目寻找带来的困难和疑惑。

4. 原型设计

这一步是大家熟知的,即具体页面的设计。这一步设计把所有的界面元素表现出来。可以有低保真和高保真原型图。低保真即是线框图,高保真多是接近最终效果图。

下面是动感相册的低保真原型图。

5. 设计说明

最后一步需要做的是对所有页面进行详细的描述,包括对页面上所有元素进行说明,比如默认状态,跳转页面,字号字体,尺寸等。这里就不解释了。这是交给开发人员的文档,以及测试人员进行测试的依据。

小结

交互设计是一个过程,它不仅仅是画线框图。交互设计最关键的两个环节是页面流程和页面布局,前者建立清晰的架构和严密的逻辑,后者整合零散的信息并确定分明的主次关系。这一切都是为了我们的终极目标——让我们的界面符合用户的预期,不带给他们任何的意外。一切都在用户的意料之中。

产品设计基本流程

产品设计流程 产品开发流程和项目管理流程时常被大家关注,合理的过程是团队协作的基础。在大家把产品的功能和特性放在第一位的时候,开发和项目的管理至关重要,而产品的设计却往往被忽视,开发团队会为了那些晦涩难懂、令人费解的功能而夸夸其谈,复杂的产品特性通常会迫使产品团队放弃优雅简洁的设计,用户体验永远是可能是项目过程中最不重要的环节。如果你和你的团队希望重视产品的设计,就应该首先从团队架构和项目流程上来进行改造,我们的目标是设计优先、用户至上。当然技术团队和产品开发还是至关重要的环节,你需要将设计和开发的流程无缝的整合起来。 下面的团队架构和流程应该适用于各种产品、软件和网站的设计(如果您有好的建议或者不同的看法,可以直接留言或者邮件给我) 产品设计团队的六种逻辑角色 你也许不需要六个人来组成团队,但每个人的职能必须清晰。《》中关于“团队组织”的建议值得参考,他告诉你了在这个快速的软件开发时代如何去组建一个高效的产品团队。 业务负责人() 通常是你的、产品最初的策划人或者是整个产品的业务主管,他们会分析产品的市场、定位客户、定义品牌、提出想法,同时拿定主意,产品团队里面的万金油产品经理() 对产品负责的人,产品主管,他们会提出概念、收集确定需求、制定计划、控制进度并保障产品质量。在很多团队里面“业务负责人”和“产品经理”通常是同一个人。 产品设计() (人机界面设计), (工业设计)(信息架构设计)。将这三种职能混合起来,因为他们并不能孤立存在,我们统称为产品设计。他们决定产品的所有功能细节,配合产品经理制作产品原型,与视觉设计师和用户研究人员共同完成产品的详细设计。产品设计过程中最重要的产品功能说明文档将由他们来跟踪完善。 视觉设计() 产品团队中最有艺术细胞的人,他们完成产品的外观和界面设计,是否好看由他们说了算,他们作为产品团队的艺术设计权威指导。 用户研究() 最接近用户并了解用户的人(不需要技术高手或者是逻辑人),他们从产品的原型阶段就介入,配合产品设计师们做典型用户分析和用户目标分析,并对原型进行可用性测试,并制定最终的可用性测试计划。在很多产品团队里面,产品设计、视觉设计和用户研究通常会由一到两个人来担任,设计师会做用户研究,视觉设计是会做信息架构分析。 产品开发() 产品团队中的技术开发人员,网页制作或者程序开发,他们是产品的最终实现者,他们开发并进行单元测试,控制产品的最终品质。 产品从设计到发布的六个阶段 产品开发的过程可以看作是整个产品设计环节的最终实现部分,对于非技术人员来说它是一个把理想变成现实的神秘阶段

一文读懂对话式交互技术原理及流程设计

一文读懂对话式交互技术原理及流程设计 一、对话式交互技术 以智能音箱、智能电视为代表的对话式交互,是时下非常火热的、且能够走近我们生活的人工智能子领域。 什么是对话式交互呢?我们首先从一个例子开始。贾维斯,电影《钢铁侠》中那位钢铁侠的AI 管家,他能独立思考、可以实时帮钢铁侠处理各种事情,包括计算海量数据。其中最让观众印象深刻的就是,贾维斯可以随时随地像人一样进行口语交流,来解决钢铁侠的问题。 贾维斯能听、会说,能实时理解主人的对话意图并根据实际场景进行下一步的对话,如果在对话过程中碰到有歧义的情况,他还会追问钢铁侠,让他提供更多的信息来消除歧义。贾维斯的这些能力就是对话式交互要提供的,其中的核心是VUI (V oice User Interface,语音用户界面)的设计。相对于GUI(Graphical User Interface,图形用户界面),VUI 解放了人的双手,某些场景下,简单的一句语音命令就能代替GUI 下鼠标/ 遥控器的多次点击,这带来的不只是方便,还节省了时间。一个好的VUI 系统,能够让用户尽可能通过最少轮次的对话实现既定意图的执行。贾维斯总能在危机时刻帮到钢铁侠,他是一个具有完美VUI 的语音助手。 嗯,我们不要入戏过深,贾维斯是一部电影里的虚拟系统。那么,现实生活中,我们能创造出来一个接近贾维斯的对话式交互系统吗?我们该怎么做呢?呃,很遗憾,以当前的科技发展水平,我们还做不到电影里那么智能,更不用说让机器有意识。但人机交互并不是昨天才发明出来的,人类在这个领域已经探索了几十年,我们可以实现钢铁侠与贾维斯的交互方式,并用这种方式来帮我们处理一些数据或控制我们身边的一些硬件设备(比如让语音助手根据天气提供穿衣建议或者控制厨房和卧室的各个家电),这就是我们要聊的对话式交互技术。 对话式交互技术包括了语音识别/ 合成、语义理解和对话管理三个部分。当下的对话式交互产品主要分两类:以微软小冰为代表的开放域(Open Domain)对话系统和以亚马逊

用户界面交互设计中英术语

交互设计常用中英文专业术语(完整版) 时间:2017-05-31 出处:Designer_Oliver 阅读量:1381 最近开始整理交互设计师在工作和职场交流中常用的英语词汇,包括了设计方向、设计领域、职业、专业学科、交互设计专用术语、设计方法、界面、ui、布局、控件、手势、产品、商业、技术、用研、数据分析、计费模式、信息可视化、成果、其他20个方面,陆续通过4-5篇文章的形式分享给大家。 设计方向 conversation design 对话式设计 experience design 经历设计 graphic design 平面设计 industry design 工业设计 information design 信息设计 interaction design 交互设计 product design 产品设计 service design 服务设计 ui design 界面设计 user experience design 用户体验设计 user centered design 以用户为中心的设计 visual design 视觉设计 设计领域 ai_artificial intelligence 人工智能 ar_augmented reality 增强现实 diet 饮食 education 教育 finance 金融 mobile internet 移动互联网 internet 互联网 iot_internet of thing 物联网 smart home 智能家居 shopping 购物 traditional industry 传统行业 ugv_unmanned ground vehicle 无人驾驶地面车辆 vr_virtual reality 虚拟现实 wearable device 穿戴式设备 职业 bd_business development 业务拓展 front end 前端,前端工程师 interaction designer 交互设计师 operation 运维工程师 product designer 产品设计师

一名交互设计师必备的知识架构

一名交互设计师必备的知识架构 2014-12-8 10:10 发布者: yuanxingbbs查看: 11351 评论: 4来自: jeffreyblog 摘要: 如果你也是一枚刚入门的交互设计师,是不是常有这样一种感觉:不知从何下手,闷头读了一大堆书、学了一大堆软件、画了一大堆图之后还是感觉心里不踏实,总害怕自己还缺点什么,恨不得要有本《交互设计学习大纲》就好 ... 如果你也是一枚刚入门的交互设计师,是不是常有这样一种感觉:不知从何下手,闷头读了一大堆书、学了一大堆软件、画了一大堆图之后还是感觉心里不踏实,总害怕自己还缺点什么,恨不得要有本《交互设计学习大纲》就好了。出现这个问题有两个原因,一是交互设计师没有可视性强的产物,交互设计师的产物一般是线框图、流程图、信息架构图、说明文档等等,但这些东西既不如视觉设计稿华丽精美,也不如程序代码高贵冷艳,在外行人看来初级交互设计师和高级交互设计师画的好像都差不多,轻易看不出你修炼到了几层功力;第二个原因是交互设计是跨学科的专业,需要学的太多太杂,今天这位大神说要学好PS,明天那位大神又说要学程序,后天又有大神说要学心理学,blablabla…信息量太大、太乱就会导致这种不知所措的局面。 今天,我制作了一份“交互设计师的知识架构图”,如下图所示,该图对交互设计师所需的知识储备进行了梳理,并按照交互设计的一般流程进行排列,从需求分析开始,到信息架构、流程设计,到原型设计,再到可用性测试。以这样的逻辑为大家介绍每一个环节涉及到的知识,化整为零,这样,童鞋们也就可以采取逐个击破的方法一步一个脚印学习交互设计,接下来我也会为大家推荐相应环节涉及到的文章或者书籍,等你全部掌握之后,相信就不会再有不踏实的感觉了。

产品交互设计的步骤有哪些

产品交互设计的步骤有哪些 互联网时代,产品设计都是基于交互设计的,那产品的交互设计流程到底是怎样的呢?今天我们就来看看。 一个完整的交互设计主要有以下8大步骤: 一、定性研究(QualitativeResearch) 产品经理需要针对所有目标客户、潜在客户等所有可能使用你产品的人,通过问卷、访谈等一切可调研的形式,了解用户一下五个方面: 1、行为(Activities):例如麦子学院用户多久用一次麦子学院、一次用多久? 2、态度(Attitudes):例如麦子学院用户怎样看待麦子学院这个产品? 3、资质(Aptitudes):例如麦子学院用户的学历怎样? 4、动力(Motivation):例如麦子学院用户为什么用麦子学院? 5、技能(Skills):例如麦子学院用户对使用相关产品是否熟悉? 二、确定人物角色(Persona) 如果上面的定性研究很到位的话,这时你应该对你的用户有一定的了解了。根据定性研究的五个方面,你需要挑拣出最典型的一个或几个形象。确定这些人物角色(Persona)的主要特点及需求和目的。为了增加真实性,可以给人物角色(Persona)取名字,选一张照片,细化他们的背景资料。 三、写问题脚本(ProblemScenario) 基于对人物角色(Persona)的理解,罗列人物角色在使用产品时可能遇到的问题,把它们整理到一个简短的故事里,便于理解。 四、写动作脚本(ActionScenario) 像写故事一样,写人物角色在使用你设计好的产品时,发生的细节。注意,这个时候

你的交互方案的概念模型已经基本成型了,这个概念模型是通过解决问题脚本里的问题而得出的。 你要为已列出的问题想好可能的解决方案,然后写一个简短的故事把这些解决方案囊括进去。写成故事的好处是代入感较强,对别人来说容易理解。国内比较推崇故事版,但是把所有情景画出来的效率是非常低的。 五、画线框图(Framework) 这个时候你对你的交互方案已经有了一个比较抽象的想法了,现在只要把它具象化就好了,即把动作脚本里的概念模型转化成视觉模型。 六、制作原型(Prototype) 作为产品经理,必会的一项技能就是产品原型制作,一般使用Axure、Pencil Project 等工具进行制作。在产品原型中,不可能实现所有的功能,但你必须要保证几个可以走通的任务,比如:能成功在麦子学院上观看视频教程。 七、专家评测(ExpertEvaluation) 产品原型制作完成后,召集至少两三个设计师或者对交互比较了解的人,反复测试原型,发现问题后修改线框图并更新原型。在测试过程中,你可以将原型所关注的几个任务列出来,以免专家不知道原型哪部分可交互哪部分不可交互。 八、用户评测(UserEvaluation) 专家测评完成后,便可进行用户测评了。找一些典型的用户使用原型,把任务列给他们,让他们自己尝试完成任务。记录下中间遇到的问题,设计师通过观察来进行评分。 比较常用的用户评测方法是ThinkAloud,让用户使用原型完成指定的几个任务,让他们在使用过程中将他们的每一步和心中的想法说出来。如果他们忘记说或者不知道该怎么说,你可以适当提问。与此同时,你要将屏幕和声音录下来,可以用录屏软件或摄像头。完

交互设计的方法

交互设计的方法

交互设计的方法 长期以来我就有对几年来交互设计的心得进行总结整理的想法。回到中国来亲身体会到不少同行,主要是交互设计师和视觉设计师对于交互设计的困惑,以及其他行业对于交互设计的误解和滥用。后来我在小范围内开设了一个关于交互设计的讲座;现在把它整理成文,希望与同行切磋,共同进步。 这篇文章是我几年来在美国从事交互设计工作的一个经验总结。当时我们遵循以用户为中心(User-Centered-Design, 简称UCD)的设计原则,每一个项目都是不折不扣的按所有UCD的步骤进行。下面总结的交互设计的方法,是从UCD的过程中提炼出来,也就是说,同样适用于任何非UCD的设计过程。 交互设计的流程 如果一提到交互设计,你就想到画线框图或原型图,那你只对了五分之一。交互设计是一个过程,从开始到结束有一套系统的流程。原型图只是其中的一个环节。 当接到一个设计项目,怎么开始?都应该做哪些工作?怎样尽可能的保证交付物满足既定的功能以及用户体验层面的易用性? 第一步,是任务分析,列出界面所要完成的所有任务。第二步按各任务确定页面流程,建立信息架构。接下来是创建统一的页面布局包括分区等。然后在页面布局的基础上进行原型设计,可以是低保真和高保真的原型图。最后编写设计说明。 下面以设计一款动感相册界面为例,逐步讲解各个环节。 1. 任务分析 第一步任务分析。这里要做的是对于将要设计的这个新界面的所有任务的分析,也就是用户在界面上能进行的所有操作。这个分析在功能需求的基础上进行,需求方一般提供一个功能点的列表。 任务分析最常见的是任务列表,另外有任务流程和任务场景等。下面以任务列表为例。

交互设计的方法7页word文档

交互设计的方法 长期以来我就有对几年来交互设计的心得进行总结整理的想法。回到中国来亲身体会到不少同行,主要是交互设计师和视觉设计师对于交互设计的困惑,以及其他行业对于交互设计的误解和滥用。后来我在小范围内开设了一个关于交互设计的讲座;现在把它整理成文,希望与同行切磋,共同进步。 这篇文章是我几年来在美国从事交互设计工作的一个经验总结。当时我们遵循以用户为中心(User-Centered-Design, 简称UCD)的设计原则,每一个项目都是不折不扣的按所有UCD的步骤进行。下面总结的交互设计的方法,是从UCD的过程中提炼出来,也就是说,同样适用于任何非UCD的设计过程。 交互设计的流程 如果一提到交互设计,你就想到画线框图或原型图,那你只对了五分之一。交互设计是一个过程,从开始到结束有一套系统的流程。原型图只是其中的一个环节。 当接到一个设计项目,怎么开始?都应该做哪些工作?怎样尽可能的保证交付物满足既定的功能以及用户体验层面的易用性? 第一步,是任务分析,列出界面所要完成的所有任务。第二步按各任务确定页面流程,建立信息架构。接下来是创建统一的页面布局包括分区等。

然后在页面布局的基础上进行原型设计,可以是低保真和高保真的原型图。最后编写设计说明。 下面以设计一款动感相册界面为例,逐步讲解各个环节。 1. 任务分析 第一步任务分析。这里要做的是对于将要设计的这个新界面的所有任务的分析,也就是用户在界面上能进行的所有操作。这个分析在功能需求的基础上进行,需求方一般提供一个功能点的列表。 任务分析最常见的是任务列表,另外有任务流程和任务场景等。下面以任务列表为例。 列出所有主要任务,以及每个主要任务的子任务。再把子任务细分到各个步骤。形成下面这个列表。 主要任务1 子任务1 步骤1 步骤2 子任务2 步骤1

交互设计概述·全

交互设计概述 1. 探索思想 如果我们问,交互设计是什么??家从 IxDC 的定义中能很快知道答案。 交互设计,又称互动设计(Interaction Design, 缩写 IxD 或者 IaD),是定义、设计?造系统的?为的设计领域。在于定义?造物的?为?式(the “Interaction”,即??制品在特定场景下的反应?式)相关的界?。[]1 很显然,如果根据定义去看,我们应该是云?雾?,根本看不懂它的定义,也?法理解交互设计是什么,又为何如此去定义的。?然,这种?法就不可取。?当?法理解?个东西是什么的时候,不妨问问??,为什么这个东西不是其他什么。 所以与其从正?去理解交互设计是什么,不如进?对它进?质疑与攻讦。当然,我们进?质疑与攻讦的?的,不是为了搞个?新闻,去否定交互设计的价值,?是通过这种质疑,去理解交互设计的合理性,存在的意义,从?加深对于交互设计的理解,在宏观层?去触及交互设计为什么是这样的。毕竟,?个合理的东西,从任何?度进?攻击都不应该会有破绽。 所以,第?件事,我们应该问问,交互设计是不是应该必须存在在世界上的?它的存在是有什么必然性吗?世界上没有交互设计,还能不能正常运作? 交互设计是如何诞?的?交互设计有什么??我们为什么需要去研究交互设计? 只有我们肯定了交互设计存在的合理性,我们才能更好地去理解,什么是交互设计。 2.交互设计存在的合理理性 2.1.界定交互设计的标准是什什么? 既然我们质疑交互设计存在的合理性,我们?先要做的,应该是界定,什么能够称得上是交互设计?能被称为交互设计的界定标准是什么?因为如果没有这个标准,?切皆可以被称为「交互设计」,那么我们所有讨论的案例、理论、设计都将会是没有意义的。我们出?个问题?问?下: ??瓶?的包装设计能不能被称为交互设计? ??个栏杆的指?设计设计能不能被称为交互设计? ?飞机的控制系统仪表盘设计能不能被称为交互设计?

09235设计原理-2016年1月自考真题及答案

09235设计原理-2016年1月自考真题及答案

09235设计原理-自考真题 2015年1月广东省高等教育自学考试 重要提示: 1. 本试卷共4页,满分100分;考试时间150分钟。 2. 应考者必须在“答题卡”上要求作答,答在试卷上无效。 一、单项选择题(本大题共10小题,每小题2分,共20分)在每小题列出的四个备选项中只有一个是符合题目要求的,请将其选择并将“答题卡”的相对应代码涂黑。错涂、多涂或未涂均无分。 1. 第二次世界大战后,商业设计在获得极大地发展。 A.英国 B. 德国 C. 美国 D. 意大利 2.目前,美国、英国、日本等国标定颜色依据的

基础是的色彩理论。 A.孟塞尔 B. 艾维斯 C. 埃舍尔 D. 乌特松 3.人的视觉倾向于连接与聚合具有相似的物体,这种常见的视觉归类方法是基于人的()心理。 A.认知 B. 行为 C. 视觉 D. 完形 4.最早提出头脑风暴法的是现代创造学创始人 A.中村吉郎 B. 奥斯本 C. 鲁尔巴赫 D. 乌特松 5.设计活动表现出一定的程序性特点,在阶段,将想象带回符合逻辑的现

实世界。 A.界定 B. 创新 C. 分析 D. 整合 6.世界上第一位专职的汽车设计师创造了汽车设计的模式——“有计划的商业废止制。A.贝伦斯 B. 厄尔 C. 提格 D. 罗维 7.在设计管理营销策略中,企业开发和设计不同的类型的产品,或在同类产品中开发系列产品的策划略是 A.率先进入市场策略 B. 多元化策略 C. 集中策略 D. 通用化策略 8.产品的功能包括物质和精神两个方面,其中产

品本身所具备的机构性能是产品的 A. 技术功能 B. 使用功能 C. 审美功能 D. 象征功能 9.将美国首都华盛顿规划成方格网加放射性道路的城市格局的是 A. 乔治·华盛顿 B. 托马斯·杰弗逊 C. 皮埃尔·朗法皮埃尔·查尔斯·郎方 D. 约翰·亚当斯 10.汉字发展史的转折点是的出现,它是古今文字的分水岭。 A. 大篆 B. 小篆 C. 隶书 D. 楷书 11.在染织图案造型中,花果草木、鸟兽虫鱼、田园风光等传统图案属于造型。

交互设计心得整理

交互设计心得整理 长期以来我就有对几年来交互设计的心得进行总结整理的想法。回到中国来亲身体会到不少同行,主要是交互设计师和视觉设计师对于交互设计的困惑,以及其他行业对于交互设计的误解和滥用。后来我在小范围内开设了一个关于交互设计的讲座;现在把它整理成文,希望与同行切磋,共同进步。 这篇文章是我几年来在美国从事交互设计工作的一个经验总结。当时我们遵循以用户为中心(User-Centered-Design, 简称UCD)的设计原则,每一个项目都是不折不扣的按所有UCD 的步骤进行。下面总结的交互设计的方法,是从UCD的过程中提炼出来,也就是说,同样适用于任何非UCD的设计过程。 交互设计的流程 如果一提到交互设计,你就想到画线框图或原型图,那你只对了五分之一。交互设计是一个过程,从开始到结束有一套系统的流程。原型图只是其中的一个环节。 当接到一个设计项目,怎么开始?都应该做哪些工作?怎样尽可能的保证交付物满足既定的功能以及用户体验层面的易用性? 第一步,是任务分析,列出界面所要完成的所有任务。第二步按各任务确定页面流程,建立信息架构。接下来是创建统一的页面布局包括分区等。然后在页面布局的基础上进行原型设计,可以是低保真和高保真的原型图。最后编写设计说明。 下面以设计一款动感相册界面为例,逐步讲解各个环节。 1. 任务分析 第一步任务分析。这里要做的是对于将要设计的这个新界面的所有任务的分析,也就是用户在界面上能进行的所有操作。这个分析在功能需求的基础上进行,需求方一般提供一个功能点的列表。 任务分析最常见的是任务列表,另外有任务流程和任务场景等。下面以任务列表为例。 列出所有主要任务,以及每个主要任务的子任务。再把子任务细分到各个步骤。形成下面这个列表。 主要任务1 子任务1 步骤1 步骤2 子任务2 步骤1 步骤2 主要任务2

交互设计的一般步骤

交互设计的一般步骤——引自维基百科 一般而言,交互设计师都遵循类似的步骤进行设计,为特定的设计问题提供某个解决方案(注意,没有绝对正确的方案)。设计流程的关键是快速迭代,换言之,建立快速原型,通过用户测试改进设计方案。 如下是交互设计步骤的要点: 用户调研 通过用户调研的手段(介入观察、非介入观察, 采访等), 交互设计师调查了解用户及其相关使用的场景,以便对其有深刻的认识(主要包括用户使用时候的心理模式和行为模式),从而为后继设计提供良好的基础。 概念设计 通过综合考虑用户调研的结果、技术可行性、以及商业机会,交互设计师为设计的目标创建概念(目标可能是新的软件、产品、服务或者系统)。整个过程可能来回迭代进行多次,每个过程可能包含头脑风暴、交谈(无保留的交谈)、细化概念模型等活动。 创建用户模型Scenarios/Personas/Profiles 基于用户调用得到的用户行为模式,设计师创建场景或者用户故事或者storyboard来描绘设计中产品将来可能的形态。通常,设计师设计用户模型(persona)来作为创建场景的基础. 创建界面流程 通常,交互设计师采用wireframe来描述设计对象的功能和行为。在wireframe中,采用分页或者分屏的方式(夹带相关部分的注解),来描述系统的细节。界面流图主要用于描述系统的操作流程。 开发原型以及用户测试 交互设计师通过设计原型来测试设计方案。原型大致可分三类:功能测试的原型,感官测试原型以及实现测试原型;总之,这些原型用于测试用户和设计系统交互的质量。原型的可以是实物的,也可以是计算机模拟的;可以是高度仿真的,也可以是大致相似的。 实现 交互式设计师需要参与方案的实现,以确保方案实现是严格忠于原来的设计的;同时,也要准备进行必要的方案修改,以确保修改不伤害原有设计的完整概念。 系统测试

跟我学人机交互界面设计理论与技术及应用——Web前端开发工程师

1.1跟我学人机交互界面理论与技术及应用——Web前端开发工程师 1、Web前端开发相关技术简介 (1)Web前端开发工程师是一个很新的职业 在国内乃至国际上真正开始受到重视的时间不超过5年,Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。 在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。 网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。 (2)RIA技术不断地深入和普及 随着Web 2.0概念的普及和W3C组织的推广,网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风,铺天盖地席卷而来,包括新浪、搜狐、网易、腾讯、淘宝网等在内的各种规模的IT企业都对自己的网站进行了重构。 为什么它们会对自己的网站进行重构呢?有两个方面的原因: 第一,根据W3C标准进行重构后,可以让前端的代码组织更有序,显著改善网站的性能,还能提高可维护性,对搜索引擎也更友好; 第二,重构后的网站能带来更好的用户体验,用XHTML+CSS重新布局后的页面,文件更小,下载速度更快。 2、了解网站重构的基本目的 网站重构的目的仅仅是为了让网页更符合Web标准吗?不是!重构的本质是构建一个前端灵活的MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript 负责调度数据和实现某种展现逻辑(Controller)。同时,代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。 3、Web前端开发工程师 DHTML可以让用户的操作更炫、更吸引眼球;Ajax可以实现无刷新的数据交换,让用户的操作更流畅。对于普通用户来说,一个网站是否专业、功能是否强大,服务器端是用J2EE+Oracle的强大组合,还是用ASP+Access的简单组合,并没有太明显的区别。 但是,前端的用户体验却给了用户直观的印象。随着人们对用户体验的要求越来越高,

交互设计-信息构架的若干原则

交互设计:信息构架的若干原则(第一部分) 本文不准备重复讨论Web信息构架过程中的细节(比如,搜索框应当放什么地方),这些细节很多文章都讨论过了。我们把重点放在与网站信息构架的相关核心原则和方法上。适当的使用这些原则可以简化从互联网认知信息的过程,且使呈现的信息更容易被获取。 为了能顺利理解并恰当运用这些原则,我们首先要理解什么是信息构架,信息架构的目标、核心理念、组件和构架的一般过程是什么。 了解信息构架 什么是信息构架? Information Architecture(简称IA)是美国建筑师沃尔曼(RichaId SaMl wMMan)先生在1975年创造出的一个新词语。 IA的基本定义: IA是组织信息和设计信息环境、信息空间和信息体系结构,以满足需求者的信息需求,实现该目标的一门艺术和科学,他包括调查、分析、设计和实施过程,涉及组织、标识、导航和搜索系统的设计。 为什么需要信息构架: 由于互联网上的信息种类繁多、内容特征多种多样的多媒体信息,信息存储分散无序,加之超链接技术的广泛使用,互联网具有非常复杂的信息空间,用户在其中很容易迷惑和迷失方向。因此,互联网网尤其需要信息构架成为信息序化和优化的思想和工具,以帮助人们在异质的信息空间中管理和获取信息。 信息构架的目标: 1)获得和理解信息内容。将信息组织好。 2)优化信息结构。 3)面向用户传达信息内容。 4)提供一个清晰的易于信息获得的界面。 核心理念: 信息架构的核心理念是以用户为中心。信息构建是信息用户、信息内容与信息组织三者的交集,信息生态在其中起着很重要的作用,而用户、内容和组织构成了信息构建的三个生态环。 The Three Circles of Information Architecture by Peter Morville 信息构架组件: 信息架构的核心组件包含:组织系统、标签系统、导航系统、搜索系统四个方面。 信息架构的一般过程: 概念设计→组织信息内容→生成信息结构→设计信息界面→提供信息导航→信息展示和信息发布。 在对信息架构有了初步认识的基础上,我们来进一步理解李钊在《互联网产品的交互设计方法(UPA2008讲稿)》中提到的指导信息构架的若干原则: 1. 对海量信息提供多种检索方式 一个网站最根本的框架由众多属性相同的信息基本单位组成。因此对信息的组织和检索是我们进行信息架构的核心内容,设计信息组织系统也是建立信息构架导航系统的基础。而如何让用户从网站的海量信息资源中便捷、准确地检索到所需信息已成为我们关注的焦点问题。常见的信息组织及检索方式有:

交互设计三要点

学会三点,即可打造良好的交互设计效果 交互设计,表现出来的呈现方式可谓是多种多样, 不过你只要掌握好了以下三点的使用技巧,同样可能轻松打造出良好的交互设计效果。 1.响应 对即将产生交互内容的区域提供给操作者一种响应机制。 参考实例:https://www.doczj.com/doc/185197084.html,

不同的内容有很多响应的处理方法, 比如:链接加个下划线,图片链接变换下外边框颜色, 鼠标划过某区域,变化下背景色,同时出现一些隐性的操作按钮,如删除操作等。注意:忌讳因为某区块产生响应,而让其它区块边界产生生硬的错位。

补充:提示音也是一种响应。 比如:用iPhone发送邮件,发送成功后会听到“嗖...”的一声。另一个参考实例:

2.过渡过程或转场效果 对即将产生的交互变化,提供一个过渡过程或转场的效果。 过渡过程,如:延时移动、淡入淡出等。 转场效果,如:滑动、门开关、缩放、翻转等。 参考实例:https://www.doczj.com/doc/185197084.html, 点击某个封面,延时移动给操作者带来一个很好的引导阅读过程。 注意:要频繁处理的操作,过渡过程耽误时间的同时,还可能造成误点击。

过渡效果有时候还可以减少不必要的态度变更提醒: 比如,删除邮件后不需要显示邮件已删除。 而是点击删除后,该条内容闪烁一下(响应),然后逐渐消失, 因为你已经真实的看到了删除的过程,所以不必再显示邮件已删除的状态变更提醒。 3.移位 在不弹层、弹窗情况下的内容移位。合理的运用页面内容的展开、收起。 操作者在即将产生交互的地方,就近通过这种方式就完成了轻便的操作。 参考实例:https://www.doczj.com/doc/185197084.html,/ https://www.doczj.com/doc/185197084.html,/demo下边的展开与收起

产品设计原理与方法学习报告

产品设计原理与方法学习报告 虽然仍有许多人将设计视为一种艺术形式,由设计师决定产品的模式,但事实上绝大部分设计师是在商业环境中工作,他们的设计作品是否成功,取决于产品能否满足顾客和用户。因此设计师必须具备理解民众需要的能力,除了已知的需要,还包括隐含的、尚未浮面的需要。过去人们普遍认为设计师的工作就是为产品提供吸引人的外壳包装,无须考虑产品对人、对社会与环境的影响。如今设计师要改变自己的角色——不仅需要满足人们目前的愿望,还必须为人们提供他们并不知道自己是否想要的产品,或者从未想过他们能够拥有的产品。 然而现在的设计师存在偏颇的观念与实践:1、平均化,在处理不同的事物和变量时采用平均值。2、在设计中寻找共通点,然后将共通点夸张。3、创造所谓的标准。这其中一个重要原因是设计师对未知、意想不到和未能预决事物的恐惧。设计师总想要预先决定结果,排除无法确定的事物,而标准化的方式让他们可以将变量变为常数。标准化方式大多数时候欠缺从其他角度来考虑设计的品质,如不同使用者的自由与不同选择。因此,设计师要考虑细节,根据实际的项目对相关参数进行仔细修改,如果一成不变的照搬设计,就不会有好的设计品质,很容易陷入一种偏颇的观念:一个地方的民众(使用者)与其他地方的民众是一样的或相似的。改变对设计的品质有极大的、多重的影响,因此设计要满足不断改变的需要和希望。面对改变时,设计师倾向采取三种方法解决问题:(1)寻找替代产品或新的设计来克服问题。(2)在设计中设定许多法规与控制,无论任何时候使用者都需要遵循,从而将使用者固定在一个预先决定的范围中,控制他们的行为,确保设计产品能够达到预期结果。(3)提醒或教育。但其重要缺陷就是使用者的行为未必会符合期望。 综上,只有不断发掘使用者需要和希望,追寻社会和文化的改变,才能够提出新的解决问题方法和设计方案,以服务公众。设计师应当重视和尝试采用“共同决策”和“自我决策”方式,才能令作品具有高度的使用者适用性。应给予使用者更多机会:①认识自己的需要和喜好②建立目标③发表意见④参与决策⑤评估结果⑥建立机制跟进使用设计成品后的情况。除了参考文献和使用者对话外,设计师还需深入观察和分析使用者在某一特定公共环境中的各种行为,才能真实了解使用者的反应,应建立一套与使用者双向沟通的方式与实践模式。

互联网团队介绍,流程和设计方法

产品团队,设计介绍 李崇森

产品团队日常的工作 ?指的是负责定义和开发产品的团队人员 成员的角色和职责。 ?探索、开发富有创意的产品时,反流程 复应用的步骤和成功的实践经验。产品 ?富有创意的产品具有的鲜明特性。

?富有创意和用户喜爱的产品并非来自偶然,每款成功的产品都遵循一定的规律: ??产品经理的任务是探索产品的价值、可用性、可行性。 ??产品开发很重要也很困难,但用户体验设计通常比产品开发更重要更困难。 ??工程师不擅长用户体验设计,因为工程师脑子里想的是实现模型,而用户看重的是产品的概念模型。 ??用户体验设计就是交互设计、视觉设计(对硬件设备来说,则是工业设计)。

?功能(产品需求)和用户体验设计密不可分。产品创意必须尽早地、反复地接受目标用户的试用,以便获取有效的用户体验。 ?让用户试用高保真的产品原型,可以简单、方便、快捷地验证创意, 获取真实的用户体验。 ?高保真产品原型是全体团队成员了解用户需求和用户体验最有效的途径。?产品经理的目标是在最短时间内把握复杂的市场/用户需求,确定产品的基本要求——价值、可用性、可行性。 ?一旦认定产品符合以上基本要求,它就是一个完整的概念,去掉任何 因素,都不可能达到预期的结果。

产品经理视觉设计工程师 交互设计工程师产品经理: 1.评估产品机会(Product Opportunity );定义 要开发的产品。产品创意的来源很多,包括公司高 管的意见、用户的反馈、可用性测试的结果、产品 团队和营销团队的点子、业内人士的分析等。应该 有人严格审核这些创意,判断是否值得采纳。产品 经理就是负责这项评估的人,最终输出的是一个MRD 2.探索产品的解决方案,包括基本的产品特征和功 能、产品的用户体验、产品的发布标准。这些也属 于产品经理的工作范畴,而且是产品经理的核心职 责,最终输出的是PRD 文档。

产品设计原理

产品设计的程序产品设计中的工作内容设计大纲的内容产品设计的原则产品设计的原则是指在产品设计过程中的四大基本原则,它包括:易用性原则、求适性原则、致美性原则和创新性原则四个方面;其中求适性原则是其核心内容,它又包括适宜、适合、适当、适应和适度五个方面。应该说,掌握了“四则”,也就掌握了产品设计的核心和精髓,它是整门课提纲携领的内容。产品设计的系统性方法指什么?系统论的思想、方法及任务?产品设计系统的特性?产品设计的系统性方法指什么?系统论的思想、方法及任务?产品设计系统的特性?产品系统设计思路?系统设计思路?系统概念在现代设计中的三层含义第一,系统概念被用于工业设计后,人们不再把设计对象看成是孤立的个体,而是将其置身系统之中,使功能设计不再局限于单一的设计对象,而是考虑它与其它环境因素之间的关系,考虑在系统环境中人的整体需要,这样的设计更符合实际的使用情况,在这样的大前提下产品系统概念应运而生。设计开始既考虑设计对象自身各组成元素所构成的基础系统,即材料、结构、色彩、功能、造型之间的相互关系以及它们各自与它们所组成的统一体的关系,同时有又将设计对象整体作为子元素放在经济、社会、技术这样大的宏观系统中去考虑,从而更好的实施设计本身。第二,从系统概念出发,单件家具和工具也被看成是一个系统,把它们设计成组合部件,容易安装,容易拆卸。从系统的角度出发,从三维立体系统扩展到四维持续的发展系统,既要从整体与局部的关系考虑问题,又要用发展的思维去把握整体。第三,考虑物体之间的位置关系。从系统的角度考虑感性工程因素对设计对象的影响,把握系统结构。产品的生命周期?理想的产品生命周期形态的特征?产品的生命周期?理想的产品生命周期形态的特征?产品形态形态是传达信息的第一要素。所谓形态,是指由内在的质、组织、结构、内涵等本质因素延伸到外在表象因素,通过视觉而产生的一种生理、心理过程。它与感觉、构成、结构、材质、色彩、空间、功能等要素紧密联系。产品设计的美学规律美学规律?产品设计的美学规律产品设计思维思维一般由四个方面组成:思维的主体、思维的客体、思维的工具、思维的协调等。思维的主体即人;思维的客体即思维的对象;思维工具即思维过程中所借助的概念和形象;思维的协调是指在思维过程中,多种思维方式的整合,也就是说,在思维的过程中,有时单一的思维方式是不能解决问题的。 产品设计方法的具体原则1、功能性要求:物理功能——产品的性能、结构的方便性、安全性、易用性等;心理功能——产品的造型、色彩、肌理和装饰诸要素予人愉悦等;社会功能——产品象征或显示个人的价值、兴趣爱好或社会地位等。2、审美性要求:产品的审美不是设计师个人主观的审美,只有具备大众普遍的审美情调才能实现其审美性。产品的审美,往往是通过新颖性和简洁性来体现,而不是依靠过多的装饰才成为美的东西,它必须是满足功能基础上的美好的形体本身。 3 经济性要求产品设计师必须从消费者的利益出发,在保证质量的前提下,研究材料的选择和构造的简单化,尽量减少成本,提高功能,这样才能为用户带来实惠,最终也为企业创造效益。4、创造性要求:设计的内涵就是创造。产品设计必须是创造出更新更便利的功能,或是唤起新鲜造型感觉的新的设计。5、适应性要求:产品总是为特定的使用者在特定的使用环境中使用而设计的。因此,产品设计必须考虑产品与人和环境的关系,要处理好“产品——人——环境”三者之间的关系,真正达到“设计以人为本”的要求。此外产品设计还应该是易于认知、理解和使用的设计,并且在环境保护、社会伦理、专利保护、安全性和标准化诸方面,也必须符合相应的要求。辐散思维与辐合思维辐散思维是创造性思维的主要成分,所以,有的心理学家认为,创造性思维就是辐散思维。辐散思维又称发散思维、求异思维,它是根据一定的条件,对问题寻求各种不同的、独特的解决方法的思维,具有开放性和开拓性.所以,美国心理学家巴特利特曾称其为“探险思维”,可见,广泛的开拓性,是辐散思维的主要特征。辐散思维的优势在于能够提供尽可能多的新设想。辐合思维是单向展开的思维,又称求同思维、集中思维,是针对问题探求一个正确答案的思维方式。辐散思维的发散所产生的各种设想,是辐合思维的基础,集中、选择是对正确答案的求证。这个过程不能一

《产品设计程序与方法》

学号: HENAN POLYTECHNIC UNIVERSITY 设计报告 2014 - 2015学年第1学期 课程名称:产品设计程序与方法设计题目: 班级:工设 1 班 姓名:付永民 导师:付永民 日期: 2014.11.15

1设计研究20分 目标市场调查的原始资料是否丰富,来源是否可靠,估算方法是否合理,数据是否基本准确,表达是否清楚。 竞争对手研究渠道是否多样,资料是否丰富,分析是否深入,表达是否清楚。 产品概念挖掘方法是否多样,挖掘出的概念是否全面新颖,表达是否清楚。 企业SWOT分析是否准确,表达是否清楚。 设计趋势分析是否准确,表达是否清楚。 2提炼概念10分 基本功能是否合理、全面、新颖、可行、有价值,附加功能是否合理、全面、新颖、可行、有价值,表达是否清楚。 使用方式要求是否合理、全面、新颖、可行、有价值,表达是否清楚。 形象要求是否合理、全面、新颖、可行、有价值,表达是否清楚。 生态要求是否合理、全面、新颖、可行、有价值,表达是否清楚。 经济要求是否合理、全面、新颖、可行、有价值,表达是否清楚。 产品概念展开表是否准确、全面、清楚。 3构思方案30分 为功能设计的解决方案是否切实可行,设计思路是否发散,是否图文结合,表达是否清楚。 为使用方式设计的解决方案是否易用,设计思路是否发散,是否图文结合,表达是否清楚。 为形象设计的解决方案是否有气质、有内涵、有文化,设计思路是否发散,是否图文结合,表达是否清楚。 为生态设计的解决方案是否耐用、节料、节能、易回收,设计思路是否发散,是否图文结合,表达是否清楚。 为经济设计的解决方案是否成本低、价格合理、利润高,设计思路是否发散,是

“交互设计”教学设计

课堂教学设计表 学科机械类授课班级 17工业设计 第 1 页

教学媒体的选择 知识点 编号 学习 目标 媒体 类型 媒体内容要点 教学 作用 使用 方式 所得结论 占用 时间 媒体 来源15.1-1 知识 理解 模型 课件 理解交互设计 概念 C举例验 证,建立 概念 B设疑— 播放—讨 论 模型分析的预期结果是学 生认识到:交互设计是“人 类交流和交互空间的设 计”,交互设计成为信息化 社会重点研究方向。 3分钟自制15.1-2 技能 方法 照片 投影 课件 1.交互设计使用情 境 B创设情 境,引发 动机 F播放— 讨论—总 结 案例展示的预期结果是学 生归纳出:交互设计方法 1.目标分析 2.任务分析 3. 界面设计4.技术架构 6分钟 自制 网络 下载 2.交互设计方法实 际应用 G设难置 疑,引起 思辨 B设疑— 播放—讨 论 分组讨论的预期结果是学 生运用设计方法提出新设 计方案,提高学生思维能 力。 4分钟 网络 下载15.1-3 情感图片学科前景展望 J归纳总 结,复习 巩固 F播放— 讨论—总 结 图片分析的预期结果是学 生了解学科发展趋势,培 养学生学习兴趣,激发学 生学习动机。 2分钟自制 ①媒体在教学中的作用分为:A.提供事实,建立经验;B.创设情境,引发动机;C.举例验证,建立概念;D.提供示范,正确操作;E.呈现过程,形成表象;F.演绎原理,启发思维;G.设难置疑,引起思辨;H.展示事例,开阔视野;I.欣赏审美,陶冶情操;J.归纳总结,复习巩固;K.其它。 ②媒体的使用方式包括:A.设疑—播放—讲解;B.设疑—播放—讨论;C.讲解—播放—概括;D.讲解—播放—举例;E.播放—提问—讲解;F.播放—讨论—总结;G.边播放、边讲解;H.其它. 板 书 设 计 第 2 页

交互设计面试常用题目汇总

既然是设计笔试题,那么最终的方案肯定是最重要的,最终的方案涉及到的是个人的基本功问题,这里爱莫能助。但是,如果只是把一堆原型图扔上去,却又犯了一个大忌,毕竟交互设计师不仅仅是一个线框仔,更重要的是“设计前的逻辑推导”,方案的好坏可能无法一眼看出来,但是可以通过交互设计师的思路去验证方案的准确性。除此之外,还可以通过流程的完整性去保证方案的可行性。 设计前的逻辑推导,主要有这几个方面:用户需求、目标用户和使用场景。笔试题的题干可以看作是产品经理提交给你的需求,分析完这些需求之后需要分析目标用户,之后推导用户的典型使用场景,最后才是给出设计方案。 而流程的完整性方面,可以参考交互设计流程图,这是一个相对完整的设计流程,在做设计题的时候,你可以看看你能涵盖多少流程。我只能说,流程越完整,整个方案的说服力就越强,不过可能没那么多时间精力去做而已。 下面就通过我之前做的一个笔试题来详细讲讲。笔试题的题干如下图:

这是一个典型的运营活动的设计,运营活动有典型的三个目的:拉新、促活和增留存。这个题目设计到的主要有后两个方面。 拿到题目之后,你就把他当成一个需求。这个时候你会怎么做呢?如果是在公司,一般是还会追问目标用户等信息,然后再去分析需求。当然笔试中就直接进入分析环节。

一般我都是采用关键字提取的分析方法,然后会提取出一些设计点。不过在这次笔试题中,我觉得有一些地方有些奇怪,我把这些点罗列出来做进一步的讨论。

罗列完设计点之后,我发现有一些设定会干扰到我的设计,但是又没有产品经理来商量,所以在这里我倒推了一下产品需求(正常情况下其实是没有这一步的)。

相关主题
文本预览
相关文档 最新文档