it-swarm-ko.com

탐색 아이콘을 표시하여 UI를 어지럽히 지 않는 "좋은"방법이 있습니까?

음악 폴더를 스캔하고 무작위로 재생할 앨범을 선택하는 작은 데스크탑 응용 프로그램이 있습니다. 첫 번째 버전은 WinForms이며 동일한 아티스트의 앨범이 더있을 때 활성화되는 앨범 아트의 양쪽에 "이전"및 "다음"버튼이 있습니다.

enter image description here

버튼이 너무 많은 공간을 차지하기 때문에이 UI에 만족하지 않습니다.

WPF를 사용하여 응용 프로그램을 다시 작성하고 있으며 같은 아티스트의 다른 앨범이 있음을 나타내는 더 나은 방법을 찾고 있습니다. 표지 아트 위에 버튼을 표시하고 마우스가 해당 위치로 롤오버 될 때만 표시하는 것으로 실험했지만 옵션이 있다는 표시가 없기 때문에 결과에 만족하지 않습니다.

Brian Stevens Photography 사이트에서 탐색을 나타 내기 위해 커서가 이미지의 각 절반에서 "+"및 "-"로 변경되는 깔끔한 트릭을 발견했지만 이미지를 클릭하여 재생 이 앨범을 직접 사용하려면이 방법을 적용해야합니다.

더 좋은 방법이 있습니까, 아니면 회전 목마 또는 커버 플로우가 이것과 함께 갈 수 있습니까?

약간 더 많은 배경을 보려면 내 블로그 게시물 을 읽으십시오.

10
ChrisF

기본적으로 두 가지 아이디어, 첫 번째 아이디어는 작은 원을 표시하고 가운데에 강조 표시된 것은 현재 페이지/앨범이며 화살표를 클릭하면 다음/이전 항목을 강조 표시합니다. 이를 통해 사용자는 주어진 아티스트가 사용할 수있는 앨범 수를 알 수 있습니다.

(매트 Lutze의 우수한 목적 ASCII 그림)

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<       o o o * o o o        >>

다음 앨범은 아티스트에 대해 6 개 이상의 앨범이있을 때 표시 될 수 있으며 총 앨범 중 앨범 1 만 표시합니다.

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<          1 of 10           >>

이런 방식으로 요소가 여전히 존재하고 보거나 듣는 더 많은 시각적 (또는 리터럴) 대기열을 보여줍니다.

Random Idea : 물론 표지 아트를 클릭하고 내부를 볼 수 있다는 아이디어가 정말 좋습니다.이 경우에는 해당 앨범에서 사용할 수있는 노래 목록이 표시됩니다. 특정 노래를 재생하는 옵션입니다.

[Settings]  [Random album]  [Info]

 {   1. Song Names here       ^ }
 {   2. Song Names here         }
 {   3. Song Names here         }
 {   4. Song Names here         }
 {   5. Song Names here       v }

 <<           1 of 10          >>
9
Drofnas

시각적 불협화음 때문에 탐색 버튼이 제대로 보이지 않습니다.

  • 그들은 둥글고 이미지는 정사각형입니다.
  • 그들은 매우 밝게 3D이고 이미지는 평평합니다

  • 그들이 위아래로 낭비하는 공간은 평평한 회색 미사용이며 버튼과 비슷한 장식을 사용하지 않으므로 버튼과도 조화되지 않습니다.

좁은 사각형의 평평 버튼은 앨범 아트의 전체 높이, 중간에 스택 된 ">"(또는 "<")를 사용하면이 세 가지 문제가 해결되지만 표지 아트는 여전히 네비게이션 컨트롤 분리. 하나의 시각적 청크에서 탐색 컨트롤을 사용하는 것이 더 효과적입니다.


여기 구식 솔루션 (왼쪽)과 더 현대적인 것 (오른쪽)이 있습니다.

커버 아트 프레임의 버튼 스타일 (베벨/반올림/드롭 섀도우/What-have-you)스타일과 일치해야 함.

enter image description here

왼쪽 버튼은 당신이 원하는 부동산의 양과 타격을 얼마나 쉽게하고자하는지에 따라 왼쪽/오른쪽 버튼의 크기를 쉽게 늘릴 수 있다는 장점이 있습니다.

오른쪽에는 물고기 눈 미니 회전 목마가 있습니다. 표지 그림을 방해하지 않도록 활성화되지 않은 경우 축소판 이미지를 구식으로 촬영해야하며 크기를 선택할 수있는 옵션이 거의 없습니다.

왼쪽은 간단하고 효과적이며, 오른쪽에는 더 많은 눈 사탕이 있습니다. 나는 왼쪽을 선호합니다. 음악에 대한 내 취향의 시대를 추측 할 수 있습니다.

5
James Crook

다른 제안으로, Apple의 CoverFlow는 사용자가 커버를 문지르도록 커버 아트 아래의 가로 스크롤 막대를 사용합니다.

장점 :

  • 예술을 빠르게 훑어 볼 수 있습니다. 앱의 요구 사항이 아닐 수 있습니다.
  • 많은 예술품으로 비늘이 비늘합니다.
  • 앞뒤로 문지르면 좋은 무작위 검색이 가능합니다.

단점 :

  • 얼마나 많은 항목이 있는지 확실하지 않습니다.
3
ICR

UI 요소가 즉시 명확하지 않다고해서 그것이 잘못된 선택임을 의미하는 것은 아닙니다. 나는 표지의 오른쪽을 클릭하면 한 단계 앞으로 진행하고 왼쪽을 클릭하면 뒤로 돌아가는 무언가를 가지고 갈 것입니다. (이것은 왼쪽에서 오른쪽으로 만 사용한다고 가정합니까?)

사진 웹 사이트의 + 및-표시 대신 <및>을 제안합니다. 그리고 커서를 변형 시키거나 커서를 따라 가지 않을 것입니다. 오른쪽 가운데와 왼쪽 가운데에 배치하겠습니다.

앨범을 재생/일시 정지하는 방법으로 가운데를 클릭하여 실험 할 수 있습니다.

거의 보이지 않는 이러한 사용자 인터페이스는 일단 발견하면 사용하기 쉽고, 평소와 같이 별도의 버튼이 버튼처럼 보이는 것보다 훨씬 멋지게 보입니다. 이 미학의 극단은 모든 UI 요소를 커버 미리보기에서 보이지 않는 요소로 통합하는 것입니다. 마우스를 가리지 않을 때 덮개 (및 노래 제목)를 볼 수 있습니다. 아마도 이것은 앱에서 작동하지만 작동하지 않을 것입니다.

3
Scott Newson

흥미로운 질문과 기존 답변 모두 좋은 점.

전지전능 한 컨트롤 대 숨겨진 컨트롤에 관하여 : 나는 항상 눈에 보이지는 않지만 시각적으로 산만하지 않은 컨트롤에 기대는 것이 좋습니다. 녹색, 청색, 패턴 화; 모두 최소한 약간 산만해질 가능성이 있습니다. 나는 일반적으로 간단한 화살표 또는 "보다 큼"기호를 사용하는 Nir에 동의합니다

<< {이미지} >>

아이콘/버튼 대.

제안을 상위 아이콘으로 확장하고 개념이 데스크탑 앱/웹 앱 경계를 시각적으로 연결하도록 제안합니다.

[Settings]  [Random album]  [Info]
              Title
   {                          }
   {                          }
<< {          Cover           } >>
   {                          }
   {                          }

나는 일반적으로 인터페이스에서 커버 아트를 지배적 인 대상으로 만드는 경향이있다. 상단의 얇은 텍스트 링크 버튼 행, 제목, 표지의 큰 이미지, 양쪽에 좁은 뒤로 감기 막대가 있습니다. 아니면 그런 것.

그러나 당신은 그것을 스윙, 적어도 마우스 포인터 아이콘 변경 같은 새로운 동적 표시기를 사용하지 않는 것이 좋습니다. 포인터가 바뀌면 많은 사람들이 두려워하거나 긴장하게됩니다. 내 경험에 비추어 볼 때 사용자는 포인터가 예측 가능한 작업 후에 예측 가능한 작업을 수행하고 놀라지 않을 것으로 기대합니다.

깔끔한 프로젝트와 토론에 감사드립니다. 다른 사람들의 의견을 듣고 싶습니다.

2
Matt

답장을 보낸 사람이 전자 메일을 지원하는 것처럼 사용자 인터페이스 요소가 즉시 명확하지 않으면 사용자 기반의 좋은 비율이 찾지 못할 것이라고 말할 수 있습니다.

또한 문서 나 팝업 메시지를 읽지 않습니다.

기능은 명확해야하며 (그리고 종종 버튼이 충분하지 않은 경우도 있음) 사용자를 방해하지 않고 작동해야합니다 (빨간색 스 퀴글 밑줄 맞춤법 검사기는 좋은 예입니다. 찾을 필요는 없습니다. ).

버튼이 너무 크지 않도록 버튼의 스타일을 다시 지정할 수 있습니다. 예를 들어 버튼이 무거운 버튼 프레임이없는 두 개의 작은 화살표로 바뀌면 버튼이 튀어 나오지 않습니다. 여전히 사용자에게 신호를 보내면서 더 많은 것을 이용할 수 있습니다.

2
Nir

웹을 통해 지침을 찾으십시오. 대부분의 사용자가 사는 곳이며 UI 기대치를 안내합니다. 타겟 인구 통계에 대한 인기있는 사이트를보고 탐색을 관리하는 방법을 확인하십시오. 음악 탐색은 사진 탐색과 유사하므로 신문 및 잡지 사이트를 참조하십시오.

이러한 종류의 탐색은 그래픽 위의 작은 버튼 또는 마우스 오버시 나타나는 투명 버튼으로 가장 자주 수행됩니다. UI가 사용자가 앨범 커버를 클릭하여들을 수 있도록 디자인 된 경우 투명 버튼을 빠르게 찾을 수 있습니다.

1
David Veeneman