Devs εναντίον σχεδιαστές: Τι πρέπει να ξέρετε. Επεισόδιο 1.

Ξεκινάμε μια σειρά από αναρτήσεις σχετικά με τις προκλήσεις που αντιμετωπίζει ο παγκόσμιος κλάδος της Cuberto, όπου η σχεδίαση με πρωτεύουσα «D» έχει προτεραιότητα. Θα μοιραστούμε εμπειρίες ανάπτυξης εφαρμογών χωρίς πρότυπο και θα σας δίνουμε μια ματιά στο πώς οι εξαιρετικοί προγραμματιστές μας μεταμορφώνουν τις καινοτόμες ιδέες σε στερεή πραγματικότητα. Αποποίηση ευθυνών: οι λύσεις μας δεν προορίζονται να αποτελούν οδηγό ή αναφορά στην ανάπτυξη εφαρμογών για κινητά.

Στην αρχή, αξίζει να αναφέρουμε ότι οι λογικοί λογοτέχνες έχουν δυσκολία να κατανοήσουν πώς είναι ακόμη δυνατό να σχεδιάσουμε ένα προσαρμοστικό σχέδιο χωρίς να συνδέσουμε όλα τα μικρά αντικείμενα στην οθόνη του smartphone με την ανάλυση οθόνης. Από την άλλη πλευρά, οι αισθητικοί σχεδιαστές δεν βλέπουν τι είναι τόσο δύσκολο για την τοποθέτηση ενός κουμπιού και ενός μπλοκ κειμένου σε μια γραμμή τόσο στο iPhone 8 όσο και στο iPhone SE, αλλά μαζί με το κουμπί εισαγωγής. Αυτό είναι μόνο ένα μικρό παράδειγμα τυπικών συγκρούσεων σχεδιαστών / προγραμματιστών, αλλά η εταιρεία μας βρίσκει πάντα έναν συμβιβασμό που αφήνει όλους ευτυχείς. Ο τρόπος παραγωγής: ο σχεδιασμός και η ανάπτυξη είναι ένα ενιαίο σύνολο. Δεν πρέπει να παραγγείλετε σχέδιο από ένα στούντιο που δεν έχει εμπειρία ανάπτυξης. Διαφορετικά, θα σχεδιάζει μακέτες χωρίς λογική ανάπτυξης.

Μετά από χρόνια εργασίας με ποικίλες εφαρμογές έχουμε σφυρηλατήσει κάποιες κατευθυντήριες αρχές. Για παράδειγμα, δεν χάνουμε χρόνο σε καθολικά συστατικά που μπορούν να χρησιμοποιηθούν σε άλλα, μελλοντικά έργα. Η φιλοσοφία σχεδιασμού μας απαιτεί μια μοναδική προσέγγιση σε κάθε έργο - δεν κάνουμε πρότυπα cookie-cutter. Επίσης, αφιερώνουμε έναν τόνο προσοχής στις λεπτομέρειες του UI και καταβάλλουμε κάθε δυνατή προσπάθεια για να δημιουργήσουμε έναν κομψό, υποστηριζόμενο κώδικα, επιτρέποντας παράλληλα μερικές «εναλλακτικές λύσεις» εδώ και εκεί για να επιτύχουμε το επιθυμητό αποτέλεσμα.

Ας ρίξουμε μια ματιά σε αυτό το παράδειγμα:

Αυτό που βλέπουμε:

  • Το UIView με το όνομα του τμήματος τραβάει και μετατρέπεται στον τίτλο στο νέο UIViewController.
  • Εν τω μεταξύ, η UIView αλλάζει ελαφρώς (χρώμα φόντου και γραμματοσειράς).
  • Οι UIViews με τις υπόλοιπες ενότητες πετούν προς τα κάτω πίσω από την επιλεγμένη UIView.

Τι άλλο λάβαμε υπόψη κατά τη διάρκεια της ανάπτυξης:

  • Ο κύλινδρος μπορεί να βρίσκεται σε οποιαδήποτε θέση.
  • Μπορεί να υπάρχει οποιαδήποτε ποσότητα τμημάτων. Σε αυτό το παράδειγμα, εστιάζουμε μόνο σε τρεις.
  • Το κινούμενο σχέδιο πρέπει να λειτουργεί όμορφα σε όλες τις συσκευές της Apple, όχι μόνο στο iPhone 8.

Αυτό μοιάζει με UITableView με κεφαλίδα (τίτλο, κουμπί προφίλ), UITableViewCells (ενότητες) και υποσέλιδο. Φυσικά, είναι δυνατόν να χρησιμοποιήσετε το UICollectionView με όλη του τη μαγεία, αλλά σε αυτή την περίπτωση θα ήταν απλώς μια περιττή επιπλοκή.

Γιατί είναι καλή ιδέα να χρησιμοποιήσετε το UITableView έξω από το κουτί:

  • Μετακινηθείτε (ναι, είναι προφανές).
  • Απεριόριστος αριθμός κυττάρων.
  • Τραβήξτε-για-ανανέωση.
  • Μπορούμε να βάλουμε την ίδια UIView μέσα στο κελί, όπως ήταν στην κεφαλίδα της δεύτερης οθόνης.

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

Συντάξαμε ένα πρόγραμμα εργασίας και εδώ πρέπει να κάνουμε:

1. Αλλαγή της εμφάνισης του επιλεγμένου κυττάρου (σκούρο στο φως).

2. Αλλαγή της θέσης του επιλεγμένου κυττάρου (μετατρέποντάς τον σε τίτλο).

3. Αλλαγή της θέσης των υπόλοιπων κυττάρων (μετατόπιση των κυττάρων προς τα κάτω).

Βήμα προς βήμα λύση:

1. Η αναπαραγωγή της εμφάνισης του κυττάρου είναι δυνατή στην πραγματική UIView με μια απλή UIView.transition.

2. Πρέπει να μετακινήσουμε το κελί στη θέση του τίτλου και μετά να αλλάξουμε το UIView σε έναν τίτλο. Αντί να μετακινήσουμε το ίδιο το κελί στον νέο τίτλο του ελεγκτή, μετακινήσαμε τον τίτλο προς τα κάτω και έπειτα το απλώσαμε στη θέση του. Για τη μετάβαση μεταξύ των ελεγκτών χρησιμοποιήσαμε το UIViewControllerAnimatedTransitioning.

3. Το προηγούμενο βήμα μας απαλλάσσει από το να ασχοληθούμε για το ποιο στοιχείο βρίσκεται μπροστά και το οποίο στην πλάτη, δεδομένου ότι μπορούμε απλά να τα μετακινήσουμε όλα. Αλλά γνωρίζαμε ότι η μετακίνηση των κυττάρων μέσα στον πραγματικό πίνακα μπορεί να είναι δύσκολη καθώς αρχίζει αυτόματα να εφαρμόζει διάφορα ένθετα και contentSize. Γι 'αυτό έπρεπε να εφαρμόσουμε ένα κομμάτι της μαγείας της εργασίας στον κώδικα. Εάν ορίσετε το clipToBounds σε false, τότε μπορείτε να μετακινήσετε την εσωτερική UIView του κελιού πέρα ​​από τα όρια των κυττάρων, δημιουργώντας το αποτέλεσμα της κίνησης των ίδιων των κυττάρων.

Τώρα ας δούμε πώς φαίνεται αυτό στον ίδιο τον κώδικα.

Αλλαγή εμφάνισης επιλεγμένου στοιχείου:

// Δημόσια μέθοδος UIView, η οποία βρίσκεται μέσα στο κελί.
function set (τύπος: στυλ) {
         self.style = στυλ
 
         στυλ διακόπτη {
                    περίπτωση .light Περιεχόμενο:
                                lblTitle.fontColor =. άσπρο
                                view.backgroundColor =
                    υπόθεση .darkContent:
                                lblTitle.fontColor = .χρώμα
                                view.backgroundColor = .white
         }}
}}

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

Αλλαγή θέσης επιλεγμένου στοιχείου:

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

view.backgroundColor = .clear
 
let frame = view.convert (categoryView.frame, από: categoryView.superview) listCategoryView.transform = CGAffineTransform (μετάφρασηX: 0, y: frame.minY - listCategoryView.frame.minY)
 
 
UIView.animate (μεDuration: itemDuration, καθυστέρηση: 0, επιλογές: [.curveEaseOut], κινούμενα σχέδια: {
       self.view.backgroundColor = .appBgColor
       self.listCategoryView.transform =. ταυτότητα
 
})

Αλλαγή της θέσης των κελιών:

ας κυττάρων = cellsForAnimation.filter {! $ 0.isSelected}
tappedListCategoryView; .alpha = 0
αφήστε itemDelay = διάρκεια / TimeInterval (3 * max (1, cells.count)
)
αφήστε itemDuration = duration - itemDelay * TimeInterval (max (1, cells.count)
 - 1)
για (ευρετήριο, κελί) σε cells.reversed () enumerated () {
        UIView.animate (μεDuration: itemDuration, καθυστέρηση:
        TimeInterval (ευρετήριο) * itemDelay, επιλογές: [. CurveEaseOut],
        κινούμενα σχέδια: {
                  cell.contentView.subviews.first; .transform =
        CGAffineTransform (μετάφρασηΧ: 0, γ:
        self.tableView.rowHeight * 1.25)
        })
}}

Δεν πραγματοποιήσαμε αντίστροφη κίνηση για διάφορους λόγους:

  1. Ο στόχος UIViewController έχει πολλά στοιχεία λίστας. Αυτό σημαίνει ότι όταν επιστρέφετε στην κύρια οθόνη, ο χρήστης μπορεί να κυλίσει την κεφαλίδα πέρα ​​από την ορατότητα και δεν είναι σαφές πώς να μετατρέψει τον τίτλο στο κελί.
  2. Η εφαρμογή μιας ανάστροφης κίνησης στη διαδραστική ποπ-χειρονομία θα απαιτούσε μια μακρά και δύσκολη διαδικασία. Κάνοντας μια διαφορετική κίνηση για διαδραστική-pop-χειρονομία και για το κουμπί Back δεν είναι η καλύτερη ιδέα, ούτως ή άλλως.

Αποσυσκευάσαμε ένα από τα πιο απλά παραδείγματα κινούμενων εικόνων που έκανε ο Cuberto. Η επόμενη μας θέση θα περιλαμβάνει κάτι πιο περίπλοκο και καθολικό.

Το Cuberto ορίζει την τάση σε δημιουργικούς ιστότοπους και εφαρμογές για κινητά. Η ψηφιακή και κινητή τεχνογνωσία εξουσιώνει τα βραβευμένα σχέδια και τα πρωτοποριακά προϊόντα υψηλής τεχνολογίας. [email protected]

Ακολουθήστε μας στο Dribbble και στο Instagram