Sebuah 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 wadah dengan dimensi tetap dengan cepat mengubah pratinjau sederhana menjadi pengalaman yang membuat frustrasi.

Untuk aplikasi ASP.NET dan .NET berbasis Windows, 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, otentikasi, 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 belum diverifikasi.

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

Desain Responsif Dimulai di Luar Penampil

Penampil hanya dapat menggunakan ruang yang disediakan 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 sesak.

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 yang 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:

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

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 pointer yang presisi.

Pedoman praktis meliputi:

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

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

Perlakukan Panel Samping sebagai Ruang Kerja Opsional

Thumbnail, hasil pencarian, anotasi, metadata, dan riwayat alur kerja semuanya 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 membuka panel setelah ditutup.
Tangkap fokus di dalam panel modal bila diperlukan.
Beri panel judul yang jelas dan aksi tutup.
Pertahankan lokasi dokumen saat panel dibuka atau ditutup.

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

Pertahankan Kecepatan Ruang Kerja Dokumen

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

Kurangi pekerjaan yang bersaing

Jeda animasi dekoratif saat pengguna membaca, hindari efek mahal di sekitar penampil, dan hapus pengamat atau pendengar peristiwa 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 hingga 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 tidak biasa. Berkas contoh kecil tidak dapat mengungkap batas pengalaman produksi.

Pertahankan Kontrol Akses di Server

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

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

Aplikasi harus:

Menggunakan pengidentifikasi dokumen yang dihasilkan server.
Memverifikasi pengguna saat ini dapat mengakses dokumen yang diminta.
Menjauhkan kredensial penyimpanan dan jalur tak terbatas dari klien.
Menyaring kesalahan yang ditampilkan di halaman penampil.
Menerapkan aturan retensi eksplisit untuk berkas asli dan sementara.
Menghindari pencatatan isi dokumen, rahasia, atau URL akses sensitif.

Menyembunyikan aksi 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 cangkang 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 wadah host yang cair dan dimiliki aplikasi.
Rancang keadaan kompak untuk bilah alat aplikasi dan panel sekunder.
Uji perilaku ubah ukuran, orientasi, fokus, pemuatan, dan kesalahan.
Validasi hasil dengan dokumen mirip produksi dan sesi bersamaan.

Konsultasikan halaman produk halaman produk Doconut Viewer yang terverifikasi untuk informasi produk terkini. Gunakan halaman unduhan dan dokumentasi resmi untuk instalasi dan instruksi integrasi spesifik versi, bukan menyalin contoh SDK yang tidak terdokumentasi dari posting pihak ketiga.

Daftar Periksa Tinjauan Penampil Responsif

Tata Letak

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

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 berkas 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 privat.
Retensi berkas dan data sementara terdokumentasi.
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 ungkapkan kontrol sekunder secara progresif.

Dapatkah aplikasi menimpa CSS internal penampil?

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

Haruskah tombol unduh dan cetak disembunyikan pada tata letak kompak?

Itu keputusan produk, bukan batas keamanan. Jika aksi diizinkan tetapi tidak muat, letakkan di menu overflow yang dapat diakses. Jika tidak diizinkan, tegakkan kebijakan tersebut di server.

Bagaimana cara menguji dokumen besar?

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

Kesimpulan

Pengalaman dokumen mobile yang kuat dimulai dengan wadah cair, tata letak berfokus pada dokumen, kontrol nyaman, panel samping opsional, perilaku ubah ukuran yang dapat diprediksi, dan otorisasi sisi server.

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