Làm thế nào để bạn chinh phục thử thách thiết kế cho bất động sản màn hình lớn? [đóng cửa]


10

Câu hỏi này hơi chủ quan hơn một chút, nhưng tôi hy vọng sẽ có được một góc nhìn mới. Tôi đã quá quen với việc thiết kế cho một kích thước màn hình nhất định (thường là 1024x768) mà tôi thấy kích thước đó không phải là vấn đề. Mở rộng kích thước lên 1280x1024 không mua cho bạn đủ bất động sản màn hình để tạo ra sự khác biệt đáng kể, nhưng sẽ giúp tôi có thêm một chút hơi thở. Về cơ bản, tôi chỉ mở rộng "kích thước lưới" của mình và thiết kế cơ bản tương tự cho màn hình nhỏ hơn một chút vẫn hoạt động.

Tuy nhiên, trong vài dự án gần đây, khách hàng của tôi đều sử dụng màn hình 1080p (1920x1080) và họ muốn các giải pháp sử dụng càng nhiều bất động sản đó càng tốt. Độ phân giải 1920 pixel cung cấp chỉ dưới hai lần chiều rộng mà tôi đã quen và màn hình rộng khiến một số phương pháp thiết kế cũ của tôi không hoạt động tốt. Vấn đề tôi gặp phải là khi có quá nhiều không gian, tôi phải đối mặt với một số vấn đề lớn.

  • Tôi nên sử dụng bao nhiêu cột? Định dạng rộng cho vay để phân chia 3 cột với tỷ lệ phân chia 2: 1: 1 (tức là cột nội dung lớn hơn hai cột còn lại). Tuy nhiên, nếu tôi đi với ba cột thì tôi phải làm gì với cột thêm đó?
  • Làm thế nào để tôi sử dụng hiệu quả của bất động sản màn hình? Có một sự cám dỗ để đưa mọi thứ lên màn hình cùng một lúc, nhưng quá nhiều thông tin thực sự khiến ứng dụng khó sử dụng hơn. Không gian màu trắng rất quan trọng để giúp tạo cảm giác thông tin phức tạp, nhưng quá nhiều làm cho các khái niệm liên quan trông quá tách biệt.
  • Tôi thường làm việc với các ứng dụng web có dữ liệu phức tạp và trực quan hóa và trình bày là chìa khóa để hiểu được dữ liệu thô. Khi người dùng của bạn cũng có màn hình lớn (ít nhất 24 "), một số thông tin nằm ngoài tầm nhìn và bạn cần di chuyển con trỏ một khoảng cách xa. Làm thế nào để bạn chắc chắn rằng mọi thứ cần thiết đều nằm trong các điểm nóng trực quan?
  • Các trang web đơn giản như blog thực sự làm tốt hơn khi chiều rộng bị hạn chế, dẫn đến rất nhiều bất động sản bị lãng phí. Tôi tự hỏi nếu có hộp văn bản và xem trước văn bản cạnh nhau sẽ là một lợi ích lớn cho phía quản trị viên của loại màn hình đó? (Chia hai cột 1: 1).

Đối với câu trả lời của bạn, tôi biết hầu hết mọi thứ trong thiết kế là "nó phụ thuộc". Những gì tôi đang tìm kiếm là:

  • Nguyên tắc chung bạn sử dụng
  • Cách tiếp cận thiết kế của bạn đã thay đổi như thế nào

Tôi thấy rằng tôi phải tự kiềm chế cách làm việc với định dạng khác nhau này. Mỗi cú va chạm trong độ phân giải mà tôi đã làm việc cho đến nay là khoảng 25%: 640 đến 800 (tăng 25%), 800 đến 1024 (tăng 28%) và 1024 đến 1280 (tăng 25%). Tuy nhiên, bước nhảy từ 1280 đến 1920 là tăng không gian 50% - tương đương với việc nhảy từ 640 thẳng lên 1024. Không có kích thước trung bình thường được sử dụng để giúp học bài dần dần.


Bạn có thể làm cho các điều khiển UI lớn hơn để lấp đầy các khoảng trống không ...?
Thất vọngWithFormsDesigner

@Frustrated: Sẽ không đánh bại mục đích, trừ khi bạn đang thiết kế cho một màn hình cảm ứng?
Michael K

@Michael: tốt, OP dường như không muốn thay đổi số lượng điều khiển có thể nhìn thấy vì nó sẽ làm cho chương trình khó sử dụng hơn và cũng không thích có bất kỳ khoảng trống nào. Nếu không có tính năng mới để lấp đầy không gian, thì không gian đó cần được lấp đầy ...?
Thất vọngWithFormsDesigner

2
Đó là vấn đề cố gắng mở rộng tâm trí của tôi để kiểm soát và cách tương tác mới với trang web. Chỉ làm cho mọi thứ lớn hơn đánh bại mục đích. Sau đó, bạn có "hội chứng nút lớn màu đỏ sáng bóng" hoặc văn bản có cảm giác như bạn đang đọc một tiêu đề lớn. Khi cố gắng cân bằng các mối quan tâm của thiết kế, nó thực sự là một vấn đề phức tạp.
Berin Loritsch

1
@Berin: Nếu họ đưa ra yêu cầu cụ thể về kích thước giao diện Kích thước siêu lớn và đó là thay đổi lớn DUY NHẤT, hãy nói với họ rằng bạn lo ngại về bố cục và thiết kế và hỏi họ xem họ có ý tưởng về cách sử dụng không gian tốt nhất không. Rốt cuộc họ là người dùng và họ phải có lý do để đưa ra yêu cầu cụ thể này. Có thể họ sẽ nói "đặt một tiện ích bảng điều khiển vào chỗ trống" hoặc đại loại như thế ... gửi ảnh chụp màn hình với một khoảng trống lớn, một văn bản có nội dung "Bạn muốn gì ở đây?" Hãy chắc chắn rằng mối quan tâm của bạn về thiết kế này được biết đến.
Thất vọngWithFormsDesigner

Câu trả lời:


1

Đây là cách tôi tiếp cận vấn đề này.

Tôi sẽ bắt đầu bằng cách chia dữ liệu của mình thành các khối logic. Tôi thậm chí có thể đi xa hơn để tạo một tệp ascx khác nhau cho mỗi khối logic. Mỗi khối sẽ biết nó thích được hiển thị như thế nào (chiều rộng tối thiểu / tối đa). Tôi sẽ làm điều này vì tôi không thích viết lại mã và nếu có khả năng ứng dụng sẽ cần được mở rộng để hỗ trợ nhiều kích thước độ phân giải, thì điều này sẽ giúp điều khiển dễ dàng hơn trên cơ sở kiểm soát.

Tiếp theo, tôi sẽ tạo một biểu định kiểu mới cho độ phân giải lớn hơn. Làm cho các nút và tiêu đề lớn hơn. Thêm nhiều khoảng trắng xung quanh các yếu tố. Cách chuyển đổi giữa hai loại độ phân giải này chỉ là hoán đổi biểu định kiểu.

Bây giờ đến phần khó, bố trí. Như bạn đã nói, cách bố trí sẽ rất khác với số lượng bất động sản đó. Câu trả lời đồng thanh toán sẽ là cho phép người dùng đặt các yếu tố mà họ muốn, như trang iGoogle. Người dùng có thể chọn 2 hoặc 3 cột khi họ thấy phù hợp. Vì tôi không biết loại màn hình nào bạn đang xây dựng nên tôi không biết liệu nó có thực sự phù hợp với bạn không.

Câu trả lời đồng thanh toán thứ hai sẽ là thuê một chuyên gia UI để giúp bạn thiết kế các trang này. Đã từng làm việc với một chuyên gia UI trong quá khứ, tôi có thể nói rằng nó đáng giá 100% để có ý kiến ​​chuyên gia về những thứ như thế này. Họ có thể xác định chính xác các vấn đề và đề xuất giải pháp trước khi khách hàng xem sản phẩm.

Nếu tôi phải tự làm một mình, tôi sẽ đặt các vật cố định ở hai bên, và để khu vực giữa phát triển để lấp đầy phần còn lại của không gian. Có bất kỳ dữ liệu có thể phát triển điền vào phần giữa.

Không chắc điều này hữu ích với bạn như thế nào, nhưng tôi hy vọng nó mang lại cho bạn một số ý tưởng.


Đây có lẽ là câu trả lời hợp lý nhất mà tôi nhận được trên cả UI và lập trình viên cho câu hỏi này. Nó hữu ích hơn nhiều so với "làm cho mọi thứ lớn hơn", đó là những gì người dùng UI nói với tôi. LƯU Ý: aspx là một thuật ngữ cụ thể về công nghệ, nhưng phân đoạn UI thành các tệp riêng biệt là cách tiếp cận phù hợp.
Berin Loritsch


2

Tôi không phải là chuyên gia UI, nhưng tôi sử dụng màn hình 1920x1080 mỗi ngày với Eclipse. Eclipse có một giao diện có thể cấu hình rất dễ dàng và đây là một số quan sát của tôi khi chuyển đổi giữa năm 1280 và 1920:

  • Ở cả hai độ phân giải, tôi muốn thấy cửa sổ tôi đang làm việc có cùng kích thước. Ở độ phân giải nhỏ hơn, tôi có xu hướng ẩn các bảng phụ, trong khi ở độ phân giải cao hơn, tôi đưa ra nhiều bảng hơn.
  • Tôi thích các nút lớn hơn một chút. Chúng sẽ chiếm ít không gian hơn theo tỷ lệ trên màn hình lớn hơn và khiến hành động chuột của tôi nhanh hơn.
  • Tôi thường mở rộng xem trước để sử dụng toàn bộ màn hình, tức là mã bên trái, xem trước bên phải. Đó là một định dạng hai cột. Ngoài ra, tôi sử dụng 3 cột với chân trang:
    1. Trái: Điều hướng tệp
    2. Center: Code (Lớn nhất, có thể bằng 2/3 chiều rộng màn hình)
    3. Phải: Điều hướng mã và nhiệm vụ
    4. Chân trang: Trạng thái (Bảng điều khiển, máy chủ, v.v ... Khá ngắn, có thể 1 / 5-1 / 6 chiều cao màn hình)

Đôi khi tôi cũng đặt các khung nhìn và bộ điều khiển cạnh nhau ở chế độ 2 cột, nhưng đó là chương trình cụ thể. :)

Khi ở màn hình lớn hơn, tôi muốn sử dụng nó để xem càng nhiều thông tin càng tốt, trong khi vẫn dễ tìm. Nhiều không gian xung quanh các thành phần giúp phân biệt giữa các bộ sưu tập thông tin. Các biểu tượng trên các tab là một cách giúp thu hút sự chú ý đến ý nghĩa của từng thành phần.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.