이 POS 디자인의 날짜는 어떻게 보입니까?

POS ( Point-of-Sale ) 화면 디자인의 날짜가 어떻게 보이는지 이해하려고합니다 .

3D 버튼, 색상, 레이아웃, 글꼴입니까? 최신으로 보이게하려면 어떻게 하시겠습니까?

디자인 전문가가 아니므로 날짜가 적힌 것을 알 수 있습니다. 그러나 왜 그리고 어떻게 변경 해야할지 모르겠습니다.

다른 답변은 디자인을 개선하는 방법에 중점을 두지 만 디자인이 왜 날짜가되었는지 물었으므로 다음과 같습니다.

글꼴이 너무 작습니다 . 가장 왼쪽은 나머지 것보다 덜 오래된 것처럼 보입니다. 왜 그렇습니까? 왼쪽의 글꼴 크기는 텍스트에 사용 가능한 수직 공간과 일치하지만 다른 모든 버튼의 글꼴은 너무 작습니다. 모든 대문자, Arial 및 각 버튼에 3 개의 고정 텍스트 줄을 넣습니다 (Pay 이외의 모든 버튼은 세로 위쪽, 가운데 및 아래쪽에 텍스트를 수신하도록 형식이 지정된 것으로 보입니다. 두 줄만 있으면 어색함이 발생합니다) 실제 텍스트).

매력없는 색상 . 화면은 9 개의 거의 임의의 색상을 사용하는 것처럼 보이며 모두 원래 64 EGA 색상의 일부입니다. 버튼 사이에 큰 차이가없는 한 많은 최신 GUI는 더 미묘한 색상 차이를 사용합니다. 일부 최신 GUI는 버튼에서 색상 그라디언트를 사용합니다.

이미지가 없습니다.

2 색 3D 효과. 왼쪽 상단에 균일 한 흰색이 있고 오른쪽 하단에 균일 한 회색이있는 ​​2 픽셀 너비의 테두리를 사용하는 3D 버튼과 그 주변의 모든 검은 색 테두리가 실제로는 1 픽셀입니다.

너무 간단합니다. 버튼 만 사용하면 현재 식품 섹션을보고 있음을 직관적으로 나타낼 수있는 기회가 없습니다. 현대 Gui는 다른 단서를 사용하여 자홍색과 노란색 부분이 함께 속해 있음을 나타냅니다.

마지막으로 POS 시스템 헤더가 귀찮게하지만 디자인이 잘못되어 데이트와 관련이 없다고 생각합니다.

변경하기 전에 현재 디스플레이 출력이 EGA (64 색상 표에서 선택한 16 색 팔레트) 이상을 지원하는지 확인하고 이미지를 사용하려는 경우 디스플레이 해상도를 통해 사용자가 이미지. 때로는 현장에서 사용되는 장치가 생각보다 훨씬 오래되었습니다. 또한 색을 바꿀 때 색맹을 명심하십시오.

이것이 POS 시스템이라고 생각하면 기능이 있다고 말할 수 있습니다. 버튼은 크고 읽기가 쉽고 그룹별로 구성되어있어 원하는 것을 쉽게 찾을 수 있습니다.

그러나 구조 설계 결정은 좋지만 설계 결정은 많지 않습니다. 이것이 내가 볼 것입니다 :

• 글꼴 : 앱의 모든 것이 Arial 대문자를 사용하지만 모든 요소가 같은 것은 아닙니다. 계층 구조가 있으며 글꼴 스타일 또는 패밀리를 사용하여이를 나타낼 수 있습니다. 예를 들어 맨 아래 행은 실제로 기본 옵션의 일부가 아니므로 대소 문자를 혼합하여 사용할 수 있습니다. "Pay"를 더 크게 만들려고했지만 큰 글꼴 크기의 유일한 단추입니다. 색상이 아닌 글꼴을 변경하는 이유는 무엇입니까? 당신이해야한다고 말하지 말고, 나는 이런 식으로 생각하면 요소를 분리하는 새로운 방법을 발견 할 수 있습니다. 예를 들어, 디바이더 사용을 고려 했습니까?

• 간격 : 많은 요소에 대해 동일한 간격 (여백)을 사용하지 않습니다. 그리드 시스템 을 살펴보면 그리드 시스템 을 사용하면 큰 이점이 있습니다. 균형 잡힌 레이아웃은 디자인을보다 정돈되고 세련되게 보이게합니다. 또한 버튼 안의 텍스트에 이상한 간격 문제 (IMO)가 있습니다. 한 줄의 단추가 가운데에 있고 두 줄의 행 사이에 큰 공간이 있으며 3 줄은 간격이 동일하기 때문에 괜찮습니다. 가능한 한 텍스트를 테두리에 최대한 가깝게 당기는 대신 항상 텍스트 줄 사이에 동일한 간격을 두는 것이 더 합리적이지 않습니까?

• 색상 : 그룹화는 다른 버튼이 다른 일을한다는 것을 분명히하기 위해 작동하지만 팔레트 뒤에 이유가 없습니다. 다음과 같은 방향으로 생각하십시오. 색상을 사용하여 메시지를 더 많이 전달할 수 있습니까? 버튼을 쉽게 찾을 수 있도록 색상을 사용할 수 있습니까? "보내기"에 다른 톤을 지정하여 이미 그렇게하고 있습니다. 이것은 훌륭한 결정입니다. 그러나 선택한 색상이 오른쪽 열인지 아니면 중앙 색상인지에 따라 달라집니다. 왜?. Thenn은 비슷한 방법으로 다른 곳에서 색상을 사용할 수 있다고 생각합니까? Google 자료를 살펴보면 새로운 콤보를 시도해 볼 수 있습니다.

• 그림자와 효과 :이 맥락에서 3D 효과는 매우 유용하며, 더 깊이 밀어 붙일 수 있다고 생각합니다. 다음 은 3D POS 의 예입니다. 아이콘 사용을 고려해 보셨습니까? 그들은 훌륭한 시각 자료를 만들 수 있습니다.

디자인 소프트웨어와 코딩 언어가 그와 관련하여 많은 창의성을 허용하지 않을 때 표준이었던 그림자가있는 색상 블록을 제외하고는 앱이 실제로 트렌드를 따르지 않기 때문에 데이트가 된 것 같습니다. 이제 거의 모든 작업을 수행 할 수 있습니다. 지난 몇 년간 인기를 얻은 디자인 트릭과 선택을 이용하지 않기 때문에 디자인이 오래되었습니다.

다른 유사한 앱을 살펴보고, 그들이 옳고 그른 것을 확인하고, 그 아이디어 중 일부를 어떻게 발전시킬 수 있는지 확인하는 것이 좋습니다. 당신은 이미 훌륭한 골격을 가지고 있으며, 그것은 육체가 필요합니다. 그리드와 보완적인 색상으로 재생하면 앱에 큰 도움이 될 것입니다.

언뜻보기에 나는 무엇이 무엇인지 신속하게 말할 수 없습니다 (그리고 식당 POS 시스템에 대한 경험이 있습니다). 나에게 UI 오른쪽에 회색으로 표시된 항목은 서로 속한 것으로 보이지 않습니다. 화면 중앙의 노란색 항목은 실제로 3 섹션 인 것처럼 보이지만 명확하지 않습니까?

아래에 표시된 예에서 (품질에 대해서는 아무 말도하지 않고 빠른 검색에서 무작위로 선택합니다) 아이콘, 이미지 및 큰 색상 블록의 사용을 볼 수 있습니다. 이는 동작을 식별하고 별도의 기능 영역 또는 정보 계층을 구별하는 데 유용한 도구입니다.

더 자세한 답변을 할 시간이 없지만 현재 UI (사용자 인터페이스) 디자인의 예를 살펴보십시오. 예를 들어 'POS UI 디자인'에 대한 빠른 검색은 다음과 같은 이미지를 제공합니다.

디자인은 제쳐두고, 기능적이며, 그것을 운영하는 사람들은 그것을 어떻게 사용하는지 이해합니까? 그런 경우에 깨지지 않는 것을 고치지 않는 요소가 있습니다.

그렇습니다. 날짜로 보이지만 내가 사용했던 많은 시스템은 똑같은 단순한 모양의 죄가 있습니다. 접근성을 염두에두고 선택한 둥근 버튼과 색상은 그것을 강조 할 수 있지만, 내 직감은 이것이 순전히 기능적인 부분이며 시도하고 "재즈 업"하면 직원에게 혼란을 줄 수 있다는 것입니다.

이 경우 3D 효과는 사용자에게 이것이 클릭 가능한 버튼임을 신속하게 알려주기 때문에 실제로 유용하며 식당 거래 시간에는 매우 중요합니다.

나는 디자인 전문가도 아니지만 모바일 앱을 만들 때 이런 종류의 것을 고려해야하기 때문에 ....

1. 구식 win32 3D 효과를 버립니다. 모든 사람들이 터치 스크린 친화적으로 보이기를 기대하는 시대에는 말 그대로 손이 닿지 않습니다. 사용하려는 것은 관련 버튼 그룹 또는 버튼 아래의 그림자 사이에 간격이없는 각 작업 영역 (버튼)에 대해 넓은 평평한 영역입니다. Android의 머티리얼 디자인을 살펴보십시오 . 모바일 앱이 아닌 경우에도 유용합니다.

2. 관련 항목 사이에 간격이있는 경우 테두리가 아닌 색상을 사용하여 관련 항목을 그룹화하십시오. 사이에 간격이 없으면 전체 관련 영역에 단색 배경색이있는 것처럼 보이도록 색상을 사용하십시오.

3. 더 부드러운 색상 (파스텔 색상 생각)과 무료 색상 구성표의 일부를 선택하십시오. 팔레트에 각 색상의 밝고 어두운 버전이 있어야합니다. 이전 CGA / VGA 16 컬러 팔레트에서만 표시 할 수있는 시스템을 다루지 않기를 바랍니다.

4. UI 구성 요소는 색상 표에 따라 일관되게 색상이 지정되어야합니다. 예를 들어, UI 입력을 제공하는 버튼은 페이지를 변경하거나 기본 기능을 트리거하는 버튼과는 다른 것으로 간주 될 수 있지만, 일반적으로 주어진 기능 영역의 모든 버튼에 대해 1 색이 아닌 이러한 각 유형의 버튼에 대해 1 색이 사용되어야합니다. 이를 통해 사용자는 각 UI 요소가 수행 할 작업을 더 잘 이해할 수 있습니다.

5. 작업 영역 사이의 간격을 사용하여 작업 영역과 작업 항목 사이의 평평하고 부드러운 테두리를 사용하는 것이 좋습니다. 영역의 액션 아이템은 규칙적인 크기를 가져야합니다 (각 액션 아이템은 그리드에서 하나 이상의 인접한 셀로 상상하십시오).

6. 창에서 제목 영역을 사용하는 경우 :

   에이. 해당 영역의 모든 작업 항목은 제목 영역에 맞아야합니다.

   비. 해당 영역의 모든 작업 항목은 응용 프로그램 전체에 적용되어야합니다 (예 : 로그인, 설정 등).

   기음. 로고 이외의 다른 제목과 제목을 겹쳐서는 안됩니다.

이게 도움이 되길 바란다.

거의 모든 요소가 버튼 인 것 같습니다. 그러나 레이블을 읽을 때 일부 단추는 동작 단추 인 반면 다른 단추는 탐색 용인 것 같습니다.

최신 UI에서는 두 가지를 구분할 수 있습니다. 한 줄의 탭은 현재 위치와 다른 곳으로가는 방법을 보여주는 효과적인 탐색 도구 역할을합니다. 모든 피자 옵션에는 탭 피자가 있고 모든 파스타에는 탭 파스타가 있습니다.

보라색 FOOD 버튼은 이미 이러한 탭 역할을하고 DRINKS는 다른 탭일 수도 있습니다. 그들은 반드시 오른쪽에 있어서는 안됩니다. 영어는 위에서 아래로, 왼쪽에서 오른쪽으로 읽히고, 당신의 작업 흐름은 이것을 복사해야합니다.

탭 행은 합리적으로 잘 작동하지만 여기서는 더 깊은 계층 구조를 가질 수 있습니다. 이 경우 현재 UI 상태를 Food > Starters >시작 페이지 상단의 한 줄에 경로 :로 표시하는 것이 좋습니다 . "스타터"메뉴의 첫 번째 항목을 "<음식으로 돌아 가기"버튼으로 만드십시오. 이렇게하면 꽤 많은 컨트롤을 숨길 수 있습니다.

먼저, 목적이 무엇인지 물어 볼까요?

운영자가 키를 빨리 찾아서 잘못 입력하지 않고 주문을 더 빨리해야합니까? 또는 사용자가 머신에 GUI를 사용하도록 유도하고 장려해야합니까?

이 경우, 그 목적은 효율적이고 빠른 거래 입력을위한 것임을 명확하게 나타냅니다. 따라서 디자인 트렌드와 패닉 성보다 논리적 순서를 결정하는 데 필요한 형태, 색상 및 계층 구조가 더 단순하고 체계적인 방식으로 진행될 수 있습니다.

현재 GUI의 문제점은 다음과 같습니다.

색상 : 너무 가혹한 색상으로 시간이 지남에 따라 스트레스가 발생하고 사용자 결정의 효과에 영향을 미칩니다. 다른 고 대비 색상의 흰색 배경은 눈의 피로를 유발하며 사용자가 수집해야하는 필요한 정보를 빨리 찾기가 어렵습니다.

글꼴 : 찾기 및 결정하기에 너무 작습니다. 텍스트의 가혹한 색상과 대비에도 영향을받습니다. 이는 사용자가 시스템에 익숙해지고 더 오래 오해를 입을 수있는 최초의 사용자에게 큰 영향을 줄 수 있습니다.

순서 및 그룹화 : 큰 글꼴 크기로 "POS 시스템"이라는 이름을 사용해야합니까? 도움이 되나요? 아니! 이 시스템의 사용자와 화면의 요소가이를 명확하게 알려줍니다. 그룹화가 의미가 있습니까? 실제로는 로트를 그룹화 할 수 없으므로 사용자는 논리적으로 찾을 수 있습니다. 선택이라는 단어 중 일부가 의미가 있습니까? 아니! "보내다"? 무엇을 보내? "메뉴 설정"? 매일 메뉴를 설정합니까? 아니! 앞으로. 계층과 단어 선택은 신중하게 검토해야합니다.

일부 사람들은 장비 자체의 목적 상 이미지와 멋진 것들로 GUI로 게시 한 것은 환상적 일 필요는 없지만 매우 기능적이고 사려 깊어 야한다는 것을 분명히 알려줍니다.

"타일"이 모바일 장치, Android 또는 Windows OS 용으로 특별히 설계된 방식과 비슷하게 보이지 않기 때문에 완전히 애플과 비슷하지 않습니다. 그것에 관한 거의 모든 것이 "잘못된"것이기 때문에 구체적인 내용은 생략하겠습니다.

이것들은 모두 훌륭한 답변이지만, 참고 자료를 원한다면 현대적인 POS 시스템이 어떤 모습인지 보여주는 훌륭한 예입니다 .iPad의 Square 앱을 확인하십시오.

https://itunes.apple.com/us/app/square-register-point-sale/id335393788?mt=8

기존 UI를 개선하기 위해 할 수있는 가장 큰 일은 현대 UI가 많은 공백을 좋아하고 공백을 흰색으로 만드는 것입니다. 요즘에는 많은 디자인에서 리버스 타입 (검은 색 바탕에 흰색 텍스트 또는 어두운 색에 흰색 텍스트)을 사용하는 경우가 매우 적습니다. 이 사이트처럼 : https://developer.wordpress.com/calypso/

버튼은 기능별로 구성되어야하고, 계층 적이며 버튼은 레이아웃 방법과 일치해야합니다.

평신도의 관점에서 :

1) 가장 많이 사용하는 버튼은 누구나 쉽게 찾을 수있는 곳에 두십시오.

2) 내부 버튼은 외부 쉘 (창 내, 창 내)에 의해 "제어"되어야합니다.

3) 만약 당신이 enter 버튼 (또는 그 문제에 대한 다른 버튼)을 가지고 있다면, 화면이 바뀔 수 있지만 같은 장소에 두십시오.

많은 POS 시스템이 기능 설계를 최적화하려고 시도했지만 게임보다 약간 앞서는 POS 는 Rezku POS 입니다.