UI의 구성요소는 무엇인가요? 대부분의 인터페이스는 디자인의 3대 요소이기도 한 글꼴, 그래픽, 색상으로 구성됩니다. 그렇다면 디자인에서의 관계를 어떻게 처리해야 할까요? 오늘 저는 디자인할 때 더 나은 레이아웃을 돕기 위해 일반적으로 사용되는 몇 가지 디자인 기술을 여러분과 공유하고 싶습니다. ▲위 그림에서 UI 인터페이스를 분할해 보면 인터페이스가 기본적으로 글꼴, 색상, 그래픽의 세 가지 주요 섹션으로 구성되어 있음을 알 수 있습니다. ▲비슷함: 위의 그림을 같은 방식으로 분할하고 콘텐츠의 세 부분을 가져와 글꼴 가중치 계층을 생성할 수 있습니다. ▲우리 모두는 글꼴에 가중치가 있고 다양한 글꼴 가중치가 인터페이스 계층을 반영할 수 있다는 것을 알고 있습니다. 특히 오늘날의 iOS 스타일에서는 단어 두께의 대비를 통해 시각적 계층 구조를 개선하는 데 더 중점을 두지만 많은 디자이너는 대비를 위해 글꼴 크기를 사용하는 방법만 알고 계층 구분을 위해 단어 두께와 색상을 사용하는 것을 무시합니다. 도 적용 가능합니다. ▲이 텍스트가 더 중요하다면 더 크게 만들고, 덜 중요하다면 더 작게 만드세요. 이는 대부분의 디자이너의 디자인 습관이지만 레벨을 구분하기 위해 크기 비교에 너무 의존하지 마세요. 글꼴 두께를 늘리면 동일한 효과를 얻을 수 있습니다. ▲ 시각적 글꼴 두께가 변경되면 전체 레이아웃의 계층 구조를 느낄 수 있습니다. ▲ 글꼴 두께 비교는 그래픽 디자인과 레이아웃 디자인에서 더 일반적으로 사용됩니다. 브랜드 디자인에서는 글꼴 굵기가 다르면 시각적 경험과 편안함이 전혀 달라집니다. ▲제품 카드 디자인에서는 전체 레이아웃에서 같은 단어를 사용하는 것보다 정보를 포착하는 데 있어서 단어 굵기를 통한 수준 구분의 시각적 효과가 확실히 더 중요하고 빠릅니다. 색상은 글꼴 수준 외에도 UI 레이아웃에서 가장 중요한 레이아웃 기술 중 하나입니다. 인터페이스를 만들 때 기본 콘텐츠는 검은색, 보조 콘텐츠는 회색(기사 날짜 등)으로 사용하지 마세요. .) 보조 콘텐츠는 밝은 회색이며 위에서 언급한 단어 가중치의 사용과 결합되어 정보와 시각적인 리듬을 형성할 수 있습니다. ▲인터페이스의 선과 색상 블록은 레벨을 구분하는 보조 수단이므로 인터페이스의 색조에 따라 조정해야 합니다. ▲잘못된 접근 방식: 흰색 배경에 텍스트를 밝은 색으로 만드는 것이 더 적합합니다. 컬러 배경이 아니기 때문에 회색을 사용하세요. 컬러 배경과 회색을 함께 사용하면 인터페이스가 특히 더러워 보이고 인식도가 떨어집니다. ▲ 사진을 비교해 보면 컬러 배경이 더 좋은 효과를 볼 수 있습니다. 투명도를 줄임으로써 시각적 계층도 열 수 있습니다. 채도가 적절할 때까지 색조를 선택하여 대부분의 인기 있는 스타일을 만듭니다. 시장 사용 프로젝션. 그러나 프로젝션을 사용할 때는 깨끗하고 또렷한 프로젝션을 유지해야 하며 프로젝션 값과 확산 범위를 너무 크게 사용하지 마십시오. 간격은 레벨을 만든다 ▲디자인을 많이 할 때는 분할을 많이 사용하기 쉽고, 언제 선을 사용하고 언제 투영을 사용하는지, 인터페이스를 더 깔끔하게 만드는 방법, 때로는 공백을 사용하여 레벨을 구분하는 방법, 효과 선보다 더 깨끗하고 산뜻해집니다. 중심축이 계층을 만든다 ▲이 페이지에서는 오른쪽보다 왼쪽이 더 나은 것이 분명하다. 오른쪽의 정보는 정렬과 호흡이 부족하여 페이지를 더 명확하게 만든다. 결론적으로, 오늘 제가 여러분께 공유한 것은 UI 인터페이스의 레벨을 차별화하는 고전적인 요소와 특징 중 일부에 불과합니다. 모두가 추론을 도출하고 이를 자신의 작품에 적용하여 세밀한 느낌을 지닌 작품을 더 많이 만들 수 있기를 바랍니다!