Windows 10 e as novas interações que potencializam suas apps através do design Win 202
Alessandra Rosa Technical UX Evangelist @ux_rosa
Marlon Luz Technical Evangelist @marlonluz
Agenda
Identidade Visual e Design da Microsoft
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ê
Como o Windows torna o design fácil
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
Fácil de projetar em toda gama de dispositivos
Algoritmo de escalonamento
Effective Pixels
O quê eu estou projetando?
Considerações do dispositivo
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
Planejando seu design
Planejando seu design breakpoints epx 320 720 1024 phone phablet & tablet desktop
Técnicas de UI Adaptativa
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
Adaptive UI
Tailored Customize o design
Como construir uma Adaptive UI
Estados Visuais Layouts únicos para estados distintos Implementar automaticamente transições de estado Design e preview de estados e transições
Estados visuais permitem definir diferentes layouts selecionáveis que podem ser aplicadas à sua UI
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); }; }
Adaptive Triggers com zero código
Adaptive Triggers Transição entre estados sem código Dois triggers nativos <VisualState x:name="visualstate500min"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="501" /> </VisualState.StateTriggers> </VisualState>
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>
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
Demo Construindo uma Adaptive UI
Triggers customizáveis para suportar cenários especiais
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
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
Desenvolvedores e Designers
Q&A Visite o espaço Ask the Experts, próximo dos expositores
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
Continue sua capacitação Microsoft Virtual Academy http://aka.ms/ch9 http://aka.ms/mva