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

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

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

1、材质、肌理与设计语言

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

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

  • 材质:是指物体看起来是什么质地,可以看作是材料和质感的结合,很好理解。
  • 肌理:由于物体的材料不同,表面的组织、排列、构造各不相同,因而产生粗糙感、光滑感、软硬感。人们对肌理的感受一般是以触觉为基础的。

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

按照五感分类,肌理可以分为:

  • 视觉肌理:由于人们触觉物体的长期体验,以至不必触摸,便会在视觉上感到质地的不同,被称之为视觉质感
  • 触觉肌理:一般通过拼压、模切、雕刻等加工方式而得到,是三维立体的肌理,用手能触摸感觉到

按照肌理的效果分类,肌理可以分为:

  • 二维平面肌理:如背景的花纹、重复的平面元素阵列效果等
  • 三维立体肌理:如凹凸的花纹、有起伏的立体元素排布等
  • 空间肌理:更大范围内的物体或元素的阵列,如俯瞰一座城市或者乡村等

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

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

按照肌理的成因分类,肌理可以分为:

  • 自然肌理:自然形成的现实纹理,如:木、石等没有加工所形成的肌理
  • 创造肌理:由人工造就的现实纹理,即原有材料的表面经过加工改造,与其原来触觉不一样的一种肌理形式

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

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

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

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

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

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

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

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

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

2、材质与肌理在 UI 设计中的应用

1. UI 设计的材质简史

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

真实世界的材质映射:

  • 是指在设计时借鉴真实世界中的物体的效果和材质,在提炼和概括后进行界面绘制
  • 会使界面更熟悉、有亲和力、有身临其境的体验感
  • 会使交互元素的设计传达出强烈的语意感和实操感(如可按压、可点击、可滑动),降低用户学习和理解的成本

详解 | UI 设计中的材质与肌理效果
Smart Boiler App by Karin

半透明材质的应用:

  • 毛玻璃、亚克力等材质,因其具备通透性而被广泛应用,被默认为自带高级感
  • 在设计中常常作为遮罩、下拉菜单、抽屉等互动功能层等方式出现
  • 颜色也可以随产品的品牌色进行适度更改

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

Microsoft SharePoint on Behance

光和投影的统一设定:

  • 光和投影可以增加元素的立体感和质感
  • 将平面的二维世界与三维世界的界限相融合
  • 提升页面视觉呈现的效果和品质

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

Line Chart by Mike | Creative Mints

渐变色的应用:

  • 渐变色也渐渐被纳入到材质和肌理的行列,作为一种二维平面肌理,更多的是从视觉层面上给用户带来感官刺激
  • 渐变色中的合理配色同样会让元素具备一定的体积感
  • 渐变色可以被应用在很多场景,前景主体元素或者背景元素都可以尝试
  • 由于没有明确的现实生活中的映射,所以渐变色中的配色会引起用户不同的感受和个性化的理解

e.g.:渐变色背景营造出一种似有非有的流体物质感:

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

Mellow Shopping UI Thanks Credit by :- Anton Tkachev

e.g.:主要元素使用渐变色制作出立体感:

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

Cryptocyrrency wallet application by Alex Arutuynov

拟真的动画效果:

  • 动画的状态可以多维度的传递出材质的质感和状态
  • 起到不可或缺的辅助作用,会使交互过程和元素更为真实可感

e.g.:动效提升了卡片的厚重感,使卡片层次更丰富:

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

Card Swipe Interaction by Minh Pham ✪

e.g.:动画效果让菜单变成了“帘子”,增添了趣味性:

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

Eating List. Animated. by Cadabra Studio

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

自然的设计:

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

  • 自然界中的材质感受与数字世界中的信息内容相结合
  • 将材质的特性变为可供性(Affordance),自然的引导用户交互
  • UI 界面因为材质变得更富有生命力,材质设计的探索遵循自然发展的生物性规律

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

多感官的综合体验:

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

创造虚拟材质:

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

一切 UI 皆有材质:

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

图片及内容参考来源:https://www.behance.net/gallery/81201391/Microsoft-SharePoint

本文由 新媒体之家 作者: 长弓小子 发布或转载,其版权均为原作者所有,如稿件涉及版权等问题,请与我们联系删除或处理。稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同其观点或证实其内容的真实性,更不对您的投资构成建议。未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
3

发表评论