《数字媒体-交互设计原理与流程》由会员分享，可在线阅读，更多相关《数字媒体-交互设计原理与流程（64页珍藏版）》请在金锄头文库上搜索。
1、,人机界面设计,梅雪,人机界面设计的三个层面以用户体验为中心的设计-用户研究原型设计界面设计,目录,1,人机界面设计的三个层面,2,以用户体验为中心的设计-用户研究,界面设计交互设计信息架构,用户研究的方法用户界面心理学,3,原型设计,4,概念设计低保真原型高保真原型,常见页面元素布局颜色界面质感,界面设计,情感化设计可用性设计,人机界面设计的三个层面,界面设计交互设计信息架构,UI,UI = Users Interface用户界面，也称人机界面。是指用户和某些系统进行交互方法的集合，这些系统不单单指电脑程序，还包括某种特定的机器，设备，复杂的工具等。,IxD,IxD = Interactio
2、n Design 交互设计，又称互动设计。是指在用户与产品进行交互时，决定产品如何响应的一种行为和事件设计。 以按钮为例，界面设计涉及它看起来是否像按钮及该如何摆放，而交互设计则涉及按钮按下后产生的行为。,IA,IA = information architecture信息架构，其过程包括观察和分析复杂的信息集，然后设计一个系统，在这个系统里信息可以更好地被组织，更好地被程序化以及更好 地被理解。,UX,UX =User experience design用户体验。UX指用户体验，UX设计指以用户体验为中心的设计。人与系统交互时的感觉就是用户体验。 UX设计师研究和评估一个系统的用户体验，关注
3、与该系统的易用性，价值体现，实用性，高效性等。例如，研究一个电子商务站点的结账（checkout）流程，看看流程是否对用户友好易用；研究子系统的组件，比如研究用户在填写Web表单的时候如何更加高效和舒服。,互联网产品生产基本流程,市场调查用户研究竞品分析 制定商业计划、开发计划、需求文档 界面设计、交互设计 编写代码、开发 测试、迭代 上线、维护、营销 用户研究、二次开发,互联网产品生产基本流程,从一个案例开始来学习设计：,C先生从事跨境电商工作，销售茶叶，目前主要的销售渠道是亚马逊，他想再建设一个自己的电子商务网站来展示和销售自己的产品。目标客户群体：中国和美国年轻人他希望这个电商网站所具有
4、的功能：树立品牌、产品展示支付、交易功能（登陆、注册、购物车）评价功能 精准的产品搜索功能留言客服系统向邮箱发送信息,产品经理所要权衡的事：,产品业务需求。收入模式是什么，或者为什么这个产品对公司的战略目标很重要？技术限制。开发工程 师会与产品经理或团队沟通。这些限制可能是数据库存储的挑战、项目所花费的时间、产品的运行速度、代码与其它系统集成的复杂性，或者仅仅是从软件工程 角度来看所涉及的工作量。使用产品的用户体验。产品经理需要站在用户的角度考虑问题，去理解用户并平衡他们的需求。产品经理是最接近产品设计的一个角色，而产品设计师则通常扮演用户，站在用户的角度考虑问题。,以用户体验为中心的设计,用
5、户研究 - 需求文档概念设计 - 流程图、信息架构原型设计 - 交互流程、低保真原型图界面设计 - 高保真原型图,以用户体验为中心的设计 用户研究,以用户体验为中心的设计 用户研究 +市场调查+竞品研究,发现用户所需：Who：谁会使用这个产品？ What：他们想要知道什么？ When：他们何时想要知道？ Where：他们在哪使用你的产品？ Why：为什么他们用你的产品而不用同类其它产品？ How：他们如何使用你的产品？制定故事：谁，何时，何地，干什么，为什么，怎么样,以用户体验为中心的设计 设计流程而非设计页面,以用户体验为中心的设计 设计流程而非设计页面,电子商务：,会员、订阅：,把用户流程
6、和转化渠道结合起来。典型用户流程： 付费广告 社交媒体 邮件 搜索 新闻,以用户体验为中心的设计 设计流程而非设计页面,整合整个用户体验周期的流程画流程图。,以用户体验为中心的设计 设计流程而非设计页面,以用户体验为中心的设计 交互界面设计心理学,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,为诱导和潜意识设计界面大脑的不同部分具有不同的功能，我们在此可将大脑简化为三个不同部分：旧脑判断什么是安全的什么是危险的；负责身体运作：消化、移动和呼吸等。中脑处理情感，让你感知事物，也是很多冲动购买的根源所在。新脑
7、脑皮层，负责语言处理、讲话、阅读、思考计划,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,人旧脑和中脑的大多数行为都发生在我们的意识之外，我们的大脑中是新脑在加工我们意识到的东西。我们喜欢认为自己的决定经过深思熟虑，但其实 大多数决定和行为是无意识的。最有效的网站会与大脑的三个部分旧脑、中脑、新脑“对话”。,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,寻找归属：社会认同的作用 人们观察别人以决定自己的行为。在他们不确定要不要采取行动以及如何行时尤其如此。我们会做其它人也在做的事情，归属感对我们的吸引力很大。,以用户体验为中心的设计 交互界面设计心理
8、学,为诱导和潜意识设计界面,例：电商网站上的评分和评论对我们影响很大尤其是在无意识层面。数据分析表明在酒店销售电商网站中，能够看到酒店入住评价比不能看到顾客评价信息，其销售量会相差30%之多。,寻找归属,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,例：增加统计和柱状图让我们更加觉得自己的决定很明智。尽管我们的决定来自于不理智的过程。,寻找归属,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,例：我们会更相信我们认识并信任的人，如果评论有评论者的名字、照片、日期、身份标签，会使评论更可信。,寻找归属,以用户体验为中心的设计 交互界面设计心理学,为诱导和
9、潜意识设计界面,负债感：如何利用互惠和让步我们报答别人的帮助并且互换礼物，有些时候是出于爱或觉得好玩，但多数时候是由于责任感。如果我给了你礼物或者帮了你，你会有负债感，会希望送我礼物或者帮我的忙。这在很大程度上是一种无意识的感觉，而且会非常强烈。我们称之为互惠。,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,例：接受别人说“不”，也是一种赠予。这个技巧有时被称为“拒绝后让步”。发起者提出一个大多数人都不会接受的要求，在被拒绝后提出更合理的方案，最终可以获得他她一开始就想要的东西 。,负债感,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,负债感,例：包
10、邮、提供免费信息、小礼物。帮你捐款。,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,引发稀缺感：我们倾向于多要那些难以获得的东西。我们会认为数量有限的东西更值钱，所以我们更想得到它。 我们会认为难以获得的信息更有价值。,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,例：小米手机和苹果手机。市场部公开表示上市的第一批产品数量有限并且很可能供不应求。,稀缺感,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,例：“今日特价”“仅剩二双”,稀缺感,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,和稀缺相似的理论是，产品
11、的价格越贵（因而越难得到稀缺）质量就越好。我们无意识的追求贵的东西，无意识地把昂贵与高质量画上等号。,稀缺感,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,必杀技：封杀它。如果一件东西无法得到、被禁止了，那我们会很想要它。,稀缺感,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,主角是你：与自我为中心的无意识对话。你简单的旧脑只关注你自己，对它而言，一切都是你，你就是一切。 创建“场景”引入“顾客”，并拿“危险、性和食物”吸引顾客的旧脑。,以用户体验为中心的设计 交互界面设计心理学,为诱导和潜意识设计界面,主角是你：与自我为中心的无意识对话。你简单的旧
12、脑只关注你自己，对它而言，一切都是你，你就是一切。 创建“场景”引入“顾客”，并拿“危险、性和食物”吸引顾客的旧脑。,原型设计,概念设计 低保真原型 高保真原型,照片VS视频 单个页面VS整个交互系统,流线设计：“页面”的概念源于纸质印刷品，数字产品的体验并不是单一性的，一个体验总有它的开端，过程和结局。人们体验数字产品时并不只是一瞬间，而是一条流线。注意产品的：长、宽、“时间 ”。,原型设计,概念设计低保真原型高保真原型,原型设计,概念设计,原型设计,概念设计,原型设计,低保真原型,原型设计,低保真原型,原型设计,低保真原型 axure,界面设计,常见页面元素布局颜色界面质感,情感化设计可用
13、性设计,界面设计-常见界面元素,页头 headbanner logo nav Login or Regist,内容 contentText Img Button Link form,页脚 footSite map Copyright,BreadcrumbNavigation,界面设计-布局,布局就是布置视觉线索，“控制”用户的视觉路径。,界面设计-布局,F式布局用户浏览网页的一般模式：先看看页面的左上角，了解一下这是什么网站（因此此处适合放置Logo)“知道是什么”然后扫描一下页面的顶部（导航栏，搜索栏）“了解用法”下一步，用户的视线下移，开始阅读下一行的内容。用户进入“扫描模式”，一旦找到感
14、兴趣的内容便会打开。,界面设计-布局,F式布局,界面设计-布局,F式布局- 眼动热点图,热区（途中红色、黄色、橙色部分）代表用户注意力最集中的地方。,界面设计-布局,F式布局- 从上到下 从左到右,按照逻辑，我们得出以下结论：品牌标志和导航应该放在页面的顶部，这是用户对网站的第一印象。在内容结构中，图片更容易获得关注。用户浏览完图片后，下一个关注点便是标题。 用户会大致的浏览文本，但是往往不会通读。,界面设计-布局,25 Innovative Websites that Buck the Design Trends,界面设计-颜色,根据软件属性、企业标识颜色、所要表达的主题内涵等来选择界面配色
15、。,回忆思考淘宝网，京东网，1号店，聚美优品，蘑菇街的配色。 思考该茶叶网站配色。,界面设计-颜色,警告、强调色已完成超链接不可点击,界面设计-质感,拟物 扁平 质感,情感化设计,因为人类天生对于机器的恐惧和陌生我们不喜欢冷冰冰的机器，比如DOS命令，我们喜欢的有欢迎界面的windows或者MAC OS我们喜欢和人交谈。,界面设计-情感化设计,情感：情感是人对外界事物作用于自身时的一种生理的反应。是由需要和期望决定的。当这种需求和期望得到满足时会产生愉快、喜爱的情感，反之，苦恼、厌恶。 情感化设计：情感化的设计只是一种创意工具,表达和发挥设计师的思想和设计目的。,情感化设计,界面设计-情感化设计,情感化设计,界面设计-情感化设计,本能水平 人是视觉动物，对外形的观察和理解是出自本能的。如果视觉设计越是符合本能水平的思维，就越可能让人接受并且喜欢。,情感化设计,界面设计-情感化设计,行为水平 行为水平的设计可能是我们应该关注最多的，特别对功能性的产品来说，讲究效用，重要的是性能。使用产品是一连串的操作，美观界面带来的良好第一印象能否延续，关键就要看两点：是否能有效地完成任务，是否是一种有乐趣的操作体验，这是行为水平设计需要解决的问题。,
