Penampil dokumen dapat berfungsi secara teknis namun tetap terasa tidak dapat digunakan pada layar sempit. Bilah alat yang padat, kontrol yang kecil, panel samping yang terlalu besar, dan kontainer dengan dimensi tetap dengan cepat mengubah pratinjau sederhana menjadi pengalaman yang membuat frustrasi.

Untuk aplikasi berbasis Windows ASP.NET dan .NET, Doconut menyediakan SDK penayangan dokumen tersemat untuk dokumen bisnis, file PDF, gambar CAD, file email, dan gambar. Aplikasi Anda tetap mengontrol tata letak di sekitarnya, autentikasi, otorisasi, penyimpanan, dan alur kerja dokumen.

Panduan ini berfokus pada pengalaman di sekitarnya: bagaimana memberi penampil tersemat ruang yang cukup, membuat kontrol aplikasi nyaman digunakan, menangani perubahan orientasi, dan menguji dokumen realistis tanpa bergantung pada kode sumber SDK yang tidak terverifikasi.

Tata letak penayangan dokumen responsif yang terhubung ke komponen server-side .NET

Desain Responsif Dimulai di Luar Penampil

Penampil hanya dapat menggunakan ruang yang disediakan oleh tata letak induknya. Jika aplikasi menempatkannya di dalam kartu sempit, memberi lebar tetap untuk desktop, atau mengelilinginya dengan beberapa panel permanen, area dokumen akan tetap sempit.

Mulailah dengan tiga pertanyaan:

Apa tugas utama pada halaman ini?
Kontrol aplikasi mana yang harus tetap terlihat saat membaca?
Panel sekunder mana yang dapat dilipat atau dipindahkan ke belakang tombol?

Untuk halaman dokumen khusus, penampil biasanya harus menjadi elemen dominan. Metadata, komentar, persetujuan, dan tindakan alur kerja dapat tetap tersedia tanpa mengambil ruang permanen dari dokumen.

Rencanakan Tata Letak Berdasarkan Ruang yang Tersedia

Perilaku responsif harus mengikuti ruang yang tersedia untuk komponen, bukan asumsi tentang nama perangkat tertentu.

Tata letak lebar

Pada viewport lebar, halaman dapat menampilkan:

Thumbnail dokumen atau panel navigasi
Kanvas dokumen utama
Panel alur kerja sekunder untuk komentar atau metadata
Serangkaian lengkap tindakan aplikasi

Ketika panel sekunder menjadi laci, tambahkan perilaku dialog, manajemen fokus, dan pelabelan aksesibel yang diperlukan oleh sistem desain Anda.

Buat Kontrol Aplikasi Ramah Sentuh

Kontrol di sekitar penampil harus nyaman diaktifkan tanpa gerakan penunjuk yang presisi.

Pedoman praktis meliputi:

Berikan kontrol interaktif area target sekitar 44 x 44 piksel CSS.
Sediakan ruang yang cukup antara tindakan destruktif dan yang sering digunakan.
Jangan mengandalkan hover untuk menampilkan informasi penting.
Pertahankan indikator fokus terlihat bagi pengguna keyboard.
Sediakan nama aksesibel untuk tombol yang hanya berikon.
Hindari menempatkan kontrol penting dekat dengan area gestur browser atau sistem.

Jangan menimpa gaya internal Doconut dengan selector yang ditebak atau variabel CSS yang tidak terdokumentasi. Gunakan sumber resmi untuk versi SDK yang terpasang, dan terapkan aturan responsif Anda pada kontainer dan kontrol milik aplikasi.

Anggap Panel Samping sebagai Ruang Kerja Opsional

Thumbnail, hasil pencarian, anotasi, metadata, dan riwayat alur kerja sangat berharga, tetapi tidak semua harus bersaing dengan dokumen secara bersamaan.

Pada tata letak kompak:

Buka panel samping hanya ketika pengguna memintanya.
Kembalikan fokus ke tombol yang membukanya setelah ditutup.
Tangkap fokus di dalam panel modal bila sesuai.
Berikan panel judul yang jelas dan tindakan tutup.
Pertahankan lokasi dokumen saat ini ketika panel dibuka atau ditutup.

Jika penampil menyediakan panelnya sendiri, uji perilaku responsif yang terdokumentasi sebelum menambahkan sistem navigasi tingkat aplikasi kedua di sekitarnya.

Pertahankan Ruang Kerja Dokumen Tetap Cepat

Desain responsif tidak hanya visual. Dokumen besar dapat mengungkap batasan memori, bandwidth, dan rendering, terutama ketika halaman juga berisi dasbor atau animasi yang kompleks.

Kurangi pekerjaan yang bersaing

Jeda animasi dekoratif saat pengguna membaca, hindari efek mahal di sekitar penampil, dan hapus observer atau listener acara yang tidak diperlukan.

Cadangkan ruang tata letak

Berikan host penampil tinggi yang stabil sebelum dimuat. Ini mencegah pergeseran tata letak besar dan mengurangi kemungkinan pengguna menekan kontrol yang salah.

Muat fitur sekunder secara sengaja

Komentar, riwayat audit, dan panel metadata besar tidak selalu perlu dimuat bersama halaman dokumen pertama. Tunda mereka sampai pengguna membuka panel terkait ketika itu sesuai dengan alur kerja Anda.

Uji berkas representatif

Gunakan PDF panjang, spreadsheet lebar, gambar CAD detail, gambar besar, dan dokumen dengan font yang tidak biasa. Berkas contoh kecil tidak dapat mengungkap batasan pengalaman produksi.

Pertahankan Kontrol Akses di Server

Presentasi responsif tidak mengubah tanggung jawab keamanan aplikasi. Setiap permintaan dokumen tetap harus melewati autentikasi dan otorisasi khusus dokumen.

Untuk aplikasi ASP.NET Core, mekanisme standar seperti middleware autentikasi, kebijakan, klaim, atribut [Authorize], dan otorisasi berbasis sumber daya dapat melindungi rute server yang menyelesaikan dokumen.

Aplikasi harus:

Gunakan pengidentifikasi dokumen yang dihasilkan server.
Verifikasi pengguna saat ini dapat mengakses dokumen yang diminta.
Jauhkan kredensial penyimpanan dan jalur tidak terbatas dari klien.
Sanitasi kesalahan yang ditampilkan di halaman penampil.
Terapkan aturan retensi eksplisit pada berkas asli dan sementara.
Hindari mencatat isi dokumen, rahasia, atau URL akses sensitif.

Menyembunyikan tindakan unduh, cetak, atau menu konteks dapat mendukung alur kerja yang dimaksud, tetapi tidak menggantikan otorisasi sisi server dan tidak dapat mencegah setiap bentuk penangkapan setelah konten terlihat.

Mengintegrasikan Doconut ke dalam Pengalaman Responsif

Doconut menyediakan lapisan penayangan dokumen tersemat, sementara aplikasi menyediakan shell responsif dan alur kerja bisnis.

Urutan implementasi yang masuk akal adalah:

Konfirmasi format yang diperlukan dan fitur penampil.
Integrasikan paket Doconut yang didukung untuk aplikasi .NET Anda.
Lindungi resolusi dokumen dengan otorisasi sisi server.
Tempatkan penampil dalam kontainer host yang fluid dan milik aplikasi.
Rancang keadaan kompak untuk bilah alat aplikasi dan panel sekunder.
Uji perilaku perubahan ukuran, orientasi, fokus, pemuatan, dan kesalahan.
Validasi hasil dengan dokumen mirip produksi dan sesi bersamaan.

Konsultasikan Halaman produk Penampil Doconut untuk informasi produk terkini. Gunakan halaman unduhan dan dokumentasi resmi untuk petunjuk instalasi dan integrasi spesifik versi daripada menyalin contoh SDK yang tidak terdokumentasi dari posting pihak ketiga.

Daftar Periksa Tinjauan Penampil Responsif

Tata Letak

Penampil menerima bagian paling berguna terbesar dari halaman.
Lebar tetap tidak memaksa gulir horizontal.
Panel sekunder melipat dengan bersih.
Tata letak tetap dapat digunakan ketika tinggi viewport terbatas.
Status memuat dan kesalahan mencadangkan ruang yang sesuai.

Interaksi

Kontrol aplikasi memiliki ukuran target yang nyaman.
Tindakan penting tidak bergantung pada hover.
Kontrol hanya ikon memiliki nama aksesibel.
Fokus tetap terlihat dan mengikuti urutan logis.
Laci dan dialog mengembalikan fokus dengan benar.

Dokumen

PDF besar tetap dapat dinavigasi.
Spreadsheet lebar dapat diperiksa tanpa merusak tata letak halaman.
Gambar detail mempertahankan ruang zoom dan pan yang dapat digunakan.
Nama file panjang dan pesan kesalahan tidak meluap.
Mengubah ukuran tata letak tidak memulai ulang dokumen secara tidak perlu.

Keamanan dan operasi

Server mengotorisasi setiap permintaan dokumen.
Detail penyimpanan tetap pribadi.
Retensi berkas dan data sementara didokumentasikan.
Kesalahan dan log tidak menyertakan informasi sensitif.
Batas sumber daya dan perilaku sesi bersamaan diuji.

Pertanyaan Umum

Haruskah aplikasi mempertahankan halaman penampil terpisah untuk ponsel dan desktop?

Biasanya, tidak. Satu halaman responsif lebih mudah dipelihara. Ubah tata letak sesuai ruang yang tersedia dan secara progresif mengungkapkan kontrol sekunder.

Dapatkah aplikasi menimpa CSS internal penampil?

Hindari selector dan variabel yang tidak terdokumentasi. Gaya kontainer host dan kontrol aplikasi Anda sendiri. Gunakan hanya titik kustomisasi yang terdokumentasi untuk versi Doconut yang Anda gunakan.

Haruskah tombol unduh dan cetak disembunyikan pada tata letak kompak?

Itu adalah keputusan produk bukan batas keamanan. Jika suatu tindakan diizinkan tetapi tidak cocok, tempatkan di menu overflow yang dapat diakses. Jika tidak diizinkan, terapkan kebijakan tersebut di server.

Bagaimana dokumen besar harus diuji?

Buat koleksi uji yang disanitasi yang mencerminkan jumlah halaman sebenarnya, ukuran berkas, font, gambar, dan spreadsheet. Ulangi rangkaian setelah perubahan SDK, .NET, Windows Server, atau tata letak.

Kesimpulan

Pengalaman dokumen seluler yang kuat dimulai dengan kontainer fluid, tata letak berfokus pada dokumen, kontrol yang nyaman, panel samping opsional, perilaku perubahan ukuran yang dapat diprediksi, dan otorisasi sisi server.

Doconut dapat menyediakan kemampuan penayangan di dalam aplikasi .NET berbasis Windows Anda. Tim Anda kemudian dapat fokus pada shell aplikasi responsif, aturan keamanan, dan alur kerja yang membuat penampil terasa seperti bagian alami dari produk.