Một trình xem tài liệu có thể hoạt động kỹ thuật tốt nhưng vẫn cảm thấy không sử dụng được trên màn hình hẹp. Các thanh công cụ dày đặc, điều khiển nhỏ bé, các bảng bên quá lớn và các container có kích thước cố định nhanh chóng biến một bản xem trước đơn giản thành trải nghiệm gây bực bội.

Đối với các ứng dụng ASP.NET và .NET chạy trên Windows, Doconut cung cấp SDK xem tài liệu nhúng cho tài liệu doanh nghiệp, tệp PDF, bản vẽ CAD, tệp email và hình ảnh. Ứng dụng của bạn vẫn kiểm soát bố cục xung quanh, xác thực, ủy quyền, lưu trữ và quy trình công việc tài liệu.

Hướng dẫn này tập trung vào trải nghiệm xung quanh: cách cung cấp đủ không gian cho trình xem nhúng, làm cho các điều khiển của ứng dụng thoải mái khi sử dụng, xử lý thay đổi hướng màn hình và kiểm tra các tài liệu thực tế mà không phụ thuộc vào mã nguồn SDK chưa được xác minh.

Bố cục xem tài liệu đáp ứng kết nối với thành phần máy chủ .NET

Thiết Kế Đáp Ứng Bắt Đầu Từ Bên Ngoài Trình Xem

Trình xem chỉ có thể sử dụng không gian mà bố cục cha của nó cung cấp. Nếu ứng dụng đặt nó trong một thẻ hẹp, cho nó độ rộng cố định cho máy tính để bàn, hoặc bao quanh nó bằng nhiều bảng cố định, khu vực tài liệu sẽ vẫn chật hẹp.

Bắt đầu với ba câu hỏi:

Mục tiêu chính trên trang này là gì?
Những điều khiển nào của ứng dụng phải vẫn hiển thị khi đọc?
Những bảng phụ nào có thể thu gọn hoặc ẩn sau một nút?

Đối với một trang tài liệu riêng, trình xem thường nên là yếu tố chi phối. Siêu dữ liệu, bình luận, phê duyệt và các hành động quy trình có thể vẫn khả dụng mà không chiếm không gian cố định từ tài liệu.

Lập Kế Hoạch Bố Cục Dựa Trên Không Gian Có Sẵn

Hành vi đáp ứng nên dựa trên không gian có sẵn cho thành phần, không phải giả định về tên thiết bị cụ thể.

Bố Cục Rộng

Trong một khung nhìn rộng, trang có thể hiển thị:

Một hình thu nhỏ tài liệu hoặc bảng điều hướng
Canvas tài liệu chính
Bảng quy trình phụ cho bình luận hoặc siêu dữ liệu
Một bộ đầy đủ các hành động của ứng dụng

Khi một bảng phụ trở thành ngăn kéo, hãy thêm hành vi hộp thoại, quản lý tiêu điểm và nhãn truy cập cần thiết theo hệ thống thiết kế của bạn.

Làm Cho Các Điều Khiển Ứng Dụng Thân Thiện Với Cảm Ứng

Các điều khiển xung quanh trình xem nên thoải mái kích hoạt mà không cần di chuyển con trỏ chính xác.

Các hướng dẫn thực tế bao gồm:

Cung cấp cho các điều khiển tương tác một khu vực mục tiêu khoảng 44 x 44 pixel CSS.
Để đủ khoảng cách giữa các hành động phá hủy và các hành động thường dùng.
Không dựa vào hover để hiển thị thông tin quan trọng.
Giữ các chỉ báo tiêu điểm hiển thị cho người dùng bàn phím.
Cung cấp tên truy cập cho các nút chỉ có biểu tượng.
Tránh đặt các điều khiển quan trọng gần các khu vực cử chỉ của trình duyệt hoặc hệ thống.

Không ghi đè các kiểu nội bộ của Doconut bằng các bộ chọn suy đoán hoặc biến CSS chưa được tài liệu hoá. Sử dụng các tài nguyên chính thức cho phiên bản SDK đã cài đặt, và áp dụng các quy tắc đáp ứng của bạn vào các container và điều khiển thuộc sở hữu của ứng dụng.

Xem Các Bảng Bên Như Không Gian Làm Việc Tùy Chọn

Các hình thu nhỏ, kết quả tìm kiếm, chú thích, siêu dữ liệu và lịch sử quy trình đều có giá trị, nhưng chúng không nên cùng lúc cạnh tranh với tài liệu.

Mở bảng bên chỉ khi người dùng yêu cầu.
Trả lại tiêu điểm cho nút đã mở nó sau khi đóng.
Bẫy tiêu điểm bên trong các bảng modal khi cần.
Cung cấp cho bảng một tiêu đề rõ ràng và hành động đóng.
Giữ nguyên vị trí hiện tại của tài liệu khi bảng mở hoặc đóng.

Nếu trình xem cung cấp các bảng riêng, hãy kiểm tra hành vi đáp ứng đã được tài liệu hoá của chúng trước khi thêm hệ thống điều hướng cấp ứng dụng thứ hai xung quanh chúng.

Giữ Không Gian Làm Việc Tài Liệu Nhanh

Thiết kế đáp ứng không chỉ là hình ảnh. Các tài liệu lớn có thể làm lộ các hạn chế về bộ nhớ, băng thông và việc render, đặc biệt khi trang cũng chứa các bảng điều khiển phức tạp hoặc hoạt ảnh.

Giảm Công Việc Cạnh Tranh

Tạm dừng các hoạt ảnh trang trí khi người dùng đang đọc, tránh các hiệu ứng tốn kém xung quanh trình xem, và loại bỏ các observer hoặc listener không cần thiết.

Dành Trước Không Gian Bố Cục

Cung cấp cho container chứa trình xem một chiều cao ổn định trước khi tải. Điều này ngăn ngừa các chuyển đổi bố cục lớn và giảm khả năng người dùng nhấn nhầm điều khiển.

Tải Các Tính Năng Phụ Một Cách Cố Ý

Bình luận, lịch sử kiểm toán và các bảng siêu dữ liệu lớn không phải lúc nào cũng cần tải cùng trang tài liệu đầu tiên. Hoãn chúng cho đến khi người dùng mở bảng liên quan khi phù hợp với quy trình làm việc của bạn.

Kiểm Tra Các Tệp Đại Diện

Sử dụng các tệp PDF dài, bảng tính rộng, bản vẽ CAD chi tiết, hình ảnh lớn và tài liệu có phông chữ lạ. Một tệp mẫu nhỏ không thể bộc lộ giới hạn của trải nghiệm sản xuất.

Giữ Kiểm Soát Truy Cập Trên Máy Chủ

Trình bày đáp ứng không thay đổi trách nhiệm bảo mật của ứng dụng. Mỗi yêu cầu tài liệu vẫn phải đi qua xác thực và ủy quyền riêng cho tài liệu.

Đối với các ứng dụng ASP.NET Core, các cơ chế tiêu chuẩn như middleware xác thực, chính sách, claims, thuộc tính [Authorize], và ủy quyền dựa trên tài nguyên có thể bảo vệ route máy chủ giải quyết tài liệu.

Ứng dụng nên:

Sử dụng các định danh tài liệu được tạo trên máy chủ.
Xác minh người dùng hiện tại có thể truy cập tài liệu yêu cầu.
Giữ thông tin đăng nhập lưu trữ và các đường dẫn không hạn chế xa khỏi client.
Làm sạch các lỗi hiển thị trên trang trình xem.
Áp dụng các quy tắc lưu trữ rõ ràng cho các tệp gốc và tạm thời.
Tránh ghi log nội dung tài liệu, bí mật hoặc URL truy cập nhạy cảm.

Ẩn các hành động tải xuống, in hoặc menu ngữ cảnh có thể hỗ trợ quy trình làm việc mong muốn, nhưng nó không thay thế việc ủy quyền phía máy chủ và không thể ngăn chặn mọi hình thức ghi lại sau khi nội dung đã hiển thị.

Tích Hợp Doconut Vào Trải Nghiệm Đáp Ứng

Doconut cung cấp lớp xem tài liệu nhúng, trong khi ứng dụng cung cấp vỏ đáp ứng và quy trình công việc kinh doanh.

Một chuỗi triển khai hợp lý là:

Xác nhận các định dạng và tính năng trình xem cần thiết.
Tích hợp gói Doconut hỗ trợ cho ứng dụng .NET của bạn.
Bảo vệ việc truy xuất tài liệu bằng ủy quyền phía máy chủ.
Đặt trình xem trong một container chủ lưu trữ linh hoạt, thuộc sở hữu của ứng dụng.
Thiết kế các trạng thái gọn gàng cho thanh công cụ ứng dụng và các bảng phụ.
Kiểm tra hành vi thay đổi kích thước, hướng màn hình, tiêu điểm, tải và lỗi.
Xác thực kết quả với các tài liệu giống môi trường sản xuất và các phiên đồng thời.

Tham khảo trang sản phẩm Doconut Viewer trang sản phẩm Doconut Viewer để biết thông tin sản phẩm hiện tại. Sử dụng trang tải xuống và tài liệu chính thức trang tải xuống và tài liệu chính thức cho hướng dẫn cài đặt và tích hợp theo phiên bản thay vì sao chép các ví dụ SDK chưa được tài liệu hoá từ các bài đăng của bên thứ ba.

Danh Sách Kiểm Tra Trình Xem Đáp Ứng

Bố Cục

Trình xem nhận phần chia lớn nhất và hữu ích của trang.
Chiều rộng cố định không gây buộc cuộn ngang.
Các bảng phụ thu gọn gọn gàng.
Bố cục vẫn sử dụng được khi chiều cao khung nhìn bị giới hạn.
Các trạng thái tải và lỗi dành không gian phù hợp.

Tương Tác

Các điều khiển ứng dụng có kích thước mục tiêu thoải mái.
Các hành động quan trọng không phụ thuộc vào hover.
Các điều khiển chỉ có biểu tượng có tên truy cập.
Tiêu điểm vẫn hiển thị và theo thứ tự logic.
Các ngăn kéo và hộp thoại trả lại tiêu điểm đúng cách.

Tài Liệu

Các PDF lớn vẫn có thể điều hướng.
Bảng tính rộng có thể xem mà không phá vỡ bố cục trang.
Các bản vẽ chi tiết vẫn giữ được không gian phóng to và di chuyển khả dụng.
Tên tệp dài và thông báo lỗi không tràn.
Thay đổi kích thước bố cục không khởi động lại tài liệu một cách không cần thiết.

Bảo Mật và Vận Hành

Máy chủ ủy quyền mỗi yêu cầu tài liệu.
Chi tiết lưu trữ vẫn riêng tư.
Việc lưu trữ tệp và dữ liệu tạm thời được tài liệu hoá.
Lỗi và log không bao gồm thông tin nhạy cảm.
Giới hạn tài nguyên và hành vi phiên đồng thời được kiểm tra.

Câu Hỏi Thường Gặp

Ứng dụng có nên duy trì các trang trình xem riêng cho điện thoại và máy tính để bàn không?

Thường thì không. Một trang đáp ứng duy nhất dễ bảo trì hơn. Thay đổi bố cục dựa trên không gian có sẵn và dần dần hiển thị các điều khiển phụ.

Ứng dụng có thể ghi đè CSS nội bộ của trình xem không?

Tránh các bộ chọn và biến chưa được tài liệu hoá. Định dạng container chủ và các điều khiển ứng dụng của bạn. Chỉ sử dụng các điểm tùy chỉnh đã được tài liệu hoá cho phiên bản Doconut bạn triển khai.

Nên ẩn các nút tải xuống và in trên bố cục gọn không?

Đó là quyết định sản phẩm chứ không phải ranh giới bảo mật. Nếu một hành động được cho phép nhưng không phù hợp, hãy đặt nó trong menu tràn có thể truy cập. Nếu không được phép, hãy thực thi chính sách đó trên máy chủ.

Làm thế nào để kiểm tra các tài liệu lớn?

Xây dựng một bộ sưu tập kiểm thử đã được làm sạch phản ánh số trang thực tế, kích thước tệp, phông chữ, bản vẽ và bảng tính. Lặp lại bộ kiểm thử sau khi SDK, .NET, Windows Server hoặc thay đổi bố cục.

Kết Luận

Một trải nghiệm tài liệu di động mạnh mẽ bắt đầu với một container linh hoạt, bố cục ưu tiên tài liệu, các điều khiển thoải mái, các bảng phụ tùy chọn, hành vi thay đổi kích thước dự đoán được và ủy quyền phía máy chủ.

Doconut có thể cung cấp khả năng xem trong ứng dụng .NET chạy trên Windows của bạn. Nhóm của bạn sau đó có thể tập trung vào vỏ ứng dụng đáp ứng, các quy tắc bảo mật và quy trình làm việc khiến trình xem trở thành một phần tự nhiên của sản phẩm.