Successfully reported this slideshow.
Your SlideShare is downloading. ×

Windows Phone 7 Development

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Windows Phone 7 Development
Windows Phone 7 Development
Loading in …3
×

Check these out next

1 of 33 Ad

Windows Phone 7 Development

Slide della serata post-brainpirlo con l'introduzione al design e allo sviluppo sulla piattaforma Windows Phone 7, a cura di Claudio Gandelli (Looptribe) e Michele Capra (OrangeCode)

Slide della serata post-brainpirlo con l'introduzione al design e allo sviluppo sulla piattaforma Windows Phone 7, a cura di Claudio Gandelli (Looptribe) e Michele Capra (OrangeCode)

Advertisement
Advertisement

More Related Content

Advertisement

Similar to Windows Phone 7 Development (20)

Recently uploaded (20)

Advertisement

Windows Phone 7 Development

  1. 1. <StackPanel > <TextBox Text="Hello" /> <Button Content="Click"/> </StackPanel>
  2. 2. Rappresenta un'area scorrevole che può contenere altri elementi visibili. Il tipo di elemento contenuto può essere a sua volta una composizione di elementi <ScrollViewer BorderThickness="0"> <ItemsControl Name="Posts" > <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Tap="ShowDetail” > <TextBlock Text="{Binding Path=Title}” /> <TextBlock Text="{Binding Path=Description}” /> <TextBlock Text="{Binding Path=PubDate}” /> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </ScrollViewer>
  3. 3. <controls:Panorama Title="WebDeBs"> <controls:Panorama.Background> <ImageBrush ImageSource="PanoramaBackground.png"/> </controls:Panorama.Background> <!--Panorama item one--> <controls:PanoramaItem Header="home" Foreground="Black"> <ScrollViewer BorderThickness="0"> ... </ScrollViewer> </controls:PanoramaItem> <!--Panorama item two--> <controls:PanoramaItem Header="eventi" Foreground="Black"> <ScrollViewer BorderThickness="0"> ... </ScrollViewer> </controls:PanoramaItem> <!--Panorama item three--> <controls:PanoramaItem Header="incontri" Foreground="Black"> <ScrollViewer BorderThickness="0"> ... </ScrollViewer> </controls:PanoramaItem> </controls:Panorama>
  4. 4. Permette di posizionare controlli in un’area definita dall’utente. <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="80"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <StackPanel> <TextBox Style="{StaticResource TextBoxStyle}" Text="Hello" /> <Button Style="{StaticResource ButtonStyle}" Content="Click"/> </StackPanel> <TextBox Text="Test" Grid.Row="1" Grid.Column="1"/> <Button Content="Send" Grid.Row="2" Grid.Column="0"/> </Grid>

Editor's Notes

  • Peraderire al design language in fasedi design gliuniciprincipidaseguiresonoquelliriportatisuquesta slide.L’applicazionecheandiamo a realizzaredeveessereClean, Light, Open and FastRidurre al minimoglielementichecompongonol’interfaccia, sianelcasodielementipuramentevisualisia in sensodi feature nellasingolapagina.Focus sul task primariodella UI, e fare in modoche la UI siaresponsiva, pratica, veloce (open nelsensodispazioaperto)Celebrate TypographyL’interfaccia del sistema è estremamente tipografica, fare in modo di trasmettere significato attraverso gli stili tipografici (critica alla presenza di un solo font)Alive in MotionIl movimento conferisce carattere alla UI, ma è anche un elemento di usabilità, deve suggerire all’utente alvune informazioni di navigazione e lo aiuta con l’orientamento nell’applicazione.Content, Not ChromeViene promossa l’interazione diretta col contenuto, ridurre i bottoni, gli elementi visuali, abbandonare le interfacce scheumorfiche è un elemento fondamentale per metroAuthentically DigitalCome dicevamo parlando della scuola bauhaus il materiale deve suggerire la forma e far bella la funzione di un oggetto. Ecco che il materiale ‘virtuale’ del pixel acquista un suo valore e l’interfaccia deve essere unicamente realizzata per dar forma a contenuti digitali, senza riprodurre o mimare elementi di vita quotidiana
  • Lo sviluppodelleui sui telefoni e suglismartphonehannodallalorocomparsaseguitoil trend delleinterfacce per desktop:Mi riferisco al fattoche le interfacce desktop sisono in lineadimassimasviluppate, dallanascitadeisistemi a finestre, verso unamimicasemprepiùprecisadioggettireali per richiamaremetaforeinterpretabilidall’utente.Il modellodi base non è maicambiato, le iconeservonoda shortcut visuale a determinate funzioni del dispositivo e anche le interfaccedelleapplicazionistessespessoriproducono in manieramaniacaleartefattireali, introducento a volte diversitàgrossolane con glielementifisicicherichiamano (bastipensare a un’app come iCal cheriproduce in maniera molto realisticaun’agendacartacea, sebbene poi offrapossibilitàdi scroll deicontenuti molto diverse daquellecheavremmo con l’oggettofisico.
  • I proncipidi metro applicati al design diunanuova UI per I sistemi wp7 hannoportatoall’abolizionedell’overheadvisuale, cercandodiutilizzare I contenutistessi come oggetti per cui siaprevistal’interazione con l’utente.Le ‘live tiles’, ossiaquellepiastrellechesostituisconoilconcettodi ‘icona’ in wp7, contengonogeneralmenteuna parte lrilevantedewlcopntenutodellafunzionechevanno a richiamare (ne sonoottimiiesempi la tile per I contatti o quella per le immagini’ o quelle ‘Io’ in questoesempio
  • Vista la start screen con le tiles ilresto del sistemaadotta lo stesso pattern diinterazionedeipiùcomuni device sulmercato. Nella slide è descrittoil pattern hub&amp;spockecheaffrontailproblema del design diuna UI con tanti ‘plugin’ diversi e ‘scollegati’ chedevonoessereraggiungibilida un hub centrale, senzachetuttocolleghitutto (per questionidispazio, confusione, workflow semplificato)Neglialtri device in generel’hub è la start screen con le icone, qui c’èuna screen secondariaalla start screen con l’elencoditutte le app e unaseriedi hub secondari per un ulterioreraggruppamentodei task in base allafunzione… vediamoqualcheesempionella slide successiva
  • Esempidi hub secondari: esperienze integrate a seconda del contesto…Navigandoilsistema come dicevamo le animazionifunzionanodastrumentodiorientamento e usabilità, per questomotivosidifferenzianoalcunetipologiedianimazioni con scopidifferenti: (prox slide)
  • Turnstile: per passareda app a app, o daunospazio a unodiversoContinuum: per andareneldettagliodiqualcosa, approfondendoilconcettoprecedenteSlide: per introdurreuno scenario ‘senzauscita’, come una popupSwivel: per schermateparziali (come il menu a seguitodellapressione del tastorispondi a una mail: rispondi – rispondi a tutti – inoltra)
  • La strutturadellepaginedellevarie apps è coerente in tuttoilsistema e prevedealcuniconcettifondamentali:
  • TextBoxmappadirettamentel’oggettoTextBox del clr e Text èunaproprietà di tale oggettoStessodiscorso per button.StackPanelè un contenitorechedispone I suoifiglisuunariga o unacolonna.

×