《UI那些事+培训文档》由会员分享，可在线阅读，更多相关《UI那些事+培训文档（31页珍藏版）》请在金锄头文库上搜索。
1、20100831 Blue Han FreePP 24075655 Blog 缘起 设计和艺术的碰撞 设计 艺术 在唐纳德在唐纳德 A A 诺曼的诺曼的 情感化设情感化设 计计 的第一页可以看到这个精美的第一页可以看到这个精美 别致的壶 它是由法国艺术家雅别致的壶 它是由法国艺术家雅 克克 卡洛曼创造的 卡洛曼称它卡洛曼创造的 卡洛曼称它 为咖啡壶 一个 专为受虐狂设为咖啡壶 一个 专为受虐狂设 计的咖啡壶 后来才发现计的咖啡壶 后来才发现 茶茶 壶嘴和茶壶柄在同一边壶嘴和茶壶柄在同一边 根本就根本就 是一个不可用的壶 是一个不可用的壶 咖啡壶咖啡壶雅克雅克 卡洛曼卡洛曼 设计与艺术的区别 设
2、计侧重实际的物理作用 艺术侧重精神的心理作用 设计侧重实际的物理作用 艺术侧重精神的心理作用 设计产物大多是产品或服务形态 艺术的创造更多的是人内心的表达和设计产物大多是产品或服务形态 艺术的创造更多的是人内心的表达和 一种观摩 欣赏 一种观摩 欣赏 设计像哲学 艺术像宗教 设计像哲学 艺术像宗教 设计探讨的是可能和反思 尽量简化实用 艺术强调的是唯一和崇拜 设计探讨的是可能和反思 尽量简化实用 艺术强调的是唯一和崇拜 突出艺术风格的图片 期待天才和救世主 突出艺术风格的图片 期待天才和救世主 设计师改善生活 艺术家修炼自己 设计师改善生活 艺术家修炼自己 设计师观察生活 强调吸收进来 改善目
3、前的状态 艺术家不断修炼自设计师观察生活 强调吸收进来 改善目前的状态 艺术家不断修炼自 己 强调表达出去 不论世俗干扰 只求艺术境界完美 己 强调表达出去 不论世俗干扰 只求艺术境界完美 设计和艺术在实践中有着千丝万缕的联系 但实际上还是有一些区别之处 在此罗列设计和艺术在实践中有着千丝万缕的联系 但实际上还是有一些区别之处 在此罗列 一些内容 大家可以有一个基本的认识 一些内容 大家可以有一个基本的认识 UI设计是一个客观理性的过程 UI UI即即User Interface 用户界面 的简称 用户界面 的简称 UI设计则是指对软件的人机交互 操作逻设计则是指对软件的人机交互 操作逻 辑
4、界面美观的整体设计 好的辑 界面美观的整体设计 好的UI设计不设计不 仅是让软件变得有个性有品味 还要让软仅是让软件变得有个性有品味 还要让软 件的操作变得舒适 简单 自由 充分体件的操作变得舒适 简单 自由 充分体 现软件的定位和特点 现软件的定位和特点 UCD UCD即即User Centered Design的简称 中的简称 中 文叫 以用户为中心的设计 基本思想文叫 以用户为中心的设计 基本思想 就是将用户时时刻刻摆在所有过程的首位 就是将用户时时刻刻摆在所有过程的首位 简单的说 在进行产品设计时从用户的需求和用户的感受简单的说 在进行产品设计时从用户的需求和用户的感受 出发 围绕用户
5、为中心设计产品 而不是让用户去适应产出发 围绕用户为中心设计产品 而不是让用户去适应产 品 无论产品的使用流程 产品的信息架构 人机交互方品 无论产品的使用流程 产品的信息架构 人机交互方 式等 都需要考虑用户的使用习惯 预期的交互方式 视式等 都需要考虑用户的使用习惯 预期的交互方式 视 觉感受等方面 觉感受等方面 UCD流程 实例实例 阿里软件阿里软件 UCDUCD流程图流程图 UE 英文英文User Experience 缩写为 缩写为UE 或者或者 UX 指用户访问一个网站或者使用一个产品时指用户访问一个网站或者使用一个产品时 的全部体验 他们的印象和感觉 是否成的全部体验 他们的印象
6、和感觉 是否成 功 是否享受 是否还想再来使用 他们功 是否享受 是否还想再来使用 他们 能够忍受的问题 疑惑和能够忍受的问题 疑惑和BUG的程度 的程度 战略层战略层 产品目标和用户需求产品目标和用户需求 成功的用户体验 其基础是一个被明确表达的 战 略 知道企业与用户双方对产品的期许和目标 有助于 确立用户体验各方面战略的制定 范围层范围层 功能规格和内容说明功能规格和内容说明 带着 我们想要什么 我们的用户想要什么的 的明确认识 我们就能弄清楚如何去满足所有这些战略的 目标 当你把用户需求和网站目标转变成网站应该提供给 用户什么样的内容和功能时 战略就变成了范围 结构层结构层 交互设计与
7、信息架构交互设计与信息架构 在收集完用户需求并将其排列好优先级别之后 我们 对于最终展品将会包括什么特性已经有了清楚的图像 然 而 这些需求并没有说明如何将这些分散的片段组成一个 整体 这就是范围层的上面一层 为产品创建一个概念结 构 框架层框架层 界面设计 导航设计和信息设计界面设计 导航设计和信息设计 在充满概念的结构层中开始形成了大量的需求 这些 需求都是来自我们的战略目标的需求 在框架层 我们要 更进一步地提炼这些结构 确定很详细的界面外观 导航 和信息设计 这能让美色的结构变得更实在 表现层表现层 视觉设计视觉设计 在这个五层结构的顶端 我们把注意力转移到网站用 户会先注意到的那些方
8、面 视觉设计 这里 内容 功能 和美学汇集到一起来产生一个最终设计 这将满足其他四 个层面的所有目标 用户体验的要素用户体验的要素 可用性 可用性 可用性 Usability 是交互式 是交互式IT产品产品 系统的重要质量指系统的重要质量指 标 指的是产品对用户来说有效 易学 高效 好记 少标 指的是产品对用户来说有效 易学 高效 好记 少 错和令人满意的程度 即用户能否用产品完成他的任务 错和令人满意的程度 即用户能否用产品完成他的任务 效率如何 主观感受怎样 实际上是从用户角度所看到的效率如何 主观感受怎样 实际上是从用户角度所看到的 产品质量 是产品竞争力的核心 产品质量 是产品竞争力的
9、核心 ISO 9241 11国际标准可用性定义 产品在特定使用环境国际标准可用性定义 产品在特定使用环境 下为特定用户用于特定用途时所具有的下为特定用户用于特定用途时所具有的 有效性 有效性 effectiveness 效率 效率 efficiency 用户主观满意度 用户主观满意度 satisfaction 可用性工程 可用性工程可用性工程 Usability Engineering 是是IT产品及产品及 其用户界面开发的一种工程方法论 贯穿于产品其用户界面开发的一种工程方法论 贯穿于产品 整个生命周期的各个阶段 包括从需求获取 可整个生命周期的各个阶段 包括从需求获取 可 用性问题分析 设
10、计方案的开发以及测试评估在用性问题分析 设计方案的开发以及测试评估在 内的一整套实用方法 泛指以提高产品可用性质内的一整套实用方法 泛指以提高产品可用性质 量为目的的一系列过程 方法 技术和标准量为目的的一系列过程 方法 技术和标准 其核其核 心是以用户为中心的设计方法论心是以用户为中心的设计方法论 UCD UI工程师分类 UI工程师分类 UI工程师分类 UI工程师分类 UI工作开展in BROWAN 西安UI Team 2008年年7月月 2010年年7月月 产品开发部产品开发部 XA UI Designer Blue Han UI Engineer Ruike Wang UI Engine
11、er Jane Wang 工业设计小组 2010年年7月月16日日 至今至今 PM Marty Human Engineer Blue XATBH TW Interface Engineer Jane XAStanley XA Visual Design Maggie TWTBH TW Web规范体系介绍 产品产品 项目约定项目约定 界面框架规范界面框架规范 UIframework 基础界面元素规范基础界面元素规范 baseUI 产品产品VI Logo 系统框架视觉风格系统框架视觉风格 根据业务需求约定交互模式 根据业务需求约定交互模式 页面流页面流 总体界面框架结构总体界面框架结构 界面模式
12、灵活界面模式灵活 优化多语言 多浏览器 换优化多语言 多浏览器 换 肤 组件库 扩展性等问题肤 组件库 扩展性等问题 界面组件及其组合界面组件及其组合 基础应用模板基础应用模板 Web标准编码 优化结构 标准编码 优化结构 代码可重用性强代码可重用性强 2008年年7月月 至今至今 界面设计开发流程 2008年年7月月 至今至今 工作中存在的问题 产品产品 项目界项目界 面支持面支持 约占界面工作总量约占界面工作总量85 以上的以上的工作量工作量 主要支持的产品 项目有 XC4701 95056 XC4702 Multi Party Call System XC4703 Multi Party
13、 Call System XC1702 FreePP Meeting Center XC1901 FreePPTraining Center XC3603 FreePP融合通信系统1 0 XC9006 FreePP UC For大众电信 XC3401 FreePP Revision XC1702 V 1120 RMA烧号程序 FreePP企业融合通信聚合门户 对外汉语教学网站 私塾网 规 范 产 品 界规 范 产 品 界 面 设 计 开 发面 设 计 开 发 过 程过 程 持 续持 续 改进改进 约占界面工作总量约占界面工作总量10 的工作量的工作量 主要内容有 产品界面设计 开发环节规范初步
14、建立 与需 求 RD 测试环节的配合顺畅 Web通用界面模型优化分析抽象 设计通用用 户 管理员界面框架 Web基础界面元素baseUI 2 0 Web基础界面元 素可与界面框架分离出来 便于今后设计开发 使用 界 面 技 术界 面 技 术 理 论理 论 规 范规 范 的持续研究的持续研究 关注界面相关领域 前沿技术 学习研究 为产品设 计开发提供服务 如利用ExtJS框架组织FMC界面 ActiveX控件Web应用时各类界面技术问题的提出 利 用CSS技术改进原RD开发过程中多语言问题等 界 面 团 队 建界 面 团 队 建 设相关工作设相关工作 统一工作设计平台 以保障界面工作 交流的 顺
15、畅 统一与需求 RD等环节的协作方式 统一主要设计软件版本 统一字体库 持续进行知识经验分享交流 通过网文 图 书等方式获取知识 通过交流讨论会 专题 实践等进行经验交流 对界面规范 相关技 术进行培训 摘录自摘录自 西安西安UIUI Team2009Team2009年度年度总结总结 20092009年工作业绩及成果年工作业绩及成果 界面界面HTML CSSHTML CSS基础编码占界面工作总工作量比重基础编码占界面工作总工作量比重 过大过大 并行的并行的WebWeb项目多项目多 需求变更较频繁需求变更较频繁 UIUI人力不足人力不足 软件界面设计部分无法精益求精软件界面设计部分无法精益求精
16、基础编码比重过大及项目进度所迫设计部分时间缩基础编码比重过大及项目进度所迫设计部分时间缩 减减 图标设计等细节工作没有人力去原创绘制 只能利图标设计等细节工作没有人力去原创绘制 只能利 用网络素材拼贴 存在版权问题且风格难以保障一致用网络素材拼贴 存在版权问题且风格难以保障一致 性性 产品部分功能 交互用户体验不佳产品部分功能 交互用户体验不佳 产品定位 目标市场 目标用户等信息模糊 相关产品定位 目标市场 目标用户等信息模糊 相关 战略层内容变化较频繁 战略层内容变化较频繁 UIUI设计的输入不健全设计的输入不健全 适合各类群体的 万金油 适合各类群体的 万金油 UIUI设计将更加中庸 设计将更加中庸 或者只能满足最基本需要或者只能满足最基本需要 诸多诸多因素导致设计无法以用户为中心 而更多的是因素导致设计无法以用户为中心 而更多的是 以功能实现为中心 偏离以功能实现为中心 偏离UCDUCD思想思想 缺乏较为客观的评审机制 缺乏较为客观的评审机制 UI TeamUI Team人微言轻仅只能人微言轻仅只能 提供一些建议 无法较好的发挥专家团队作用提供一些建议 无法较好的发挥专家团队作用
