光音移动端设计规范1.0

2021-09-10 413浏览

  • 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.