[iOS - HIG] (Technologies) 8. Glyphs (글리프)

Glyphs(글리프)

• 아이디어를 표현하는 간단한 그래픽 이미지
• 아이콘은 일반적으로 음영 텍스처링, 강조 표시와 같은 문양이 없는 시작적인 세부사항을 표출

• 아이콘에다 색상을 더하여 시각적 향상 가능

• iOS 13, macOS 11, watchOS 6, tvOS13부터 시스템에서 SF Symbol를 사용한 glyph 제공
  • SF Symbol: 자동으로 크기에 따라 가중치값을 가져서 유연한 벡터 기반 이미지 (텍스트 크기 관한 Dynamic Type Size의 변경에 맞게 SF Symbol도 동적으로 변경)
• 앱의 모든 Glyph에서 시각적 일관성을 유지하는 방향을 지향
  • 일관된 크기, 세부 수준, 획 두께 및 원근 사용
  • 동일한 치수를 설정하는것이 일관된 glyph가 아님을 주의
  • ex) 실선 정사각형과 실선 삼각형이 있을 때 둘 다 너비와 높이가 같지만, 사용자는 일반적으로 정사각형이 크다고 느끼므로 이 경우에 삼각형의 크기를 약간 늘려서 두 glyph에 일관된 시각적 가중치를 부여

• glyph와 인접 텍스트의 가중치를 일치
  • 사용자 custom symbol을 만들 경우, 근처 텍스트와 일치하도록 가중치를 조정할 수 있으므로 사용
• 사용자 custom symbol에서 기호가 정 중앙에 있어도 불균형하게 보일 수 있으므로 적절하게 배치
  • 다운로드 glyph는 위쪽보다 아래쪽에 시각적 가중치가 더 높기 때문에 가운데에 있으면 너무 낮게 보일 수 있는점 존재

중앙에 있지만 시각적 가중치가 아래에 있기 때문에 낮게 보이는 현상 존재

위로 올림으로서 시각적으로 균형이 맞도록 설정

before and after

• 필요한 경우에만 glyph에서 selected 상태 이미지도 함께 준비

• Tool bar나 navigation bar는 선택 모양을 제공하지 않으므로 이러한 영역에 대해서는 채워진 버전과 채워지지 않는 두 가지 이미지를 준비

• VoiceOver를 위해 glpyh에 대한 대체 텍스트 레이블을 제공
• Apple 제품은 저작권이 있으므로 Apple에 관한 이미지를 custom하여 사용하지 않고 SF Symbol을 사용
• template image를 제공하는 경우 PDF형식으로 생성
  • 시스템은 고해상도 디스플레이를 위해 PDF 기반 템플릿 이미지의 크기를 자동으로 저장하므로 고해상도 버전을 제공할 필요가 없는 장점 존재
  • cf) PNG형식은 크기 조정을 지원하지 않으므로 각 템플릿 이미지에 대해 여러 버전을 제공해야하는 것을 주의