iOS 및 Android 개발 단위 변환 및 UI 절단 요구 사항

모바일 UI 디자인에는 일반적으로 사용되는 4가지 단위인 px, pt, dp 및 sp가 있습니다. 많은 사람들이 이 단위와 변환 관계를 구분하지 못하며, iOS와 Android에 대해서도 간략하게 설명하겠습니다. 여기에서 사진 자르기 요구 사항을 소개합니다. 읽고 나면 뭔가를 얻을 수 있기를 바랍니다(실수 있는 경우 수정해 주세요).

px는 전자 화면에서 이미지를 구성하는 가장 기본적인 단위인 픽셀입니다. 이 단위는 화면 해상도를 설명할 때도 사용됩니다. 예를 들어, 1px는 1픽셀을 나타냅니다. 예를 들어 iPhone 8의 크기는 750px × 1334px입니다. 이는 휴대폰 화면에서 가로 방향의 각 행에 750픽셀이 있고 세로 방향의 각 열에 1334픽셀이 있음을 의미합니다.

pt는 점을 의미하며 두 가지 의미를 갖습니다. 하나는 인쇄 업계에서 일반적으로 사용되는 단위로 길이, 절대 크기의 표준 단위이며 다른 하나는 1pt = 1/72인치 = 0.35mm입니다. iOS 개발에 사용되는 기본 단위로, 디자이너가 1배 크기(375pt × 667pt)로 디자인하고 마크업을 주면 개발자가 2로 나누지 않고 바로 사용할 수 있습니다.

dp는 Android 개발을 위한 벤치마크 단위입니다. dpi(화면 픽셀 밀도, 즉 인치당 픽셀)가 160인 화면에서 1dp = 1px입니다. 단순화를 위해 Android에서는 화면 밀도를 mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi의 5가지 유형으로 나눕니다. 변환 관계는 아래에서 자세히 소개하겠습니다.

Android에서 sp는 사용자의 글꼴 크기 기본 설정에 따라 크기가 조정되는 반면 dp는 그렇지 않다는 점을 제외하면 dp와 유사합니다. 공간 크기 단위는 dp, 텍스트 관련 크기 단위는 sp를 사용해 보세요. 예를 들어 뉴스, 문자 메시지 등 대용량 텍스트의 경우 단위는 sp를 사용하는 것이 좋습니다.

iOS 개발 시 다양한 iPhone 기기 모델에서는 다양한 배율로 이미지를 잘라야 합니다. 다음 표는 각 iPhone 모델의 디스플레이 매개변수를 비교합니다.

다음은 간략한 설명입니다. 개념은 ppi와 dpi입니다.

ppi(iOS): 인치당 픽셀, 화면 픽셀 밀도. 값이 높을수록 화면이 더 섬세합니다.

dpi(iOS): 픽셀 밀도, 인치당 픽셀 수를 나타냅니다.

iOS 개발에서는 ppi = 163, dpi = 163을 개발 벤치마크로 사용한다고 규정되어 있습니다.

ppi = 163, dpi = 163이면 1pt = 1px입니다.

ppi = 326, dpi = 163이면 1pt = 2px;

ppi = 401, dpi = 154이면 1pt = 2.6px ≒ 3px입니다.

(iPhone 8+/7+/6+의 개발 벤치마크는 왜 154인가요? Apple에 문의하셔야 할 수도 있습니다...)

비유하자면 변환 공식을 얻습니다. 1 :

소수점이 있으면 반올림하세요.

iOS 개발에서는 현재 @2x 및 @3x만 필요하므로 2x 및 3x png 이미지를 내보낼 수 있습니다. 내보내기 전에 잘라낸 이미지에 반 픽셀, 버 등이 있는지 확인하고 픽셀이 정렬되어 있는지 확인하십시오. 이렇게 하면 온라인으로 전환한 후 페이지 아이콘의 가상 가장자리 문제를 효과적으로 피할 수 있습니다. 세부 사항의 품질을 향상시킵니다.

추가할 점: 전체 개발 크기에서 iPhone 8은 375 × 667pt(@2x)인 반면 iPhone X는 375 × 812pt(@3x)를 사용합니다. @2x Picture, @3x Picture를 사용하는 iPhone X는 그림 2-1과 같이 더 높은 해상도를 보여줍니다.

Android 개발에서는 모델이 고르지 않기 때문에 화면 밀도를 사용하여 디자인을 구분해야 합니다.

여기의 dpi(Android)와 위의 dpi(iOS)는 다른 개념입니다. dpi(iOS)는 개발 픽셀 밀도이고 dpi(Android)는 화면 픽셀 밀도를 의미하는 dpi입니다. , iOS 개발의 ppi와 유사합니다.

Android에서는 dpi = 160이 개발 벤치마크로 규정되어 있습니다.

dpi = 160이면 벤치마크 dpi = 160, 1dp = 1px> ​​

dpi = 240, 기본 dpi = 160, 1dp = 1.5px;

dpi = 320인 경우 기본 dpi = 160, 1dp = 2px.

비유하자면 변환 공식 2를 얻습니다.

아이콘을 디자인할 때 5가지 주요 화면 픽셀 밀도(mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)에 대해 Scale을 따라야 합니다. 그림 3-1과 같이 2:3:4:6:8 비율로 조정됩니다.

예를 들어 실행 아이콘의 크기는 48 × 48dp입니다. 이는 mdpi 화면에서 실제 크기가 48 × 48px이어야 함을 의미합니다. hdpi 화면에서는 실제 크기가 1.5배입니다. mdpi(72 × 72 px) xhdpi 화면에서 실제 크기는 mdpi(96 × 96 px)의 2배입니다.

어떤 경우에는 특별한 절단 다이어그램, 즉 9점 다이어그램(위 그림 참조)을 제공해야 할 수도 있습니다. 도트나인 사진은 안드로이드 개발에 사용되는 특수한 형식의 사진입니다. 파일 이름은 ".9.png"로 끝납니다.

이런 종류의 사진은 이미지의 어떤 부분을 끌어올 수 있고 어떤 부분을 끌어올 수 없어 원래 비율을 유지해야 하는지 프로그램에 알려줄 수 있습니다. 점 9 다이어그램을 사용하면 이미지가 흐려지거나 변형되지 않고 적응할 수 있습니다. 예를 들어 대화 상자의 배경 이미지는 점 9 다이어그램을 사용합니다.

--

이상입니다. 읽어주셔서 감사합니다!

끝