Este artículo proviene de un motor de traducción automática.

Posibilidades de uso en práctica

El Tao del diseño de pantallas

Dr. Carlos Kreitzberg y Ambrose Little

La vista Cognoscitivo

Figura 1 El símbolo de Yin Yang

Como desarrollador, profundamente son immersed en el modelo de implementación, pero cuando turno diseñar la IU, necesitará desplazar su perspectiva para ver el software de la forma en que el usuario hace. Que no ’s fácil de hacer porque ’s difícil omitir lo conoce y adoptar vista otra persona ’s. Muchas de las técnicas de diseño analizamos en columnas anteriores, como la creación de roles para representar miembros de audiencia típico y escenarios de tarea construir comprender cómo funcionan los usuarios, están diseñadas para ayudarle a realizar ese cambio mental. Necesita un conocimiento claro de la audiencia, las tareas que necesitan para llevar a cabo y cómo que piensan sobre su actividad. También ’s importante para que reconozca el nivel de conocimientos técnicos que puede esperar de la audiencia. Con este conocimiento puede desarrollar un modelo de manifiesto que se ajusta.

Crear primero el marco de trabajo

Anteriormente se han escrito sobre la distinción entre el diseño de alto nivel y detallada. Diseño de la pantalla siempre debe empezar con el diseño de un marco de alto nivel. Una vez ese marco de trabajo puede utilizar como base para las pantallas detalladas. Dos elementos claves del marco de trabajo son los siguientes:

• Esquema de exploración que permite al usuario mover fácilmente de pantalla en pantalla de acuerdo con el flujo de tareas. Hemos tratado la exploración en nuestra columna marzo de 2009 (msdn.microsoft.com/en-us/magazine/dd458810.aspx).
• Elementos de persistentes, como encabezados, que sirven para delimitar el usuario y proporcionar pistas sobre donde el usuario es.

En otras palabras, inicie con un enfoque de arriba abajo a través del cual definir los elementos que son comunes a todas las pantallas y cree un modelo claro de cómo el usuario obtiene. 

Con el marco de trabajo en su lugar, desarrollar las pantallas más importantes, refinar el marco de trabajo si es necesario. Finalmente, desarrolle las pantallas restantes y cuadros de diálogo.

Crear plantillas de trama

El marco, se podría implementar como páginas principales, debe indicar las áreas principales para las pantallas. Parte de la información en estas áreas será el mismo en cada pantalla (por ejemplo, el nombre del producto, logotipo y el menú principal). Alguna información cambiará de pantalla en pantalla pero debe aparecer en el mismo lugar en cada pantalla (por ejemplo, el título de la pantalla y la exploración). Finalmente, la información será diferente de la pantalla a pantalla (por ejemplo, los controles que específica de la pantalla). Todos estos elementos, sin embargo, deben trabajar conjuntamente para crear un diseño coherente y uniforme.

Empiece por dividir la pantalla en las áreas según la función. Por ejemplo, examine la trama en ka figura 2, que sirve para asignar las áreas de la pantalla básica. Tenga en cuenta cómo se tiene etiquetada cada área de esta trama para que el usuario entienda su propósito.

Figura 2 Definir las áreas de la pantalla

El diseño general es fácil para el usuario organizar perceptually. Cada una de las fichas principales podría tener un diseño distinto, pero siempre que el diseño básico doesn’t turno, el diseño aparecerán coherente al usuario. Para ilustrarlo, mire la figura 3, muestra otra plantilla que se podría utilizar para una ficha diferente en la aplicación. Porque los elementos básicos tramas se mantienen constantes, la facilidad de uso se conserva aunque los elementos clave del diseño sean diferentes.

Figura 3 Una plantilla compatible

Por supuesto, los patrones de diseño que seleccione para cada pantalla deben ser coherentes. Por ejemplo, si dos fichas tienen una función de búsqueda, debe presentan dicha característica de la misma manera.

Todos excepto los sistemas más sencillas que tratar con cuadros de diálogo y otras pantallas secundarias. En el pasado, debido a las limitaciones de exploradores, de muchos de los sistemas basados en Web evitan ventanas secundarias y capas. Una alternativa común era enviar al usuario a otra página y el usuario tiene que averiguar cómo volver. A menudo, Esto producía confusión.

Con plataformas como Microsoft .NET Framework, sus lenguajes de programación asociados y AJAX, la creación de elementos emergentes y otras formas elegante para administrar detalles es mucho más realista. Cuando está creando un marco de trabajo, piense en cómo controlará cuadros de diálogo y detalles. Por ejemplo, las plantillas en las figuras 2 y 3 sería funcionan mejor con una ventana secundaria emergente modal, como se muestra en la figura 4.

Durante la creación del marco de trabajo, debería también pensar soporte de usuario y ayuda. Ayuda a menudo es posteriori, creado como una “ rayo en ” pero funciona mucho mejor cuando está integrado en las pantallas. Tenga en cuenta que en la ventana emergente que se muestra en la figura 4 que se reserva un espacio para texto explicativo que puede servir como un mensaje para orientar el usuario. El vínculo más permite al usuario tener acceso a información adicional. (Por supuesto, deberá diseñar una plantilla para mostrar cómo se procesarán dicho vínculo.)

Figura 4 Ventanas emergentes

Para ayudar al usuario rellenar el formulario, es posible que también desea crear una información sobre herramientas para permitir al usuario obtener información adicional sobre campos específicos. La figura 5 muestra un diseño de ejemplo para este.

Figura 5 Información sobre herramientas

Al pensar en diseño de soporte de usuario al principio, tomar un gran paso hacia asegurarse de que realmente se crearán y será coherente y útil. Tenga en cuenta que la información sobre herramientas, como el símbolo del sistema, un vínculo para permitir al usuario obtener más información. Aunque esto no es una práctica común (y no puede implementarse en algunos controles de información sobre herramientas), es una técnica eficaz porque permite a los usuarios profundizar más profundo manteniéndose dentro del contexto de su actividad actual. Quizás desee crear una plantilla para otro nivel de elemento emergente para admitir estos vínculos para evitar la exploración adicional.

En mi experiencia, unas pocas plantillas básicas con quizás dos niveles de cuadros de diálogo, pueden alojar la interfaz de usuario para los sistemas incluso muy grandes. Y especificando el marco de antemano, crear andamiaje para diseñar pantallas específicas.

Crear a una guía de estilo

Al crear el marco de trabajo, documento en una guía de estilo. Esto le avisará de las opciones ha realizado y permitir también que otros usuarios que necesitan desarrollar pantallas siguen siendo coherentes con el diseño. Una guía de estilo no es necesario que decorativo. Normalmente, captura las plantillas de pantalla, realizar anotaciones en ellos y pegar las pantallas anotadas en Word, Visio o un sitio Web. La figura 6 es un ejemplo de cómo podría anotar la trama emergente.

Figura 6 Tramas anotadas para la Guía de estilo

Es importante especificar fuentes, tamaños de fuente y colores de modo que pueden ser coherentes de pantalla en pantalla. Siempre que sea posible, utilice estilos en vez de valores codificados para fuentes y colores para que usted (o un artista gráfico) pueda realizar cambios en el diseño visual y mantener la coherencia en toda la aplicación.

La Guía de estilo también puede especificar la terminología que se utilizará en la interfaz de usuario. Es importante utilizar términos coherente y para seleccionar las condiciones que tenga sentido para la audiencia.

Agile

Como se explicó en columnas anteriores, la refactorización de la interfaz de usuario puede conducir a confusión. Por este motivo, ’s normalmente mejor idear un marco flexible y exhaustivo en primer lugar y, a continuación, se elaborar durante el ciclo de desarrollo. Por ejemplo, puede que encuentre que necesite una plantilla adicional o que necesita elaborar reglas de diseño adicionales. Ciertamente puede modificar a la Guía de estilo medida que progresa desarrollo de la interfaz de usuario, mientras se refinar el diseño original. Si observa que el diseño original debe ser rethought, debería volver y revisar todas las pantallas para mantener la coherencia y considere el impacto de los cambios en los usuarios si el software ya está implementado.

Pruebas de facilidad de uso

Una vez haya creado el marco, probar su facilidad de uso si es posible para que puedan asegurarse de que el diseño funciona como está previsto. Es más sencillo realizar cambios en la plantilla y la Guía de estilo antes de mucha pantallas están codificadas.

Creación de pantallas de detalle

Con la guía y estilo de marco de trabajo en su lugar, puede crear las pantallas. Si desarrollado a una guía de un buen estilo, puede distribuir el trabajo entre varios programadores y mantener la coherencia que desee.

El trabajo de diseño de pantallas individuales es una combinación de imágenes y de ingeniería. Para crear un diseño de pantalla funciona para el usuario, tiene que colocar manualmente en zapatos ’s usuario y ver que el mundo de la forma el usuario hace. Que no ’s una tarea fácil y es uno de los motivos que las pruebas de facilidad de uso pueden ser tan eficaz como una herramienta.

Modelo cognitivas

Como punto de partida, mire la figura 7, que muestra un modelo cognitivas simplificado de cómo un usuario procesa una pantalla.

Figura 7Modelo cognoscitivo para pantalla procesamiento

El usuario normalmente comienza la sesión con un objetivo principal en mente. Por ejemplo, “ deseo seleccionar Mis ventajas corporativas ” o “ deseo resolver el problema de este cliente ’s. ” A continuación, como el usuario confronts cada pantalla, crea los objetivos más pequeños, nivel de la pantalla, como “ desea iniciar sesión ” o “ desea buscar registro ’s cliente. ”

Con objetivos como éstas en mente, el usuario ve la pantalla y decide qué acción realizar. Ejecuta la acción y observa los resultados. Según los resultados, el usuario crea un nuevo objetivo y repite el proceso de nuevo.

Este proceso puede pasar fácilmente astray si el usuario no reconoce el control apropiado en la pantalla. Esta situación puede producirse si el diseñador asume que el usuario “ recuerda ” dónde ir y no crea un mensaje visible para él. Un ejemplo podría ser un producto que necesita que un usuario presione F1 para obtener ayuda, pero un mensaje a ese efecto no está presente. Otro ejemplo es cuando un usuario necesita para volver a una pantalla específica para buscar una función pero no recuerda dónde encontrar la función. En cualquier caso, el resultado es normalmente frantic búsqueda y la frustración.

Esto conduce a una regla de diseño de pantalla de clave: nunca se basan en memoria el usuario ’s;en su lugar, intente hacer visible cada opción. Con el tiempo, el usuario obtendrá información sobre el sistema, cualquier dependencia de memoria sólo agrega a carga cognitivas y, por lo tanto, al esfuerzo. Recuerde que cognitively, reconocimiento es siempre mucho más sencillo que recuperar. Cuando haya un gran número de opciones, deberá realizar un proceso de múltiples pasos de la selección. En esos casos, facilitan como posible al usuario que busque el elemento que necesita como rápida y fácilmente como sea posible y siempre con la mínima carga cognitivas.

Dado que los desarrolladores son relativas a la eficacia, podrían pensar que es poco rentable y descuidado repetir la información que ya se presenta en otro lugar. Pero puesto que reconocimiento siempre trumps recuperación, están mejor presentar cosas varias veces a, suponiendo que el usuario recordar algo si no ’s delante de ellos. Y puesto que los usuarios desarrollar rara vez precisas modelos mental del flujo de exploración, al menos no hasta que han tenido mucha ante el producto, confiar en que recuerde que es la función que necesitan en una ficha específica agrega mucha carga cognitivas al proceso de.

Presentación

El mes pasado hablamos sobre arquitectura de información y cómo diseñar la presentación de información de fácil comprensión. Tener en cuenta esas ideas cuando disponen de pantallas individuales. Asegúrese de que la pantalla está ordenada y libre de confusión. Desea que los usuarios perceptually agrupar elementos que funcionan conjuntamente en unidades visuales. Busque en la figura 8 para ver cómo disorderly alineación puede resultar muy difícil para el ojo agrupar elementos relacionados. Alinear los elementos y colocando los botones cerca de los elementos controlan, los grupos de percepción se forman fácilmente.

Figura 8 Agrupar hace la pantalla más comprensibles

Coherencia interna

A menos que tenga una razón realmente buena a no, pruebe a ser como coherente posible de pantalla en pantalla. Por ejemplo, aquí tiene algunas instrucciones generales:

• Utilice la misma terminología en todo el sistema
• Organizar información coherente mediante el mismo formulario de títulos y presentación de información
• Utilizar las mismas técnicas para consultas de búsqueda y resultados

Flujo

Cuando hay un pedido a la forma en que desea que un usuario para examinar la pantalla, es mejor siga el flujo para idioma nativo el usuario ’s. En inglés y muchos otros idiomas, esto sugiere izquierda a derecha y arriba a abajo. Mire la figura 9 para ver cómo mucho más fácil es leer las letras en secuencia alfabética cuando se ajustan al flujo de lenguaje.

Figura 9 Flujo

Si el idioma de la audiencia ’s es hebreo, árabe, persa, chino o japonés, el flujo puede ser de derecha a izquierda, por lo que las pantallas se deben ajustar en consecuencia. Flujo no es una preocupación en cada pantalla. Flujo no está relacionado siempre con texto. Por lo tanto, por ejemplo, si desea representar un proceso con varios pasos, organizar que el flujo es importante, incluso si los objetos en la pantalla gráficos. Observe el ejemplo “ lavar una camiseta ” en i18nguy.com/MiddleEastUI.html.

Y Then sucede el mágica

Muchos diseñadores (incluido yo mismo) encontrar que tienen una respuesta emocional a pantalla buen diseño. Se conoce cuando un diseño correcto porque parecen que las cosas se dividen en lugar. El enfoque tiene sentido como se observa desde perspectivas diferentes. Entre nosotros nos sería caracterizar esa sensación emocional como “ y, a continuación, la magia sucede, ” y se desespere de poder explicar a los clientes por qué este diseño determinado es el derecho.

Como programador, probablemente ha experimentado similar “ AH ” momentos cuando se resuelto un problema de diseño técnico especialmente knotty. Cuando se puede obtener al mismo punto en el diseño de la pantalla, podrá está seguro de rightness sus decisiones de diseño y rara vez las pruebas de facilidad de uso demostrará incorrecto.

Estudie el TAO de diseño de la pantalla y comprender que necesita crear dos vistas complementarias del producto: una técnica y de un usuario centrado. Al puede cambiar de una vista a otra cómodamente, se han asimilado una aptitud difícil, pero merece la pena.

La vista de software

Amborse Little

Diseño de la pantalla es, creo, una de esas cosas es tan concreto y práctico que la mayoría de nosotros sólo obtenerlo.  Que tiene la consecuencia lamentable que nos complacent: nosotros no cree suficiente sobre él o sólo suponen que sabemos, hemos ’re expertos ya podemos diseñar pantallas. Como han demostrado los plazos otros de esta columna, hay realmente tanto una ciencia distinta como un arte a hacer que las interfaces de software. El desarrollador promedio puede obtener sólo hasta ahora, dependiendo de su talento innatas y empathy en interfaces que fomentar buenas experiencias de realizar.  En el lado voltear, espero que esta columna muestra también que incluso si el diseño de interfaz de usuario no es su experiencia principal, puede obtener mejor lo y también obtener el mejor en decidir cuando necesita contratar a profesionales en el campo.

Digo todo esto por medio de señalar que nuestras tecnologías de interfaz de usuario parecen largo haya reconocido el la necesidad de marcos de diseño.  Dare decir que la existencia de dichas plataformas ha ha controlado más por una necesidad conservar nuestro validez y algunos modicum de productividad continua cara de cambiar los requisitos de por cualquier reconocimiento consciente de la importancia de coherencia para aquellos lovingly conocemos como los usuarios a los desarrolladores.  Por lo que es serendipitous que tenemos lo que tenemos.

¿Y sólo lo que tenemos es?  Bueno, que obviamente depende de qué tecnología trabaja con, pero intentar centrarse en las tecnologías .NET IU principales, dado que esto es, después de todo, MSDN Magazine.

Material variado, GET en ellos All

Primero desactivado, voy a decir todas las tecnologías .NET que uno compartido, concretas concepto de reutilización de IU esencial, el control (y su derivado, el control de usuario denominado).  Éstos, como ’m que conoce la mayoría de nosotros, permiten paquete copia partes de la interfaz de usuario no sólo visual sino también reutilización funcional.  No ’m historian una tecnología, pero mi impresión es que los controles generalmente pretenden para soluciones que cruzan dominios problema (a menudo se manifiesta en su propio proyecto externo o un ensamblado o incluso suministrados por terceros) y estas soluciones, los controles se implementan normalmente en patrones muy ampliamente aplicables. Controles de usuario, por otro lado, son normalmente orientados a dominios de problema concreto, a menudo dentro de la misma solución de proyecto.

Controles de usuario y son buenas para código y reutilización de la interfaz de usuario, que es conocido, pero sólo hasta que obtienen en términos de un marco de diseño.  Para ello, necesita algo más semejante a lo que a menudo se denomina “ maestro ” o “ plantilla ” framework para controlar el diseño bruto y elementos compartidos jerárquicamente, así como una manera coherente estilos (significado fuentes, colores, el espaciado y otros tratamientos visuales que sirven de diseño estética y de información) de administrar.  Éstas, las soluciones variar a través de tecnología.

Windows Forms

Hace muchos lunas mi amigo Floridian fearless, Stan Schultes, penned un artículo en Visual Studio Magazine denominado “ comprender herencia visual ” (msdn.microsoft.com/en-us/library/aa288147.aspx). El método descrito en este artículo puede ayudarle en gran medida las necesidades de diseño compartida bruto, en otras palabras, puede realizar un formulario base y un cuadro de diálogo base y generar los para satisfacer la mayoría de sus necesidades.     

Izquierda para sus propios dispositivos, ’m miedo que ’s sobre todos obtendrá fuera de Windows Forms en ayudarle a implementar un marco de diseño.  Dicho esto, hay soluciones de terceros, como ’s Infragistics aplicación estilos Framework y la herramienta (infragistics.com/learn/applicationstyling.aspx), que ofrecen mayor coherencia y agilidad y puede ayudarle a rellenar el espacio donde Windows.Forms deja en ayudarle a implementar y administrar un marco de diseño coherente.

Podría pensar Composite UI Application Block (también conocido como CAB;consulte msdn.microsoft.com/en-us/library/aa480450.aspx), y aunque CAB está destinada más modularizing y desacoplamiento UI que para implementar un marco de diseño coherente, puede definir el shell de interfaz de usuario (mediante una o varias de las áreas a las) para realizar una ordenación de diseño principal para proporcionar ese nivel de implementación del marco de trabajo de diseño.  Todavía izquierda de la necesidad de garantizar que los módulos determinados forman conjunto armoniosa, sin embargo, y dada la modularidad proporciona CAB, esto significa más responsabilidad en el módulo a los desarrolladores siga sus instrucciones de marco de trabajo de diseño. Y si va a implementar una aplicación mediante CAB, debe buscar en Smart Client Software Factory (SCSF). (Consulte de msdn.microsoft.com/en-us/library/bb266334.aspx para algunos consejos buena en los dos juntos.)

ASP.NET

ASP.NET, siendo una tecnología Web, puede aprovechar las tecnologías Web estándar que ayudan con marcos de diseño.  Principalmente, esto significa CSS y, años más recientes, el popular compartidos (de marcos CSS (bing.com/search?q=css+frameworks ). Si tiene cuidado y un patrón Zen de CSS, de irse con control casi total del diseño de página, pero probablemente tiene algunos interplay entre estructura HTML y CSS. Es muy útil para detalles de diseño más granulares, tales como espaciado (márgenes, relleno, interlineado y así sucesivamente), fuentes, colores, CSS y, por supuesto, tratamientos visuales que implican las cosas como bordes y diversos gymnastics basada en imágenes.

Como un complemento (o una contradicción, dependiendo de quién preguntar) para el estilo de fábrica, ASP.NET admite temas y control skinning para ayudarle a conseguir que adicional bits de la organización y potencial mantenimiento fuera de la aplicación.  Infragistics ofrece también estilos de la aplicación para ASP.NET, que permite administrar el estilo para la aplicación más fácil, especialmente si utilizando Infragistics los controles de ASP.NET.  CSS y HTML son muy eficaces, pero pueden también resultar difícil de administrar y los productos de Infragistics y los temas ASP.NET integrados y máscaras, así como otros marcos, intentar ayudarle a administrar esta complejidad y mantener su validez.

Para fines de diseño compartida bruto y elementos, ASP.NET tiene las páginas principales ( msdn.microsoft.com/en-us/library/wtxbf3hh.aspx), que permiten definir elementos mediante los marcadores de posición de contenido para las áreas del diseño que puede variar según vistas determinadas y de diseño principal o principal común.  Se pueden anidar páginas principales, y puede tener varios patrones (por ejemplo, uno para la organización, uno para MyApp y incluso uno para MyAppDialog, ese tipo de cosas).  Realmente ’s un marco bastante buena y ingeniosas para admitir y simplificar la implementación y el mantenimiento de un marco de diseño, y Sí, para lovers MVC, puede utilizar las páginas maestras hay así. (Vea msdn.microsoft.com/en-us/library/dd381412.aspx como punto de partida).

Una otra nota en ASP.NET.  Puede también aprovechar ASP.NET AJAX (y otras tecnologías de AJAX) para mantener esencialmente un diseño externo, común y actualizar sólo y reemplazar las áreas de contenido.  ASP.NET AJAX es otra herramienta que puede utilizarse junto con las páginas maestras para ofrecerle las ventajas de AJAX al aprovechar las ventajas de CSS y las páginas maestras para un marco de diseño coherente.

SharePoint y otros sistemas de administración de contenido

Por último, como está relacionada principalmente con ASP.NET, SharePoint y otros sistemas de administración de contenido normalmente van más allá de los conceptos básicos de lo que obtendrá en el marco de trabajo de ASP.NET para proporcionar plantillas de página, tipos de contenido, y una funcionalidad similar que puede ayudarle aún más a establecer y mantener un marco de diseño coherente, incluso habilitar nondevelopers para, en un sentido, extender el sistema manteniendo intactos el mismo marco de diseño.

WPF

WPF (Windows Presentation Foundation) tiene básicamente dos niveles de estilo, estilos y plantillas. (Consulte msdn.microsoft.com/en-us/library/ms745683.aspx. ) Los estilos son básicamente una forma para agrupar un conjunto compartido de los valores de propiedad.  Plantillas que vienen en dos tipos básicos en WPF, las plantillas de datos y plantillas de control.  Las plantillas de control son una forma personalizar completamente el aspecto de los controles, incluidos su estructura esencial y comportamiento.  Las plantillas de control a menudo se utilizan conjuntamente (por ejemplo, puede establecer una propiedad de plantilla en un estilo para un control) para personalizar la experiencia de un grado realmente no es factible en las tecnologías de interfaz de usuario de .NET anteriores. Las plantillas de datos son una forma muy ingenioso para compartir una definición de interfaz de usuario común para una forma de datos, por lo que significa que una plantilla de datos a le importa sólo buscar punto enlaces coincidentes y no, por ejemplo, que se incluye el origen de datos de un tipo determinado.

Diseño bruto y elementos compartidos, porque WPF es una tecnología de intrínsecamente cliente ’s más o menos sencillo de crear una vista (ventana), lo diseño y sustituir el contenido de los marcadores de posición en tiempo de ejecución (a menudo con instancias de UserControl).  WPF también admite una implementación de la trama de exploración diario (consulte quince.infragistics.com/#/Main/ViewPattern$pattern=Journal+Navigation) y permite usar marcos con él para imitar la experiencia Web de desplazarse a distintas páginas.  Ésta puede ser una forma eficaz para implementar el enfoque de marcador de posición. (Encontrar más información en msdn.microsoft.com/en-us/library/ms750478.aspx de https://msdn.microsoft.com/es-ES/library/ms750478.aspx).

WPF y (Silverlight) también tienen un marco como CAB denominado directrices de aplicación compuesto (CAG, conocido anteriormente como prism;consulte msdn.microsoft.com/en-us/library/cc707819.aspx) que puede aprovechar de forma similar, como descrito anteriormente para formularios Windows Forms.  CAG es compatible con la idea de áreas, que puede utilizarse como contenedores o marcadores dentro de un diseño mayor, y que se pueden anidar así. Y si trabajando en Blend (inevitable, en este momento), puede encontrar un bit buena de guía en organizar material Blend y prism funcionan bien juntos en johnpapa.net/silverlight/using-blend-with-prism-apps-in-silverlight-3/.

Mediante una combinación de estilos, plantillas, vistas principal con marcadores de posición y los controles de usuario (o controles Frame con páginas), puede implementar un marco de diseño muy manejables en WPF.

Silverlight

Puesto que Silverlight por todo y propósitos es un subconjunto de WPF y es un objetivo indicado de Microsoft para intentar para compatibilidad de origen (XAML) de 100 por ciento entre Silverlight y WPF, la mayor parte de lo dije acerca de WPF aplica a Silverlight, con algunas excepciones, por supuesto.

Primero cierre, no hay ningún concepto formal de una página de principal de Silverlight, básicamente, todo es un control o un control de usuario. En la versión 3, Microsoft agregó un marco de exploración, que agrega una clase de marco para alojar “ páginas ” y una clase de página que se deriva de UserControl y una propiedad de título que se actualizará automáticamente la barra de título del explorador. Son una implementación de exploración diario, de modo que puede imitar el enfoque de Web (similar a WPF, pero de escribir este documento la implementación no es compatible en el origen, vea msdn.microsoft.com/en-us/library/cc838245.aspx). En lugar de desplazarse a las páginas, vaya a controles de usuario que son páginas.  Pero el concepto básico de definición de comparte diseño bruto y elementos con marcadores de posición permanece. Y, como con WPF, puede administrar manualmente la sustitución de elementos visuales en áreas determinados (marcadores de posición) de la interfaz de usuario con otros nuevos, normalmente controles de usuario.

Como estilos y plantillas, es prácticamente el mismo artículo, con la salvedad de que Silverlight proporciona un VisualStateManager que permite control (o control de usuario) a los programadores definir la estados semánticas y grupos de estado.  En el contexto de nuestra discusión aquí, esto significa fundamentalmente que el VSM afecta a la manera personalizan las plantillas de control.  VisualStateManager para WPF está en el Toolkit ahora; vea windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-visual-state-manager-overview.aspx.

Además, dado que Silverlight no es una opción de todo o nada, puede utilizar junto con ASP.NET y significa que el de ASP.NET se utiliza para un marco de diseño fundamental. Sólo tienen que administrar la integración de estilo entre las tecnologías estándar de Web (HTML + CSS) con el estilo en Silverlight.  Por lo tanto, Téngalo en cuenta si va a esa ruta.

Encontrará más información acerca de las diferencias entre WPF y Silverlight en msdn.microsoft.com/en-us/library/cc903925(VS.95).aspx.

SketchFlow

Sólo se ha publicado SketchFlow de escribir este documento.  Mientras SketchFlow admite WPF y Silverlight (aunque un proyecto SketchFlow tiene como destino una única tecnología), tiene algunas de sus propias ideas acerca de administración de marco de trabajo de diseño.  Y puesto que muchos desarrolladores utilizan se al prototipo para estas tecnologías .NET, pensé merece la pena mencionar.  Aunque SketchFlow se sitúa encima de estas dos tecnologías, tiene alguna terminología diferente, concretamente pantallas y pantallas de componentes.

Una pantalla función realiza básicamente lo que nombre, una pantalla que las personas que vaya a. (Puede crear conexiones de exploración visual entre pantallas en el mapa SketchFlow.)  Qué significa este normalmente es que una pantalla tiene interfaz de usuario suficientemente distinta para justificar su propio diseño y la vida.  Pantallas de componente son básicamente una forma sencilla para compartir los bits de una pantalla con otras pantallas, muy similares a los controles de usuario. (De hecho, una pantalla de componentes creará UserControls en código).

Mientras la parte del punto de prototipos, es pensar en no a través material especialmente anticipado prototipos, como estructuras de diseño, hay un punto en el que quizás desee hacerlo.  Si obtener mucho más allá de prototipos de una página o dos y prevé recorrer en iteración y perfeccionar aún más, tiene que empezar a pensar cómo compartir los bits comunes para realizar su prototipo más manejable.  Dicho esto, incluso si hay un artículo se traslada desde SketchFlow prototipo a implementación final, que no ’s punto principal de SketchFlow. 

Su pensar en un marco de diseño de implementación detallada probablemente puede esperar hasta que decida iniciar la creación, momento en que se pueden aprovechar alguna o muchas de las pantallas de componente y incluso algunos de los estilos, estados (en el Administrador de estado visual) y guiones gráficos relacionados si a los diseñadores la molestia de definir en detalle.

Utilizar controles comunes

Junto con marcos y herramientas que ayudan a implementan un marco de diseño coherente dentro y entre las aplicaciones, también debe pensar acerca de la coherencia de marco de trabajo de diseño en términos de cómo se asignan las soluciones de otros marcos de diseño. Se trata de donde patrones de la interfaz de usuario puedan ayudarle a elegir e implementar las formas mejores, más comunes de resolver problemas relacionados.

De nuevo, parece que los desarrolladores unconsciously (o no) hacerlo todo junto al intentar imitar soluciones comunes que los usuarios finales están familiarizados con (como Excel y Outlook) y, por supuesto, mediante los controles que se incluyen en el cuadro.  Muchos de nosotros don’t pensarlo, pero puede algo considerarse la proporcionada por un conjunto limitado de control de coherencia. No se tiene que preocupar demasiado cómo implementar, por ejemplo, un selector colocar abajo (consulte quince.infragistics.com/#/Main/ViewPattern$pattern=Drop+Down+Chooser) porque tenemos que en el cuadro. De forma similar, para obtener más complejas pero familiarizadas interfaces que no están en principales bibliotecas de framework, se puede tomar aprovechar el trabajo que hacer de terceros para proporcionar implementaciones buena para elementos como el OutlookBar la cinta de opciones y así sucesivamente.

Se puede considerar estos controles comunes como un tipo de marco de diseño compartida, universal dentro del cual la mayoría de las aplicaciones (empresa) se crean y se debe aprovechar el marco de diseño compartida para aprovechar esta familiaridad.  Algunos han dicho que lo intuitivo es a menudo simplemente sólo lo que es familiar (consulte, por ejemplo, portal.acm.org/citation.cfm?id=584629), por lo que mediante controles de interfaz de usuario familiarizados puede ir un largo camino hacia ayudar a las interfaces de parecer intuitivo.

Al mismo tiempo, tenga en cuenta que desea elegir controles según las necesidades de la aplicación y no válidas unthinkingly un control familiarizado simplemente porque es familiar o porque, por ejemplo, se utiliza en Microsoft Office.  Puede ir sin decir, pero con las prisas para hacer las cosas, Creo que nos ’ve todos los controles utilizadas incorrectamente como éste.

Una cosa que puede ayudarle a realizar tales llamadas de juicio más rápidamente de es una buena biblioteca de modelo de interfaz de usuario y UX como Quince (quince.infragistics.com). Lea el problema, soluciones, contexto y lógica de los patrones, que normalmente ’re bastante cortas y se puede hacer mucho para ayudarle a discernir si un patrón determinado (que a menudo se implementa como un control) es adecuado para el contexto. Se ofrecen muchas alternativas, y puede utilizar el etiquetado para explorar otras alternativas posibles.

Conclusión

Ahora que tenía este paseo whirlwind de habilitar las capacidades de .NET en las diversas tecnologías .NET UI, debe poder aplicar y aprovechar su (o el diseñador ’s) esfuerzos para definir un marco coherente y convertirlo en algo que es manejable para permitirle restringir durante el desarrollo y continúe iterar y refinar, como mantener la aplicación en producción.