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

Для 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 застосунку. Ваша команда тоді зможе зосередитися на адаптивній оболонці застосунку, правилах безпеки та робочому процесі, які роблять переглядач природною частиною продукту.