1、MobileTerminalUIDesign移动端UI设计第第1 1章章移动端移动端UIUI设计设计概述概述概念理解移动媒体移动媒体 UIUI设计设计 UIUI设计的历史与现状设计的历史与现状 移动媒体移动媒体 移动数字媒体是指以移动数字终端为载体，通过无线数字技术与移动数字处理技术，以文字、图片、视音频等方式展示信息和提供信息处理功能的媒介。 当前，移动数字媒体的主要载体以智能手机及平板电脑为主，随着信息技术的发展和通信网络融合，一切能够借助移动通信网络沟通信息的个人信息处理终端都可以作为移动媒体的运用平台。UIUI设计设计 UI即User Interface(用户界面)的简称。界面在现代汉
2、语词典的定义是“物体与物体间的接触面”，词义较广。在现代科学领域，界面的意义很多。日本人依据界面的不同存在方式将界面分为硬件界面和软件界面。目前， UI设计更多指向是建立在硬件设备之上的软件界面的设计，具体指对软件的人机交互、操作逻辑、界面美观的整体设计。UIUI的范畴的范畴UI设计的范畴十分广泛。从“用户界面”的含义去理解，UI设计包括网站界面设计、软件界面设计、移动端应用界面设计等等。不论是在手机、Ipad移动端上还是在PC电脑端上都随处可见。 APP 英文Application的简称 智能手机的第三方应用程序 移动媒体移动媒体UIUI设计设计移动媒体设计是针对运行于移动媒体终端上的数字产
3、品的设计，包括数字媒体产品的策划、框架布局、界面表现等，从产品开发角度来划分，可以将其划分为战略层、范围层、结构层、框架层、表现层。UI设计的历史与现状设计的历史与现状图形界面发展历史图形界面发展历史- - CUICUI时期时期1963年，美国麻省理工学院美国麻省理工学院在709/7090计算机上成功地开发出第一个分时系统CTSS，该系统连接了多个分时终端，并最早使用了文本编辑程序。从此，以命令形式对话的多用户分时终端成为上个世纪70年代乃至80年代用户界面的主流。当时属于以文本为主的字符用户界面，即“Command User InterfaceCommand User Interface”命
4、令用户界面，简称CUI时期。UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期当前UI设计的主流是图形用户界面图形用户界面“graphical user interfacegraphical user interface”简称GUIGUI。然而，图形界面最早出现于施乐公司施乐公司（Xerox）的PARC(帕洛阿尔托研帕洛阿尔托研究中心究中心)开发的AltoAlto电脑电脑的操作系统上，1973年4月，PARC研发出了第一台使用Alto操作系统的个人电脑，Alto首次将所有的元素都集中到现代图形用户界面中，它相当小，但却有着强大的处理图像信息和分享信息的能力，拥
5、有“所见即所得所见即所得”的文档编辑器，内置了大量的字体和文字格式。UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期Xerox PARC还开发了一种名为Smalltalk的程序语言和环境，它拥有自己的GUI环境（包括了弹出菜单、视窗、图标）。PARC最早提出“图图标标”、“窗口窗口”及及“菜单菜单”这些概念，鼠标也是鼠标也是PARCPARC发明发明的。Alto操作系统界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期1981年6月，施乐公司推出了StarStar，Star于1977年开始研发，它延续了 Alto的概念，在
6、硬件上做了一些升级，最重要 的是拥有桌面软件，支持多语言，能够连接文件服务器、邮件服务器和打印服务器。可惜的是，Xerox Star是一个完全封闭的系统，不允许人们应用系统之外的其它程序语言和开发环境，这也意味着它不支持第三方软件。Xerox Star操作系统界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期1978年，苹果公司苹果公司准备股票上市，施乐公司预购了苹果公司100万美元的股票，并允许苹果公司工程师们研究PARC操作系统的图形界面。此后，苹果的工程师将图形界面带进了一个崭新的时空。1983年1月，苹果公司发布了LisaLisa系统系统，Lisa
7、系统不仅拥有 Smalltalk的GUI环境，还增加了下拉菜单、桌面拖曳、工具条、苹果系统菜单和非常先进的复制粘贴功能。Lisa操作系统界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期1984年苹果公司乘胜追击，发布了MacintoshMacintosh，它已经有了现代操作系统的一些特点。双击磁盘图标，打开一个文件窗口，同时伴随着缩放效果。文件和文件夹都可以被拖曳到桌面上，还可以通过拖曳来拷贝或移动文件。Macintosh操作系统界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期1985年，微软发布了Windows
8、1.0Windows 1.0。这款系统虽然使用了图形操作界面，不过看上去也只不过是给MS-DOS加了一张皮。Windows 1.0允许使用鼠标，可以在程序之间进行切换，可以调整窗口大小和最小化窗口。这套系统在当时非常流行。Windows 1.0界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期1987年4月，苹果公司发布了Apple Apple Macintosh IIMacintosh II，第一代彩色第一代彩色MacintoshMacintosh，拥有24位可用颜色样本。Macintosh II界面UI设计的历史设计的历史图形界面发展历史图形界面发展历
9、史- - GUIGUI时期时期Windows 2.0Windows 2.0发布于1987年，为我们带来了第一版Microsoft Word和Excel软件。也正是Windows 2.0导致苹果对微软发起了诉讼。苹果的诉讼的理由是Windows 2.0“看上去感觉”跟Macintosh和Lisa电脑使用的操作系统很像。苹果并没有打赢这场官司。看起来这个还是没有脱离dos，已经初具规模。Windows 2.0界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期1988年9月，苹果公司发布了GS/OSGS/OS，一个16位的操作系统，它在屏幕顶部有一条单独的菜单栏
10、。同年10月，NeXT计算机发布。OS界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期NeXTNeXT是由苹果公司的创办人史蒂夫乔布斯，于1985年被苹果公司辞退后同年成立的。NeXT计算机是工业设计者的一个重大胜利，未来主义的black cube和高分辨率的显示器，一个图形界面和一个叫作NeXTStep操作系统（图1-17）。1996年，苹果公司买下了NeXT并把Jobs请回苹果帮助运营公司。NeXTStep操作系统界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期Windows 3.0Windows 3.0发布于
11、1990年，在界面、人性化、内存管理等多方面相比前代有了巨大的改进和提升，在当年年底曾创下销售100万套的纪录，该版本也为5年之后的Windows 95打下了基础，这是微软第一个真正在世界上获得巨大成功的图形用户界面版本。这也是最后一款看上去还残存MS-DOS风格的Windows系统。Windows 3.0界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期1991年，Mac OS version 7.0Mac OS version 7.0发布，它是一款支持色彩的Mac OS图形用户界面，图标增加了隐约的灰色，蓝色和黄色阴影。Mac OS version 7
12、.0界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期微软的Windows 95Windows 95让1995年成为PC历史上的一个里程碑。这套系统完全洗掉了MS-DOS的痕迹，整个界面焕然一新整个界面焕然一新，带来了在当时犹如从科幻电影走出来的UI；IEIE浏览器，回收站，还有开浏览器，回收站，还有开始菜单这些元素成为始菜单这些元素成为WindowsWindows的经典标志的经典标志，系统首次在每一个窗口上都添加了小小的关闭按钮，设计团队为图标和图形设计了各种状态（启用，禁用，选定，停止等）。Windows 95Windows 95也成为至今为止所有也成
13、为至今为止所有WindowsWindows系统的界面蓝本。系统的界面蓝本。Windows 95界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期1997年7月，Mac OS 8Mac OS 8破茧而出，这距史蒂夫乔布斯1996年重回苹果公司时只过去了1年的时间，苹果公司重燃战火，两周之内卖出了1.25亿份拷贝，成为当时最畅销的软 件。Mac OS 8也允许用户设置背景图片，而不仅仅是单一的黑白样式，用户甚至可以从他们的文件夹中选择图片来进行设置。Mac OS 8界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期2000
14、年1月5日，苹果公司宣布他们设计出了全新的AquaAqua界面，并将用于公司新推 出的MacOS X操作系统中。默认的32 x 32和48 x 48的图标被更大的128 x 128平滑的半透明图标取代。Dock上放置了常用的程序图标，鼠标经过时会显示程序名称。当窗口最小化后，在Dock上显示的不是程序图标，而是程序窗 口的缩略图。AquaAqua界面最大的变化是涉及到了渐变、背界面最大的变化是涉及到了渐变、背景样式、动画和透明度的应用，有着更好的用户体验。景样式、动画和透明度的应用，有着更好的用户体验。Aqua界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期
15、时期2001年，微软发布Windows XPWindows XP。Windows XP拥有全新的图形用户界面，成为有史以来销量最高、占有率最高的操作系统，也是微软历史上最成功的Windows版本。Windows XP界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期2006年微软发布了Windows VistaWindows Vista，Windows Vista使用AeroAero磨砂玻璃界面，“Aero”为四个英文单字的首字母缩略字：Authentic（真实）、Energetic（动感）、Reflective（反射）及Open（开阔）。意为Aero界面
16、是具立体感、令人震撼、具透视感和阔大的用户界面。由于Windows Vista进化太过激进，导致了硬件兼容的问题，这套系统最终并没有流行起来，人们宁愿选择硬件要求不那么高的Windows XP。Vista的真正价值可能是它的界面风格。Windows VistaWindows Vista的半透明的半透明UIUI是这套系统最大的价值。是这套系统最大的价值。UI设计的历史设计的历史Windows Vista界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期2006年，同年，苹果公司发布了第6代Mac OS XMac OS X操作系统Mac OS X Leopar
17、d，再一次改进了用户界面。基本的界面仍为AquaAqua和水晶滚动条水晶滚动条，加入了一些铂灰色和蓝色，3D dock和更多的动画及交互使得新界面看上去有着更丰富的3D3D效果效果。Mac OS X Leopard界面UI设计的历史设计的历史图形界面发展历史图形界面发展历史- - GUIGUI时期时期2012年，微软发布Windows 8Windows 8。Windows 8抛弃了Aero磨砂玻璃界面和开始菜单。为了适应触摸屏，Windows 8使用了扁平化的Metro界面，Metro UIMetro UI强调信息本身，微软认为Metro设计主题应该是：“光滑、快、现代”。由于Windows
18、8在界面上的进化幅度过大，造成了Windows传统用户的不适应，导致Windows 8的市场占有率长期不高。Windows 8界面计算机界面目前有三阶段字符界面（ CUI ）、图形界面（GUI）、自然界面（NUI）。这三阶段界面对应着三种不同的操作环境键盘、鼠标、触摸（动作）。以 DOS 为代表的字符界面现在已经淘汰，只剩下以Mac、Win为代表的图形界面和iOS为代表的自然界面。UI的发展经历了以符号为主的字符命令语言、以视觉感知为主的图形用户界面、兼顾听觉感知的多媒体用户界面和综合运用多种感观（包括触觉等）的虚拟现实系统。UI的发展趋势体现了对人的因素的不断重视，使人机交互更接近于自然的形
19、式，使用户能利用日常的技能，不需要经过特别的学习就能轻松地实现人机交互，达到信息互通的目的。这是“以人为中心”思想的体现。UIUI设计的方向设计的方向界面设计界面设计交互设计交互设计用户研究用户研究用户研究用户研究用户研究的首要目的是帮助企业定义产品的目标用户群、明确、细化产品概念，并通过对用户的工作环境、产品的使用习惯以及认知心理特征等的研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。用户研究使用户的实际需求成为产品设计的导向，使产品更符合用户的习惯、经验和期待。交互设计是定义、设计人造系
20、统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。简单来说，交互设计是指人和产品或服务互动的一种机制。以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。交互设计交互设计交互设计的中心思想是以用户为中心。交互设计交互设计交互设计的基本流程包括：用户需求分析确定产品设计概念候选方案设计原型设计用户测试与评估。交互设计交互设计界面是人与机器之间传递和交换信息的媒介。从深度上分为两个层次：感觉的和情感的。感觉层次指人和机器之间的视觉、触觉、听觉层面；情感层次指人和机器之间由于沟通所达成的融洽关系。总之用户界面设计是以人为中心，使产品达到简单使用和愉悦使用的设计。界面设计界面设计 UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。
