数字媒体-交互设计的原理与流程.ppt

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