UI培训.ppt

UI设计 2011 09 01 一个优秀的UI设计是怎样炼成的 1 以用户为中心的目的 IBM 2 用户交互 用户体验架构师 3 真正理解用户需求 设计时考虑用户习惯 用户的工作环境 用户的年龄 4 需要优秀的UI架构师 5 需要优秀的编程人员 怎样定位一个好的UI设计 1 美 2 符合当前流行界面风格 3 易操作性 4 从未有过的感觉 创新 产品价值 5 稳定不出错 高可靠性 6 响应时间段 秒杀视觉设计感觉设计 怎样实现一个好的UI设计 1 设计角度 需求分析师 2 设计步骤 软件架构师 3 设计工具 软件详细设计师 4 设计成果 程序员 用户体验师 UI设计的层次有哪些 1 企业级项目型软件 windows型UIOSX Linux 2 产品型软件 适应用户的不同需求 Web类型3 SAAS型软件 适应不同区域的文件与语言 无处不在的访问软件 移动 一 UI设计准备 1 UI原型与工具2 UI架构模型3 UI设计基本原则4 UI视觉效应设计5 UI与用户心理6 UI风格习惯设计 1 UI原型与工具 1 读懂软件需求规格说明书 读懂用例图 读懂用例规格 质量决定 感觉设计 环境决定 界面风格 面对不完整 简单的 模糊的需求规则书 只能是浮想联翩 经验 再就是要掌握思考的角度 2 思考的角度 12个角度 内四外八 内四 业务属性字段 业务属性规则 业务属性时间 业务逻辑算法 外八 前置业务 业务 后置业务 表单外观 业务权限 业务检索 业务后续处理 业务质量要求 业务环境要求 3 原型工具选择 动态运行 支持不同的界面风格 支持工作流程 易用性 常见UI工具 动态运行工具GUIDesignStudio 脱机安装 线框图工具BalsamiqMockups 界面流程工具PropertypeComposer2010 IDE工具UIDesigner PS 画图板 需求阶段的原型与设计 使用UI原型工具设计并与用户确认需求 UML UI原型UI原型向开发阶段UI转化的方式 UI原型切割方法 图像 贴图 UI原型转化为控件 不同IDE提供不同的空间外观 UI原型与UI测试的关系 依据UI原型来标注测试用例 依据UI规范进行检查测试 依据边缘学科进行UI的测试 2 UI架构模型 1 架构模式MVC 面向模式的软件体系结构 1 5 2 独立UI的框架 UI可以进行切割 部件 组装 UI容器中来完成 UI之间的导航基于UI框架来完成动态导航 3 Web架构模式 Portal java JSR168 WebPart SAP Web版 S CRM SAAS 4 桌面UI架构模式 Word与PDF框架模型 IDE环境中 美 算法 Netbeans 5 用户体验的5大要素 表现层 眼睛感悟到的内容 框架层 UI元素的编排 结构层 UI界面之间的流程导航 范围层 功能映射到UI 战略层 UI的目标 商业目标 客户目标 3 UI设计的基本原则 1 UI设计十大原则 研究用户的习惯 观察用户的工作模式 一致性和标准 帮助文档 用户控制与自由度 系统状态的可变性 灵活性和效率 错误预防 只需识别 无需记忆 错误报告 诊断与恢复 审美和最低限度设计 良好的图形设计 简练的语言 问题 1 UI的十大原则是否就是美 用户体验2 以用户为中心设计UI 3 参考微软 苹果 谷歌10大原则 细致的微软 轻松的苹果 简洁的谷歌 4 UI视觉效应设计 1 视觉对颜色的敏感性设计 UI颜色的配色 配色表 UI颜色遵循反差原则 眼睛对于丰富多彩世界的理解来源于对色彩的理解 色彩的跳动性 多样性与层次性 让人心情愉悦 提升工作效率 不同的人喜欢的颜色不同 不同的民族喜欢的颜色也不同 但是总有大众喜欢的颜色 这种视觉让人感觉不到疲劳 特别是长时间不会出现厌倦的感觉 UI设计使用这种颜色 必定会达到界面持久性效果 这就是界面的忠诚度 会减少界面的变更 客户可以长时间认可这种界面 2 视觉对内容呈现的表象设计 聚焦效应 界面的关键元素放在实现上 视线效应 屏幕的切割符合视线效应 刺激效应 用户关注的点采用刺激颜色 3 Web风格与桌面风格对比 5 UI设计与用户心理学 1 用户使用UI的心理特征分析 分析用户的各种期望 满足 表达用户的各种期望 方式 如何说服用户 我的UI设计是符合国际化趋势 让用户无法说 NO 的攻心术 掌握博弈之术心理模型实现模型系统模型 6 UI风格习惯设计 1 UI风格设计的原则 不同风格的UI鉴赏产品UI的统一风格设计按用户使用习惯设计UI引导用户习惯的设计 二 UI视觉设计 1 UI布局设计2 UI色调设计3 UI文字设计4 UI图形图标设计 1 UI布局设计 1 构成软件应用的界面进行划分 将所有的功能进行归类 没有统一的标准 划分窗体 页面 屏 列表 将所有功能的细节演绎成UI元素 控件 多种表达方式 最佳表达方式 UI控件元素编排在窗体 页面 屏 编排合理 不松不紧 间距 对齐方式 巨多 巨少 2 UI布局的基本原则 黄金分割原则空间切割原则平衡对称原则视线切割原则 主视线 辅助视线 横纵切割 异形切割原则 2 UI色调设计 1 UI颜色规范 颜色种类不宜过多 2 3 3 4 颜色反差 反差颜色的配色表 颜色持久性 刺激性 配色方案 蓝色系 灰色系 颜色搭配的方法 Windows7 色阶的使用 主色调 使用灰黑白进行进行色阶处理 层次感 由远及近 避免过渡生硬 3 UI文字设计 1 UI字体字号选择策略 无棱角 等粗细的字体适合于显示 雅黑 黑体 丽黑 等线体字号选择 磅值 8 5 12 14 16 不同年龄的使用者 对字号的要求是不一样 使用者解耦 一线员工 中层领导 高层领导 总结 1 研究用户需求2 UI元素3 UI工具完成设计4 遵循UI设计十大原则5 符合相关的视觉效应6 用户心理三合一7 用户习惯 UI原型工具 善于发现UI工具驾驭UI工具 UI框架 技术框架 加入框架的UI部件 接口 框架管理UI部件的生命周期 框架实现美的算法体验框架 用户体验的五大原属 框架体验界面布局 UI设计原则 UI设计原则的核心