提高设计画面的丰富性和层次感的7个技巧

　　创造视觉层次关系的技巧就是尽可能少地使用线框，添加一些颜色的平边框，不要让图标太笨拙，尽量看起来更精致，更统一。你不需要给他每个按钮的颜色、垂直阴影，不用在彩色背景上放置灰色字体。接下来，我们来看看七个提升设计画面丰富度和层次感的技巧。

　　一、视觉层次关系的创建应该反映在颜色的深度和字体的厚度上，而不是简单地使用大小

　　设计中常见的排版雷区是过于依赖字体的大小来区分层次关系，但通常这样，图片的效果并不突出，图片效果是为了避免元素太相似。如果元素不同，那么只要让他完全不同，让他的比较关系变得更强，可以让用户先获得更重要的信息。

　　二、尽可能少地使用线框

　　当你想做元素分区时，虽然线框是区分两个区域的好方法，但不是唯一的方法。使用太多的线宽会使设计看起来繁琐、复杂。如果你想区分元素，可以尝试以下三种方法：

　　1.使用阴影

　　投影效果是对区域元素的很好的总结，而且看起来可以更加精致，而且不会分散用户看到主要信息的注意力。

　　2.使用不同的背景颜色来区分区域

　　通常只需要为相邻元素提供稍有不同的背景颜色就可以区分它们

　　3.使每个模块之间的距离看起来更远

　　与其简单地增加分离，不如创建元素之间的分离?拉动每个模块之间的距离是区分模块之间的一个很好的方法，并使每个单独的模块看起来更亲密

　　三、添加一些颜色的平边框

　　当我们发现图片中的元素是普通的，一个简单的技术，可以为界面的某些部分添加一些颜色，也就是说，添加一点颜色的边界，看起来更生动。

　　要把图标弄得太笨拙。

　　尽量看起来更精致、更统一。

　　如果你要设计一些大图标，你可以尝试在图标上添加一个背景色，以减少图标的大小，使用背景色使图标看起来更大。同时，可以丰富原始单调图标，而不会出现沉重的图标，从而影响图片中的效果。

　　注意：这种方法通常用于大功能图标，但如果一些常见的界面设计，图标看起来尽可能小，颜色统一，最好没有颜色，因为颜色图标可能会影响用户的判断。图标样式必须统一，如果使用线性，使用线性，使用表面，使用表面

　　五、你不需要给他每个按钮的颜色

　　当用户可以在页面上执行多个操作时，需要在界面中添加一些指导设计，即突出希望用户操作的按钮，不希望用户操作被削弱，从而激发用户的点击欲望。

　　控制设计是一个非常重要的组成部分，具有一个共同的重要维度：层次结构。最希望用户按：突出，应与背景形成强对比度；第二重要：应设计清晰，但不需要突出，使用低对比度的背景色选择更好；三级控制：应能让用户控制，但不需要引人注目。

　　六、垂直阴影

　　当我们需要做一个投影效果时，我们不使用大的模糊来使框架阴影更加明显，而是使轻微的投影垂直偏移，这样看起来效果会更加自然，因为这样做模拟了一个真实的光效果，从上面照射下来的效果就像我们的太阳在顶部照射下来一样，使效果更加真实和自然。

　　七、请不要在彩色背景上放置灰色字体

　　当将灰色字体放在白色背景上时，效果非常好，但如果将灰色字体放在彩色背景上，结果并不令人满意。这是因为当将灰色放在白色背景上时，它们的对比度会降低，因此图片看起来更简洁、更干净。

　　但是，如果你把灰色放在彩色背景上，视觉感官上的颜色会更亮，这使得图片不干净，有点脏。我们应该试着让文本更接近背景的颜色，这更有利于创建图片的层次关系，而不是直接将灰色文本放在彩色背景上。

　　在使用彩色背景时，可以尝试以下两种方法：

　　1.减少白色字体的不透明度

　　使用白色字体，然后稍微降低白色文本的不透明度。这样，彩色背景可以稍微穿透人体的白色字体。这种方法可以有效地使文本与背景看起来更加协调。

　　2.选择基于背景颜色更亮的颜色

　　当背景是颜色或浅低温时，如果只是降低白色文本的不透明度，会使文本的感觉有点太苍白，那么我们可以尝试将文本的颜色改为与背景色相同的颜色，然后调整文本的饱和度和亮度。

　　上述的提高设计画面的丰富性和层次感的7个技巧，大家都学会了吗？更多关于“UI培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。