苹果Newton(牛顿)在27年前教给我们的UX相关知识

释放双眼,带上耳机,听听看~!

苹果失败的产品之一,但仍然影响至今。

我一直很喜欢苹果牛顿的UI,当时没有哪款产品像它一样,在每一个设计上都深思熟虑。苹果将独特的手写识别能力提高了一倍。史蒂夫·乔布斯(Steve Jobs)讨厌使用手写笔,由于多种原因,他在1998年回到苹果公司时就停止了该项目。

我因为它是手写笔而停止开发牛顿。如果你握住手写笔,就不能使用手指进行书写。

——史蒂夫·乔布斯电影,2015年

尽管有多种原因停止牛顿项目,但它某些独特的UX规范在今天仍然存在。苹果公司为黑白屏幕构建完美的像素UI已有悠久的历史,因此毫不诧异他们能够实现简单的设计美感,而这种美感在所有UI中都是一致的。牛顿的操作系统具有原始苹果机的个性,并最大限度地利用了硬件限制。

当我开始与Christina Antoinette Neofotistou合作设计Pixel Vision 8( https://www.pixelvision8.com/)时,我从牛顿UI中汲取了很多灵感。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

Pixel Vision 8是一个虚拟游戏机,它有一个独立的游戏开发环境,让人联想起80年代的早期游戏机和计算机。Pico-8( https://www.lexaloffle.com/pico-8.php)与Commodore 64相似,因为它在启动时会显示一个命令行。作为一个用苹果机长大的孩子,我希望Pixel Vision 8是早期Mac OS和Newton的混合体。

我会分享一些参考资料,这些资料启发了我从头开始为Pixel Vision 8构建操作系统。其中许多图像直接来自《牛顿2.0程序员参考指南》( https://archive.org/details/pdfy-D0J6o47QAqZV5sto/mode/2up)。它的详细信息令人不敢相信,长达1,390页。

让我们看一下所有UI组件,这些组件不仅允许用户与牛顿应用程序进行交互,而且还帮助赋予设备独特的外观和价格。

应用程序视图

原始视图是牛顿基础应用程序的基础。牛顿使用了一系列屏幕来显示应用程序的UI,就像我们今天在手机和平板电脑上看到的一样。默认视图在顶部具有标题,在底部具有导航栏。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

在此示例中,左侧有一个弹出时钟按钮,右侧有一个关闭按钮。由于牛顿在屏幕底部有一个专用的导航区域,因此大多数导航UI都位于应用程序视图的底部。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

标题 

你可以将标题添加到应用程序中,这通常包括左侧的图标,一些文本和横穿屏幕其余部分的水平线。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

这有助于显示标题,自定义标题,甚至可以用于上下文操作的其他图标按钮。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

牛顿UI具有前瞻性思维,当时没有关于应用程序外观的规则,因此大多数开发人员都实现了自定义外观布局,这意味着我们现在理所当然的事情(例如时间,日期和通知的一致位置)不存在。

文件夹标签

应用程序还可以使用视图顶部的文件夹选项卡。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

尽管现在有了网络浏览器,这种情况现在很普遍了,但是在90年代初期,这是一个新概念。牛顿实际上将其实现为下拉菜单,而不是我们今天对选项卡的了解。为了利用空间,开发人员还可以自定义时钟的位置,它不像我们今天固定在屏幕顶部的UI元素。

除了文件夹选项卡,开发人员还可以访问子选项卡,以在应用程序中的数据视图之间跳转。这是牛顿上典型的AZ标签导航示例。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

由于牛顿在分辨率为320 x 240像素的屏幕上显示像素受到限制,因此设计人员必须尽其所能。在这里,可以看到标签页一次自动增加两个字母,因为一次不能显示26个单独的标签页。实际上,有些字母碰到了标签的边框,因为根本没有足够的空间来填充空白。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

菜单栏

正如我们之前在默认的应用程序查看窗口中看到的那样,屏幕的底部保留用于应用程序菜单栏。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

左侧始终有一个信息按钮,用于为用户显示帮助的弹出窗口。接下来通常是字体和键盘输入选项。然后由开发人员决定他们要显示什么。由于没有像台式计算机那样的下拉菜单,因此大多数操作是此菜单栏中的按钮。

如果没有足够的空间来显示静态菜单栏中的所有操作,开发人员会使用带有其他选项的浮动栏。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

最后,所有应用程序都需要一种关闭方式,因此退出按钮始终是菜单栏最左侧的最后一个选项。根据在菜单栏中使用的按钮类型和可用空间的多少,必须考虑很多因素以最大程度地减少应用程序的操作。

按钮

按钮是任何用户界面的组成部分,因此,牛顿支持从简单文本到无边框图标的多种类型的按钮就不足为奇了。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

苹果Newton(牛顿)在27年前教给我们的UX相关知识

苹果Newton(牛顿)在27年前教给我们的UX相关知识

在牛顿上罕见的一件事是结合了图标和文本的复合按钮。这可能是由于屏幕上的空间有限,尤其是涉及菜单中的操作按钮时。

输入栏

我可以在牛顿的文本输入组件上写整篇文章,最基本的只是一个简单的输入字段,左侧不带标签,虚线表示可以对其进行编辑。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

由于牛顿具有独特的手写识别功能,因此在访问文本输入字段时可以使用一些其他选项,从而可以在脚本或虚拟键盘之间进行切换。

单选按钮

牛顿有单选按钮,这些单选按钮是极简主义的,对于未选择的选项使用虚线轮廓,对于当前的选择使用实心圆圈。今天,虚线圆会显示为“禁用”或“无法选择”,我想知道为什么它们没有采用标准的圆轮廓?也许与所有其他考虑一样,很难在拥挤的屏幕上脱颖而出。 

苹果Newton(牛顿)在27年前教给我们的UX相关知识

复选框遵循类似的设计,其中虚线框勾勒出未选中的选项,顶部带有一个小的选中标记。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

选择器

选择器通常是按钮和某种滚动列表的组合。牛顿也支持选择器,这些选择器始终由按钮触发,并且可能包含图标,文本,复选框甚至水平分隔线。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

根据屏幕上的位置,选择器将出现在按钮的下方,旁边或上方。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

Mac以在整个操作系统中使用图标而闻名,因此,Newton尽可能依靠清晰的图标。我喜欢将个人,公司和小组与文本结合使用为选择器添加更多个性的示例。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

最后,可以将其他UI元素与选择器结合使用,以创建更复杂的交互。在此示例中,有标题,文本列表,右侧的排序选项卡,下方的滚动器和关闭按钮。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

模态

模态和弹出视图是牛顿用户界面的重要组成部分。这些可能是简单的显示屏,告诉您当前的应用程序或显示某种帮助消息。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

模态还可以促进用户采取行动或修改设置。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

虽然模式可以包含大多数标准UI组件,但是典型的应用程序一次只能显示一个。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

最后,边框,标题和关闭选项在整个OS中是一致的。

滚动条

期望开发人员能够一次在单个屏幕上显示用户需要的所有内容,因此牛顿有一个滚动器,可以将其绑定到用于上下翻页的列表。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

滚动条通常位于它们控制的UI组件的右侧。与台式机操作系统不同,这些滚动条不会扩展到视口较高的位置。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

虽然这在小列表中可能是有效的,但使用这些滚动条来占据整个屏幕的列表并不理想。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

牛顿上没有“平滑滚动”。当您向上或向下滚动时,列表会缓慢地逐行刷新,这在大多数应用程序中都是一项繁琐的工作。

滑块和进度条

在视觉上,滑块和进度条是相同的。唯一的不同是滑块上的手柄。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

滑块的缺点之一是,牛顿的大多数UI都是交互式元素的大小。如果使用滑杆的手柄,即使是设计师也很难点击。需要拖动的组件使用起来有些令人沮丧,尤其是在牛顿的重绘速度很慢的情况下。 

苹果Newton(牛顿)在27年前教给我们的UX相关知识

分隔线,标题和状态栏

苹果Newton(牛顿)在27年前教给我们的UX相关知识

牛顿用户界面使用大量粗水平线来分隔屏幕上的元素。该分隔符的独特之处在于它允许文本插入文本中间,这与我们在Web设计中使用的传统水平规则不同。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

与分隔符围绕文本分开的方式不同,状态栏的图标位于该行的顶部。这是一个奇怪的设计选择,当其中包含许多选项或图标按钮时,这些状态栏会显得有些混乱。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

字型

牛顿有许多令人印象深刻的内置字体。用户甚至还可以调整字体大小。牛顿总共拥有大约12种左右的字体,这些字体在当时的Mac OS上很常见。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

此外,开发人员还可以使用您今天期望的类似字体显示选项。

苹果Newton(牛顿)在27年前教给我们的UX相关知识

据我所知,这些字体无法更改,并且无法增加系统字体大小。总体而言,牛顿上的UI字体很小,无法在单个屏幕上显示尽可能多的信息。

其他

上面我没有详细介绍很多其他的UI组件,但我想快速讲出来。

可扩展和可折叠滚动列表有不同类型:

苹果Newton(牛顿)在27年前教给我们的UX相关知识

在手风琴列表的外部,有可滚动的图像在视图内部被屏蔽:

苹果Newton(牛顿)在27年前教给我们的UX相关知识

为了获得表格数据并帮助在视图中布置内容,开发人员可以访问表:

苹果Newton(牛顿)在27年前教给我们的UX相关知识

最后,有几种方法可以通过简单的日历可视化日期和时间:

苹果Newton(牛顿)在27年前教给我们的UX相关知识

以及模拟和数字时钟:

苹果Newton(牛顿)在27年前教给我们的UX相关知识

苹果Newton(牛顿)在27年前教给我们的UX相关知识

你可以在他们的UI中看到向拟物设计的早期转变。数字时钟示例让人想起旧的闹钟收音机,该收音机使用附在轮子上的数字卡显示时间。您可以在数字中间的虚线中看到此参考。

我知道这是一个详尽的清单,但是如果要从头开始设计UI,则将需要涵盖几乎所有这些组件,甚至可能更多。即使27年后,我们仍然使用相同的标准原始组件:

按钮、输入栏、清单、滚动条、滑杆、弹出窗口……

这是我从头开始构建完整操作系统所需的一切工作的巨大灵感。最终,Pixel Vision OS偏离了牛顿的设计而独立存在。即使在今天,我们也要归功于牛顿早期的UI创新,这要归功于我们目前在手机和平板电脑上看到的东西,也许牛顿并不像历史记录的那样失败?

人已赞赏
交互设计

如何让表单设计更加高效简单?

2020-7-22 22:14:29

交互设计

运营插画Banner分层法

2020-7-26 13:12:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索