光音移动端设计规范1.0

1. GUANGYIN DESIGN GUIDES 1.0

2.

3.

4. QUCIKVIEW CATALOG GUANGYIN DESIGN GUIDES 1.0 1 2 3 4 5 6 7 8 9

5. / Color

6. / Font Aa 123 Aa 123

7. / Icon 12px 16px 20px 24px 32px 26pt 64px 20pt 24pt 26pt 2pt 48px 24pt 28pt 12pt 28pt 20pt

8. / Shadow

9. / Shadow

10. / Shadow

11. / Layout

12. / Grid

13. / Button

14. / Status Bar

15. / Navigation Bar 24pt 16pt color: #000000 85% opacity: 100% font-size: 16pt line: 24pt (1.5) color: #000000 85% opacity: 100% font-size: 16pt line: 24pt (1.5) 8pt 16pt 24pt 12pt 16pt

16. / Scope Bar 36pt 2pt color: #000000 45% opacity: 100% font-size: 16pt line: 24pt (1.5) color: #1D6FE9 100% opacity: 100% font-size: 16pt line: 24pt (1.5) 40pt 32pt color: #1D6FE9 100% opacity: 100% font-size: 14pt line: 22pt (1.6) color: #FFFFF 100% opacity: 100% font-size: 14pt line: 22pt (1.6) 26pt color: #1D6FE9 100% opacity: 100% font-size: 14pt line: 22pt (1.6) 20pt 24pt 16pt color: #262626 100% opacity: 100% font-size: 24pt line: 32pt (1.3) color: #999999 100% opacity: 100% font-size: 16pt line: 24pt (1.5)

17. / Search Bar color: #000000 85% opacity: 100% font-size: 16pt line: 24pt (1.5) 24pt 16pt 16pt color: #000000 45% opacity: 100% font-size: 16pt line: 24pt (1.5) 24pt 12pt 12pt 12pt 40pt color: #000000 45% opacity: 100% font-size: 16pt line: 24pt (1.5) color: #1D6FE9 100% opacity: 100% font-size: 16pt line: 24pt (1.5) 12pt 4pt 20pt 20pt 18pt color: #000000 85% opacity: 100% font-size: 16pt line: 24pt (1.5) 12pt

18. / Tool Bar 24pt 16pt 16pt 24pt 16pt color: #000000 85% opacity: 100% font-size: 16pt line: 24pt (1.5) 16pt 20pt 16pt 20pt color: #000000 85% opacity: 100% font-size: 10pt line: 10pt (1) 16pt

19. / Tab Bar 94pt 125pt 75pt color: #1D6FE9 100% font-size: 10pt 24pt 24pt color: #666666 100% font-size: 10pt color: #1D6FE9 100% font-size: 17pt color: #666666 100% font-size: 17pt 125pt 56pt 52pt 120pt 8pt 52pt

20. / Segmented Control 76pt 171.5pt 114.5pt 112pt color: #1D6FE9 100% font-size: 14pt 16pt color: #FFFFFF 100% font-size: 14pt 16pt color: #1D6FE9 100% font-size: 16pt 24pt 16pt 18pt color: #000000 45% font-size: 16pt 24pt 24pt 24pt color: #000000 45% font-size: 16pt color: #000000 85% font-size: 24pt 16pt 24pt 26pt color: #1D6FE9 100% font-size: 14pt fill: #1D6FE9 100% fill: #1D6FE9 10% 16pt

21. / Dashboard color: #000000 85% font-size: 14pt 8px 40px 40px 40px color: #000000 85% font-size: 14pt 8px 40px 32px color: #000000 45% font-size: 12pt 32px 24px 72px 24px 112px 172px 112px 40px 32px 40px 32px 4px 8px color: #000000 85% font-size: 14pt color: #000000 85% font-size: 12pt 68px 84px 68px 84px

22. / Side Navigation

23. / Dropmenu color: #000000 85% font-size: 16pt 24pt 224pt 10pt 160pt fill: #000000 70%

24. / List Navigation 16pt 16pt color: #000000 85% font-size: 16pt

25. / Lateral Navigation 16pt color: #000000 85% font-size: 16pt

26. / Toast

27. / Pop Layer

28. / Dialog 38px 16px 16px 20px color: #1D6FE9 100% font-size: 12px 18px 24px

29. / Radio & Checkbox 8px 16px 16px color: #333333 100% font-size: 16px 24px 80px 35px 91px 25px 91px 9px 25px 14px 40px 78px 32px

30. / Switch 24px 16px 8px font-size: 12px font-face: PingFangSC-Regular line: 20px (1.7) font-size: 16px font-face: PingFangSC-Regular line: 24px (1.5) 16px 8px

31. / Stepper 50px 16px 108px

32. / Textarea + 16px 24px

33. / InputNumber 16px 40px 40px 100px

34. / Text Fields + 48px 24px 24px

35. / Swiper 14px 14px layer-name: opacity: 100% radius: 1px

36. / Pickers color: #000000 100% opacity: 45% font-size: 18px 84px 50px

37. / Badge 20pt 2pt 24pt 20pt 24pt 20pt 24pt 5pt 5pt 20pt 24pt 5pt 20pt 24pt 5pt

38. / Tips 36pt 16pt font-color: #E85A4A 100% opacity: 100% font-size: 12pt line: 20pt (1.7) bg-color: #E85A4A 10% opacity: 100% 18pt 16pt color: #1D6FE9 100% opacity: 100% font-size: 12pt line: 20pt (1.7) bg-color: #1D6FE9 10% opacity: 100% 18pt 12pt 16pt 18pt color: #F5894E 100% opacity: 100% font-size: 12pt line: 20pt (1.7) bg-color: #F5894E 10% opacity: 100%

39. / List color: #000000 85% font-size: 16pt line: 24pt (1.5) 24px 12px 24px 16px 16px 16px color: #000000 85% font-size: 16pt line: 20pt (1.5) 96px 16px color: # 100% font-size: 14pt line: 20pt (1.5) 12px 6px 40px color: #000000 45% font-size: 12pt line: 20pt (1.5) color: #000000 65% font-size: 16pt line: 20pt (1.5) 12px 12px 16px 12px color: #000000 85% font-size: 18pt line: 26pt (1.5) color: #000000 45% font-size: 12px line: 18px (1.5)

40. / Carousel

41. / Carousel

42. / Card 48px color: #000000 85% font-size: 18px line: 26px (1.5) color: #000000 45% font-size: 14px line: 20px (1.5) 16px color: #000000 25% font-size: 14px line: 20px (1.5) 165px

43. 40px 4px

44. 2900 2900 2900 2900

45. 16px 132px 30px 2900 2900 2900 2900 2900 2900 2900 2900

46. 2900 2900 2900 2900 2900 2900 layer-name: color: #000000 45% opacity: 100% font-size: 16pt font-face: PingFangSC-Regular character: 0pt line: 24pt (1.5) 2900 2900 150px 40px

47. 8px 2900 16px 16px 2900 2900 2900

48.

49.

50.

51.

52.

53.