1. 1. INTERFACES e NAVEGAO
2. 2. Interface Dispositivo (fsico ou lgico) que estabelece a adaptao entre dois sistemas independentes. Interface, o ponto, rea ou superfcie ao longo da qual duas substncias ou outras coisas qualitativamente diferentes se encontram, ou seja, um camada situada entre eles que trabalha como um tradutor, fazendo com que ambos se entendam, a fim de se comunicarem. (Dicionrio informal - SP) Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014
3. 3. Expectativa do usurio Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 http://blog.teamtreehouse.com/ Velocidade Facilidade de acesso Ergonomia visual
4. 4. Preocupaes do Designer de Interface Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 http://aaapucrio.com.br Gerenciamento de informaes Ergonomia visual (imagens e texto) Gerenciamento do peso da programao (necessidade de banda)
5. 5. Arquitetura de informaes - menus Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 http://jquery-php-mysql-dynamic-dropdown.windows.novellshareware.com Conjunto de opes Fixos ou expansveis Devem seguir um aninhamento lgico
6. 6. Menu TV Digital Interativa Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 http://www.youtube.com/watch?v=k9KUnfdrOXk Menu sobre o vdeo (encobre parte do programa) Menu separado com diminuio do vdeo
7. 7. Exemplos de menus TV Digital Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 http://www.youtube.com/watch?v=4eJ1p4QmHMg&feature=player_detailpage Sobreposto ao vdeo (com transparncia ou no) http://www.youtube.com/watch?v=4eJ1p4QmHMg&feature=player_detailpage Com diminuio do vdeo
8. 8. Exemplos de aplicativo 2a tela Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 http://www.youtube.com/watch?v=0n25pyrg_P8&feature=player_embedded Reconhecimento de imagem http://www.youtube.com/watch?v=sGxkGvvelDQ&feature=player_detailpage
9. 9. Design de Interface Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 Disponibilizar informaes de fcil acesso de maneira confortvel Maior problema: dispositivos diferentes
10. 10. Profa. Dra Vnia Valente vania@faac.unesp.br Tamanhos de tela mobile
11. 11. Profa. Dra Vnia Valente vania@faac.unesp.br Tamanhos de tela monitores / TV
12. 12. Mesma informao em telas diferentes Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 http://www.digitalfamily.com
13. 13. Opo para a web: Design Responsivo Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 Site responsivo apresenta o layout de acordo com o tamanho da tela e faz a adequao do contedo. Sites responsivos podem ser vistos atravs de qualquer equipamento com acesso Internet, independente de seu tamanho, sem exigir demasiado uso da rolagem da tela.
14. 14. Design Responsivo - diagramao Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 http://www.digitalfamily.com
15. 15. Design Responsivo - exemplo Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 http://www.digitalfamily.com
16. 16. Design Responsivo - exemplo Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 http://interim.it/
17. 17. Design Responsivo - exemplo Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 http://spigotdesign.com/
18. 18. Opo para a TV Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014 Utilizar cones simples Priorizar a legibilidade (pouco texto, fonte facilmente legvel) O vdeo a atrao principal, os menus no devem ser impedimento para seu recebimento.
19. 19. Links sugeridos 10 Mistakes in Icon Design - Denis Kortunov http://turbomilk.com/blog/cookbook/icon_design/10 _mistakes_in_icon_design/ Go Mobile with C# and Xamarin http://channel9.msdn.com/Events/Build/2014/3-653 10 Dicas para Design Responsivo http://www.designinterativo.etc.br/category/design Padres Complexos de Navegao no Design Responsivo - Will Sales http://tableless.com.br/padroes-complexos-de- navegacao-no-design-responsivo/ Responsive Web Design: 50 Examples and Best Practices http://designmodo.com/responsive-design-examples/ Ps-Graduao em TV Digital Profa. Dra. Vnia Valente Unesp - 2014
20. 20. Profa. Dra Vnia Valente vania@faac.unesp.br