사실 화면 디자인에도 그의 비중이 있다. 비례적으로 설계하면 인터페이스가 더욱 통일될 뿐만 아니라 사후 유지 관리도 용이합니다.
제품 속성에 따라 사용되는 비율도 다릅니다. 우리의 일반적인 화면 비율은 2: 3, 3: 4, 1: 1, 16: 9,16: 입니다 다음은 이러한 축척에 대한 분석입니다.
이미지 축척 2: 3
2: 3 ≈ 0.666, 금 분할 비율에 가깝습니다. 카메라 촬영 중 전폭 치수 비율은 2: 3 으로 다른 사이즈는 모두 잘려 적용이 더 편해 보입니다. 이 비율은 상품 목록과 배너 지도와 같은 수평 차트에 많이 사용됩니다.
Airbnb 의 인터페이스 체험 모듈과 상세 페이지의 사진은 모두 2:3 의 비율을 사용합니다.
이미지 축척 3: 4
3: 4 의 디자인은 인터페이스에서도 흔히 볼 수 있습니다. 2: 3 에 비해 이미지가 더 작고 이미지 비율이 큰 app 와 제품 목록 및 banner 에 많이 사용됩니다.
Airbnb 보다 부엌 이야기는 음식을 진열하기 위해 더 많은 사진 전시공간이 필요하다.
그림 비율 1: 1
1: 1 도 정사각형 구도로 사진 비중이 크다. 따라서 제품 전시, 아바타, 클로즈업 전시 등 앱에 자주 사용되며 전자업체 디자인에서 더욱 흔하다.
티몰 이런 전자업체 앱은 사진이 사용자의 클릭 수를 직접 느끼기 때문에 1: 1 을 자주 사용하여 사진 전시를 극대화한다.
그림 비율 16: 9
16: 9 는 주로 영화에서 흔히 볼 수 있는 구도로, 시각이 넓어지는 느낌을 주며 비디오 앱에 많이 쓰인다.
대부분의 비디오 앱은 이 비율을 사용합니다. 영화 화면의 크기 비율 때문에 대부분의 장치에서도 이 비율을 사용합니다.
황금비율은 16: 10 입니다
16: 10 = 1.6 골든 섹션1:0.618 =
재래식 비율을 타파하다
통상적인 잣대로 설계하면 우리의 디자인을 더욱 편안하게 할 수 있지만, 디자인 통제를 더 잘하는 사람들에게는 잣대로 설계하지 않아도 휘황찬란하기 때문에 우리는 성장기에 규칙을 따르고 상승기에 관례를 깨뜨릴 수 있다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 표준이 너무 죽으면 모든 인터페이스가 비슷하고 아이디어가 전혀 없다.
예를 들어, he 에서는 위에서 편집한 비율에 따라 설계되지 않았지만 인터페이스는 여전히 통일되고 편안하며 규칙을 유연하게 적용해야 합니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)
요약
1. 제품 자체의 특성에 따라 적절한 화면 비율을 선택합니다.
2. 인터페이스 디자인상 기존의 잣대에 얽매이지 않고, 때로는 관례를 깨면 인터페이스가 더욱 창의적이 될 수 있다.
3. 레이아웃 등 디자인 원칙에 따라 서로 다른 비율의 사진을 함께 사용할 수 있어 인터페이스가 더욱 리듬감 있고 생동감을 느낄 수 있다.