手持移动设备UI设计第一节(3次课)

1、手持移动设备UI设计,第一节 关于UI设计,一、什么是UI,通过什么操作汽车？,通过什么操作ATM机？,通过什么控制电视机？,通过什么控制数控车床？,通过什么操作Photoshop程序？,通过什么操作手机？,UI即User Interface(用户界面)的简称。广义上来讲，UI界面是人与机器进行交互的操作方式，即用户与机器相互传递信息的媒介，其中包括信息的输入和输出。,机器,用户,界面,好的UI界面美观易懂、操作简单且有引导功能，使用户感觉愉快、增强兴趣，拉近用户和机器之间的距离，从而提高使用效率。所以，对整个产品设计来说，UI界面设计是其重要的组成部分。,但对于我们多媒体和图形设计方向来说，

2、UI界面则主要是指GUI，即Graphical User Interface（图形用户界面），是对屏幕产品的视觉效果和互动操作进行设计。 GUI 是一种结合美学、计算机科学、心理学、行为学、人机工程学以及市场的综合性学科，强调人机环境三者作为一个系统进行总体设计。 思考常见的GUI界面。,UI的本意是用户界面，是英文User和 interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，他们分别是：,用户研究、交互设计、界面设计,用户研究包含两个方面： 一是 可用性工程学（usability Engineering），研究如何提

3、高产品的可用性，使得系统的设计更容易被人使用、学习和记忆； 二是 通过可用性工程学的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法（consumer insight）。,用户研究是一个跨学科的专业，涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等等学科。用户研究技术是站在人文学科的角度来研究产品，站在用户的角度介入到产品的开发和设计中。 用户研究通过对于用户的工作环境、产品的使用习惯等研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。,2 交互设计 这部分指人与机

4、之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。 3 界面设计 界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。,一个通用消费类软件界面的设计大体可分为五个步骤： 1.需求阶段 2.分析设计阶段 3.调研验证阶段 4.方案改进阶段 5.用户验证反馈阶段,UI的分类 Graphics User Interface 图形用户界面 有时也称为WIMP=Window/Icon/Menu/Pointing Device 窗口、图标、菜单、指点设备 HUI Handset User Interface

5、 手持设备用户界面 WUI Web User Interface 网页风格用户界面,二、主要研究内容： GUI是一种综合性设计，要想设计出好的图形界面，我们必须要掌握设计艺术、计算机技术、人机工程学等学科领域的内容。,1、设计艺术 主要涉及到平面构成、色彩构成以及立体构成等基础知识，同时也需要有一定的平面设计经验。,2、计算机技术 UI界面的互动必须要通过计算机技术来实现，例如用FLASH做的互动程序，必须要用AS语言才能够实现。,3、人机工程学 人机工程学就是应用人体测量学、人体力学、劳动生理学、劳动心理学等学科的研究方法，对人体结构特征和机能特征进行研究，提供人体各部分的尺寸、重量、体表面

6、积以及人体各部分在活动时的相互关系和可及范围等人体结构特征参数；分析人的视觉、听觉、触觉以及肤觉等感觉器官的机能特性；探讨人在工作中影响心理状态的因素以及心理因素对工作效率的影响等。,三、GUI(图形界面)主要组成部分： 1、桌面 在启动时显示，也是界面中最底层，有时也指代包括窗口、文件浏览器在内的“桌面环境”。在桌面上由于可以重叠显示窗口，因此可以实现多任务化。一般的界面中，桌面上放有各种应用程序和数据的图标，用户可以依此开始工作。 典型代表：Windows桌面、手机桌面等,2、窗口 应用程序为使用数据而在图形用户界面中设置的基本单元。应用程序和数据在窗口内实现一体化。在窗口中，用户可以在窗

7、口中操作应用程序，进行数据的管理、生成和编辑。通常在窗口四周设有菜单、图标，数据放在中央。,3、菜单 将系统可以执行的命令以阶层的方式显示出来的一个界面。一般置于画面的最上方或者最下方，应用程序能使用的所有命令几乎全部都能放入。重要程度一般是从左到右，越往右重要度越低。命定的层次根据应用程序的不同而不同，一般重视文件的操作、编辑功能，因此放在最左边，然后往右有各种设置等操作，最右边往往设有帮助。一般使用鼠标的第一按钮进行操作。,4、按钮 菜单中，利用程度高的命令用图形表示出来，配置在应用程序中，称为按钮。 应用程序中的按钮，通常可以代替菜单。一些使用程度高的命令，不必通过菜单一层层翻动才能调出

8、，极大提高了工作效率。但是，各种用户使用的命令频率是不一样的，因此这种配置一般都是可以由用户自定义编辑。,四、GUI的设计原则： 1、减少用户的认知负担 2、保持界面的一致性 3、满足不同目标用户的创意需求 4、用户界面友好性 5、图标功能的一致性 6、建立界面与用户的互动交流,五、GUI的主要应用领域： 手机通讯移动产品、电脑操作平台、软件产品 、PDA产品 、数码产品 、车载系统产品、 智能家电产品 、游戏产品 、产品的在线推广等。,GUI 定义 GUI-Graphical User Interface即人机交互图形化用户界面设计。准确来说GUI就是屏幕产品的视觉体验和互动操作部分。,GUI 应用领域 手机通讯移动产品,电脑操作平台 软件产品 PDA产品 数码产品 车载系统产品 智能家电产品 游戏产品,实验一：临摹平板电脑操作界面,要求： 1、分析界面的布局、版式、色彩以及功能，领会界面的设计