UI 디자인에서 일관성 유지

/2016-03-05 00:35:41/
Camella
/제도법/

UI 디자인의 일관성은 오래된 학교 원칙이며 오늘날의 웹 및 응용 프로그램 디자인에서 다소 잊혀졌습니다. 디자이너가 인터페이스에서 일관성을 생략하기로 선택한 것 같습니다.

모바일 응용 프로그램 디자인의 경우 일부 디자이너는 고유 한 인터페이스 패턴을 사용하여 하드웨어 표준 상호 작용을 재발 명, 재생성 또는 완전히 중단하기로 선택합니다. 하드웨어 UI 규칙과 앱 경험 사이의 일관성을 깨는 것은 나쁘지 않을 수 있지만 자신의 앱 일관성을 깨뜨리는 것은 좋지 않습니다.

일관된 UI 디자인을위한 3 단계

웹 및 모바일 앱 디자인을 디자인 할 때 고려해야 할 기본적으로 세 가지 유형의 일관성이 있습니다.

1. 장치 UI 지침 및 동작과 일관성 유지
2. 다른 유사한 사이트 또는 응용 프로그램과 일관성 유지
3. 자신의 디자인과 일관성 유지

이 기사의 목적을 위해 세 번째에 더 집중하고 싶습니다. 사용자 인터페이스의 일관성을 유지하고 싶습니다. 주로 앱 내에서 사용자를 혼동하거나 놀라게하고 싶지 않기 때문에 이는 큰 문제입니다.

사용자가 홈 페이지에서 서브 페이지로 이동하는 것을 원하지 않고 다른 스타일 또는 심지어는 다른 사용자 상호 작용을 볼 수 있습니다. 이런 종류의 일은 사용자를 놀라게하거나 어떤 경우에는 그들을 놀라게 할 수도 있습니다. 일관성은 사이트의 전체적인 유용성에 큰 영향을 미칠뿐만 아니라 전환도 크게 증가시킬 수 있습니다.

일관된 구조 및 상호 작용

일관된 UI를 만드는 데 중요합니다. 때때로 우리가 개발할 때 구조와 상호 작용이 전반적인 사용자 경험에 어떤 영향을 미치는지 잊어 버립니다. 그러나 집이나 건물을 지을 때 청사진을 작성하고 계획을 세우는 것이 중요 하듯이 일관성 있고 유용한 UI를 만드는 것도 중요합니다. 코드 작성을 시작하기 전에 고려해야 할 사항이 몇 가지 있습니다.

1. 사이트 또는 앱 전체에 요소를 일관되게 배치하는 방법을 고려하십시오.
2. 어떤 UI 패턴을 사용할 것인지 생각하십시오.
3. 어떤 입력 요소가 필요한지 계획하십시오.
4. 어떤 아이콘이 필요한지 파악하고 모든 아이콘이 포함 된 좋은 아이콘 세트를 선택하거나 디자인하십시오.

요소 배치는 사용자의 놀라움을 줄이고 일관되고 안정적인 기대치를 만드는 큰 방법입니다. 내비게이션을 같은 장소에 유지하십시오. 내비게이션 요소를 이동하거나 사라지는 것보다 사용자를 더 빠르게 자극하는 것은 없습니다. 또한 로고 및 기타 브랜드 항목을 사이트 전체의 동일한 위치에 보관하십시오.

"탐색 요소를 움직이거나 사라지는 것보다 사용자를 더 빠르게 자극하는 것은 없습니다."

사이드 바를 사용하는 경우 페이지에있는 페이지를 변경하여 사이드 바를 크게 흔들지 마십시오. 이 중 일부는 페이지의 내용과 관련이있을 수 있지만 검색 양식과 같은 전체 요소를 가져 오거나 이동하지 마십시오. 일관되게 배치해야 할 한 가지는 로그인 및 사용자 설정 링크 또는 버튼입니다.

UI 패턴 고려

미리 계획하고 필요한 UI 패턴에 대해 생각하십시오. 갤러리가 필요합니까? 모달? 아코디언? 사이드 바? 미리 디자인 패턴을 계획하면 앱을 더 빨리 개발하고 디자인하는 데 도움이 될뿐만 아니라 어떤 디자인 패턴이 필요한지 미리 생각하면 콘텐츠를 미리 파악하여 많은 시간을 절약 할 수 있습니다.

또한 UI 결정이 필요한 사이트의 섹션이나 페이지를 방문 할 때 이미 문제를 해결하고 질문에 대답 할 수 있습니다. 이미 결정을 내 렸으며 디자인 패턴의 혼란을 일으키지 않습니다. 사이트 전체에서

미리 양식을 생각하십시오. 필요한 양식 요소를 계획하고 필요하지 않거나 교체 할 수있는 요소를 파악하십시오. 사용자가 어쨌든 탐색하기에는 양식 요소가 무섭거나 까다로울 수 있으므로 걸림을 일으킬 수있는 일부 입력을 제거하거나 교체 할 수 있다면 그렇게하십시오.

"블록을 방해 할 수있는 일부 입력을 제거하거나 교체 할 수 있다면 그렇게하십시오."

이것은 또한 개발 과정에서 의사 결정을 제거하는 좋은 방법입니다. 스타일, 구조 및 상호 작용에서 양식을 일관되게 유지하면 전환율이 높아지거나 깨질 수 있습니다.

다시, 머리를 계획하십시오. 미리 어떤 아이콘이 필요한지 계획하십시오. 일관성을 강화하는 가장 빠른 방법 중 하나는 인쇄 아이콘이 필요하다는 것을 알았을 때 앱 개발의 절반을 밟은 다음 아이콘이있는 위치를 기억하거나 나머지 아이콘과 일치하는 인쇄 아이콘을 찾으십시오.

이것은 실제로 스타일 문제가 아니라 대화 형 문제입니다. 사용자는 특정 아이콘을보고 익숙해 져 빠르게 인식 할 수 있습니다. 그러나 패치 워크 아이콘 세트를 사용하는 경우 사용자를 혼동 시키거나 특정 아이콘이 무엇을 나타내는 지 말하기 어렵게 만듭니다.

일관된 스타일

각 UI 요소의 스타일과 디자인이 중요하며 이들 사이의 일관성을 유지하는 것도 사용자에게 중요합니다. 일관된 아이콘을 설정하는 것이 중요 하듯이, 앱의 디자인 일관성이 매우 중요합니다. 특정 버튼은 사이트의 모든 디자인이나 색상 구성과 거의 일치하지 않더라도 시원하다고 생각할 수 있지만 사용자를 혼란스럽게하고 추악하게 보일 것입니다.

UI 키트를 디자인 할 때 일관성을 유지하기 위해 명심해야 할 몇 가지가 있습니다.

1. 색 구성표
2. 스타일
3. 테두리
4. 타입과 폰트
5. 크기
6. 배경 이미지
7. 효과

그림 물감

앞에서 말했듯이 UI 색상은 사이트의 모든 색상 구성과 일치하도록 유지하십시오. 버튼을 돋보이게하고 눈에 띄게하기 위해 클릭 유도 문안을 디자인 할 때에도 클릭 유도 문안이 모든 색 구성표에 대해 추악한 칭찬을하지 않도록주의하십시오. Kuler 또는 ColorSchemer와 같은 도구를 사용하면 서로 잘 어울리는 색상을 선택할 수 있습니다.

스타일을 일관되게 유지하는 것에 대해 이야기 할 때 그림자 디자인 및 그림자가없는 나머지 경사면이있는 미친 그라디언트 버튼을 사용하지 않는 것에 대해 이야기하고 있습니다. 전체 사이트 디자인과 일관성을 유지하는 것 외에도 UI 요소의 스타일과 일관성을 유지하십시오. 입력 레이블에 특정 색상 또는 글꼴 스타일을 사용하는 경우이를 사용하여 모든 레이블에 사용하십시오.

테두리

아, 국경. 너무 자주 3 ~ 4 개의 서로 다른 버튼 테두리 두께 또는 반경을 사용하는 사이트를보고 있으며 이로 인해 실제로 혼란 스러울 수 있습니다. 버튼, 입력, 선택, 갤러리, 이미지 및 기타 모든 UI 요소의 모든 테두리를 일관되게 유지하십시오. 그렇다고 테두리 반경을 사용해야한다는 의미는 아닙니다. 몇 가지 값을 사용하여 혼합하거나 각 요소에 일관된 스타일을 사용할 수도 있습니다.

타입과 폰트

요소에 동일한 유형과 글꼴을 사용하는 것은 특히 양식 요소를 다룰 때 매우 중요합니다. 헤더를 일관성있게 유지하고 모든 글꼴이 마음에 들더라도 많은 글꼴에 사용하지 마십시오. 다른 프로젝트를 위해 저장할 수 있습니다. 입력과 버튼은 양식을 쉽게 읽고 예측할 수 있도록 서로 일치하거나 보완하는 글꼴 스타일을 가져야합니다.

크기

글꼴 및 기타 요소의 크기는 서로 일치하거나 보완 적이어야합니다. 페이지의 머리글과 제목은 모두 일관성을 유지하여 사용자가 해당 텍스트 행이 실제로 머리글과 제목과 일치한다는 것을 알 수 있습니다. 일관된 크기는 콘텐츠 영역, 링크, 탐색 요소 또는 사이드 바의 UI 요소에도 적용됩니다. 페이지가로드 될 때 사용자가 즉시 인식 할 수 있도록 페이지보기간에 크기를 크게 변경하지 마십시오.

배경 이미지

배경 이미지를 너무 많이 변경하지 마십시오. 요즘에는 이런 일이 많이 일어나지 않지만 배경 이미지를 페이지보기에서 페이지보기로 변경하지 않는 것이 좋습니다. 그렇다면 페이지가 일관성을 잃지 않도록 이미지를 어떻게 든 서로 관련시킬 수 있도록하십시오. 배경 이미지, 특히 큰 이미지를 변경하면 사이트가 분리되어 사용자가 사이트를 완전히 떠난 것처럼 느끼게 할 수 있으므로 이러한 유혹을 피하십시오.

효과

가장 중요한 조명 효과 인 효과는 사용자에게 전혀 의미가없는 훌륭한 사이트 디자인처럼 보일 수 있습니다. 예를 들어, 버튼 위에 강조 표시를 사용하는 경우 그 위에 조명이 비추는 것처럼 보이는 경우 버튼의 경사 텍스트 또는 경사 텍스트 입력에 동일한 조명 효과를 사용하십시오.

솔직히 이것은 실제로 사용자를 다루거나 깨뜨리는 것이 크지 않지만 까다로운 뷰어에게는 효과의 불일치를 발견하고 앱이나 사이트와 관련하여해야 할 일에 산만해질 수 있습니다.