《数字媒体-交互设计原理与流程》由会员分享,可在线阅读,更多相关《数字媒体-交互设计原理与流程(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我们喜欢和人交谈。,界面设计-情感化设计,情感:情感是人对外界事物作用于自身时的一种生理的反应。是由需要和期望决定的。当这种需求和期望得到满足时会产生愉快、喜爱的情感,反之,苦恼、厌恶。 情感化设计:情感化的设计只是一种创意工具,表达和发挥设计师的思想和设计目的。,情感化设计,界面设计-情感化设计,情感化设计,界面设计-情感化设计,本能水平 人是视觉动物,对外形的观察和理解是出自本能的。如果视觉设计越是符合本能水平的思维,就越可能让人接受并且喜欢。,情感化设计,界面设计-情感化设计,行为水平 行为水平的设计可能是我们应该关注最多的,特别对功能性的产品来说,讲究效用,重要的是性能。使用产品是一连串的操作,美观界面带来的良好第一印象能否延续,关键就要看两点:是否能有效地完成任务,是否是一种有乐趣的操作体验,这是行为水平设计需要解决的问题。,