Sushi Design System - UI Kit

Zomato

ಈ ಆ್ಯಪ್ ಕುರಿತು

ಸುಶಿ ಝೊಮಾಟೊದ ಸ್ವಂತ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯಾಗಿದೆ, ಇದು ಶುದ್ಧ ಮತ್ತು ಸರಳ ವಿನ್ಯಾಸ ಭಾಷೆಯನ್ನು ಅನುಸರಿಸಿ ದೃಢವಾದ ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ನಾವು zomato ನಲ್ಲಿ, ಇದನ್ನು ನೆಲದಿಂದ ನಿರ್ಮಿಸಿದ್ದೇವೆ. ಇದು ನಮಗೆ ಕೇವಲ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯಾಗಿಲ್ಲ, ಆದರೆ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ಇದು ನಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಹೊಸ ಮತ್ತು ವರ್ಧಿತ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ನಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಪರಮಾಣು, ಶುದ್ಧ ಮತ್ತು ಸರಳ ವಿನ್ಯಾಸ ಭಾಷೆಯನ್ನು ಅನುಸರಿಸಿ ಬೆಸ್ಪೋಕ್ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸುಶಿ ನಿಮಗೆ ಸಹಾಯ ಮಾಡಬಹುದು. ಸುಶಿ ತನ್ನದೇ ಆದ ವಿನ್ಯಾಸದ ಭಾಷೆಯಲ್ಲಿ ನಿರ್ಮಿಸಿದಾಗ, ಅದು ಸಂಪೂರ್ಣವಾಗಿ ಅಳವಡಿಸಿಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಹಲವು ಪ್ರದೇಶಗಳಲ್ಲಿ ಆಂತರಿಕವಾಗಿ Google ನ ಮೆಟೀರಿಯಲ್ ಡಿಸೈನ್ ಘಟಕಗಳನ್ನು ಬಳಸುತ್ತದೆ.

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯಾಗಿ ಮತ್ತು ಬ್ರ್ಯಾಂಡ್ ಮಾರ್ಗಸೂಚಿಗಳಿಗೆ ಉಲ್ಲೇಖವಾಗಿ, ಇದನ್ನು Zomatoದಲ್ಲಿನ ವಿವಿಧ ತಂಡಗಳು ಬಳಸಿಕೊಳ್ಳುತ್ತವೆ ಮತ್ತು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ, ಉದಾಹರಣೆಗೆ - ಉತ್ಪನ್ನ, ಎಂಜಿನಿಯರಿಂಗ್, ಮಾರ್ಕೆಟಿಂಗ್ ಮತ್ತು ಬ್ರ್ಯಾಂಡಿಂಗ್.

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ ಎಂದರೇನು?
ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಘಟಕಗಳ ಸಂಗ್ರಹವಾಗಿದೆ, ಸ್ಪಷ್ಟ ಮಾನದಂಡಗಳಿಂದ ಮಾರ್ಗದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ, ಅದನ್ನು ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಟ್ಟಿಗೆ ಜೋಡಿಸಬಹುದು. ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯು ಡಿಜಿಟಲ್ ಉತ್ಪನ್ನವನ್ನು ನಿರ್ಮಿಸಲು ನೀವು ಬಳಸುವ ಸ್ವತ್ತುಗಳು ಮತ್ತು ಘಟಕಗಳ ಸಂಗ್ರಹ ಮಾತ್ರವಲ್ಲ. ಇಂಟರ್‌ಕಾಮ್‌ನ ಉತ್ಪನ್ನ ವಿನ್ಯಾಸದ ನಿರ್ದೇಶಕ ಎಮ್ಮೆಟ್ ಕೊನೊಲಿ ಪ್ರಕಾರ, "... ಹೆಚ್ಚಿನ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳು ನಿಜವಾಗಿಯೂ ಕೇವಲ ಪ್ಯಾಟರ್ನ್ ಲೈಬ್ರರಿಗಳಾಗಿವೆ: UI ಲೆಗೊ ತುಣುಕುಗಳ ದೊಡ್ಡ ಬಾಕ್ಸ್, ಅದನ್ನು ಅನಂತ ರೀತಿಯಲ್ಲಿ ಜೋಡಿಸಬಹುದು. ಎಲ್ಲಾ ತುಣುಕುಗಳು ಸ್ಥಿರವಾಗಿರಬಹುದು, ಆದರೆ ಇದು ಒಟ್ಟುಗೂಡಿದ ಫಲಿತಾಂಶಗಳು ಎಂದು ಅರ್ಥವಲ್ಲ. ನಿಮ್ಮ ಉತ್ಪನ್ನವು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ UI ಅಂಶಗಳ ರಾಶಿಗಿಂತ ಹೆಚ್ಚಾಗಿರುತ್ತದೆ. ಇದು ರಚನೆ ಮತ್ತು ಅರ್ಥವನ್ನು ಹೊಂದಿದೆ. ಇದು ಸಾಮಾನ್ಯ ವೆಬ್ ಪುಟವಲ್ಲ, ಇದು ಪರಿಕಲ್ಪನೆಗಳ ವ್ಯವಸ್ಥೆಯ ಸಾಕಾರವಾಗಿದೆ.

ಸುಶಿ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ

ಅಡಿಪಾಯಗಳು
ಅಡಿಪಾಯಗಳು ಡಿಜಿಟಲ್ ಬ್ರ್ಯಾಂಡ್ ಮಾರ್ಗಸೂಚಿಗಳಾಗಿವೆ, ಇದು ನಮ್ಮ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಮುದ್ರಣಕಲೆ, ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್‌ಗಳು, ಐಕಾನ್‌ಗಳು, ಅಂತರ, ನೆರಳು ಮತ್ತು ಮಾಹಿತಿ ವಾಸ್ತುಶಿಲ್ಪವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಸುಶಿ, ಪರಮಾಣು ವಿನ್ಯಾಸದ ತತ್ವಗಳನ್ನು ಅನುಸರಿಸಿ, ಸಂಯೋಜಿತ ಘಟಕಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕೆಳಭಾಗದಿಂದ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಪರಮಾಣುಗಳು ➡️ ಅಣುಗಳು ➡️ ಜೀವಿಗಳು.

ಪರಮಾಣು ವಿನ್ಯಾಸ
ಪರಮಾಣು ವಿನ್ಯಾಸ (ಬ್ರಾಡ್ ಫ್ರಾಸ್ಟ್ ವಿವರಿಸಿದಂತೆ) ನಮ್ಮ ಸಿಸ್ಟಮ್‌ಗೆ ಮ್ಯಾಪ್ ಮಾಡಲಾಗಿದೆ.

#ಪರಮಾಣುಗಳು
ಚಿಕ್ಕ ಅವಿಭಾಜ್ಯ ಘಟಕಗಳು ಪರಮಾಣುಗಳಾಗಿವೆ. Android ನಲ್ಲಿ (ಅಥವಾ ಯಾವುದೇ ಮೊಬೈಲ್ UI) ಪಠ್ಯ ಲೇಬಲ್‌ಗಳು, ಬಟನ್‌ಗಳು ಮತ್ತು ಇಮೇಜ್ ಹೋಲ್ಡರ್‌ಗಳು ಪರಮಾಣುಗಳಾಗಿವೆ.

#ಅಣುಗಳು
ರಚನೆಯಾಗಲು ಬಹು ಪರಮಾಣುಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ವೀಕ್ಷಣೆಗಳು, ಆದರೆ ಬಳಕೆದಾರರಿಗೆ ಒಂದೇ ಅಸ್ತಿತ್ವದಂತೆ ಕಾಣುತ್ತವೆ ಮತ್ತು ವರ್ತಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳು ಇನ್‌ಪುಟ್ ಬಾಕ್ಸ್, ದೋಷ ಕ್ಷೇತ್ರ ಮತ್ತು ಸ್ಪಷ್ಟ ಬಟನ್ ಅನ್ನು ಹೊಂದಿರುತ್ತವೆ, ಆದರೆ ಒಟ್ಟಿಗೆ ಇದು ಒಂದೇ ಘಟಕವಾಗಿದೆ.

#ಜೀವಿಗಳು
ಸಂಕೀರ್ಣವಾದ, ಆದರೆ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಘಟಕಗಳು, ಅದು ಒಟ್ಟಾಗಿ ಸುಸಂಘಟಿತ ರೀತಿಯಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಬಹು ಪರಮಾಣುಗಳು ಮತ್ತು ಅಣುಗಳಿಂದ ಕೂಡಿದೆ. ರೇಟಿಂಗ್ ಬಾರ್‌ಗಳು, ಇದು ಟ್ಯಾಗ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಪ್ರತಿಯೊಂದೂ ಒಂದು ಸಂಖ್ಯೆ ಮತ್ತು ಐಕಾನ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ. ವಿಭಿನ್ನ ರೇಟಿಂಗ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗ ಟ್ಯಾಗ್‌ಗಳು ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ. ಪ್ರತಿಯೊಂದು ಟ್ಯಾಗ್ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಇತರ ಸ್ಥಳಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ರೇಟಿಂಗ್ ಬಾರ್‌ನಂತೆ, ಹೊಸ ಅರ್ಥವನ್ನು ರಚಿಸಲು ಎಲ್ಲವೂ ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ.

ಮುದ್ರಣಶಾಸ್ತ್ರ
ಮುದ್ರಣಕಲೆಯು ನಿಮಗೆ ತಿಳಿದಿರುವಂತೆ, ಲಿಖಿತ ಭಾಷೆಯನ್ನು ಸ್ಪುಟವಾಗಿ, ಓದಲು ಮತ್ತು ಪ್ರದರ್ಶಿಸಿದಾಗ ಆಕರ್ಷಕವಾಗಿ ಮಾಡಲು ಪ್ರಕಾರವನ್ನು ಜೋಡಿಸುವ ಕಲೆಯಾಗಿದೆ. ಟೈಪ್‌ನ ವ್ಯವಸ್ಥೆಯು ಟೈಪ್‌ಫೇಸ್‌ಗಳು, ಪಾಯಿಂಟ್ ಗಾತ್ರಗಳು, ಸಾಲಿನ ಉದ್ದಗಳು, ಲೈನ್-ಸ್ಪೇಸಿಂಗ್ ಮತ್ತು ಅಕ್ಷರ-ಅಂತರಗಳ ಆಯ್ಕೆಯನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ ಮತ್ತು ಅಕ್ಷರಗಳ ಜೋಡಿಗಳ ನಡುವಿನ ಜಾಗವನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ.

ನಾವು ಈ ಕೆಳಗಿನ ಟೈಪ್‌ಫೇಸ್ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತೇವೆ -

ಎಕ್ಸ್ಟ್ರಾಲೈಟ್
ಬೆಳಕು
ನಿಯಮಿತ
ಮಾಧ್ಯಮ
ಸೆಮಿಬೋಲ್ಡ್
ದಪ್ಪ
ಎಕ್ಸ್ಟ್ರಾಬೋಲ್ಡ್

ನೀವು 8 ಫಾಂಟ್ ತೂಕವನ್ನು ಹೊಂದಿರುವ ಯಾವುದೇ ಫಾಂಟ್ ಅನ್ನು ಬಳಸಬಹುದು ಮತ್ತು ಅವುಗಳನ್ನು ಈ ಅಲಿಯಾಸ್‌ಗಳಿಂದ ನಿಯೋಜಿಸಬಹುದು. ನಾವು ಡೆಮೊಗಾಗಿ ಮೆಟ್ರೊಪೊಲಿಸ್, ಓಕ್ರಾ ಮತ್ತು ರೋಬೋಟೊವನ್ನು ಹೊಂದಿರುವಾಗ, ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್‌ನೊಂದಿಗೆ ಹೋಗುವ ಯಾವುದೇ ಫಾಂಟ್ ಅನ್ನು ನೀವು ಬಳಸಬಹುದು.

ಬಣ್ಣಗಳು
ಸುಶಿ ತನ್ನ ಪ್ಯಾಲೆಟ್‌ನಲ್ಲಿ ಪೂರ್ವನಿರ್ಧರಿತ ಬಣ್ಣಗಳ ಗುಂಪನ್ನು ಸಹ ಒದಗಿಸುತ್ತದೆ. ಅತ್ಯಂತ ವಿಶಿಷ್ಟವಾದ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನಿಮ್ಮ ಸ್ವಂತ ಬಣ್ಣಗಳನ್ನು ಬಳಸಲು ಹಿಂಜರಿಯಬೇಡಿ, ಆದರೆ ಇಲ್ಲದಿದ್ದರೆ, ನಿಮ್ಮ ಉತ್ಪನ್ನದ ಎಲ್ಲಾ ಘಟಕಗಳಿಗೆ ಈ ಪ್ಯಾಲೆಟ್‌ನಿಂದ ಬಣ್ಣಗಳನ್ನು ಬಳಸಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ.

ಕೋಡ್ ರೆಪೊಸಿಟರಿ