[번역] 학원아이돌마스터 2025년 대・망년회 : UI 디자인

> 잘 안 보일 수 있어서 텍스트 기재

디자인 접근 방식으로는
· 화면 가장자리에서 요소를 파생시킨다 (헤더, 푸터에서부터 쌓아 올린다)

· 단계적으로 내부 요소의 크기를 결정한다 (여기서는 중앙 패널의 폭이 반드시4/8의 배수일 필요는 없다. 주변 규칙을 고정하기 위한 버퍼로 기능하게 한다)

· 동시에, 큰 요소(원형 버튼 바 등)는 화면 전체를 보면서 두께를 조정한다

① 푸터 요소는 디바이스 폭을 기준으로 4/8의 배수로 계산한다. 좌우 16, 하단 36, 높이 36.
 → 여기서는 (시스템 요소이므로) 화면 가장자리에 두는 것을 우선한다.

② 원의 크기는 화면 전체의 화각과 균형을 고려하여 직경 640, 두께 56으로 설정했다.
또한 마진 24를 두어 ① 및 다른 요소와 접하도록 조정했다. 원의 위치는 디바이스 중앙이 아니다.

③ 원에 의해 영향을 받는 요소의 각도를 결정한다 (가능한 한 시각적 보정은 하지 않는다). 이번에는 26도 간격으로 설정했다. 이 부분의 버튼은 ①보다 크게 설정했다 (직경 48, 배치는 각도를 우선하고 ②와 좌우를 맞추지 않았다).
알림 배지(빨간 원)는 직경 8. 주변의 패인 부분은 14(16은 너무 컸다). 동시에 ② 내부 요소는 26/2 = 13도로 결정했다.

④는 ③으로 인해 발생한 여백에 맞춰 프레임을 설정했다. ③–④ 사이의 마진은 복잡하므로 각 요소의 마진을 R4, R8, 16으로 설정했다.

⑤에서는 게이지 두께를 3, 아이콘 직경을 10으로 설정했다.
 작은 요소는 반드시 4/8 규칙을 따를 필요는 없다. 게이지의 R 값은 0, 4, 2로 설정했다. 여기서도 1, 2처럼 정수로 맞출 필요는 없다(시각적 균형을 우선한다).
마진 8 규칙을 지키기 위해 게이지 R 값은 77-78-77로 설정하였다.

 

* 버튼의 경우 아이돌과 관련될수록 모서리 (카도마루) 가 둥글게 표현된다고 함

 

 

아이콘

 

 

 

서체

 

> 숫자는 전용서체 사용

*기본 서체는 IBM Plex Sans JP (Medium. 500)

 

 

로고