材质与肌理在 UI 设计中的应用（二）
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