UNIVERSIDAD NACIONAL MAYOR DE SAN MARCOSFACULTAD DE INGENIERIA DE SISTEMAS E INFORMÁTICA 2012-I

DISEÑO DE INTERFACES DE USUARIOSProfesor: Diaz Muñante Jorge

Trabajo # 2ELEMENTOS GRÁFICOS Y SONIDO

EQUIPO

Código Apellidos y Nombres05200095 PARI ALEGRE, JULIO CESAR

1

1. Elementos gráficos1.1. Definición

Los elementos gráficos muestran las relaciones, la jerarquía y el énfasis visual. Estos incluyen fondos, banners, efecto de vidrio, agregadores, separadores y sombras.

1.2. Patrones de usoLos elementos gráficos tienen varios patrones de uso:

Ilustraciones gráficasSe utiliza para comunicar una idea visualmente.

Ilustraciones gráficas son similares a los iconos, excepto que pueden ser de cualquier tamaño y por lo general no son interactivos.

En este ejemplo, una ilustración gráfica se utiliza para indicar la naturaleza de una función.

FondosSe utiliza para enfatizar o destacar-de diferentes tipos de contenido.

Los fondos pueden utilizarse para reforzar el contenido importante.

2

En este ejemplo, un fondo se utiliza para enfatizar una tarea importante.Fondos también se puede utilizar para acentuar el contenido secundario.

En este ejemplo, las tareas secundarias no se destacan por ubicarlos en un panel de tareas.

Pancartas Se utiliza para indicar el estado de importante.

En contraste con los fondos, banners destacar sobre todo una sola cadena de texto.

3

En este ejemplo, una bandera se usa para indicar que la configuración de la página es controlada por la directiva de grupo.

VidrioUtilizar estratégicamente para reducir el peso visual de una ventana.

El vidrio puede reducir el peso de una superficie, centrándose en el contenido en lugar de la propia ventana.

En este ejemplo, el vidrio se centra la atención del usuario sobre el contenido en lugar de los controles.

Los agregadoresSe utilizan para crear una relación visual entre los controles fuertemente relacionados.

En este ejemplo, un fondo agregador se utiliza para enfatizar la relación entre los botones Atrás y Adelante en el Explorador.

4

En este ejemplo, un agregador de frontera se utiliza para enfatizar la relación entre los controles y hacerlos sentir como un único control en lugar de ocho.

SeparadoresSe utiliza para separar los controles débilmente relacionadas o no relacionadas.

Los separadores pueden ser interactivos o no interactivos. Separadores entre los contenidos interactivos de tamaño variable que se conoce como divisores.

En este ejemplo, un separador interactivo se utiliza para el contenido de tamaño variable.

En este ejemplo, el separador no es interactivo.

Sombrasutiliza para hacer que los contenidos se destacan visualmente en contra de su fondo.

En este ejemplo, las sombras que la obra de arte se destacan contra el fondo.

Asasutiliza para indicar que un objeto se puede mover o cambiar de tamaño.

Las asas son siempre interactivas y su comportamiento es sugerido por el puntero del ratón en vuelo estacionario.

5

En estos ejemplos, las manijas indican que un objeto puede cambiar de tamaño.

1.3. Directrices

1.3.1. Los diseños gráficos Los gráficos son más eficaces cuando refuerzan una idea única y simple. Gráficos complejos que requieren

pensar para interpretar no funcionan bien. Jeroglíficos es mejor dejar de pinturas rupestres.Incorrecto:

En este ejemplo, un gráfico complejo de Windows XP ineficazmente intenta explicar una decisión de confianza complejo.

No utilice las flechas, galones, imágenes de botón, u otros affordances asociados con controles interactivos. Si lo hace, invita a los usuarios interactuar con los gráficos.

Evite franjas de rojo puro, amarillo y verde en sus diseños. Para evitar confusiones, reserva de estos colores para comunicar el estado. Si tiene que utilizar estos colores para algo más que el estado, utilice tonos apagados en lugar de colores puros.

Utilice diseños culturalmente neutros. Lo que puede tener un significado determinado en un país, región o cultura no puede tener el mismo significado que en otro.

6

Evite el uso de las personas, los rostros, el género, o partes del cuerpo, así como los símbolos religiosos, políticos y nacionales. Estas imágenes no se traducen fácilmente o podría ser ofensivo.

Cuando tenga que representar a las personas o los usuarios, que representan de forma genérica, evitar representaciones realistas.

1.3.2. Fondos y Banners

Para enfatizar el contenido, utilice el texto oscuro sobre un fondo claro. Negro texto sobre un fondo gris claro o amarillo funciona bien.

En este ejemplo, el enlace recibe la atención del usuario porque está en un fondo amarillo.

Para restar importancia a contenido, utilice texto claro sobre un fondo oscuro. texto blanco sobre un fondo gris oscuro o azul funciona muy bien.

En este ejemplo, el fondo oscuro resta importancia del contenido.

Si se utiliza un gradiente, asegúrese de que el color del texto tiene un buen contraste en todo el gradiente. Utilice siempre un icono de 16x16 píxeles para llamar la atención a la bandera. Banners son demasiado

fácil pasar por alto lo contrario. Para obtener más instrucciones y ejemplos, vea los iconos estándar . Utilice fondos y pancartas con precaución. Si bien la intención del fondo o banner puede ser hacer hincapié

en el contenido, muy a menudo los resultados son todo lo contrario-un fenómeno conocido como "ceguera de la bandera."

1.3.3. Vidrio(Efecto Glass)

Considere el uso de vidrio de manera estratégica en las regiones pequeñas de tocar el marco de la ventana sin texto. Si lo hace, puede dar a un programa más simple, más ligero, aspecto más coherente dando a la región parecen ser parte de la estructura.

No utilice vidrio en situaciones en que un fondo de ventana normal sería más atractivo o más fácil de usar.

7

1.3.4. Separadores

Use líneas verticales y horizontales para los separadores. Asegúrese de tener suficiente espacio entre los separadores y el contenido que se separaron.

Para separadores entre el contenido importante (divisores), mostrar el puntero de cambio de tamaño en vuelo estacionario.

En estos ejemplos, los punteros de cambio de tamaño se muestran en vuelo estacionario.

1.3.5. Sombras

Utilice sólo para hacer el contenido más importante de su programa o los objetos que se arrastran destaquen visualmente en contra de su fondo. Considere la posibilidad de sombras que el desorden visual en otras circunstancias.

1.3.6. Soporte alto DPI

Apoyo a 96 y 120 puntos por pulgada (ppp modos de vídeo). Detectar el modo de dpi en el arranque y controlar los eventos de cambio dpi. Windows está optimizado para 96 y 120 dpi, y utiliza 96 ppp por defecto.

Prefiere ofrecer mapas de bits independientes prestados específicamente para 96 y dpi sobre los gráficos de escala 120. Por lo menos ofrecer 96 y 120 dpi para las versiones más importantes, mapas de bits visibles, y, o bien a otros centros o la balanza. Estas aplicaciones se consideran "de alto ppp consciente" y proporcionar una mejor experiencia visual global que los programas que se escalan automáticamente por Windows.

Desarrolladores: Puede definir un programa de alta dpi conscientes (y evitar el escalado automático) activando la opción consciente de dpi en el manifiesto del programa, o llamando a la API SetProcessDPIAware () durante el inicio del programa. Puede utilizar las macros para simplificar la selección de los gráficos de la derecha. Para mapas de bits para Win32, puede utilizar SS_CENTERIMAGE en el centro o SS_REALSIZECONTROL a escala.

Revise su programa, tanto en 96 y 120 dpi para: Gráficos que son demasiado pequeños o demasiado grandes. Gráficos que se recorta, se superponen, o de lo contrario no encajar correctamente. Los gráficos que no están bien estirado ("pixelada"). El texto que se recorta o no encajar en los fondos gráficos.

8

2. SonidoSonido es el elemento de audio de la experiencia del usuario. Cuando se usa apropiadamente, el sonido puede ser una forma eficaz de comunicación que se establece una relación no verbal y emocional, incluso con sus usuarios. Los sonidos pueden ser utilizados solos o como un suplemento a visual interfaz de usuario. Por ejemplo, agregar un efecto de sonido a una notificación aumenta la probabilidad de que se notará, sobre todo si el usuario no está mirando la pantalla cuando ocurre un evento.

En la ficha Sonidos del elemento del panel de control de sonido, los usuarios pueden realizar cambios en sus sonidos del sistema.

En este artículo se refiere al uso de los sonidos dentro de un programa como respuesta a eventos y acciones de los usuarios, y la integración de control de sonido de un programa con Windows. No cubre el uso de la música o el habla.

9

Para decidir si usted debe usar el sonido, considere estas preguntas:

¿Hay un beneficio claro para el usuario usando el sonido? Debido a los inconvenientes de la utilización de sonido puede fácilmente superan los beneficios, utilizan el sonido sólo cuando hay una clara ventaja.

Es el uso de sonido apropiado? ¿El uso del sonido llamar la atención sobre las cosas que son dignas de atención? ¿Los usuarios se pierda el sonido si se tratara de ausente? Centrarse en los sonidos que mantienen informados a los usuarios, es probable que cambien su comportamiento, o proporcionar información útil.

¿El uso del sonido molesto? ¿Hay frecuentes, sonidos fuertes, discordantes? ¿Están los usuarios puede reducir el volumen del sistema o el volumen de su programa, como resultado de su uso del sonido?

¿Está utilizando el sonido como una forma primaria de comunicación? En muchos casos, como para los usuarios que tienen algún nivel de pérdida de la audición, el sonido no debe ser utilizado como el principal medio de comunicación. El sonido es más eficaz como complemento de otros medios de comunicación (como texto o imágenes).

Son los usuarios objetivo principales profesionales de TI? de sonido suele ser ineficaz para las tareas dirigidas a los profesionales de TI debido a que muchos de sus tareas se ejecutan sin supervisión. Además, el sonido no hace escala para tema € "imaginar corriendo cientos de tareas a la vez y conseguir sonidos cuando se complete o no.

2.1. Los conceptos de diseño

Normalmente el sonido alcanza cualquiera o todos los siguientes propósitos:

Notificación. El sonido puede ser asociado con eventos específicos. Por ejemplo, un "correo nuevo" sonido indica a los usuarios cuando el correo llega sin interrumpir su tarea actual.

Comentarios. El sonido puede proporcionar información para las acciones específicas de los usuarios. Por ejemplo, un sutil sonido que se reproduce cuando se suelta el control deslizante en el control de volumen proporciona información acerca del nivel de la configuración actual.

Branding. El sonido puede ser asociado con un contenido específico a la marca de su producto, aplicación o servicio. Windows ® utiliza el sonido de esta manera para el arranque del sistema operativo.

Entretenimiento. El sonido se utiliza comúnmente para mejorar los productos de entretenimiento y para hacer un producto más atractivo. Por ejemplo, la mayoría de los juegos, aplicaciones de entrenamiento, y productos de consumo utilizan el sonido para entretener a los usuarios y mejorar su experiencia.

Ciertos sonidos pueden cumplir varios de estos efectos a la vez. El sonido de inicio de Windows, por ejemplo, indica que el proceso de inicio se ha completado y el escritorio está listo para su uso. También proporciona una forma poderosa de la marca del producto e incluso por un momento se dedica usuarios.Los sonidos que cumplen ninguno de estos efectos probablemente se deben eliminar.

10

El uso inapropiado de sonido

A pesar de las ventajas del sonido, el uso adecuado de sonido requiere un control significativo a hacer otra cosa puede hacer un programa molesto y perturbador. Los usuarios apagar su sonido por completo si llegan a ser molesto por las frecuentes, repetitivas, discordantes, alterando, sonidos mal diseñados, en parte, esto se debe a que por su propia naturaleza, el sonido requiere una atención y es difícil de ignorar. Para consejos sobre cómo encontrar un equilibrio razonable, ver las directrices de diseño de sonido.

Debido a los inconvenientes de la utilización de sonido puede fácilmente superan los beneficios, utilizan el sonido sólo cuando hay una clara ventaja. En caso de duda, no utilizar el sonido.

Asegúrese de sonido adicionalIncluso si el sonido se utiliza apropiadamente, hay muchas situaciones donde el sonido puede no ser efectivo para todos los usuarios:

Algunos usuarios pueden trabajar en un ambiente ruidoso donde los sonidos no se oye. Algunos usuarios pueden trabajar en un entorno tranquilo que requiere el sonido se apaga o se ajusta a un

volumen bajo. Algunos usuarios pueden haber problemas de audición o pérdida. El equipo no tenga altavoces.

Por estas razones, sonido que se utilizará para las notificaciones y la información nunca debe ser el único método de comunicación, sino que deben complementar las señales visuales o textuales.

Características deseables de sonidoEn general, los sonidos deben ser:

A mediados de alta frecuencia (600 hercios [Hz] a 2 kilohertz [kHz]). corto (menos de un segundo). suave o moderada en volumen. significativa. agradable no, alarmante o desagradable. no-verbal. no repetitiva.

Con el sonido, menos es más. El efecto de sonido ideal es el que los usuarios apenas notan, pero que echaría de menos si estaban ausentes.

Un error común es que los sonidos para eventos críticos que ser fuerte y desagradable para llamar la atención del usuario. Esto no es cierto, porque el sonido es realmente la intención de ser un medio de comunicación complementarios. En el caso de un mensaje de error crítico, su presentación (tal vez en un cuadro de diálogo modal), su icono (un icono de error), y su texto y el tono se combinan para comunicar la naturaleza del error. Un sonido de error efectivo puede ser un poco más alto que el típico sonido de Windows, pero no tiene que ser significativamente más alto.

11

Características de los sonidos de Windows

Más allá de esta convocatoria general de minimalismo, la estética de sonido de Windows utiliza tonos claros, puros y sonidos cristalinos y aireado, con un suave fade-in y fade out ("suaves bordes") para evitar bruscas, efectos irritantes, de percusión. Están diseñados para sentir sutil, suave, y en consonancia. Los sonidos de Windows eco uso, reverb, y ecualización para lograr una sensación natural, ambiente.El esquema de sonido por defecto de Windows no se suelen utilizar los sonidos cotidianos instrumentales o reconocibles que son demasiado específicos o musical. Ejemplos de sonidos que evita son los instrumentos musicales como pianos o instrumentos de percusión, sonidos de animales, ruidos ambientales, el habla, las voces, como la película de efectos de sonido u otros sonidos de los seres humanos. Además, los sonidos de Windows no están diseñados para ser percibidos como la música (es decir, como largos y múltiples melodías de notas). Esto hace que los sonidos de Windows funcionalmente distinto de otros tipos de sonidos.Debido a que los sonidos de Windows fueron diseñadas profesionalmente para tener las características deseables y atraer a un público amplio, considerar el uso de estas funciones integradas de los sonidos de Windows siempre que sea apropiado.

Diseñar tus propios sonidos

Si usted tiene que crear sus propios sonidos, los diseñamos para tener las características anteriormente descritas. Luchar para que se complementen sus tareas asociadas o eventos.Entiende que la creación de sonidos originales es difícil de hacer bien, sobre todo para los sonidos destinados a un público amplio. El sonido puede ser un elemento de diseño de polarización. Por cada usuario que quiere un sonido, habrá muchos que no les gusta.

Diseño de los sonidos de su programa como un grupo para sentir que son variaciones sobre un tema relacionados. La experiencia de su programa auditivo debe ser coordinada con su experiencia visual. Asimismo, el "tono" de los sonidos debe ser coordinado con el tono del texto. Considere cómo el texto con un tono agradable, natural puede verse afectada cuando se acompaña de sonidos ásperos, alarmante.

Si lo hacen sólo cuatro cosas...

1. El uso del sonido con moderación-asegúrese de que hay un claro beneficio global del usuario. En caso de duda, no utilizar el sonido.

2. Utilice el built-in de Windows suena cuando sea apropiado.

3. Si se diseña tus propios sonidos, asegúrese de que tengan las características de sonido deseables y como una sensación de conjunto como variaciones sobre un tema.

4. No dé por sentado que los sonidos tienen que ser fuerte y desagradable para llamar la atención del usuario.

12

2.2. Patrones de uso

Los sonidos tienen diferentes patrones de uso:

La finalización de AcciónMusicalmente notifica a los usuarios cuando una acción de larga duración, iniciado por el usuario se realiza correctamente.

En este ejemplo, el cuadro de diálogo reproduce un sonido de notificar a los usuarios que la descarga se haya completado.

Falta de acciónMusicalmente notifica a los usuarios cuando una de larga duración, iniciado por el usuario no la acción.

En este ejemplo, Windows emite un sonido para notificar a los usuarios que la operación de copia de seguridad ha fallado.

Importante evento del sistemaMusicalmente alerta a los usuarios de los eventos importantes del sistema o el estado que requieren atención inmediata.

En este ejemplo, los usuarios son alertados de que la batería baja requiere atención inmediata.

FYIMusicalmente notifica a los usuarios de la potencialmente útil, la información pertinente.

Debido a esta información por lo general no requieren atención inmediata, un sonido para tu información proporciona feedback sutil sin romper el flujo de los usuarios.

13

En este ejemplo, se reproduzca un sonido cuando un contacto en los signos de un servicio de mensajería instantánea.

Efecto de sonidoMusicalmente ofrece información a las interacciones del usuario.

Permite obtener información de sonido en el mundo real o estilo que es adecuado para la interacción. Los efectos de sonido a menudo suenan como si el usuario está manipulando un mundo real, un objeto físico.Algunas veces conocido como Foley.

En este ejemplo, el minimizar la ventana de los sonidos de efectos de sonido como un objeto del mundo real se ha reducido en tamaño.

Branding suenaun sonido de siempre para mejorar la experiencia del usuario, aunque el impacto emocional y, como efecto secundario, promover la marca del producto.

Sonidos de marca son mejores cuando se sincroniza con los eventos visuales, especialmente las transiciones de interfaz de usuario, tales como la visualización de una ventana del programa. Las marcas de un verdadero sonido indicar el origen de las mercancías, de forma similar a una palabra de marca registrada o logotipo, y son relativamente poco comunes.

14

En este ejemplo, el arranque de Windows es una experiencia de transición de marca.

2.3. Guías2.3.1. De uso

El uso del sonido con moderación â € "asegurarse de que hay un claro beneficio global del usuario. Centrarse en los sonidos que mantienen informados a los usuarios, es probable que cambien su comportamiento, o proporcionar información útil. En caso de duda, no utilizar el sonido. Seleccione el sonido y sus características basadas en la forma en que está siendo utilizado. Para una descripción de cada patrón de uso, véase la tabla en la sección anterior. Para las notificaciones y comentarios, no utilizan el sonido como el único método de comunicación. Por el contrario, utilizan el sonido como un método complementario para reforzar las señales visuales o textuales. Así, asegura que los usuarios pueden ver la información si no puede escuchar el sonido. No reproducir sonidos fuertes o duras con frecuencia. Si lo hace, es innecesario y resulta en una experiencia de usuario pobre. Cuanto más a menudo se escucha un sonido, el menos molesto que debe ser. Los sonidos no tienen que ser fuertes o duras para llamar la atención. No hace ningún sonido. pitido no es apropiado para los programas modernos. Pitidos no puede tener un significado específico que se les asignen, y los usuarios no los puede controlar. Excepción: Las funciones críticas del sistema sonará un pitido para alertar a los usuarios de las situaciones que deben atender de inmediato, como la energía de la batería demasiado baja.

2.3.2. De reproducción

No repita un sonido más de dos veces consecutivas. Para una secuencia consecutiva de los eventos de sonido relacionados, reproducir un sonido sólo en el primer evento. Evite el uso de múltiples sonidos, ya que pueden colisionar entre sí o no resultar en una experiencia de usuario agradable.

15

2.3.3. De sonido de selección

Elija los sonidos agradables. No utilice sonidos desagradables, alarmantes, tales como zumbidos, chocando y rompiendo. Use sonidos que son cortas (menos de un segundo). Use sonidos que son más o menos el mismo volumen que el típico sonido de Windows. Los usuarios no les gusta tener que bajar el volumen cuando se inicia un ordenador o un programa, especialmente en entornos públicos, tales como reuniones y presentaciones. Los Microsoft ® Windows ® archivos de sonido se encuentran en la carpeta de medios de comunicación dentro de la carpeta de Windows. No elija los sonidos que requieren de localización. Esto se puede conseguir mediante el uso de sonidos que no usan el habla o tienen significados culturalmente dependientes o connotaciones.

2.3.4. Del sistema de Windows suena

Utilice el sistema integrado de sonidos de Windows siempre que sea apropiado. Optar por utilizar los sonidos del sistema en función de su significado asociado, no sólo en el sonido en sí. Los sonidos del sistema se debe utilizar de forma coherente.

2.3.5. Del diseño del sonido

Al crear sus propios sonidos:

Crear sonidos con las características deseables de sonido . Componer sonidos con la mayoría de gama media a alta frecuencia (600 Hz a 2 kHz). No utilice las frecuencias bajas, ya que viajar más lejos, son más difíciles de localizar, y puede ser alarmante. Establecer la amplitud relativa de los sonidos normales a nivel del típico sonido de Windows. Los sonidos de Windows han sido debidamente nivelado para el hogar y los ambientes de trabajo. Uso de diferentes niveles de los sonidos obligará a los usuarios para realizar los ajustes de volumen. Establecer los sonidos importantes para ser un poco más fuerte. Estos sonidos incluyen terminaciones de acción, las fallas de acción, y los eventos importantes del sistema. Establecer frecuente sonidos a ser ligeramente más suave. Estos incluyen FYI, sonidos de marca, y efectos de sonido. Elija los sonidos en consonancia con el significado de los sonidos de Windows. Para crear una versión personalizada de un sonido de Windows, preservar el mismo paso y descanso, pero cambiar la orquestación o el timbre. No asigne valores diferentes a los sonidos con los campos similares y los intervalos de los sonidos de Windows. Diseño de los sonidos de su programa de sentir que están relacionados con las variaciones sobre un mismo tema. La experiencia de su programa auditivo debe ser coordinado con su experiencia visual. Transiciones de diseño de escena y transiciones de audio juntos. Por ejemplo, si una escena se desvanece poco a poco, cualquier sonido que se desvanecen poco a poco también. No arruine sin costura transiciones visuales por tener transiciones abruptas de sonido. Los sonidos deben estar en formato de archivo. Wav. El de 16 bits, 44,1 kHz estéreo sin comprimir modulación de código de pulso (PCM) se recomienda. Si el tamaño del archivo es importante, utilice formatos comprimidos o monoaural (mono), pero tenga en cuenta que hay una pérdida de calidad fácilmente discernibles que podrían reflejarse negativamente en su aplicación.

16

2.3.6. Mezcla

¿No tiene el volumen o los controles de silencio en su programa. En su lugar, permitir a los usuarios controlar los ajustes de volumen relativos entre las aplicaciones con el mezclador de volumen de Windows. Si el programa tiene un control de volumen, habrá varios lugares donde los usuarios ajustar su configuración, que puede llevar a confusión.

El mezclador de volumen de Windows permite a los usuarios controlar el ajuste de volumen principal, así como el volumen de cada programa que se está reproduciendo audio.

Excepción: Si el propósito principal si su programa es la reproducción de audio o de vídeo o la creación, puede ser útil disponer de un control de volumen en el programa. Utilice un control deslizante para este fin y proporcionar una respuesta inmediata cuando el usuario cambia el volumen.

17

2.3.7. La integración de Windows

Registrar sonidos de su programa en el registro de sonidos de Windows. Si lo hace, permite que el mezclador de volumen de Windows para agregar un control deslizante para su programa. Registrarse eventos personalizados de su programa de sonido. Si lo hace, permite que el control de sonido de Windows elemento del panel para mostrarlos. Crea la siguiente clave para cada evento de sonido personalizado: HKEY_CURRENT_USER | AppEvents | Etiquetas Eventos | EventName = Nombre del evento . No cablear los sonidos para eventos de sonido de su programa. En su lugar, especifique los sonidos que se reproducirán con las entradas del registro. Si lo hace, permite a los usuarios personalizar los eventos de sonido a través del elemento del panel de control de sonido. Excepción: Usted puede elegir a los sonidos de cableados utilizados para la marca. No proporcionan una forma para que los usuarios configurar los sonidos dentro de las opciones de su programa. Por el contrario, usar el control de Sonidos de Windows elemento del panel para este propósito. Considere la posibilidad de no asignar sonidos a los eventos que ocurren con frecuencia por defecto. No exigir a los usuarios configurar la manera de salir de una experiencia inicial molesto.

18