• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Windows Phone 7 Development
 

Windows Phone 7 Development

on

  • 328 views

A brief introduction to application development for Windows Phone 7

A brief introduction to application development for Windows Phone 7

Statistics

Views

Total Views
328
Views on SlideShare
328
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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&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.

Windows Phone 7 Development Windows Phone 7 Development Presentation Transcript

  • <StackPanel > <TextBox Text="Hello" /> <Button Content="Click"/></StackPanel>
  • Rappresenta unarea scorrevole chepuò contenere altri elementi visibili.Il tipo di elemento contenuto puòessere a sua volta una composizionedi 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>
  • <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>
  • Permette di posizionare controlliin 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>