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

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

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

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

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

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

6、传播那么就需要我们考虑到网络速度的问题；有的就是利用光盘当作介质那么这样的软件就可以做一些比较花哨的效果。有时候我们还需要根据客户或有时候我们还需要根据客户或者产品的特定需求做一些延伸者产品的特定需求做一些延伸性的设计（也叫性的设计（也叫UI产品设计的产品设计的外延），包括：软件的安装导外延），包括：软件的安装导航界面、产品的演示宣传动画、航界面、产品的演示宣传动画、一些附带的桌面壁纸或者屏幕一些附带的桌面壁纸或者屏幕保护、代表软件的卡通小精灵、保护、代表软件的卡通小精灵、有时还会被要求设计软件的有时还会被要求设计软件的logo和广告和广告banner等等。技术等等。技术建模时期的关键是建模时

7、期的关键是“风格和界面风格和界面设计设计”这个时期软件开发过程进入实现阶段，也是需要人力最多的时期，这样就会分散UI设计师的精力。软件会被切分为若干个小的模块进行代码编写，最后整合成一个完整的软件产品。3分模块开发时期分模块开发时期交付结果交付结果在分模块开发时期UI设计师应该做的是，在模块开发的前期做出产品每个模块的效果demo（可以用图片的形式表现）要求程序员按照demo的样式进行模块开发，协助和监督程序员严格按照UI设计要求生成最终产品，把握各个模块的统一，经常了解程序员的工作进展及时对不合理或者难以实现的设计进行讨论设计出新的方案。分模块开发时期的关键是“协助和监督程序员生成最终产品”

8、在修改过程中我们还是需要先做出效果图，让客户确定再具体实施，这样也会避免很多麻烦的。测试时期的关键是“检查整个产品发现问题及时改正”。4、测试时期的输入和输出测试时期的输入和输出小结：小结：如今软件的越来越多的考虑到人的因素，“以人为本”的设计理念贯穿了整个软件产品开发的始终，因此软件产品的UI设计过程最重要的两个部分就是行为和构造，也就是交互设计和界面设计。上面我们按照软件开发的四个阶段，逐个的分析了每个时期UI设计的任务。由此我们可以看出UI设计并不完全是一个美术设计的过程，还有很重设计并不完全是一个美术设计的过程，还有很重要的一个部分就是交互性和易用性的设计要的一个部分就是交互性和易用性

9、的设计(涉及到认知心理学涉及到认知心理学)。我们要时刻把自己放在软件的用户角度来考虑，设计出最简单易用，界面友好的软件产品。三、三、UI界面设计流程及内容界面设计流程及内容界面作为产品本身，其设计流程带有产品开发的基本特征，即总是必须从前期的调查和分析开始。关于对界面的易用性测试，不是在产品设计完成之后，而是在真正设计制作之前就开始进行，且始终贯穿于产品整个的生命周期，分阶段持续地进行。 目标用户研究目标用户研究 任务分析任务分析 确立界面类型确立界面类型 环境分析环境分析 设立清晰目标和个性开发方案设立清晰目标和个性开发方案1、前期分析（需求分析）前期分析（需求分析）目标用户研究目标用户研究

10、 用户研究方法：用户研究方法：背景调查观察访谈问卷调查用户研究的第一步就是定义界面设计面向的用户群体 获取设计概念：获取设计概念：卡片法虚拟角色编写故事板QQ概念版设研发概念版设研发 任务分析任务分析任务分析是将用户需要转化为目标，再将目标转化为结构化任务，并分析任务之间相互关系的一种方法。结构化任务往往被表达成一个流程图，流程图中包含了用户实现一个目标所需要的每个任务、任务顺序及任务之间的交互。任务的层级分析任务的层级分析生成流程图生成流程图 确定界面类型确定界面类型界面类型基本是与用户研究同时进行的。图形化用户界面、网页界面、多媒体产品界面、移动设计用户界面；从最复杂的图形用户界面又分用于

11、日常生活和娱乐的软件界面、办公或小型商业软件界面、大型工业或商业软件界面、创造性和探索性软件界面、特殊部门和行业软件界面.2.1信息的框架结构设计信息的框架结构设计2.2交互设计交互设计2.3版面设计版面设计2、总体设计规划总体设计规划无论是前期的原形草图设计,还是后面的真实产品设计,往往都是从信息体系的构建着手建立界面框架结构的。具体说来，即通过定义组织结构、导航系统、搜索工具来指定用户找到信息的途径。线性模式线性模式层级模式层级模式网状模式网状模式地图模式地图模式导航与搜索导航与搜索2.1信息的框架结构设计信息的框架结构设计全局导航分级导航路径导航标签导航搜索导航与搜索导航与搜索全局导航分

12、级导航路径导航标签导航2.2交互设计交互设计 操作类型操作类型直接操控直接操控使用鼠标使用鼠标使用手指使用手指TUI间接操控间接操控使用鼠标使用鼠标使用手指使用手指TUI 回应类型回应类型 交互设计要点交互设计要点预设用途控件反馈错误版面设计版面设计媒体选择图标设计色彩选择与组合文字编排与设计静态图形图像的设计与应用动态元素设计声音的设计与应用3、界面元素设计界面元素设计测试综合评估反复的设计4、应用测试应用测试专家评审专家评审切割编码切割编码原型设计原型设计需要分析需要分析发布跟踪发布跟踪交互交互DEMO视觉界面视觉界面0602030507案例案例电子商务网站的交互设计电子商务网站的交互设计

13、本节要点：了解项目背景和需求如何做好前期准备如何做好详细设计如何做好交互设计文档作者：于宗博个人网站：http:/ Engagement,CE),应用国际流行的用户研究方法进行包括心理学、行为学等多方面的研究。软大的电子商务平台也都有类假的研究机构。2、前期准备前期准备如何选中，如何释放、选中之后展现哪些后续选项账款产，需要交互设计师拿出明确的方案。交互设计师还要和产品经理具体讨论哪些维度适合用分面的方式展示，哪些不适合。当产品没成型时，是交互设计介入的最好时机。优秀的交互设计师既是信息架构的大拿，也应该是细节的专家。3、交互设计交互设计在用户模型与功能模型阶段，产品设计师（PD）与需求分析师

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

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

16、元素，后将他们组合拼凑，粘贴到背景板上（去膜后的KT板），构建成模拟真实产品界面的原型。使用时，纸上原型的设计者代替电脑对用户（以及内部人员）的点击和按键操作给出反应，重组纸片，书写定制的反馈，偶尔口头描述一些效果（当这个效果比较难在纸上显示的时候），以达到仿真产品交互的目的。国外纸上原型案例展示国外纸上原型案例展示原型的根本目的不是为了交付，而是沟通、测试、修改，解决不确定。纸上原型是一种原型设计方法，它应用于交互产品设计的初始阶段。纸上原型具有快速构建、轻松修改、容易操作，关注流程，抛弃成本低的特点。特别注意：纸上原型不是手绘草图。阿里巴巴中国站阿里巴巴中国站UED应用纸上原型进行讨论应用

17、纸上原型进行讨论2.3 纸上原型与手绘草图的区别：纸上原型是一种原型设计方法，手绘草图是一种设计表现形式。两者在定义的维度上有所区别。纸上原型可以采用手绘草图作为一种表现形式，手绘的草图并不一定都是纸上原型。另外也需要强调的是手绘草图与低保真原型的区别。现在普遍存在一个误解，手绘草图（如果画的是某个交互产品）通常被视作低保真原型的一种，但这种说法同样不准确，也是定义维度上的问题，前者是设计表现形式，后者是原型精度（原型精度是一个多维概念，它包括广度、深度、表现、感觉、仿真度等多个指标）。电子商务搜索引擎的细节设计电子商务搜索引擎的细节设计1.针对针对suggestion的情感化设计细节处理的情感化设计细节处理EBAY.COM：当用户觉得不想使用当用户觉得不想使用suggestion,或认为或认为suggestion会给他带来干扰的时候会给他带来干扰的时候,用用户可以选择关闭户可以选择关闭suggestion.( suggestion有的时候可能会切断用户的心流有的时候可能会切断用户的心流,对对用户的心智模型造成影响用户的心智模型造成影响)当用户想重新使用suggestion的时候,仍然可以通过搜索框内右边的按钮还原suggestion功能.此时,当鼠标移到