数字媒体-交互设计原理及流程课件.ppt

1、人机界面设计梅雪人机界面设计的三个层面以用户体验为中心的设计-用户研究原型设计界面设计目录1人机界面设计的三个层面2以用户体验为中心的设计-用户研究界面设计交互设计信息架构用户研究的方法用户界面心理学 3原型设计4概念设计低保真原型高保真原型常见页面元素布局颜色界面质感界面设计情感化设计可用性设计人机界面设计的三个层面界面设计交互设计信息架构UIUI=Users Interface用户界面，也称人机界面。是指用户和某些系统进行交互方法的集合，这些系统不单单指电脑程序，还包括某种特定的机器，设备，复杂的工具等。IxDIxD =Interaction Design 交互设计，又称互动设计。是指在用

2、户与产品进行交互时，决定产品如何响应的一种行为和事件设计。以按钮为例，界面设计涉及它看起来是否像按钮及该如何摆放，而交互设计则涉及按钮按下后产生的行为。IAIA =information architecture信息架构，其过程包括观察和分析复杂的信息集，然后设计一个系统，在这个系统里信息可以更好地被组织，更好地被程序化以及更好 地被理解。UXUX=User experience design用户体验。UX指用户体验，UX设计指以用户体验为中心的设计。人与系统交互时的感觉就是用户体验。UX设计师研究和评估一个系统的用户体验，关注与该系统的易用性，价值体现，实用性，高效性等。例如，研究一个电子商

3、务站点的结账（checkout）流程，看看流程是否对用户友好易用；研究子系统的组件，比如研究用户在填写Web表单的时候如何更加高效和舒服。互联网产品生产基本流程市场调查用户研究竞品分析制定商业计划、开发计划、需求文档界面设计、交互设计编写代码、开发测试、迭代上线、维护、营销用户研究、二次开发互联网产品生产基本流程从一个案例开始来学习设计：lC先生从事跨境电商工作，销售茶叶，目前主要的销售渠道是亚马逊，他想再建设一个自己的电子商务网站来展示和销售自己的产品。l目标客户群体：中国和美国年轻人l他希望这个电商网站所具有的功能：树立品牌、产品展示支付、交易功能（登陆、注册、购物车）支付、交易功能（登陆

4、、注册、购物车）评价功能评价功能精准的产品搜索功能精准的产品搜索功能 留言客服系统 向邮箱发送信息产品经理所要权衡的事：l产品业务需求。收入模式是什么，或者为什么这个产品对公司的战略目标很重要？l技术限制。开发工程 师会与产品经理或团队沟通。这些限制可能是数据库存储的挑战、项目所花费的时间、产品的运行速度、代码与其它系统集成的复杂性，或者仅仅是从软件工程 角度来看所涉及的工作量。l使用产品的用户体验。产品经理需要站在用户的角度考虑问题，去理解用户并平衡他们的需求。产品经理是最接近产品设计的一个角色，而产品设计师则通常扮演用户，站在用户的角度考虑问题。以用户体验为中心的设计用户研究 -需求文档概

5、念设计 -流程图、信息架构原型设计 -交互流程、低保真原型图界面设计 -高保真原型图以用户体验为中心的设计用户研究人通过工具完成动作达到目的在环境里以用户体验为中心的设计用户研究+市场调查+竞品研究发现用户所需：Who：谁会使用这个产品？What：他们想要知道什么？When：他们何时想要知道？Where：他们在哪使用你的产品？Why：为什么他们用你的产品而不用同类其它产品？How：他们如何使用你的产品？制定故事：谁，何时，何地，干什么，为什么，怎么样速速度度性能性能效率效率支持支持产品体验以用户体验为中心的设计设计流程而非设计页面以用户体验为中心的设计设计流程而非设计页面百度搜索中的广告产品页

6、购买社交媒体中的链接着陆页加入收藏邮件列表电子商务：会员、订阅：把用户流程和转化渠道结合起来。典型用户流程：付费广告社交媒体邮件搜索新闻以用户体验为中心的设计设计流程而非设计页面整合整个用户体验周期的流程画流程图。以用户体验为中心的设计设计流程而非设计页面广告横幅着陆页登记邮箱收到邮件访问产品页购买更多推荐以用户体验为中心的设计交互界面设计心理学以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面为诱导和潜意识设计界面大脑的不同部分具有不同的功能，我们在此可将大脑简化为三个不同部分：旧脑判断什么是安全的什么是危险的；负责身

7、体运作：消化、移动和呼吸等。中脑处理情感，让你感知事物，也是很多冲动购买的根源所在。新脑脑皮层，负责语言处理、讲话、阅读、思考计划以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面l人旧脑和中脑的大多数行为都发生在我们的意识之外，我们的大脑中是新脑在加工我们意识到的东西。l我们喜欢认为自己的决定经过深思熟虑，但其实 大多数决定和行为是无意识的。l最有效的网站会与大脑的三个部分旧脑、中脑、新脑“对话”。以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面寻找归属：社会认同的作用 人们观察别人以决定自己的行为。在他们不确定要不要采取行动以及如何行时尤其如此。我们会做其它人也在

8、做的事情，归属感对我们的吸引力很大。以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面例：电商网站上的评分和评论对我们影响很大尤其是在无意识层面。数据分析表明在酒店销售电商网站中，能够看到酒店入住评价比不能看到顾客评价信息，其销售量会相差30%之多。寻找归属以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面例：增加统计和柱状图让我们更加觉得自己的决定很明智。尽管我们的决定来自于不理智的过程。寻找归属以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面例：我们会更相信我们认识并信任的人，如果评论有评论者的名字、照片、日期、身份标签，会使评论更可信。寻找归属以用户

9、体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面负债感：如何利用互惠和让步我们报答别人的帮助并且互换礼物，有些时候是出于爱或觉得好玩，但多数时候是由于责任感。如果我给了你礼物或者帮了你，你会有负债感，会希望送我礼物或者帮我的忙。这在很大程度上是一种无意识的感觉，而且会非常强烈。我们称之为互惠。以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面例：接受别人说“不”，也是一种赠予。这个技巧有时被称为“拒绝后让步”。发起者提出一个大多数人都不会接受的要求，在被拒绝后提出更合理的方案，最终可以获得他她一开始就想要的东西。负债感以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设

10、计界面负债感例：包邮、提供免费信息、小礼物。帮你捐款。以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面引发稀缺感：我们倾向于多要那些难以获得的东西。我们会认为数量有限的东西更值钱，所以我们更想得到它。我们会认为难以获得的信息更有价值。以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面例：小米手机和苹果手机。市场部公开表示上市的第一批产品数量有限并且很可能供不应求。稀缺感以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面例：“今日特价”“仅剩二双”稀缺感以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面 和稀缺相似的理论是，产品的价格越贵（因而越

11、难得到稀缺）质量就越好。我们无意识的追求贵的东西，无意识地把昂贵与高质量画上等号。稀缺感以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面 必杀技：封杀它。如果一件东西无法得到、被禁止了，那我们会很想要它。稀缺感以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面主角是你：与自我为中心的无意识对话。你简单的旧脑只关注你自己，对它而言，一切都是你，你就是一切。创建“场景”引入“顾客”，并拿“危险、性和食物”吸引顾客的旧脑。以用户体验为中心的设计交互界面设计心理学为诱导和潜意识设计界面主角是你：与自我为中心的无意识对话。你简单的旧脑只关注你自己，对它而言，一切都是你，你就是一

12、切。创建“场景”引入“顾客”，并拿“危险、性和食物”吸引顾客的旧脑。原型设计概念设计 低保真原型 高保真原型照片VS视频 单个页面VS整个交互系统流线设计：“页面”的概念源于纸质印刷品，数字产品的体验并不是单一性的，一个体验总有它的开端，过程和结局。人们体验数字产品时并不只是一瞬间，而是一条流线。注意产品的：长、宽、“时间”。原型设计概念设计低保真原型高保真原型原型设计概念设计原型设计概念设计原型设计低保真原型 原型设计低保真原型 原型设计低保真原型 axure 界面设计常见页面元素布局颜色界面质感情感化设计可用性设计界面设计-常见界面元素页头 headbannerlogo nav Login

13、 or Regist内容 contentTextImgButtonLinkform页脚 footSite mapCopyright BreadcrumbNavigation界面设计-布局布局就是布置视觉线索，“控制”用户的视觉路径。界面设计-布局F式布局式布局用户浏览网页的一般模式：先看看页面的左上角，了解一下这是什么网站（因此此处适合放置Logo)“知道是什么”然后扫描一下页面的顶部（导航栏，搜索栏）“了解用法”下一步，用户的视线下移，开始阅读下一行的内容。用户进入“扫描模式”，一旦找到感兴趣的内容便会打开。界面设计-布局F式布局式布局界面设计-布局F式布局式布局-眼动热点图眼动热点图热区（

14、途中红色、黄色、橙色部分）代表用户注意力最集中的地方。界面设计-布局F式布局式布局-从上到下 从左到右按照逻辑，我们得出以下结论：品牌标志和导航应该放在页面的顶部，这是用户对网站的第一印象。在内容结构中，图片更容易获得关注。用户浏览完图片后，下一个关注点便是标题。用户会大致的浏览文本，但是往往不会通读。界面设计-布局25InnovativeWebsitesthatBucktheDesignTrends界面设计-颜色根据软件属性、企业标识颜色、所要表达的主题内涵等来选择界面配色。回忆思考淘宝网，京东网，1号店，聚美优品，蘑菇街的配色。思考该茶叶网站配色。界面设计-颜色警告、强调色已完成超链接不可

15、点击界面设计-质感拟物 扁平 质感情感化设计因为人类天生对于机器的恐惧和陌生我们不喜欢冷冰冰的机器，比如DOS命令，我们喜欢的有欢迎界面的windows或者MAC OS我们喜欢和人交谈。界面设计-情感化设计情感：情感是人对外界事物作用于自身时的一种生理的反应。是由需要和期望决定的。当这种需求和期望得到满足时会产生愉快、喜爱的情感，反之，苦恼、厌恶。情感化设计：情感化的设计只是一种创意工具,表达和发挥设计师的思想和设计目的。情感化设计界面设计-情感化设计情感化设计界面设计-情感化设计本能水平 人是视觉动物，对外形的观察和理解是出自本能的。如果视觉设计越是符合本能水平的思维，就越可能让人接受并且喜

16、欢。情感化设计界面设计-情感化设计行为水平 行为水平的设计可能是我们应该关注最多的，特别对功能性的产品来说，讲究效用，重要的是性能。使用产品是一连串的操作，美观界面带来的良好第一印象能否延续，关键就要看两点：是否能有效地完成任务，是否是一种有乐趣的操作体验，这是行为水平设计需要解决的问题。情感化设计界面设计-情感化设计反思水平 反思水平的设计与物品的意义有关，受到环境、文化、身份、认同等的影响，会比较复杂，变化也较快。这一层次，事实上与顾客长期感受有关，需要建立品牌或者产品长期的价值。只有在产品/服务和用户之间建立起情感的纽带，通过互动影响了自我形象、满意度、记忆等，才能形成对品牌的认知，培养对品牌的忠诚度，品牌成了情感的代表或者载体。情感化设计界面设计-情感化设计情感化设计 进行主题导购、情感导购等形式，来建立消费者的信任，在精神层面，而非物质层面，来打动消费者。这些方法，主要表现在导购的情境化和情感化，即，在网站中设置更加人文的导购界面，植入产品的使用情境，弱化对产品本身的描述，他们常常利用一些现实主题，并通过对某个生活瞬间，或某种生活方式的构建来渲染产品，使产品成为符合这一生活情境与生活方式的一种品味或格调，并以此来激起消费者的购买欲望。在这里，购买是因为，导购激发了消费者某种现实情感，如认同感、归属感等。情感化设计案例：小米手环官网http:/