UI / UE

1 interfaz principios de diseño

1.1 UX y UI base de diseño

Se refiere al diseño de interfaz de usuario de software interactivo, lógica de funcionamiento, la interfaz de atractivo diseño general. En los últimos años, en los que la experiencia del usuario (UX / UE) se convierten gradualmente en el tema del diseño de productos.

La experiencia de usuario (UX / UE) es una experiencia puramente subjetiva acumulado en el usuario de utilizar el producto. Una buena experiencia de usuario es muy importante para los usuarios, en la era de Internet, una experiencia de usuario positiva y eficiente, los usuarios podrán seguir utilizando su producto. Cuando el producto para satisfacer las necesidades de ciertos aspectos del usuario a la gente ayudar a mejorar la calidad de vida, mejorar la eficiencia en el trabajo, mejorar las relaciones, etc., las empresas pueden beneficiarse de ella.

El siguiente diagrama define el nivel abstracto del producto, desde la mayoría de las necesidades de los usuarios "nivel básico" y "sitio diana", con el aumento del nivel de los conceptos abstractos hormigón convertido gradualmente, podemos ver directamente y por último a "diseño visual" nivel.

1.2 sitio Web principios de diseño interno
sitio de intranet es servir a la empresa, la plataforma para los empleados para proporcionar información y servicios, principalmente en la información, la funcionalidad y la velocidad de respuesta a la concentración. Por lo tanto, con respecto al sitio activo de la Internet, combinado con grandes áreas de gráficos, una gran área en blanco de diseño, en la intranet normalmente tener un diseño sencillo y elegante, simple.
1.3 colores
empleados basados en escenarios utilizan el sitio Web interno: por lo general de consulta de información, realizar ciertas tareas (como llenar registro de trabajos, presentar el formulario de solicitud) y así sucesivamente. Los usuarios tienen que registrarse en una gran cantidad de información, o en la realización de su flujo de trabajo en la línea de visión tarda mucho tiempo para permanecer en la pantalla. Por lo tanto, para la elección de los colores, fondos tienden a elegir el sitio durante mucho tiempo mirando a un blanco o gris; área grande de texto elegirá el reconocimiento de colores suaves y fáciles; el texto subrayado con frecuencia usan los colores de la marca corporativa, además de puede mejorar la belleza de esta pantalla también se puede utilizar como funciones auxiliares. En la página de información de productos de grandes empresas en general, a menudo un botón de color es fácil de atraer el foco visual del usuario.
1.4 presenta información y las tareas divididas
en muchas redes por lo general la función, también quisieron poner todas las funciones una vez que dicho al personal, los resultados conducen a que el usuario llegó por primera vez en la cara de una enorme cantidad de información que ha de interfaz. En muchos casos, los empleados sabrán qué hacer o porque algunos reveses en la experiencia y la pérdida de las ganas de continuar hacia abajo. Con el fin de mejorar la primera impresión del producto del personal, se puede tratar de utilizar el concepto de procesamiento progresivo para mostrar la interfaz. Para flujos de trabajo complejos, que tendrá que realizar tareas grandes en partes más pequeñas, cada pequeña tarea de llevar la implementación exitosa del efecto de incentivo será más beneficioso para todo el personal para completar una tarea grande.

1.4.1 espacio y la línea de
información en base a la gran cantidad de información dentro de la red ofrece, primero tiene que simplificar la presentación, y armar una lista de contenidos relevantes organizada. Aumentar el área pequeña en blanco, lo que reduce el uso de líneas puede reducir la carga sobre la visión del usuario.

2 top diez principios de diseño de Nielsen utilizan en el diseño de interacción (tomado de la cuota de colegas de Internet)
Jakob Nielsen (Nielsen Jakob) es una interacción hombre-máquina, el doctor se graduó de la Universidad Técnica de Dinamarca, en Copenhague, que tiene 79 patentes de los EE.UU., la patente principalmente relacionados con hacer que Internet sea más fácil de usar el método. Nelson en junio de 2000, fue nombrado a la escandinava medios interactivos salón de la fama, en abril de 2006, y se incluye en la interacción de la sociedad americana Computer Human-Computer Instituto, se le dio el Premio a la Trayectoria para la práctica de la interacción hombre-máquina. También fue el New York Times llamó "gurú de la usabilidad web" es la revista de Internet llamado "el rey de la facilidad de uso."

Jakob Nielsen (Nielsen Jakob) los principios de diseño de interacción Diez son llamados "heurística", ya que son de amplio regla general, en lugar de directrices de usabilidad específicas. Por lo tanto, no podemos convertirlo como un estándar, sino más bien como una experiencia para aprender, y luego se combina con la realidad diseñado para su uso.

Un principio: Principios estado visible (Visibilidad del estado del sistema)
Segundo principio: el principio de entorno adecuado (Partido entre el sistema y el mundo real)
Tres principios: el principio de facilidad de uso controlable (Control del usuario y la libertad)
Cuatro principios: el principio de consistencia (Consistencia y estándares)
Principio V: principios de prevención de errores (Prevención de errores)
Principio VI: fácil de tomar el principio (Reconocimiento en lugar de recuerdo)
Siete principios: el principio de flexibilidad y eficacia (Flexibilidad y eficiencia de uso)
Principio 8: bella, principios minimalistas (estético y de diseño minimalista)
principios de alta disponibilidad (Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores): 9 Principio
Principio X: principios humanos ayuda (Ayuda y documentación)

2.1 Principio uno: Estado principio visible (Visibilidad del estado del sistema)
el sistema debe permitir a los usuarios siempre saben lo que está sucediendo en la actualidad, es decir, que los usuarios puedan entender rápidamente lo que está en su propio estado, se produjo en el pasado, el objetivo actual, así como en la dirección futura entendido, el enfoque general es dar a la realimentación de usuario adecuada en el momento adecuado, para evitar errores de usuario.

Caso I: por ejemplo, en la actualidad el menú desplegable titulares función de regeneración: página de titulares de actualización mediante el desplegable de forma interactiva de actualización, cuando los usuarios se desplazan hacia abajo, medio de la barra de estado de la página con el área de contenido seré mensaje "Feliz Año Nuevo" cuando me suelto página intermedia se abrirá una "recomendación" dinámica del sistema, aparecido en el medio después de un cargado "motor de recomendación titulares de hoy tiene ocho actualizados" mensajes de texto; esta serie de consejos es lo que llamamos principios dinámico visibles, de la siguiente manera:

Caso II: como a aliviar las preocupaciones en mente las horas extraordinarias y los círculos de cancelación: Cuando el usuario hace clic en el botón de preocupación, centro de la página le pedirá una "preocupación exitosa", desaparecieron después de permanecer 2S, lo que es similar, lo que sugiere que después de la operación es también el principio estado visible en uno, como se muestra a continuación:

2.2 Segundo principio: el principio de entorno adecuado (Partido entre el sistema y el mundo real )
sistema de software debe utilizar un lenguaje familiar, texto, declaración, u otros usuarios están familiarizados con el concepto, más que el idioma del sistema. Su software debe ser lo más cercano al mundo real, información de maquillaje más natural, lógico y más fácil de entender por el usuario.

Caso I: por ejemplo, el diseño de interfaces de software: Ahora el teléfono interfaz de diseño de software de la calculadora, utilice básicamente con nuestro estilo de la realidad calculadora es similar a la siguiente figura de la izquierda se se utiliza nuestra calculadora real, Izquierda dos, tres teléfonos móviles de Apple y siguieron martillo X viene con un software de interfaz de la calculadora, es realmente muy similar, este diseño permite a los usuarios comenzar a trabajar rápidamente, fácil de operar, porque en la vida real, los usuarios ya están familiarizados con el uso de una calculadora esto es los principios entorno apropiado:

Caso II: por ejemplo, Sina Bo Anzhuo de los chinos y las versiones internacionales: versión china y la versión internacional del logotipo y el estilo de la página de microblogging interno, el idioma, la disposición de la estructura permite activar el modo interactivo no son los mismos; teniendo en cuenta los clientes extranjeros utilizan el software el idioma por defecto es el Inglés, por supuesto, también es compatible con una variedad de idiomas, se puede ajustar de acuerdo con los ajustes deseados, utilizar otra interfaz de estilo de diseño en plena conformidad con la versión internacional de las especificaciones de diseño de Google, se trata de los principios ambientales adecuadas, aspecto específico:

2.3 Principio III: principios controlables por el usuario (control de usuario y libertad)
los usuarios a menudo inadvertidamente a ciertas funciones, que debe dar la salida fácil del usuario. En este caso, debemos botón "salida de emergencia" para hacer el punto obvio, pero no un cuadro de diálogo adicional aparece cuando se sale. Muchos usuario envía un mensaje, de repente se dio cuenta de que siempre hay algo lugar equivocado a mí mismo, esto se llama el efecto crítico; por lo que el mejor soporte para la función de deshacer / rehacer.

Caso I: como chats micro-canal recuerdan característica: dos personas conversando en la carta de micro, me envían un mensaje o expresión, de repente me sentí inadecuada, puedo presionar este mensaje o expresión, en el cuadro de selección de eventos seleccionar retirar y luego re-editado y luego enviado a un momento pensó bien y evitar el posible mensaje equivocado a la otra parte o causar angustia a sí mismo, que es principios controlables por el usuario, aspecto específico:

Caso II: por ejemplo, Google álbum Deshacer función después de borrar la imagen: Al utilizar Google álbum, tenemos que hacer fotos de algunas operaciones, como la eliminación de fotografías, cuando se borra una foto en Google álbum cuando estará en la parte inferior un mensaje aparece caja, caja detrás revocados aparecerá el mensaje, y esto se refleja en los principios de, aspecto específico controlable por el usuario:

2.4 Principio IV: el principio de consistencia (Consistencia y estándares)
para el usuario, el mismo texto, estado, los botones deben dar lugar a la misma cosa, para cumplir con las convenciones de plataformas comunes, es decir, la misma terminología, funciones, operaciones consistentes. productos de software incluyen el cumplimiento de las siguientes cinco áreas:
(1) la coherencia estructural: mantener una estructura similar, la nueva estructura permitirá a los usuarios el cambio de pensamiento, el orden de las reglas puede reducir la carga en el pensamiento del usuario;

Caso: por ejemplo, la entrada para cada diseño del módulo de micro-canales: introducción de letras micro para cada módulo tiene un sistema unificado "+ mensajes icono de texto," el estilo arquitectónico que permite a los usuarios a comprender rápidamente el círculo de amigos, barrido barrido, sacudida, vistazo a una mirada, una búsqueda encontró cerca de las botellas de deriva, hombre, compras, juegos y applets y otras características son para lo que, y esto se refleja en la integridad estructural, como se muestra a continuación:

(2) la coherencia Color: los principales productos de color utilizados debe ser uniforme, no para una página en color es diferente;

Caso: como el color de la música Netease nube: el color principal y el color del icono de la interfaz de música Netease nubes son de color rojo, así como algunos de los colores texto de la etiqueta es de color rojo y subrayado, toda la interfaz, además de la información útil de la imagen, pasando por el gris , blanco y rojo para hacer que la interfaz para mantener una buena consistencia, que es el principio de uniformidad de color, como sigue:

(3) Operación de Cumplimiento: todavía tiene tiempo para los usuarios que actualizan producto lo hacen para mantener la conciencia del producto original, para reducir el costo de aprendizaje del usuario;

Caso: por ejemplo, Andrews versión de micro-canales, Alipay APP y las uñas en la esquina superior izquierda de la operación de retorno: se vuelve dentro de tres versión de Android de la aplicación en una operación, se devuelven a través del lado izquierdo de la parte superior del botón, por supuesto, por Andrews la tecla de retorno físico, que se refleja en la consistencia operación, como se muestra a continuación:

(4) La consistencia de retroalimentación: Cuando un Botones de control de usuario o entradas, haga clic en el efecto de retroalimentación debe ser el mismo;

Caso: como abrir QQ móvil Lista versión de Android maneras: su mensaje es una lista de estructura, si se hace clic en esa entrada de línea, el siguiente nivel de interfaz está escapando de derecha a izquierda, haga clic en el botón en la esquina superior izquierda de la devolución deslizarse hacia atrás, de izquierda a derecha, la experiencia bastante consistentes, lo que se refleja en la consistencia de la retroalimentación.

(5) la coherencia del texto, el producto presentado al usuario leer el tamaño de la letra, estilo, color, diseño, y así debe ser coherente;

Caso: por ejemplo, varios fuente de interfaz de clave de micro-canales: sección de entrada de texto de la figura siguiente I utilizó el marco rojo hasta, tres interfaz principal es diferente, sin embargo, el tamaño de fuente, estilo, color, y el diseño son los mismos, por lo que toda la APP visual en apariencia muy confortable, esta es la consistencia de la fuente, por lo que tratamos de utilizar el estilo del texto acordado al hacer el diseño visual.

2.5 Principio V: Error de los principios de prevención (prevención de errores)
que un buen recordatorio pop manera mejor diseño equivocado, es antes de este error para evitarlo. Puede ayudar a los usuarios excluyen algunos casos, propenso a errores, o darle una opción de confirmación antes de que presente el usuario. Aquí tiene que ser rápida, con especial atención a los efectos devastadores de la función de la operación del usuario, para evitar los errores del usuario hizo irreversible.

Caso I: versión para Android de tales conocimientos operación casi entrada: Cuando el know usuario registrado casi, en ausencia de llenar el número de teléfono y la contraseña, el botón de inicio de sesión en la parte inferior aparece en gris no se puede hacer clic, sólo tiene que rellenar en los dos inferiores son completas botón de inicio de sesión se convertirá puede hacer clic, no habría azul, que es para evitar que los usuarios puedan confirmar más errores, sino también un reflejo del principio de detección de errores, como se muestra a continuación:

Caso II: por ejemplo, cuando la versión Andrews amigos micro de la letra del dinámico, Volver a los botones de menús rápidos que aparecen: pop-up enfoque de la caja aumentará la dificultad de la operación irreversible, cuando un usuario envía un medio dinámico del tiempo, debido a mal uso o la otra salida del estado actual de al utilizar bombas ventanas son una buena opción, ya que el usuario editar duro antes de esta operación se pondrá de nuevo para eliminar el contenido, a continuación, enviar sólo quieren empezar de cero, la pérdida de usuarios es relativamente grande, lo que es otro de los principios de prevención de errores una reflexión, como se muestra a continuación:

2.6 Principio VI: Principios fácil de tomar (Reconocimiento en lugar de recuerdo)
para reducir la carga de la memoria de usuario de montaje, botones de opción, y se visualizan. Los usuarios no necesitan recordar información para cada cuadro de diálogo. Guía de software debe ser visible, y se puede ver de nuevo en el momento adecuado.

Caso I: por ejemplo, fotos de Google eliminar en el disco Operación: Después de usar un bote de basura "icono" logotipo función de eliminación similar para los usuarios, hay una cierta carga cognitiva, y haga clic en "Borrar" y las consecuencias para los usuarios usuarios el impacto no está claro, por lo tanto, aparecen ventanas emergentes después de borrar el símbolo es necesario, este estallido borra después declaró el impacto de la eliminación de las opciones siguientes y ayuda a explicar la operación, un cuadro emergente también redujo alrededor memoria, que es fácil de tomar los principios incorporados, como se muestra a continuación:

Caso II: Las nuevas características tales como la actualización de la versión Android iQIYI la bota: Después de haber informado APP, cuando un usuario para activar estas funciones, escriba los siguientes consejos figura aparecerá Campanas, donde estas instrucciones le indican al usuario dónde y función el papel de la función; esta práctica aparecerá en una gran cantidad de APP, que es fácil de tomar una manifestación del principio de la mirada:

2.7 Siete principios: el principio de flexibilidad y eficacia (Flexibilidad y eficiencia de uso)
del coche del acelerador - a menudo invisibles para los usuarios principiantes, sino también para los expertos que pueden rápidamente interactúan con el coche a través de él. un sistema de este tipo puede satisfacer a los usuarios con y sin experiencia simultáneamente. Permite a los usuarios personalizar las funciones más utilizadas.

Caso: por ejemplo, Andrews versión de pago de editar las funciones de aplicación tesoro: la página de inicio de aplicaciones Alipay puede ser personalizado de acuerdo a sus propias preferencias, incluyendo la definición de las aplicaciones más comunes, clasificar, borrar, añadir, y así sucesivamente, de modo que los usuarios pueden personalizar su propia función de sus intereses personales aplicaciones adecuadas de una manera distribuida, que se llama funciones de encargo comúnmente utilizados, que es un reflejo del principio de flexible y eficiente, como se muestra a continuación:

Caso II: versión de Android como módulo de chat QQ expresión comúnmente utilizada: Android versión de la interfaz de chat QQ en las ventanas emergentes se enfrentará a una "expresión común" del módulo, por lo general es el uso personal de la frecuencia o el mayor número de expresiones se clasifican, cuando un usos de usuarios cuando se pueda encontrar rápidamente sus emoticonos favoritos o de uso común, chatear mejorar la eficiencia, buena experiencia, y esto se refleja en el principio de flexible y eficiente, como se muestra a continuación:

2.8 Principio 8: hermoso, principios minimalistas (Estética y diseño minimalista)
el contenido del diálogo debe ser eliminado casi ninguna información o la información irrelevante. Cualquier información irrelevante será importante para que la información original es más difícil de detectar al usuario.

Caso I: teléfono de Apple viene con software (las especificaciones de diseño IOS11): viene con la nueva versión de software del teléfono de Apple pertenecen en el tamaño de la fuente del título, estilo sencillo diseño de la interfaz, y el propio software de música de Apple, la diferencia entre el título y el texto del párrafo es claro, obviamente, un gran título, pero una parte relativamente pequeña del cuerpo, y esto se refleja en el principio simple hermosa, como se muestra a continuación:

Caso II: por ejemplo, la versión Android NetEase nube página de la música y la música QQ jugador: la música y la música QQ interfaz de APP reproductor de música Netease nube, a partir de un diseño visual y funcional por encima de hacer muy bien, bella y sencilla, la función de la prioridad, la experiencia del usuario es bueno, también elegante y simple principio de una reflexión, como se muestra a continuación:

2.9 Principio 9: principios de tolerancia a fallos (Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores)
mensajes de error deben usar un lenguaje sencillo (no utilizar el código), señala lo que está mal, y da sugerencias para resolver. Esa es la manera de proporcionar ayuda correcta y oportuna cuando es un error del usuario error de usuario? Es decir, a los usuarios ayudar a identificar el error, analizar la causa del error y luego ayudar a la espalda del usuario en el camino correcto. Si realmente no puede ayudarle a recuperarse de un error, debemos tratar de ayuda permiten a los usuarios para minimizar la pérdida para el usuario.

Caso I: como NetEase buzón de extremo PC de la interfaz de registro: el usuario cuando el extremo del ordenador 163 correo certificado, no sólo le pedirá un error en el error de entrada, sino también dar el consejo apropiado para ayudar a los usuarios la elección correcta, evitando así usuarios aparecen errores más grandes y mejorar la eficiencia de la inscripción, que es una muy buena experiencia del usuario, sino también un reflejo del principio de tolerancia a fallos, como se muestra a continuación:

Caso II: por ejemplo, error de registro página de Twitter: Los usuarios registrados de Twitter cuenta, el primer paso para introducir el nombre y número de teléfono, cuando el usuario entra en la hora correcta, el círculo cuadro de entrada detrás de la marca verde le pedirá al usuario que introduzca la correcta ya que puede entrar en el siguiente paso, y cuando el usuario entra en el momento equivocado, el cuadro de entrada a su vez, aparece el mensaje de color rojo y de un error en rojo en la parte inferior, de modo que los usuarios puedan conocer con claridad los errores de entrada del usuario y del mal, para que los usuarios sé cómo modificar, y esto es un reflejo del principio de tolerancia a fallos, como se muestra a continuación:

2.10 Principio X: principios humanos ayuda (Ayuda y documentación)
incluso si el sistema no se aplica la documentación de ayuda es la mejor, pero también debe proporcionar un documento de ayuda. Cualquier información de ayuda debe ser capaz de buscar fácilmente, la tarea del usuario en el núcleo, los pasos adecuados incluidos, pero no demasiado texto.

Caso I: como ayudar entrada Taobao APP y APP sé página casi entrada: Hay característica más importante en la entrada de la necesidad de proporcionar ayuda de entrada adecuada, para resolver los problemas encontrados por los usuarios durante la función de comentarios o preguntas entrada de la operación, no lo hago que los usuarios sepan qué hacer cuando las cosas van mal, no saben cómo hacerlo aspecto específico:

Caso II: por ejemplo, algunos de uso común en gran mac de software: software de herramienta de prototipado Axure RP 8, el software de edición de imagen Photshop CC y el navegador Safari en Mac, en la barra de estado superior tiene una entrada de "ayuda", pero también refleja la necesidad de que la documentación de ayuda, por lo que no importa qué tipo de productos debería ayudar a proporcionar una entrada de usuario, para resolver los problemas encontrados en el proceso de las operaciones del usuario, como se muestra a continuación:

3 elementos de interfaz de usuario (El siguiente es un proyecto real como un ejemplo)
placa 3.1 diseño
3.1.1 Home

3.1.2 página de gestión de registros

3.1.3 Navegación con la página secundaria (por ejemplo, la página de registro de casos)

3.2 de texto
Texto del título (familia de fuentes: Microsoft elegante negro, tamaño de fuente: 28px, color: # EE7600)
el texto del título de la bandera (familia de fuentes: Microsoft elegante negro, tamaño de la fuente: 20 píxeles, color: #FFFFFF)
el texto del título de texto (familia de fuentes : Microsoft elegante negro, tamaño de fuente: 18px, color: # 333333)
# 333333): el texto del menú (familia de fuentes: Microsoft negro elegante, tamaño de la fuente: 16px, el color
cuando el color de fondo es de color claro, el texto del cuerpo (familia de fuentes: Microsoft Ya negro, tamaño de fuente: 13px, color: # 333333)
color de fondo cuando un oscuro, el cuerpo del texto (tipo de letra familia: Microsoft elegante negro, tamaño de fuente: 13px, color: #FFFFFF)
de texto especial de enlace (la fuente de la familia: Microsoft elegante negro, tamaño de la fuente: 13px, color: # EE7600 :)
texto explicativo (familia de fuentes: Microsoft elegante negro, tamaño de fuente: 13px, color: # 9C9C9A)
el texto de copyright (familia de fuentes: Microsoft elegante negro, tamaño de fuente: 13px, color: # 6b6b6b )
texto del enlace efecto Hover
cuando el color de fondo es de color claro, el texto del cuerpo (familia de fuentes: Microsoft elegante negro, tamaño de fuente: 13px, color: # 333333, en texto decoration: underline)
el color de fondo cuando un oscuro, el texto del cuerpo (familia de fuentes : Microsoft elegante negro, tamaño de fuente: 13px, color: #FFF FFF, decoración en texto: subrayado)
texto del enlace especial de la libración (familia de fuentes: Microsoft elegante negro, tamaño de fuente: 13px, color: # EE7600, en texto decoration: underline)