• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 用一篇文章,带你回顾桌面GUI 的设计发展史

用一篇文章,带你回顾桌面GUI 的设计发展史

作者:王晗陵 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含GUI,ui设计,设计史等相关知识,王晗陵希望在学习及工作中可以帮助到您

很高兴你能打开标题,进来阅读这篇关于桌面应用设计的文章。

阅读过我前两篇文章的朋友可以看出那两篇其实分享的是交互设计里非常基础的设计原则和跨平台规范。没错,在我写作计划的开始,我会努力整理和总结一些行业内知名的设计原则和平台规范,和大家一起「回归设计本源」。

往期回顾:

  • 《用Airbnb 的产品,帮你快速理解尼尔森10大可用性原则!》
  • 《设计师应该知道的 iOS 设备常见差异化设计》

前几天被 YouTube 推荐了一个视频:《 1984: young Steve Jobs introduces the Macintosh》,仔细看了一下乔布斯当时演示的 Demo,发现:34年前的个人电脑,在硬件、兼容、功能、性能、交互细节、视觉表现等方面与今天的个人电脑有着非常明显的差别,但不论是当年的底层系统还是桌面应用,它们 GUI 的基本要素相比今天并没有大的变化。好,下面就从 GUI 的诞生和进化来看桌面应用设计有哪些基本要素。

一、GUI的发展

1973 Xerox Alto

1973年第一个可视化操作的 Alto计算机在施乐帕洛阿尔托研究中心(Xerox PARC)完成。Alto 是第一个把计算机所有元素集合到一起的图形界面操作系统。它使用了3键鼠标、位运算显示器、图形窗口、以太网络连接。——维基百科

Alto 的继承者 Xerox Star 在1981年首次使用了窗口化设计,Xerox Star 虽然在商业上没有取得成功,但当时研发团队在计算机交互界面和方式的创新,为日后的普及做出了卓越的贡献,比如:鼠标、矩形窗口、滚动条、按钮、桌面、面向对象编程、多任务处理等。

在人机交互界面设计里,我们经常会听到一个词,就是「所见即所得」的可视化交互体验,它最早被运用在 Alto计算机的设计理念之中,当时被称为WYSIWYG(What You See Is What You Get)。Alto 的系统 GUI,可以对文档进行创建、编辑和查看,还可以在不同工作站之间以电子化的形式存储、调用、传输文档,也可以通过网络将文档打印出来。

第一个拥有 GUI 操作系统的计算机 Xerox Alto 及继承者 Xerox Star,首次使用了窗口设计。

1979年12月,乔布斯在施乐 PARC 参观了 Alto,由此产生了深刻的印象并获得非常有价值的启发。

他们(PARC)给我看了三样东西,但我被第一件东西亮瞎了,以至于我甚至没有看到另外两个。他们向我展示的东西之一是面向对象编程。他们给我看了,但我没 get到。他们给我看的另一个实际上是一个联网的计算机系统。有超过一百个 Alto计算机在使用电子邮件等等,我也没 get到。那个亮瞎我的第一件东西就是图形用户界面(Graphical User Interface),我认为这是我这辈子见过的最好的东西。——Steve Jobs

1983 Apple Lisa

1983年苹果计算机公司推出 Apple Lisa 个人计算机,是全球第一款搭载图形用户界面(GUI)的个人计算机。

1984 Macintosh

1986 X Windows System

1986年首款用于 Unix 的窗口系统X Window System 发布。

1988 OS/2

OS/2是由微软和 IBM 公司共同创造,后来由 IBM 单独开发的一套操作系统。OS/2是「Operating System/2」的缩写,是因为该系统作为 IBM 第二代个人计算机PS/2系统产品线的理想操作系统引入的。

1990 Microsoft Windows 3.0

微软在1990年发行 Windows 3.0非常成功。除了改进应用程序的能力之外,利用虚拟内存,Windows 容许 MS-DOS 软件有更好的多任务表现。加上个人电脑的图像处理能力改良(使用VGA图像卡),和使用保护模式记忆模式,应用程序能比较容易运用更多的存储器。从此,PC 和 Macintosh 开始一较高下。

1995-2018 Windows VS Mac

二、桌面应用UI设计的基本要素

回顾完 GUI 发展历史中的重要时刻,我们回到本文的主题:不论是当年的底层系统还是桌面应用,它们 GUI 的基本要素相比今天并没有大的变化,表现在:窗口、菜单、工具栏、图标。

窗口

应用程序为使用数据而在图形用户界面中设置的基本单元。应用程序和数据在窗口内实现一体化。在窗口中,用户可以在窗口中操作应用程序,进行数据的管理、生成和编辑。通常在窗口四周设有菜单、图标,数据放在中央。

在窗口中,根据各种数据/应用程序的内容设有标题栏,一般放在窗口的最上方,并在其中设有最大化、最小化(隐藏窗口,并非消除数据)、最前面、缩进(仅显示标题栏)等动作按钮,可以简单地对窗口进行操作。——维基百科

窗口是桌面应用的上层(操作系统是它的底层),也是桌面应用UI 的核心元素。窗口可以被移动、放大、缩小的,用于放置内容和功能的容器。

从 GUI 的发展历程可以看出,底层系统和桌面应用一直在以窗口这个对象和数据的载体,向用户传达信息。

菜单

菜单,又称选单或功能表,在计算机应用中是指图形使用者界面(GUI)中的可以让用户在数个有关联选项中选择自己需要功能的组件,它是人机界面中的元素之一。——维基百科

菜单通常由可供选择的一组文字和符号组成,是一系列命令的列表。用户用鼠标单击其中一个选项后,就指定计算机执行一个特定动作或功能。

菜单一般用来提供指向各种操作和功能的快捷途径,比如打开和储存文档、退出程序、操作数据等。应用可以将它当作是一系列常用命令的快捷键,而不需要用户详细了解这些命令的使用语法。

大多数应用提供了下拉样式和弹出样式的菜单,位置通常出现在应用的顶部。

工具栏

与菜单一样,工具栏也是一种有关联动作的集合,用户可以通过工具栏提供的功能,对于数据、文档进行功能性操作。工具栏更多从属于应用软件,用户可以通过菜单调出或取消它们。

工具栏如果处于活动状态,就会以一组可视图标的形式呈现,可视图标通常还会配以小的文本标签。

桌面应用的工具栏发展到今天,位置通常出现在应用主窗口的顶部。很多应用允许用户根据个人需要自定义工具栏,对工具栏中的按钮等对象进行添加、删除、调整位置。

图标

在桌面中,图标常常用于表示计算机系统中的程序、功能、数据或数据集。应用程序的启动图标依靠别具一格和显著的风格,一直被作为产品品牌的一个重要部分。

不论是1984年的 Macintosh 还是如今的 macOS 和 Windows,用户最熟悉的打开桌面应用的方式都是通

您可能想查找下面的文章:

  • 用一篇文章,带你回顾桌面GUI 的设计发展史
  • 2018年了,梳理一下语音交互界面的核心知识点
  • GUI和VUI 到底有哪些区别?来看这篇超全面的总结!

相关文章

  • 2018-08-23做好这个交互文档细节,让你和工程师的合作效率提高50%
  • 2017-08-06手机网页web app 图片为何不清晰非常之模糊的原因
  • 2017-08-06网站配色方案 为网站选择正确的颜色
  • 2018-08-23实战案例!众安保险PC官网的改版设计经验总结
  • 2018-08-23深邃神秘的网页!当深色系配色遭遇微妙的动效的时候
  • 2017-08-06网页设计中flash覆盖弹出层设置z-index属性也不行
  • 2017-08-06haslaylout 和 bfc解析的理解
  • 2018-08-23收福利!5个不为人知但干货超多的设计公众号
  • 2017-08-06引入CSS的方式有哪些?link和@import的有何区别应如何选择
  • 2017-08-06自适应网页设计的方法(手机端良好的访问体验)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • App设计中,如何更专业地管理设计命名系统?
    • 对于「以人为中心」的设计,你的理解可能太浅显了
    • 科班高手的方法!16个简单实用的排版小Tips
    • 用户体验设计从业者有没有所谓的 35 岁中年危机?
    • 谈产品的差异化思路:进可攻退可守
    • CSS的部分常用属性整理
    • UI实战教程!做设计稿前应该做哪些准备工作?
    • Iconfinder 开发了一个超强大的图标在线编辑器!
    • 系列三部曲!中国式草根设计师的自我提升(完结篇)
    • 用好黄金比例,用协调自然的配比照亮你设计的UI

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有