63 lines
5 KiB
Markdown
63 lines
5 KiB
Markdown
---
|
|
created: 2024-03-12 13:49
|
|
updated: 2024-03-12 13:49
|
|
---
|
|
Diseñar está completamente fuera de mi zona de confort, así que estudiar como hacer, y hacer el esfuerzo de planear como diseñar la página antes de tirarme de hocico a hacerlo ha sido una experiencia bastante satisfactoria
|
|
|
|
Pensar que debo realizar, que quiero comunicar y como lo quiero comunicar ha enrutado el diseño y permitiendo que sea más facil
|
|
|
|
el feedback tambien ha sido satisfactorio, porque me ha hecho entender mejor que debo hacer y que no, tambien algúnos comentarios han contradecido completamente lo que yo creería que sería mejor, lo cuál ha enfocado mejor el diseño final en lo que realmente debe (y como debe) ser la página
|
|
|
|
## Cómo enfatizar un elemento
|
|
|
|
Para hacer que un elemento destaque del fondo, debemos ocupar _**Elevación**_,esto hará que el elemento parezca estar más cerca de la pantalla, haciendo que resalte de lo demás y atrapando la atención del usuario.
|
|
|
|
La manera de lograr esto depende del tema:
|
|
|
|
### Light Theme
|
|
|
|
Contrastar el contorno del elemento con su entorno, para esto podemos:
|
|
|
|
- Utilizar sombras, esto destaca el contorno de un elemento y su grado de elevación.
|
|
- sombras más pequeñas y definidas indican mayor proximidad al fondo.
|
|
- sombras más grandes y difuminadas indican mayor lejanía del fondo.
|
|
- Distintos colores diferencian elementos pero no proveen su grado de elevación.
|
|
- Opacidad muestra los contornos de los elementos y su solapamiento, pero no su grado de elevación.
|
|
- Podemos oscurecer el fondo para destacar un elemento sobre todo lo demás, esto ofrece una gran, pero no especifica cantidad de elevación.
|
|
|
|
### Dark Theme
|
|
|
|
- Utilizar colores claros para denotar el grado de elevación:
|
|
- Utilizar colores directamente. mientras más claro sea el color, más elevado estará un componente.
|
|
- Aplicar un _"overlay"_ de un color claro, con distintos grados de transparencia. Mientras menos transparente más elevado estará el componente. No aplicar este esto a los colores primarios o similares.
|
|
- _**NO**_ aplicar "light glows" en lugar de sombras oscuras para expresar elevación, porque no logran el mismo efecto.
|
|
|
|
### References of common elevations
|
|
|
|
| Component | Default elevation values (dp) | White overlay transparency |
|
|
| --------------------------------------------------------- | ----------------------------- | -------------------------- |
|
|
| Dialog | 24 | 16% |
|
|
| Modal bottom sheet Modal side sheet | 16 | 15% |
|
|
| Navigation drawer | 16 | 15% |
|
|
| Floating action button (FAB - pressed) | 12 | 14% |
|
|
| Standard bottom sheet Standard side sheet | 8 | 12% |
|
|
| Bottom navigation bar | 8 | 12% |
|
|
| Bottom app bar | 8 | 12% |
|
|
| Menus and sub menus | 8 | 12% |
|
|
| Card (when picked up) | 8 | 12% |
|
|
| Contained button (pressed state) | 8 | 12% |
|
|
| Floating action button (FAB - resting elevation) Snackbar | 6 | 11% |
|
|
| Top app bar (scrolled state) | 4 | 9% |
|
|
| Top app bar (resting elevation) | 0 or 4 | 0% - 9% |
|
|
| Refresh indicator Search bar (scrolled state) | 3 | 8% |
|
|
| Contained button (resting elevation) | 2 | 7% |
|
|
| Search bar (resting elevation) | 1 | 5% |
|
|
| Card (resting elevation) | 1 | 5% |
|
|
| Switch | 1 | 5% |
|
|
| Text button | 0 | 0% |
|
|
| Standard side sheet | 0 | 0% |
|
|
|
|
Reference:
|
|
|
|
- [Material Design - UI](https://m2.material.io/design/environment/elevation.html)
|
|
- [Material Design - Dark Theme](https://m2.material.io/design/color/dark-theme.html)
|