Schatten im Material Design Guide inkonsistent

Ich habe ein Problem mit der Material-Design-Richtlinie. Einige Referenzen zu Höhe / Schatten erscheinen mir inkonsistent:

An einer Stelle ( https://material.io/design/environment/elevation.html#elevation-in-material-design ) heißt es „Höhe ist der relative Abstand zwischen zwei Oberflächen“ und „Oberflächen auf derselben Höhe können erscheinen anders, wenn andere Oberflächen dahinter sind.“

Geben Sie hier die Bildbeschreibung ein

Dann ist in diesem Beispiel der Schatten der Fläche B kleiner als der der Fläche A, da er auf die Fläche C geworfen wird, die "höher" als der Hintergrund ist. Das macht Sinn, so funktioniert Licht/Schatten in der realen Welt.

Aber dann wird etwas später auf derselben Seite eine Fläche gezeigt, die eine andere Fläche und den Hintergrund überlappt. Die untere Fläche ist vom Hintergrund erhöht. Die obere Fläche wirft einen Schatten auf die untere Fläche und den Hintergrund. Aus den obigen Referenzen würde ich annehmen, dass der Anteil des Schattens, der auf den Hintergrund fällt, größer ist, da der relative Abstand größer ist. Allerdings hat der Schatten auf beiden Teilen die gleiche Größe.

Geben Sie hier die Bildbeschreibung ein

Ich verstehe nicht, wie das Sinn macht, es scheint widersprüchlich zu sein.

Stimmt das tatsächlich nicht oder übersehe ich Informationen?

Wenn es nicht widersprüchlich ist, wie würde eine Animation aussehen, bei der sich eine Oberfläche über eine andere bewegt, während sie auf derselben Z-Ebene bleibt? Würde der Schatten allmählich schrumpfen, aber an allen Stellen immer gleich groß sein?

Wenn es widersprüchlich ist, warum? Mir fielen nur diese eher unwahrscheinlichen Erklärungen ein:

  1. Es handelt sich um eine technische Einschränkung. Das Berechnen von Schatten auf diese Weise ist komplexer, z. B. glaube ich nicht, dass dies mit CSS-Box-Schatten einfach zu bewerkstelligen ist. Das erscheint unwahrscheinlich, denn Material Design ist nicht nur ein Konzept, es soll umgesetzt werden.

  2. Es ist ein Fehler in der Richtlinie. Scheint unwahrscheinlich, die Richtlinie ist ca. 4 Jahre alt und recht verbreitet, ein solcher Fehler wäre mittlerweile aufgefallen.

  3. Es gibt eine Erklärung, aber sie ist entweder nicht oder schlecht dokumentiert.

  4. Es ist ein bekanntes Problem, aber es gibt keine Lösung, und es wird auch keine Zeit dafür geben, da sich niemand um solche Kleinigkeiten kümmert.

Antworten (1)

Das zweite Bild zeigt übertriebene Schatten, um das Konzept besser zu veranschaulichen. Es hält sich nicht an die im Artikel beschriebenen Gestaltungsrichtlinien.

Das Gesamtbild, aus dem Sie es ausgeschnitten haben, zeigt keine abgerundeten Kanten oder insbesondere während der Farben, wie in den anderen Beispielen im Artikel.vollständig referenziertes Bild

Vergleichen Sie Ihr Bild mit einem weiter unten im Text ; Sie werden sehen, dass dies den tatsächlichen (Pseudo-)Inhalt zeigt, um die Verwendung im wirklichen Leben zu veranschaulichen.