Aprile 2018
Volume 33 Numero 4
Il presente articolo è stato tradotto automaticamente.
Fluent Design - Uso di Fluent: azione gesto scorrimento rapido con un dito e animazioni connesse
Dal Lucas Haines | 2018 aprile
Tipi di più dispositivi da affrontare, da Smartphone universali e tradizionale desktop e portatili PC, Visualizza grande formato touchscreen e anche le piattaforme di realtà aumentata e virtuali, ad esempio HoloLens e gli sviluppatori di applicazioni dispongono di più. Il sistema Microsoft Office Fluent di progettazione è progettato specificamente ed in costante evoluzione per renderlo è più semplice per gli sviluppatori di integrare le funzionalità più recenti per l'ecosistema dispositivo misto. Le funzionalità di Microsoft Office Fluent aggiunte alla piattaforma Windows 10 nell'aggiornamento creatori rientrano sono una potente nella fattispecie, consentendo alle applicazioni sentirsi naturale, indipendentemente su quali dispositivi vengono eseguite.
Funzionalità dell'interfaccia utente Office Fluent come combinare chiaro, Sfocatura e profondità per consentire un'esperienza intuitiva e accattivanti che consentono agli utenti di eseguire altre operazioni. Tuttavia, fino a poco tempo sfide rimasto per gli utenti che tentano di get al meglio i propri dispositivi. Con Windows 10 autunno creatori di aggiornamento, barra aggiunge due funzionalità che oggi sia problemi: Scorrere verso il movimento azioni e le animazioni connesse.
Scorrere rapidamente le azioni di movimento
Si tratta come non sorprende vendite dei PC dotata touchscreen continuano a crescere man. La domanda per gli sviluppatori viene illustrato come consentire agli utenti di eseguire altre operazioni, consentendo di modelli di interazione che funzionano sia per i PC touchscreen e classica tastiera e mouse.
La risposta viene fornito sotto forma di comandi per gli oggetti che è stato rilasciato da anni tramite un pulsante destro del mouse o un toccare e tenere premuto. Questi metodi ripetuta e true siano comprese appieno, ma con un bit di lavoro è possibile compilare in tasti di scelta rapida che consentono di sfruttare le funzionalità dell'ecosistema di dispositivo per renderli migliori.
Immettere le azioni di movimento, che sono eccellenti tasti di scelta rapida che funzionano per utenti tocco e tastiera. Le azioni di movimento sono un utile tasti di scelta rapida per i comandi contestuali in genere nascoste dietro a un menu di scelta rapida o su una barra dei comandi separato. Altri esempi di azioni di movimento sono pulsanti al passaggio del mouse, scorrere rapidamente e tasti di scelta rapida.
Scorrere rapidamente per l'esecuzione di comandi non è un concetto nuovo. Il modello di interazione esistente in Progettazione materiale Google e Apple iOS. È utile per la valutazione rapidamente gli elementi in un elenco, ad esempio, l'eliminazione di foto o messaggi di posta elettronica in un tipo di scorrimento, o per evidenziare i comandi utilizzati più di uno scenario. Il controllo Scorri rapidamente verso XAML è molto semplice aggiungere questa funzionalità eccellente per le app della piattaforma UWP (Universal Windows).
Il controllo Scorri rapidamente verso contiene due comportamenti, modalità rivelare e modalità di esecuzione:
Evidenziare modalità può visualizzare uno o più comandi associati a un elemento selezionato in modo che un utente può selezionare tra loro. Ad esempio, se si dispone di un elenco di messaggi e si desidera abilitare rapidamente l'inoltro, la creazione di un completamento promemoria o pianificare una riunione, evidenziare modalità questo è reso possibile senza forzare l'utente di spostarsi tra le schermate. Può essere molto potente per l'utente "in viaggio".
Eseguire la modalità viene completato il comando con un movimento semplice. Esempio più comune e semplice sarebbe delete. Non è più necessario questo messaggio e si desidera dimenticare che mai esistenti. Un movimento semplice (ad esempio, un Scorri rapidamente verso sinistra) che corrisponde nel Cestino. Eseguire in modalità non deve necessariamente essere distruttivi. Un altro ottimo esempio è scorrere rapidamente per salvare. In una colonna si potrebbe che avere un elenco di clienti e quando si seleziona una un riquadro dei dettagli viene visualizzato a destra. Dopo le modifiche apportate dall'utente al form o il record del cliente egli passa semplicemente l'elemento per salvare le modifiche. Semplice e veloce.
Tuttavia, prima di poter creare il comportamento di scorrere rapidamente nell'elenco, desidera impostare SymbolIconSource per l'applicazione. Ciò fornisce un modo molto semplice per accedere alle icone per l'applicazione. Aggiungere i simboli page.resources mi consente di aggiungere facilmente icone dove necessario in un secondo momento nel codice. Indipendentemente dall'implementazione Scorri rapidamente verso, questo è ideale per codice più leggibile e usufruendo di IntelliSense in Visual Studio. Il codice è il seguente:
<Page.Resources>
<SymbolIconSource x:Key="ReplyIcon" Symbol="MailReplyAll" />
<SymbolIconSource x:Key="PinIcon" Symbol="Pin" />
<SymbolIconSource x:Key="DeleteIcon" Symbol="Delete" />
</Page.Resources>
Con le risorse caricate, è possibile iniziare a implementare il movimento Scorri rapidamente verso API su un elemento. Visualizzazioni elenco sono un elemento molto comune per implementare azioni scorrere rapidamente, in modo che utilizzeranno con, come illustrato nel codice in figura 1.
Figura 1 implementazione scorrere rapidamente su un controllo ListView
<ListView x:Name="MainList" Width="400" Height="500">
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<SwipeControl x:Name="LVSwipeContainer"
LeftItems="{StaticResource RevealOptions}"
RightItems="{StaticResource ExecuteDelete}">
<StackPanel Orientation="Vertical" Margin="5">
<TextBlock Text="{x:Bind}" FontSize="18" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Data Template Font" FontSize="12" />
</StackPanel>
</StackPanel>
</SwipeControl>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Si noti che nel figura 1 che si sta utilizzando la proprietà LeftItems e RightItems nell'API SwipeControl. LeftItems determina cosa accade quando l'utente passa a sinistra (in questo caso, RevealOptions) e inserisce i pulsanti di comando per il lato destro.
L'elemento direzionale fa riferimento a una risorsa statica, che è definito nella SwipeItems posizionate nelle risorse di pagina con l'origine di icone. Si tratta di dove è possibile impostare la modalità di comportamento per visualizzare o eseguire, come illustrato di seguito:
<Page.Resources>
<SwipeItems x:Key="RevealOptions" Mode="Reveal">
<SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"
Foreground="White"/>
<SwipeItem Text="Pin" IconSource="{StaticResource PinIcon}"
Foreground="White" />
</SwipeItems>
<SwipeItems x:Key="ExecuteOptions" Mode="Execute">
<SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
Invoked="SwipeItem_Invoked"
Background="Red" Foreground="White" />
</SwipeItems>
</Page.Resources>
Ora che ho l'interfaccia utente creato e l'interazione di utilizzo, è possibile usare la proprietà Invoke per impostare un gestore dell'evento ed elaborare l'azione. Il comando di elaborazione quando viene eseguita una Scorri rapidamente verso avviene nella dichiarazione di SwipeItems nella page.resources impostando la proprietà richiamato. Ecco il codice che:
<SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
Invoked="DeleteItem_Invoked"
Background="Red" Foreground="White" />
Una volta nel codice sottostante, è possibile aggiungere il codice per la gestione del comando di seguito:
private void DeleteItem_Invoked(SwipeItem sender,
SwipeItemInvokedEventArgs args)
{
int index = myListView.Items.IndexOf(args.SwipeControl.DataContext);
myListView.Items.RemoveAt(index);
}
Anche se l'origine di scorrere rapidamente con radice in dispositivi di tocco, efficace con traccia Pad e penna. È possibile individuare spesso che quando si lavora con un dispositivo che non è abilitato per il tocco di verificare la disponibilità di movimenti Scorri rapidamente verso con il riquadro di traccia. Siamo entusiasti sempre quando è possibile individuare il corretto funzionamento. Per impostazione predefinita, le azioni di Microsoft Office Fluent movimenti Scorri rapidamente verso funzionano con traccia Pad, offrendo agli utenti di altri modi per completare le attività e passare rapidamente. È un esempio perfetto di implementazione di un metodo di input e che tutti gli utenti.
Quando si tratta di scorrere rapidamente per aggiungere all'applicazione, prendere in considerazione se l'azione è in conflitto con altri comportamenti dell'applicazione. Hai un FlipView, Hub o un Pivot come l'area del contenuto principale dell'applicazione? Che probabilmente non è il luogo migliore per implementare Scorri rapidamente verso perché i modelli di interazione sono molto simili e ottenere il giusto equilibrio per gli utenti può essere difficile.
Scorrere rapidamente è molto utile quando la stessa azione deve essere ripetuto più volte, ma tenere presente che il risultato dell'azione deve essere coerente. È possibile non è possibile pensare a uno scenario peggiore rispetto a un utente che riconosce che scorrimento rapido sinistra verrà preferito di un elemento, solo da cercare nella schermata successiva che la stessa combinazione di eliminarlo. Infine un suggerimento: Nella mia esperienza, scorrere rapidamente per gli utenti tocco o passare il mouse è consigliabile se l'elemento viene passata è almeno 300 pixel in larghezza.
Animazioni connesse
Oggi, molte App e siti Web hanno "scatti" o non sequitur transizioni. Quando viene eseguita un'azione che richiede la navigazione tra le pagine, viene visualizzata solo con la nuova pagina. Esistono alcuni, se presente, ovvero segnali visivi per fornire contesto o alle linee guida sulle operazioni da eseguire, dove trovare le istruzioni o novità. Con le animazioni connesse, è possibile mantenere contesto per l'utente e aumentare engagement, ad esempio aggiungendo un'animazione l'elemento selezionato da un elenco nel percorso di destinazione della pagina dei dettagli. Oppure è possibile mantenere Avatar dell'utente visibile mentre si spostano attraverso un'applicazione. È tutto sulla gestione di contesto e lo stato attivo.
Aggiunta di animazioni connesse è un processo incrementale. Se si desidera implementare per tutte le transizioni di pagina, non fammi verrà arrestato. Ma abbiamo tutti un backlog di lavoro per la masterizzazione tramite, pertanto potrebbe essere preferibile selettivo e affrontare lo sforzo nel corso del tempo. Sono disponibili due passaggi necessari per implementare le animazioni connesse:
- Preparare un oggetto di animazione nella pagina origine.
- Iniziare l'animazione nella pagina di destinazione.
Preparare l'animazione nella pagina origine consente di impostare l'oggetto di origine che deve essere aggiunta un'animazione tra le pagine. L'origine dell'immagine stessa deve essere impostato nella pagina di destinazione, se è possibile usare un'immagine a bassa risoluzione per la pagina di destinazione. Questo può ridurre il footprint di memoria dell'applicazione. L'animazione connesso verrà quindi incrociata tra le due immagini.
La regola empirica generale con le animazioni connesse è che animazione deve iniziare circa 250 millisecondi tra i due passaggi, altrimenti l'elemento di origine potrebbe bloccarsi in vista e finire ricerca strani. Con l'animazione implicita motore fornito in Windows 10, se si prepara un'animazione, ma non avviarlo entro tre secondi, il sistema eliminerà di esso.
Per questo scenario è possibile usare ora ListView con testo e immagini, utilizzando il codice fornito in figura 2. Listview e Gridview sono disponibili due aggiunte in modo specifico per le animazioni connesse: PrepareConnectedAnimations e TryStartConnectedAnimationAsync.
Figura 2 impostazione raccolta ListView per animare
<ListView x:Name="Collection"
ItemClick="Collection_ItemClick"
ItemsSource="{Binding Source={StaticResource ItemsViewSource}}"
IsItemClickEnabled="True"
SelectionMode="None"
Loaded="Collection_Loaded"
Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:CustomDataObject">
<Grid Margin="0,12,0,12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- image to be animated-->
<Image x:Name="ConnectedElement" Source="{x:Bind ImageLocation}"
MaxHeight="100"
Stretch="Fill" />
<StackPanel Margin="12,0,0,0" Grid.Column="1" >
<TextBlock Text="{x:Bind Title}" HorizontalAlignment="Left"
Margin="0,0,0,6" />
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{x:Bind Popularfor}" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
L'elemento principale in questo elenco è x: nome dell'immagine in DataTemplate. Questo è il nome che verrà utilizzato quando crea il ConnectedAnimation e prepararla per la pagina di destinazione. Quando si fa clic su un elemento nella raccolta verranno passare alla nuova pagina. Illustrato come preparare l'animazione connesso durante il metodo fare clic su. Il gestore dell'evento impostato nell'elenco Collection_ItemClicked è dove è possibile preparare ConnectedAnimation prima dello spostamento. Il metodo PrepareConnectedAnimation prevede una chiave univoca, l'elemento e il nome dell'elemento da animare. Nel metodo quest'ultimo è stato denominato my animazione "ca1", che fa riferimento nella pagina di destinazione quando viene avviata l'animazione, come illustrato nella figura 3.
Figura 3 PrepareConnectedAnimation metodo
private void Collection_ItemClick(object sender,
ItemClickEventArgs e)
{
var container =
collection.ContainerFromItem(e.ClickedItem) as ListViewItem;
if (container != null)
{
_storeditem = container.Content as CustomDataObject;
var animation = collection.PrepareConnectedAnimation("ca1", _
storeditem, "ConnectedElement");
}
Frame.Navigate(typeof(DestinationPage), _storeditem);
}
SuppressNavigationTransitionInfo blocca l'animazione di transizione di pagina predefinito la riproduzione e consente di impedire l'interferire con l'animazione connesso. Usa il metodo OnNavigatedTo per la pagina di destinazione, creare un ConnectedAnimation e passare la chiave univoca che è stato creato nella pagina di origine ("ca1"). Quindi, è possibile chiamare TryStart e passare il nome dell'elemento immagine XAML che si desidera aggiungere un'animazione, tramite questo codice XAML:
<Image x:Name="detailedIamge" MaxHeight="400"
Source="{x:Bind ImageLocation}" />
Questo codice e c#:
ConnectedAnimation imageAnimation =
ConnectedAnimationService.GetForCurrentView().GetAnimation("ca1");
if (imageAnimation != null)
{
imageAnimation.TryStart(detailedIamge);
}
Verrà creato l'animazione connesso unidirezionale dal controllo listview alla pagina di destinazione. È comunque necessario creare un'altra animazione connessa per gestire lo scenario di navigazione all'indietro. È possibile preparare l'animazione connesso nell'override OnNavigateFrom e assegnargli una chiave univoca, "ca2", come illustrato nel codice seguente:
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
base.OnNavigatedFrom(e);
ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ca2", detailedIamge);
}
L'animazione ca2 viene avviato utilizzando il metodo di caricamento raccolte dichiarato nel modello di listview, come illustrato di seguito:
private async void Collection_Loaded(object sender, RoutedEventArgs e)
{
if (_storeditem != null)
{
ConnectedAnimation backAnimation =
ConnectedAnimationService.GetForCurrentView().GetAnimation("ca2");
if (backAnimation != null)
{
await collection.TryStartConnectedAnimationAsync(backAnimation, _
storeditem, "ConnectedElement");
}
}
}
Si sta utilizzando il metodo TryStart asincrono chiamato in listview, per garantire che il contenuto di listview viene riattivato prima dell'inizio dell'animazione.
In genere con elenchi o ad alta densità visualizzazioni dei dati è necessario un numero elevato di dati secondari associati all'elemento, ad esempio, posta elettronica oggetto, mittente, data/ora e simili. È possibile aiutare l'utente ulteriormente aggiungendo un'animazione di questi elementi nella visualizzazione. È necessario usare CoordinatedAnimation, posso utilizzando l'overload di due parametri per TryStart.
In primo luogo, è necessario creare un elemento nella pagina di destinazione per visualizzare il contenuto appropriato. Utilizzando un elemento stackpanel con un blocco di testo all'interno e quest'ultimo è stato denominato stackpanel CoordinatedPanel, come illustrato di seguito:
<StackPanel x:Name="CoordinatedPanel" Grid.Column="1"
VerticalAlignment="Top" Margin="20,0">
<TextBlock Text="{x:Bind HeaderText}" Style="{ThemeResource SubheaderTextBlockStyle}"
Margin="0,0,0,10" />
</StackPanel>
Quindi usare l'overload per TryStart al riferimento sia l'animazione connesso e l'elemento dell'interfaccia utente per il coordinamento con, come illustrato di seguito:
ConnectedAnimation imageAnimation =
ConnectedAnimationService.GetForCurrentView().GetAnimation("ca1");
if (imageAnimation != null)
{
imageAnimation.TryStart(detailedIamge, new UIElement[] { CoordinatedPanel });
}
In questo modo sia l'animazione connesso che è stato creato ed eventuali altre animazioni nell'interfaccia utente per l'esecuzione nello stesso momento, aiutare l'utente a comprendere più veloce con un'esperienza più coinvolgente contesto.
Una nota: È possibile evitare di usare le animazioni connesse Se my dell'interfaccia utente varia a seconda delle richieste di rete o le operazioni asincrone con esecuzione prolungata tra preparazione e l'avvio dell'animazione. Questi scenari verranno causare un problema tecnico percepito nell'applicazione o determinano ritardi che diminuiscono dall'impatto dell'animazione. Per compensare queste situazioni, prendere in considerazione durante il caricamento di risorse e le immagini nell'applicazione anticipatamente.
Conclusioni
Scorri rapidamente verso movimenti azioni e le animazioni connessione sono elencate risorse utili che possono semplificare l'interazione, aggiungere contesto visivo e creare un'esperienza accattivanti e intuitiva per gli utenti finali. Nel caso di operazioni di movimento scorrere rapidamente, il modello di interazione è facile da implementare e aggiunge un nuovo livello di efficienza per l'utente che si estende agli utenti di penna e riempie di traccia. Tali interazioni little possono sommarsi quando gli utenti di ripetere le stesse azioni in modo continuativo.
Le animazioni connesse aiutano l'utente fornendo contesto visual quando ti sposti tra pagine, mentre nello stesso momento l'abilitazione di un'esperienza coinvolgente. Da un punto di vista dello sviluppo, animazioni connesse possono essere utilizzate in modo incrementale in momenti chiave nell'applicazione. Risultato: Gli utenti finali sfruttare un'esperienza più coerente e accattivanti che rappresenta uno stimolo usarle più spesso l'applicazione.
Lucas Hainesfunziona con il team di controlli XAML Microsoft porre l'attenzione sulla progettazione e soluzioni dell'interfaccia utente per il sistema Microsoft Office Fluent di progettazione. Ha inoltre lavorato tre anni per il studio centrale progettazione di Windows, in cui ha contribuito forma la piattaforma di Microsoft Office Fluent.
Grazie ai seguenti esperti Microsoft per la revisione dell'articolo: Steven Moyes, Kiki Saintonge
Kiki Saintonge hails da Ellsworth, Milano e ha appassionati per videogiochi e in particolare gli strumenti e tecnologie dell'interfaccia utente, Alice iniziali allo stato di Washington per informazioni su analisi scientifica dei computer. Un elemento kid Windows fulcro, lei ora funziona con lo sviluppo di controlli ottimali ed esperienze per il team XAML in Microsoft.
Steven Moyes è un program manager di Microsoft a Redmond, Washington, lavorando apportando le animazioni in UWP XAML più semplice ed efficace. Nel tempo libero, è possibile trovarlo giochi video, lettura, o si lavora su projects.d codifica personale
Viene illustrato in questo articolo nel forum di MSDN Magazine