WeChat Mini 프로그램 디자인 사양 (5) 시각적 사양

5. 시각적 사양

WeChat은 디자이너가 쉽게 디자인할 수 있도록 웹 디자인 및 미니 프로그램을 위한 기본 제어 라이브러리 세트를 제공하며 개발자도 편리하게 호출할 수 있습니다.

미리보기 주소 : https://weui.io

1. 글꼴 사양

일반적인 글꼴 크기는 20, 18, 17, 16, 14, 13, 11(pt)입니다. :

WeChat 글꼴의 사용은 실행 중인 시스템 글꼴과 일치합니다. 탐색을 예로 들면 iOS 및 Android에 해당하는 글꼴은 다음과 같습니다.

Navigation(iOS 및 Android)

글꼴 색상

주 콘텐츠는 검정색이고, 보조 콘텐츠는 회색입니다. 타임스탬프와 양식 기본값은 밝은 회색입니다. 주요 콘텐츠인 설명 콘텐츠의 큰 부분은 세미 블랙입니다.

파란색은 링크 색상이고, 녹색은 텍스트 색상을 완성하기 위한 색상이며, 누르기와 비활성화 상태는 각각 투명도를 20%와 10%로 줄입니다.

2.

3. 폼 입력 시각적 사양

4. 버튼 사용 원칙

목록 외부 버튼의 표준 텍스트

버튼 높이가 44px인 경우 사용: 색상 #000000 / #353535 글꼴 크기 18pt

클릭 가능한 상태에서 텍스트 투명도를 60%로 조정

클릭 불가능한 상태에서 하단 텍스트의 투명도를 30%로 조정

• 목록 밖의 버튼에 있는 텍스트는 표준입니다

버튼 높이가 25px일 때 사용: 색상 #000000 / #353535 글꼴 크기 14pt

페이지 선형 버튼의 표준 텍스트

버튼 높이가 35px일 때 사용: 색상 #09BB07 / #353535 글꼴 크기 16pt



5. 아이콘 사용 원칙