移动UI交互设计（微课版）PPT.pptx

01UI设计概述移动UI交互设计（微课版）（第2版）主编：夏琰副主编：余燕张帆目录CONTENTS1.1UI设计的概念 1.2UI设计的流程1.3UI设计的规范1.1UI设计的概念 UI是“UserInterface”的缩写，译为用户界面。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计现已成为屏幕产品（包括能在计算机、手机、Pad等设备上运行的各种产品）的重要组成部分。1.1UI设计的概念 从事UI设计工作的人称为UI设计师，主要负责以下工作。软件界面的美术设计、创意和制作工作。根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计。对页面进行优化，使用户操作更趋于人性化。维护现有的应用产品。收集和分析用户对于GUI的需求。目录CONTENTS1.1UI设计的概念 1.2UI设计的流程1.3UI设计的规范1.2UI设计的流程 UI设计不光要研究产品的外形、图形界面，还要研究产品的交互设计，并且确立交互模型、交互规范，同时要测试交互设计的合理性及图形设计的美观性等。也就是说，UI设计包括了界面设计、交互设计与用户研究3个部分。因此，UI设计师的基本工作流程可以分为以下几个阶段。1.2.1需求分析阶段需求分析阶段主要是分析产品用户的需求及同类产品的优、缺点。产品用户的需求包括产品的使用者、使用环境及使用方式的需求，如面对儿童开发的产品和面对家长开发的产品就是完全不同的两个概念，电脑上使用的软件和手机上使用的软件就不能使用同一款设计等。也有人将需求分析总结为3W，即Who、Where、Why，也就是什么人用、在什么地方用、为什么用，其中任何一个元素发生改变，结果都会有相应的改变。所谓“知己知彼、百战百胜”，要设计一个产品的UI，了解同类产品的优势和不足是非常重要的。例如，我们要设计一款用于网上聊天的软件，就可以将QQ、微信、易信等同类产品进行调研，总结出各款产品的特点，找到自己设计的切入点。当然，适合于最终用户的设计才是最好的设计。1.2.2设计制作阶段在需求分析的基础上，我们进入设计制作阶段。设计包括界面设计和交互设计，且要形成设计方案。界面设计当然以美观为主，要有创新，在同类产品中能够脱颖而出。界面设计包括启动界面、主界面、详情界面等代表性界面的设计。交互设计要分析产品必需的功能、内容，根据需要制作低保真模型或高保真模型，也可通过原型工具来规划流程。如果有条件的话，可以在设计时，多设计出几套不同风格的方案用于备选。如右图所示。1.2.3方案修改阶段设计方案提交给客户后，需要与客户进行沟通，根据客户的需求来修改设计。我们在尽量满足客户要求的基础上，也要考虑其要求的功能或技术是否可行。例如，有些客户的修改意见，在方案规定时间内是难以完成的。可能完成时间需要3个月，但是最后客户却要求在2个月内交稿，这时这些功能就可以待产品下次改版或升级时再实现。1.2.4测试改进阶段在设计方案通过并交付以后，就可以将产品推向市场了。但是设计并没有结束，我们还需要跟踪了解用户的测试与反馈。好的设计师应该在产品上市以后主动接近市场，在第一线零距离接触最终用户，了解用户实际使用时的感想，为以后升级版本积累经验。目录CONTENTS1.1UI设计的概念 1.2UI设计的流程1.3UI设计的规范1.3UI设计的规范在进行产品的UI设计时，要遵循统一的规范，让用户使用起来有统一感，不觉得混乱；同时，还要建立起精确的心理模型，使用户对一个界面使用熟练后，切换到另外一个界面也能轻松地推测出各种功能。一般在进行UI设计时，会由项目组有经验的人士或是项目经理确立UI规范，从而使所有参与人员了解规范，降低时间成本和培训成本。1.3.1用户控制原则UI设计的一个重要原则是永远以用户体验为中心。（1）操作上要让用户扮演主动角色，在需要自动执行任务时，要以允许用户进行选择或控制它的方式来实现该自动任务。（2）要提供用户自定义设置。每个用户的需求和喜好不一样，要使产品满足不同用户的个性需求，就要为用户提供类似于颜色、字体或其他选项的设置。（3）要让用户感觉自己是聪明的，对于软件的操作是顺利的、易于理解的。同时，出错界面要友好，让用户对产品有好感。1.3.2一致性原则在同一款产品中，要使用一致的外观、字体、手势、命令等来展示同样的功能或信息。外观：一致的外观使用户界面更易于理解和使用，界面上的控件看起来应该是一致的。字体：保持字体及颜色一致，避免一套主题出现多个字体，我们可以用不同的字号来显示内容的层级关系。对于不可修改的字段，最好统一用灰色文字显示。手势：在手机或Pad程序中，通常会用手势进行操作，如放大/缩小、快进/快退、音量