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 thể 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 làm việc với 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 ứng dụng thoải mái khi sử dụng, xử lý thay đổi hướng màn hình và kiểm thử 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 được kết nối với thành phần phía 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 dành cho máy tính để bàn, hoặc bao quanh nó bằng nhiều bảng điều khiển cố định, khu vực tài liệu sẽ luôn chật chội.

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

Nhiệm vụ chính trên trang này là gì?
Những điều khiển nào của ứng dụng phải luôn hiển thị khi đang đọ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à thành phần chiếm ưu thế. Siêu dữ liệu, bình luận, phê duyệt và các hành động quy trình làm việc 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 dựa trên giả định về một tên thiết bị cụ thể.

Bố cục rộng

Trên một viewport rộng, trang có thể hiển thị:

Một ảnh thu nhỏ tài liệu hoặc bảng điều hướng
Canvas tài liệu chính
Một bảng phụ cho bình luận hoặc siêu dữ liệu
Toàn bộ 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 khi 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:

Đặt khu vực mục tiêu cho các điều khiển tương tác khoảng 44 × 44 pixel CSS.
Để đủ khoảng cách giữa các hành động gây 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ữ chỉ báo tiêu điểm luôn 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 vùng 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 được đoán hoặc cá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 cho 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

Ả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 làm việc đều có giá trị, nhưng không nên cùng lúc cạnh tranh với tài liệu.

Trong các bố cục gọn gàng:

Mở một 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ở bảng sau khi đóng.
Bẫy tiêu điểm bên trong các bảng modal khi cần.
Đặt tiêu đề rõ ràng và hành động đóng cho bả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 một 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 Chóng

Thiết kế đáp ứng không chỉ là hình ảnh. Các tài liệu lớn có thể gây áp lực về bộ nhớ, băng thông và khả năng 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 không gian bố cục cố định

Cung cấp cho host của trình xem một chiều cao ổn định trước khi nó tải. Điều này ngăn việc dịch chuyển 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ó chủ đích

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 nhất thiết phải tải cùng với 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, phù hợp với quy trình làm việc của bạn.

Kiểm thử các tệp đại diện

Sử dụng 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ể hiện được 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 cụ thể 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ệ tuyến 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ó quyền 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 giới hạn khỏi phía 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.

Việc ẩn các hành động tải xuống, in ấn hoặc menu ngữ cảnh có thể hỗ trợ quy trình làm việc mong muốn, nhưng 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 sao chép 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 làm 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 được hỗ trợ cho ứng dụng .NET của bạn.
Bảo vệ việc giải quyết tài liệu bằng ủy quyền phía máy chủ.
Đặt trình xem vào một container 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ụ và các bảng phụ của ứng dụng.
Kiểm thử việc thay đổi kích thước, hướng màn hình, tiêu điểm, tải và hành vi lỗi.
Xác nhận kết quả với các tài liệu gần như sản xuất và các phiên đồng thời.

Tham khảo trang sản phẩm Doconut Viewer product page để biết thông tin sản phẩm hiện tại. Sử dụng official download and documentation page để cài đặt và hướng dẫn 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 sẻ lớn nhất có ích của trang.
Độ rộng cố định không gây cuộn ngang.
Các bảng phụ thu gọn một cách sạch sẽ.
Bố cục vẫn sử dụng được khi chiều cao viewport bị giới hạn.
Các trạng thái tải và lỗi dự trữ 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 luô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

PDF lớn vẫn có thể duyệt được.
Bảng tính rộng có thể kiểm tra mà không làm gãy bố cục trang.
Bản vẽ chi tiết giữ được mức zoom và không gian pan khả dụng.
Tên tệp dài và thông báo lỗi không tràn ra ngoài.
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 thử.

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ường, 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 host và các điều khiển riêng của ứng dụng. 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 nút tải xuống và in ấn trên bố cục gọn gàng 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 phép nhưng không phù hợp, đặt nó trong menu tràn truy cập được. Nếu không được phép, thực thi chính sách đó trên máy chủ.

Làm thế nào để kiểm thử 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 thay đổi SDK, .NET, Windows Server hoặc 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 dựa 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 cảm giác như một phần tự nhiên của sản phẩm.