macos图形界面的窗口、视图、菜单和控件

Sun 17 March 2019 / In categories Platform

Cocoa, macOS

苹果在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。

Load Disqus Comments