[스케치] 8pt Grid : 스케치로 UI 디자인의 일관된 간격

간격은 UI 디자인의 모든 것입니다.
색깔은 잊고, 타이포그래피는 잊어 버려리세요. 그 간격 사이에 못을 박아 넣으면, 당신은 벌써 절반은 성공입니다. 왜냐구요?
  • 더 좋은 가독성을 통해 데이터 소비를 향상시킵니다.
  • 고객에게 보다 일관된 사용자 경험을 제공합니다.
  • 디자인 및 개발 중에 추측과 결정 피로를 제거합니다.
  • 일관된 확장성을 제공합니다.
  • 요소에 시각적인 계층 구조를 부여하여 의미를 전달합니다.
  • 당신이 디자이너라면, 당신의 결과물은 ... 더 좋아 보일 것입니다.

Spacing system 설정

나는 사용자 인터페이스를 설계하기 위해 스케치 앱을 사용하지만 여기의 원리들은 상관 없이 작동한다. 개발자와 함께 일한다면, 이것은 여러분의 삶을 둘 다 더 쉽게 만들어 줄것입니다. 특히 제품과 UI가 성장하면서 공간 간격을 두지 않고 500개의 아트판을 배치하는 것은 재미 없다.
시작하려면 그리드의 기본 번호를 설정하십시오. 나는 material design 원칙을 사용하여 8 : 8px / 16px / 24px / 32px / 40px / 48px / 56px의 구분을하고 요소 사이의 모든 padding / margin에 대해 사용합니다 (때로는 4px가 필요합니다).
저는 이제 8의 배수라고 생각합니다. 처음에는 계산기를 사용하여 확인하고 있지만 곧 자연스러워집니다. 다른 디자이너는 5 / 10 / 15 / 20 등을 사용하여 충분히 만족합니다. 무엇이든지 당신을 위해 작동하는데, 요점은 간격 일관성을 위한 기반을 구축한다는 것입니다.
시스템이 개발자와 이해 관계자에게 시각적으로 어떻게 작동하는지 알려주십시오.
presentation
Material desig vertical spacing of a table card
여기서 우리는 색상과 타이포그래피에 관계없이 콘텐츠에 시각적 계층 구조를 부여했음을 신속하게 알 수 있습니다. ‘Nutrition’ 이 'Froyo'와 같은 글꼴 크기 였더라도 여전히 더 두드러져 보일 수 있다. 한 단계 더 나아가 크기 (xxs, xs, s, m, l, xl, xxl)의 이름을 지정하고 전체 팀에 하나의 진실한 출처와 참조 지점이 있을 수 있습니다.

그래서 Sketch에서 어떻게 작동합니까?

실제로 그렇게 어렵지는 않습니다. 곧 디자인이 향상되는 것을 보게 될 겁니다. 웹 사이트에 더 나은 수직 리듬과 앱 디자인의 일관성을 통합하여 디자인이 향상되는 것을 확인 할 수 있습니다.
presentation

나는 지금 일하고있는 웹 프로젝트를 진행할 것입니다. 8pt UI 그리드를 사용하면서 세로 리듬을 유지하고 8pt 기준선을 사용할것입니다. (4pt 기준선도 잘 작동합니다) - 여기 나의 스케치 레이아웃 설정이 있습니다 :
presentation

그럼 더 자세히 살펴 보겠습니다.
presentation

그러면 이제 어떻게 도움이 될까요?
이와 같은 하나의 요소 템플릿 (Section, H2, Paragraph [1], Icon, H3, Paragraph [s], USP panel)을 통해 우리는 제품 전반에 걸쳐 일관성을 유지하고 저장하는 spec / set 규칙을 신속하게 만들 수 있습니다. 시간을 절약하고 추측뒤로 미룰수있습니다.
개발자들은 디자이너와 같은 것을 보지 못하고, 그 반대의 경우도 있습니다. 시각적 디자인 스펙을 작성하면 이러한 차이를 좁힐 수 있습니다.

Icons

예전에는 아이콘 폰트를 사용했는데 사용후 바로 사용하는데 너무힘들고 제한이 많다는 것을 알았습니다. 최근에 적절한 브라우저 지원을 통해 이제 다음과 같이 SVG를 사용하여 설정합니다.
presentation
다양한 크기로 나타날 것이므로 아이콘을 프레임화하고 자연스럽게 8의 배수로를 사용하도록 하십시오. 이 값은 64x64이므로 UI그리드 내에 맞아야 합니다. 대부분의 아이콘은 이러한 크기(16x16,24x24,32x32등)에 맞게 디자인됩니다.
아이콘을 변경해야하고 100 개의 다른 장소에서 사용되는 경우 라인 아래로이 심블 하나만 변경하면됩니다. 아이콘 폰트를 사용하면 세트를 재생성하고 개발자가 항상 최신 버전을 유지해야합니다. Sketch에서 어떤 이유로 든 실제로 버그가있었습니다.

Text elements 와 line-height

line height 에 관해서는 텍스트 요소가 그리드 안에 있는지 확인하는 것이 까다로울 수 있습니다. 광범위한 규칙으로 이 Golden Line height plugin을 사용하는 경향이 있습니다. 1.5와 같이 더 많은 기본적인 치료를하려면 다음과 같은 결과가 나옵니다.
16pt / 24
21pt / 32
24pt / 36
32pt / 48
etc

팁 : line height는 font size X1.5 를 기억합시다.
presentation
Line heigh는 실제로 요소의 너비에 따라 조정해야하므로 다른 장치 크기로 작업 할 때는이를 고려해야합니다. 스케치는 이를 처리할 수 없으므로(제가 알기로는)디자인 사양에 문서화되어야 합니다.

Putting it into practice : 실천하기

이러한 규칙 집합을 정하는 것이 항상 쉬운 것은 아닙니다. 현재의 스프린트가 너무 집중되어 큰 그림을 보기가 어려울 수도 있고 시스템이 없는 기존 UI에서 작업하고 있을 수도 있습니다.
이런 거 할 시간이 없어 보이죠?
하지만 나는 강력 추천 합니다.
  • 제품 소유자에게 알리십시오(확장성, 효율성, 신속한 프로토 타이핑에 대해 이야기하다 보니 판매가 쉬운 것으로 보였습니다.)
  • 나중에 많은 시간 낭비와 좌절을 줄이기 위해 지금 시간을 투자하세요.
  • 개발자에게 이야기하고 계획과 지원 방법에 대해 설명합니다. 실제로 사용할 제품을 제공하는 방법에 대한 정보를 얻습니다.
  • 기존 제품의 경우 한발 뒤로 물러나 현재 상태를 기반으로 설계 규칙을 작성하십시오.
  • 새 제품의 경우 그리드/텍스트/이미지/공백을 포함한 기본 시작 템플릿(브랜드 지침 기반)을 생성하고 구성 요소를 생성할 때 규칙을 추가하면 디자인에 대한 생각이 바뀝니다.
  • 전체 팀과 공유하고 그혜택을 이해하도록 도와주십시오.

이글은 번역글 입니다.
원본글 링크입니다.
[The 8pt Grid: Consistent Spacing in UI Design with Sketch]