최고의 UI 디자인 가이드

콘텐츠

• 01. 타이포그래피 선택
• 02. 올바른 팔레트 선택
• 03. 스타일 링크 및 버튼
• 04. 컴포넌트 생성
• 05. 문서화 및 협업

사용자 인터페이스 디자인이란 무엇입니까? 더 좋은 질문은 실제로 사용자 인터페이스 디자인에 무엇이 들어가는가입니다. 미학? 유용성? 접근성? 그들 모두? 이러한 모든 요소가 어떻게 통합되어 최적의 사용자 경험을 가능하게하며 어떤 것이 우선되어야합니까?

접근성이 항상 최우선이어야하며 최적의 사용성을위한 토대를 마련해야합니다 (최고의 웹 사이트 빌더를 사용하면 도움이됩니다). 그런 다음 UI가 액세스 가능하고 사용 가능할 때 이미 미적 측면에서 꽤 괜찮아 보일 것입니다 (UI 디자인 도구가 여기에서 도움이 될 것입니다). 그런 다음 디자인이 모든 수준에서 작동하는지 확인하려면 철저한 테스트를 거쳐야합니다. 최고의 사용자 테스트 도구를 선택하여 수행 할 수 있습니다. 대부분의 디자인의 기본 요소와 시각적 일관성을 보장하기 위해 수행 할 수있는 작업을 자세히 살펴 보겠습니다.

01. 타이포그래피 선택

훌륭한 타이포그래피 (디자인의 여러 측면과 마찬가지로)는 접근성으로 귀결됩니다. 시각적 디자인은 확실히 사용자의 전반적인 경험에 추가되지만 결국 사용자는 UI를 예술로 보지 않고 UI와 상호 작용합니다. 읽기 쉬운 문자는 명확성을 제공하고 읽기 쉬운 단어는 사용자가 콘텐츠를 효율적으로 소화하는 데 도움이됩니다. 둘 다 시각적 미학보다 더 중요합니다.

그러나 잘 디자인 된 타이포그래피는 여전히 미적으로 만족 스러울 수 있습니다. Black-on-white Helvetica (또는 유사한 글꼴)는 몇 가지 간단한 타이포그래피 향상을 통해 아름다움이 될 수 있습니다. 향상된 기능이란 텍스트의 글꼴이나 색상이 아닌 글꼴 크기, 줄 높이, 문자 간격 등을 조정하는 것을 의미합니다.

'아름다운'타이포그래피는 읽을 수 없을 때 실제로 추악합니다. 좌절감이 항상 미학을 능가하기 때문입니다. 훌륭한 디자인은 균형 잡히고 조화 롭습니다.

UI 디자인의 여러 측면과 마찬가지로 접근성과 미학의 균형을 맞추기 위해 시각적 요소를 미세 조정하는 것은 어려운 일이 아닙니다. 문제는 전체 설계에서 일관성을 유지하는 것입니다. 일관성은 다양한 중요도 요소 사이에 명확한 계층 구조를 설정하여 사용자가 UI를 더 빨리 이해하고 콘텐츠를 더 효율적으로 소화하는 데 도움이됩니다.

가독성과 가독성과 관련하여 WCAG 2.0 웹 콘텐츠 접근성 지침에 정의 된 최소 허용 글꼴 크기는 18pt (또는 14pt 굵게)입니다. 사용하기에 가장 좋은 글꼴 크기는 주로 글꼴 자체에 따라 다르지만 시각적 계층 구조와이 기본 크기가 요약 및 제목과 어떻게 구별되는지를 염두에 두는 것이 중요합니다 (예 : h1>, h2>, h3>).

선택한 UI 디자인 도구 (InVision Studio 사용)를 사용하여 일련의 텍스트 레이어 (티) 다음 템플릿과 관련되도록 모든 크기를 조정합니다.

• h1>: 44px
• h2> : 33px
• h3> : 22px
• p> : 18px

InVision Studio (및 기타 모든 UI 디자인 도구)를 사용하면 오른쪽의 Inspector 패널을 사용하여 스타일을 조정하면됩니다.

다음으로 글꼴을 선택하되 일부 글꼴에서 눈에 띄는 것은 18px이므로주의하십시오. p> 및 22px h3> 그렇게 다르게 보이지는 않습니다. 두 가지 선택이 있습니다. 글꼴 크기를 조정하거나 제목에 다른 글꼴을 고려합니다. 디자인이 텍스트가 많을 것으로 예상되면 후자를 사용하십시오.

다음 사항에 유의하십시오.

• 시각적 UI 디자인은 종종 직감적 인 접근 방식입니다.
• 결정된 것은 없습니다. 모든 것이 변경 될 수 있습니다

라인 높이

최적의 줄 높이는 적절한 수준의 가독성을 얻기 위해 텍스트 줄 사이에 충분한 간격을 두도록합니다. 이는 점점 더 '표준'으로 인식되고 있습니다. Google의 Lighthouse 감사 도구는이를 수동 검사 (또는 텍스트에 최적화되지 않은 줄 높이로 인해 너무 가깝게 연결될 수있는 링크가 포함 된 경우 플래그)로도 제안합니다.

다시 한 번, WCAG는 줄 높이가 글꼴 크기의 1.5 배가되어야한다고 선언하여이 문제를 해결하는 데 도움이됩니다. 따라서’선’(또는 이와 유사한) 아래의 UI 디자인 도구에서 글꼴 크기에 최소 1.5를 곱하면됩니다. 예를 들어 본문 텍스트가 18px이면 줄 높이는 27px (18 * 1.5 – Inspector에서 직접 수학 연산을 실행할 수도 있음)이됩니다. 하지만 다시 한 번 명심하십시오. 1.6x가 더 적합하다고 생각되면 1.6x를 사용하십시오. 다른 글꼴은 다른 결과를 출력합니다.

설계에서 실제 데이터를 사용하는 것에 대해 생각하기에는 너무 이르지만, 적어도 다소 현실적인 데이터 (심지어 lorem ipsum)를 사용해야합니다. InVision Studio에는 우리의 타이포그래피가 실제로 어떻게 생겼는지 확인할 수있는 네이티브 실제 데이터 앱이 있습니다.

단락 간격

단락 간격은 InVision Studio의 Inspector를 사용하여 선언 할 수있는 스타일이 아닙니다. 대신 스마트 가이드 (⌥)를 사용하여 수동으로 레이어를 정렬해야합니다. 줄 높이와 비슷하게 매직 배율은 2x (글꼴 크기의 두 배)입니다. 예를 들어 글꼴 크기가 18px이면 다음 텍스트 블록으로 이동하기 전에 최소 36px의 공간이 있어야합니다. 글자 간격은 0.12 이상이어야합니다.

그러나 구성 요소 생성을 시작할 때까지 이에 대해 걱정할 필요가 없습니다.

공유 스타일

UI 디자인 도구에서 지원하는 경우 (InVision Studio는 아직 지원하지 않음) 이러한 활자체 스타일을 '공유 스타일'로 전환하여 시각적 일관성을 유지하면서 빠르게 재사용 할 수 있도록합니다. 이것은 일반적으로 Inspector를 통해 수행됩니다.

02. 올바른 팔레트 선택

디자인에 적합한 색상을 선택하는 것은 미학을 넘어 사이트의 전체 계층 구조를 알릴 수 있습니다.

UI 디자인과 관련하여 색상은 습관적으로 우리가 가장 좋아하는 것 중 하나이지만 시각적 디자인에 바로 뛰어 드는 것은 나쁜 일이라고 배웠습니다. 이것은 확실히 사실이지만 시각적 일관성과 관련하여 색상이 다른 역할을하기 때문에 가장 큰 관심사 여야합니다.

UI 디자인의 색상은 매우 효과적 일 수 있지만 일부 사용자 (실제로 많은 사용자)가 다양한 유형의 시각 장애를 겪고 있기 때문에 항상 신뢰할 수있는 것은 아닙니다. 즉, 사용중인 특정 색상이 아니라 색상 유형에 관한 것입니다. 색상은 이와 관련하여 감정적 인 영향을주기 때문에 브랜딩의 경우 사실이 아닐 수 있지만 UI 디자인에서는 의도, 의미 및 시각적 계층 구조를 전달하는 데에도 사용됩니다.

01. 뚜렷한
Stark 플러그인은 Sketch 및 Adobe XD와 호환되며 캔버스에서 직접 색 대비를 확인하고 색맹을 시뮬레이션하는 데 도움이됩니다. Figma 및 InVision Studio에 대한 지원이 곧 제공 될 예정입니다.
02.그림 물감
Colors는 WCAG 2.0 지침을 충족하기 위해 적절한 양의 색상 대비를 갖는 90 가지 색상 조합의 집합입니다. 일부는 AAA 표준을 충족하기도합니다.
03. A11y 프로젝트
A11y 프로젝트는 접근성과 관련된 모든 것을위한 거대한 허브입니다. 여기에는 리소스, 도구, 팁, 튜토리얼이 포함되어 있으며 Stark 플러그인 제작자가 제작하고 InVision으로부터 자금을받습니다.

세 가지 색상

색상에는 의미가 있으므로 너무 많이 사용하지 않는 것이 중요합니다. 의미가 너무 많으면 사용자가 이해하고 기억해야 할 사항이 더 많아집니다. 더 많은 색상 조합은 말할 것도 없습니다. 일반적으로 다음과 같은 권장 형식이 있습니다.

• 클릭 유도 문안 색상 (기본 브랜드 색상이기도 함)
• 중립적 인 어두운 색상 (UI 요소 또는 어두운 모드에 적합)
• 위의 모든 항목에 대해 약간 더 밝고 어두운 변형

이를 통해 다음을 수행 할 수 있습니다.

• 다크 모드는 쉽게 달성 할 수 있습니다
• CTA 색상은 다른 색상과 충돌하지 않습니다.
• 어떤 시나리오에서든 우리는

팔레트 설정

선택한 UI 디자인 도구를 사용하여 각 색상 ( '브랜드', '중립 / 밝음'및 '중립 / 어두움')에 대해 상당히 큰 아트 보드를 하나 만듭니다 (A 탭). 그런 다음 각 아트 보드에서 더 어둡고 밝은 색상의 변형과 다른 색상 자체를 표시하는 더 작은 사각형을 추가로 만듭니다.

약간 더 밝고 더 어둡게 각각 10 % 추가 흰색 및 10 % 추가 검정색으로 간주합니다. 완료되면 각 아트 보드에 서체 스타일의 사본을 표시합니다. 이러한 텍스트 레이어의 색상은 중간 밝기 여야하는 중간 조명 아트 보드를 제외하고 중간 조명이어야합니다.

대조

다음으로 최적의 색상 대비를 위해 색상을 확인해야합니다. 이를 수행 할 수있는 다양한 도구가 있습니다 (예 : Sketch 및 Adobe XD 용 Stark 플러그인 또는 macOS 용 Contrast). 그러나 Contrast Checker 또는 Color Contrast Checker와 같은 온라인 솔루션은 잘 작동합니다.

각 조합의 색상 대비를 확인하고 그에 따라 색상을 조정합니다. 사용할 색상이 확실하지 않은 경우 Color Safe의 권장 사항을 사용해보십시오.

03. 스타일 링크 및 버튼

크기

타이포그래피와 마찬가지로 버튼과 링크에는 몇 가지 변형이 있어야합니다. 결국 모든 작업이 동일한 수준의 중요성을 갖는 것은 아니며 앞서 논의했듯이 색상은 신뢰할 수없는 의사 소통 방법이므로 시각적 계층에 영향을 미치는 주요 방법이 될 수 없습니다. 우리는 또한 크기가있는 장난감이 필요합니다.

시각적 어포던스 테스트는 탭 대상을 클릭 할 수 있는지 확인하는 데 사용되는 사용성 테스트입니다. Studio에서 Freehand로 디자인 동기화 (⌘⇧F), 결과 URL을 테스터에게 보내고 클릭 할 수 있다고 생각되는 요소에 동그라미를 표시하도록합니다.

InVision Studio가 아닌 사용자도 Freehand를 사용할 수 있지만 InVision Studio 사용자는 사용자의 시각적 피드백을 가장 빠르고 효율적으로 획득하는 방법 인 InVision Studio에서 디자인을 Freehand로 원활하게 시작할 수 있습니다.

일반적으로 버튼 텍스트는 18px (본문 텍스트와 동일)로 선언하는 것이 좋지만 버튼 자체의 크기는 세 가지입니다.

• 표준: 높이 44px (둥근 모서리 : 5px)
• 큰: 높이 54px (둥근 모서리 : 10px)
• 특대: 높이 64px (둥근 모서리 : 15px)

이를 통해 특정 버튼이 색상에 의존하지 않고 더 중요한 것처럼 보이게하고 버튼을 중첩 할 수 있습니다 (예 : 최소한의 모양의 양식 필드 안에 버튼을 사용).

깊이

탭 대상이 버튼인지 양식 필드인지에 관계없이 그림자를 사용하여 깊이를 높이고 상호 작용을 제안해야합니다. 버튼 및 양식 필드의 모든 변형에 대해 단일 그림자 스타일이 좋습니다.

상호 작용

각 버튼 유형에는 마우스 오버 상태를 나타내는 변형이 필요합니다. 이렇게하면 사용자가 시도한 작업이 완전히 문제가 없으며 지체없이 계속할 수 있음을 알 수 있습니다.

상태를 만들 때 색상이 자주 변경되기 때문에 시각적 일관성을 유지하는 데있어 실제로 더 복잡한 측면 중 하나입니다. 고맙게도 이러한 상태 변경은 상대적으로 미묘 할 수 있으므로 색상을 약간 더 밝거나 더 어두운 변형으로 변경하는 것이 좋습니다. 이것이 바로 그 이유입니다. 이것은 링크에도 적용됩니다.

이에 반대하면 이미 중요한 의미가있는 색상을 사용하여 사용자가 혼란스러워하거나 다른 색상을 생각해 내기로 결정하게됩니다. 보조 색상을 사용하기로 결정하는 것은 완전히 괜찮지 만 UI 요소보다는 마케팅 비주얼을 위해 저장해야합니다. 적을수록 더 쉽고 쉽습니다.

모든 아트 보드에 대해이 단계를 반복해야합니다. 브랜드 아트 보드에 브랜드 CTA 버튼을 포함하지 마세요. 나중에 특정 조합이 작동하지 않을 때 발생하는 상황에 대해 설명하겠습니다.

04. 컴포넌트 생성

구성 요소는 시간을 크게 절약 할 수 있으며 모든 UI 디자인 도구는이 기능을 제공합니다 (예 : Sketch에서는 심볼이라고 함). Studio에서 구성 요소를 구성해야하는 모든 레이어를 선택하고 ⌘케이 지름길.

구성 요소 사용

와이어 프레임은 유용성이 높은 UI를 디자인 할뿐만 아니라 UI가 장기적으로 무엇을 필요로하는지 알아내는 데 매우 유용합니다. 그것은 일종의 미래 보장과 같습니다.

이는 많은 구성 요소를 설계해야하거나 가능한 시나리오에 대비해야한다는 의미는 아니지만 '만약'이라는 태도를 취해야한다는 의미입니다.

예를 들어 와이어 프레임이 3x1 구성 요소를 요구하지만 콘텐츠가 확정되지 않았다는 것을 알고 있다면 약간의 고민으로 인해 '이 구성 요소가 4x1이되면 어떨까요?'라는 궁금증이 생길 수 있습니다. 경험의 법칙은 이미 존재하는 사용자 요구에 대해서만 설계하되 상대적으로 유연한 솔루션을 만드는 것입니다. 그렇지 않으면 나중에 매우 지저분한 '디자인 부채'가 발생할 것입니다.

이제이 구성 요소를 왼쪽의 라이브러리> 문서에서 캔버스로 드래그하여 재사용 할 수 있지만이 워크 플로는 UI 도구에 따라 다를 수 있습니다.

머리글, 바닥 글 및 탐색과 같은 '공통 영역'도 구성 요소에 대한 훌륭한 후보이지만 스타일 가이드를 만들고 결국 디자인 자체를 만드는이 방법은 모듈 식 / 카드 기반 레이아웃에서 특히 잘 작동합니다.

서체 스타일, 색상 및 버튼을 사용하여 수행 한 것처럼 구성 요소를 신중하게 구성하는 것을 기억해야합니다.

규칙 활용

앞서 브랜드 색상 위에 브랜드 CTA 버튼을 사용하지 않는 것에 대해 언급했습니다. 브랜드 CTA 버튼은 분명히 다른 모든 것 중에서 눈에 띄어 야하기 때문입니다. 그렇다면 브랜드화 된 CTA 버튼을 계속 사용할 수있는 동시에 브랜드화 된 구성 요소를 만드는 방법은 무엇입니까? 어쨌든 우리가 탐색 버튼이나 단순히 덜 중요한 버튼에 중립적 인 어두운 버튼을 사용한다면 그것은 옵션이 아닐 것입니다.

권리. 따라서 이것은 구성 요소, 특히 제목 + 텍스트 + 버튼 조합을 만드는 이상적인 기회가 될 것입니다. 브랜드 버튼을 사용할 수 있도록 중립 조명 '카드'배경을 어떻게 만들 었는지 확인하세요. 마찬가지로 중립 라이트 양식 필드 (종이 양식과 역사적으로 동의어 인 멘탈 모델로 인해 양식 필드는 일반적으로 흰색 임)는 중립 밝은 배경에서 놀랍게 보이지 않으므로 직접 또는 내부에서 중립적 어두운 배경에서만 사용할 수 있습니다. 중립적 인 어두운 성분. 이것이 우리의 규칙을 준수하고 일관성을 유지하면서 디자인을 유연하게 만드는 방법입니다.

스트레스 테스트

이상적으로는 설계의 견고성을 보장하는 가장 빠르고 효과적인 방법은 스트레스 테스트입니다. 디자인을 테스트한다는 것은 잔인하다는 것을 의미합니다. X 개의 탐색 항목이있는 탐색이 필요하다고 가정 해 보겠습니다. 실제로 유연성을 보장하려면 더 많은 탐색 항목을 추가하여 이러한 요구 사항을 변경하거나 실제로 작업에 스패너를 사용하려면 다른 항목보다 시각적 계층이 높은 탐색 항목을 추가해보십시오. 우리의 크기, 타이포그래피 및 색상 규칙이 이와 같은 것을 허용합니까? 아니면 최적의 유용성을 제공하기 위해 다른 규칙이 필요합니까?

규칙을 추가하는 것과 변형하는 것에는 차이가 있습니다. 엣지 케이스가 많을수록 일관성이 떨어 지므로 대부분의 경우 사용 편의성을 위해 단순히 구성 요소를 다시 생각하는 것이 좋습니다.

05. 문서화 및 협업

우리 자신과 우리의 디자인 파일을 사용할 수있는 다른 디자이너 모두가 디자인 파일을 더 쉽게 사용할 수 있도록하려면 어떻게해야합니까? 알다시피 신뢰할 수있는 공유 클라우드 저장소에 안전하게 보관하는 것이 중요합니다.

그림 물감

첫 번째 단계는 모든 색상을 '문서 색상'견본에 저장하지 않은 경우 저장하는 것입니다. 이렇게하면 설계에 적용해야 할 때 쉽게 액세스 할 수 있습니다.이렇게하려면 Inspector에서 색상 선택기 위젯을 열고 드롭 다운에서 '문서 색상'을 선택한 다음 + 아이콘을 클릭하여 색상을 견본에 추가합니다. 이는 대부분의 UI 도구에서 동일한 방식으로 작동합니다.

공유 라이브러리

다음으로 인쇄 스타일, 색상, 버튼, 공통 영역 및 기본 구성 요소가 포함 된 문서를 공유 라이브러리로 변환해야합니다.

본질적으로 이는 하나의 레이어로만 구성되어 있더라도 모든 요소가 구성 요소 여야 함을 의미합니다. 왼쪽 라이브러리 사이드 바에서 + ‌ 버튼을 클릭 한 다음 바로이 문서를 새 문서로 가져옵니다. 맞습니다. 문서는 이제 라이브러리이며 일관성을 보장하는 UI를 디자인하는 데 사용할 준비가되었습니다.

InVision Studio는 아직 InVision의 공식 디자인 시스템 관리자 도구와 동기화되지 않는다는 점에서 다소 제한적이지만 다른 디자이너가 시간이 지남에 따라 사용하고 업데이트 할 수 있도록 Dropbox에 라이브러리를 보관하는 것이 쉽습니다. 로컬 또는 원격으로 변경하면 라이브러리를 사용하는 모든 Studio 파일 (다시 로컬 또는 원격)에서 색상 및 구성 요소를 업데이트 할 것인지 묻습니다. 이것이 디자인 라이브러리가 팀간에 유지되는 방식입니다.

시각적으로 일관된 사용자 인터페이스를 디자인 할 때는 모든 것을 재사용하십시오. 버튼을 디자인 한 다음 버튼을 사용하여 버튼 구성 요소를 만든 다음
버튼 구성 요소를 사용하여 경고 및 대화 상자와 같은 다른 구성 요소를 만듭니다.

필요하지 않은 구성 요소를 만들지 마십시오. 도서관 구축은 지속적이고 협력적인 노력임을 기억하십시오. 한 번에 모두 완료하거나 혼자서 완료하거나 한 번에 완료 할 필요는 없습니다. 언어 만 전달하면됩니다.

대규모 설계

디자인이 확장되면 관리가 더 어려워집니다. 특히 InVision의 DSM은 아직 Studio에서 작동하지 않기 때문에 효율적이고 유지 관리 할 수 ​​있도록 다양한 조정이 필요합니다.

예를 들어 다양한 요소의 사용 사례를 설명하는 수단으로 라이브러리에 주석을 달기 위해 텍스트 레이어를 사용할 수 있습니다. 타이포그래피 스타일의 경우 텍스트를 좀 더 설명 적으로 편집 할 수도 있습니다 (예 : "h1> / 1.3 / 44px"). 이것은 말한다 h1>s는 44px이고 줄 높이는 1.3이어야합니다.

디자인 핸드 오프

디자인 전달 도구는 디자인의 모든 요소에서 사용되는 다양한 스타일을 표시하므로 개발자가 앱 또는 웹 사이트를 구축 할 수 있습니다. 이러한 도구에는 스타일 개요와 '문서 색상'견본 사본이 포함됩니다. 개발자는 이러한 스타일을 코드로 복사 할 수도 있습니다. 이는 서면 설계 문서를 작성하기로 결정하고 구성 요소의 코드 스 니펫 표현을 포함하려는 경우에 탁월합니다.

웹 사이트 문제 해결 및 관리가 걱정되는 경우 올바른 웹 호스팅 서비스가 있는지 확인하는 것이 도움이되지만 디자인 시스템의 경우 InVision의 디자인 전달 도구 인 Inspect를 사용하는 것이 좋습니다. 이를 활용하려면 InVision Studio에서 'Publish to InVision'버튼 / 아이콘을 클릭하고 결과 URL을 연 다음 탭하여 검사 모드로 전환합니다. 정말 편리합니다.

이 내용은 원래 넷 매거진에 실 렸습니다.