web-development-kb-ko.site

CMS 인터페이스 로직. -이것이 최선의 방법입니까?

Cms 시스템을 개발 중입니다. 현재 메뉴에 새 메뉴 항목을 추가하기 위해 인터페이스를 작업 중입니다. (cms 로직으로 인해 메뉴가 고정되어 있으므로 사용자는 메뉴를 추가 또는 제거 할 수 없으며 모든 메뉴 항목 만 삭제하고 메뉴 항목을 메뉴 또는 메뉴 항목에 할당 할 수 있습니다).

새 메뉴 항목을 추가하려면 메뉴 위의 큰 영역을 클릭해야합니다 (img 2 참조). 입력 필드가 나타납니다. 입력을 저장하면 "할당되지 않음"상자에 새로운 메뉴 항목이 나타납니다. 메뉴 항목을 배치하려면 메뉴 중 하나를 원하는 위치로 드래그하면됩니다.

메뉴 항목을 삭제하려면 휴지통으로 드래그하면됩니다. 항목을 편집하려면 해당 항목을 클릭하면 해당 항목이 강조 표시되고 입력 필드 (예 : 새 항목을 추가하는 항목)가 선택한 메뉴 항목의 정보로 채워져 나타납니다. 변경하고 저장을 클릭하십시오. 항목의 위치를 ​​변경하려면 항목을 원하는 위치로 드래그하십시오.

모든 것이 이해하기 쉽기를 바랍니다.

내 질문은 :

이 아이디어는 사용하기 쉽고 논리적입니까? 그것을하는 가장 좋은 방법입니까, 아니면 더 나은 아이디어가 있습니까? 개선에 대한 의견/아이디어가 있습니까?

cms ui img 1 img 1

cms ui img 2 img 2

// 업데이트.

알았어, 난 모형을 했어 내가 아는대로 모든 ArchieVersace 의견을 통합했습니다. 모달 편집 상자의 경우 : 빠른 스케치이므로 실제 입력, 크기 등은 없습니다.

Navigation TreeAdd/Edit BoxTrash Bin

// 2010 년 10 월 29 일 업데이트

그래서 나의 현재 변화 :

  • 휴지통 없음
  • 수직 트리 구조
  • 추가 버튼 (메뉴 이름 옆에 있지만 위치가 변경 될 수 있음)
  • 서로 옆에 3 개의 메뉴 (평균 프로젝트 수)를 배치하기 전에 위치를 선택하지 않고 만든 경우 메뉴 위에 할당되지 않은 메뉴 항목의 너비는 각각 약 300 픽셀입니다. 너비가 더 큰 메뉴는 거의 없기 때문에 충분합니다. 메뉴를 축소하는 버튼을 추가하지만 시작시 모든 항목이 축소되지는 않습니다 (그러나 쿠키를 통해 마지막 기본 설정을 저장).

어쨌든 내 cms에 자바 스크립트가 필요합니다. 워드 프레스처럼 배포되지 않지만 프로젝트 당 판매되므로 js가 필요할 수 있습니다. 즉, 메뉴 위치 지정을위한 폴백 (저장/취소)이 필요하지 않습니다.

내 사용자는 거의 매일 시스템을 사용하고 있지만 일부는 2 개월마다 웹 페이지의 내용을 업데이트 할 수도 있습니다. 따라서 가능한 한 쉬워야한다고 생각합니다. 이 때문에 항상 보이는 다른 추가 버튼을 포함하는 것이 중요하다고 생각합니다. 이 버튼으로 메뉴 항목을 추가하면 메뉴 항목이 메뉴에 할당되지 않습니다. 이 경우 메뉴 위의 부분이 새로 작성된 항목을 보유한 것으로 나타날 수 있습니다.

이것이 좋은 생각이라고 생각하십니까? 메뉴 항목이 생성되지 않은 경우 표시되지 않거나 공간을 차지하지 않습니다.

alt text

8
Lukas Oppermann

메뉴의 가로 레이아웃이 혼란 스러울 수 있다고 생각합니다. 첫째, 그것은 계층 적 의미가 없습니다-왜 첫 번째 레벨 만 수평으로 배치되고 다른 레벨은 수직입니까? 또 다른 문제는 더 많은 1 단계 아이템이있을 때 어떻게됩니까? 가로 스크롤은 대부분의 경우 큰 해결책이 아닙니다. 나는 모든 것을 수직으로 만들고 나서 이미 한 것처럼 하위 항목을 들여 쓰기합니다.

휴지통과 메타 메뉴 섹션은 필요하지 않습니다. 각 메뉴 항목에 대해 입력 할 입력이 3 개 뿐인 경우 휴지통 복구는 그다지 중요하지 않습니다. 또한 새 메뉴를 만들 때 메타 메뉴 섹션의 기능이 기존 메뉴 복사 기능으로 대체 될 수 있습니다. (사이트의 모든 페이지가 자동으로 채워지면 다시 스케일을 고려해야합니다). 두 섹션 모두 편집 메뉴 항목 섹션으로 대체 될 수 있습니다.

그 외에는 멋져 보입니다. 나는 당신의 모형의 단순함을 좋아합니다.

0
Virtuosi Media

긴 설명없이이 화면을 보면 수행 할 작업, 클릭 대상 및 상호 작용 순서를 파악하기가 어렵습니다. 좋은 사용자 인터페이스는 일반적으로 최소한의 설명이 필요합니다 (iPhone 또는 Wii와 같은 것을 생각하면 시작하기 위해 텍스트 단락이 필요하지 않은 경우 매우 신속하게 수행해야 함). .

제가 가장 먼저 할 일은이 화면을 더 많은 사람들 (IRL)에게 보여주고 설명없이 어떻게 반응하는지 확인하는 것입니다. 그들은 그것을 얻습니까? 그들이 무엇을보고 있는지, 여기에서 무엇을 기대하는지 알고 있습니까? 그렇지 않은 경우-설명이 필요한 경우 화면 재구성을 고려해야합니다. 사람들의 의견을 수집하거나 앱의 프로토 타입을 만들어 사람들이 사용하도록함으로써 (이를 수행 할 수 있도록 제안하는 데주의를 기울여야합니다.

이 단계에서받는 피드백은 여기 사람들이 제공 할 수있는 의견보다 훨씬 유용합니다.

또한 이미지가 현재 검은 색과 흰색 와이어 프레임이므로 충실도를 조금 높이고 색상을 추가하고 다양한 각도로 타이포그래피를 사용하는 것보다 디자인을 보는 사람들의 시각적 무게를 파악하기가 더 어려울 것입니다 내 눈이 화면 위로 어떻게 움직여야하는지.

2
Rahul

특정 상호 작용에 도움을 줄 수는 있지만 (아래와 같이) 달성하려는 것을 모르기 때문에 제한적으로 사용됩니다. 실제로해야 할 일은 시스템의 요구 사항을 명시하는 것입니다. 사용자는 무엇을 달성하려고합니까? 그들은 얼마나 자주 시스템을 사용합니까? 그들의 기술 수준은 무엇입니까? 기타.

예를 들어, 시스템을 자주 사용하지 않는 사용자는 사용간에 시스템을 사용하는 방법을 잊어 버릴 수 있으므로이 경우 인터페이스를 사용하고 선택하기가 매우 간단해야합니다. 그러나 사용자가 자주 방문하는 경우 지나치게 간단한 접근 방식은 사용자가 오랫동안 초보자를 유지하지 않기 때문에 실망 스러울 수 있습니다. 그들은 여분의 전력을 요구하는 중간 사용자가 될 것입니다. 나는 당신이 무언가를 사용하기 어렵게 만드는 것은 아니지만 중급 사용자에게는 여분의 힘과 복잡성을 추가하는 것을 두려워해서는 안됩니다.

귀하가 제공 한 모형의 측면에서 다음과 같은 구체적인 제안이 있습니다.

  • 할당되지 않은 추가, 휴지통 패널은 사용자가 차지하는 공간에 유용한 기능을 충분히 제공하지 않으므로 제거하십시오.
  • 추가 버튼을 추가되는 위치에 추가하여 사용자가 추가하고 배치하는 대신 원하는 위치에 추가 할 수 있도록합니다.
  • 사용자가 메뉴 항목을 구성하려고하면 정보를 수집 할 필드가있는 회색 상자가 표시됩니다
  • 각 메뉴 항목에 편집 및 삭제 버튼 추가
  • 메뉴의 각 수준에 계약을 추가하고 버튼을 확장하면 기본적으로 모든 수준이 계약됩니다.
  • 더 긴 메뉴 항목을위한 충분한 공간 확보
  • 저장 및 취소 버튼과 같은 롤백 옵션 추가를 고려해야합니다

아래는 모의입니다. alt text

1
ArchieVersace

다른 업데이트. alt tree

추가 버튼을 잃어 버릴 지 확실하지 않습니다. 사람들이 메뉴 항목을 쉽게 추가하는 방법을 알아낼까요?

또한 동일한 레벨 또는 하위 레벨로 메뉴 항목을 추가 할 수있게하려면 어떻게해야합니까? 지금 당장은 아마도 하위 수준이 될 것입니다 (실제로이 버튼은 약간 오른쪽으로 이동해야합니다). 그러나 원하는 지점에서 같은 레벨의 새 항목을 어떻게 추가 하시겠습니까?

바닥 글 메뉴에서 메뉴 항목을 다른 위치로 드래그하는 방법을 보여 주려고했습니다.

0
Lukas Oppermann