Busy Being Born 忙着出生

作者: 安迪·赫茨菲尔德 日期: 未注明日期 人物: 比尔·阿特金森、巴德·特里布尔、史蒂夫·乔布斯 主题: 起源、用户界面、早期程序、Lisa、QuickDraw、软件设计 概要: 关于苹果第一代Macintosh的开发以及制造它的人的轶事: Lisa/Macintosh 用户界面开发的可视化历史 , 忙着出生 Busy Being Born

The way the Macintosh computer looks on the screen wasn’t created all at once. Apple worked on it for almost five years, starting from some early computer code written in 1978. It’s like when animals evolve over time - sometimes things don’t work out and need to be changed. Unfortunately, we often forget about these failed ideas, but we could learn from them.

Macintosh 计算机在屏幕上的显示方式并不是一次性创建的。从 1978 年编写的一些早期计算机代码开始,苹果公司为此投入了近五年的时间。
这就像动物随着时间的推移而进化一样——有时事情并不顺利,需要改变。不幸的是,我们经常忘记这些失败的想法,但我们可以从中学习。

Fortunately, the person in charge of making the user interface, Bill Atkinson, loved taking pictures and knew that documenting the process would be important. He had a special camera that took instant pictures and would take a photo every time the user interface made a big step forward. He kept these pictures in a notebook. I’m happy to share these pictures and explain what they show, because they give us a unique look at how the user interface for the Mac was created.

幸运的是,负责制作用户界面的人 Bill Atkinson 喜欢拍照,并且知道记录整个过程非常重要。
他有一个特殊的相机,可以即时拍照,并且每次用户界面向前迈出一大步时都会拍照。他把这些照片保存在笔记本里。
我很高兴分享这些图片并解释它们所显示的内容,因为它们让我们以独特的方式了解 Mac 用户界面的创建方式。

The pictures are made small so they fit on a computer screen. If you click on them, they will get bigger and show more details.

这些图片被制作得很小,以便它们适合在电脑屏幕上显示。如果您单击它们,它们会变大并显示更多详细信息。

The first picture in Bill’s notebook is from his project before he started working on the Lisa and Apple II Pascal. The work he did on the graphics for Apple II Pascal in the fall of 1978 helped him get started on the Lisa project.

Bill 笔记本中的第一张图片来自他开始研究 Lisa 和 Apple II Pascal 之前的项目。 1978 年秋天,他为 Apple II Pascal 所做的图形工作帮助他开始了 Lisa 项目。

The pictures show what the computer screen would look like in the spring of 1979. The computer at the time was not the Lisa, but a prototype of the Apple II. The pictures were created on a special card that was connected to a computer. The middle picture shows the first characters that were ever displayed on a Lisa screen. You can see that the characters are not all the same width. The rightmost picture shows text that Bill designed himself. The text is about the Lisa display system and it looks more normal, with words and letters of different sizes.

这些图片展示了 1979 年春天电脑屏幕的样子。当时的电脑不是 Lisa,而是 Apple II 的原型机。这些图片是在连接到计算机的特殊卡上创建的。
中间的图片显示了 Lisa 屏幕上显示的第一个字符。您可以看到字符的宽度并不相同。最右边的图片是比尔自己设计的文字。文字是关于Lisa显示系统的,看起来比较正常,有不同大小的文字和字母。

The picture on the left shows the first drawings that Bill created in 1979 for a program called LisaGraf. This program was later renamed to QuickDraw. The leftmost picture shows lines and filled rectangles with simple patterns. The picture on the right shows these patterns in more detail. These patterns were used as a substitute for color because color was too expensive to use at the time.

左图显示了 Bill 在 1979 年为一个名为 LisaGraf 的程序创作的第一张图画。该程序后来更名为 QuickDraw。
最左边的图片显示了线条和带有简单图案的填充矩形。
右图更详细地显示了这些模式。这些图案被用作颜色的替代品,因为当时颜色太昂贵而无法使用。

The middle picture shows the first screen of the Lisa computer. It has buttons at the bottom that change when you do something. These buttons were inspired by the work done at a company called HP, where some of the people who designed the Lisa came from.

中图为Lisa电脑的第一个屏幕。它底部有一些按钮,当您执行某些操作时,这些按钮会发生变化。这些按钮的灵感来自于 HP 公司的工作,Lisa 的一些设计人员就来自该公司。

Here are a few more examples of the initial graphics routines. Bill made drawing lines incredibly fast by using an algorithm that could draw multiple pixels at the same time. The picture on the right shows how it’s also possible to fill in non-rectangular areas with patterns.

以下是初始图形例程的更多示例。比尔使用一种可以同时绘制多个像素的算法,使绘制线条的速度变得异常快。右图显示了如何用图案填充非矩形区域。

Here are some pictures that were scanned from photographs. Bill scanned them using a special machine that was modified to improve the quality. He was always trying to make the pictures look better by changing how the machine turns different shades of gray into black and white dots. Bill made similar things for the Apple II, but these new pictures are even more detailed and clear.

以下是一些从照片扫描而来的图片。比尔使用一台经过改造以提高质量的特殊机器对它们进行扫描。他总是试图通过改变机器将不同深浅的灰色变成黑白点的方式来使照片看起来更好。 Bill 为 Apple II 制作了类似的东西,但这些新图片更加详细和清晰。

The pictures on the left and middle show an early drawing program that was a start to something like MacPaint. This program used a mouse to draw and allowed people to choose from different patterns and brush styles. I think these pictures might be a little out of order and were made in the early 1980s. The picture on the right shows the final version of the user interface, which is about to change a lot soon.

左边和中间的图片显示了一个早期的绘图程序,它是 MacPaint 等软件的开始。该程序使用鼠标进行绘画,并允许人们选择不同的图案和画笔样式。我认为这些照片可能有点乱,而且是 20 世纪 80 年代初制作的。
右图显示了用户界面的最终版本,很快就会发生很大的变化。

…into a user interface for computers running Microsoft Windows. This is a big change in the pictures, and I wish Bill had labeled when it happened. It’s easy to think that the change was because of a visit Bill made to Xerox in December 1979. However, Bill thinks the Windows design came before that, but he’s not positive.

...进入运行 Microsoft Windows 的计算机的用户界面。照片中的变化很大,我希望比尔在发生这种情况时贴上标签。人们很容易认为这一变化是因为比尔在 1979 年 12 月访问了施乐公司。然而,比尔认为 Windows 的设计是在此之前出现的,但他对此并不肯定。

The first picture has different fonts in overlapping windows, but we didn’t have a special program to control the windows, so we couldn’t move them around. The second picture shows the first menu that pops up when you click on something, and it looks very similar to the menu in a computer program called SmallTalk. The title bar at the top of the window is also very simple and black. The third picture shows that we didn’t give up on using special keys on the keyboard to control the computer.

第一张图片在重叠的窗口中具有不同的字体,但我们没有特殊的程序来控制窗口,所以我们无法移动它们。
第二张图显示了当你点击某个东西时弹出的第一个菜单,它看起来与名为 SmallTalk 的计算机程序中的菜单非常相似。窗口顶部的标题栏也非常简单,呈黑色。
第三张图显示我们并没有放弃使用键盘上的特殊按键来控制电脑。

It is now spring 1980 and things are happening quickly. The first picture shows the very first way we chose text, using a different way to make it stand out. It also shows a bar at the bottom of the screen and how we started doing things in a new way. Instead of doing something and then selecting text, we started selecting text first and then doing something with it.

现在是 1980 年春天,事情发生得很快。第一张图片显示了我们选择文本的第一种方式,使用不同的方式使其脱颖而出。
它还在屏幕底部显示了一个栏,以及我们如何开始以新的方式做事。
我们开始先选择文本,然后用它做一些事情,而不是先做一些事情然后选择文本。

The second picture shows the very first scroll bar. It was on the left side instead of the right side. At that time, there were no buttons for moving the scroll. The title bar looked like a folder tab, and this design was used for a while. Later, it was changed. The rightmost picture shows how we chose to highlight text.

第二张图显示了第一个滚动条。它在左侧而不是右侧。那时,还没有用于移动卷轴的按钮。
标题栏看起来像一个文件夹选项卡,这种设计已经使用了一段时间。
后来就改了。最右边的图片显示了我们如何选择突出显示文本。

By the summer of 1980, we had gotten rid of the soft-keys. The first picture shows that we were using a mouse to edit text. We had a special feature called the “wastebasket” (later changed to “clipboard”) that helped us copy and move text around. We also had a special bar for scrolling through pages, which moved up and down and left and right depending on the size of the document. Look closely and you’ll see two sets of arrows, which was a bit strange because one scroll bar controlled both vertical and horizontal scrolling.

到 1980 年夏天,我们已经摆脱了软键。第一张图显示我们正在使用鼠标编辑文本。我们有一个称为“废纸篓”(后来改为“剪贴板”)的特殊功能,可以帮助我们复制和移动文本。
我们还有一个用于滚动页面的特殊栏,它可以根据文档的大小上下左右移动。仔细观察,你会看到两组箭头,这有点奇怪,因为一个滚动条同时控制垂直和水平滚动。

The next picture shows that we changed the way the scroll box works. Instead of scrolling in proportion to how much you move the mouse, it now moves a fixed amount. We did this because we thought users might find the proportional scroll box too confusing. The picture also shows the first time we used the I-Beam text cursor. Before this, we were not sure if we should use a one-button mouse or not. But after a long discussion, we finally decided to use one.

下图显示我们改变了滚动框的工作方式。现在,它不再按照鼠标移动量按比例滚动,而是移动固定量。我们这样做是因为我们认为用户可能会觉得比例滚动框太混乱。
该图还显示了我们第一次使用 I-Beam 文本光标。在此之前,我们不确定是否应该使用一键鼠标。但经过长时间的讨论,我们最终决定使用一个。

The picture on the right shows Bill playing with curves. These curves can be changed by moving a few special points. The picture is special because it shows the first time a “knobbie” was used. A knobbie is a small, movable rectangle that helps you change a point. QuickDraw didn’t end up using curves, but the picture is still important because it shows the first knobbie.

右图显示比尔在玩曲线。这些曲线可以通过移动一些特殊点来改变。这张照片很特别,因为它展示了“旋钮”第一次被使用。旋钮是一个小的、可移动的矩形,可以帮助您更改点。
QuickDraw 最终没有使用曲线,但图片仍然很重要,因为它显示了第一个旋钮。

By the fall of 1980, we tried a few different ideas. One picture shows us testing windows with open and closed options. This idea was later dropped, but it came back in the 1990s and is now used in most systems. The third picture shows the first time we allowed windows to be resized by dragging a border around them. However, we’re not sure how we came up with the idea of resizing in the first place.

到 1980 年秋天,我们尝试了一些不同的想法。一张图片显示我们测试带有打开和关闭选项的窗口。这个想法后来被放弃,但它在 20 世纪 90 年代又回来了,现在在大多数系统中使用。
第三张图显示了我们第一次允许通过拖动窗口周围的边框来调整窗口大小。然而,我们不确定我们最初是如何想到调整大小的想法的。

The middle picture shows that you can move a window by dragging a gray outline. We wanted to make it possible to move the whole window, just like new computers do now. However, the computers were not fast enough back then. From what I know, the NeXTStep system was the first to do it in a modern way.

中间的图片显示您可以通过拖动灰色轮廓来移动窗口。我们希望能够移动整个窗口,就像现在的新计算机一样。
然而,当时的计算机速度还不够快。据我所知,NeXTStep 系统是第一个以现代方式实现这一点的系统。

The last picture shows when pull-down menus started being used. Instead of having the menu at the top of the screen, it’s now at the top of the window. This is still how Windows does things today. At this time, we also stopped using a single scroll bar that worked for both horizontal and vertical scrolling. It looks a lot like the way Mac computers were designed in 1984.

最后一张图片显示了何时开始使用下拉菜单。菜单不再位于屏幕顶部,而是位于窗口顶部。时至今日,Windows 仍然采用这种方式。
此时,我们也停止使用适用于水平和垂直滚动的单个滚动条。它看起来很像 1984 年 Mac 电脑的设计方式。

The pictures show how the Lisa desktop looked around 1980. It had a special part called a “tab” with a title, and a menu bar below it. We could also move windows around to turn them into tabs on the desktop. Additionally, we changed the name of the “clipboard” to “scrap”, which is an old term used in printing.

这些图片显示了 1980 年左右 Lisa 桌面的样子。它有一个特殊的部分,称为“选项卡”,带有标题,下面有一个菜单栏。我们还可以移动窗口,将它们变成桌面上的选项卡。此外,我们将“剪贴板”的名称更改为“scrap”,这是打印中使用的旧术语。

The first picture shows when double-clicking was first used to open and close windows on a computer. The second picture is very important because it changed the way the menu bar looked. Instead of being at the top of each window, it is now at the very top of the screen. The menu bar shows the options for the window that is currently open. At this point, the icon that makes windows bigger is moved to the bottom right corner, where it will stay. This is the first picture that looks like the actual Macintosh computer that was sold to people.

第一张图片显示了双击首次在计算机上打开和关闭窗口的情况。第二张图片非常重要,因为它改变了菜单栏的外观。
它现在位于屏幕的最顶部,而不是位于每个窗口的顶部。菜单栏显示当前打开的窗口的选项。此时,使窗口变大的图标被移动到右下角,并保留在那里。
这是第一张看起来像卖给人们的实际 Macintosh 电脑的图片。

By the beginning of 1981, things were starting to get clear. The left picture shows a window with buttons that are similar to the ones you would later see. The middle picture shows how files and folders could be split into sections, which was used in Lisa’s spreadsheet program. The right picture shows the first time a dialogue box was used, which took up the whole screen below the menu bar.

到 1981 年初,事情开始变得清晰起来。左图显示了一个带有按钮的窗口,这些按钮与您稍后会看到的按钮类似。
中间的图片显示了如何将文件和文件夹分成多个部分,这在丽莎的电子表格程序中使用。右图是第一次使用对话框,它占据了菜单栏下方的整个屏幕。

Bill focused again on making the graphics better on his computer window. He kept working on a program called Sketch, which later became MacPaint. A picture of a snowman helps us know it’s winter 1981. He made it possible to write text in different ways, such as bold (like the picture on the right), italic, or with an outline or shadow.

比尔再次专注于让计算机窗口上的图形变得更好。他继续开发一个名为 Sketch 的程序,该程序后来成为 MacPaint。一张雪人的照片让我们知道现在是 1981 年的冬天。
他使以不同方式书写文本成为可能,例如粗体(如右图)、斜体、或带有轮廓或阴影。

Bud Tribble was living at Bill’s house. He slept during the day and worked at night. Bill drew a special picture to help Bud understand a complex idea. The picture has different shapes for different things. There is a picture of a fast-moving oval, which was added to a computer program called LisaGraf in the spring of 1981. This oval shape was special because it was made with a clever math trick that didn’t use multiplication. After that, there were other shapes called “roundrects”, which are like rectangles with curved corners. These shapes were suggested by a man named Steve Jobs.

巴德·特里布尔住在比尔家里。他白天睡觉,晚上工作。比尔画了一张特殊的图画来帮助巴德理解一个复杂的想法。对于不同的事物,图片有不同的形状。
有一张快速移动的椭圆形图片,它于 1981 年春天被添加到名为 LisaGraf 的计算机程序中。这个椭圆形很特别,因为它是用不使用乘法的巧妙数学技巧制成的。
之后,出现了其他称为“圆矩形”的形状,它们就像带有弯角的矩形。这些形状是由史蒂夫·乔布斯提出的。

By May 1981, the design of the Lisa computer’s user interface started to become clear. The first picture shows papers with different information on top of each other, with tabs at the top to label what’s in each one. The second picture shows how round shapes (called roundrects) started to appear in different parts of the interface, like menus. This made it look more professional and advanced, especially when combined with a shadow effect. The third picture shows that menus could also be pictures instead of just words.

到 1981 年 5 月,Lisa 计算机的用户界面的设计开始变得清晰。第一张图片显示了彼此叠放的包含不同信息的纸张,顶部有标签来标记每张纸张中的内容。
第二张图显示了圆形(称为圆形矩形)如何开始出现在界面的不同部分(例如菜单)中。这使它看起来更加专业和先进,尤其是与阴影效果结合使用时。
第三张图显示菜单也可以是图片而不仅仅是文字。

The people who worked on the Lisa team were worried that open windows on the computer screen would get covered up by other windows. So, one of them named Bill added a special menu on the left side of the screen called “the tray”. This tray helps to show and hide open windows so users can easily keep track of them. The pictures show a test version of the Lisa Graphics Editor that Bill created. This program is now called MacDraw. It was the first to use a special panel with colored squares to switch between different modes. This idea eventually became the main way users interacted with MacPaint.

Lisa 团队的工作人员担心计算机屏幕上打开的窗口会被其他窗口覆盖。因此,其中一位名叫比尔的人在屏幕左侧添加了一个特殊的菜单,称为“托盘”。该托盘有助于显示和隐藏打开的窗口,以便用户可以轻松跟踪它们。
这些图片显示了比尔创建的丽莎图形编辑器的测试版本。该程序现在称为 MacDraw。它是第一个使用带有彩色方块的特殊面板来在不同模式之间切换的产品。这个想法最终成为用户与 MacPaint 交互的主要方式。

The last big change in the way people used the Lisa computer was making the file manager use icons instead of menus. This was back in March 1982. The first picture shows a early version of what the file manager might look like. It had a two-level system, where you could select icons in the top part to see what’s inside them in the bottom part. In the middle picture, Bill came up with a design that was very similar to the final version, including a trash can icon in the bottom right corner. Notice that in these pictures, the folder tabs at the top of the window are not there anymore. Instead, there’s a rectangular bar with the folder’s name, which turns upside down when you highlight it.

人们使用 Lisa 计算机方式的最后一个重大变化是使文件管理器使用图标而不是菜单。那是 1982 年 3 月的事了。
第一张图片显示了文件管理器的早期版本。它有一个两级系统,您可以选择顶部的图标来查看底部的图标。
在中间的图片中,比尔提出了一个与最终版本非常相似的设计,包括右下角的垃圾桶图标。
请注意,在这些图片中,窗口顶部的文件夹选项卡不再存在。相反,有一个带有文件夹名称的矩形栏,当您突出显示它时,它会上下颠倒。

Finally, Bill changed the name “LisaGraf” to “QuickDraw” in the spring of 1982. This was because he wanted a name that was suitable for the Macintosh computer, too. He added two important features to QuickDraw to help with the growing needs of programs that would run on the Lisa computer: pictures and the ability to change their size. Pictures were a way to record drawings and then play them back later. This idea was used in both the printing and copying and pasting of pictures. Because pictures could be drawn into any size box, Bill also added features that allowed them to be made bigger or smaller.

最后,Bill 在 1982 年春天将名称“LisaGraf”更改为“QuickDraw”。这是因为他也想要一个适合 Macintosh 计算机的名称。他向 QuickDraw 添加了两个重要功能,以帮助满足在 Lisa 计算机上运行的程序不断增长的需求:图片和更改其大小的能力。
图片是一种记录绘图并稍后回放的方式。这个想法被用于图片的打印和复制粘贴。由于图片可以绘制到任何大小的框中,因此比尔还添加了允许图片变大或变小的功能。

Many people think they only see the user interface as it is now, but what they don’t know is that it was always changing as we learned and grew. The best developers don’t stop improving, even when things seem good enough. They keep creating new and better ways to solve problems. Even small changes can make a big difference. Just like how our bodies keep growing and changing, technology and user interfaces should also keep evolving. As the famous singer Bob Dylan said, “He not busy being born, is busy dying.” This means that if we stop trying to learn and improve, we become outdated and useless.

许多人认为他们只看到了现在的用户界面,但他们不知道的是,随着我们的学习和成长,它一直在变化。最好的开发人员不会停止改进,即使事情看起来足够好。他们不断创造新的、更好的方法来解决问题。
即使很小的改变也会产生很大的变化。就像我们的身体不断生长和变化一样,技术和用户界面也应该不断发展。
正如著名歌手鲍勃·迪伦所说,“他不是忙着出生,而是忙着死”。这意味着,如果我们停止尝试学习和改进,我们就会变得过时且无用。
目录