Κατασκευάστε πρωτότυπα με το Adobe XD

Στη σύγχρονη σχεδίαση ιστού και εφαρμογών υπάρχουν συχνά φορές όταν η αλληλεπίδραση δεν ανοίγει μια εντελώς νέα σελίδα ή οθόνη. Η σύγχρονη προσέγγιση για τη δημιουργία διαδραστικού περιεχομένου απαιτεί μεταβάσεις μεταξύ στοιχείων διεπαφής σχεδιασμού, έτσι ώστε ο χρήστης να εκπλαγεί και να καλυφθεί από την εμπειρία της αλλαγής περιεχομένου. Όλα αυτά συμβαίνουν στην ίδια οθόνη ή σελίδα, χωρίς ανανέωση. Σχεδιάζοντας αυτά τα είδη αλληλεπιδράσεων και η βελτίωση τους για να λειτουργήσει σωστά μπορεί να πάρει χρόνο, αλλά αξίζει να το κάνετε πριν γράψετε τον κώδικα σας.

Αυτό έχει περάσει το Adobe XD τους τελευταίους μήνες ανάπτυξης να πάρει δεξιά. Δημιουργήστε περιεχόμενο σε μια κατάσταση σε μία οθόνη, μετακινήστε το περιεχόμενο στο νέο κράτος στη νέα οθόνη και απλά επιλέξτε την επιλογή "Auto-Animate" για μετάβαση. Όλο το περιεχόμενο που είναι το ίδιο και στις δύο οθόνες ζωντανεύει αυτόματα από τη μία θέση στην άλλη. Εάν δεν θέλετε όλο το περιεχόμενο που είναι ορατό και στις δύο οθόνες, κάντε το περιεχόμενο αόρατο στην πρώτη και θα μεταβαίνουν στη θέση τους.

Μάθετε για άλλα λογισμικά Adobe, όπως Adobe διάσταση .

• 8 Βασικά πρωτότυπα και εργαλεία κατασκευής

Εδώ θα σας δείξουμε πώς να δημιουργήσετε ένα πρωτότυπο εφαρμογής που κάνει ακριβώς αυτό (για περισσότερα Πώς να δημιουργήσετε μια εφαρμογή Tutorials, ελέγξτε την καταπολέμηση των καλύτερων). Και πέρα ​​από αυτό, ένα νέο χαρακτηριστικό του XD επιτρέπει στον χρήστη να ελέγχει τις αλληλεπιδράσεις με τη φωνή τους. Θα το εξερευνήσουμε ως χαρακτηριστικό σχεδιασμού και πώς η εφαρμογή μπορεί να μιλήσει και στον χρήστη, το οποίο μπορεί να προσφέρει κάποιες ενδιαφέρουσες ευκαιρίες σχεδιασμού.

Κατεβάστε τα αρχεία του έργου για αυτό το σεμινάριο.

01. Ξεκινώντας το έργο

Εάν δεν έχετε Adobe XD, μπορείτε να το κατεβάσετε και να το εγκαταστήσετε εδώ . Μόλις ολοκληρωθεί η εγκατάσταση, ανοίξτε το λογισμικό και η οθόνη υποδοχής θα σας επιτρέψει να επιλέξετε ένα μέγεθος οθόνης για λήψη για λήψη. Σε αυτή την περίπτωση, επιλέξτε το iPhone 6/7/8, καθώς αυτό είναι το σωστό μέγεθος για αυτό το έργο, αλλά θα δείτε ότι υπάρχουν διαθέσιμα διάφορα μεγέθη.

02. Εισαγάγετε την πρώτη εικόνα

Υπάρχουν διαφορετικοί τρόποι εισαγωγής εικόνων, αλλά σε αυτό το πρώτο παράδειγμα μεταβείτε στο αρχείο & gt; Εισαγωγή. Επιλέξτε το φάκελο "Περιουσιακά στοιχεία" από τα αρχεία του έργου και την πρώτη εικόνα που εισάγετε θα είναι «Sky.png». Τοποθετήστε το στην κορυφή της οθόνης και μετακινήστε το ένα μόνο ζευγάρι pixel κάτω.

03. Τοποθετήστε την καμπίνα

Η επόμενη εικόνα για το σχεδιασμό θα είναι η «καμπίνα». Απλά εισάγετε αυτό με τον ίδιο τρόπο που κάνατε στο προηγούμενο βήμα και στη συνέχεια τοποθετήστε το για να γεμίσετε την οθόνη. Τέλος, εισάγετε την εικόνα 'δέντρα.png' και τοποθετήστε το στο κάτω μέρος της οθόνης με τα δέντρα πάνω από τη λίμνη.

04. Φέρτε στο λογότυπο

Ο λόγος που οι εικόνες αυτές είναι ξεχωριστά στρώματα είναι έτσι ώστε όταν δημιουργηθεί μια μετάβαση μεταξύ οθονών που μπορούν να κινηθούν ξεχωριστά. Μεταβείτε στο μενού Αρχείο και επιλέξτε Εισαγωγή. Αυτή τη φορά επιλέξτε 'logo.ai', η οποία είναι μια εικόνα διάνυσμα. Τοποθετήστε αυτήν την εικόνα στο πάνω κέντρο της οθόνης.

05. Προσθέστε έναν κύκλο

Επιλέξτε το εργαλείο κύκλου και σχεδιάστε έναν κύκλο μόνο ελαφρώς μεγαλύτερο από το λογότυπο. Στον πίνακα Ιδιότητες στα δεξιά, αφαιρέστε το εγκεφαλικό επεισόδιο και κάνετε το φόντο μαύρο. Επιλέξτε Blur φόντο και μειώστε τη φωτεινότητα έως τις -30 έτσι ώστε ο κύκλος να είναι ακόμα μαύρος.

06. Αναδιατάξτε τα γραφικά

Τώρα ο κύκλος πρέπει να κινηθεί πίσω από το λογότυπο. Επιλέξτε Αντικείμενο & GT; Να κανονίσετε και να στέλνετε προς τα πίσω. Όπως σε άλλα προϊόντα της Adobe, είναι επίσης CMD / CTRL + [ Για να μετακινήσετε οποιοδήποτε γραφικό προς τα πίσω στη σειρά στρώσεων. Χρησιμοποιώντας το σωστό τετράγωνο βραχίονα, εν τω μεταξύ, θα φέρει ένα αντικείμενο προς τα εμπρός με τη σειρά.

07. Αφαιρέστε το μικρόφωνο

Τώρα εισάγετε την εικόνα "Mic.ai" και αλλάξτε το μέγεθος της εικόνας για να είστε σχετικά μικρός. Τοποθετήστε το στο κάτω μέρος της οθόνης. Σχεδιάστε έναν κύκλο γύρω από αυτό και καταργήστε την επιλογή του γεμίσματος έτσι ώστε να αφαιρείται. Στη συνέχεια, κάντε το χτύπημα λευκό και δύο εικονοστοιχεία πλάτους. Θέση που γύρω από την εικόνα του 'MIC'.

08. Μήνυμα κειμένου

Χρησιμοποιήστε το εργαλείο κειμένου για να προσθέσετε τις λέξεις «να μιλήσετε για να αναζητήσετε» κάτω από το μικρόφωνο. Κάντε το κείμενο λευκό και να το αλλάξετε στο Helvetica Neue συμπυκνωμένο μαύρο. Στο κάτω αριστερό μέρος της οθόνης, κάντε κλικ στο εικονίδιο πίνακα ενεργητικού για να το ανοίξετε. Με το κείμενο που επιλέγεται στην οθόνη, κάντε κλικ στο εικονίδιο '+' δίπλα σε 'στυλ χαρακτήρων' για να αποθηκεύσετε αυτή τη μορφή για το κείμενο.

09. Συμμετοχή σε μια ομάδα

Επιλέξτε το εικονίδιο του πίνακα επιπέδου στο κάτω αριστερό μέρος της οθόνης. Στην οθόνη, επιλέξτε το κείμενο "Αναζήτηση" και Κάντε κλικ Για να προσθέσετε τον κύκλο και το εικονίδιο MIC. Πηγαίνετε στο αντικείμενο και επιλέξτε Ομάδα. Στο πλαίσιο του στρώματος μετονομάστε αυτήν την ομάδα 'αναζήτηση'. Είναι χρήσιμο να ονομάζουμε ομάδες, ειδικά όταν τα ζωντανεύετε αυτά.

10. Ομαδοποιήστε το λογότυπο

Ακριβώς όπως στο τελευταίο βήμα, επιλέξτε το λογότυπο και το θολωμένο κύκλο γύρω από αυτό, τότε ομαδοποιήστε τους μαζί. Στον πίνακα Layer, μετονομάστε ολόκληρη την ομάδα 'Logo' έτσι ώστε να είναι εύκολα αναγνωρίσιμο εάν πρέπει να επεξεργαστείτε ξανά αυτό αργότερα. Προς το παρόν ολοκληρωθεί ο σχεδιασμός για την πρώτη οθόνη.

11. Επιπλέον στοιχεία

Παρόλο που η πρώτη οθόνη ολοκληρώνεται, υπάρχουν ακόμα περισσότερα στοιχεία σχεδιασμού που πρέπει να προστεθούν. Έτσι δημιουργείται η κινούμενη εικόνα αλλάζοντας την τοποθέτηση των στοιχείων μεταξύ οθονών. Πηγαίνετε στο εργαλείο ορθογωνίου και κρατήστε πατημένο το Βάρδια Για να προσθέσετε ένα τετράγωνο στην οθόνη, κάνοντας το λευκό σύνορο.

12. Διαφορετικές εισαγωγές

Τώρα ανοίξτε το φάκελο για τα περιουσιακά στοιχεία μέσω του λειτουργικού σας συστήματος. Επιλέξτε την εικόνα 'Cabin1.png' και σύρετε αυτό ακριβώς πάνω στο τετράγωνο που δημιουργήσατε στο προηγούμενο βήμα. Θα καλυφθεί αυτόματα μέσα σε αυτό. Κάντε διπλό κλικ για να επεξεργαστείτε τη θέση της εικόνας και βεβαιωθείτε ότι η καμπίνα είναι ορατή στην πλατεία.

13. Προσθέστε μια ετικέτα

Χρησιμοποιώντας το εργαλείο κειμένου, προσθέστε την ετικέτα "δασική καμπίνα" κάτω από το κείμενο και χρησιμοποιήστε το πάνελ περιουσιακών στοιχείων για να στείλετε το κείμενο στο αποθηκευμένο στυλ από το βήμα 8. Επιλέξτε την εικόνα και την ομάδα μαζί. Ονομάστε την ομάδα "αριστερή καμπίνα" στον πίνακα Layers.

14. Διπλασιάστε την ομάδα

Κανονικά επαναλαμβάνοντας ένα στοιχείο διασύνδεσης είναι η τέλεια δουλειά για το εργαλείο "επαναλαμβανόμενου πλέγματος". Ωστόσο, αυτό θα χρειαστεί συγκεκριμένη κινούμενη εικόνα, η οποία δεν λειτουργεί με το επαναλαμβανόμενο δίκτυο. Επιλέξτε την ομάδα εικόνας και κειμένου και, στη συνέχεια, αντιγράψτε και επικολλήστε το έτσι ώστε να βρίσκεται δίπλα στο πρωτότυπο και προσθέστε την εικόνα 'Cabin2.png' αντ 'αυτού.

15. Μετονομασία τότε αντιγράψτε ξανά

Αλλάξτε το κείμενο στην «καμπίνα χιονιού» και στο όνομα του πίνακα στρώσεων αυτή τη «δεξιά καμπίνα». Επιλέξτε τόσο την αριστερή όσο και τη δεξιά καμπίνα και αντιγράψτε τα, τοποθετήστε τα αντίγραφα παρακάτω και ενημερώστε το κείμενο και τις εικόνες τους με 'Cabin3.png' και 'Cabin4.png'. Ομάδα και τα δύο μαζί και ονομάζουν την ομάδα "Κάτω καμπίνα".

16. Τίτλος κειμένου

Προσθέστε κείμενο στη σελίδα με το κείμενο 'Αποτελέσματα αναζήτησης για καμπίνες'. Δώστε αυτό το rockwell typeface και αποθηκεύστε αυτό στο στυλ χαρακτήρων στον πίνακα ενεργητικών. Τώρα τοποθετήστε την «Κάτω καμπίνα» ακριβώς στο κάτω μέρος της οθόνης και να πάρετε την εμφάνιση μέχρι το μηδέν, ώστε να είναι αόρατο σε αυτήν την οθόνη.

17. Αλλαγή αδιαφανής

Τώρα επιλέξτε τις αριστερή και δεξιά καμπίνες, μετακινήστε τα στο κάτω μέρος της οθόνης και πάρτε το ρυθμιστικό εμφάνισης στο μηδέν. Επαναλάβετε ξανά για το κείμενο αναζήτησης. Όταν μετακινούμε σε άλλη οθόνη, όλα αυτά θα κινήσουν όλες τις νέες θέσεις τους. Στον πίνακα στρώσεων, μετακινήστε την "αριστερή καμπίνα" πάνω από όλες τις άλλες ομάδες καμπίνας.

18. Υποδείξτε την οθόνη

Επιλέξτε το πινάκιο κάνοντας κλικ στο όνομά του, κάντε διπλό κλικ στο Artboard και αλλάξτε το όνομα στο 'HOME'. Αντιγράψτε και επικολλήστε το Artboard και μετονομάστε το 'Αναζήτηση'. Τώρα επιλέξτε το λογότυπο και μετακινήστε το μέχρι σχεδόν από την οθόνη, στη συνέχεια μειώστε την εμφάνισή του στο μηδέν.

19. Μετακινήστε το φόντο

Επιλέξτε την εικόνα του ουρανού και ωθήστε το ελαφρά στην οθόνη. Επιλέξτε την εικόνα καμπίνας και μετακινήστε το μέχρι να βρίσκεται στην κορυφή της οθόνης. Στη συνέχεια, κάντε κλικ στην εικόνα των δέντρων και μετακινήστε το πάνω από την καμπίνα. Τέλος, επιλέξτε την ομάδα "Αναζήτηση" και μειώστε την εμφάνιση κάτω στο μηδέν.

20. Εμφανίζονται νέα στοιχεία

Επιλέξτε τα αποτελέσματα αναζήτησης στον πίνακα Layer και φέρνετε την εμφάνισή του έως 100. Μετακινήστε το στην οθόνη. Επαναλάβετε αυτό για την αριστερή καμπίνα, δεξιά καμπίνα και κατώτερη καμπίνα. Χρησιμοποιήστε το εργαλείο πένα για να σχεδιάσετε ένα απλό κουμπί πίσω και να προσθέσετε ένα κύκλο γύρω από αυτό. Κάντε το φόντο θα θόλωμα και να πάρετε τη φωτεινότητα αυτού κάτω έως τις -30.

21. Συμπληρώστε το κουμπί πίσω

Επιλέξτε το πίσω βέλος και κύκλο, ομαδοποιήστε τα μαζί και ονομάστε τα "πίσω κουμπί" στον πίνακα Layer. Αλλαγή στη λειτουργία "Πρωτότυπο" πιέζοντας το «πρωτότυπο» στο επάνω αριστερό μέρος της διασύνδεσης XD. Επιλέξτε την ενοικίαση, σύρετε το μπλε βέλος στην οθόνη αναζήτησης και θα εμφανιστεί ένα αναδυόμενο πλαίσιο.

22. Φωνητική εντολή

Αλλάξτε τη σκανδάλη για να φωνάξετε και πληκτρολογήστε τη λέξη 'Αναζήτηση' ως φωνητική εντολή για να το ελέγξετε. Αλλάξτε τη δράση για να κινηθεί αυτόματα και να χαλαρώσετε για να ασφαλίσετε. Κάνει τη διάρκεια 1.5s. Στην οθόνη αναζήτησης, κάντε κλικ στο πίσω κουμπί και σύρετε το μπλε βέλος πίσω στην οθόνη 'Home'. Απλά αλλάξτε τη σκανδάλη για να πατήσετε.

23. Δοκιμάστε το πρωτότυπο

Πάνω στην επάνω δεξιά γωνία της διασύνδεσης XD είναι ένα κουμπί αναπαραγωγής. Κάντε κλικ σε αυτό και ένα πρωτότυπο εργασίας θα εμφανιστεί τώρα στην οθόνη. Στην αρχική σελίδα θα χρειαστεί να κρατήσετε τη διαστημική μπάρα ενώ μιλάτε την εντολή φωνής "Αναζήτηση". Όταν αφήνετε τη διάσωση του χώρου, θα σας μεταφέρει στην επόμενη οθόνη και θα ζωντανέψει τη γραφική διασύνδεση στη θέση του.

24. Επιστρέφοντας

Μόλις εκτελέσει η μετάβαση, μπορείτε να πατήσετε το κουμπί Πίσω για να επιστρέψετε στην αρχική οθόνη. Κλείστε το πρωτότυπο και κάντε κλικ στην οθόνη αναζήτησης και, στη συνέχεια, κάντε κλικ στο μπλε βέλος προς τα δεξιά (μην σύρετε). Αλλάξτε τη σκανδάλη για το χρόνο, κάντε την καθυστέρηση 0s και ρυθμίστε τη δράση στην αναπαραγωγή της ομιλίας. Κάντε την ομιλία 'Αποτελέσματα αναζήτησης για τις διαθέσιμες καμπίνες'.

25. Επιβεβαίωση ομιλίας

Δοκιμάστε αυτό τώρα με το κουμπί αναπαραγωγής για να ακούσετε μια φωνητική επιβεβαίωση της αναζήτησης. Κλείστε το πρωτότυπο όταν το δοκιμάσατε αυτό. Μια άλλη οθόνη πρόκειται να δημιουργηθεί, οπότε ας κάνουμε κλικ στην προβολή 'Design' στην επάνω αριστερή πλευρά της διασύνδεσης XD. Κάντε κλικ στην οθόνη αναζήτησης κάνοντας κλικ στο όνομα και, στη συνέχεια, αντιγράψτε και επικολλήστε το.

26. Κλίμακα της εικόνας

Μετονομάστε τη νέα οθόνη «καμπίνα». Κάντε διπλό κλικ στην εικόνα για το στρώμα "αριστερού καμπίνας". Αλλαγή μεγέθους των γωνιακών λαβών έτσι ώστε να γεμίζει την οθόνη, στη συνέχεια να επανατοποθετήσετε την εικόνα μέσα έτσι ώστε να καλύπτει αυτή την οθόνη. Κάντε κλικ στο κείμενο αποτελεσμάτων αναζήτησης και λάβετε την εμφάνιση στο μηδέν για να το αφαιρέσετε από την προβολή.

27. Νέα στοιχεία οθόνης

Κάντε διπλό κλικ στο κείμενο "Δασική καμπίνα", καθώς αποτελεί μέρος της ομάδας. Μεγέθυνση του μεγέθους κειμένου σε 26 εικονοστοιχεία και μετακινήστε την ελαφρά στην οθόνη. Προσθέστε κείμενο στην οθόνη στο μέσο Helvetica Neue σε μέγεθος 14 εικονοστοιχείων και ρυθμίστε το σε λευκό για να ξεχωρίσετε το φόντο. Προσθέστε μια λευκή γραμμή με το εργαλείο γραμμής κάτω από την επικεφαλίδα.

28. Δημιουργήστε ένα κουμπί

Χρησιμοποιήστε το εργαλείο ορθογωνίου για να σχεδιάσετε ένα ορθογώνιο στην οθόνη στο κάτω μέρος του σχεδίου. Σύρετε τις λαβές της γωνίας για να δώσετε σε αυτό το σχήμα στρογγυλά γωνίες. Προσθέστε τη λέξη 'Reserve' σε αυτό, χρησιμοποιώντας το σωμένο στυλ χαρακτήρων στον πίνακα ενεργητικού για το Helvetica Neue σε συνοπτικά έντονους χαρακτήρες.

29. Μετακινήστε τη λειτουργία πρωτοτύπου

Όλα τα στοιχεία σχεδιασμού βρίσκονται στη θέση τους για ολόκληρο το σχεδιασμό της εφαρμογής. Μετακίνηση στη λειτουργία "Πρωτότυπο" κάνοντας κλικ στη λέξη «πρωτότυπο» στην επάνω αριστερή γωνία. Στην οθόνη αναζήτησης, κάντε κλικ στην ομάδα "Δασική καμπίνα" της εικόνας και του κειμένου. Σύρετε τη μπλε λαβή από αυτό πάνω στην οθόνη "καμπίνας".

30. Ρυθμίσεις κινούμενων εικόνων

Στο αναδυόμενο πάνελ για τη μετάβαση μεταξύ οθονών, επιλέξτε Πατήστε ως τη σκανδάλη και, στη συνέχεια, κάντε δράση αυτόματη κίνηση. Συνεχίστε να χαλαρώσετε ως Snap αλλά μειώστε τη διάρκεια αυτού σε 0,6s. Αυτό εξασφαλίζει ότι η κινούμενη εικόνα δεν συμβαίνει - η κίνηση της πρώτης οθόνης στη δεύτερη οθόνη είχε πολλή κίνηση που απαιτούσε μεγαλύτερη μετάβαση.

31. Σύνδεση του κουμπιού πίσω

Τώρα επιλέξτε το πίσω κουμπί από την τελική οθόνη και σύρετε το μπλε βέλος από αυτό πίσω στην οθόνη "Αναζήτηση". Όλες οι ρυθμίσεις από την προηγούμενη μετάβαση θα πρέπει να θυμόμαστε. Τώρα είστε έτοιμοι να προχωρήσετε και να το δοκιμάσετε κάνοντας κλικ στο κουμπί αναπαραγωγής.

32. Auto-Animate

Αυτό που θα δείτε με το Auto-Animate τώρα είναι ότι η εικόνα επεκτείνεται για να γεμίσει την οθόνη και τα στοιχεία που δεν χρειάζονται πλέον θα εξασθενίσουν ενώ το νέο κείμενο θα εξασθενίσει. Το αντίθετο συμβαίνει όταν επιστρέφει. Αυτό παρέχει έναν καλό τρόπο να δείτε το Auto-Animate που λειτουργεί σε τρεις οθόνες.

33. Αποθηκεύστε το έργο

Από προεπιλογή, το έργο σας θα πρέπει να αποθηκεύσει αυτόματα στο Creative Cloud, αλλά είναι καλή ιδέα να αποθηκεύσετε ένα αντίγραφο στο δικό σας σκληρό δίσκο σε περίπτωση που υπάρχουν προβλήματα. Κάντε κλικ στην επιλογή Αρχείο & GT; Αποθηκεύστε, αλλάξτε τη θέση στον υπολογιστή σας και ονομάστε το έργο με ένα κατάλληλο όνομα.

34. Κοινή χρήση του έργου

Το όλο σημείο του πρωτοτύπου είναι η δοκιμή του έργου σε άλλους ανθρώπους. Ευτυχώς υπάρχει ένα κουμπί κοινής χρήσης στην επάνω δεξιά γωνία της διασύνδεσης XD που κάνει αυτό το αεράκι. Κάντε κλικ στο κουμπί Κοινή χρήση και στο μενού Drop που εμφανίζεται επιλέξτε την επιλογή Share For Review.

35. Δημοσίευση πρωτοτύπου

Στην επόμενη οθόνη σας λένε ότι η αυτόματη ανυψωτική υποστήριξη δεν είναι ακόμη διαθέσιμη για τον ιστό, αλλά σύντομα έρχεται. Κάντε κλικ στην επιλογή Δημιουργία δημόσιου συνδέσμου και, στη συνέχεια, κάντε κλικ στο σύνδεσμο στην επάνω δεξιά πλευρά για να επισκεφθείτε το δημόσιο σύνδεσμο σε ένα πρόγραμμα περιήγησης στο Web. Θα χρειαστεί να κρατήσετε τη γραμμή διαστήματος για να χρησιμοποιήσετε τη φωνητική εντολή με το πρωτότυπο.

36. Έκδοση βίντεο

Ένα άλλο πρωτότυπο μπορεί να μοιραστεί καταγράφοντας τη διεπαφή σε δράση. Κάντε κλικ στο κουμπί Κοινή χρήση και επιλέξτε Εγγραφή βίντεο. Αυτό θα ανοίξει ένα παράθυρο και όταν κλείσετε αυτό θα σας ζητηθεί να αποθηκεύσετε μια εγγραφή της οθόνης ως αρχείο MP4, το οποίο είναι επίσης ένας χρήσιμος τρόπος για να μοιραστείτε το πρωτότυπο.

Το άρθρο αυτό δημοσιεύθηκε αρχικά σε εξέταση 285 του δημιουργικού περιοδικού Web Design Magazine Σχεδιαστής ιστοσελίδων . Αγοράστε τεύχος 285 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

• Σχεδιασμός κινητής εφαρμογής: Οδηγός αρχάριου
• Πώς να δημιουργήσετε μια εφαρμογή με το vue.js
• Πάρτε τα λαβές με την εφαρμογή κινητής τηλεφωνίας στο σκάφος