Sterowanie głosowe w Adobe XD: Jak skutecznie je wdrożyć

AdobeXDstał się potężnym narzędziem do prototypowania. Szczególnie interesująca jest możliwość integracji sterowania głosowego. Ta funkcja pozwala Ci na tworzenie interakcji z prototypem za pomocą poleceń głosowych. W tym przewodniku dowiesz się, jak zaimplementować sterowanie głosowe w Adobe XD. Twój prototyp stanie się nie tylko bardziej przyjazny dla użytkownika, ale również podniesie interaktywność na nowy poziom.

Najważniejsze wnioski

• Sterowanie głosowe umożliwia interakcję z obiektami za pomocą poleceń głosowych.
• Wizualne wskazówki są kluczowe, aby użytkownicy zrozumieli, że mogą korzystać z poleceń głosowych.
• Możesz definiować własne polecenia głosowe i ustalać ich reakcje w prototypie.

Instrukcja krok po kroku

Utwórz swoje artboard

Rozpocznij od stworzenia nowego artboardu. Wybierz odpowiedni kolor tła, aby nadać swojemu prototypowi nowoczesny wygląd. Możesz na przykład wybrać delikatny odcień, aby stworzyć przyjemne otoczenie.

Dodaj tekst

Teraz czas na istotną komunikację. Użyj narzędzia tekstowego, aby dodać pole tekstowe, w którym umieścisz pytanie „Co mogę dla Ciebie zrobić?”. Sformatuj tekst w atrakcyjny sposób, aby go wyróżnić. Idealny rozmiar czcionki wynosi 90 punktów, aby być widocznym, ale nie przytłaczać.

Wizualne wskazówki dla sterowania głosowego

Aby zasygnalizować użytkownikowi, że sterowanie głosowe jest możliwe, powinieneś stworzyć symbol mikrofonu. Możesz narysować zaokrąglony prostokąt i użyć narzędzia okręgu, aby stworzyć reprezentatywny mikrofon. Upewnij się, że elementy dekoracyjne są ze sobą połączone w sposób, który tworzy atrakcyjny design.

Dodaj drugie pole tekstowe

Teraz dodaj kolejne pole tekstowe, które wyświetli wiadomości takie jak „Zamknij tę aplikację”. Wybierz odpowiednie formatowanie tekstu, aby je wyróżnić. Celem jest aktywne pokazanie użytkownikom, jakie polecenia głosowe mogą wydawać.

Tworzenie animacji

Aby dodać dynamiczne elementy do swojej aplikacji, powinieneś stworzyć kilka artboardów. Będą one przedstawiać różne stany Twojego prototypu podczas interaktywnego użytkowania. Możesz określić strukturę animacji w prototypie, aby przy wydawaniu polecenia głosowego uruchamiała się płynna animacja.

Synchronizuj animacje

Użyj ustawień animacji, aby określić przejścia pomiędzy ekranami. Możesz użyć Auto-Animate, aby upewnić się, że animacja jest płynna podczas faz ładowania. Zapewnia to pozytywne wrażenia użytkownika, podczas gdy użytkownicy czekają na swoje odpowiedzi.

Użyj poleceń głosowych w trybie prototypu

Przełącz się teraz w tryb prototypu i określ przejście dla sterowania głosowego. Wyzwalacz powinien być ustawiony na sterowanie głosowe, a nie na dotyk. Ustaw polecenie „Zamknij tę aplikację” jako wyzwalacz dla następnej akcji. Każdemu poleceniu musisz przypisać konkretną animację i czas trwania.

Testuj prototyp

Gdy wszystko jest ustawione, przejdź do panelu podglądu i przetestuj swoją aplikację. Przytrzymaj spację podczas testu, aby wydawać polecenia głosowe. Sprawdź, czy Twój prototyp poprawnie reaguje na komendy głosowe i czy animacje działają. Przetestuj polecenie „Zamknij tę aplikację” i obserwuj proces.

Podsumowanie – skuteczne wykorzystanie sterowania głosowego w Adobe XD

W tym przewodniku nauczyłeś się, jak zaimplementować sterowanie głosowe w Adobe XD. Przeszedłeś przez kroki dotyczące tworzenia prototypu, dodawania pól tekstowych i wskazówek wizualnych, a także określania animacji i przejść. Ta technika pomoże Ci poprawić interakcję użytkowników i uczynić Twój prototyp bardziej atrakcyjnym.