it-swarm-korea.com

HTML 테이블을위한 최고의 UI.

나는 종종 테이블 형식의 데이터를 보여줘야하고 모든 마술을 원한다. . . 열, 페이지 매김 등을 정렬합니다. 열 이름을 클릭하고 사용자가 정렬을 수행하는 열을 선호합니다 (일반적으로 자바 스크립트를 사용하면 페이지 매김이 있으면 더 어렵지만 데이터를 정렬하기 때문에 더 어렵습니다) 화면 또는 해당 열을 기준으로 한 다음 첫 페이지에 다시 배치합니까?) 어떻게 정렬되었는지 어떻게 알 수 있습니까? 좋은 UI 힌트는 무엇입니까? 열 이름은 어떻게 보입니까? 또한 다른 모든 결과를 회색으로 색칠하고 싶지만 화면 밝기가 너무 높은 사람을보고 행을 구별 할 수있을만큼 회색이 아니지만 회색의 양을 늘리면 검은 색 텍스트를 편안하게 읽을 수있을만큼 충분한 대비.

올바르게 수행 된 테이블의 예는 무엇입니까?

6
tooshel

일반적으로 "정렬 기준"은 오름차순 또는 내림차순 정렬을 나타내는 위/아래 화살표를 통해 표시됩니다. 열 이름은 대담한 텍스트 또는 음영이있는 배경과 같은 값보다 대비 수준이 높아야합니다.

개인적으로, 번갈아가는 행을 채색 할 때 사용자가 테이블과 더 오래 상호 작용할수록 효과가 더 커지기 때문에 일반적으로 어둡지 않고 밝아집니다.

다음은 테이블 레이아웃 옵션의 좋은 예입니다. http://patterntap.com/tap/collection/tables

14
David Perini
  • 화면의 데이터뿐만 아니라 전체 테이블의 데이터를 정렬하십시오. 그렇습니다. 새로운 정렬 순서 중 하나부터 시작해야하지만 ID로 정렬 한 다음 10 페이지에서 성을 기준으로 정렬하기로 결정했다면 이해가 되겠습니까?
  • 정렬중인 열에서 테이블 머리글 셀의 배경을 강조 표시하여 정렬되었음을 나타냅니다. 더 나아가서 전체 열을 강조 표시 할 수 있습니다. 화살표를 사용하면 더욱 명확하고 접근하기 쉬워집니다. 예를 들어 정렬되지 않은 경우 오른쪽을 가리키는 화살표, 정렬 된 경우 아래쪽을 가리키는 화살표.
  • 열 이름은 열 이름으로 만 구별 할 수 있어야합니다. 나는 그것들을 테이블 셀 내용보다 약간 더 크고 더 대담하게 만드는 경향이 있습니다.
  • 개별 행의 스캔 가능성을 높이기 위해 필요한 경우에만 다른 모든 결과를 회색으로 채색하십시오. 그것이 당신이 디자인하는 것이라면, 사용자가 읽는 것이 아니라 스캔하고 있기 때문에 전체 가독성을 약간 낮추는 트레이드 오프가 좋습니다. 그리고 궁극적으로 모든 화면 밝기에 맞게 디자인하는 것은 불가능하므로 행복한 매체를 선택하고 그에 충실하십시오.

지금 당장 즉각적인 예는 없지만 위의 조언/선호 사항을 따르는 웹 응용 프로그램 용으로 설계된 표의 예는 다음과 같습니다.

image of a table

5
Rahul

순수한 시각적 관점에서 http://www.datatables.net/ (jQuery 용 플러그인)을 확인하십시오. 홈 페이지의 샘플 테이블에는 이미 구현 한 기능이 있습니다.

기술적으로는 백엔드 기술이 사용하는 내용에 따라 다릅니다. .Net 서버에서 실행중인 경우 ASP 3.5 및 4에 포함 된 컨트롤은 jQuery 및 플러그인 종속성없이 설명하기가 매우 쉽습니다.

4
Rob Allen

ExtJS 그리드를 확인하십시오. http://dev.sencha.com/deploy/dev/examples/#sample-

내가 본 JS 프레임 워크의 최상의 사용자 상호 작용. 우리는 Marketo에서의 응용 프로그램에 광범위하게 의존합니다.

4
Glen Lipka

"모든 마술"이 포함 된 데이터 그리드가 필요한 경우 dhtmlxGrid를 시도하십시오. http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

내가 본 가장 강력한 JavaScript 그리드 중 하나입니다.

2
Steve E.

두 가지 방법으로 정렬하려면 Windows 탐색기/그놈 노틸러스와 같은 고전적인 화살표 위/아래가 있으며 일반적으로 셀보다 어두운 색입니다.

alt text

1
dierre