Efectos 3D para sugerir "Clickeable" o "Interactivo"

En el mundo real, las cosas que son oprimibles tienden a ser tridimensionales, tales como botones en una radio. Los diseñadores de interfaces de usuario gráficas para computadoras lo usan para crear un atajo GUI realmente conciso para decir "clickeable".

El efecto de botón es una de las convenciones de diseño más fuertes en el diseño interactivo.

Ejemplos de efectos 3D de botones & biseles

El área superior de navegación de esta página web (escala 50%) usa 3D de 3 maneras: para darle riqueza y peso a la línea horizontal, para hacer que los botones de la pagina en la parte  de arriba a la derecha parezcan más clickeables, y para hacer que la navegación de primer nivel parezca más clickeable.

Los efectos 3D en los links son sutiles, pero obviamente dicen "Haga click". Esto es ayudado por el hecho de que la página usa un fondo blanco liso.

En un idioma similar al de hacer clickeables a los botones, aplicamos el concepto de "paneles" de instrumentos en el mundo físico. A menudo, los grupos de controles son puestos juntos en un panel elevado o sumergido (que tiene el beneficio ergonómico de ser localizable sólo por tacto). Además, las pantallas tienen casi siempre un borde biselado.

Los diseñadores de la interface gráfica de usuarios (GUI) han tomado ventaja de ésta convención al crear controles digitales. Los campos de ingreso de datos, las listas drop-down, los controles de selección múltiple y los grupos de radio han usado tradicionalmente efectos biselados o acanalados para distinguirlos del resto de la página.

Las ventanas de aplicaciones tienen bordes biselados, lo que ayuda a fortalecer sus propiedades de ‘contenedoras’.

Ejemplo de estilo de Panel 3D

Ésta tabla usa hojas de estilo en cascada (CSS) para darle a la columna encabezados y una apariencia sólida.

El efecto 3D sutil hace sospechar que hay algo en qué hacer click en los encabezados, que ordena las columnas.

Usando efectos 3D para Diferenciar los objetos de lo que los rodea

Los gráficos 3D crean una sensación de espacio entre los distintos elementos. Eso hace una manera muy efectiva de reforzar las diferencias. Ensombreciendo, incluyendo proyección de sombras, gradientes, y resaltando, es el principio más útil.

" Ok hosting te agradece tu visita a nuestro blog de diseño web y te invitamos a contonuar leyendo nuestros articulos relacionados con web host en mexico y contratacion de dominios , conoce los planes de hosting en windows que ok hosting te ofrece al mejor precio. "

Éste ejemplo muestra cinco técnicas típicas que usan relieves para diferenciar un elemento de lo que lo rodea.

Las proyecciones de sombras y el biselado/realzado son familiares.

Éste ejemplo de biselado muestra que tan real puede ser el efecto 3D alcanzado con cambios de color muy sutiles.

Recuerde que los gradientes son también efectos de luz: sugieren una ilusión de iluminación.

El resaltado hace que un elemento se vea más cercano. Puede ser tan simple como poner un tono más claro cerca de uno más oscuro: éste último pone un gradiente más claro sobre un fondo en relieve.

Ejemplo de diferenciación a través de gráficos 3D

Agregando riqueza a las páginas web con efectos 3D

Los efectos 3D pueden sugerir un ambiente rico, de muchas capas, realista y creíble. La regla de oro es: usar con cuidado Nada funciona si se le aplica a todo – los objetos necesitan algo *contra* lo cual sobresalir.

Use los gráficos 3D consistentemente

La fuente de luz es a menudo crucial. Hay dos cosas para recordar sobre todos los efectos 3D/relieve que son los efectos de luz y las ilusiones.

Para que una ilusión funcione, el usuario necesita creer que lo que están mirando puede ser real. Para crear una ilusión física, necesita un fascimil plausible de realidad, y consistencia en el tratamiento. Por ejemplo, si tiene un elemento que parece estar detrás de un elemento y en frente de otro, el efecto ilusorio puede romperse.

Uno de los errores más comunes en los efectos 3D es usar diferentes fuentes de luz en elementos diferentes. Está bien tener más de una fuente de luz, y muchos diseños hacen eso hoy en día, porque produce efectos más claros y suaves. Sin embargo, el ambiente lumínico general tiene que ser lo suficientemente creíble.

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

<!–
/* Font Def