火星网校
UI设计中甲方想要的层次感是什么？让我们一起探索透叠手法
发布时间：2024-06-27 13:26:54 浏览量：211次
透叠的分类
1、透明透叠
第一张图片案例中的图片的背景明度反差过大，无论是将文字反白还是填黑都没有办法改善这个版面中文字的识别性。那么在这种情况下应该怎么解决这个问题呢？我们可以在文字层与背景图片之间添加一个带有色彩的半透明层，这样不仅减弱了背景图片的反差程度，同时也解决了文字的识别问题。
随着透明度的强度不同，版面所呈现出的效果也会随之不同，具体应该设置多少透明度，这取决于文字的识别度是否处于舒适的状态。对于以图片为主的版面，在图片之上叠加30%的中性灰，并结合适当的图层混合模式一般能够解决大部分的反白文字无法识别的问题；而对于以文字为主的版面，在文字与图片之间加入低反差的透明层，能够在丰富版面效果的同时，也保证了版面的简洁与文字的高识别度。
2、模糊透叠
第一张图是以图片为主的版面，因为背景中高亮的黄色与白色文字过于接近，所以通过在背景层与文字层之间添加半透明层来解决文字识别度的例子，那么除了降低透明度之外，我们还可以对中间层添加哪些变化呢？将其处理成弥散的毛玻璃效果是一种不错的方法。
实现这种毛玻璃的效果其实非常简单，那就是在文字层与背景层之间建立模糊层，采用软件中的高斯模糊命令就可以轻松实现它。不过因为图片经过高度的模糊后，通常画面会微微泛白，所以我们还需要在模糊层之上进行色彩与明度的微调。不同的模糊程度也会带来不一样的视觉效果。
在摄影中，我们经常能够看到这种局部模糊的照片，它是相机的景深效果。这种模拟人眼对焦后所看到的景象，会将聚焦的位置保持清晰，而其余的背景则变得模糊，并产生一种非常自然的空间感。
我们可以利用这种视觉效果来创建带有景深的版面，在背景层之上添加模糊与色彩调整层，并在这一基础之上添加画面的焦点元素。它可以是图形／图像，也可以是文字或两者的组合。其最终目的都是在模糊层之上添加一层清晰的主体元素，视线会自然而然的停留在版面中的清晰元素之上。
3、局部透叠
局部透明的手法也可以单独运用，我们调整中间透明层的属性，将其修改为从完全不透明到完全透明的渐变样式，这样一来，图片中重要的部分会更加清晰的呈现出来，而不会因为加入透明层而变得不明显。不重要的部分则会被色块完全覆盖，更方便文字的添加与编排。
这种渐隐式的透明层，对于特殊尺寸的延展也非常有效。需要呈现的部分完全透明，而需要被遮挡的部分完全不透明，透明与不透明之间产生了渐变式的过渡效果。
优势与优点
想要学习更多UI设计技巧，了解最新行业动态吗？快来火星时代教育，我们提供游戏设计培训、动画培训、AI音乐创作培训等课程，点击点击咨询即可获取更多信息。
本次课程分享了透叠手法的分层概念、四种透叠表现形式以及设计方法，希望对您有所启发，感谢您的支持！
关注火星时代教育官微：火星时代教育总部（hxsdjy）
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
最新文章
