界面设计2——界面设计流程

1、 一、如何做一名优秀界面设计师一、如何做一名优秀界面设计师 二、二、UIUI界面设计流程及内容界面设计流程及内容 三、案例三、案例电子商务网站的交互设计电子商务网站的交互设计 四、案例四、案例35互联整体平台改版设计分享互联整体平台改版设计分享 教学内容教学内容 一、如何做一名优秀的界面设计师一、如何做一名优秀的界面设计师 5 一个优秀软件产品的开发过程应该是由四个部分组成：一个优秀软件产品的开发过程应该是由四个部分组成： （产品建模）（产品建模） （技术建模）（技术建模） （把软件各个部分拆分分单（把软件各个部分拆分分单 元编写代码）元编写代码） （分为单元测试、系统集成测试（分为单元测试、

2、系统集成测试 和产品功能测试）和产品功能测试） 3.分单元的开发分单元的开发 4.测试测试 2.系统的设计系统的设计 1.软件产品的设计软件产品的设计 用户需求和用户验收测试用户需求和用户验收测试 UI设计的角度来看，作为UI设计人员我们需要全程参与到软件开 发过程中，而不只是在某一个步骤参与。 “输入”和“输出”，在UI设计里是很重要的两个概念， 成功的UI设计首先要有完整的“输入” 怎么才能叫做完整的“输入”呢？ 需要需要UIUI设计师从整个软件产品的策划阶段就开始介入，在产品用户（也设计师从整个软件产品的策划阶段就开始介入，在产品用户（也 就是客户）向市场部门或者产品部门提出产品需求的时

3、候就要开始参与就是客户）向市场部门或者产品部门提出产品需求的时候就要开始参与 到产品策划开发过程中来，这一部分对于到产品策划开发过程中来，这一部分对于UIUI设计师而言就是第一个输入设计师而言就是第一个输入 阶段阶段 1.产品建模时期产品建模时期 阶段结果阶段结果 协助产品设计人员完成产品建模过程并制作产品展示demo模拟用户对主要功 能的操作过程和界面呈现，生成交互原型（基本上产品的交互性和易用性问题都 需要在产品建模的时期解决）。如果时间允许我们甚至可以提出一份“UI设计分析 报告”，这份报告可以附在产品设计说明后，更有效的帮助客户了解我们的产品设 计并且帮助开发人员更好的遵循UI的整体要

4、求来完成开发工作。这个时期的关键 是“交互设计”。 全球全球6大手机制造商大手机制造商MobileUI分析及战略咨询报告分析及战略咨询报告 在这个时期作为UI设计师我们已经了解了软件产品的功能需求并且拿到了 一份产品设计人员的产品设计说明，可以进入界面样式的设计过程了。这个时这个时 候我们应该考虑更多的应该是产品的整体风格和界面的设计候我们应该考虑更多的应该是产品的整体风格和界面的设计，通常我们也会做 出几份方案给客户选择。 2.技术建模时期技术建模时期 由此我们可以看出UI设计并不完全设计并不完全 是一个美术设计的过程，还有很重是一个美术设计的过程，还有很重 要的一个部分就是交互性和易用性要

5、的一个部分就是交互性和易用性 的设计的设计(涉及到认知心理学涉及到认知心理学)。我们 要时刻把自己放在软件的用户角度 来考虑，设计出最简单易用，界面 友好的软件产品。 不同的产品要有不同的风格，这里边有很多的细节注意，不同的产品、同类的产品不 同的内容、不同的传播介质，这些都会决定UI设计的风格。 1.不同的产品不同的产品：比如一个游戏产品就需要将界面做的花哨一些或者用大的图片充斥；如 果要是一个应用软件就需要突出使用方便和强大的功能设计要简洁。 2.同类不同的内容同类不同的内容：比如一个可爱的游戏产品（像是卡通类游戏）就需要将界面做的活 泼生动可爱一点；如果是一个角色扮演的战斗类游戏（像是枪

6、战闯关类游戏）就要做 的酷一点深沉一些。 3.不同的传播介质不同的传播介质：我们要做的软件产品有的需要在网络上传播那么就需要我们考虑到 网络速度的问题；有的就是利用光盘当作介质那么这样的软件就可以做一些比较花哨 的效果。 有时候我们还需要根据客户或有时候我们还需要根据客户或 者产品的特定需求做一些延伸者产品的特定需求做一些延伸 性的设计（也叫性的设计（也叫UI产品设计的产品设计的 外延），包括：软件的安装导外延），包括：软件的安装导 航界面、产品的演示宣传动画、航界面、产品的演示宣传动画、 一些附带的桌面壁纸或者屏幕一些附带的桌面壁纸或者屏幕 保护、代表软件的卡通小精灵、保护、代表软件的卡通小

7、精灵、 有时还会被要求设计软件的有时还会被要求设计软件的 logo和广告和广告banner等等。技术等等。技术 建模时期的关键是建模时期的关键是“风格和界面风格和界面 设计设计” 这个时期软件开发过程进入实现阶段，也是需要人力最多的时期，这样就 会分散UI设计师的精力。软件会被切分为若干个小的模块进行代码编写， 最后整合成一个完整的软件产品。 3分模块开发时期分模块开发时期 交付结果交付结果 在分模块开发时期UI设计师应该做的是，在模块开发的前期做 出产品每个模块的效果demo（可以用图片的形式表现）要求程 序员按照demo的样式进行模块开发，协助和监督程序员严格按 照UI设计要求生成最终产品

8、，把握各个模块的统一，经常了解 程序员的工作进展及时对不合理或者难以实现的设计进行讨论 设计出新的方案。分模块开发时期的关键是“协助和监督程序员 生成最终产品” 在修改过程中我们还是需要先做出效果图，让客户确定再具体实 施，这样也会避免很多麻烦的。测试时期的关键是“检查整个产品 发现问题及时改正”。 4、测试时期的输入和输出测试时期的输入和输出 小结：小结： 如今软件的越来越多的考虑到人的因素，“以人为本”的设计理念贯穿了整个软件产 品开发的始终，因此软件产品的UI设计过程最重要的两个部分就是行为和构造，也就 是交互设计和界面设计。上面我们按照软件开发的四个阶段，逐个的分析了每个时期 UI设计

9、的任务。由此我们可以看出UI设计并不完全是一个美术设计的过程，还有很重设计并不完全是一个美术设计的过程，还有很重 要的一个部分就是交互性和易用性的设计要的一个部分就是交互性和易用性的设计(涉及到认知心理学涉及到认知心理学)。我们要时刻把自己放在 软件的用户角度来考虑，设计出最简单易用，界面友好的软件产品。 三、三、UI界面设计流程及内容界面设计流程及内容 界面作为产品本身，其设计流程带有产品开发的基本特征，即总是必 须从前期的调查和分析开始。关于对界面的易用性测试，不是在产品 设计完成之后，而是在真正设计制作之前就开始进行，且始终贯穿于 产品整个的生命周期，分阶段持续地进行。 目标用户研究目标

10、用户研究 任务分析任务分析 确立界面类型确立界面类型 环境分析环境分析 设立清晰目标和个性开发方案设立清晰目标和个性开发方案 1、前期分析（需求分析）前期分析（需求分析） 目标用户研究目标用户研究 用户研究方法：用户研究方法： 背景调查 观察 访谈 问卷调查 用户研究的第一步就是定义界面设计面向的用户群体 获取设计概念：获取设计概念： 卡片法 虚拟角色 编写故事板 QQ概念版设研发概念版设研发 任务分析任务分析 任务分析是将用户需要转化为目标，再将目标转化为结构化任务，并分析任务之间相 互关系的一种方法。 结构化任务往往被表达成一个流程图，流程图中包含了用户实现一个目标所需要的每 个任务、任务

11、顺序及任务之间的交互。 任务的层级分析任务的层级分析生成流程图生成流程图 确定界面类型确定界面类型 界面类型基本是与用户研究同时进行的。 图形化用户界面、网页界面、多媒体产品界面、移动设计用户界面；从最复杂的图形 用户界面又分用于日常生活和娱乐的软件界面、办公或小型商业软件界面、大型工业 或商业软件界面、创造性和探索性软件界面、特殊部门和行业软件界面. 2.1信息的框架结构设计信息的框架结构设计 2.2交互设计交互设计 2.3版面设计版面设计 2、总体设计规划总体设计规划 无论是前期的原形草图设计,还是后面的真实产品设计,往往都是从信息体系的构建着手 建立界面框架结构的。具体说来，即通过定义组

12、织结构、导航系统、搜索工具来指定 用户找到信息的途径。 线性模式线性模式 层级模式层级模式 网状模式网状模式 地图模式地图模式 导航与搜索导航与搜索 2.1信息的框架结构设计信息的框架结构设计 全局导航 分级导航 路径导航 标签导航 搜索 导航与搜索导航与搜索 全局导航 分级导航 路径导航 标签导航 2.2交互设计交互设计 操作类型操作类型 直接操控直接操控 使用鼠标使用鼠标 使用手指使用手指 TUI 间接操控间接操控 使用鼠标使用鼠标 使用手指使用手指 TUI 回应类型回应类型 交互设计要点交互设计要点 预设用途 控件 反馈 错误 版面设计版面设计 媒体选择 图标设计 色彩选择与组合 文字编

13、排与设计 静态图形图像的设计与应用 动态元素设计 声音的设计与应用 3、界面元素设计界面元素设计 测试 综合评估 反复的设计 4、应用测试应用测试 专家评审专家评审 切割编码切割编码 原型设计原型设计 需要分析需要分析 发布跟踪发布跟踪 交互交互DEMO 视觉界面视觉界面 06 02 03 05 07 案例案例电子商务网站的交互设计电子商务网站的交互设计 本节要点： 了解项目背景和需求 如何做好前期准备 如何做好详细设计 如何做好交互设计文档 作者：于宗博 个人网站：http:/ 我们设计产品总是想迎合我们的用户，最后觉得好似跟 在用户后面狂奔的傻子。我们希望通过教育我们的用户 来尝试一些新鲜

14、的玩应，用户是否买单就很难说了。从 一个极端走向另一个极端，显然是不科学的。用户的需 求一定要听，但要有鉴别的听。好的设计用户总愿意为 它买单，差的设计用户会让我们为他买单。 1、项目背景和需求、项目背景和需求 2010年1月1日，淘宝发布了新版的首页，最大的改变有两个： 一是把搜索框放到了前所未有的高度，同时加大搜索框包含搜索按钮的面积； 二是将横向颁布的导航变成了纵向分布。 随后颁布的用户调研显示，77%的用户平均在第4秒就看到了搜索框， 优于老版本首页。在产品维度的新布局中，用户都能在10秒内找到熟悉 的购物频道，并且对调整置表示认可。 像腾讯在深圳和广州有专门的用户研究与体验设计中心（

15、Customer Engagement,CE), 应用国际流行的用户研究方法进行包括心理学、行为学等多方面的研究。软大的电子 商务平台也都有类假的研究机构。 2、前期准备前期准备 如何选中，如何释放、选中之后展现哪些后续选项账款产，需要交互设计师拿出明确 的方案。 交互设计师还要和产品经理具体讨论哪些维度适合用分面的方式展示，哪些不适合。 当产品没成型时，是交互设计介入的最好时机。 优秀的交互设计师既是信息架构的大拿，也应该是细节的专家。 3、交互设计交互设计 在用户模型与功能模型阶段，产品设计师（PD）与需求分析师（RA）所做出的交付物 称为概念图。 PD从用户模型中抽象出认知结构，同时RA

16、从功能模型中抽象出逻辑结构，这时候的交 付物称为架构图。 交互设计师（lxD）得到PD的认知结构与RA的逻辑结构后，经过聚合与专业的梳理， 设计出交互流程相关的交付物也就是流程图。 认识结构认识结构 交付流程交付流程 概念图概念图 逻辑结构逻辑结构 架构图架构图 流程图流程图 通常把概念图、架构图、流程图统称为设计图，在设计图阶段才是交互设计师正式开 始着手设计的阶段。 设计图阶段是交互设计师由初步参与产品需求讨论，转变成正式为产品设计的时期。 这个阶段，交互设计师应该更加多地与产品规划团队沟通，保证产品设计师与需要分 析师对交互设计方案的期望是一致的。 争取在设计图阶段就解决60%有异议的问

17、题； 争取在原形阶段解决80%以上有异议的问题； 争取在可用性测试阶段解决100%有异议的问题。 4、设计图创建过程设计图创建过程 4.1 筛选器逻辑架构图 4.2 筛选器任务操作流程图 4.3纸上原型 纸上原型纸上原型 原型（prototypes）是把系统主要功能和接口通过快速开发制作为“模型”，以可视化 的形式展现给用户，用以征求意见，确定需求。同时也应用于开发团队内部，作为讨 论的对象和分析、设计的接口。 纸上原型所使用的介质和工具基本都是物理性质的，主要由背板，纸张和卡片构成。 它通常在多张纸和卡片上手绘或标记（或打印并裁剪成模块），用以显示不同的目录 、对话框和窗口元素，后将他们组合

18、拼凑，粘贴到背景板上（去膜后的KT板），构建 成模拟真实产品界面的原型。使用时，纸上原型的设计者代替电脑对用户（以及内部 人员）的点击和按键操作给出反应，重组纸片，书写定制的反馈，偶尔口头描述一些 效果（当这个效果比较难在纸上显示的时候），以达到仿真产品交互的目的。 国外纸上原型案例展示国外纸上原型案例展示 原型的根本目的不是为了交付，而是沟通、测试、修改，解决不确定。 纸上原型是一种原型设计方法，它应用于交互产品设计的初始阶段。 纸上原型具有快速构建、轻松修改、容易操作，关注流程，抛弃成本低的特点。 特别注意：纸上原型不是手绘草图。 阿里巴巴中国站阿里巴巴中国站UED应用纸上原型进行讨论应用纸上原型进行讨论 2.3 纸上原型与手绘草图的区别： 纸上原型是一种原型设计方法，手绘草图是一种设计表现形式。两者在 定义的维度上有所区别。纸上原型可以采用手绘草图作为一种表现形式， 手绘的草图并不一定都是纸上原型。 另外也需要强调的是手绘草图与低保真原型的区别。现在普遍存在一个 误解，手绘草图（如果画的是某个交互产品）通常被视作低保真原型的 一种，但这种说法同样不准确，也是定义维度上的问题，前者是设计表 现形式，后者是原型精度（原型精度是一个