扁平=平而不扁=有层次

    image.png

    一、布局层次的作用是什么？
    image.png
    层次性能够把用户注意力抓准，用户才会有兴趣继续阅读。

    image.png
    整个视觉划分比较清晰，比如说banner是占据主要的视觉。
    布局层次可以从设计层面上达到产品的目标

    二、怎么实现整个界面的布局层次？
    三种层级顺序
    image.png
    图片：最吸睛、视觉最强，能够非常好的吸引注意力。
    图标：能够辅助吸引我们整个视觉注意力。
    文字：文字版块视觉吸引较弱，一般在日常UI设计中它都是以说明为主的。不会很吸引用户注意力。


    image.png
    好的层级应该具备，从强到弱，合理分布，想让用户去看哪里。做到整个图片和图标跟整个文字之后，从上到下让用户有一个更舒服的体验。 一个好的界面不仅仅是整个设计细节能够做的更加细节一些，更加重要的是它要具备一个层次性。

    怎么做内容的划分？
    image.png

    留白： 空白型的一个区隔。留白需要注意呼吸感。
    技巧：一屏中分割块少于3个，多余3个整个屏幕的分裂感就会非常强， 阅读体验差。
    image.png

    灰色分割块：区分不同版块之间的内容。
    image.png

    通栏分割线 ：线条一般是分割相同版块不同内容。适用于标题+内容的分割。
    image.png

    非通栏分割线 ：区分内容与内容之间
    image.png