대형 스크린 부동산 디자인의 도전을 어떻게 극복합니까? [닫은]


10

이 질문은 좀 더 주관적이지만 새로운 관점을 갖기를 바랍니다. 나는 특정 화면 크기 (일반적으로 1024x768)를 디자인하는 데 익숙하여 그 크기가 문제가되지 않는다는 것을 알았습니다. 크기를 1280x1024로 확장해도 화면 공간이 충분하지 않아 눈에 띄는 차이는 없지만 호흡 공간이 조금 더 넓어집니다. 기본적으로 "그리드 크기"를 확장하면 약간 작은 화면에 대한 동일한 기본 디자인이 여전히 작동합니다.

그러나 마지막 두 프로젝트에서 고객은 모두 1080p (1920x1080) 화면을 사용했으며 가능한 한 많은 부동산을 사용할 수있는 솔루션을 원했습니다. 가로로 1920 픽셀은 내가 사용하던 너비의 두 배 미만에 불과하며, 와이드 스크린으로 인해 기존 방식 중 일부가 제대로 작동하지 않는 디자인 방식이 사용됩니다. 내가 겪고있는 문제는 너무 많은 공간이 제시되면 몇 가지 중요한 문제에 직면한다는 것입니다.

  • 몇 개의 열을 사용해야합니까? 와이드 포맷은 2 : 1 : 1로 분할 된 3 개의 열 분할 (즉, 다른 두 열보다 큰 내용 열)에 적합합니다. 그러나 세 개의 열을 가지고 가면 추가 열로 무엇을해야합니까?
  • 화면 공간 을 효율적으로 사용하려면 어떻게해야 합니까? 화면에 모든 것을 한 번에 배치하려는 유혹이 있지만 너무 많은 정보는 실제로 응용 프로그램을 사용하기 어렵게 만듭니다. 공백은 복잡한 정보를 이해하는 데 중요하지만 너무 많으면 관련 개념이 너무 분리되어 보입니다.
  • 나는 보통 복잡한 데이터를 가진 웹 응용 프로그램을 사용하고 있으며 시각화 및 프리젠 테이션은 원시 데이터를 이해하는 데 중요합니다. 사용자에게 큰 화면 (최소 24 인치)이있는 경우 일부 정보가 보이지 않으며 포인터를 먼 거리로 이동해야합니다. 필요한 모든 것을 시각적 인 핫 포인트 내에 유지하려면 어떻게해야합니까?
  • 너비가 제한되면 블로그와 같은 간단한 사이트가 실제로 더 잘 수행되므로 많은 부동산이 낭비됩니다. 텍스트 상자와 텍스트 미리보기를 나란히 두는 것이 해당 유형의 화면에서 관리자에게 큰 이점이 될지 궁금합니다. (1 : 1 2 열 분할).

당신의 대답을 위해, 나는 디자인의 거의 모든 것이 "의존적"이라는 것을 알고 있습니다. 내가 찾고있는 것은 :

  • 사용하는 일반 원칙
  • 디자인 접근 방식이 어떻게 바뀌 었습니까

나는이 다른 형식으로 작업하는 방법을 스스로 훈련시켜야한다는 것을 알게되었습니다. 내가 지금까지 해결 한 모든 충돌은 약 25 %였습니다 : 640 ~ 800 (25 % 증가), 800 ~ 1024 (28 % 증가) 및 1024 ~ 1280 (25 % 증가). 그러나 1280에서 1920으로의 점프는 640에서 1024로 점프하는 것과 같이 공간이 50 % 증가한 것입니다. 레슨을 더 점진적으로 배우는 데 도움이되도록 일반적으로 사용되는 중간 크기는 없었습니다.


빈 공간을 채우기 위해 UI 컨트롤을 더 크게 만들 수 있습니까?
FrustratedWithFormsDesigner

@Frustrated : 예를 들어, 터치 스크린을 설계하지 않는 한 그 목적을 무너 뜨리지 않겠습니까?
Michael K

@Michael : 글쎄, OP는 프로그램을 사용하기 어렵게 만들고 빈 공간을 좋아하지 않기 때문에 보이는 컨트롤 수를 변경하고 싶지 않은 것 같습니다. 공간을 채울 새로운 기능 이 없다면 공간을 채울 필요가 있습니까?
FrustratedWithFormsDesigner

2
새로운 컨트롤과 사이트와 상호 작용하는 방법에 대한 내 마음을 넓히는 것이 더 중요합니다. 모든 것을 더 크게 만들면 목적이 무너집니다. 그런 다음 "큰 반짝이는 빨간 버튼 증후군"또는 큰 제목 하나를 읽는 것처럼 느껴지는 텍스트가 있습니다. 디자인 문제의 균형을 맞추려고 할 때 실제로는 복잡한 문제입니다.
Berin Loritsch

1
@Berin : 초대형 인터페이스 크기에 대한 특정 요청을했는데 이것이 유일한 주요 변경 사항 인 경우 레이아웃과 디자인에 대해 우려하고 공간을 가장 잘 활용할 수있는 방법에 대한 아이디어가 있는지 물어보십시오. 결국 사용자는 사용자 이며이 특정 요청을 한 이유 가 있어야합니다 . 어쩌면 "빈 공간에 대시 보드 위젯을 넣습니다"라고 말하거나 큰 빈 공간이있는 모형 스크린 샷을 "여기에 무엇을 원하십니까?"라는 텍스트를 보내십시오. 이 디자인에 대한 우려 사항을 알고 있어야합니다.
FrustratedWithFormsDesigner

답변:


1

이것이 내가이 문제에 접근하는 방법입니다.

먼저 데이터를 논리 블록으로 청크합니다. 각 논리 블록마다 다른 ascx 파일을 작성하기까지 할 수도 있습니다. 각 블록은 표시되는 방법을 알고 있습니다 (최소 / 최대 너비). 나는이 코드를 다시 쓰는 것을 좋아하지 않으며, 여러 해상도 크기를 지원하기 위해 응용 프로그램을 확장해야 할 가능성이 있다면 제어 기반으로 제어하기가 더 쉬워집니다.

다음으로 더 큰 해상도를위한 새 스타일 시트를 만듭니다. 버튼과 제목을 크게 만드십시오. 요소 주위에 공백을 더 추가하십시오. 이 방법으로 두 가지 해상도 유형 사이를 전환하는 것은 스타일 시트 스왑입니다.

이제 어려운 부분 인 레이아웃이 나옵니다. 당신이 말했듯이, 레이아웃은 그 정도의 부동산과는 매우 다릅니다. cop-out 답변은 사용자가 iGoogle 페이지와 같이 원하는 곳에 요소를 배치 할 수 있도록하는 것입니다. 사용자는 원하는대로 2 개 또는 3 개의 열을 선택할 수 있습니다. 어떤 유형의 화면을 작성하고 있는지 알 수 없으므로 이것이 실제로 당신에게 도움이되는지 모르겠습니다.

두 번째 답변은 UI 전문가를 고용하여 이러한 페이지를 디자인하는 것입니다. 과거에 UI 전문가와 함께 일한 결과 이와 같은 것에 대한 전문가 의견을 얻는 것이 100 % 가치가 있다고 말할 수 있습니다. 고객이 제품을보기 전에 문제를 정확하게 지적하고 솔루션을 제안 할 수 있습니다.

내가 스스로해야한다면, 측면에 고정 된 아이템을 놓고 나머지 공간을 채우기 위해 중간 영역을 키우도록하겠습니다. 중간 섹션을 채울 수있는 데이터가 있어야합니다.

이것이 당신에게 얼마나 도움이되는지 모르겠지만, 그것이 당신에게 몇 가지 아이디어를 제공하기를 바랍니다.


이것은 아마도이 질문에 대해 UI와 프로그래머 모두에게 얻은 가장 합리적인 대답 일 것입니다. UI 사람들이 말한 "모든 것을 더 크게"만드는 것보다 훨씬 유용합니다. 참고 : aspx는 기술 별 용어이지만 UI를 별도의 파일로 정리하는 것이 올바른 방법입니다.
Berin Loritsch


2

저는 UI 전문가는 아니지만 Eclipse에서 매일 1920x1080 화면을 사용합니다. Eclipse는 매우 쉽게 구성 가능한 인터페이스를 가지고 있으며 1280과 1920 사이를 전환 할 때 관찰 한 내용은 다음과 같습니다.

  • 두 해상도에서 모두 같은 크기로 작업중 인 창을보고 싶습니다. 해상도가 작을수록 여분의 패널을 숨기는 경향이 있으며, 높은 해상도에서는 더 많은 패널을 내 놓습니다.
  • 약간 큰 버튼을 선호합니다. 그들은 큰 모니터에서 비례 적으로 적은 공간을 차지하고 마우스 동작을 더 빠르게합니다.
  • 종종 전체 화면을 사용하기 위해 미리보기를 확장합니다 (예 : 왼쪽의 코드, 오른쪽의 미리보기). 결국 두 열 형식입니다. 그 외에는 바닥 글이있는 3 열을 사용합니다.
    1. 왼쪽 : 파일 탐색
    2. 가운데 : 코드 (가장 큰 화면 너비의 2/3)
    3. 오른쪽 : 코드 탐색 및 작업
    4. 바닥 글 : 상태 (콘솔, 서버 등 짧음, 화면 높이 1 / 5-1 / 6)

때로는 2 열 모드에서 뷰와 컨트롤러를 나란히 배치하지만 프로그래머에 따라 다릅니다. :)

더 큰 화면에있을 때이 정보를 사용하여 최대한 많은 정보를 볼 수 있지만 여전히 쉽게 찾을 수 있습니다. 구성 요소 주위에 더 많은 공간이 있으면 정보 수집을 차별화하는 데 도움이됩니다. 탭의 아이콘은 각 구성 요소의 의미에 주목하는 데 도움이되는 한 가지 방법입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.