数字产品设计与心理学14 - 界面的词汇和语法

数字产品设计与心理学

语言是思想的载体,是沟通的主要工具,在人类社会交往过程中逐渐发展起来。我们使用与他人共享的词汇、语法来表达含义,以语音、文字或符号向他人传递信息。

视觉也可以类比为一门语言。作为传递信息的重要方式,视觉也有独特的内在属性和工作机制,并且可以拆分为一系列可识别、可处理的元素——也就是视觉的「词汇」。跟语言不同,视觉思维的基础是图案感知,而不是具有共识的表征符号。图案感知能力部分是天生的,部分靠后天习得。构成视觉系统的逻辑,主要是空间结构和关系,这跟语言的逻辑差异很大(维尔,2009)。

计算机至今还没有学会人类的自然语言,于是需要预先设定一组双方都能理解的语言来辅助沟通。数字产品中几乎所有的图形设计,都包含视觉表达和语言表达的部分。如果要表达的内容语义清晰,可以用特定的词汇或语句准确描述,那么文字表达就比较合适,例如用户的兴趣标签。如果内容涉及到复杂的关系,尤其是空间的、情境相关的、整体的、结构的,则用图像或图表更加适合,例如地图,又比如描述金融系统资金流关系的图表。

视觉词汇和语法

在自然语言中,词汇是承载含义的基本单位。那么在数字产品中,视觉语言中的词汇又代表什么呢?

第一类是属性词汇:描述对象的属性——这是什么。包括形式(文字/图形/图片/表格/视频),形状、大小、颜色、材质、位置、运动等。感知这些属性的能力大部分都是天生的。

第二类是行为词汇:描述行为属性——我要让它干什么。理解、记忆和使用这些属性,往往要经过学习。下表抽象地总结了人在使用数字产品时的主要行为,机器如何响应这些行为,以及可以使用哪些形式(表现为界面上的控件)来表达这些行为:

人的行为 机器的响应 控件
浏览/阅读 展示 文本区,图片,视频
选择 询问和执行 按钮,菜单
输入 询问 文本框,语音输入
提供指令 询问和执行 按钮,命令行,功能键
等待 正在处理 提示,进度条
直接操控 即时变化 操作指示器

有了词汇,还需要用语法来组织。语法即语言的组织规则和逻辑。视觉表达也包含一定的逻辑,主要用来定义物体、空间、图像之间的关系。换句话说,视觉语法要处理的是 「A 与 B 的关联」、「A 在 B 里面」、「A 属于 B 同时又属于 C」这类型的视觉元素之间的关系

下面将简单介绍业内最成熟的两套设计规范,从中我们可以学习到,可以用哪些「词汇」和「语法」构建出视觉界面。这两套规范,设计师一定不会陌生,其中一套是移动端最成熟的人机界面准则,由苹果公司开发;另一套是桌面应用最成熟的 Fluent 设计系统,由微软公司开发。

iOS 设计规范

苹果公司的人机界面准则(Human Interface Guidelines)是移动端最经典的设计准则,也是 UI 设计师必需熟知的文档。从设计准则的目录,可以一窥 iOS 平台包含哪些视觉语言:

2.4.3HIG

图片来源:https://developer.apple.com/design/resources/

其中跟视觉最为相关的有两部分:视觉设计(Visual Design/Icons and Images)和界面组件(Bars/Views/Controls)。下面整理了每个类别里涉及的项目,它们其实就是 iOS 平台的设计「词汇」:

类别 项目
视觉设计 布局和适配,动画,品牌,颜色,启动屏,材质,术语,文字排版,视频
图标和图片 图片尺寸和分辨率,App 图标,自定义图标,系统图标
条栏 导航栏,搜索栏,状态栏,标签栏,工具栏
视图 操作选项卡,活动视图,通知,合集,图像视图,页数,弹出层,分视图,表格,文字视图,网页浏览
控件 按钮,情境菜单,编辑菜单,标签,页面控件,选择器,进度条,刷新控件,分段控件,滑块,步进器,开关,文本字段

例如,滑块(Slider)控件是 iOS 视觉设计这门「语言」中属于「控件」类别的一个重要的词汇。一旦界面上出现滑块,意味着用户可以用手指按住白色圆点块装物,沿水平方向拖动,滑块位置所关联的值会相应发生变化。如果第一次使用 iOS 系统,可能需要一些时间去理解和试验这个控件。一旦熟练之后,用户就掌握了这个词汇,能够很快理解自己看到的东西,知道可以做哪些操作。

2.4.3sliders_2x

建议产品设计师们都仔细品读这些界面的「词汇」和「语法」,并且在日常使用 iOS 系统时,有意识地观察和思考这些视觉语言对自己的影响。

Fluent Design System

2.4.3fluentdesign-app-header

图片来源:https://www.microsoft.com/design/fluent/#/windows

Fluent Design System 是微软于 2017 年开发的设计语言。它包含所有面向 Windows 设备和平台的设计和交互指导原则,例如设计理念、布局、控件、样式、移动、输入和交互、设备、可用性、设计素材等部分。这些「界面语言」的组件,决定了用户和应用程序之间如何「对话」:

主题 描述
控件 控件是用户在应用程序主窗口区域进行交互的 UI 元素。
命令 命令是用户在使用应用程序时可以采取的行动。
文字 文本包括用户可以在你的应用程序中看到的任何文本。
信息 消息是用户在使用你的应用程序时需要或希望看到的任何类型的消息。
互动 交互是用户与应用程序交互的多种方式,包括触摸、键盘、鼠标等等。
窗户 Windows 是桌面应用程序的主要“画布”或 UI 界面,包括主窗口本身和弹出窗口、对话框和向导。
视觉效果 视觉效果包括控件以外的视觉元素,包括布局、字体、颜色、图标等等
体验 体验是所有应用程序的共同体验和用例,比如设置、首次运行和打印。
Windows 环境 Windows 环境是 Windows 提供的屏幕工作区,类似于物理桌面,也是操作系统的核心扩展点。
来源:https://docs.microsoft.com/zh-cn/windows/win32/uxguide/guidelines

下面简单介绍与视觉设计最相关的布局、控件和样式部分。

Layout 布局

桌面端应用的特点之一,是平面展示空间比较大,界面布局也就更加丰富、灵活、复杂,这部分的设计语言涵盖了详尽的内容:

例如,Fluent 设计系统总结了页面内容的几种常见模式:

2.4.3fluent模式

这些总结能让设计师快速掌握设计模式,并且使用用户所熟悉的界面布局形式。

Controls 控件

Windows 平台提供的基础控件多达 60 余种,它们是设计 Windows 应用最基本、最重要的「词汇」,使用这些控件,几乎可以构建出任意功能和形式的应用程序:

win controls and patterns

来源:https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/

例如,我们熟悉的按钮、单选框、复选框等,都是最常见的 UI 控件。

2.3.3xamlthemeeditor_screenshot

图片来源:https://docs.microsoft.com/en-us/windows/uwp/design/downloads/

Style 样式

样式部分包含:

例如,文字排版部分,给出了一系列字号,它们可以满足大部分情况下,展示不同层级文字的需要:

2.3.3type-ramp

组织视觉语汇

设计数字产品界面的视觉表现,就是灵活组织各种视觉词汇,以传递系统要表达的信息,并且与用户持续交互,帮助他们完成目标。

跟学习语言一样,记忆基本的词汇是第一步,所以设计师首先要熟悉这个平台的基本组件、控件、视觉样式。接着才能运用语法,也就是那些让词汇形成有意义关系的规则,用它们去组织词汇,最终形成可以表达意义的完整句子——人机交互界面。

理解了界面语言的视觉词汇,接下来的三个小节,我们将探讨重要的视觉语法:结构、隐喻、美感。

Ref

维尔. (2009). 设计中的视觉思维 (陈媛嫄, Trans.).

kidult00 wechat
扫码关注 00 的公众号
如果文章帮您节省时间或者解答疑问,不妨打个赏 :)