Design Patterns
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Design Patterns

on

  • 565 views

 

Statistics

Views

Total Views
565
Views on SlideShare
565
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Design Patterns Presentation Transcript

  • 1. Design patterns Tersis Zonato 2011
  • 2. Design patterns de design que podem ser repetidas para• Soluções problemas comuns• Captar“boas práticas” que resolvam as reais necessidades do usuário• Entre princípios e diretrizes (guidelines)• ...um vocabulário de design.VEEN (2001)
  • 3. Design patterns• Onde estou?•O que é apresentado aqui?• Onde posso ir?INSTONE (2000)
  • 4. “Qualquer página web dispõe de três áreas principais” VEEN (2001)
  • 5. Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. DirectState Editing. Grid Cell Editing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In Context Progress. Inline Status. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate. Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. SlideOut. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate ThenSuggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition. Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide Transition. Rich Internet Object. Available. Selected. BILL SCOTT (2007)
  • 6. BreadcrumbsProblema:“Onde estou?”Solução:Lista de links que dão a localização de onde ousuário esteve e onde está. Mostra a estrutura denavegação do site.
  • 7. Breadcrumbs
  • 8. Linhas alternadasProblema:Dificuldade de conectar as informações em umalinha.Solução:Alternar a cor de fundo para diferenciar cada linha.
  • 9. Linhas alternadas
  • 10. Área de statusProblema:Providenciar informação para o usuário seminterromper a atividade principal.Solução:Usar uma área dedicada para o status do sistemasem interromper outras tarefas.
  • 11. Área de status
  • 12. Skins e templatesProblema:A aplicação deve ter visual diferente dependendo docenário.Solução:Criar uma arquitetura “look and feel” para aaplicação, permitindo a customização pelo usuário.
  • 13. Skins e templates
  • 14. Links de açãoProblema:Comandos devem ser mostrados de acordo com ahierarquia.Solução:Usar links ao invés de botões minimizam o ruídovisual ou contrastam com botões para separar deacordo com a importância.
  • 15. Links de ação
  • 16. Listas em cascataProblema:Selecionar uma ou mais coisas em uma grandequantidade de informação que são agrupadas deforma hierárquica.Solução:Mostrar listas próximas umas das outras para osusuários buscarem as informações de formahierárquica.
  • 17. Listas em cascata
  • 18. Painéis “abre-fecha”Problema:Muitas coisas devem constar na tela, mas nãoprecisam ser mostradas a todo momento.Solução:Inserir controles, ferramentas e outras informaçõesem painéis em que os usuários podem abrir e fecharquando necessário.
  • 19. Painéis “abre-fecha”
  • 20. CantosProblema:Interface com visual plano e desinteressante queprecisa de elementos simples.Solução:Usar arrendondado, angular, cortes especiais eoutros recursos para enriquecer graficamente olayout.
  • 21. Cantos
  • 22. Visualização alternativaProblema:Vários tipos de visualização são necessárias parauma mesma interface.Solução:Criar múltiplas visualizações da mesma interface.
  • 23. Visualização alternativa
  • 24. Seleção de dataProblema:Datas podem ter inúmeras representações variandoconforme localidade e preferência pessoal.Solução:Providenciar uma representação visual das datas,facilitando a inserção em formato consistente.
  • 25. Seleção de data
  • 26. Menu dropdownProblema:Inúmeros comandos a serem escolhidos, masapresentar cada um deles como um botão podepesar muito no layout.Solução:Use um botão com indicador, que quandoselecionado, mostra mais comandos relacionados aoprimeiro.
  • 27. Menu dropdown
  • 28. Navegação facetadaProblema:O usuário quer encontrar algo, mas não tem ideiados parâmetros.Solução:Mostrar diversas faces, separadas por contexto,onde o usuário pode filtrar os resultados.
  • 29. Navegação facetada
  • 30. PaginaçãoProblema:Listas longas, como resultados de busca.Solução:Apresentar os itens agrupados entre múltiplaspáginas com número consistente de itens por páginae mostrar controles para navegação.
  • 31. Paginação
  • 32. Barra de progressoProblema:Não é legal deixar as pessoas esperando!Solução:Mostrar um indicador do progresso atual ou pelomenos dizer que algo está sendo executado nomomento.
  • 33. Barra de progresso
  • 34. Muito obrigado! @tersis