Sushi Design System - UI Kit
+10K
הורדות
כולם
info
מידע על אפליקציה זו
סושי היא מערכת העיצוב הפרטית של Zomato, שעוזרת לבנות ממשקי משתמש חזקים בעקבות שפת עיצוב נקייה ופשוטה. אנחנו בזומטו בנינו את זה מהיסוד. זו לא רק מערכת עיצוב עבורנו, אלא יותר מזה היא עוזרת לנו לספק חוויה חדשה ומשופרת למשתמשים שלנו. סושי יכול לעזור לך לבנות ממשקי משתמש מותאמים לפי שפה עיצובית אטומית, נקייה ופשוטה. בעוד שסושי מתבססת על שפת העיצוב שלה, היא מאמצת את רכיבי ה-Material Design של Google ומשתמשת באופן פנימי בתחומים רבים.
כמערכת עיצוב והתייחסות להנחיות המותג, היא מנוצלת ומיוצגת על ידי צוותים שונים בתוך Zomato, כגון - מוצר, הנדסה, שיווק ומיתוג.
מהי מערכת עיצוב?
מערכת עיצוב היא אוסף של רכיבים הניתנים לשימוש חוזר, המונחה על ידי סטנדרטים ברורים, שניתן להרכיב יחד לבניית כל מספר של יישומים. מערכת עיצוב היא לא רק אוסף של הנכסים והרכיבים שבהם אתה משתמש לבניית מוצר דיגיטלי. לדברי אמט קונולי, מנהל עיצוב המוצר באינטרקום, "... רוב מערכות העיצוב הן למעשה רק ספריות דפוסים: קופסה גדולה של חלקי לגו ממשק משתמש שניתן להרכיב בדרכים כמעט אינסופיות. כל החלקים עשויים להיות עקביים, אבל זה לא אומר שהתוצאות המורכבות יהיו. המוצר שלך הוא יותר מסתם ערימה של רכיבי ממשק משתמש ניתנים לשימוש חוזר. יש לזה מבנה ומשמעות. זה לא דף אינטרנט גנרי, זה התגלמות של מערכת מושגים".
מערכת סושי עיצוב
יסודות
היסודות הם קווים מנחים של מותג דיגיטלי, המגדירים טיפוגרפיה, פלטות צבעים, אייקונים, מרווחים, צל וארכיטקטורת מידע של מערכת העיצוב שלנו. סושי, בהתאם לעקרונות התכנון האטומי, בנוי מלמטה למעלה באמצעות רכיבים הניתנים להרכבה, מסודרים כאטומים ➡️ מולקולות ➡️ אורגניזמים.
עיצוב אטומי
עיצוב אטומי (כפי שמתואר על ידי בראד פרוסט) ממופה למערכת שלנו.
#אטומים
היחידות הבלתי ניתנות לחלוקה הקטנות ביותר הן אטומים. באנדרואיד (או בכל ממשק משתמש נייד) תוויות טקסט, לחצנים ומחזיקי תמונות הם אטומים.
#מולקולות
תצוגות שמערבות מספר אטומים להיווצרות, אך עדיין נראות ומתנהגות כמו ישות אחת למשתמש הן מולקולות. לדוגמה, לשדות קלט יש את תיבת הקלט, שדה השגיאה וכפתור ברור, אבל יחד זה ישות אחת.
#אורגניזמים
רכיבים מורכבים, אך ניתנים לשימוש חוזר, הפועלים בצורה מגובשת יחד. מורכב ממספר אטומים ומולקולות. דוגמה לכך היא פסי דירוג, המורכבים מתגים, שלכל אחד מהם מספר ואייקון. התגים משנים את צבעם גם כן, כאשר נבחרים דירוגים שונים. כל תג בנפרד משמש גם במקומות אחרים, אבל בתור סרגל דירוג, הכל עובד יחד כדי ליצור משמעות חדשה.
טיפוגרפיה
טיפוגרפיה, כפי שאתה אולי יודע, היא אומנות סידור הכתב כדי להפוך את השפה הכתובה לקריאה, קריאה ומושכת כשהיא מוצגת. סידור הכתב כרוך בבחירת גופנים, גדלי נקודות, אורכי שורות, מרווחי שורות ומרווחי אותיות והתאמת הרווח בין זוגות האותיות.
אנו תומכים בווריאציות הגופן הבאות -
ExtraLight
אוֹר
רגיל
בינוני
חצי מודגש
נוֹעָז
ExtraBold
אתה יכול להשתמש בכל גופן שיש לו עד 8 משקלי גופנים ולהקצות אותם מהכינויים האלה. אמנם יש לנו Metropolis, Okra ו-Roboto להדגמה, אבל אתה יכול להשתמש בכל גופן שמתאים למותג שלך.
צבעים
סושי מספק גם קבוצה של צבעים מוגדרים מראש בפלטה שלו. למקרים ייחודיים במיוחד, אל תהסס להשתמש בצבעים משלך, אך חוץ מזה, אנו ממליצים להשתמש בצבעים מלוח זה עבור כל מרכיבי המוצר שלך.
מאגר קודים
כמערכת עיצוב והתייחסות להנחיות המותג, היא מנוצלת ומיוצגת על ידי צוותים שונים בתוך Zomato, כגון - מוצר, הנדסה, שיווק ומיתוג.
מהי מערכת עיצוב?
מערכת עיצוב היא אוסף של רכיבים הניתנים לשימוש חוזר, המונחה על ידי סטנדרטים ברורים, שניתן להרכיב יחד לבניית כל מספר של יישומים. מערכת עיצוב היא לא רק אוסף של הנכסים והרכיבים שבהם אתה משתמש לבניית מוצר דיגיטלי. לדברי אמט קונולי, מנהל עיצוב המוצר באינטרקום, "... רוב מערכות העיצוב הן למעשה רק ספריות דפוסים: קופסה גדולה של חלקי לגו ממשק משתמש שניתן להרכיב בדרכים כמעט אינסופיות. כל החלקים עשויים להיות עקביים, אבל זה לא אומר שהתוצאות המורכבות יהיו. המוצר שלך הוא יותר מסתם ערימה של רכיבי ממשק משתמש ניתנים לשימוש חוזר. יש לזה מבנה ומשמעות. זה לא דף אינטרנט גנרי, זה התגלמות של מערכת מושגים".
מערכת סושי עיצוב
יסודות
היסודות הם קווים מנחים של מותג דיגיטלי, המגדירים טיפוגרפיה, פלטות צבעים, אייקונים, מרווחים, צל וארכיטקטורת מידע של מערכת העיצוב שלנו. סושי, בהתאם לעקרונות התכנון האטומי, בנוי מלמטה למעלה באמצעות רכיבים הניתנים להרכבה, מסודרים כאטומים ➡️ מולקולות ➡️ אורגניזמים.
עיצוב אטומי
עיצוב אטומי (כפי שמתואר על ידי בראד פרוסט) ממופה למערכת שלנו.
#אטומים
היחידות הבלתי ניתנות לחלוקה הקטנות ביותר הן אטומים. באנדרואיד (או בכל ממשק משתמש נייד) תוויות טקסט, לחצנים ומחזיקי תמונות הם אטומים.
#מולקולות
תצוגות שמערבות מספר אטומים להיווצרות, אך עדיין נראות ומתנהגות כמו ישות אחת למשתמש הן מולקולות. לדוגמה, לשדות קלט יש את תיבת הקלט, שדה השגיאה וכפתור ברור, אבל יחד זה ישות אחת.
#אורגניזמים
רכיבים מורכבים, אך ניתנים לשימוש חוזר, הפועלים בצורה מגובשת יחד. מורכב ממספר אטומים ומולקולות. דוגמה לכך היא פסי דירוג, המורכבים מתגים, שלכל אחד מהם מספר ואייקון. התגים משנים את צבעם גם כן, כאשר נבחרים דירוגים שונים. כל תג בנפרד משמש גם במקומות אחרים, אבל בתור סרגל דירוג, הכל עובד יחד כדי ליצור משמעות חדשה.
טיפוגרפיה
טיפוגרפיה, כפי שאתה אולי יודע, היא אומנות סידור הכתב כדי להפוך את השפה הכתובה לקריאה, קריאה ומושכת כשהיא מוצגת. סידור הכתב כרוך בבחירת גופנים, גדלי נקודות, אורכי שורות, מרווחי שורות ומרווחי אותיות והתאמת הרווח בין זוגות האותיות.
אנו תומכים בווריאציות הגופן הבאות -
ExtraLight
אוֹר
רגיל
בינוני
חצי מודגש
נוֹעָז
ExtraBold
אתה יכול להשתמש בכל גופן שיש לו עד 8 משקלי גופנים ולהקצות אותם מהכינויים האלה. אמנם יש לנו Metropolis, Okra ו-Roboto להדגמה, אבל אתה יכול להשתמש בכל גופן שמתאים למותג שלך.
צבעים
סושי מספק גם קבוצה של צבעים מוגדרים מראש בפלטה שלו. למקרים ייחודיים במיוחד, אל תהסס להשתמש בצבעים משלך, אך חוץ מזה, אנו ממליצים להשתמש בצבעים מלוח זה עבור כל מרכיבי המוצר שלך.
מאגר קודים
עדכון אחרון בתאריך
אבטחת נתונים
המפתחים יכולים להציג כאן מידע בנוגע לאופן שבו האפליקציה שלהם אוספת את הנתונים שלך ומשתמשת בהם. מידע נוסף על אבטחת הנתונים
אין מידע זמין
