移动UI交互设计第一章.pptx

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