Переглядач документів може бути технічно функціональним, але все одно відчуватися незручним на вузькому екрані. Щільні панелі інструментів, крихкі елементи керування, надмірно великі бічні панелі та контейнери з фіксованими розмірами швидко перетворюють простий перегляд у розчаровуючий досвід.

Для Windows‑базованих ASP.NET та .NET застосунків, Doconut надає вбудований SDK перегляду документів для ділових документів, PDF‑файлів, CAD‑чертежів, електронних листів та зображень. Ваш застосунок все ще керує навколишнім макетом, автентифікацією, авторизацією, сховищем та робочим процесом документів.

Цей посібник зосереджений на цьому оточуючому досвіді: як надати вбудованому переглядачу достатньо простору, зробити елементи керування застосунку зручними у використанні, обробляти зміни орієнтації та тестувати реалістичні документи без покладання на неперевірений код SDK.

Адаптивні макети перегляду документів, підключені до серверного компонента .NET

Адаптивний дизайн починається поза переглядачем

Переглядач може використовувати лише простір, який надає його батьківський макет. Якщо застосунок розміщує його всередині вузької картки, задає фіксовану ширину для настільних пристроїв або оточує його кількома постійними панелями, область документа залишиться стислою.

Почніть з трьох питань:

Яке головне завдання на цій сторінці?
Які елементи керування застосунком повинні залишатися видимими під час читання?
Які вторинні панелі можна згорнути або перемістити за кнопку?

Для спеціальної сторінки документа переглядач зазвичай має бути домінуючим елементом. Метадані, коментарі, затвердження та дії робочого процесу можуть залишатися доступними, не займаючи постійний простір документа.

Плануйте макет згідно доступного простору

Адаптивна поведінка повинна орієнтуватися на простір, доступний компоненту, а не на припущення щодо конкретної назви пристрою.

Широкий макет

На широкому вікні перегляду сторінка може відображати:

Мініатюру документа або панель навігації
Головне полотно документа
Вторинну панель робочого процесу для коментарів або метаданих
Повний набір дій застосунку

Коли вторинна панель перетворюється на висувний ящик, додайте поведінку діалогового вікна, керування фокусом та доступну маркування, необхідні вашій системі дизайну.

Зробіть елементи керування застосунку зручними для дотику

Елементи керування навколо переглядача мають бути зручними для активації без точного переміщення вказівника.

Забезпечте інтерактивні елементи керування цільовою областю приблизно 44 × 44 CSS‑пікселя.
Залиште достатньо простору між руйнівними та часто використовуваними діями.
Не покладайтеся на наведення курсора для відображення важливої інформації.
Тримайте індикатори фокусу видимими для користувачів клавіатури.
Надавайте доступні назви для кнопок лише з іконками.
Уникайте розміщення критичних елементів керування поруч із зонами жестів браузера або системи.

Не перевизначайте внутрішні стилі Doconut за допомогою вгаданих селекторів або недокументованих CSS‑змінних. Використовуйте офіційні ресурси для встановленої версії SDK і застосовуйте ваші адаптивні правила до контейнерів та елементів керування, що належать застосунку.

Розглядайте бічні панелі як необов’язкове робоче простір

Мініатюри, результати пошуку, анотації, метадані та історія робочого процесу є цінними, проте вони не повинні одночасно конкурувати з документом.

На компактних макетах:

Відкривайте бічну панель лише за запитом користувача.
Після закриття повертайте фокус до кнопки, яка її відкрила.
Затримуйте фокус всередині модальних панелей, коли це доречно.
Надайте панелі чітку назву та дію закриття.
Зберігайте поточне розташування документа під час відкриття або закриття панелі.

Якщо переглядач надає власні панелі, протестуйте їх задокументовану адаптивну поведінку перед додаванням другої навігаційної системи рівня застосунку навколо них.

Підтримуйте швидкість робочого простору документа

Адаптивний дизайн — це не лише візуальне. Великі документи можуть виявляти обмеження пам'яті, пропускної здатності та рендерингу, особливо коли сторінка також містить складні панелі інструментів або анімації.

Зменшення конкуренції ресурсів

Призупиніть декоративну анімацію під час читання користувачем, уникайте дорогих ефектів навколо переглядача та видаліть непотрібні спостерігачі або слухачі подій.

Зарезервуйте простір макету

Надайте контейнеру переглядача стабільну висоту перед його завантаженням. Це запобігає великим змінам макету та зменшує ймовірність випадкового натискання користувачем неправильного елементу.

Навмисно завантажуйте вторинні функції

Коментарі, історія аудиту та великі панелі метаданих не завжди потрібно завантажувати разом з першою сторінкою документа. Відкладіть їх до моменту, коли користувач відкриє відповідну панель, якщо це відповідає вашому робочому процесу.

Тестуйте репрезентативні файли

Використовуйте довгі PDF‑файли, широкі електронні таблиці, детальні CAD‑чертежі, великі зображення та документи з незвичайними шрифтами. Маленький зразок файлу не може розкрити межі реального досвіду.

Зберігайте контроль доступу на сервері

Адаптивна презентація не змінює відповідальність застосунку за безпеку. Кожен запит документа все ще має проходити автентифікацію та авторизацію, специфічну для документа.

Для застосунків ASP.NET Core стандартні механізми, такі як проміжне ПЗ автентифікації, політики, претензії, атрибут [Authorize] та авторизація на основі ресурсів, можуть захистити серверний маршрут, що повертає документ.

Застосунок повинен:

Використовувати ідентифікатори документів, згенеровані сервером.
Перевірити, що поточний користувач може отримати доступ до запитаного документа.
Тримати облікові дані сховища та необмежені шляхи подалі від клієнта.
Очищати помилки, що відображаються на сторінці переглядача.
Застосовувати явні правила зберігання до оригінальних та тимчасових файлів.
Уникайте журналювання вмісту документів, секретів або чутливих URL‑адрес доступу.

Приховування дій завантаження, друку або контекстного меню може підтримувати запланований робочий процес, проте це не замінює серверну авторизацію і не може запобігти всім формам захоплення після того, як вміст став видимим.

Інтеграція Doconut у адаптивний досвід

Doconut забезпечує вбудований шар перегляду документів, тоді як застосунок надає адаптивну оболонку та бізнес‑робочий процес.

Підтвердіть необхідні формати та функції переглядача.
Інтегруйте підтримуваний пакет Doconut у ваш .NET застосунок.
Захистіть розв'язання документу за допомогою серверної авторизації.
Розмістіть переглядач у гнучкому контейнері, що належить застосунку.
Розробіть компактні стани для панелей інструментів застосунку та вторинних панелей.
Протестуйте поведінку при зміні розміру, орієнтації, фокусі, завантаженні та помилках.
Перевірте результат за допомогою документів, схожих на виробничі, та одночасних сесій.

Зверніться до перевіреної сторінки продукту Doconut Viewer для отримання актуальної інформації про продукт. Використовуйте офіційну сторінку завантаження та документації для інструкцій щодо встановлення та інтеграції, специфічних для версії, замість копіювання недокументованих прикладів SDK з постів третіх осіб.

Чек‑лист огляду адаптивного переглядача

Макет

Переглядач отримує найбільшу корисну частину сторінки.
Фіксовані ширини не змушують горизонтальну прокрутку.
Вторинні панелі чисто згортються.
Макет залишається придатним до використання, коли висота вікна обмежена.
Стан завантаження та помилок резервує відповідний простір.

Взаємодія

Елементи керування застосунком мають зручні розміри цілі.
Важливі дії не залежать від наведення.
Кнопки лише з іконками мають доступні назви.
Фокус залишається видимим і слідує логічному порядку.
Висувні елементи та діалогові вікна правильно повертають фокус.

Документи

Великі PDF‑файли залишаються навігаційними.
Широкі електронні таблиці можна переглядати без порушення макету сторінки.
Детальні креслення зберігають зручний масштаб та простір панорамування.
Довгі імена файлів та повідомлення про помилки не виходять за межі.
Зміна розміру макету не перезапускає документ без потреби.

Безпека та операції

Сервер авторизує кожен запит документа.
Деталі сховища залишаються приватними.
Зберігання файлів та тимчасових даних задокументовано.
Помилки та журнали не містять конфіденційної інформації.
Обмеження ресурсів та поведінка при одночасних сесіях протестовані.

Поширені питання

Чи має застосунок підтримувати окремі сторінки переглядача для телефонів та настільних комп’ютерів?

Зазвичай — ні. Одна адаптивна сторінка легша у підтримці. Змінюйте макет відповідно до доступного простору та поступово розкривайте вторинні елементи керування.

Чи може застосунок перевизначити внутрішній CSS переглядача?

Уникайте недокументованих селекторів та змінних. Оформлюйте контейнер‑хост та власні елементи керування застосунку. Використовуйте лише ті точки налаштування, що задокументовані для вашої версії Doconut.

Чи слід приховувати кнопки завантаження та друку в компактних макетах?

Це рішення продукту, а не межа безпеки. Якщо дія дозволена, але не підходить за розміром, розмістіть її в доступному меню переповнення. Якщо вона не дозволена, застосуйте цю політику на сервері.

Як слід тестувати великі документи?

Створіть очищену тестову колекцію, що відображає реальну кількість сторінок, розмір файлів, шрифти, креслення та електронні таблиці. Повторюйте набір після змін SDK, .NET, Windows Server або макету.

Висновок

Сильний мобільний досвід роботи з документами починається з гнучкого контейнера, макету, орієнтованого на документ, зручних елементів керування, необов’язкових бічних панелей, передбачуваної поведінки при зміні розміру та серверної авторизації.

Doconut може забезпечити можливість перегляду у вашому Windows‑базованому .NET застосунку. Ваша команда тоді зможе зосередитися на адаптивній оболонці застосунку, правилах безпеки та робочому процесі, які роблять переглядач природною частиною продукту.