모바일 인터페이스 설계 (UI 디자인의 황금 비율)

UI 디자인의 황금 비율

"황금 비율"은 건축, 가전 제품, 로고 및 사진의 디자인에서 매우 중요합니다. 나는 그것에 대해 많이 쓰고 싶지 않습니다, 당신은 위키피디아에서 그것을 배울 수 있습니다. 나는 간단히 말하게 될 것입니다 : 우리의 의식은 조화와 아름다움을 낳는 경향이 있습니다. 그리고 "황금비"는 제품을보다 편안하고 지각 할 수있는 우아한 방법입니다. 간단히 말해서, 디자인에서 균형을 유지하는 도구입니다.

이 기술은 어려운 것처럼 보이기 때문에 인터페이스 디자인에별로 인기가 없습니다. 고전적인 황금 비율을 만드는 방법과 실제로 적용하는 방법을 간단히 설명하겠습니다.



기하학

황금 비율은 상대방 비율을 1 : 1.618로 나타냅니다. 빌드하는 것은 꽤 쉽습니다.

1. 사각형 그리기

2. 정사각형 (A) 가운데에서 대각선을 대향 모서리 (B)로 그립니다.

3. 결과 대각선은 호의 반지름입니다. 원을 그리면 직사각형이됩니다. 사각형과 직사각형의 모양은 "황금 사각형"입니다.

4. 크고 작은 직사각형에 대각선으로 그릴 경우, 교차점에서 "초점"을 얻습니다. 이 시점에서 가장 중요한 인터페이스 객체를 배치하여 사용자의주의를 끄는 것이 좋습니다.

5.이 셰이프의 고유 한 특성은 분할하는 동안 정사각형과 직사각형으로 구성되는 더 작은 직사각형을 얻음을 의미합니다.

6. 그리고 가장 아름다운 것은 : 사각형의 측면과 같은 반경을 가진 원호의 각 사각형에서 우리는 "황금 나선"을 얻습니다.

사각형은 캔버스와 인터페이스의 원하는 크기로 회전하고 조정할 수 있습니다.

삼각형

1. 삼각형의 한 변이 다른 두 변보다 두 배 더 큰 삼각형을 그립니다.

2. 반지름 AB를 가진 점 (B)에서 중심으로부터 호를 그립니다. 아크는 빗변을 점 (D)

3. 반지름 CD로 중심점 ©에서 원호를 그리고 점 (E)을 얻습니다.

4. (E) 점에서 빗변에 직선을 그립니다.

결과적으로 삼각형을 서로 비례하는 작은 삼각형으로 분할합니다. 그런데 두 요소의 명확한 눈에 띄는 "황금 비율"이 1 : 1,618입니다. 하나의 요소는 다른 요소로부터 1.618입니다.

자연의 아름다움

우리가 계속해서 삼각형을 나누고 그 사이에 원을 그리면, 자연에 의해 만들어진 거의 모든 것이 왜 황금 비율의 법칙의 대상인지, 때로는 피보나치 수열과 같은 이유가 명확 해집니다.

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ..

(각 연속 숫자는 이전 두 숫자의 합계입니다)

"황금 나선형"을 40 ° 또는 60 °로 회전 시키면 다음과 같은 아름다움을 만들어냅니다 :

다음은 20 °의 회전 각도가 더 작은 경우와 수평에 모양이 반영된 경우의 예입니다.

황금 비율의 도움으로 아이콘, 로고, 인터페이스 등의 디자인에 사용 된 모양을 그릴 수 있습니다.

모바일 인터페이스 설계

"황금 비율"을 보여주기 위해 몇 가지 예를 만들었습니다. 첫 번째는 ASOS 스토어의 카드 제품입니다. 앱의 첫 번째 화면에서 사진과 작업 만 볼 수 있습니다 : 즐겨 찾기에 저장, 비디오 재생 및 공유. 페이지를 스 와이프하여 크기, 색상, 옷감 설명에 대한 정보를 찾고 쇼핑백에 추가해야하기 때문에 불편합니다. 결과적으로 "빠른"제품보기는 매우 어렵습니다.

"황금 사각형"을 그리면 요소를 배치하는 방법이 분명해집니다. 이 구조는 가장 적합한 사용자 데이터를 첫 번째 화면에 표시 할 수있게합니다.

보시다시피 "초점"에는 앱의 핵심 작업 중 하나 인 "즐겨 찾기에 저장"작업이 있습니다.

요소는 크기가 크고 서로의 거리가 멀거나 화면 가장자리에서 떨어진 위치에 있으므로 엄지 손가락으로 쉽게 누를 수 있습니다.

두 번째 예는 블로그 게시물 화면입니다. Rectangle은 모든 것을 장소에 넣습니다. 우리는 꽤 큰 사진과 넓은 텍스트 영역을 가지고 있습니다. 그림이 황금 비율을 기반으로하는 경우 모바일 크기로 왜곡되지 않습니다.

오른쪽 아래 구석에있는 "like"와 "comment"와 같은 요소를 배열하면 더 커 보이지만 눈에 거슬리지 않게 할 수 있습니다. 이미지는 겹치지 않지만 사용자가 볼 수 있습니다.




다행스럽게도 "1 : 1,618"의 비율을 두려워하지 않고 사용자 인터페이스를 만들려고합니다.

https://blog.prototypr.io/golden-ratio-in-ui-design-8d11e66582c3  (번역)