如何使绝对的任何应用程序看起来像一个macOS应用程序

131 阅读5分钟

是什么让一个原生macOS应用......看起来像一个原生macOS应用?在这篇文章中,我们将分析这个问题,并看看一些实用的方法,你可以在你自己的应用程序中采用macOS应用程序的设计惯例。你将能够做出设计决定,使你的应用程序适合,从而提供更多的无缝体验以及其他潜在的好处--请继续阅读!

尽管本文主要涉及 "原生macOS外观",但重要的是,一开始就注意到下面的许多功能和概念也适用于Windows应用程序。此外,还值得一提的是,近年来,网站和桌面应用程序之间的界限变得越来越模糊,这意味着许多这些惯例适用于Web应用程序

那么,现在我们对我们的目标有了共同的理解,问题是--为什么人们可能希望他们的应用程序看起来像一个原生的应用程序?嗯,除了有类似的设计惯例可以为我们的用户提供更 "无缝 "的体验这一明显的事实之外,我认为一个看起来有 "原生 "设计的应用程序所带来的外观一致性也带来了一种更 "可信 "的感觉。设计似乎考虑得更全面,总的来说,应用程序在某种程度上也感觉在性能上更稳定。

在考虑你的应用程序所提供的用户体验时,这些好处应该是一个重要的考虑因素,而且,在我看来,这也是将原生设计惯例纳入你的工作中的一些相当有说服力的理由。所以,让我们跳进去,开始看一些具体的细节吧!

What makes a native desktop app a native desktop app?

使用默认的光标,而不是指针

虽然指针式光标(手指版本👆)在网络上的许多情况下无处不在,但原生桌面应用程序将其用于一个特定的目的:在浏览器中打开页面的链接。通常情况下,这些链接被设计成真正的文本链接。

We see how the cursor changes to a finger when over links that open the browser in macOS apps

但即使这个简单的规则也经常被打破。

例如,在 "关于本机"的 "资源"小节中,一些链接打开了一个网页,但它们仍然使用默认光标,以保持与其他列表项目的一致性。

The cursor to finger rule is broken often, as we see on the Mac's resources page

所以,这取决于你如何严格遵守 "链接规则"。

使文本默认为不可选择的

用户只能选择开发者明确规定为可选择的标签中的文本。但是,我们如何决定什么是真正应该可以选择的呢?嗯,这是另一个灰色地带,需要对你的用户工作流程有深入的了解。

简单地说,所有用户可能想要选择的东西都应该是可选择的。这里有一个例子:在 "关于这台Mac"窗口中,你可以清楚地选择操作系统版本、型号名称、SN和其他 "内容",但你不能选择技术标签本身。

As we see on the About this Mac menu, the text of the main heading is not selectable, while the details are

不要让风格化的按钮、下拉菜单或复选框在悬停时做出反应

这是一个快速提示。就它们对悬停的反应而言,有两种类型的按钮在本地应用程序中使用。简而言之,风格化的按钮、下拉菜单(关于下拉菜单项的内容稍后会有)和复选框对鼠标悬停没有反应,而幽灵按钮(纯文本或图标)有反应

We see how different artifacts handle hover effects within MacOS. styled buttons, dropdowns, and checkboxes do not react, but ghost buttons do

不要给菜单和表格提供悬停效果

菜单和表格项目没有悬停效果。

In Apple music, we see the no hover effect in action

即使一个菜单项或表格行在悬停时有一个次要的动作按钮显示,这也是真的--项目背景没有反应。这个技术,再加上前面的技术,使界面看起来很安静,不那么啰嗦。

We see how actions can happen on hover, like a submenu appearing inside Apple music

然而,我们要注意,下拉菜单项在悬停时是有反应的。这样做是为了键盘导航的目的--使用键盘的用户应该看到他们将要选择的是哪个选项。

We see the background color of a dropdown menu item change as it is being hovered on

此外,应用程序菜单和列表会突出显示所选项目。这为用户提供了视觉锚点,以便在界面中更快地定位和导航。

确保按下的状态是微妙的或明显的

就像下面的3D地图的例子,如果一个按钮打开或切换一个明显的模式,按钮的背景会被巧妙地突出显示

Inside Apple maps, it is clear the the 3D effect is toggled on because it is subtly highlighted in the user interface

另一方面,如果不明显的模式可能被切换或打开,那么按钮的前景就应用活动的颜色

In the notes app, the filter is clearly toggled on because the color change indicating this is dramatic

把人民币的上下文菜单放在任何地方

在网络上,对人民币(鼠标右键)点击的自定义处理是非常罕见的,而且,我甚至可以说是意想不到的。但在桌面世界中,有人民币处理是完全自然的。菜单和列表都有这个功能,可以快速删除或编辑一个项目。

但是,有一个问题。一旦你覆盖了标准的人民币点击处理(在浏览器或Electron中),你就必须重新实现所有的标准操作,如复制、剪切、粘贴等等。

总结一下

让我们来回顾一下。要使一个界面(包括基于网络的)看起来像一个原生的macOS应用,要考虑。

  1. 丢掉指针游标
  2. 禁止非内容的文本选择
  3. 减少悬停效果
  4. 不要过度使用重点色
  5. 添加人民币上下文菜单