Ένας προβολέας εγγράφων μπορεί να είναι τεχνικά λειτουργικός και να φαίνεται άχρηστος σε μια στενή οθόνη. Πυκνές γραμμές εργαλείων, μικροί έλεγχοι, υπερμεγέθη πλαϊνά πάνελ και δοχεία με σταθερές διαστάσεις μετατρέπουν γρήγορα μια απλή προεπισκόπηση σε μια απογοητευτική εμπειρία.

Για εφαρμογές ASP.NET και .NET που τρέχουν σε Windows, το Doconut παρέχει ένα ενσωματωμένο SDK προβολής εγγράφων για επιχειρηματικά έγγραφα, αρχεία PDF, σχέδια CAD, αρχεία email και εικόνες. Η εφαρμογή σας εξακολουθεί να ελέγχει τη διάταξη, τον έλεγχο ταυτότητας, την εξουσιοδότηση, την αποθήκευση και τη ροή εργασίας των εγγράφων.

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

Διατάξεις ανταποκρινόμενης προβολής εγγράφων συνδεδεμένες με ένα .NET στοιχείο διακομιστή

Ο Ανταποκρινόμενος Σχεδιασμός Ξεκινά Εκτός του Προβολέα

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

Ξεκινήστε με τρία ερωτήματα:

Ποια είναι η κύρια εργασία σε αυτή τη σελίδα;
Ποιοι έλεγχοι της εφαρμογής πρέπει να παραμείνουν ορατοί κατά την ανάγνωση;
Ποια δευτερεύοντα πάνελ μπορούν να συμπτυχθούν ή να μετακινηθούν πίσω από ένα κουμπί;

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

Σχεδιάστε τη Διάταξη βάσει του Διαθέσιμου Χώρου

Η ανταποκρινόμενη συμπεριφορά πρέπει να ακολουθεί το χώρο που είναι διαθέσιμος στο στοιχείο, όχι υποθέσεις για ένα συγκεκριμένο όνομα συσκευής.

Ευρεία διάταξη

Σε ευρύ παράθυρο προβολής, η σελίδα μπορεί να εμφανίζει:

Μια μικρογραφία ή πίνακα πλοήγησης εγγράφου
Το κύριο καμβά του εγγράφου
Ένα δευτερεύον πάνελ ροής εργασίας για σχόλια ή μεταδεδομένα
Ένα πλήρες σύνολο ενεργειών της εφαρμογής

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

Κάντε τους Ελέγχους της Εφαρμογής Φιλικούς στην Επαφή με Αφή

Οι έλεγχοι γύρω από τον προβολέα πρέπει να είναι άνετοι στην ενεργοποίηση χωρίς ακριβή κίνηση δείκτη.

Πρακτικές οδηγίες περιλαμβάνουν:

Δώστε στους διαδραστικούς ελέγχους μια περιοχή στόχου περίπου 44 × 44 εικονοστοιχεία CSS.
Αφήστε αρκετό χώρο μεταξύ καταστροφικών και συχνά χρησιμοποιούμενων ενεργειών.
Μην βασίζεστε στο hover για να αποκαλύψετε κρίσιμες πληροφορίες.
Κρατήστε τους δείκτες εστίασης ορατούς για χρήστες πληκτρολογίου.
Παρέχετε προσβάσιμα ονόματα για κουμπιά μόνο με εικονίδιο.
Αποφύγετε την τοποθέτηση κρίσιμων ελέγχων κοντά σε περιοχές χειρονομιών του προγράμματος περιήγησης ή του συστήματος.

Μην παρακάμπτετε τα εσωτερικά στυλ του Doconut με εικαστικούς επιλογείς ή ατεκμηριωμένες μεταβλητές CSS. Χρησιμοποιήστε τους επίσημους πόρους για την εγκατεστημένη έκδοση του SDK και εφαρμόστε τους ανταποκρινόμενους κανόνες σας στα κοντέινερ και τους ελέγχους που ανήκουν στην εφαρμογή.

Θεωρήστε τα Πλαϊνά Πάνελ ως Προαιρετικό Χώρο Εργασίας

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

Σε συμπαγείς διατάξεις:

Ανοίξτε ένα πλαϊνό πάνελ μόνο όταν το ζητήσει ο χρήστης.
Επιστρέψτε την εστίαση στο κουμπί που το άνοιξε μετά το κλείσιμο.
Πιάστε την εστίαση μέσα σε μοντέλα πάνελ όπου είναι κατάλληλο.
Δώστε στο πάνελ έναν σαφή τίτλο και ενέργεια κλεισίματος.
Διατηρήστε την τρέχουσα θέση του εγγράφου όταν το πάνελ ανοίγει ή κλείνει.

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

Κρατήστε τον Χώρο Εργασίας του Εγγράφου Γρήγορο

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

Μείωση ανταγωνιστικών εργασιών

Παύστε τις διακοσμητικές κινήσεις ενώ ο χρήστης διαβάζει, αποφύγετε δαπανηρά εφέ γύρω από τον προβολέα και αφαιρέστε περιττούς παρατηρητές ή ακροατές συμβάντων.

Δέσμευση χώρου διάταξης

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

Φόρτωση δευτερευουσών λειτουργιών σκόπιμα

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

Δοκιμή αντιπροσωπευτικών αρχείων

Χρησιμοποιήστε μεγάλα PDF, ευρείες λογιστικά φύλλα, λεπτομερή σχέδια CAD, μεγάλες εικόνες και έγγραφα με ασυνήθιστα γραμματοσειρές. Ένα μικρό δείγμα αρχείου δεν μπορεί να αποκαλύψει τα όρια της παραγωγικής εμπειρίας.

Διατηρήστε τον Έλεγχο Πρόσβασης στον Διακομιστή

Η ανταποκρινόμενη παρουσίαση δεν αλλάζει τις ευθύνες ασφαλείας της εφαρμογής. Κάθε αίτημα εγγράφου πρέπει ακόμη να περνά από έλεγχο ταυτότητας και εξουσιοδότηση ειδική για το έγγραφο.

Για εφαρμογές ASP.NET Core, μηχανισμοί όπως το middleware ελέγχου ταυτότητας, πολιτικές, claims, το χαρακτηριστικό [Authorize] και η εξουσιοδότηση βάσει πόρων μπορούν να προστατεύσουν τη διαδρομή του διακομιστή που επιλύει ένα έγγραφο.

Η εφαρμογή πρέπει:

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

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

Ενσωμάτωση του Doconut στην Ανταποκρινόμενη Εμπειρία

Το Doconut παρέχει το ενσωματωμένο στρώμα προβολής εγγράφων, ενώ η εφαρμογή παρέχει το ανταποκρινόμενο κέλυφος και τη ροή εργασίας.

Μια λογική ακολουθία υλοποίησης είναι:

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

Συμβουλευτείτε τη επαληθευμένη σελίδα προϊόντος Doconut Viewer για τρέχουσες πληροφορίες προϊόντος. Χρησιμοποιήστε την επίσημη σελίδα λήψης και τεκμηρίωσης για εγκατάσταση και οδηγίες ενσωμάτωσης ανά έκδοση, αντί να αντιγράφετε ατεκμηριωμένα παραδείγματα SDK από τρίτες δημοσιεύσεις.

Λίστα Ελέγχου Ανταποκρινόμενου Προβολέα

Διάταξη

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

Αλληλεπίδραση

Οι έλεγχοι της εφαρμογής έχουν άνετα μεγέθη στόχου.
Οι βασικές ενέργειες δεν εξαρτώνται από το hover.
Οι έλεγχοι μόνο με εικονίδιο έχουν προσβάσιμα ονόματα.
Η εστίαση παραμένει ορατή και ακολουθεί λογική σειρά.
Τα συρτάρια και οι διάλογοι επιστρέφουν σωστά την εστίαση.

Έγγραφα

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

Ασφάλεια και λειτουργίες

Ο διακομιστής εξουσιοδοτεί κάθε αίτημα εγγράφου.
Τα στοιχεία αποθήκευσης παραμένουν ιδιωτικά.
Η διατήρηση αρχείων και προσωρινών δεδομένων είναι τεκμηριωμένη.
Τα σφάλματα και τα αρχεία καταγραφής εξαιρούν ευαίσθητες πληροφορίες.
Οι περιορισμοί πόρων και η συμπεριφορά ταυτόχρονων συνεδριών έχουν δοκιμαστεί.

Συχνές Ερωτήσεις

Πρέπει η εφαρμογή να διατηρεί ξεχωριστές σελίδες προβολέα για τηλέφωνα και υπολογιστές;

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

Μπορεί η εφαρμογή να παρακάμψει το εσωτερικό CSS του προβολέα;

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

Πρέπει τα κουμπιά λήψης και εκτύπωσης να κρύβονται σε συμπαγείς διατάξεις;

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

Πώς πρέπει να δοκιμάζονται μεγάλα έγγραφα;

Δημιουργήστε μια καθαρή συλλογή δοκιμών που αντικατοπτρίζει πραγματικούς αριθμούς σελίδων, μεγέθη αρχείων, γραμματοσειρές, σχέδια και λογιστικά φύλλα. Επαναλάβετε τη σειρά δοκιμών μετά από αλλαγές στο SDK, .NET, Windows Server ή στη διάταξη.

Συμπέρασμα

Μια ισχυρή εμπειρία προβολής εγγράφων σε κινητά ξεκινά με ένα ρευστό κοντέινερ, διάταξη που δίνει προτεραιότητα στο έγγραφο, άνετους ελέγχους, προαιρετικά πλαϊνά πάνελ, προβλέψιμη συμπεριφορά αλλαγής μεγέθους και εξουσιοδότηση στο διακομιστή.

Το Doconut μπορεί να παρέχει τη δυνατότητα προβολής μέσα στην Windows‑βασισμένη .NET εφαρμογή σας. Η ομάδα σας μπορεί τότε να επικεντρωθεί στο ανταποκρινόμενο κέλυφος της εφαρμογής, τους κανόνες ασφαλείας και τη ροή εργασίας που κάνουν τον προβολέα να αισθάνεται φυσικό μέρος του προϊόντος.