图形用户界面设计简介综述及发展历史和设计原则

• 现代 • 电脑：图形用户界面一般指介于用户与电脑之间沟通与交 互之硬件以及软件，目的在使得电脑系统之用户能够方便 有效率地去操作电脑以达成双向之交互，完成所希望借助 电脑完成之工作，其涵盖之范围包括：早期由纸带输入设 备到键盘、鼠标、数字版等等数据输入的设备，显示屏幕、 声音等等输出设备，参考文件、联机说明、教学课程等等 辅助使用之材料，人机交互的模式达到了只认识1与0的电 脑与人类之间的用户接口。
• 在DOS环境下，电脑启动开机后，所呈现的不是桌面和图 标，而是这样的电脑屏
• 幕：C:\>叫做命令提示符，这个闪动的横线叫做光标。这 样就表示电脑已经准备好，在等待用户输入指令。用户需 要做的，就是对电脑发出指令，给电脑什么指令，电脑就 会按照指令进行操作。那用户又怎么向电脑输入指令呢？ • 比如:用户想看看几点钟了，就可以输入时间命令，敲入 time四个字母，再敲回车键确认，这时屏幕上就显示出当 前时间。再敲回车键，又出现提示符了，就可以输入下一 条命令了。如果想看日期，输入date，然后敲回车键确认， 这时屏幕上显示出当前日期。再敲回车键又回到提示符了。
实现方法
• 针对特定的图形设备输出接口，自行开发相关的功能函数。
• MIDP应用程序图形用户界面 • MIDP（Mobile Information Device Profile，移动信息设备配置文件） 建立在 CLDC 的基础之上，用来描述手机这样更加具体化的的无线移 动设备。 • CLDC (Connected Limited Device Configuration，有限连接设备配置) 是为运行在资源非常有限的设备（例如手机）上的J2ME应用程序制 订的架构。规范内容包括目标机器的特性、虚拟机规范和基本的API （应用程序编程接口）等等
• 界面设计，在漫长的软件发展中，界面设计工作一直没有 被重视起来。做界面设计的人也被贬义的称为“美工”。 其实软件界面设计就像工业产品中的工业造型设计一样， 是产品的重要买点。一个友好美观的界面会给人带来舒适 的视觉享受，拉近人与电脑的距离，为商家创造卖点。界 面设计不是单纯的美术绘画，他需要定位使用者、使用环 境、使用方式并且为最终用户而设计，是纯粹的科学性的 艺术设计。检验一个界面的标准即不是某个项目开发组领 导的意见也不是项目成员投票的结果，而是最终用户的感 受。所以界面设计要和用户研究紧密结合，是一个不断为 最终用户设计满意视觉效果的过程。
图形用户界面介绍与设计
• • • • • • 介绍图形用户界面 发展历史 dos图形界面 实现方法 准则和原则 应用领域
图形用户界面
图形用户界面或图形用户接口(Graphical User Interface，GUI)是 指采用图形方式显示的计算机操作环境用户接口。与早期计算机 使用的命令行界面相比，图形界面对于用户来说更为简便易用。 GUI的广泛应用是当今计算机发展的重大成就之一，它极大地方 便了非专业用户的使用人们从此不再需要死记硬背大量的命令， 取而代之的是可用用通过窗口、菜单、按键等方式来方便地进行 操作。而嵌入式GUI具有下面几个方面的基本要求：轻型、占用 资源少、高性能、高可靠性、便于移植(android系统在很多手机上 都可以移植)、可配置等特点。
• 保持简洁 • 最好的用户界面就是没有界面。优秀的软件界面中，你看 不到华而不实的UI修饰，更看不到那些用不到的设计元素。 所以当想着是否要在界面上加一个新功能或是新元素的时 候，再思考一下：用户或者界面中真的需要这些么？为什 么用户想要在这里当这个小巧的动态图标？是否只是因为 出于自我喜好和页面的漂亮而去添加这些元素？优秀的UI 工程师做出来的软件界面不会十分华丽，界面中没有任何 分散用户注意力打搅用户操作的元素。甚至应该达到在用 户使用系统的时候完全注意不到页面和操作复杂的问题， 一切都应该是顺理成章的。
• 保持一致 • 用户需要知道一旦他们学会做某项操作， 那么下次也同样可行。语言、布局和设计 是需要保持一致性的几个界面元素。一致 性的界面可以让用户对于如何操作有更好 的理解，从而提升效率。
• 清晰的视觉层次 • 设计时，要让用户把注意力放在最重要的 地方。Biblioteka Baidu一个元素的尺寸、颜色还有位置， 它们为理解界面共同指明了道路。清晰的 层级关系将对降低外观的复杂性起到重要 作用（甚至当行为本身也同样复杂的时 候）。
• 购买针对特定嵌入式系统的图形中间软件包。 • 采用源码开放的嵌入式GUI系统。 • 使用独立软件开发商提供的嵌入式GUI产品。
了解实现的基础
电子计算机系统中实现用户与计算机信息 交换的软件、硬件部分。软件部分包括用 户与计算机信息交换的约定、操作命令等 处理软件，硬件部分包括输入装置和输出 装置。目前常用的是图形用户界面，它采 用多窗口系统，显示直接形象，操作简便。 也叫人机界面。简称界面。
• 在图形用户界面中，电脑画面上显示窗口、 图标、按钮等图形表示不同目的的动作， 用户通过鼠标等指针设备进行选择。最著 名例子就是由苹果公司在麦金塔所创的图 形用户界面。
• 麦金塔电脑 • 麦金塔电脑（Macintosh，简称Mac，香港俗称 Mac机，大陆亦有人称作苹果机或麦金托什机）， 是苹果电脑其中一系列的个人电脑。Macintosh是 由Macintosh计划发起人Jef Raskin根据他最爱的 苹果品种McIntosh命名。
用户界面 不光是指电脑的桌面 • 用户界面是介于用户与硬件之间，为彼此之间交互沟通而 设计的相关软件，使得用户能够方便有效地去操作硬件以 达成双向之交互，完成所希望的工作，用户界面定义广泛， 包含了人机交互与图形用户界面，凡参与人类与机械的信 息交流的领域都存在着用户界面。 • 用户和系统之间一般用面向问题的受限自然语言进行交互。 目前有系统开始利用多媒体技术开发新一代的用户界面。
三大原则
• 在人和机器的互动过程（Human Machine Interaction）中，有一个层面，即我们所说 的界面（interface）。从心理学意义来分， 界面可分为感觉（视觉、触觉、听觉等） 和情感两个层次。用户界面设计是屏幕产 品的重要组成部分。界面设计是一个复杂 的有不同学科参与的工程，认知心理学、 设计学、语言学等在此都扮演着重要的角 色。用户界面设计的三大原则是：置界面 于用户的控制之下；减少用户的记忆负担； 保持界面的一致性。
发展历史
• 古代（广义） • 最古老的用户接口是在各式各样物体制作符号、图形，使 人类与对象之间产生交互接口，比如说当人类看到招牌即 知道这栋房屋的作用为何。 • 声音、旗帜、手势的运用，是让人与人或人与设备之间的 用户接口，例如在战场或乐团演奏上，甚至是运用龟甲、 钱币的卜卦，老师使用黑板作为与学生的用户接口，而算 盘亦是由珠子所构成的早期人机界面。 • 早期电脑批量接口（风行于1945-1968）： 所有的输入数 据预先设置于程序或命令行参数中。命令行界面（风行于 1969-1983）：用户通过键盘输入指令，电脑接收到指令 后，予以运行。
准则
• • • • • • • 减少用户的认知负担 保持界面的一致性 满足不同目标用户的创意需求 用户界面友好性 图标识别平衡性 图标功能的一致性 建立界面与用户的互动交流
设计原则编辑
• 了解你的用户 • 你的用户是最终评判用户界面好坏的人，所以用 户即是你的终极目标，不了解用户需求，即使你 的界面做得再好，也不是用户想要的产品。沉下 心来仔细观察用户的喜好，并了解他们的技能水 平和体验，并观察他们在界面中如何操作。不要 迷恋于追逐设计趋势的更新，或是不断添加新的 功能。始终记住，首要的任务是关注你的用户， 这样才能创造出一个能让用户达成目标的界面。
• 1990年代初期微软所发表的Windows 3.0则巩固此一变革。 • 工业：人机界面在工业界亦将传统按钮皮肤进入到亲切的 触控人机界面（Human-MachineInterface，缩写HMI）， 在工业上的用户接口简单的区分为Input(输入)与Output(输 出)两种，Input指的是由人来进行机械或设备的操作，如 把手、开关、门、指令（命令）的下达或保养维护等，而 Output指的是由机械或设备发出来的通知，如故障、警告、 操作说明提示等，好的人机界面会帮助用户更简单、更正 确、更迅速的操作机械，也能使机械发挥最大的性能并延 长使用寿命，而目前市面上所指的人机界面则多半狭义的 指在拥有软件人性化的操作接口的硬件（如触控屏幕）。
• 重视UI模型 • 在软件中，用户的大部分时间都消耗在界 面操作中（数据录入、数据修改、数据查 阅等等），这点与浏览为主的网站类页面 的用户操作完全不同。我们无需画蛇添足， 用户希望在新创造的界面中看到那些已有 的、相似功能的或遵循基本操作方式的软 件界面。所以利用已成惯例的UI模型，将 使用户产生亲切感。
• 软件设计可分为两个部分：编码设计与UI设计。 编码设计大家都很熟悉，但是UI设计还是一个很 陌生的词，即使一些专门从事网站与多媒体设计 的人也不完全理解UI的意思。UI的本意是用户界 面，是英文User和 interface的缩写。从字面上看 是用户与界面2个组成部分，但实际上还包括用户 与界面之间的交互关系。
• 鼓励用户 • 一旦用户在完成了关键操作，要及时告知 用户（弹出对话框等）。值得注意的是把 一个复杂的流程任务分解为若干简单步骤 将会更显繁复和让人精力分散。所以无论 正在执行的任务有多么复杂和漫长在界面 上要保持流程的不间断性。
• 语言有亲和力 • 所有的界面或多或少都有文字在其上，让 文稿尽量口语化，而不是华美辞藻的堆砌。 为行为提供清晰、简明的标签，保持简朴 的文字叙述。用户对此将会很赞赏，因为 他们不再是听命于他人的官腔——他们听 到的是如朋友般甚至自己说话的表述方式。
• 刚接触电脑的时候是从DOS系统开始， DOS时代根本就没有Windows这样的视窗 操作界面，只有一个黑漆漆的窗口，让你 输入命令。
cmd命令简介
• • • • • • • • • winver---------检查Windows版本 wmimgmt.msc----打开windows管理体系结构(WMI) wupdmgr--------windows更新程序 wscript--------windows脚本宿主设置 write----------写字板 time----------时间 winmsd---------系统信息 wiaacmgr-------扫描仪和照相机向导
• 其他现在还有很多一些用户界面，由原本的按钮、纸本等 传统古代接口进化至直接用手指、或者特殊的笔端触摸触 摸屏上显示的按钮、图标进行各种操作，如自动取款机 (ATM)，汽车导航、媒体播放器、游戏机、手机等等，一 般操作简捷，直观。
• 未来 • 未来的用户接口： • 更加真实交互的虚拟实境：举例来说，就 是比个粗鲁动作就能当作Control-Alt-Delete 键的意思。脑机接口：它是在人或动物脑 （或者脑细胞的培养物）与外部设备间创 建的直接连接通路，目前还在实验阶段， 科学家在全身瘫痪病患实际脑中植入电脑 芯片，已成功利用脑电波来控制电脑，画 出简单的图案及电脑游戏，不过未来研究 成功时，就可让人类就可利用脑波作为用 户接口。
• 麦金塔电脑于1984年1月24日发表。麦金塔是苹 果电脑继LISA后第二部使用图型用户界面(GUI)的 电脑。而麦金塔是首次将图形用户界面广泛应用 到个人电脑之上。
• 在1980年代，电脑的用户接口革命是当时 苹果电脑所发表的麦金塔(Macintosh)使用 WIMP（视窗、图键、窗体，以及鼠标）将 图形用户界面(GUI)带进了大众市场，取代 早期计算机使用的命令行界面。 • 首次显示了图示和电脑桌面 • 使用鼠标作为指标工具 • 使用指标工具进行“双击
• 提供反馈 • 界面要始终保持和用户的沟通，不管是他 们的行为对错与否。随时提示用户的行为： 状态更改、出现错误或者异常信息。视觉 提示或是简单文字提醒都能告诉用户，他 们的行为是否能够达到预期的结果。
• 容错机制 • 无论你的设计多么的清晰明了，用户都会 犯错。你的界面应当允许并要为用户提供 可以撤销行为的方式，并且对五花八门的 输入数据尽量宽容（没人愿意只是因为填 错了生日的格式而重头再来）。同样，如 果用户的行为引起了一个错误，在恰当的 时机运用信息显示什么行为是错误的，并 确保用户明白如何防止这种错误的再次发 生。