• Artigo

Este artigo foi traduzido por máquina.

Usabilidade na prática

A base do design de telas

Dr. Charlie Kreitzberg e Ambrose Little

O modo de exibição Cognitive

Dr. Charles B. Kreitzberg

 Antigo filosofia chinês fala do Tao como os princípios e o caminho que organizam o mundo.Embora as raízes do Tao voltar alguns anos 2.500, seus teachings tem um paralelo interessante com design de interação.Um conceito central no Tao é que cada ação é seguida por uma reação.O conceito é incorporado no familiarizado Yin Yang símbolo (Figure 1), que descreve o mundo como dividido em opposites complementares que interagem uns com os outros.Design de tela nós imagina desse símbolo como que representa dois modelos complementares de software: o modelo de implementação e o modelo de manifesto.Esses modelos são descritos por Alan Cooper em seu catálogo sobre face.Cooper explica o modelo de implementação como a forma real software funciona.O modelo de manifesto, por outro lado, é a maneira que o software representa seu funcionamento para o usuário.A chave para design eficaz é ser capaz de criar um modelo de manifesto que se adapta com a maneira como o usuário acha sobre o problema.


Figura 1 O símbolo de Yin Yang

Como desenvolvedor, você está profundamente imersa no modelo de implementação, mas quando você alternar para projetar a interface do usuário, você precisa mudar a perspectiva para ver o software a maneira como o usuário.Que não ’s fácil porque ’s difícil ignorar o que você conhece e adotar o modo de exibição ’s outra pessoa.Muitas das técnicas de design discutimos nas colunas anteriores, como criar personas representam membros do público-alvo típico e criar cenários de tarefa para entender como funcionam os usuários, se destinam a ajudam a criar essa mudança mental.Você precisa de uma compreensão clara de seu público-alvo, as tarefas que precisam para realizar e como eles pensar sobre sua atividade.Também ’s importante reconhecer o nível de compreensão técnica, que você pode esperar o público faça.Com esse conhecimento, você pode desenvolver um modelo de manifesto que se ajuste.

Criar primeiro o Framework

Nós anteriormente tenha escrito sobre a diferença entre design de alto nível e detalhado.Design de tela sempre deve começar com o design de uma estrutura de alto nível.Depois que essa estrutura estiver no local você pode usá-lo como base para telas detalhadas.Dois elementos chaves da estrutura são:

  • Um esquema de navegação que permite que o usuário se mova facilmente de tela a tela de acordo com o fluxo de tarefas.Discutimos navegação em nossa coluna de março de 2009 (msdn.microsoft.com/magazine/dd458810.aspx).
  • Elementos persistentes, tais como títulos, que servem para ancorar o usuário e fornecer pistas sobre onde o usuário está.

Em outras palavras, comece com uma abordagem de cima para baixo através do qual você define os elementos que são comuns a todas as telas e criar um modelo claro de como o usuário obtém ao redor.

Com a estrutura in-loco, desenvolva as telas mais importantes, refinar a estrutura se necessário.Por fim, desenvolva as telas restantes e caixas de diálogo.

Criar modelos de arame

A estrutura, você pode implementar como páginas mestras, deve indicar as áreas principais para as telas.Algumas das informações nessas áreas será o mesmo em cada tela (por exemplo, o nome do produto, logotipo e o menu principal).Algumas informações serão alterados de tela a tela, mas devem aparecer no mesmo lugar em cada tela (por exemplo, o título de tela e trilhas).Finalmente, algumas informações serão diferentes da tela a tela (por exemplo, os controles específicos para a tela).Todos esses elementos, no entanto, devem trabalham juntos para criar um design consistente e uniforme.

Comece dividir a tela em áreas com base na função.Como exemplo, examine o esboço de Figura 2, que serve para mapear as áreas de tela básico.Observe como cada área neste delineado possui foram rotulada, para que o usuário compreendam sua finalidade.


Figura 2 Definindo a áreas da tela

O design geral é fácil para o usuário organizar perceptually.Cada uma das guias principais pode ter um design diferente, mas, desde que o layout básico doesn’t turno, o design será exibido consistente para o usuário.Para ilustrar isso, examine Figura 3, que mostra outro modelo que pode ser usado para uma guia diferente no aplicativo.Como os elementos básicos de enquadramento são mantidos constantes, a usabilidade é preservada mesmo que principais elementos do design sejam diferentes.


Figura 3 Um modelo compatível

Obviamente, os padrões de design que você selecionar para cada tela devem ser consistentes.Por exemplo, se duas guias tem uma função de pesquisa, eles devem apresentar esse recurso da mesma maneira.

Todas, exceto os sistemas mais simples precisam lidar com caixas de diálogo e outras telas secundárias.No passado, devido às limitações de navegadores, muita de sistemas baseados em Web evitado janelas filho e camadas.Uma alternativa comum era para enviar o usuário para outra página e o usuário precisava descobrir como obter de volta.Geralmente, isso resultou em confusão.

Com plataformas como o Microsoft .NET Framework, suas linguagens de programação associadas e AJAX, a criação de pop-ups e outras maneiras elegantes de gerenciar detalhes é muito mais realista.Quando você estiver criando uma estrutura, pense em como você manipulará caixas de diálogo e detalhes.Por exemplo, os modelos de 2 figuras e 3 devem funcionar bem com uma janela filho de pop-up de janela restrita, como mostrado no Figura 4.

Durante a criação da estrutura, você também deve considerar sobre Ajuda e suporte ao usuário.Ajuda costuma ser uma após, criado como um “ brilhante-on, ” mas funciona muito melhor quando ele é integrado às telas.Observe que o mostrado na Figura 4 que nós reservado um lugar para texto explicativo que pode servir como um prompt para orientar o usuário pop-up.Link Saiba mais permite ao usuário acessar informações adicionais.(Obviamente, você precisa criar um modelo para mostrar como esse link será processado.)


Figura 4 Pop-up

Para ajudar o usuário preencher o formulário, você talvez deseje criar uma dica de ferramenta para permitir ao usuário obter informações adicionais sobre campos específicos.Um design de exemplo para isso é mostrado na Figura 5.


Figura 5 Dicas de ferramentas

Ao pensar sobre design de suporte ao usuário no início, você tirar um grande passo para garantir que ele realmente será criado e será útil e consistente.Observe que a dica de ferramenta, como o prompt, tem um link para permitir ao usuário saber mais.Embora essa não é uma prática comum (e não pode ser implementada em alguns controles de dica de ferramenta), é uma técnica eficiente porque permite aos usuários investigar mais profundo alternativas a seguir no contexto de sua atividade atual.Convém criar um modelo para ainda outro nível de pop-up para oferecer suporte esses links para evitar a navegação extra.

Na minha experiência, poucos modelos básicos, talvez dois níveis de caixas de diálogo, podem acomodar a interface de sistemas mesmo muito grandes.E especificando a estrutura com antecedência, você criar a estrutura para criar telas específicas.

Criar um guia de estilo

À medida que você cria a estrutura, documento em um guia de estilo.Isso irá lembrá-você as opções feitas e também permitem que outras pessoas que precisam para desenvolver telas permanecerão consistentes com o design.Um guia de estilo não precisa ser sofisticado.Normalmente, captura os modelos de tela, anotá-las e colar as telas anotadas no Word, Visio ou um site da Web.Figura 6 é um exemplo de como você pode anotar o esboço de pop-up.


Figura 6 Annotated arame para Style Guide

É importante especificar fontes, tamanhos de fonte e cores para que eles possam ser consistentes de tela a tela.Sempre que possível, use estilos em vez de valores codificados para fontes e cores de modo que você (ou um artista gráfico) possa fazer alterações no design visual e ainda manter a consistência entre o aplicativo.

O guia de estilo também pode especificar a terminologia a ser usado na interface do usuário.É importante usar termos consistente e para selecionar condições que fazem sentido para o seu público.

Agile

Como discutimos nas colunas anteriores, refatoração a interface do usuário pode gerar confusão.Por esse motivo, ’s melhor surgir com uma estrutura abrangente e flexível primeiro e elaborá-lo durante o ciclo de desenvolvimento.Você pode localizar, por exemplo, que é necessário um modelo adicional ou que você precise acompanham regras de design adicionais.Você certamente pode corrigir o guia de estilo conforme avança de desenvolvimento de interface do usuário, desde que são refinar o design original.Se você achar que o design original precisa ser rethought, você deve voltar e revisar todas as telas de consistência e considere o impacto das alterações sobre os usuários se o software já foi implantado.

Teste de usabilidade

Depois de ter criado sua estrutura, teste a usabilidade se possível para que você possa fazer certos de que o design funciona conforme o desejado.É mais fácil fazer alterações no modelo e o guia de estilo antes de uma grande quantidade de telas são codificados.

Criar telas de detalhe

Com a guia estrutura e o estilo no lugar, você pode criar as telas.Se você desenvolvido um guia de estilo boa, poderá distribuir o trabalho entre vários desenvolvedores e ainda manter a consistência desejado.

O trabalho de criação de telas individuais é uma combinação de arte e engenharia.Para criar um design de tela que funciona para o usuário, você precisará colocar-se em sapatos ’s usuário e ver que o mundo a maneira como o usuário faz.Que não ’s uma tarefa fácil e é um dos motivos que testes de usabilidade podem ser tão eficientes como uma ferramenta.

Modelo cognitivo

Como ponto de partida, examine Figura 7, que mostra um modelo simplificado cognitivo como um usuário processa uma tela.


Figura 7 Cognitive modelo para tela processamento

O usuário normalmente inicia logoff da sessão com um objetivo principal em mente.Por exemplo, “ desejo selecionar meus benefícios corporativos ” ou “ Desejo solucionar problema ’s Este cliente. ” Em seguida, como o usuário confronts cada tela, ela cria metas menores, nível de tela, como “ deseja fazer logon ” ou “ desejo localizar registro ’s o cliente. ”

Com metas de como esses em mente, o usuário visualiza a tela e decide que ação a ser tomada.Ela executa a ação e observa os resultados.Com base nesses resultados, o usuário cria um novo objetivo e repete o processo novamente.

Esse processo pode facilmente ir astray se o usuário não reconhecer o controle apropriado na tela.Essa situação pode ocorrer se o designer assume que o usuário “ lembra ” onde ir e não cria um prompt visível para ele.Um exemplo pode ser um produto no qual um usuário precisa pressionar F1 para obter ajuda, mas um prompt para esse efeito não está presente.Outro exemplo é quando um usuário precisa retornar a uma tela específica para localizar uma função, mas não lembrar onde encontrar a função.Em ambos os casos, o resultado é frustração e pesquisa geralmente dramáticas.

Isso leva a uma regra de design de tela chave: nunca confiar em memória ’s usuário;em vez disso, tente fazer cada opção visível.Ao longo do tempo, o usuário aprenderá o sistema, qualquer confiança na memória apenas adiciona à carga cognitiva e, portanto, ao esforço.Lembre-se de que cognitively, reconhecimento é sempre muito mais fácil de cancelamento.Quando você tiver um grande número de opções, talvez seja necessário fazer a seleção um processo de várias etapas.Nesses casos, tornam mais fácil como possível para o usuário localize o elemento que ele precisa como forma rápida e fácil possível e sempre com carga mínima cognitiva.

Porque os desenvolvedores estão preocupados com eficiência, eles podem achar que ele é um desperdício e impreciso para repetir informações que já são apresentadas em outro lugar.Mas como reconhecimento sempre supera cancelamento, são melhor apresentando coisas várias vezes que supondo que o usuário irá lembrar de algo se não ’s na frente do-los.E como os usuários raramente desenvolvem modelos mental precisos do fluxo de navegação — pelo menos não até que eles tiveram muita de exposição para o produto — depender sejam Lembre-se que a função precisam é em uma guia específica adiciona muita carga cognitiva ao processo.

Layout

Mês passado falamos sobre arquitetura de informações e como criar a apresentação das informações de fácil compreensão.Tenha essas idéias em mente ao dispor telas individuais.Certifique-se de que a tela é orderly e livre de confusão.Que os usuários perceptually agrupar itens que trabalham juntos em unidades visual.Procure no Figura 8 para ver como disorderly alinhamento pode tornar sua realmente difícil para o olho agrupar itens relacionados.Alinhar os itens e colocando os botões de perto os elementos que eles controlam, os grupos de percepção facilmente são formados.


Figura 8 Agrupamento faz a tela mais abrangente

Consistência interna

A menos que você tiver um realmente bom motivo para não, tente ser como consistente possível da tela a tela.Por exemplo, aqui estão algumas diretrizes gerais:

  • Usar a mesma terminologia em todo o sistema
  • Organizar informações usando o mesmo formulário de cabeçalhos e informações de apresentação consistente
  • Usar as mesmas técnicas para consultas de pesquisa e os resultados

Fluxo

Quando há um pedido da forma como você deseja que um usuário para verificar a tela, será melhor o fluxo para idioma nativo o usuário ’s a seguir.Em inglês e muitos outros idiomas, isso sugere esquerda para a direita e de cima para baixo.Examinar Figura 9 como muito mais fácil é ler as letras em seqüência alfabética quando eles compatíveis com fluxo de idioma.


Figura 9 Fluxo

Se idioma ’s seu público-alvo é hebraico, árabe, persa, chinês ou japonês, o fluxo pode ser da direita para a esquerda, para que as telas devem ser ajustadas apropriadamente.Fluxo não é uma preocupação em cada tela.Fluxo não está sempre relacionado ao texto.Portanto, por exemplo, se você desejar representar um processo com várias etapas, organizando que o fluxo é importante, mesmo se os objetos na tela são gráficos.Dê uma olhada no exemplo “ lavar uma camiseta ” na i18nguy.com/MiddleEastUI.html.

E depois a mágica acontece

Muitos designers (incluindo Me) localizar que tenham uma resposta emocional para tela bom design.Você sabe quando um design é direita porque as coisas parecem se enquadram em local.A abordagem faz sentido, como você examiná-la de diferentes perspectivas.Entre nós, nós caracterizam esse sentimento emocional como “ e, em seguida, a mágica acontece, ” e nós se desespere de ser capaz de explicar para clientes por que esse design específico é o correto.

Como desenvolvedor, você provavelmente tiveram semelhante “ aha ” minutos quando você resolveu um problema de particularmente knotty design técnico.Quando você pode obter o mesmo ponto no design de tela, você poderá se sentir seguro rightness das suas decisões de design e raramente serão testes de usabilidade provar você errado.

Estudar o Tao do design de tela e entender o que você precisa criar dois modos complementares do produto – um técnico e um usuário centralizado.Quando você pode alternar de um modo de exibição para o outro confortavelmente, você irá ter dominado uma habilidade difícil, mas vale a pena.

Modo de exibição de software


Amborse Little

Design de tela é, Acho que, uma dessas coisas é tão concreto e prático que a maioria de nós apenas obtê-lo.  Que possui a infeliz conseqüência de tornar nós complacent: nós não pense suficiente sobre ele ou apenas assumem que nós sabemos, nós ’re especialistas porque podemos criar telas.

Como mostraram outros suplementos desta coluna, na verdade, há uma ciência distinta e uma arte fazer interfaces de software.O desenvolvedor médio pode obter somente até o momento, dependendo do seu talento inata e empatia, na criação de interfaces promover experiências boas.  Por outro lado, espero que essa coluna também mostra que, mesmo que o design de interface do usuário não seja sua experiência principal, você pode obter melhor nisso e também obter melhor decidir quando é necessário empregar profissionais no campo.

Digo que tudo isso por meio de observar que nossas tecnologias de interface do usuário parecem longo ter reconhecido a necessidade de estruturas de design.  Dare digo que a existência de tais plataformas tem sido orientada mais pela necessidade de nós aos desenvolvedores manter nossa sanidade e alguns modicum de produtividade contínua em face de alterar requisitos de qualquer reconhecimento consciente da importância de consistência para aqueles lovingly consultar como os usuários. Portanto, é que temos o que temos serendipitous.

E apenas o que é que temos?  Bem, que, obviamente, depende em que tecnologia você trabalha, mas tentar manter foco nas principais tecnologias .NET da interface do usuário, considerando que isso é, afinal, do MSDN Magazine. 

Colocar você Get em-los todos

Desativado pela primeira vez, deixe-me dizer que todas as tecnologias .NET têm um compartilhado, concretas conceito de reutilização de interface do usuário essencial — o controle (e sua derivada, o controle de usuário chamado).  Esses, como eu ’m-se a maioria de nós sabe, permitem conjunto de partes da interface do usuário para não apenas visual, mas também reutilização funcional.  Eu não ’m historian uma tecnologia, mas minha impressão é que controles geralmente destinam para soluções que entre domínios com problemas (geralmente manifestado em seu próprio projeto externo ou assembly, ou mesmo fornecido por terceiros) e essas soluções, controles são geralmente implementados em padrões muito amplamente aplicáveis.Controles de usuário, por outro lado, são normalmente enfoque domínios problema específico, geralmente dentro da mesma solução de projeto.

Controles de usuário e são bons para código e reutilização de interface do usuário, que é bem conhecida, mas eles obtêm você apenas até o momento em termos de uma estrutura de design.  Para isso, você precisa de algo mais semelhante a que costuma ser chamado uma estrutura “ mestre ” ou “ modelo ” para lidar com layout bruto e compartilhados hierarquicamente elementos, bem como uma maneira de gerenciar estilo consistente (significado fontes, cores, espaçamento e outros treatments visual que atendem a estética e informações de design).  Para isso, as soluções variam em tecnologia.

Windows Forms

Muitos luas atrás, meu amigo Floridian fearless, Stan Schultes, penned um artigo em de Visual Studio Magazine chamado “ entender herança visual ” (msdn.microsoft.com/library/aa288147(VS.71).aspx).  A abordagem descrita neste artigo pode ajudar amplamente com as necessidades de layout bruto, compartilhada — em outras palavras, você pode tornar um formulário base e um diálogo base e criar daqueles para atender à maioria das suas necessidades.     

Esquerda para a suas própria dispositivos, eu ’m receio que ’s sobre todos os você obter saída do Windows Forms em ajudá-lo a implementar uma estrutura de design.  Dito isso, há soluções de terceiros, como ’s Infragistics estrutura determinando estilo de aplicativos e ferramenta (infragistics.com/learn/applicationstyling.aspx), que oferecem maior consistência e agilidade e pode ajudar a preencher a lacuna onde o Windows Forms deixa em ajudar você a implementar e gerenciar uma estrutura de design consistente.

Talvez você esteja pensando sobre o Composite UI Application Block (também conhecido como CAB;Consulte msdn.microsoft.com/library/aa480450.aspx), e embora CAB destina mais modularizing e separação da interface do usuário que para implementar uma estrutura de design consistente, você pode definir o shell de interface do usuário (usando um ou mais dos espaços de trabalho) para fazer um tipo de layout para fornecer esse nível de implementação de estrutura de design mestre.  Você ainda deixou precisar garantir que os módulos de determinado formam um harmoniosos todo, no entanto, e considerando a modularidade fornece CAB, isso significa mais responsabilidade no módulo que os desenvolvedores siga as diretrizes de estrutura de design.E se pretende implementar um aplicativo usando o CAB, você deverá aparecer no Smart Client Software Factory (SCSF).(Consulte msdn.microsoft.com/library/bb266334.aspx para obter algumas orientações boa sobre os dois juntos.)

ASP.NET

ASP.NET, sendo uma tecnologia da Web, pode aproveitar as tecnologias da Web padrão que ajuda com estruturas de design. Principalmente, isso significa que CSS e, em anos mais recentes, o popular compartilhados estruturas CSS (bing.com/search?q=css+frameworks). Se você ’re cuidado e um mestre Zen CSS, você pode de escapar quase total controle do layout de página, mas mais provavelmente que alguns interplay entre estrutura HTML e CSS. CSS é mais útil para detalhes de design mais granulares, como espaçamento (margens, preenchimento, espaçamento de linha e assim por diante), fontes, cores, e, claro, treatments visual que envolvem as coisas como bordas e vários gymnastics com base em imagem. 

Como um complemento (ou uma contradição, dependendo do que você pedir) para aplicação de estilo de pronta, ASP.NET oferece suporte temas e controle de aparência para ajudá-lo a obter que extra bit de manutenção de organização e potencial fora do seu aplicativo.  Infragistics também oferece aplicativos determinando estilo para o ASP.NET, que torna o gerenciamento de estilo para seu aplicativo mais fácil, especialmente se você usando controles ASP.NET Infragistics.  CSS e HTML são muito poderosas, mas eles também podem ficar intratável e os produtos Infragistics e temas ASP.NET internos e estruturas de aparência, bem como outras, tente ajudar a gerenciar essa complexidade e manter sua sanidade.

Para fins de layout bruto compartilhada e elementos, o ASP.NET tem páginas mestras (msdn.microsoft.com/library/wtxbf3hh.aspx), que permitem que você definir layout comum de pai/mestre e elementos usando espaços reservados de conteúdo para as áreas do layout que pode variar com base em modos de exibição específicos.  Páginas mestras podem ser aninhadas, e você pode ter vários mestres (por exemplo, um para empresa, um para MyApp e até mesmo um para MyAppDialog — esse tipo de coisa).  Realmente ’s uma estrutura em vez disso, boa e engenhosas para suporte e simplificar a implementação e a manutenção de uma estrutura de design, e Sim, para lovers MVC, você pode usar páginas mestras lá também.(Consulte msdn.microsoft.com/library/dd381412.aspx como um ponto de partida.)

Uma outra Observação no ASP.NET.  Você pode também aproveitar o ASP.NET AJAX (e outras tecnologias AJAX) para manter essencialmente um layout comum, externo e apenas atualizar e substituir as áreas de conteúdo.  O AJAX ASP.NET é outra ferramenta que pode ser usada em conjunto com páginas mestras para oferecer as vantagens do AJAX ao aproveitar as vantagens da CSS e páginas mestras para uma estrutura de design consistente.

SharePoint e outros sistemas de gerenciamento de conteúdo

Por fim, como pertença principalmente para o ASP.NET, SharePoint e outros sistemas de gerenciamento de conteúdo geralmente vão além das noções básicas de what you get na estrutura do ASP.NET para fornecer modelos de página, tipos de conteúdo, e funcionalidade semelhante que mais pode ajudar você estabelecer e manter uma estrutura de design consistente, mesmo ativando nondevelopers para, de certa forma, estender o sistema enquanto mantém a mesma estrutura design intactos.

WPF

WPF (Windows Presentation Foundation) tem basicamente duas camadas de estilo — estilos e modelos . (Consulte msdn.microsoft.com/library/ms745683.aspx.) Estilos são essencialmente uma maneira de agrupar um conjunto compartilhado de valores de propriedade.  Modelos são fornecidos em dois tipos básicos no WPF — os modelos de dados e modelos de controle.  Modelos de controle são uma maneira completamente personalizar a aparência de controles, incluindo sua estrutura essencial e comportamento.  Modelos de controle são usados juntos (por exemplo, você pode definir uma propriedade de modelo em um estilo para um controle) para personalizar a experiência um grau não realmente viável em tecnologias .NET da interface do usuário anteriores.Modelos de dados são uma maneira muito interessante para compartilhar uma definição de interface do usuário comum para uma forma de dados, por que Quero dizer que um modelo de dados se importa somente sobre localizando ligações correspondentes e não, por exemplo, que a fonte de dados é um tipo específico.

Como para bruto layout e elementos compartilhados, como o WPF é uma tecnologia inerentemente lado do cliente, ele ’s uma questão mais ou menos simples de criar um modo de exibição (uma janela), fazendo o check-out e substituindo o conteúdo de espaços reservados em tempo de execução (normalmente com instâncias de UserControl).  Também, o WPF oferece suporte a uma implementação do padrão diário navegação (consulte quince.infragistics.com/#/Main/ViewPattern$pattern=Journal+Navigation) e permite que você usar a quadros com ele para imitar a experiência da Web de navegar para páginas diferentes.  Isso pode ser uma maneira eficiente de implementar a abordagem de espaço reservado.(Você encontrar mais informações no msdn.microsoft.com/library/ms750478.aspx).

WPF (e do Silverlight) também têm uma estrutura semelhante a CAB chamada Composite Application Guidance (CAG, anteriormente conhecido como PRISM;Consulte msdn.microsoft.com/library/cc707819.aspx) que você pode aproveitar de maneira semelhante como descrito anteriormente para Windows Forms.  CAG oferece suporte a idéia de áreas, que pode ser usado como recipientes ou espaços reservados dentro de um layout maior e que pode ser aninhado bem.E se você trabalhando no Blend (inevitável, neste momento), você pode encontrar um pouco boa de orientação sobre como organizar coisas para tornar Blend e PRISM funcionam bem juntos no johnpapa.net/silverlight/using-blend-with-prism-apps-in-silverlight-3/.

Usando uma combinação de estilos, modelos, modos de exibição principal com espaços reservados e controles de usuário (ou controles Frame com páginas), você pode implementar uma estrutura muito gerenciável de design no WPF.

Silverlight

Como Silverlight por todos os efeitos e finalidades é um subconjunto do WPF, e é uma meta estabelecida da Microsoft para tentar para compatibilidade de origem (XAML) de 100 por cento entre o Silverlight e WPF, a maioria dos que eu disse sobre o WPF aplica ao Silverlight, com algumas exceções, do curso

Primeiro logoff, não há nenhum conceito formal de uma página no Silverlight principais — basicamente, tudo o que é um controle ou um UserControl. Na versão 3, a Microsoft adicionou uma estrutura de navegação, que adiciona uma classe de quadro para hospedar “ páginas ” e uma classe de página que deriva de UserControl e uma propriedade de título que atualizará automaticamente a barra de título do navegador. Esses são uma implementação de navegação de diário de forma que pode imitar a abordagem da Web (semelhante ao WPF, mas como da redação deste artigo a implementação não é compatível de fonte — consulte msdn.microsoft.com/library/cc838245(VS.95).aspx). Em vez de navegar para páginas, você navegar para controles de usuário que estiverem representando páginas.  Mas o principal conceito de definir compartilhada bruto layout e elementos com espaços reservados permanecem.E, como com o WPF, você pode gerenciar manualmente a substituição de elementos visuais em áreas (espaços reservados) específicos da interface do usuário com novos — controles de usuário normalmente.

Como para o estilo e modelagem, é praticamente o mesmo texto, com a limitação que o Silverlight proporciona um VisualStateManager que permite controle (ou controle de usuário) que os desenvolvedores definir estados semânticos e grupos de estado.  No contexto de nossa discussão aqui, isso principalmente significa que o VSM afeta a maneira que você personalizar modelos de controle.  VisualStateManager para WPF está no Toolkit agora; Consulte windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-visual-state-manager-overview.aspx.

Além disso, como o Silverlight não é uma opção Tudo ou nada, você pode usá-lo em conjunto com ASP.NET e usar que o ASP.NET significa para uma estrutura geral do design.Você só precisa gerenciar a integração do estilo entre as tecnologias da Web (CSS + HTML) padrão com o estilo no Silverlight.  Portanto, tenha isso em mente se você for essa rota.

Você pode encontrar mais informações sobre as diferenças entre o WPF e Silverlight em msdn.microsoft.com/library/cc903925(VS.95).aspx.

SketchFlow

SketchFlow apenas foi lançado como da redação deste artigo.  Enquanto SketchFlow suporta WPF e Silverlight (embora um projeto SketchFlow atinge uma única tecnologia), ele tem algumas das suas próprias idéias sobre gerenciamento de estrutura de design.  E como muitos desenvolvedores ele usará a protótipo para essas tecnologias .NET, eu pensei que vale a pena mencionar.  Embora SketchFlow fica sobre essas duas tecnologias, ele tem alguns terminologia diferente, ou seja, telas e telas de componente.

Uma tela é basicamente o que parece — uma tela que pessoas navegar para.(Você pode criar conexões de navegação visual entre telas no mapa de SketchFlow.)  O que isso geralmente significa é que uma tela tem UI distinto suficiente para garantir sua própria vida e layout.  Telas de componente são essencialmente uma maneira fácil compartilhar bits de uma tela com outras telas, muito semelhantes a controles de usuário.(Na verdade, uma tela de componente criará UserControls no código).

Durante a parte do ponto da criação de protótipos, especialmente antecipado protótipos, é pensar não mais coisas como estruturas de design, há um ponto em que talvez queira fazer isso.  Se você obtiver muito além da criação de protótipos, uma página ou dois e pretende fazer uma iteração e refinar ainda mais, você precisará iniciar pensar sobre como compartilhar os bits comuns para fazer o protótipo mais gerenciáveis.  Dito isso, embora não haja um texto para executar avanço de protótipo SketchFlow implementação final, que não ’s o principal ponto de SketchFlow. 

A pensar em uma estrutura de projeto de implementação detalhada provavelmente pode esperar até que você decidir começar a criação, em que ponto você pode aproveitar alguns ou muitas das telas do componente e até mesmo alguns dos estilos, estados (no Gerenciador de estado visual) e storyboards relacionados se você ou seus designers vá para o problema de defini-los em detalhes.

Usando controles comuns

Em adição aos estruturas e ferramentas que ajudam você implementam uma estrutura de design consistente dentro e entre seus aplicativos, você deve também pensar sobre design framework consistência em termos de como as soluções mapeiam para outras estruturas de design.Isso é onde os padrões de interface do usuário podem ajudar a escolher e implementar as formas melhores, mais comuns de solução de problemas relacionados.

Novamente, parece que os desenvolvedores unconsciously (ou não) tiver feito isso todo junto tentando simular soluções comuns que os usuários finais estão familiarizados com (como o Excel e Outlook) e, claro, usando os controles fornecidos na caixa.  Muitos de nós don’t pensar nisso, mas algo pode ser dito para consistência fornecida por um conjunto de controle limitado.Nós don’t precisa se preocupar muito a implementação, digamos, um seletor drop down (consulte quince.infragistics.com/#/Main/ViewPattern$pattern=Drop+Down+Chooser) porque temos que na caixa.Da mesma forma, para obter mais informações interfaces complexas mas familiares que não estão em principais bibliotecas do framework, nós pode tirem proveito do trabalho que terceiros fazer para fornecer implementações boas para itens como OutlookBar, a faixa de opções e assim por diante.

Você pode considerar esses controles comuns como um tipo de estrutura de projeto compartilhado, universal dentro do qual a maioria dos aplicativos (negócios) são criados e você deve aproveitar a estrutura de design compartilhada para aproveitar essa familiaridade.  Algumas já disse que intuitivo é com freqüência simplesmente apenas o que é familiar (consulte, por exemplo, portal.acm.org/citation.cfm?id=584629), portanto, usando controles de interface do usuário familiares pode ir um longo caminho em direção ao ajudar suas interfaces parece intuitivo.

Ao mesmo tempo, tenha em mente que você ainda precise escolher os controles com base nas necessidades do seu aplicativo e não se aplicar unthinkingly um controle familiarizado apenas porque está familiarizado ou porque, por exemplo, ele é usado no Microsoft Office.  Ela pode ficar sem dizer, mas urgentes para obter coisas, Acho que nós ’ve todos os controles incorretas assim.

Uma coisa que pode ajudá-lo a fazer tais chamadas julgamento mais rapidamente é uma boa biblioteca de padrão de interface do usuário e UX como Quince (quince.infragistics.com).Leia o problema, Solution, contexto e raciocínio para os padrões — eles geralmente ’re relativamente curtos e pode fazer muito para ajudar você a distinguir se um determinado padrão (que geralmente é implementado como um controle) é adequado para seu contexto.Muitas alternativas são oferecidas e você pode usar a marcação para explorar outras possíveis alternativas.

Resumindo

Agora que você tivesse este tour rápido de habilitação de recursos .NET em várias tecnologias .NET da interface do usuário, você deve poder aplicar e aproveitar seu (ou seu designer ’s) esforços para definir uma estrutura consistente e algo que é gerenciável para poder refiná-lo durante o desenvolvimento e continuar a fazer uma iteração e refiná-lo como manter o aplicativo em produção torná-lo.