29. 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>
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.