详解 | UI 设计中的材质与肌理效果

| 全文共 2247 字 11 图，阅读需要 8 分钟 |

在最近流行的 UI 设计语言和设计风格中，材质和肌理的效果越来越受到重视。本文将对“如何将材质和肌理的表现手法应用到 UI 设计中去”提供一些思路，相信会对你有所启发 ——

01材质、肌理与设计语言

1. 材质、肌理的基本概念

首先，我们先来理解“材质”和“肌理”这两个词的基本概念：

材质：是指物体看起来是什么质地，可以看作是材料和质感的结合，很好理解。

肌理：由于物体的材料不同，表面的组织、排列、构造各不相同，因而产生粗糙感、光滑感、软硬感。人们对肌理的感受一般是以触觉为基础的。

我们可以将肌理按照三种方式进行分类：

1）按照五感分类，肌理可以分为：

视觉肌理：由于人们触觉物体的长期体验，以至不必触摸，便会在视觉上感到质地的不同，被称之为视觉质感

触觉肌理：一般通过拼压、模切、雕刻等加工方式而得到，是三维立体的肌理，用手能触摸感觉到

2）按照肌理的效果分类，肌理可以分为：

二维平面肌理：如背景的花纹、重复的平面元素阵列效果等

三维立体肌理：如凹凸的花纹、有起伏的立体元素排布等

空间肌理：更大范围内的物体或元素的阵列，如俯瞰一座城市或者乡村等

从左至右依次为：二维平面肌理、三维立体肌理和空间肌理

3）按照肌理的成因分类，肌理可以分为：

自然肌理：自然形成的现实纹理，如：木、石等没有加工所形成的肌理

创造肌理：由人工造就的现实纹理，即原有材料的表面经过加工改造，与其原来触觉不一样的一种肌理形式

2. 材质、肌理在设计语言中的应用

从现实生活中的有很多成功的案例可以看出，在设计语言中恰当的应用材质和肌理，有助于从以下几点提升设计质量：

强化品牌语言的特征：突出和强调设计语言的视觉和触觉效果，传播和呈现品牌特性：

LOUIS VUITTON 的经典老花，草间弥生的南瓜，三宅一生的包

增加设计细节：使产品的设计细节更精致、细腻、丰富可感：

传递情感与功能语义：强化产品的功能，优化功能的呈现状态和视觉效果，或传递特定的功能语义，兼备视觉美化和功能优化的效果：

02材质与肌理在 UI 设计中的应用
1. UI 设计的材质简史

1990 年，微软的 windows 3.0 已经开始有了浮雕、阴影的设计元素，拟物化的萌芽开始出现：

1995 年，微软的 windows95，界面上开始出现浮雕凸起、凹陷等效果，包括文件夹窗口的凹陷，在体积、光影上进行了应用。不过在质感和材质没有太大的突破：

2000 年 9 月，苹果发布了由柯戴尔·瑞茨拉夫 (Cordell Ratzlaff) 设计的用户界面 Aqua。Aqua 是指“水”，你会看到苹果在交互界面的细节之处借鉴了水滴的效果，整个界面通透而富有灵性，在当时设计领域红极一时。至此，深受我们熟知的拟物化设计风格，正式拉开序幕：

iphone 的 iOS 系统也在之后的几年里，使用了这种设计语言，并将其完善和深化。拟物化设计风格流行了近十年，成功占领了 UI 设计界的霸主地位：

2009 年，微软发布 Win7，这也是微软的一个具有历史意义的设计系统。Win7 界面加强了透明的样式设计，微软独具一格的亚克力设计风格初见端倪：

2013 年，由苹果设计师乔纳森伊夫（Jony Ive）主持设计的 iOS7，摒弃了之前的拟物化设计风格，去掉了投影和不必要的肌理效果，推出了全新的扁平化设计风格，并加入了毛玻璃的设计理念。随后 Mac 系统也通过 OS X 10.10 成功升级为扁平化风格：

2014 年，Google 正式发布了以 Material Design 作为全新的设计语言的 Android5.0。Material Design 基于扁平化设计理念，加入卡片的设计概念，将纸张的概念融入到 UI 设计中，强调光影和层次，同时具备模拟真实物理世界中运动曲线的动画效果，进而引发了动画设计语言的流行：

2017 年，与 Google 的 Material Design 相比，Microsoft Fluent Design 在设计中加入了五大元素光线（Light），深度（depth），动画（motion），材质（Material）与尺度（Scale）：

时至今日，随着设计语言一词慢慢流行起来，也出现了多元化的设计风格和材质应用，例如 New Skeuomorphism，小米的 MIUI 等等：

2. UI 材质的常用表现手法

看过上述材质和肌理在 UI 中的应用历史，我们可以发现，在 UI 设计中，材质和肌理的常用表现手法有以下几种：

1）真实世界的材质映射：

是指在设计时借鉴真实世界中的物体的效果和材质，在提炼和概括后进行界面绘制

会使界面更熟悉、有亲和力、有身临其境的体验感

会使交互元素的设计传达出强烈的语意感和实操感（如可按压、可点击、可滑动），降低用户学习和理解的成本

Smart Boiler App by Karin

2）半透明材质的应用：

毛玻璃、亚克力等材质，因其具备通透性而被广泛应用，被默认为自带高级感

在设计中常常作为遮罩、下拉菜单、抽屉等互动功能层等方式出现

颜色也可以随产品的品牌色进行适度更改

Microsoft SharePoint on Behance

3）光和投影的统一设定：

光和投影可以增加元素的立体感和质感

将平面的二维世界与三维世界的界限相融合

提升页面视觉呈现的效果和品质

Line Chart by Mike | Creative Mints

4）渐变色的应用：

渐变色也渐渐被纳入到材质和肌理的行列，作为一种二维平面肌理，更多的是从视觉层面上给用户带来感官刺激

渐变色中的合理配色同样会让元素具备一定的体积感

渐变色可以被应用在很多场景，前景主体元素或者背景元素都可以尝试

由于没有明确的现实生活中的映射，所以渐变色中的配色会引起用户不同的感受和个性化的理解

eg：渐变色背景营造出一种似有非有的流体物质感：

Mellow Shopping UI Thanks Credit by :- Anton Tkachev

eg：主要元素使用渐变色制作出立体感：

Cryptocyrrency wallet application by Alex Arutuynov

4）拟真的动画效果：

动画的状态可以多维度的传递出材质的质感和状态

起到不可或缺的辅助作用，会使交互过程和元素更为真实可感

eg：动效提升了卡片的厚重感，使卡片层次更丰富：

Card Swipe Interaction by Minh Pham

eg：动画效果让菜单变成了“帘子”，增添了趣味性：

Eating List. Animated. by Cadabra Studio

3. UI 材质设计可能的发展方向

1）自然的设计：

这里的自然可能包含几种含义：

自然界中的材质感受与数字世界中的信息内容相结合

将材质的特性变为可供性（Affordance），自然的引导用户交互

UI 界面因为材质变得更富有生命力，材质设计的探索遵循自然发展的生物性规律

2）多感官的综合体验：

界面元素的材质不光是可以被看得到（视觉），还可以被听到、触碰到、闻到（听、触、嗅觉）

3）创造虚拟材质：

4）一切 UI 皆有材质：

文章来源：长弓小子（ID：changgongxiaozi1314）

作者：元尧

https://mp.weixin.qq.com/s/dde3oFCuv7qGtsEk766Sbw