קומפוננטה (Component) בעיצוב ממשק ומה מייחד אותה מדיזיין סיסטם וטוקן עיצוב

קומפוננטה (Component) היא יחידת בנייה עצמאית וניתנת לשימוש חוזר בממשק משתמש, כמו כפתור, כרטיסייה (Card) או שדה טופס, שיש לה התנהגות ומראה מוגדרים משלה. במקום לעצב ולתכנת כל כפתור או כרטיס מחדש בכל מסך, מרכיבים ממשק שלם מתוך אוסף קומפוננטות קיימות, כך שכל שינוי במרכיב אחד מתעדכן בכל מקום שבו הוא משמש.

איך קומפוננטות בונות ממשק שלם

ברוב המוצרים הדיגיטליים, מסך שלם, כמו עמוד הרשמה או לוח בקרה, מורכב מכמה עשרות קומפוננטות שמסודרות זו לצד זו: שדה קלט, כפתור שליחה, הודעת שגיאה, תפריט ניווט וכדומה. כל קומפוננטה מוגדרת פעם אחת, כולל המצבים השונים שלה (רגיל, מרחף מעליו, לחוץ, מנוטרל), ולאחר מכן נעשה בה שימוש חוזר בכל מקום באתר או באפליקציה שבו נדרש אותו רכיב בדיוק.

קומפוננטה מול דיזיין סיסטם וטוקן עיצוב

קומפוננטה היא לא דיזיין סיסטםמערכת משותפת של עקרונות, רכיבים, טוקנים וכללי שימוש שמאפשרת לבנות מוצר עקבי בקנה מידה שלם, אלא אחד מאבני הבניין שממנו מערכת עיצוב מורכבת: דיזיין סיסטם מגדיר את כלל הקומפוננטות הזמינות, את הכללים לשימוש בהן ואת האופן שבו הן מתחברות זו לזו. באותו אופן, קומפוננטה אינה טוקן עיצובערך עיצובי בעל שם, כמו צבע או ריווח, שמוגדר פעם אחת ומשמש בכל המערכת: הטוקן הוא הערך הבודד, כמו צבע רקע או רדיוס פינה, שממנו בנויה הקומפוננטה, ולא הרכיב המורכב עצמו.