타이포그래피 정렬 및 스케일로 UI 요소의 아이콘 개선

사용자 인터페이스 요소에서 아이콘을 사용하는 것이 도움이됩니다. 요소 라벨링 외에도 아이콘은 사용자에게 사용자 요소의 의도를 강화하는 데 도움이 될 수 있습니다. 그러나 나는 웹을 탐색하는 동안 약간의 아이콘 오정렬을 발견해야합니다. 아이콘의 정렬이 정확하더라도 요소가 변경 될 때 아이콘이 종종 잘 응답하지 않습니다.

나는 몇 가지 실제 예제를 기록했으며 어떻게 개선했는지에 대한 내 생각을 나누고 싶습니다. 이 기술이 다른 사람들이 타이포그래피 변경을 더 잘 수용하고 디자인의 원래 목표를 유지하면서 사용자 인터페이스 요소를 구축하는 데 도움이되기를 바랍니다.

예 1 - 사이트 메시징

대중 미디어 웹 사이트 에서이 메시징 예제를 찾았습니다. 아이콘의 위치는 그렇게 나쁘지 않습니다. 그러나 글꼴 크기 및 라인 높이와 같은 요소의 스타일 속성을 변경하면 풀기 시작합니다.

식별 된 문제

• 아이콘은 상대 장치 (REM)를 사용하여 왼쪽 가장자리에서 절대적으로 배치됩니다.
• 아이콘이 흐름에서 벗어나기 때문에 부모는 전체 간격을 돕기 위해 더 큰 패딩 왼쪽 값을 제공합니다.
• 아이콘 (SVG)은 REMS에서도 크기가 작용합니다. 부모의 글꼴 크기가 변경되는 경우 각각의 크기 조정을 허용하지 않습니다.

권장 사항

우리는 아이콘의 상단 가장자리가 파란색 점선에 있기를 원하지만 종종 아이콘의 상단 가장자리를 빨간색 점선에서 찾습니다.

텍스트 옆에 아이콘을 삽입 한 적이 있습니까? 텍스트 상단에 정렬되지 않습니까? 위치와 같은 것으로 아이콘을 제자리로 움직일 수 있습니다. 상단 : 0.2EM. 이것은 충분히 잘 작동하지만 미래에 타이포그래피 스타일이 변경되면 아이콘이 잘못 정렬 된 것처럼 보일 수 있습니다.

우리는 아이콘을 더 안정적으로 배치 할 수 있습니다. 요소의 기준선 거리 (한 줄의 기준선에서 다음 라인의 기준선까지의 거리)를 사용하여이를 해결해 봅시다.

기준 거리는 글꼴 크기 * 라인 높이 입니다.

CSS 사용자 정의 속성에 저장하겠습니다.

 -Baselinedistance : calc (var (-fontsize) * var (-lineHeight));

그런 다음 (기준 거리 - 글꼴 크기) / 2 의 결과를 사용하여 아이콘을 아래로 이동할 수 있습니다.

 -ICONOFFSET : calc ((var (-baselinedistance)-var (-fontsize)) / 2);

글꼴 크기의 1REM (16px)과 1.5 라인 높이가 있으면 아이콘이 4 픽셀로 이동됩니다.

• 기준 거리 = 16px * 1.5 = 24px
• 아이콘 오프셋 = (24px - 16px) / 2 = 4px

데모 : 전후

예 2 - 정렬되지 않은 목록

내가 찾은 두 번째 예는 정렬되지 않은 목록입니다. a :: pseudo element를 통해 아이콘에 웹 글꼴 (Font Awesome)을 사용합니다. 순서대로 목록과 비정규 목록을 모두 스타일링하는 데 많은 훌륭한 기사가 있었으므로 비교적 새로운 :: 마커 의사 요소 등에 대한 자세한 내용을 보지 못할 것입니다. 웹 글꼴은 일반적으로 사용 된 아이콘에 따라 아이콘 정렬과 잘 작동 할 수 있습니다.

식별 된 문제

• 사용 된 절대 포지셔닝 없음-의사 요소를 사용할 때, 우리는 종종 Flexbox를 첫 번째 예와 같이 사용하지 않으며 절대 포지셔닝이 여기에서 빛납니다.
• 목록 항목은 패딩과 부정적인 텍스트 표시의 조합을 사용하여 레이아웃을 돕습니다-멀티 라인 텍스트 및 아이콘 확장 성을 설명 할 때이 기능이 잘 작동하지 않습니다.

권장 사항

우리는 또한 우리의 솔루션에서 의사 요소를 사용할 것이기 때문에 절대 포지셔닝을 활용합니다. 이 예제의 아이콘 크기는 인접한 사본보다 약간 큽니다 (약 2x). 이 때문에 아이콘의 상단 위치를 계산하는 방법을 변경합니다. 아이콘의 중심은 첫 번째 줄의 중심과 수직으로 정렬해야합니다.

기준 거리 계산부터 시작하십시오.

 -Baselinedistance : calc (var (-fontsize) * var (-lineHeight));

(기준 거리 - 아이콘 크기) / 2 의 결과를 사용하여 아이콘을 아래로 이동하십시오.

 -ICONOFFSET : calc ((var (-baselinedistance)-var (-iconsize)) / 2);

따라서 1REM (16px)의 글꼴 크기, 1.6의 선 높이 및 아이콘 크기의 2 배 (32px)의 아이콘은 상위 값 -3.2 픽셀을 얻게됩니다.

• 기준 거리 = 16px * 1.6 = 25.6px
• 아이콘 오프셋 = (25.6px -32px) / 2 = -3.2px

2REM (32px)의 글꼴 크기가 더 크면 1.2 라인 높이 및 64px 아이콘이 있으므로 아이콘은 -12.8 픽셀의 최고 값을 얻게됩니다.

• 기준 거리 = 32px * 1.2 = 38.4px
• 아이콘 오프셋 = (38.4px -64px) / 2 = -12.8px

데모 : 전후

결론

사용자 인터페이스 아이콘의 경우 많은 옵션과 기술이 있습니다. SVG, 웹 글꼴, 정적 이미지, :: 마커 및 목록 스타일 유형이 있습니다. 배경색과 클립 경로를 사용하여 흥미로운 아이콘 결과를 달성 할 수도 있습니다. 간단한 계산을 수행하면 아이콘을보다 우아한 방식으로 정렬하고 스케일링하는 데 도움이 될 수있어 약간 더 방탄이됩니다.

참조 : 아이콘을 텍스트에 맞추는 것에 대한 이전 토론.

위 내용은 타이포그래피 정렬 및 스케일로 UI 요소의 아이콘 개선의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!