Giao diện người dùng - Màu sắc và bố cục

Question

Mặc dù tôi đặc biệt quan tâm đến thông tin ứng dụng web, tôi cũng sẽ hơi tò mò về phát triển ứng dụng dành cho máy tính để bàn. Câu hỏi này được thúc đẩy bởi công việc của tôi trên trang web cá nhân của tôi cũng như công việc của tôi, nơi tôi đã phát triển một vài tính năng, nhưng để lại cho người khác tích hợp vào giao diện của trang web.

Có bất kỳ hướng dẫn hoặc quy tắc nào cho những thứ như phối màu, bố cục, định dạng, v.v. không? Tôi muốn đảm bảo khả năng đọc và rõ ràng cho khách truy cập, nhưng không được nhạt nhẽo và ngu si đần độn cùng một lúc.

Đối với kiến ​​thức của mình trong lĩnh vực này - Nếu bạn đưa cho tôi một bức ảnh, tôi có đủ kiến ​​thức để tái tạo nó trên màn hình, nhưng nếu bạn yêu cầu tôi thiết kế giao diện mới hoặc thiết kế lại giao diện hiện có, tôi sẽ không biết bắt đầu từ đâu.

Answer 1

Thông thường, mỗi Hệ điều hành đều có Nguyên tắc giao diện người dùng. Đối với Windows, có look here. (Chỉnh sửa: Các liên kết trong bài đăng đó bị hỏng. Tuy nhiên, Tìm kiếm "User Interface Guidelines" trên MSDN có các bài viết về mọi thứ)

Apple cũng sở hữu nó. Ngoài ra, bạn có thể muốn giữ accessibility trong đầu.

Answer 2

Một mẹo để kiểm tra xem màu của bạn có độ tương phản tốt hay không là chụp nhanh ảnh và chuyển sang màu xám. Nếu bạn không thể đọc một cái gì đó, màu sắc chắc chắn xấu choosen.

Ngoài ra, mặc dù không phải về giao diện người dùng, Before & After Magazine có thể cung cấp cho bạn một số gợi ý khá hay về màu sắc, thiết kế và các chủ đề liên quan. Nó thậm chí đã có một số pdf miễn phí để tải về.

Answer 3

Cuốn sách Designing Interfaces, bởi Jenifer Tidwell có toàn bộ chương về chủ đề (Chương 9, trích đoạn có thể truy cập trực tuyến). Toàn bộ cuốn sách đáng được đề xuất.

Answer 4

tôi khủng khiếp trong việc tìm màu sắc mà nhìn tốt với nhau, vì vậy tôi lừa dối và sử dụng hình ảnh từ thiên nhiên mà chủ yếu là màu tôi muốn (chẳng hạn, màu xanh lá cây) và sau đó tôi sử dụng this website để kéo ra màu sắc chính. Nói chung, thiên nhiên có một công việc khá tốt để thiết lập các phối màu đẹp mắt của riêng nó.

Answer 5

Đối với giao diện người dùng web, tôi sẽ đi ra ngoài bằng một chi ở đây và nói rằng màu sắc quan trọng nhất trong thiết kế web là màu trắng hoặc "ánh sáng". Đây là màu trên đầu bạn đặt các vùng nội dung dày đặc.

Văn bản tối, nền sáng, luôn luôn, khi nói đến các khu vực nội dung chính của bạn.

Và quy tắc quan trọng nhất trong bố cục là khoảng trắng. Hãy để nội dung hít thở.

Làm theo hai quy tắc đơn giản này đáng giá hơn hầu hết các nguyên tắc "khả năng sử dụng giao diện người dùng".

Và nhân tiện, hướng dẫn giao diện người dùng MS là (to và lớn) khủng khiếp. Đọc Jakob Nielsen, nhìn vào thẩm mỹ thiết kế của Apple, nhưng tránh xa MS "trung lập màu xám/xanh crunchbox" 12-bước Wizard 10pt triết lý văn bản của giao diện người dùng.

(Và tôi nói rằng khi một thời gian dài MS GUI lập trình viên)

Answer 6

Sử dụng độ tương phản cao combo màu; Văn bản màu đen trên nền trắng là ví dụ tốt nhất về kết hợp độ tương phản cao.

Kết hợp kém là văn bản màu xanh lục trên nền đỏ. Thật kinh khủng cho những người mù màu (như bản thân tôi).

Xem những gì trang web của bạn trông giống như một màu người mù: colorfilter.wickline.org

Answer 7

Đối với các ứng dụng máy tính để bàn: Dù bạn làm gì, không sử dụng màu sắc hái bằng tay. Gắn với các màu hệ thống được đặt tên như "Nền cửa sổ", "Văn bản menu", v.v. Nếu không, mọi người dựa vào các tính năng trợ năng OS sẽ bị khóa với lựa chọn màu sắc của bạn (ví dụ: không thể chọn chủ đề có độ tương phản cao) và những người thích tùy chỉnh các chủ đề trên máy tính để bàn của họ sẽ nghĩ rằng ứng dụng của bạn là nhanh chóng.

Answer 8

Dưới đây là một số gợi ý đơn giản về khả năng sử dụng trong kiểu chữ của bạn. Những điều này chủ yếu giải quyết các vấn đề về khả năng đọc và khả năng truy cập.

Dos:

• Sử dụng tương đối phông chữ cỡ (em)
• Xác định những thay đổi ngôn ngữ trong một tài liệu bằng cách sử dụng LANG thuộc tính
• Văn bản màu đen trên nền trắng
• Đối với tiêu đề, sử dụng H1, H2, v.v. và lồng chúng một cách thích hợp
• Chia nhỏ nội dung và sắp xếp với các tiêu đề phù hợp với những gì người dùng của bạn đang tìm kiếm
• Viết bản sao rõ ràng và đơn giản
• Align trái, rách rưới đúng
• Text-to-màu nền phải tương phản cao

DONTs:

• Sử dụng "bấm vào đây" hoặc "nhiều hơn" dưới dạng văn bản liên kết
• Sử dụng gạch dưới để nhấn mạnh
• Hơn 2 kiểu phông chữ
• Ital ics
• khối văn bản sử dụng tất cả mũ
• Sử dụng đúng màu đỏ hoặc màu xanh đúng văn bản trên nền trắng (chromatic aberration)