다중 레벨 그리드를 위한 UI 디자인 패턴
https://stackoverflow.com/questions/1629157
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
현재 다중 레벨 그리드에 관련 항목을 표시해야 한다는 요구 사항이 있습니다.즉 증조부모 -> 조부모 -> 부모 -> 자식이다.
예를 들어:국가-> 주->시->거리 순으로 표시됩니다.
제안된 솔루션은 이 모든 것을 다중 레벨 그리드(최대 4레벨)에 표시하는 것입니다.
Country-> State-> City-> Street
사용성 측면에서 이 솔루션이 마음에 들지 않기 때문에 디스플레이를 논리 단위로 분할하는 UI 디자인 패턴을 찾고 있습니다.
감사해요
해결책
동일한 계층 구조의 서로 다른 두 수준의 데이터 개체가 있는 경우 다음을 수행할 수 있습니다.
각 레벨을 다른 창(또는 페이지, 라이트박스)에 배치하고 레벨 간 탐색을 허용합니다.나는 이것을 부른다 드릴다운.
동일한 창(또는 페이지)의 다른 창에 각 수준을 배치합니다. 여기서 상위 창의 개체에 초점을 맞추면 하위 창도 채워집니다.나는 이것을 부른다 마스터-디테일 (여기에는 계단식 목록이 포함되며 위의 드릴다운과 혼동하지 마십시오.)
두 수준을 동일한 창에 배치하고 각 상위 개체 아래에 하위 개체를 들여쓰고 일반적으로 각 상위 개체에 대한 하위 개체를 숨기고 표시하는 컨트롤을 제공합니다.나는 이것을 a라고 부른다. 나무.
여러 수준의 계층 구조를 사용하면 이러한 수준을 원하는 대로 조합하여 사용할 수 있습니다.다음은 계층 구조의 인접한 수준을 연결하는 방법을 결정하기 위한 몇 가지 지침입니다.
다음과 같은 경우 레벨을 트리에 넣습니다.
계층 구조의 수준 수는 각 데이터 개체(예: 폴더)에 따라 임의로 달라집니다.
사용자는 정렬 순서에 따라 서로 가까이 있는 두 개 이상의 상위 개체의 하위 개체를 정기적으로 비교합니다. 그런 다음 사용자는 두 상위 개체에 대한 트리를 확장하여 하위 개체를 모두 한 번에 볼 수 있습니다.
다음과 같은 경우 레벨을 마스터-디테일 관계에 넣습니다.
개체당 하나 또는 두 개 이상의 속성(예: 이름 이상의 속성)을 표시하고 있으며 각 수준에는 서로 다른 속성이 있습니다.
상위 개체에 대한 하위 개체 클래스가 두 개 이상 있습니다.
표시할 다대다 관계가 있습니다.
자세한 내용은 참조 계층구조 시각 디자인
다음과 같은 경우 드릴다운 관계에 수준을 추가합니다.
각 레벨에 표시되는 정보의 양이 너무 커서 적당한 크기의 단일 창에 들어갈 수 없습니다.
작업은 사용자가 한 수준에서 다른 수준으로 전환할 수 있지만 사용자가 두 수준을 동시에 사용하지 않도록 지시합니다(일반적으로 사용자가 창 사이를 앞뒤로 탐색하는 것을 방지하려고 합니다).
어쨌든 다양한 상위 수준 작업에는 별도의 창이 필요합니다.이는 상위 창을 통해 "드릴다운"하지 않고 하위 창으로 직접 탐색할 수 있는 수단을 제공한다는 의미입니다.
일반적으로 드릴다운은 두 창이 모두 기본 창(또는 페이지)인 경우에만 의미가 있습니다.하위 창은 대화 상자, 속성 창 또는 라이트박스가 아니어야 합니다.전체 크기 기본 창을 정당화하기 위해 하위 창에 표시할 만큼 충분하지 않은 경우 마스터-세부 사항을 사용하십시오.마스터-세부 사항과 비교하여 드릴다운 대화 상자는 다음과 같습니다.
변경 사항을 저장하는 데 불일치가 발생합니다.
모드 또는 z 순서의 모호함(또는 라이트박스의 경우 뒤로 버튼 기능에 대한 모호함)을 만듭니다.
편집 및 실행 취소를 위한 기본 컨트롤이 포함된 풀다운 메뉴가 부족합니다(Linux 및 Windows).
내용을 보다 유연하게 볼 수 있도록 창 크기 조정(Mac 및 Windows에서)을 지원하지 않습니다.
위의 모든 내용에 대한 자세한 내용은 다음을 참조하세요. http://www.zuschlogin.com/?p=31.
다른 팁
나무? 파일 시스템의 Windows 탐색기보기처럼?
