O documento apresenta a história da Lamborghini e padrões de projeto de interface do usuário, incluindo menu, breadcrumbs, gallery, cards, activity stream, module tabs e fat footer. É fornecida uma breve explicação de cada padrão e como ele resolve problemas comuns de design.
2. História da Empresa
Ferruccio Lamborghini (1963);
Tratores;
Lamborghini x Ferrari;
"Ah, é? Agora serei seu rival e te mostrarei
como se faz um carro de verdade"
350 GT (1964);
Até hoje foram produzidos 27 modelos;
3. Padrão de Projeto
São pontos de referência padrão que resolvem o problema de design comum;
Forma com que a pessoa interage e controla um dispositivo, software ou
aplicativo;
UX Design: está relacionado com a experiência do usuário e com seus
sentimentos ;
UI Design: maneira como o usuário alcançara essa experiência;
4. UI Design: Menu
Problema: O usuário precisa navegar entre as seções de um site, mas o espaço
para mostrar essa navegação é limitado;
Solução: Menu Horizontal Dropdown;
5. UI Design: Breadcrumbs
Problema: O usuário precisa saber sua localização na estrutura hierárquica do
site para possivelmente navegar de volta para um nível mais alto na hierarquia;
Solução: Breadcrumbs;
6. UI Design: Gallery
Problema: O usuário precisa procurar uma coleção de imagens de alta qualidade;
Solução: Gallery;
7. UI Design: Cards
Problema: O usuário precisa procurar conteúdo de diferentes tipos e tamanhos;
Solução: Cards;
8. UI Design: Activity Stream
Problema: O usuário quer obter uma visão geral das ações recentes em um
sistema que são interessantes da sua perspectiva.;
Solução: Activity Stream;
9. UI Design: Module Tabs
Problema: O conteúdo precisa ser separado em seções e acessado por meio de
uma única área de conteúdo usando uma estrutura de navegação plana que não
atualize a página quando selecionada;
Solução: Module Tabs;
10. UI Design: Fat Footer
Problema: Os usuários precisam de um mecanismo que lhes permita acessar
rapidamente seções específicas de um site ou aplicativo ignorando a estrutura de
navegação;
Solução: Fat Footer;
12. UI Design: Autocomplete
Problema: O usuário precisa de reconhecimento de pesquisa auxiliada ao
executar tarefas de busca que são difíceis de lembrar ou facilmente digitar
incorretamente;
Solução: Autocomplete
14. Referências Bibliográficas
Automobili Lamborghini. Disponível em: <https://www.lamborghini.com/en-en/>
Acesso em: 02 de Novembro de 2016;
Lamborghini. Disponível em: <https://pt.wikipedia.org/wiki/Lamborghini> Acesso
em: 02 de Novembro de 2016;
Design patterns. Disponível em: <http://ui-patterns.com/patterns> Acesso em: 02
de Novembro de 2016.
15. Referências Bibliográficas
MATIOLA, Willian, O que é UI Design e UX Design? Disponível em: <
http://www.designculture.com.br/o-que-e-ui-design-e-ux-design/> Acesso em: 02
de Novembro de 2016.
All Design Patterns. Disponível em:
<https://developer.yahoo.com/ypatterns/everything.html/> Acesso em: 02 de
Novembro de 2016.
enquanto fazia uma revisão de sua Ferrari na fábrica, e foi reclamar a respeito do sistema de embreagem de sua Ferrari, com o qual Ferruccio já andava há tempos insatisfeito.
Tratado com displicência por Enzo, recebeu uma resposta de nível semelhante a: "Você é um agricultor! Continue, então, dirigindo seus tratores e não fale dos meus carros".
UI Design(User Interface) é a interação entre a interface e o usuário, já UX (User Experience)é como essas interações trabalharão o lado emocional do usuário, a sua experiência com o sistema.
Use quando há entre 2 e 9 seções de conteúdo que precisam de uma estrutura de navegação hierárquica. Use quando sua funcionalidade se assemelha a uma de uma aplicação desktop. Imita a metáfora. Não use quando houver necessidade de selecionar a localização da seção atual do site. Em seguida, use as Guias de navegação .
Use quando a estrutura do site é particionada em seções que podem ser divididas em mais subsecções e assim por diante.Use quando o usuário é mais provável ter desembarcado na página de uma fonte externa (outro site deep link para a página da web em questão). Por exemplo, a partir de um blog ou um motor de busca.Não use no nível mais alto da hierarquia (geralmente a página de boas-vindas) Não use sozinho como principal navegação do site.
Use quando o usuário precisa navegar por uma série de imagens de forma seqüencial.
Use para impor uma sensação de início e fim.
Uso quando o usuário gostaria de tanta tela real estate possível reservado para exibir imagens em alta resolução.
Não use quando o objetivo é dar ao usuário uma visão geral rápida de várias imagens ao mesmo tempo
Use para exibir conteúdo composto por diferentes elementos Use para mostrar elementos cujo tamanho ou ações suportadas variam - como fotos com legendas de comprimento variável. Use quando exibir conteúdo que ... Como uma coleção, consiste em vários tipos de dados (imagens, filmes, texto)
Não requer comparação direta
Suporta conteúdo de comprimento altamente variável (legendas, comentários)
Contém conteúdo interativo
Use para manter os usuários atualizados com suas atividades de contatos Use quando você quiser solicitar que seus usuários respondam às ações de outros usuários Use quando você deseja expor e promover a funcionalidade do seu sistema, orientando as pessoas pelas ações dos outros. Não use quando seu sistema não tem atividade de usuário como um de seus elementos-chave.
Use quando há espaço visual limitado eo conteúdo precisa ser separado em seçõesUse quando você precisar manter a atenção do usuário contornando a atualização da página.Use quando o conteúdo de cada guia tiver uma estrutura semelhante
Use quando você precisar mostrar qual guia está sendo exibida no momento
Não use quando o conteúdo dentro de cada painel funcionaria tão bem em sua própria página separada.
Use para atacar uma estrutura hierárquica de um site. Use quando existem páginas específicas ou funções que são mais freqüentemente usadas do que outras partes do site. Use a caixa de atalho para mostrar essas escolhas, a fim de encurtar o caminho para os usuários. Use quando você quer atalhos para páginas que estão possivelmente em níveis hierárquicos diferentes da página. Também pode ser usado como navegação quando curto no espaço, embora não seja aconselhável.
Use para ajudar com questões de ambigüidade, quando um item pode ser inserido de várias maneiras Use quando o tipo de informação inserida pode ser facilmente combinado com uma informação específica no sistema. Não use se você deseja fornecer ao usuário uma visão geral de todas as opções disponíveis.
Use para ajudar com questões de ambigüidade, quando um item pode ser inserido de várias maneiras Use quando o tipo de informação inserida pode ser facilmente combinado com uma informação específica no sistema. Não use se você deseja fornecer ao usuário uma visão geral de todas as opções disponíveis.