界面设计界面设计流程ppt课件.ppt

UI界面设计流程及内容 一 如何做一名优秀界面设计师 二 UI界面设计流程及内容 三 案例 电子商务网站的交互设计 四 案例 35互联整体平台改版设计分享 一 如何做一名优秀的界面设计师 5 一个优秀软件产品的开发过程应该是由四个部分组成 产品建模 技术建模 把软件各个部分拆分分单元编写代码 分为单元测试 系统集成测试和产品功能测试 UI设计的角度来看 作为UI设计人员我们需要全程参与到软件开发过程中 而不只是在某一个步骤参与 输入 和 输出 在UI设计里是很重要的两个概念 成功的UI设计首先要有完整的 输入 怎么才能叫做完整的 输入 呢 需要UI设计师从整个软件产品的策划阶段就开始介入 在产品用户 也就是客户 向市场部门或者产品部门提出产品需求的时候就要开始参与到产品策划开发过程中来 这一部分对于UI设计师而言就是第一个输入阶段 1 产品建模时期 阶段结果 协助产品设计人员完成产品建模过程并制作产品展示demo模拟用户对主要功能的操作过程和界面呈现 生成交互原型 基本上产品的交互性和易用性问题都需要在产品建模的时期解决 如果时间允许我们甚至可以提出一份 UI设计分析报告 这份报告可以附在产品设计说明后 更有效的帮助客户了解我们的产品设计并且帮助开发人员更好的遵循UI的整体要求来完成开发工作 这个时期的关键是 交互设计 全球6大手机制造商MobileUI分析及战略咨询报告 在这个时期作为UI设计师我们已经了解了软件产品的功能需求并且拿到了一份产品设计人员的产品设计说明 可以进入界面样式的设计过程了 这个时候我们应该考虑更多的应该是产品的整体风格和界面的设计 通常我们也会做出几份方案给客户选择 2 技术建模时期 由此我们可以看出UI设计并不完全是一个美术设计的过程 还有很重要的一个部分就是交互性和易用性的设计 涉及到认知心理学 我们要时刻把自己放在软件的用户角度来考虑 设计出最简单易用 界面友好的软件产品 不同的产品要有不同的风格 这里边有很多的细节注意 不同的产品 同类的产品不同的内容 不同的传播介质 这些都会决定UI设计的风格 1 不同的产品 比如一个游戏产品就需要将界面做的花哨一些或者用大的图片充斥 如果要是一个应用软件就需要突出使用方便和强大的功能设计要简洁 2 同类不同的内容 比如一个可爱的游戏产品 像是卡通类游戏 就需要将界面做的活泼生动可爱一点 如果是一个角色扮演的战斗类游戏 像是枪战闯关类游戏 就要做的酷一点深沉一些 3 不同的传播介质 我们要做的软件产品有的需要在网络上传播那么就需要我们考虑到网络速度的问题 有的就是利用光盘当作介质那么这样的软件就可以做一些比较花哨的效果 有时候我们还需要根据客户或者产品的特定需求做一些延伸性的设计 也叫UI产品设计的外延 包括 软件的安装导航界面 产品的演示宣传动画 一些附带的桌面壁纸或者屏幕保护 代表软件的卡通小精灵 有时还会被要求设计软件的logo和广告banner等等 技术建模时期的关键是 风格和界面设计 这个时期软件开发过程进入实现阶段 也是需要人力最多的时期 这样就会分散UI设计师的精力 软件会被切分为若干个小的模块进行代码编写 最后整合成一个完整的软件产品 3分模块开发时期 交付结果 在分模块开发时期UI设计师应该做的是 在模块开发的前期做出产品每个模块的效果demo 可以用图片的形式表现 要求程序员按照demo的样式进行模块开发 协助和监督程序员严格按照UI设计要求生成最终产品 把握各个模块的统一 经常了解程序员的工作进展及时对不合理或者难以实现的设计进行讨论设计出新的方案 分模块开发时期的关键是 协助和监督程序员生成最终产品 在修改过程中我们还是需要先做出效果图 让客户确定再具体实施 这样也会避免很多麻烦的 测试时期的关键是 检查整个产品发现问题及时改正 4 测试时期的输入和输出 小结 如今软件的越来越多的考虑到人的因素 以人为本 的设计理念贯穿了整个软件产品开发的始终 因此软件产品的UI设计过程最重要的两个部分就是行为和构造 也就是交互设计和界面设计 上面我们按照软件开发的四个阶段 逐个的分析了每个时期UI设计的任务 由此我们可以看出UI设计并不完全是一个美术设计的过程 还有很重要的一个部分就是交互性和易用性的设计 涉及到认知心理学 我们要时刻把自己放在软件的用户角度来考虑 设计出最简单易用 界面友好的软件产品 三 UI界面设计流程及内容 界面作为产品本身 其设计流程带有产品开发的基本特征 即总是必须从前期的调查和分析开始 关于对界面的易用性测试 不是在产品设计完成之后 而是在真正设计制作之前就开始进行 且始终贯穿于产品整个的生命周期 分阶段持续地进行 易用性测试 交互设计 信息构架设计 界面设计 前期分析 产品发布 目标用户研究任务分析确立界面类型环境分析设立清晰目标和个性开发方案 1 前期分析 需求分析 目标用户研究 用户研究方法 背景调查观察访谈问卷调查 用户研究的第一步就是定义界面设计面向的用户群体 获取设计概念 卡片法虚拟角色编写故事板 QQ概念版设研发 任务分析 任务分析是将用户需要转化为目标 再将目标转化为结构化任务 并分析任务之间相互关系的一种方法 结构化任务往往被表达成一个流程图 流程图中包含了用户实现一个目标所需要的每个任务 任务顺序及任务之间的交互 任务的层级分析 生成流程图 确定界面类型 界面类型基本是与用户研究同时进行的 图形化用户界面 网页界面 多媒体产品界面 移动设计用户界面 从最复杂的图形用户界面又分用于日常生活和娱乐的软件界面 办公或小型商业软件界面 大型工业或商业软件界面 创造性和探索性软件界面 特殊部门和行业软件界面 2 1信息的框架结构设计2 2交互设计2 3版面设计 2 总体设计规划 无论是前期的原形草图设计 还是后面的真实产品设计 往往都是从信息体系的构建着手建立界面框架结构的 具体说来 即通过定义组织结构 导航系统 搜索工具来指定用户找到信息的途径 线性模式层级模式网状模式地图模式导航与搜索 2 1信息的框架结构设计 全局导航分级导航路径导航标签导航搜索 导航与搜索 全局导航 分级导航 路径导航 标签导航 2 2交互设计 操作类型 直接操控使用鼠标使用手指TUI 间接操控使用鼠标使用手指TUI 回应类型 交互设计要点预设用途控件反馈错误 版面设计 媒体选择图标设计色彩选择与组合文字编排与设计静态图形图像的设计与应用动态元素设计声音的设计与应用 3 界面元素设计 测试综合评估反复的设计 4 应用测试 06 02 03 05 07 案例 电子商务网站的交互设计 本节要点 了解项目背景和需求如何做好前期准备如何做好详细设计如何做好交互设计文档作者 于宗博个人网站 我们设计产品总是想迎合我们的用户 最后觉得好似跟在用户后面狂奔的傻子 我们希望通过教育我们的用户来尝试一些新鲜的玩应 用户是否买单就很难说了 从一个极端走向另一个极端 显然是不科学的 用户的需求一定要听 但要有鉴别的听 好的设计用户总愿意为它买单 差的设计用户会让我们为他买单 1 项目背景和需求 2010年1月1日 淘宝发布了新版的首页 最大的改变有两个 一是把搜索框放到了前所未有的高度 同时加大搜索框包含搜索按钮的面积 二是将横向颁布的导航变成了纵向分布 随后颁布的用户调研显示 77 的用户平均在第4秒就看到了搜索框 优于老版本首页 在产品维度的新布局中 用户都能在10秒内找到熟悉的购物频道 并且对调整置表示认可 像腾讯在深圳和广州有专门的用户研究与体验设计中心 CustomerEngagement CE 应用国际流行的用户研究方法进行包括心理学 行为学等多方面的研究 软大的电子商务平台也都有类假的研究机构 2 前期准备 如何选中 如何释放 选中之后展现哪些后续选项账款产 需要交互设计师拿出明确的方案 交互设计师还要和产品经理具体讨论哪些维度适合用分面的方式展示 哪些不适合 当产品没成型时 是交互设计介入的最好时机 优秀的交互设计师既是信息架构的大拿 也应该是细节的专家 3 交互设计 在用户模型与功能模型阶段 产品设计师 PD 与需求分析师 RA 所做出的交付物称为概念图 PD从用户模型中抽象出认知结构 同时RA从功能模型中抽象出逻辑结构 这时候的交付物称为架构图 交互设计师 lxD 得到PD的认知结构与RA的逻辑结构后 经过聚合与专业的梳理 设计出交互流程相关的交付物也就是流程图 通常把概念图 架构图 流程图统称为设计图 在设计图阶段才是交互设计师正式开始着手设计的阶段 设计图阶段是交互设计师由初步参与产品需求讨论 转变成正式为产品设计的时期 这个阶段 交互设计师应该更加多地与产品规划团队沟通 保证产品设计师与需要分析师对交互设计方案的期望是一致的 争取在设计图阶段就解决60 有异议的问题 争取在原形阶段解决80 以上有异议的问题 争取在可用性测试阶段解决100 有异议的问题 4 设计图创建过程 4 1筛选器逻辑架构图4 2筛选器任务操作流程图4 3纸上原型 纸上原型 原型 prototypes 是把系统主要功能和接口通过快速开发制作为 模型 以可视化的形式展现给用户 用以征求意见 确定需求 同时也应用于开发团队内部 作为讨论的对象和分析 设计的接口 纸上原型所使用的介质和工具基本都是物理性质的 主要由背板 纸张和卡片构成 它通常在多张纸和卡片上手绘或标记 或打印并裁剪成模块 用以显示不同的目录 对话框和窗口元素 后将他们组合拼凑 粘贴到背景板上 去膜后的KT板 构建成模拟真实产品界面的原型 使用时 纸上原型的设计者代替电脑对用户 以及内部人员 的点击和按键操作给出反应 重组纸片 书写定制的反馈 偶尔口头描述一些效果 当这个效果比较难在纸上显示的时候 以达到仿真产品交互的目的 国外纸上原型案例展示 原型的根本目的不是为了交付 而是沟通 测试 修改 解决不确定 纸上原型是一种原型设计方法 它应用于交互产品设计的初始阶段 纸上原型具有快速构建 轻松修改 容易操作 关注流程 抛弃成本低的特点 特别注意 纸上原型不是手绘草图 阿里巴巴中国站UED应用纸上原型进行讨论 2 3纸上原型与手绘草图的区别 纸上原型是一种原型设计方法 手绘草图是一种设计表现形式 两者在定义的维度上有所区别 纸上原型可以采用手绘草图作为一种表现形式 手绘的草图并不一定都是纸上原型 另外也需要强调的是手绘草图与低保真原型的区别 现在普遍存在一个误解 手绘草图 如果画的是某个交互产品 通常被视作低保真原型的一种 但这种说法同样不准确 也是定义维度上的问题 前者是设计表现形式 后者是原型精度 原型精度是一个多维概念 它包括广度 深度 表现 感觉 仿真度等多个指标 电子商务搜索引擎的细节设计 1 针对suggestion的情感化设计细节处理 EBAY COM 当用户觉得不想使用suggestion 或认为suggestion会给他带来干扰的时候 用户可以选择关闭suggestion suggestion有的时候可能会切断用户的心流 对用户的心智模型造成影响 当用户想重新使用suggestion的时候 仍然可以通过搜索框内右边的按钮还原suggestion功能 此时 当鼠标移到还原按钮上面时候 为避免用户不理解按钮的意义会有一个TIP来显示按钮的作用 YAHOOSHOPPING 在YAHOOSHOPPING橘黄色框内 我也发现了suggestion可自由关闭的功能 小结 表面上看 貌似这些功能是锦上添花 但是从用户情感化设计上考虑 这些功能也能为用户建立更多的信心 去大胆尝试并频繁使用搜索的新功能 搜索框内容的一键清空细节处理APPLE COM 苹果公司不愧是一家很关注用户体验设计的公司 在他们官网搜索功能的细节处理上 真是可见一斑 当用户在搜索框输入关键词的同时 会在搜索框的下方出现产品分类的suggestion 并且在搜索框内部右边 图中橘黄色框内 出现清空搜索关键词的按钮 当用户输入关键词出错或对原有已经输入的关键词进行删除