it-swarm-korea.com

중첩 레이아웃 편집기를위한 UI 패러다임

드래그 앤 드롭 위젯 배치, 속성 패널 등을 사용하여 레이아웃 편집기를 사용하여 Visual Studio의 WinForms 편집기와 다소 유사한 응용 프로그램이 있습니다.

배치 된 "NestedLayout"위젯 (이미지의 Layout B)이 다른 전체 레이아웃을 나타낼 수있는 nested 레이아웃 옵션을 추가하고 있습니다.

Sketch of nested layout editor

사용자가 이러한 중첩 레이아웃을 편집 할 수 있도록 어떤 종류의 인터페이스를 권장합니까? 기존의 프레임에서 직접 작업하는 것은 너무 번거로울 수 있습니다. 많은 화면 공간이 나머지 최상위 레이아웃에서 이미 사용되고 있기 때문입니다.

가능성은 상단 편집기에서 중첩 레이아웃을 최대화 (어쩌면 일종의 확대/축소 전환)로드, 위의 새 편집기 팝업 등을 포함 할 수 있습니다.

이런 종류의 시나리오를 효과적으로 처리하는 편집기 응용 프로그램의 예를 보셨습니까?

6
kpozin

위의 화면이 나타나면 내 첫 번째 반사는 중첩 된 레이아웃을 두 번 클릭하여 편집하는 것입니다. 사용자가 기존 프레임에서 중첩 레이아웃을 편집하게하는 것이 올바른 해결책이 아니며 사용자에게 혼란을 줄 수 있다는 점에 동의합니다.

중첩 된 레이아웃을 완전히 렌더링 한 상태로 회색 또는 희미한 상태로 표시하고 편집 방법을 설명하는 메시지를 마우스 위에 표시합니다 (예 : "두 번 클릭하여 편집"). 또한 확대 효과로 중첩 레이아웃을 최대화하는 대신 첫 번째 편집기 위에 두 번째 편집기를 열도록 선택합니다. 확대 효과는 매우 영리하지만 일부 사용자를 쉽게 혼동시킬 수 있음을 알았습니다. UI에 매우주의해야하므로 방금 일어난 일과 왜 모든 위젯이 갑자기 사라 졌는지 궁금하지 않습니다.

3
Tania Gobeil

WYSIWYG 웹 디자인 도구가 iframe을 처리하는 방법을 살펴 보셨습니까? 일반적으로 iframe (또는 기타 임베드 된 오브젝트)은 비 대화식 오브젝트로 묘사되어 특정 오브젝트에 대한 편집기를 불러 오기 위해 두 번 클릭하거나 활성화해야합니다. iframe의 경우 Dreamweaver와 같은 도구를 사용하여 iframe의 소스 페이지에 액세스 할 수있는 속성 창이 나타납니다.

최상의 유용성은 아니지만 청중에 따라 WYSIWYG 규칙을 따르는 것이 좋습니다.

부모 컨트롤에서 NestedLayout를 렌더링하는 방법에 따라 예상치를 설정할 수도 있습니다. 완전히 렌더링되면 사용자가 상호 작용할 수있을 것으로 기대할 수 있습니다. 그러나 "위젯"또는 포함 된 개체로 상태를 나타내는 아이콘이있는 프레임 일 경우 다른 효과가있을 수 있습니다. 충실도가 높은 대화 형 모형에서 두 가지를 모두 테스트하여 사람들이하는 일을 확인하십시오. 이것은 "NestedLayout과의 상호 작용"과 같은 특정 테스트 시나리오를 기반으로 한 원격 사용성 테스트로 테스트하기에 좋습니다.

2
Rahul

IntelliJ IDEA Java IDE)를 살펴보십시오. 레이아웃이 중첩 된 GUI 양식을위한 매우 멋진 편집기가 있으며, 매우 유용한 드래그 앤 드롭 편집을 지원합니다.

1
extropy

재사용 가능한 * control * s를 나타내는 것을 고려하십시오. 따라서 두 번째 레이아웃을 완전히 새로운 레이아웃으로 편집하지만 Visual Studio의 user control와 같은 디자이너의 다른 탭/창에서 편집합니다. 사용자가 많은 공간을 필요로하지 않으면 더 작은 화면 공간에 신경 쓰지 않습니다 (어쨌든 몇 개의 버튼 만 포함 할 수 있습니다).

0
Camilo Martin

처음에는 위의 일부와 유사한 답변을 추가하려고했습니다. 예를 들어 복합 객체를 두 번 클릭하면 플래시가 회색으로 표시되고 둘러싼 컨텍스트가 잠 깁니다. 그러나 디자인 측면에서 응용 프로그램에 따라 "레이아웃 B"를 너무 쉽게 편집하고 싶지 않을 수 있음을 깨달았습니다. 예제에서 보여지는 것이 일반적으로 GUI 편집기에서 수행되는 것이라면, 화면에 보이는 모든 것이 하나의 객체에 있음을 의미합니다. 중첩 된 레이아웃을 쉽게 편집 할 수있게되면이 하나의 객체에 점점 더 많은 기능이 추가되어 레이아웃 A에 모든 위젯이 포함됩니다.

중첩 된 레이아웃을 편집하는 데 방해가되지 않으면 결국 사용자가 구현을 분리하여보다 쉽게 ​​처리 할 수있는 캡슐화 된 객체를 생성하게됩니다.

예 : Qt Designer를 사용하면 GUI 편집기 내에서 각 창의 탭 내용을 편집 할 수 있습니다.주의하지 않으면 모든 탭의 작업을 수행하는 창의 구현을 얻게됩니다. 정말 좋지 않은 것입니다.

0
Harald Scheirich

Adobe Flash

상호 작용할 수있는 컴포지션 (Flash에서 심볼이라고 함)을 가질 수 있습니다. 이 컴포지션 안에 레이어 및 기타 컴포지션이있을 수 있습니다. Flash의 작동 속도가 너무 느리고 버튼이 잘못된 위치에 배치되고 단축키가 부족하여 지나치게 복잡한 UI가 있기 때문에 경험이 다소 나쁩니다. 그러나 영감을 얻는 좋은 출발점입니다.

Interface Builder, World Craft 및 Adobe Flash의 혼합은 중첩 된 컴포지션 편집에 적합합니다.

0
neoneye