苹果在Human Interface Guidelines页面为每种平台提供了UI设计的指导。从中我们可以一窥苹果所认为的APP应该是什么样子的。

本文从Human Interface Guidelines的mac篇入手，谈谈macos上UI相关的窗口，视图和控件。

窗口

首先在macOS上，一个窗口（Window）是一个APP的UI的最外层元素。不同的APP有各自的窗口，一个APP也可以有多个窗口。这些窗口都归macOS系统的窗口管理器管理。一个窗口可以看作是窗口管理分配给某个APP的一块屏幕区域。然后APP可以根据自己的需要，在这个窗口区域画出各种视图（View），来实现某种功能。

窗口，根据使用的场景不同，有以下几大类型：

  • Document Window，文档窗口主要是用来展示和编辑某个文档的内容，比如在Preview里面打开一个PDF文档、一个Pages中编辑的文档、一个编辑中的TextEdit文档
  • App Window，和文档窗口有所区别，APP窗口通常不同来显示单个文档的数据。APP的主窗口如果不是一个文档窗口，那么就是一个APP窗口。APP窗口通常展示一系列资源集合，比如Finder APP中显示的文件目录树；或者展示的是一堆APP功能的集合，比如Calendar APP中显示的日历相关的操作。
  • Panel，姑且把Panel翻译成控制板吧。控制板是次一级的窗口，从视觉上可以判断出来，控制板被描绘的比普通窗口要略简化一点。控制板主要是用来显示主窗口中不方便展示的信息，或者可以在多个窗口间共享的功能。在Finder中查看某个文件信息时弹出的窗口就是一个展示信息的控制板。另一个一个典型的例子是字体控制板，可以用来设置不同的窗口内部的文字的格式。
    • 通常在macOS的窗口系统，只有一个窗口是主窗口，也就是正和用户交互的窗口，主窗口能够捕获用户输入。而其他窗口都是不活动窗口。不活动窗口通常在绘制上跟主窗口有些不同，工具栏上的按键是灰色的。但是对于控制板，可以将其设置为一种特殊的窗口状态，叫做输入窗口状态。在此状态下，控制板可以获取用户输入，但是却不会把主窗口变为不活动窗口。同时，此状态下的控制板可以浮动在主窗口之上。字体控制板就是这么一个例子。
  • Dialog，对话框是一种特殊的窗口，通常是为了响应用户操作而弹出的。比如打开文件对话框、保存文件对话框等等。
  • Alert，提示框和对话框类似，也是为了响应用户操作而弹出的。但是提示框比对话框紧急，需用用户立马响应，而且提示框的内容比较简单，通常带有一段消息，然后让你在yes/no等几个有限选项中作出选择。比如关闭一个正在编辑的文档的时候，就会提出一个提示框，问你需不需要保存文件。
    • 对话框和提示框都可以显示成模态（Modal），使得用户在完成对话框或者提示框操作前无法继续操作APP的其他窗口。模态窗口还可以和APP窗口强关联，以一个Sheet的方式直接叠加在APP的某个窗口上。Sheet是一个特殊的窗口显示方式，它在其他窗口上绘制，直接占据工具栏下面的一块空间。

macOS对窗口的构成也有一些定义。首先窗口由边框和主体构成。边框上可以放置一些和窗口相关的部件，比如上边框可以有标题栏、工具栏、分页栏、搜索限定栏等等；下边框可以有状态栏。而窗口的主体部分主要用来放置和内容相关的视图。

视图

视图把所在的屏幕区域进行自定义，用于实现某种特定的功能或者行为。

用于布局的视图：

  • Box，最简单的布局视图，用屏幕上的一个矩形区域来放置控件
  • Tab View，以Tab方式在同一块区域显示不同的内容，tab栏可以上下左右放
  • Split View，把一个区域按照一定比例分为上下区域或者左右区域，分割线是可以自定义

用于内容的视图：

  • Column View，以多栏方式来显示内容，适合层级结构的内容，比如多层目录下的文件。
  • Outline View，可以在一栏内以层级方式展示内容，比如Finder里面点击一个目录前面的小箭头，就会在下面列出文件夹的内容。
  • Scroll View，在有限的区域通过滚动的方式展现大于该区域的内容。可以连续滚动、按行滚动、按页滚动。
  • Sidebar/Source List，侧边栏，典型例子就是Finder的侧边栏
  • Table View，以表格的方式显示内容，跟Outline View其实有点像，只不过不能按层级方式显示
  • Web View，用于显示web内容
  • Image View，用于显示图片，或者一些列的图片
  • Popovers，弹出一个小窗口，可以自由得在上面显示信息或者控件

菜单

顺带提一下macOS支持的菜单类型。一个APP可以有主菜单，显示在顶部菜单栏，窗口没了它还在；可以有Dock菜单，显示在底部的Dock上；可以有上下文菜单，一般鼠标右击的时候弹出。

另外，屏幕右上角部分区域的图标不属于菜单栏，而是属于APP扩展Menu Bar Extra

控件

接下来就要讲控件了。控件可以看成视图中用于跟用户交互的最小独立单元。控件分成几大类：

  • 按键（Button），用来响应用户的行为
  • 选择器（Selector），用来帮助用户处理选项
  • 输入框（Field），用于给用户输入文字
  • 标识栏（Label），用于显示文字的栏，主要用于标识其他控件
  • 指示器（Indicator），主要用于显示进度或者程度

按键

  • Checkbox、Radio button：提供选项给用户选择
  • Pull-down button、Pop-up button、Action button：弹出一个菜单供用户操作
  • Disclosure button、Disclosure triangle：点击后出现界面中被隐藏的部分。
  • Gradient button：一个➕号一个➖号，用户增加项目或者删除项目
  • Help button：显示帮助信息
  • Image button：图片形式的按键
  • Push button：默认按键
  • Scope button：主要在搜索限定框中使用

选择器

  • Color Well（颜色井）：用于选择颜色，常出现在调色板中
  • Image Well（照片井）：用于选择照片
  • Date picker：寻找日期
  • Path control：显示文件路径，在Finder的底部可以看见
  • Segmented control：简单的说，就是把多个按键捆在一起形成一个按键栏
  • Slider：滑动条，用于在一定范围内选择
  • Stepper：步进条，可以按上下键调整数值

指示器

  • Progress bar：进度条
  • Progress circle：环形进度条
  • Progress spinner：忙碌标识
  • Rating indicator：星级评价条
  • Capacity indicator (continuous)：连续型容量指示
  • Capacity indicator (discrete)：离散型容量指示

输入框和标识栏

  • Combo box：有点像Pull-down button，用以提供多个选项
  • Search field：搜索输入框
  • Text field：文字输入框
  • Token field：记号输入框，可以用于输入标签
  • Label：标识，可以用于标识输入框

其他

你还可以在Apple Design Resources找到mac相关的视觉素材，可以用于Sketch/Photoshop/Adobe XD。