原标题：成为 GUI 设计师：图形界面的构成

点上面 hindydesign即可订阅

前言

本文是 UI 设计进阶系列的第 7-2 篇（总第 15 篇）。

各位好，又好久不见，我来继续填坑啦~

在上一篇系列文章中我介绍了在 GUI 中视觉设计的四个要点，分别是字体、版式、色彩和品牌。这篇文章我将介绍在设计 UI 时隐喻的重要性以及 GUI 的构成。

隐喻的力量

早在本系列第 3-1 篇《以用户为中心的设计：两个人》一文中我就提到过 Norman 引入的「可供性（affordance）」一词。图形界面需要具备可供性，除了利用示能（signifier）来传达外，隐喻（metaphors）也是最常用的办法。

什么是隐喻？

人机交互设计中的隐喻是指置入用户熟悉的某一东西来借此理解产品的某一含义。

这种隐喻可以是关于图形的，比如计算器 app 的图标就是个计算器，让人一眼就明。

它也可以是关于声音的，比如使用相机 app 拍照后，手机会发出「咔嚓」一声来模拟传统相机拍照的声音，提示你拍摄成功。

它也可以是关于交互的，比如我们习以为常的页面滑动操作，就是模拟了真实纸张被滑动的视觉效果。

而这种隐喻的设计，其实早在 GUI 诞生的时候，施乐（Xerox PARC）的研究员们就开始应用了。

桌面（Desktop）隐喻

我们知道早期的个人电脑主要是为各类办公人员工作使用的。桌面的设计其实不只是在隐喻办公桌的桌面，更是整个办公室的场景。因此电脑桌面上才有文件柜、打印机、垃圾桶等。下图是 Tim Mott（蒂姆 · 莫特）最早在餐厅用餐巾纸画下的桌面隐喻灵感。这个想法直接奠定了个人计算机操作系统的桌面设计并沿用至今。

窗口（Windows）隐喻

当 Alan Kay 谈到桌面隐喻的时候总会提起重叠窗口的点子，它是如何从纸张转化到桌面上的。「你可以放一踏纸在桌面上，只要你可以看见每一张纸的一个角角，就可以将它拉出来后放在最上层。」

所以对 UI 的设计从来都是尽可能地隐喻现实生活中的物品和体验，以降低人们的学习成本。时至今日依旧如此。

隐喻的缺点

但隐喻也不是万能的，在《About Face 3》中就提到了隐喻的几个问题：

User interfaces based on metaphors have a host of other problems as well: Therearen’t enough good metaphors to go around, they don’t scale well, and the ability ofusers to recognize them is often questionable, especially across cultural boundaries.

大意就是：这世上没有那么多好的隐喻可以用，并且隐喻的适用性不够强。而且用户对隐喻的认知和理解经常值得被怀疑，尤其是需要跨文化背景的时候。

Word 中的保存图标就用了隐喻（用 3.5 英寸软盘来表示保存，你可能在其他产品上也见过）。然而这对于那些不是那么早接触计算机的人来说，他们从没有见过软盘，这个图标所传达的含义就不够直观了。

善用隐喻可以说是 UI 设计中最重要的能力之一。各位在平日的工作中也许无法感受到，但若做更前沿的交互探索，如 VR、自动驾驶的交互等没有固定范式的设计，这个能力就显得格外重要了。

GUI 的构成

讲完隐喻，我们再来聊聊具体的图形界面。下面是我自己的一套构成理论，特点是纯粹基于视觉分解，方便没有编程经验的设计师理解。

如上图所示。一款产品的图形界面由各种页面组成，每个页面又可以分为不同区域。区域是由各类组件组合而成。而组件又是由最基础的设计元素构成，分别是：图形和文字。也就是说图形和文字是构成页面的基本单位。下面分别是这些单位的含义。

•页面：产品的一个个独立页面，可通过交互完成页面切换；•区域：区域可以起到划分页面的作用，通常是按内容/功能的不同来划分各个区域；•组件：由元素合成基础组件，最为常见的如按钮（button）、模态框（modal）等。组件还另外有两个特性：1. 组件可由组件复合成更复杂的组件；2. 组件必须是可复用的；•元素-图形：我所指的图形范围很大，包括图标、线条、形状、图片素材等；•元素-文字：可通过代码进行编写的文字。

实例解构

这是印象笔记的 Mac 版，大致可以分为上面这几个区域。每个区域又由不同的组件组合而成。拿「编辑区」举例，里面除了内容的编辑区外，还有用来编辑样式、插入内容的编辑栏。编辑栏里又是由复合的按钮、选择器等组件组成。

手机端的 app 页面则要简单得多，目前绝大多数产品都是由导航栏、标签栏和内容区组成。当然还是一样，内容区里又由复杂的各个组件组合而成。

运用好隐喻和组件化的设计思维，可以帮助我们创造出体验更自然、信息更清晰的界面。我在这也整理了一些最为知名的平台设计规范和组件库，分享给大家。

拓展学习推荐设计规范

•Apple - macOS：developer.apple.com/macos/human-interface-guidelines/overview/themes/•Apple - iOS：developer.apple.com/ios/human-interface-guidelines/overview/themes/•Apple - watchOS：developer.apple.com/watchos/human-interface-guidelines/overview/themes/•Apple - tvOS：developer.apple.com/tvos/human-interface-guidelines/overview/themes/•Google - Material Design：material.io/guidelines/•Google - Actions on Google：developers.google.com/actions/extending-the-assistant•Microsoft - UWP：developer.microsoft.com/zh-cn/windows/apps/design•Microsoft - Windows Mixed Reality：docs.microsoft.com/zh-cn/windows/mixed-reality/

设计组件库

•Ant Design：ant.design•Lightning Design System：lightningdesignsystem.com•Bootstrap：getbootstrap.com•Muse-UI：muse-ui.org

如欲获取完整 PPT，请关注我的公众号，回复「图形界面」即可

参考资料

• 《关键设计报告，改变过去影响未来的交互设计法则》：book.douban.com/subject/6024020/• 交互设计中 metaphor 和 affordance 的区别？- 知乎：https://www.zhihu.com/question/268906308/answer/343341035• UI Patterns：ui-patterns.com

HindyDesign

还可以在这些地方找到我哦

知乎：hindy

站酷：hindydesign

Instagram：hindydesign

责任编辑：