it-swarm-ko.com

StackExchange 사이트의 오른쪽 열에서 태그가 사용하는 공간을 최적화하는 방법은 무엇입니까?

StackExchange UI 사이트의 모양에 대한이 메타 질문 에서 사이트 디자인을 연구하고 있습니다 (읽기 : 엉망). 웹 기반 도구를 사용하여 페이지의 CSS를 편집하고 있으므로 서버에서 렌더링하는 사용 가능한 HTML로 제한하면서 내용을 자유롭게 변경할 수 있습니다.

주로 타이포그래피 및 시각적 무게와 같은 요소를 변경하고 재구성하는 동안 거의 모든 StackExchange 웹 사이트에 표시된 오른쪽 열이 매우 비효율적이라는 것을 깨달았습니다. 메타 사이트에 표시되는 방식은 다음과 같습니다.

How the tags look on beta sites

태그 (및 배지)는 세로보다 가로로 길이가 작은 작은 개체입니다. 각각에는 몇 가지 속성이 있습니다.

  • 객체의 이름
  • 태그가 수여되거나 배지가 할당 된 회원 수
  • 객체의 개념을 강화하는 시각적 요소
  • 이름의 길이에 따라 뚜렷한 가로 너비

사물이 조직되는 방식은 이제 매우 비효율적입니다.

  • 전체 가로 너비가 필요하지 않더라도 각 태그/배지는 한 줄의 공간을 차지합니다.
  • 이 페이지의 태그 및 배지 시각적 표현이 적절하지 않습니다. 태그 및 배지는 질문에 대한 태그 또는 회원 프로필의 배지와 같이 자체적으로 표시되도록 설계되었지만 이러한 경우 태그가 적용된 횟수 또는 회원과 같은 메타 데이터가 동반됩니다. 배지가 수여됩니다. 그러나 시각적 표현은 여전히 ​​일반적인 응용 프로그램을 가정합니다.
  • 대부분의 StackExchange 사이트에서 이러한 요소는 경계가 튼튼하여 각 요소가 한 줄에 배치 될 때 각 요소 사이에 많은 부정적인 공간을 만듭니다.

my redesign 에서 나는 시각적 소음을 줄이기 위해 태그의 강도를 줄이려고 노력했지만 (아직 배지를 다루지 않았지만) 태그를 표현하는 좋은 방법을 찾지 못했습니다. 아직 적용된 횟수와 함께. 나는 몇 가지 아이디어를 가지고 있지만 아무도 생각하지 않습니다.

  • 태그 클라우드로 렌더링하십시오. 이것은 더 많은 수평과 더 적은 수직 공간을 사용합니다. 그러나 태그 클라우드는 대부분 스캔 가능하고 읽을 수 없습니다. 그래도 문제인지 확실하지 않습니다.
  • 태그와 여러 응용 프로그램의 조합에 대한 새로운 시각적 표현을 고려하십시오. 아마도 태그에 숫자를 포함시킴으로써 : <토론] x14는 <토론 | 14]가 될 것입니다. 또는 태그 요소의 높이를 높이고 이름 아래에 "14"를 배치하십시오. 전체적으로 더 많은 수직 공간을 차지하지만 각 행에 여러 개의 태그를 허용합니다.
  • 특정 수의 응용 프로그램에 대한 참조를 제거하고 시각적 은유를 사용하여 적용 횟수를 나타냅니다. 아마도 온도계 팔레트를 사용하여 "핫"태그가 더 빨갛고 차가운 태그가 더 파란색 일 수 있습니다. 그러나 이것은 새로운 사용자에게는 즉시 명백하지 않을 것입니다.
  • 특정 응용 프로그램 수에 대한 참조를 제거하고 대신 너비를 사용하여 뜨거움을 나타냅니다. 오른쪽 열에있는 태그가 넓을수록 더 인기가 있습니다. 그러나 위와 같이 처음에는 다소 혼란 스러울 수 있습니다.

질문 시간 : CSS 만 수정할 수 있고 변조 할 수없는 경우 오른쪽 열에 태그와 배지가 표시되는 방식을 재 설계하는 효과적인 방법은 무엇입니까? HTML?

8
Rahul

노력에 대한 명성-아주 좋은!

끝에 목록에 대한 몇 가지 의견이 있습니다.

  • 개인적으로 나는 태그 클라우드가별로 유용하지 않다고 생각합니다.
    요소들 사이의 순서가 명확하지 않으며, 어느 것이 더 큰지 쉽게 알 수있는 것은 아니며 태그가 정렬 된 것을 알 수 없습니다.
  • 두 번째 제안에 관해서는, 약간의 개선이있을 수 있지만, 느낌이 들지 않습니다-너비를 사용하지만 태그를 더 넓게 만들지 마십시오- 쌓아 올리십시오!
    즉, 각 인스턴스의 각 태그 오른쪽에 "그림자"를 표시하면됩니다.
    alt text
    당연히 경계를 설정하고 10 이상이면 줄임표 (...)가 생깁니다.
    원하는 경우 스택 위에 여러 모양을 통합 할 수 있지만 혼란을 일으킬 수 있습니다.
7
Dan Barak

글꼴 크기 가중 또는 글꼴 색 접근 방식을 사용할 수 있습니까?


(출처 : ljplus.r )

4
Kostya

이 사이트의 태그 목록이 무의식적으로 너무 길어서 나를 무서워하는 것을 피할 수 있다고 생각합니다. 모든 것을 볼 수있는 옵션으로 상위 10 개로 제한하면 사용자가 빠르게 스캔하고 몇 초 안에 무슨 일이 일어나고 있는지 볼 수 있습니다.

또한 태그 정렬 방법을 이해할 수 없었습니다. 그것들은 최근보다는 오른쪽에있는 숫자로 정렬 된 것 같습니다. 따라서 숫자를 왼쪽으로 이동하고 숫자 (오른쪽)로 정렬하면 정렬되어 확실성이 있다고 생각합니다. 반복적 인 "x"부호와 각 태그 주위의 그래픽을 제거하면 목록이 어수선 해져 스캔 성이 향상됩니다.

또한 태그를 링크처럼 보이게하면 클릭 할 수 있고 다른 페이지로 연결됩니다.

enter image description here

4
Denzo

다른 어떤 것보다 spark 다른 즉시 사용 가능한 아이디어)에 더 가까운 몇 가지 아이디어 :

  • 슬라이더 (태그 패널이 연속적으로 페이드 인 및 페이드 아웃)
  • 주식 시세 표시기
  • 정적 태그 차트
  • 인터랙티브 태그 차트
  • Digg Labs 의 시각화와 비슷한 것입니다.
0
Virtuosi Media