it-swarm-vi.com

Làm cách nào để tạo biểu tượng đơn sắc hoạt động?

Công ty của tôi vừa thực hiện một chủ đề biểu tượng đơn sắc trong nỗ lực chuyển sang giao diện "hiện đại" hơn.

Phản hồi từ vòng thử nghiệm đầu tiên của người dùng đã được trộn lẫn:

  • Hầu hết mọi người đều đồng ý rằng chủ đề này trông rất tuyệt
  • Cá nhân dưới 25 tuổi gặp khó khăn khi thao tác trên giao diện
  • Các cá nhân lớn tuổi gặp khó khăn trong việc cho biết các biểu tượng được bật, tắt hoặc chọn
  • Người dùng báo cáo sự cố định vị các mục trong cây điều hướng, vì họ không còn có thể sử dụng màu sắc để phân biệt các biểu tượng

Hầu hết người dùng của chúng tôi là những cá nhân lớn tuổi và đã sử dụng phần mềm trong nhiều năm. Làm thế nào chúng ta có thể duy trì hiệu ứng hình ảnh nổi bật của một chủ đề đơn sắc, trong khi làm cho giao diện dễ sử dụng hơn? Tôi sẵn sàng giới thiệu lại một lượng màu hạn chế.

51
hash_collision
  1. Đã chọn - Tạo trạng thái lựa chọn đảo ngược sẽ làm cho tính năng này nổi bật hơn. Nhiều cách để thực hiện nhưng là một ví dụ; Tạo nền của nút màu đen bằng biểu tượng màu trắng hoặc biểu tượng bút chì màu xám nhạt.
  2. Đã bật - Tăng độ tương phản. Mắt chúng ta trở nên ít nhạy cảm hơn với ánh sáng và nhìn thấy một phần hẹp hơn của phổ màu khi chúng ta già đi. Tăng sự khác biệt giữa các màu xám được kích hoạt và vô hiệu hóa sẽ giúp phân biệt.
  3. Phân biệt - Bạn cũng có thể sử dụng nhiều cơ chế khác để phân biệt hai trạng thái này. Ví dụ; một bóng tinh tế bên dưới trạng thái hoạt động sẽ giúp phân biệt chúng với các đối tác bị vô hiệu hóa của chúng.
  4. Kích thước - Hình ảnh bạn đính kèm có thể được hạ thấp, nhưng dù bằng cách nào, nếu một phần lớn nhân khẩu học của bạn cũ hơn, bạn nên xem xét việc tạo các biểu tượng lớn hơn. Điều này sẽ giúp mắt già hơn để thấy sự khác biệt giữa các biểu tượng và cuối cùng hỗ trợ sự hiểu biết.

Câu trả lời không phải là một thay đổi duy nhất. Tôi nghi ngờ sự kết hợp của các điều chỉnh sẽ là cần thiết để đạt được mục tiêu cải thiện sự hiểu biết của bạn.

60
nkcedwards

tương phản

Các biểu tượng của bạn thiếu độ tương phản rõ rệt - cả giữa biểu tượng và nền, cũng như giữa các biểu tượng hoạt động và biểu tượng không hoạt động.

Tăng độ tương phản.

46
DA01

Tôi ghét trở thành người gắn bó với truyền thống nhưng tôi nghĩ, trong trường hợp này, có vẻ như sở thích của quản lý trong UI đã vượt quá trải nghiệm người dùng.

Trong thuật ngữ UX, không có gì sai với những gì bạn đã có, trên thực tế nghe có vẻ như nó có thể tốt hơn - vì mọi người đều hiểu nó. Màu sắc cũng có thể giúp với tỷ lệ tương phản của bạn.

Có thể đáng để tiếp cận lại thiết kế và thay vì đặt thông số kỹ thuật là loại bỏ màu sắc xem xét cách sử dụng màu sắc và xem có cách nào để "hiện đại hóa" mà không làm mất nó. Đối với cách bạn làm điều đó tùy thuộc vào bạn là nhà thiết kế UI cũng như nhà thiết kế UX.

Sự quen thuộc đóng một vai trò lớn trong UX, ngay cả khi bạn không thích cách nó bắt tay bạn!

Hy vọng tất cả hoạt động ra! :)

22
TJH

Một cái gì đó để hiểu liên quan đến thị lực và tuổi tác của con người - nó có xu hướng trở nên tồi tệ hơn theo tuổi tác vì các thấu kính của mắt trở nên cứng hơn và kém linh hoạt hơn theo tuổi tác.

Bởi vì điều này, các tình trạng mắt như loạn thị (nhìn đôi, vấn đề với tập trung) là phổ biến hơn khi mọi người già đi.

Điều này có ý nghĩa gì đối với trải nghiệm người dùng là trong khi những người trẻ tuổi hơn có thể thưởng thức các biểu tượng nhỏ đẹp tinh tế, thì người già có thể tự nheo mắt để thử và buộc các ống kính không linh hoạt của họ nhìn giao diện người dùng theo cách tương tự như Các bạn trẻ làm.

Điều đó nói rằng, đây là một số lĩnh vực vấn đề tiềm năng:

SIZE - kích thước biểu tượng cần được tăng lên

Nếu đối tượng của bạn là một đám đông lớn tuổi hơn, xin vui lòng xem xét kích thước lớn hơn. Điều này phải làm với toàn bộ kinh doanh nheo mắt tôi đã đề cập. Bạn muốn giao diện của mình dễ nhìn, không phải thứ gì đó khiến mọi người nghiêng về phía trước và nói, "Đợi đã, cái gì?"

Giao diện lớn hơn với các biểu tượng lớn hơn cũng sẽ giúp giải quyết toàn bộ, "Tôi không thể tìm thấy bất cứ điều gì trên cây điều hướng!" vấn đề là tốt.

HỢP ĐỒNG MÀU VÀ MẪU MÀU - độ tương phản cần được tăng lên và việc tạo khuôn cũng cần phải nhất quán

So sánh biểu tượng công cụ bút chì đã chọn của bạn với biểu tượng thư mục và biểu tượng ngôi nhà hoặc bất kỳ biểu tượng nào khác có màu tô đậm hơn.

Chú ý làm thế nào chúng rất giống nhau về màu sắc? Ngoài ra, hãy chú ý đến sự tinh tế của sự khác biệt màu sắc giữa bật và tắt (tôi giả sử bảng tạm bị vô hiệu hóa)/các biểu tượng có màu rất nhạt (các biểu tượng hướng về nửa bên phải).

Điều này gây nhầm lẫn bởi vì mặc dù công cụ bút chì được chọn với hộp màu vuông tối hơn, nó vẫn chia sẻ một màu rất giống với các biểu tượng không được chọn khác như biểu tượng ngôi nhà và biểu tượng thư mục. Tương tự, sự tinh tế của sự khác biệt màu sắc giữa bật và tắt là quá tinh tế.

Ngoài ra, bạn có một bộ sưu tập các biểu tượng có kiểu tô màu/lược đồ/kiểu không hoàn toàn đồng nhất (không nhất thiết là điều xấu hoặc điều gì đó bạn có thể giải quyết, nhưng tôi chỉ nói điều này một cách thực tế) vì một số chỉ là phác thảo. .. như biểu tượng i và một số được tô với màu tối hơn như biểu tượng thư mục và ngôi nhà và máy ảnh.

Do thiếu tính đồng nhất trong tô màu -scheme/style- (một số được điền vào một số phác thảo), nó thêm một cảm giác biến đổi tự nhiên cho giao diện người dùng có khả năng giới thiệu một nơi để tìm nhầm lẫn. Bởi vì nếu ai đó đang tìm kiếm một biểu tượng được chọn và họ đang tìm kiếm một biểu tượng đầy ... họ có thể - thoạt nhìn - nhìn thấy một cái gì đó giống như biểu tượng thư mục và nghĩ rằng đó là biểu tượng được chọn khi không phải vì trực quan, đã có biểu tượng 'đầy'.

Vì những lý do này, tôi cảm thấy rằng việc tăng độ tương phản màu sắc và - nếu có thể - cải thiện việc giữ nguyên mẫu/sơ đồ/kiểu trong việc tô màu các biểu tượng (tất cả chỉ phác thảo hoặc tất cả chỉ điền hoặc kết hợp cả hai, hoặc, nếu bạn muốn giữ biến thể, đảm bảo có đủ biến thể giữa các biểu tượng không được chọn và biểu tượng được chọn) sẽ hữu ích.

Một cách cụ thể để có thể làm nổi bật thực tế là biểu tượng được chọn được chọn là làm cho màu nền của nó cho hình vuông là màu duy nhất cho giao diện. Ngoài ra, thêm viền 1px bằng cách sử dụng phiên bản màu tô đậm hơn (và duy nhất một lần nữa). Một cái gì đó như thế này sẽ làm cho biểu tượng được chọn đặc biệt dính ra nhiều hơn nhưng không giống như ngón tay cái đau.

Để tổng hợp phần này, độ tương phản tốt hơn về màu sắc (về các biểu tượng riêng lẻ và về các biểu tượng trên toàn giao diện) và tính đồng nhất tốt hơn giữa các biểu tượng của các trạng thái tương tự (biểu tượng trên toàn giao diện, biểu tượng được chọn lại, bị tắt, v.v.) sẽ giúp để làm cho trải nghiệm thị giác dễ dàng hơn trên mắt. Điều này cũng sẽ giúp cải thiện sự dễ dàng mà mọi người có thể tìm thấy các biểu tượng họ cần.

9
Aith

Xu hướng hiện nay không phải là đơn sắc, mà là thiết kế phẳng. Bạn vẫn có thể sử dụng màu sắc, lấy màu nổi bật nhất trước đây cho mỗi biểu tượng sẽ giúp người dùng quen với thiết kế cũ.

4
user50285

Tôi nghĩ rằng có một số câu hỏi/cân nhắc thiết kế vẫn cần được quyết định trước khi bạn có thể đưa ra quyết định, cụ thể là:

  1. Bạn đang cố gắng phục vụ cho người dùng lớn tuổi hay trẻ hơn? Phân phối hiện tại của tuổi người dùng là gì và xu hướng là gì? Liệu nó có ý nghĩa để thiết kế riêng cho họ, hoặc cho phép một số mức độ tùy chỉnh trong phần mềm?
  2. Là nền màu xám được thiết kế như một màu trung tính hoặc để tránh các xung đột màu nhất định với phần còn lại của giao diện người dùng? Màu xám thường được sử dụng cho các trạng thái bị vô hiệu hóa, vì vậy bạn có thể không nên làm cho trạng thái được bật quá giống nhau nếu không sẽ không có đủ độ tương phản.
  3. Có phải việc giới thiệu các yếu tố hình ảnh khác sẽ giúp phân chia điều hướng thành các phần hợp lý (ví dụ: các dải dọc như thanh ruy băng MS Office).
  4. Thay vì chỉ dựa vào các biểu tượng, có các chú giải công cụ hoặc nhãn cho phép mọi người xác minh biểu tượng nào họ đang nhấn trước khi họ làm như vậy, đặc biệt nếu đó là một chức năng quan trọng thay đổi trạng thái của dữ liệu?

Tôi nghĩ rằng nếu bạn có thể trả lời những câu hỏi này và xem xét cách kiểm tra người dùng được tiến hành, bạn nên tìm câu trả lời cho câu hỏi.

2
Michael Lai

Tôi nghĩ rằng một sơ đồ màu bichrom có thể hoạt động tốt hơn so với đơn sắc trong trường hợp này.

Tất cả các biểu tượng được chọn có thể là một màu duy nhất, tức là màu xanh lá cây và tất cả các biểu tượng không được chọn có thể có màu xám. Chỉ cần cẩn thận để sử dụng màu không dễ nhầm với màu xám trong các tình huống có độ tương phản thấp, chẳng hạn như tối ưu LCD góc nhìn. Màu xanh sẽ là một ví dụ về màu có vấn đề như vậy.

2
dotancohen

Khi các biểu tượng là đơn sắc, phác thảo là điều không quan trọng nhất để người dùng phân biệt giữa chúng. Bạn cần cải thiện độ tương phản. Tôi sẽ đề nghị 2 điều để làm điều này trong khi vẫn giữ cho quản lý hạnh phúc:

  • Xóa nền màu xám trên thanh công cụ. Màu xám trên màu xám không bao giờ là một sự kết hợp tốt. Bạn có thể làm cho nền trắng mà không vi phạm hướng dẫn của bạn để giữ giao diện người dùng đơn sắc và cung cấp cho nó một viền màu xám để đảm bảo rằng nó vẫn nổi bật như một hộp thanh công cụ.

  • Với nền trắng, sau đó bạn có thể sử dụng màu xám nhạt hơn (trước đây được sử dụng cho nền) cho các biểu tượng bị tắt.

2
Franchesca

Trong khi đã có một số câu trả lời lý thuyết tốt, tôi nghĩ có một giải pháp thực tế cho vấn đề của bạn.

Vấn đề lớn nhất bạn đã trích dẫn là sự tương phản. Người dùng lớn tuổi của bạn không thể phân biệt giữa các biểu tượng được chọn và bị vô hiệu hóa. Thay vì cố gắng làm cho các biểu tượng bị vô hiệu hóa của bạn trông kém nổi bật hơn chúng đã làm như màu xám trên màu xám. Bạn cần làm cho các biểu tượng được kích hoạt của bạn nổi bật rõ ràng hơn trên đầu chúng.

Bạn có thể làm điều này mà không ảnh hưởng đến bảng màu của bạn với một viền đen cứng.

outline

Ví dụ trên là một chút tào lao, vì tất cả những gì tôi có quyền truy cập hiện tại không rõ ràng, nhưng bạn có thể thấy cách thêm một phác thảo cho thấy rõ rằng biểu tượng này ở trạng thái khác với các trạng thái khác.

2
Racheet