Windows 10 e as novas interações que

Transcrição

1 Windows 10 e as novas interações que potencializam suas apps através do design Win 202

2 Alessandra Rosa Technical UX

3 Marlon Luz Technical

4 Agenda

5 Identidade Visual e Design da Microsoft

6 Nós queremos que você use SEUS projetos: SUAS Fontes, Ícones, Design, etc... Mas se você não tem um, ou precisa de inspiração, nós compartilhamos nossas inspirações e pesquisas com você

7 Como o Windows torna o design fácil

8 A jornada de Convergência Xbox 360 Convergência do Kernel Xbox One Windows 8 Windows 8.1 Core e plataforma unificados Convergência do App Model Windows Phone 8 Windows Phone 8.1 Fácil para os usuários se manterem atualizados Windows Phone 7.5 Windows on Devices

9 Fácil de projetar em toda gama de dispositivos

10

11 Algoritmo de escalonamento

12 Effective Pixels

13

14 O quê eu estou projetando?

15 Considerações do dispositivo

16 Planejando o seu design Phone Viewing Distance: 16.3 Tablets and 2 in 1 Viewing Distance: 20 Small and Large Laptops Viewing Distance: 24.5 Small and Large Desktop Monitors Viewing Distance: 28 TV Viewing Distance: 84

17 Planejando seu design

18 Planejando seu design breakpoints epx phone phablet & tablet desktop

19 Técnicas de UI Adaptativa

20 Planejando seu design Reposicione os elementos na tela Revele Mostre Redimensione itens na tela Redesenhe - Substitua Refaça os fluxos se necessário Reorganize a arquitetura

21 Adaptive UI

22 Tailored Customize o design

23 Como construir uma Adaptive UI

24 Estados Visuais Layouts únicos para estados distintos Implementar automaticamente transições de estado Design e preview de estados e transições

25 Estados visuais permitem definir diferentes layouts selecionáveis que podem ser aplicadas à sua UI

26 Como definir o estado visual no código VisualStateManager.Goto(element, state, transition) public MainPage() { this.initializecomponent(); this.sizechanged += (s, e) => { var state = "VisualState000min"; if (e.newsize.width > 500) state = "VisualState500min"; else if (e.newsize.width > 800) state = "VisualState800min"; else if (e.newsize.width > 1000) state = "VisualState1000min"; VisualStateManager.GoToState(this, state, true); }; }

27 Adaptive Triggers com zero código

28 Adaptive Triggers Transição entre estados sem código Dois triggers nativos <VisualState x:name="visualstate500min"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="501" /> </VisualState.StateTriggers> </VisualState>

29 Visual State setter Define um valor simples, escalar Não invoca um storyboard <VisualState.Setters> <Setter Target="MyText01.FontSize" Value="24" /> <Setter Target="MyImage.Stretch" Value="UniformToFill" /> <Setter Target="MyImage.Height" Value="150" /> </VisualState.Setters>

30 Controle XAML RelativePanel Um ou dois controles filhos atuam como elementos de ancoragem Outros filhos são relativos às âncoras RelativePanel simplifica a Adaptive UI

31 Demo Construindo uma Adaptive UI

32 Triggers customizáveis para suportar cenários especiais

33 public class DeviceFamilyTrigger : StateTriggerBase { private string _devicefamily; public string DeviceFamily { get { return _devicefamily; } set { var qualifiers = Windows.ApplicationModel.Resources.Core.ResourceContext.GetForCurrentView().QualifierValues; if (qualifiers.containskey("devicefamily")) SetActive(qualifiers["DeviceFamily"] == (_devicefamily = value)); else SetActive(false); } } } Custom Adaptive Triggers Utilize para lidar com casos especiais

34 Construindo Views Customizadas (Tailored) Construa uma experiência única para diferentes dispositivos Opção 1: construa páginas separadas para cada família Utilize MRT para determinar a família var qualifiers = Windows.ApplicationModel.Resources.Core.ResourceContext.GetForCurrentView().QualifierValues; if (qualifiers["devicefamily"] == "DeviceFamily-Xbox") else // otimizado para o Xbox rootframe.navigate(typeof(mainpage_xbox), e.arguments); rootframe.navigate(typeof(mainpage), e.arguments); Opção 2: use XAML views

35 Desenvolvedores e Designers

36 Q&A Visite o espaço Ask the Experts, próximo dos expositores

37 Sessões relacionadas WIN201 - Crie uma experiência incrível em sua app com os recursos da Universal Windows Platform WIN203 - Cartola FC: Migrando uma App Universal 8.1 para o Windows 10 WIN206 - Windows Store no Windows 10

38 Continue sua capacitação Microsoft Virtual Academy