it-swarm-vi.tech

Làm cách nào để tối ưu hóa không gian được sử dụng bởi các thẻ trong cột bên phải của trang web StackExchange?

Trong câu hỏi meta này về trang web StackExchange UI sẽ như thế nào , tôi đang làm việc (đọc: loay hoay với) một thiết kế cho trang web. Tôi đang sử dụng một công cụ dựa trên web để chỉnh sửa CSS của trang, điều này mang lại cho tôi rất nhiều sự tự do để thay đổi mọi thứ trong khi giới hạn tôi với HTML có sẵn do máy chủ kết xuất.

Trong khi thay đổi và sắp xếp lại mọi thứ (chủ yếu là các yếu tố như kiểu chữ và trọng lượng hình ảnh) tôi nhận ra rằng cột bên tay phải như được hiển thị trên gần như mọi trang web StackExchange khá kém hiệu quả. Đây là giao diện của trang meta:

How the tags look on beta sites

Thẻ (và bên dưới, huy hiệu) là các đối tượng nhỏ có chiều dài lớn hơn chiều ngang so với chiều dọc. Mỗi cái có một vài thuộc tính:

  • Tên của đối tượng
  • Số lần thẻ được trao hoặc thành viên huy hiệu đã được chỉ định cho
  • Một yếu tố trực quan để củng cố khái niệm về đối tượng
  • Một chiều rộng khác biệt tùy thuộc vào độ dài của tên

Cách mọi thứ được tổ chức bây giờ cảm thấy rất không hiệu quả:

  • Mỗi thẻ/huy hiệu chiếm một dòng không gian, mặc dù không cần toàn bộ chiều rộng ngang.
  • Đại diện trực quan thẻ và huy hiệu trên trang này cảm thấy không đầy đủ. Mặc dù các thẻ và huy hiệu được thiết kế để tự hiển thị, ví dụ: thẻ cho câu hỏi hoặc huy hiệu trên hồ sơ của thành viên, trong những trường hợp này, chúng được kèm theo siêu dữ liệu: số lần thẻ được áp dụng hoặc thành viên huy hiệu được trao cho. Nhưng đại diện trực quan vẫn giả định một ứng dụng chung.
  • Trên hầu hết các trang web StackExchange, các phần tử này có đường viền mạnh, tạo ra nhiều không gian âm khó xử ở giữa mỗi phần tử khi nó nằm trên một dòng.

Trong thiết kế lại của tôi Tôi đã quan tâm đến việc giảm độ mạnh của các thẻ (chưa xử lý huy hiệu) để giảm nhiễu hình ảnh đó, nhưng tôi chưa nghĩ ra cách nào tốt để thể hiện các thẻ kết hợp với số lần áp dụng chưa. Tôi đã có một số ý tưởng, nhưng không ai trong số họ cảm thấy đúng:

  • Kết xuất chúng trong một đám mây thẻ. Điều này sẽ sử dụng nhiều không gian ngang và dọc hơn. Tuy nhiên, các đám mây thẻ hầu hết có thể quét được và không dễ đọc. Không chắc chắn nếu đó là một vấn đề mặc dù.
  • Xem xét một đại diện trực quan mới cho sự kết hợp của thẻ với số lượng ứng dụng. Có lẽ bằng cách bao gồm số trong thẻ: <thảo luận] x14 sẽ trở thành <thảo luận | 14]. Hoặc bằng cách tăng chiều cao của thành phần thẻ và đặt "14" bên dưới tên. Điều đó sẽ chiếm nhiều không gian theo chiều dọc hơn, nhưng cho phép một số thẻ trên mỗi hàng.
  • Xóa tham chiếu đến số lượng ứng dụng cụ thể và thay vào đó sử dụng phép ẩn dụ trực quan để chỉ ra số lần áp dụng. Có lẽ bằng cách sử dụng bảng nhiệt kế: các thẻ "nóng" có thể có nhiều màu đỏ hơn và các thẻ lạnh có màu xanh hơn. Điều này sẽ không rõ ràng ngay lập tức cho người dùng mới, mặc dù.
  • Xóa tham chiếu đến số lượng ứng dụng cụ thể và thay vào đó sử dụng chiều rộng để biểu thị độ nóng. Thẻ càng rộng (ở cột bên tay phải), nó càng phổ biến. Như trên, tuy nhiên, điều này sẽ hơi khó hiểu ban đầu.

Thời gian câu hỏi: Điều gì sẽ là cách hiệu quả để thiết kế lại cách hiển thị thẻ và huy hiệu trong cột bên tay phải, với điều kiện là tôi chỉ có thể sửa đổi CSS và không thể giả mạo HTML?

8
Rahul

Kudos cho những nỗ lực - rất tốt đẹp!

Tôi có một vài bình luận về danh sách ở cuối:

  • Cá nhân tôi cảm thấy các đám mây thẻ không hữu ích.
    [.__.] Thứ tự giữa các yếu tố không rõ ràng, không phải lúc nào cũng dễ dàng để xem cái nào lớn hơn và bạn không biết các thẻ được sắp xếp theo cái gì.
  • Đối với đề xuất thứ hai của bạn, tôi có thể có một cải tiến nhỏ, nhưng nó cũng không cảm thấy đúng - Sử dụng chiều rộng, nhưng không chỉ đơn giản là làm cho thẻ rộng hơn - xếp chúng lên!
    I E. chỉ hiển thị một "bóng" ở bên phải của mỗi thẻ cho mỗi trường hợp.
    alt text
    [.__.] Đương nhiên, bạn sẽ đặt một ranh giới và bất cứ điều gì trên 10 hoặc lâu hơn sẽ có Ellipsis (...)
    [.___.] Nếu bạn muốn, bạn có thể kết hợp số lần xuất hiện trên ngăn xếp, nhưng nó có thể tạo ra sự lộn xộn.
7
Dan Barak

Có thể sử dụng cách tiếp cận phông chữ có trọng số hoặc màu phông chữ?


(nguồn: ljplus.r )

4
Kostya

Tôi nghĩ rằng danh sách các thẻ khó khăn trên trang web này khiến tôi tránh được vì trong tiềm thức, nó làm tôi sợ vì quá dài. Tôi nghĩ rằng việc giới hạn nó vào top ten với một tùy chọn để xem tất cả chúng sẽ khiến người dùng quét nó nhanh chóng và xem những gì nó đang diễn ra trong vài giây.

Ngoài ra, tôi không bao giờ có thể hiểu làm thế nào các thẻ được sắp xếp. Dường như với tôi rằng chúng được sắp xếp theo các con số bên phải chứ không phải là lần truy cập gần đây. Do đó, tôi nghĩ việc di chuyển các số sang trái và sắp xếp chúng (các số) sang phải sẽ tạo ra sự chắc chắn rằng chúng được sắp xếp theo nó. Xóa dấu "x" lặp đi lặp lại và hình ảnh xung quanh mỗi thẻ sẽ làm lộn xộn danh sách và cải thiện khả năng quét được.

Hơn nữa, làm cho các thẻ trông giống như các liên kết sẽ biểu thị rằng nó có thể nhấp và nó sẽ đưa bạn đến một trang khác.

enter image description here

4
Denzo

Một vài ý tưởng, nhiều hơn spark những ý tưởng vượt trội khác hơn bất kỳ ý tưởng nào khác:

  • Một thanh trượt (bảng các thẻ mờ dần trong và ngoài liên tiếp)
  • Mã chứng khoán của thẻ
  • Biểu đồ thẻ tĩnh
  • Biểu đồ thẻ tương tác
  • Một cái gì đó tương tự như trực quan hóa tại Digg Labs .
0
Virtuosi Media