在最近流行的 UI 设计语言和设计风格中，材质和肌理的效果越来越受到重视。本文将对“如何将材质和肌理的表现手法应用到 UI 设计中去”提供一些思路，相信会对你有所启发 ——
1、材质、肌理与设计语言
1. 材质、肌理的基本概念
首先，我们先来理解“材质”和“肌理”这两个词的基本概念：
- 材质：是指物体看起来是什么质地，可以看作是材料和质感的结合，很好理解。
- 肌理：由于物体的材料不同，表面的组织、排列、构造各不相同，因而产生粗糙感、光滑感、软硬感。人们对肌理的感受一般是以触觉为基础的。
我们可以将肌理按照三种方式进行分类：
按照五感分类，肌理可以分为：
- 视觉肌理：由于人们触觉物体的长期体验，以至不必触摸，便会在视觉上感到质地的不同，被称之为视觉质感
- 触觉肌理：一般通过拼压、模切、雕刻等加工方式而得到，是三维立体的肌理，用手能触摸感觉到
按照肌理的效果分类，肌理可以分为：
- 二维平面肌理：如背景的花纹、重复的平面元素阵列效果等
- 三维立体肌理：如凹凸的花纹、有起伏的立体元素排布等
- 空间肌理：更大范围内的物体或元素的阵列，如俯瞰一座城市或者乡村等
从左至右依次为：二维平面肌理、三维立体肌理和空间肌理
按照肌理的成因分类，肌理可以分为：
- 自然肌理：自然形成的现实纹理，如：木、石等没有加工所形成的肌理
- 创造肌理：由人工造就的现实纹理，即原有材料的表面经过加工改造，与其原来触觉不一样的一种肌理形式
2. 材质、肌理在设计语言中的应用
从现实生活中的有很多成功的案例可以看出，在设计语言中恰当的应用材质和肌理，有助于从以下几点提升设计质量：
强化品牌语言的特征：突出和强调设计语言的视觉和触觉效果，传播和呈现品牌特性：
LOUIS VUITTON 的经典老花，草间弥生的南瓜，三宅一生的包
增加设计细节：使产品的设计细节更精致、细腻、丰富可感：
传递情感与功能语义：强化产品的功能，优化功能的呈现状态和视觉效果，或传递特定的功能语义，兼备视觉美化和功能优化的效果：
2、材质与肌理在 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 设计中，材质和肌理的常用表现手法有以下几种：
真实世界的材质映射：
- 是指在设计时借鉴真实世界中的物体的效果和材质，在提炼和概括后进行界面绘制
- 会使界面更熟悉、有亲和力、有身临其境的体验感
- 会使交互元素的设计传达出强烈的语意感和实操感（如可按压、可点击、可滑动），降低用户学习和理解的成本
Smart Boiler App by Karin
半透明材质的应用：
- 毛玻璃、亚克力等材质，因其具备通透性而被广泛应用，被默认为自带高级感
- 在设计中常常作为遮罩、下拉菜单、抽屉等互动功能层等方式出现
- 颜色也可以随产品的品牌色进行适度更改
Microsoft SharePoint on Behance
光和投影的统一设定：
- 光和投影可以增加元素的立体感和质感
- 将平面的二维世界与三维世界的界限相融合
- 提升页面视觉呈现的效果和品质
Line Chart by Mike | Creative Mints
渐变色的应用：
- 渐变色也渐渐被纳入到材质和肌理的行列，作为一种二维平面肌理，更多的是从视觉层面上给用户带来感官刺激
- 渐变色中的合理配色同样会让元素具备一定的体积感
- 渐变色可以被应用在很多场景，前景主体元素或者背景元素都可以尝试
- 由于没有明确的现实生活中的映射，所以渐变色中的配色会引起用户不同的感受和个性化的理解
e.g.：渐变色背景营造出一种似有非有的流体物质感：
Mellow Shopping UI Thanks Credit by :- Anton Tkachev
e.g.：主要元素使用渐变色制作出立体感：
Cryptocyrrency wallet application by Alex Arutuynov
拟真的动画效果：
- 动画的状态可以多维度的传递出材质的质感和状态
- 起到不可或缺的辅助作用，会使交互过程和元素更为真实可感
e.g.：动效提升了卡片的厚重感，使卡片层次更丰富：
Card Swipe Interaction by Minh Pham ✪
e.g.：动画效果让菜单变成了“帘子”，增添了趣味性：
Eating List. Animated. by Cadabra Studio
3. UI 材质设计可能的发展方向
自然的设计：
这里的自然可能包含几种含义：
- 自然界中的材质感受与数字世界中的信息内容相结合
- 将材质的特性变为可供性（Affordance），自然的引导用户交互
- UI 界面因为材质变得更富有生命力，材质设计的探索遵循自然发展的生物性规律
多感官的综合体验：
界面元素的材质不光是可以被看得到（视觉），还可以被听到、触碰到、闻到（听、触、嗅觉）
创造虚拟材质：
一切 UI 皆有材质：
图片及内容参考来源：https://www.behance.net/gallery/81201391/Microsoft-SharePoint
