UI 设计进阶 7-2：成为 GUI 设计师：图形界面的构成

hindydesign

上海/产品设计师/6年前/745浏览

版权

hindydesign

聊聊 UI 设计中隐喻的重要性以及图形界面的构成

前言

本文是 UI 设计进阶系列的第 7-2 篇（总第 15 篇），系列目录：www.zcool.com.cn/article/ZNjI0MDI4.html。

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

在上一篇系列文章中我介绍了在 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. 组件必须是可复用的；
元素-图形：我所指的图形范围很大，包括图标、线条、形状、图片素材等；
元素-文字：可通过代码进行编写的文字。