מסגרת עבודה לאב-טיפוס אוטומטי של ממשקי משתמש, המשלבת עקרונות עיצוב קוגניטיביים וויזואליים לשיפור השמישות ובהירות הפריסה

סיכום

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

תקציר

עיצוב ממשק משתמש (UI) אפקטיבי דורש איזון הרמוני בין משיכה ויזואלית, שמישות קוגניטיבית ועקביות של הפריסה. עם זאת, גישות נוכחיות ליצירה אוטומטית של UI מתמקדות בעיקר במראה הוויזואלי או בזיהוי רכיבים, וחסרות מסגרת מאוחדת המשלבת עקרונות קוגניטיביים, בינה של צבעים והסקה מבנית. יתרה מכך, שיטות קיימות סובלות מהכללה מוגבלת של פריסות, יכולת פרשנות נמוכה, בחירת צבעים סטטית והתנהגות לא עקבית בין מסכים שונים. בהקשר זה, עבודה זו מציעה מסגרת לאב-טיפוס אוטומטי של UI המשלבת זיהוי רכיבים המבוסס על רשת נוירונים קונבולוציונית מבוססת אזורים מהירה (Faster R-CNN) ומידול צבע תפיסתי המונהג על ידי מרחב צבע אחיד CIECAM02 (CAM02-UCS), המועשרים בעקרונות עיצוב קוגניטיביים וויזואליים. ה-Faster R-CNN משמש לזיהוי רכיבי UI ולהסקת מבנים היררכיים מתוך מאגרי נתונים של ממשקים בקנה מידה רחב. מודול משופר ליצירת צבעים מנתח תמונות מותג או תמונות ייחוס כדי להבטיח ערכות נושא של צבעים הרמוניות, אחידות תפיסית ותואמות לשמישות באמצעות CAM02-UCS. פלטים אלו עוברים אופטימיזציה נוספת באמצעות כללי עיצוב קוגניטיביים, כולל קיבוץ גשטלט, חוקי פיטס והיק, ריווח מבוסס קשב ומידול הירכיה ויזואלית, כדי ליצור באופן אוטומטי פריסות UI מזוקקות ומכוונות-משימה. ניסויים שנערכו על מאגרי הנתונים RICO, ENRICO ו-Guo’s UI Color מראים כי המערכת המוצעת משיגה דיוק של 92.4% בזיהוי רכיבים, משפרת את בהירות הפריסה ואת דיוק סדר הקריאה ב-18.7%, ומייצרת פלטות צבעים שדורגו כהרמוניות יותר ב-24.5% על ידי מעצבים בהשוואה לשיטות בסיס. הערכות משתמשים מצביעות גם על הפחתה של 31% בעומס הקוגניטיבי הנתפס ועל עלייה של 28% בעקביות העיצובית בין מסכים. ממצאים אלו מוכיחים כי שילוב של הבנה מבנית מבוססת למידה עמוקה עם מידול צבע מבוסס תפיסה ועקרונות עיצוב קוגניטיביים יוצר אבות-טיפוס של UI שהם יעילים ביותר, קוהרנטיים אסתטית וידידותיים למשתמש. מסגרת זו מבססת גישה חדשנית מקצה לקצה לאב-טיפוס אוטומטי של UI חכם וממוקד-אדם.

מבוא

ממשקי משתמש גרפיים (GUIs) משמשים כתווים מרכזיים לתקשורת בין בני אדם למערכות מחשוב, ומשפיעים באופן משמעותי על השמישות, הנגישות וחוויית המשתמש הכללית (UX)^1,2. מערכות תוכנה מודרניות נסמכות על ממשקים אינטואיטיביים ומושכי לב מבחינה חזותית כדי למשוך משתמשים ולשמר אותם. באופן מסורתי, עיצוב ממשק משתמש כולל יצירת פריסות גרפיות שמתורגמות לאחר מכן לקוד front-end על ידי מהנדסים. עם זאת, הבדלים בפרוטוקולים ספציפיים לפלטפורמות שונות בין מערכות הפעלה מחייבים התאמה חוזרת, מה שמעלה את מורכבות הפיתוח ואת המאמץ הנדרש. כתוצאה מכך, יצירת קוד ממשק משתמש אוטומטית הפכה לכיוון מחקר חשוב, המפחית את המאמץ הידני ומשפר את יעילות הפיתוח.

גישות מוקדמות ליצירה אוטומטית של ממשקי משתמש (UI) משלבות טכניקות מסורתיות של עיבוד תמונה עם מודלי למידה עמוקה לזיהוי וסיווג אזורים^3,4. כיום, אסטרטגיות דומיננטיות ליצירת קוד של ממשקי משתמש גרפיים (GUI) מיישמות טכניקות של ראייה ממוחשבת כדי לנתח תמונות UI ולהמיר אותן לייצוגים מובנים של צד-לקוח (front-end)^5,6,7. בעוד ששיטות עיבוד תמונה מסתמכות על מאפיינים המוגדרים ידנית, גישות של למידה עמוקה מחלצות ייצוגים היררכיים ממאגרי נתונים רחבי היקף. כתוצאה מכך, חוקרים בחנו גישות היברידיות המשלבות למידה עמוקה עם טכניקות עיבוד תמונה ספציפיות לתחום כדי לשפר את החוסן ואת הדיוק.

צבע הוא גורם קריטי נוסף בעיצוב ממשק משתמש (UI), המשפיע על תפיסת המשתמש, על השמישות ועל המשיכה האסתטית¹. שמירה על עקביות בין תוכן התמונה לבין סכימות הצבע של ממשק המשתמש הופכת למאתגרת כאשר קלטים חזותיים משתנים בגוון ובהקשר^8,9,10. כתוצאה מכך, מחקר משמעותי התמקד ביצירה אוטומטית של פלטות צבעים ובמידול צבע תפיסתי. שיטות קיימות ליצירת צבע כוללות טכניקות המבוססות על מרחב הצבע CIELAB¹¹. גישות אחרות משתמשות באלגוריתמי אשכול (clustering), כגון k-means, כדי לחלץ צבעים דומיננטיים מתמונות¹². כתוצאה מכך, עבודות אחרונות אימצו יותר ויותר גישות מונחות-נתונים המבוססות על למידה חישובית לצורך מידול צבע.

במקביל, גישות של למידה עמוקה שיפרו משמעותית את זיהוי רכיבי ממשק המשתמש (UI) ואת הבנת הפריסה. רשתות נוירונים אפשרו ניתוח מבני מדויק יותר של ממשקים בנייד¹³. עם זאת, שיטות אלו מתמקדות בעיקר בדיוק הזיהוי ולעתים קרובות מזניחות היבטים ברמה גבוהה יותר, כגון שמישות קוגניטיבית, היררכיית פריסה ויעילות אינטראקציה. הוצעו גם מודלים גנרטיביים עבור סינתזה של פריסות UI^14,15, אך הם ניצבים בפני אתגרים בשמירה על עקביות בין מסכים ובמתן החלטות עיצוביות ניתנות לפירוש¹⁶. גישות אחרות מתמקדות בדמיון ויזואלי או באיכות הרינדור, אך חסרות מסגרת מאוחדת המשלבת סמנטיקה של רכיבים, הרמוניה של צבעים ומגבלות שמישות¹⁷. זיהוי טקסט הוא חשוב אף הוא להבנת תוכן ה-UI. טכניקות כגון רשתות נוירונים רקורסיביות קונבולוציוניות (CRNNs) מאפשרות זיהוי מדויק של תבניות טקסט מורכבות במסכי ממשק^18,19,20.

הוצעו מספר מערכות ליצירת קוד UI מתוך סקיצות או תמונות. Sketch2Code משתמשת בזיהוי אובייקטים כדי להמיר סקיצות לייצוגי קוד^21,22, אך היא רגישה לאיכות התמונה. REDRAW מספקת תהליך (pipeline) אוטומטי לאיסוף נתונים ואימון מודלים, המשלב רשתות נוירונים קונבולוציוניות ורשתות נוירונים רקורסיביות כדי ליצור ייצוגי UI מובנים^23,24. עבודות מאוחרות יותר הציגו מדדי הערכה משופרים לבחינת איכות ה-UI שנוצר²⁵. גישות עדכניות יותר כוללות מודלים מבוססי דיפוזיה ומודלים מבוססי טרנספורמר ליצירת פריסה (layout), כגון diffusion layout transformers ללא שיטות autoencoder, יצירת פריסות GUI באמצעות גרפי סידור GUI מבוססי טרנספורמר, ויצירת פריסות UI המונחית על ידי מודלי שפה גדולים^26,27,28. סקירה השוואית של גישות אלו מוצגת ב-טבלה 1.

מקורות ושיטה(ות) מרכזית(יות)	מטרה	יתרונות	חסרונות
יצירה אוטומטית של ערכת צבעים לממשק משתמש מבוססת תמונה: חילוץ צבעים דומיננטיים + מידול צבעים תפיסתי CAM02-UCS¹	יצירה אוטומטית של ערכות צבעים לממשק משתמש (UI) מתוך תמונות ייחוס, תוך אופטימיזציה של הרמוניה ויכולת שימוש.	ביסוס תפיסתי חזק (CAM02-UCS); מאזן באופן מפורש בין הרמוניה לשמישות (ניגודיות וגיוון); כולל יישום מבוסס רשת והערכה של מעצבים.	מתמקד אך ורק בצבע/בתמה (ולא בפריסה או במבנה הרכיבים); סינתזת ממשק משתמש (UI) המבוססת על כללים/היוריסטיקות ולא על למידה מקצה לקצה.
איחוד של יצירת פריסות באמצעות מודל דיפוזיה מופרד (LDGM)²⁵	יצירת פריסה מאוחדת וגמישה עבור סצנות גרפיות וממשקי משתמש.	גיוון ויכולת בקרה בחזית הטכנולוגיה עבור יצירת פריסות (layout generation); תומך ביצירה מותנית ובסוגים מרובים של מאפיינים.	תוצרי דיפוזיה עשויים להפגין בעיות יישור או בעיות בסידור המבני (layout) ברמת פירוט גבוהה אלא אם יוטלו עליהם אילוצים; מורכבות מודל ועלות הסקה גבוהות יותר.
טרנספורמרים של פריסת דיפוזיה ללא שיטות אוטו-אנקודר: טרנספורמר + דיפוזיה ליצירת פריסה (ללא אוטו-אנקודר)²⁶	שיפור הנאמנות וההלימה עבור מדדי ייחוס (benchmarks) של יצירת פריסה (מדדי FID, הלימה וחפיפה).	לכידה טובה יותר של מתאמים סמנטיים בין אובייקטים סמוכים; ביצועים חזקים במדדי FID ובמדדי יישור (alignment).	מתמקד בעיקר בגיאומטריית הפריסה (מיקומים, גדלים, קטגוריות) ולא בסמנטיקה של ממשק המשתמש (UI).
יצירת פריסות ממשק משתמש גרפי (GUI) באמצעות מודלים מבוססי Transformer מתוך גרפים של סידורי ממשק משתמש גרפי (GUI-AGs)²⁷	יצירת פריסות של ממשק משתמש גרפי (GUI) מאילוצים מיקומיים/גרפיים כדי לסייע למעצבים.	ייצוגים גרפיים לוכדים אילוצים רלציוניים; טרנספורמר מאפשר יצירה גמישה המותנית באילוצים.	עשוי לדרוש גרפים של אילוצים מפורשים מהמעצבים; דגש מוגבל על צבע ומדדי שמישות.
יצירת פריסת ממשק משתמש (UI) באמצעות מודלי שפה גדולים (LLMs) בהנחיית דקדוק ממשק משתמש: מודלי שפה גדולים (LLMs) + דקדוק ממשק משתמש היררכי²⁸	בחינת מודלי שפה גדולים (LLMs) ליצירת פריסות (layout generation) ושיפור הניתנות להסבר והשליטה באמצעות ייצוגי דקדוק.	בקרת יכולת גבוהה ויכולת הסבר; יכול להפיק תועה מלמידה בהקשר (in-context learning) ממודלי שפה גדולים (LLMs מסוג GPT).	עבודה בשלב מוקדם עם תיקוף אמפירי מוגבל; עיצוב דקדוק ועמידות בממשקי משתמש (UI) שונים

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

למרות התקדמות זו, נותרה מגבלה מרכזית: שום מערכת קיימת אינה משלבת באופן משותף זיהוי רכיבים, מידול צבע תפיסתי, עקרונות עיצוב קוגניטיביים ועקביות של פריסה במסכים מרובים בתוך מסגרת אחת מקצה לקצה¹. גישות נוכחיות מבצעות בדרך כלל אופטימיזציה רק להיבט אחד או שניים — כגון זיהוי, פריסה או צבע — מבלי להתחשב בתלויות ההדדיות ביניהם. פיצול זה מדגיש פער מחקרי קריטי בפיתוח מערכות אוטומטיות מאוחדות וממוקדות-משתמש לבניית אבות-טיפוס של ממשקי משתמש (UI). בפרט, עקרונות עיצוב קוגניטיביים כגון חוקי הגשטאלט, חוק פיטס (Fitts’ law) וחוק היק (Hick’s law) נתפסים לעיתים קרובות באופן מושגי בלבד, במקום להיות משולבים באופן פורמלי במודלים חישוביים.

כדי להתגבר על מגבלות אלו, מחקר זה מציע מסגרת עבודה (framework) אוטומטית מקצה לקצה לאב-טיפוס של ממשק משתמש (UI), המשלבת זיהוי רכיבים, מידול צבע תפיסתי ועקרונות עיצוב קוגניטיביים בתוך מערכת מאוחדת. מסגרת העבודה תוכננה לשפר את איכות הפריסה, להפחית את העומס הקוגניטיבי, לשפר את ההרמוניה הצבעונית ולהגביר את השמישות הכוללת. שיפורים אלו תוקפו באמצעות ניסויים על מאגרי הנתונים RICO, ENRICO ו-Guo’s UI Color, המדגימים את היעילות של שילוב היבטים מבניים, תפיסתיים וקוגניטיביים בתוך צינור עיבוד (pipeline) אחד ואוטומטי לאב-טיפוס של UI. ההשערה היא ששילוב של זיהוי רכיבים מבוסס למידה עמוקה, מידול צבע תפיסתי ועקרונות עיצוב קוגניטיביים בתוך מסגרת עבודה מאוחדת ישפר באופן משמעותי את איכות אב-הטיפוס של ה-UI בהשוואה לגישות קיימות. באופן ספציפי, H1 מציעה כי מסגרת העבודה משפרת את איכות הפריסה, כולל יישור, קיבוץ וסדר קריאה. H2 גורסת כי מסגרת העבודה מפחיתה את העומס הקוגניטיבי של המשתמש. H3 מציעה כי מידול צבע תפיסתי משפר את תיאום הצבעים ואת ההרמוניה הוויזואלית. H4 קובעת כי השמישות הכללית והאיכות האסתטית של אבות-הטיפוס של ה-UI משתפרות.

פרוטוקול

מחקר זה משתמש במאגרי נתונים הזמינים לציבור ואינו כולל נבדקים בבני אדם או בבעלי חיים.

מסגרת אב-הטיפוס האוטומטית המוצעת לממשקי משתמש (UI) משלבת הבנה מבנית מבוססת למידה עמוקה, מידול צבע אחיד תפיסתי ועקרונות עיצוב קוגניטיביים ליצירת אבות-טיפוס של ממשקים קוהרנטיים וממוקדי-משתמש. המתודולוגיה מתחילה בארכיטקטורת Faster R-CNN שאומנה על מאגרי הנתונים RICO ו-ENRICO לזיהוי רכיבי UI והפקת מערכות היחסים ההיררכיות ביניהם, מה שמאפשר פרשנות מדויקת של פריסות מסך מגוונות. הרכיבים שזוהו מעובדים לאחר מכן על ידי מודול אינטליגנציית צבע, המפיק רמזי צבע המבוססים על מותג או תמונה, ממדל דמיון תפיסתי באמצעות CAM02-UCS, ומייצר פלטות צבעים הרמוניות, מודעות לניגודיות ותואמות לדרישות נגישות. לאחר מכן, עקרונות עיצוב קוגניטיביים — הכוללים את חוקי הקיבוץ של Gestalt, חוק פיטס (Fitts’ law), חוק היק (Hick’s law), ריווח מבוסס קשב ומגבלות היררכיה ויזואלית — מיושמים באמצעות מנוע אופטימיזציה קוגניטיבי לשיפור הארגון המרחבי והיישור של הרכיבים. לבסוף, שכבת הסקת מסקנות לגבי הפריסה (layout reasoning layer) משלבת אילוצים מבניים, תפיסתיים וקוגניטיביים כדי להפיק אבות-טיפוס של UI עקביים בין מספר מסכים, המאזנים בין שמישות, אסתטיקה ובהירות פונקציונלית. צינור עיבוד משולב זה מבטיח קוהרנטיות תפיסית, מפחית את העומס הקוגניטיבי ועומד בעקרונות של עיצוב ממוקד-אדם. זרימת העבודה המלאה של השיטה המוצעת מודגמת ב-איור 1.

איור 1. הארכיטקטורה הכוללת של מסגרת העבודה המוצעת לבניית אב-טיפוס אוטומטי של ממשק משתמש. הדיאגרמה ממחישה את כל הצינור העיבודי, החל מתמונת ממשק משתמש כקלט. זיהוי רכיבים מבוצע באמצעות Faster R-CNN כדי לזהות אלמנטים בממשק. הרכיבים שזוהו מעובדים לאחר מכן באמצעות מידול תפיסתי מבוסס CAM02-UCS לצורך חילוץ היררכיה ופריסה. לאחר מכן מיושמת אופטימיזציה קוגניטיבית באמצעות עקרונות גשטאלט, חוק פיטס (Fitts’ law), חוק היק (Hick’s law) והתאמות מבוססות קשב. החיצים מציינים את זרימת הנתונים בין המודולים, מה שמוביל לפלט הסופי של אב-טיפוס ממשק המשתמש. אנא לחץ כאן כדי לצפות בגרסה גדולה יותר של איור זה.

סקירה כללית של המסגרת

איור 1 ממחיש את זרימת העבודה מקצה לקצה של מסגרת אב-הטיפוס האוטומטית המוצעת לממשק משתמש (UI), ההופכת צילום מסך גולמי של ממשק משתמש לאב-טיפוס מזוקק קוגניטיבית. התהליך מתחיל בתמונת ממשק המשתמש הקלטית, המועברת למודול זיהוי הרכיבים המבוסס על Faster R-CNN. מודול זה מזהה אלמנטים של ממשק כגון כפתורים, סמלים, שדות טקסט ומכלי קיבול (containers), ומפיק את תיבות התחום (bounding boxes) ותוויות הסיווג המתאימות להם. הרכיבים שזוהו מעובדים לאחר מכן בשלב חילוץ ההיררכיה והפריסה. על בסיס יחסים מרחביים ותבניות מבניות, המערכת בונה עץ פריסה היררכי המשקף את האופן שבו משתמשים תופסים באופן טבעי את ארגון המסך. ייצוג זה לוכד קיבוץ ויזואלי ותלויות מבניות בין אלמנטים של ממשק המשתמש. הפריסה שחולצה עוברת לאחר מכן זיקוק באמצעות אופטימיזציה קוגניטיבית על ידי יישום עקרונות עיצוב ממוקד-משתמש. אלו כוללים קיבוץ Gestalt לצורך צבירה ויזואלית, חוק פיטס (Fitts’ law) לאופטימיזציה של גודל מטרות המגע ונגישות, חוק היק (Hick’s law) להפחתת מורכבות קבלת ההחלטות, וריווח מבוסס-קשב לשיפור ההיררכיה הוויזואלית. כתוצאה מכך, הפריסה הופכת לאינטואיטיבית, קריאה ויעילה יותר לאינטראקציית משתמש. לבסוף, הפריסה הממוטבת משולבת עם מידול צבע תפיסתי כדי להפיק אב-טיפוס קוהרנטי של ממשק המשתמש. הממשק המתקבל הוא מדויק מבנית, הרמוני ויזואלית ותואם לציפיות שמישות אנושיות.

המסגרת הוטמעה באמצעות PyTorch 2.0 על גבי Ubuntu 22.04. הניסויים נערכו במערכת המצוידת ב-GPU מדגם NVIDIA RTX 4090 (עם 24 GB VRAM). מודל ה-Faster R-CNN השתמש ב-backbone מסוג ResNet-50 שאומן מראש על מאגר הנתונים ImageNet. האימון בוצע באמצעות אופטימייזר stochastic gradient descent (SGD) עם קצב למידה של 0.001, גודל אצווה (batch size) של 16, ועד 60 תקופות (epochs). הוחל מנגנון עצירה מוקדמת (early stopping) למניעת overfitting באמצעות סט תיקוף שהכיל 20% מהנתונים. למרות שהאימון בוצע עבור עד 60 תקופות, התכנסות הושגה בדרך כלל מוקדם יותר באמצעות עצירה מוקדמת המבוססת על הפסד התיקוף (validation loss). ערכי ה-Momentum וה-weight decay נקבעו ל-0.9 ו-0.0005, בהתאמה. הרחבת הנתונים (Data augmentation) כללה נורמליזציה, היפוך אופקי אקראי, וכן חיתוך ושינוי גודל אקראיים.

הכנת מערך הנתונים

כדי לתמוך במסגרת המוצעת לאב-טיפוס אוטומטי של ממשקי משתמש (UI), נעשה שימוש בשלוש מערכי נתונים משלימים: ENRICO²⁹, RICO³⁰, ומערך נתוני צבעי ה-UI של Guo¹. מערך הנתונים RICO מכיל 66,261 מסכי UI של Android שנאספו מ-9,700 אפליקציות, ומספק גיוון רחב לצורך זיהוי רכיבים והפקת פריסות היררכיות. ENRICO כולל 1,464 צילומי מסך איכותיים של UI שסווגו ידנית ל-20 תבניות עיצוב, מה שמאפשר הכללה משופרת עבור הסקה מבנית ומידול עקביות של הפריסה. מערך נתוני צבעי ה-UI של Guo מורכב מ-128 תמונות UI נבחרות עם ערכות נושאי צבע מסומנות, המשמשות למידול צבע תפיסתי והערכת פלטות צבעים. עם זאת, בשל גודלו הקטן יחסית, מערך נתונים זה עלול להכניס שונות מסוימת למאפייני הפריסה. לצורך מחקר זה, הוכן מערך נתונים משולב של 5,128 מסכים לאימון ולהערכה. באופן ספציפי, כ-4,000 תמונות מ-RICO שימשו לאימון מודל Faster R-CNN לזיהוי רכיבים, 1,000 תמונות מ-ENRICO שימשו ללמידת תבניות פריסה ומידול עקביות מבנית, ו-128 תמונות ממערך הנתונים של Guo שימשו למשימות הערכת צבע. כל התמונות נורמלו לרזולוציה של 480 × 800 pixels, הומרו למרחב צבע sRGB אחיד, וסומנו מחדש עם תיבות חסם (bounding boxes) סטנדרטיות ומטא-נתונים היררכיים כדי להבטיח תאימות בין מערכי הנתונים. סקירה כללית של מערכי הנתונים ששימשו במחקר זה מופיעה בTable 2. מערך הנתונים RICO תומך בזיהוי רחב היקף של רכיבי UI ובניתוח מבני, בעוד ש-ENRICO משפר את יכולתו של המודל לזהות תבניות פריסה ולאכוף עקביות בין מסכים. מערך נתוני צבעי ה-UI של Guo, למרות גודלו הקטן, ממלא תפקיד קריטי בהערכת הרמוניה צבעונית תפיסית ומידול ניגודיות. יחד, מערכי נתונים אלו מספקים בסיס מקיף ומאוזן לאימון, תיקוף והערכה של המסגרת המוצעת לאב-טיפוס אוטומטי של UI.

סט נתונים	סה"כ תמונות זמינות	תמונות ששימשו במחקר	מטרה במסגרת המוצעת
RICO Dataset30	66,261	4,000	זיהוי רכיבי UI, הפקת פריסה מבנית
ENRICO Dataset29	1,464	1,000	למידת תבניות עיצוב, מידול עקביות פריסה
Guo’s UI Color Dataset1	128	128	הפקת ערכת צבעים, הערכת צבע תפיסתית
סה"כ משולב	67,853	5,128	סט נתונים מקיף לזיהוי, פריסה ומידול צבע

טבלה 2: סיכום של מאגרי הנתונים ששימשו במסגרת המוצעת. הטבלה מציגה את מאגרי הנתונים ששימשו לאימון ולהערכה, כולל מאגרי הנתונים RICO, ENRICO ו-Guo’s UI Color. היא מדווחת על מספר התמונות הכולל הזמין, תת-הקבוצה ששימשה במחקר זה, והתפקיד הספציפי של כל מאגר נתונים בזיהוי רכיבים, מידול פריסה וניתוח צבע תפיסתי במסגרת המוצעת.

אסטרטגיית דגימה מרובדת יושמה כדי לשמר את הגיוון ברכיבי UI, במבני פריסה ובפיזור הצבעים במאגרי הנתונים RICO, ENRICO ו-Guo. מאגר הנתונים פוצל לתתי-קבוצות של אימון (70%), תיקוף (15%) ובדיקה (15%) באמצעות דגימה מרובדת. התמונות נורמלו באמצעות ממוצע (0.485, 0.456, ו-0.406) וסטיית תקן (0.229, 0.224, ו-0.225). הרחבת נתונים כללה היפוך אופקי אקראי (הסתברות = 0.5) וקיטוע אקראי (טווח קנה מידה: 0.8–1.0), ולאחריהם שינוי גודל ל-224 × 224 פיקסלים שיושם במהלך האימון.

הערת רכיבים ועיבוד מקדמי

מאגרי הנתונים RICO, ENRICO ומערכת הנתונים של Guo עבור צבעי UI תומכים יחד בשלושת הרכיבים התפקודיים המרכזיים של מסגרת עבודת אב-הטיפוס האוטומטית של UI המוצעת: זיהוי רכיבים, מידול פריסה ואופטימיזציה תפיסתית של צבעים. מאגר הנתונים RICO מכיל אוסף רחב של למעלה מ-66,000 מסכי UI למובייל ומשמש בעיקר לאימון מודול זיהוי הרכיבים. הגיוון שבו מאפשר למודל Faster R-CNN ללמוד ייצוגים חסונים של אלמנטי UI נפוצים כגון כפתורים, תמונות ושדות טקסט במגוון רחב של יישומים. דבר זה מבטיח זיהוי ומיקום מדויקים של רכיבי UI תחת תנאי עיצוב משתנים. מאגר הנתונים ENRICO מספק מסכי UI באיכות גבוהה עם תיוגי תבניות ללמידת קשרים מבניים ותבניות פריסה. הוא מאפשר למערכת להבין קשרים בין-רכיביים, ארגון היררכי ותבניות עיצוב נפוצות. מאגר נתונים זה ממלא תפקיד קריטי במידול מבני פריסה ואכיפת עקביות בין מסכים, מה שמאפשר למסגרת העבודה לייצר פריסות התואמות למוסכמות עיצוב מבוססות. לעומת זאת, מאגר הנתונים של Guo עבור צבעי UI משמש ספציפית למידול צבע תפיסתי וקוגניטיבי. בשונה מ-RICO ו-ENRICO, המתמקדים בהיבטים מבניים, מאגר זה מכיל תמונות UI נבחרות עם ערכות נושאי צבע מתויגות. תיוגים אלו משמשים לאימון מודולים של חילוץ צבעים והערכת הרמוניה. באמצעות מיפוי קשרי צבע למרחבי צבע תפיסתיים כגון CAM02-UCS, מסגרת העבודה לומדת לייצר פלטות צבעים המאזנות בין ניגודיות, נגישות וקוהרנטיות אסתטית. יחד, מאגרי נתונים אלו יוצרים צינור עיבוד משולב: RICO תומך בזיהוי רכיבים, ENRICO מאפשר הבנה של תבניות פריסה ועקביות מבנית, ומאגר הנתונים של Guo מקדם אופטימיזציה תפיסתית של צבעים. שילוב זה מבטיח שאבות-הטיפוס של ה-UI שנוצרו הם מדויקים מבנית, הרמוניים ויזואלית ואופטימליים מבחינה קוגניטיבית.

נורמליזציה בוצעה באמצעות ממוצע של [0.485, 0.456, 0.406] וסטיית תקן של [0.229, 0.224, 0.225]. טכניקות של הגברת נתונים (data augmentation), הכוללות חיתוך אקראי, היפוך אופקי וסיבוב, יושמו כדי לשפר את יכולת ההכללה של המודל. בנוסף, ערכי הפיקסלים הותאמו לטווח [0, 1], וכל התמונות שונו לרזולוציה של 480 × 800 פיקסלים כדי להבטיח עקביות בין מערכי הנתונים. תמונות שגודלן שונה ל-224 × 224 פיקסלים משמשות להגברה במהלך האימון, בעוד שהרזולוציה המקורית של 480 × 800 פיקסלים נשמרת לצורך ניתוח הפריסה (layout analysis). תיבות חסם (bounding boxes) הותאמו כדי לסנן הערות לא רלוונטיות באמצעות ספי סף שהוגדרו מראש. כדי להשיג אחידות בין מערכי הנתונים, כל אלמנטי ממשק המשתמש (UI) סומנו ידנית באמצעות כלי הסימון LabelImg. סכימה שהוגדרה מראש נקבעה לפני הסימון כדי לסווג את אלמנטי ה-UI לקטגוריות כגון כפתור, טקסט, תמונה, אייקון ומכל (container). לצורך ייצוג תיבות החסם, יושמה מערכת קואורדינטות אחידה, ומידע היררכי נבנה על בסיס יחסי מרחב בין האלמנטים והקשרים בין הורים לילדים בתוך עץ הפריסה. בנוסף, נקבעו הנחיות כדי להבטיח סימון עקבי של אלמנטים, טיפול נכון ברכיבים חופפים ואכיפת ספי גודל מינימליים במערכי הנתונים RICO, ENRICO ו-Guo.

ניסוחים מתמטיים מפורטים לאימון זיהוי רכיבים ולהפקת תבנית פריסה מסופקים בקובץ נלווה 1.

מודל ה-Faster R-CNN אומן באמצעות SGD עם מומנטום של 0.9 ו-weight decay של 0.0005. קצב הלמידה הראשוני נקבע ל-0.001 והותאם באמצעות מדיניות step decay בהתבסס על ביצועי התיקוף. האימון בוצע למשך עד 60 epochs עם batch size של 16. הוחלה עצירה מוקדמת (early stopping) כדי למנוע overfitting, תוך שימוש במערכת תיקוף הכוללת 20% מנתוני האימון.

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

נוסחאות מפורטות למידול הרמוניה צבעונית ומטרת אופטימיזציה מאוחדת מופיעות בקובץ משלים 1.

פונקציית מטרה זו מגדירה באופן מתמטי את השילוב של זיהוי מבני, הסקת מסקנות לגבי פריסה ומודל צבע תפיסתי, ובכך מבטיחה שכל מרכיבי המסגרת יתרמו במשותף ליצירת אבות-טיפוס של ממשקי משתמש (UI) קוהרנטיים וממוקדי-משתמש. האופטימיזציה מבוצעת באופן מודולרי עבור כל מרכיב במסגרת. SGD משמש לאימון מודול זיהוי הרכיבים, בעוד שאופטימייזר Adam משמש במהלך האופטימיזציה המשותפת של פונקציית המטרה המאוחדת. פונקציית המטרה המשולבת משמשת להנחיית ביצועי המערכת הכוללים. בשלבי האופטימיזציה המשותפת, פונקציית המטרה ממוזערת באמצעות אופטימייזר Adam עם קצב למידה של 0.001 וגודל אצווה (batch size) של 16. האימון מבוצע עד ל-60 epochs, כאשר מיושם עצירה מוקדמת (early stopping) כאשר השינוי בהפסד התיקוף (validation loss) נמוך מ-10⁻⁴ במשך חמישה epochs רצופים.

זיהוי רכיבים באמצעות Faster R-CNN

המסגרת המוצעת משתמשת ב-Faster R-CNN לזיהוי אוטומטי של רכיבי ממשק משתמש (UI), כולל כפתורים, אייקונים, שדות טקסט, תמונות ומכילות (containers). Faster R-CNN מתאים למשימה זו מכיוון שהוא משלב דיוק גבוה בזיהוי אובייקטים עם יצירה יעילה של הצעות לאזורים (region proposal generation), דבר החיוני לטיפול בפריסות UI מורכבות המכילות אלמנטים צפופים. המודל משתמש ב-backbone מסוג ResNet-50 שאומן מראש על מאגר הנתונים ImageNet כדי להפיק מפות מאפיינים קונבולוציוניות מכל מסך UI. במהלך האימון, השכבות המוקדמות הוקפאו כדי לשמר מאפיינים חזותיים כלליים, בעוד שהשכבות הגבוהות יותר (conv4_x ו-conv5_x) עברו כוונון עדין (fine-tuning) לזיהוי רכיבי UI ספציפיים. מפות מאפיינים אלו לוכדות מבנים חזותיים, קצוות, טקסטורות וגבולות של רכיבים. במהלך הזיהוי, רשת הצעות האזורים (RPN) מזהה אזורים מועמדים (anchors) שסבירותם גבוהה להכיל רכיבי UI. ה-anchors מוגדרים באמצעות קני מידה מרובים (128, 256 ו-512) ויחסי גובה-רוחב (1:1, 1:2 ו-2:1) כדי להתאים לאלמנטי UI בגדלים משתנים. במהלך האימון, anchors עם ערך intersection-over-union (IoU) הגבוה מ-0.7 ביחס לתיבות האמת (ground truth boxes) מסומנים כחיוביים, בעוד שאלו עם IoU נמוך מ-0.3 מסומנים כשליליים; anchors עם ערכי IoU ביניים נזנחים. לכל anchor מוקצית הסתברות המצביעה על נוכחות של רכיב. לאחר מכן מיושם דיכוי מקסימום לא (NMS) כדי להסיר הצעות כפולות וחופפות, מה שמבטיח לוקליזציה יעילה של אלמנטי UI משמעותיים גם בממשקים עמוסים. לאחר יצירת אזורי המועמדים, כל הצעה מסווגת לקטגוריות רכיבים שהוגדרו מראש, וקואורדינטות תיבת התחום (bounding-box) שלה מעודכנות. פעולת ROI Align מחלצת ייצוגי מאפיינים בגודל קבוע עבור כל הצעה, אשר מעובדים לאחר מכן על ידי שכבות מחוברות במלואן (fully connected layers) לסיווג ורגרסיה. ענף הסיווג מוציא הסתברויות למחלקה, בעוד שענף הרגרסיה חוזה קואורדינטות מדויקות של תיבת התחום. מודל ה-Faster R-CNN כולו מאומן מקצה לקצה על ידי אופטימיזציה של פונקציית הפסד משותפת המשלבת את הפסד ה-RPN עם הפסד הזיהוי הסופי. דבר זה מאפשר למערכת לא רק לזהות במדויק רכיבי UI אלא גם לבצע להם לוקליזציה מדויקת במבני ממשק מגוונים. תיאור מפורט של זיהוי רכיבים באמצעות Faster R-CNN, כולל שלב ה-RPN, סיווג ROI, עידון תיבת התחום ומטרת האופטימיזציה הסופית, מופיע ב-Supplementary File 1.

אלגוריתם S1 מספק את זרימת העבודה המפורטת לגילוי רכיבים והפקה מבנית (קובץ משלים 1). הוא מתאר את התהליך המלא של גילוי אוטומטי של רכיבי ממשק משתמש (UI) והפקה מבנית מתמונת מסך גולמית. תמונת הקלט עוברת תחילה עיבוד מקדים ומועברת דרך רשת CNN (backbone) כדי להפיק מאפיינים חזותיים עמוקים. מאפיינים אלו משמשים את ה-RPN ליצירת תיבות חסם (bounding boxes) מועמדות, אשר עוברות לאחר מכן עידון באמצעות סיווג ורגרסיה. NMS מסיר גילויים עודפים כדי להבטיח מיקום מדויק. לאחר הגילוי, הרכיבים מקובצים על בסיס קרבה מרחבית באמצעות צבירה מרחבית מבוססת צפיפות של יישומים עם רעש (DBSCAN). שלב צבירה זה מאפשר בנייה של עץ UI היררכי הלוכד קשרי הורה-צאצא וקיבוצים לוגיים בין רכיבים. ייצוג היררכי זה מהווה את הבסיס לניתוח הפריסה והבנת ה-UI בהמשך. איור 2 ממחיש את תהליך גילוי הרכיבים באמצעות Faster R-CNN במסך UI של מכשיר נייד. ממשק הקלט (שמאל) מכיל אלמנטים של UI כגון כפתורים ובלוקים של טקסט, אשר נסגרים באופן אוטומטי בתוך תיבות חסם. אזורים אלו, שזוהו, מסווגים לאחר מכן לקטגוריות רכיבים (למשל, Button ו-Text), כפי שמוצג על ידי חיבורים מסומנים. מודול הגילוי Faster R-CNN (ימין) מעדן את קואורדינטות תיבות החסם, מקצה תוויות סמנטיות, ומוציא מידע מובנה ברמת הרכיב. שלב זה משמש כבסיס קריטי לתהליכים המשכיים, כולל הפקת פריסה, אופטימיזציה קוגניטיבית ויצירת אב-טיפוס של UI, על ידי אספקת ייצוגים מדויקים בעלי משמעות סמנטית של רכיבי UI.

איור 2. זיהוי רכיבים של אלמנטים בממשק משתמש באמצעות Faster R-CNN. האיור מדגים את זיהוי רכיבי ממשק המשתמש מצילום מסך של ממשק קלט. אזורי עניין (Regions of interest) מזוהים באמצעות תיבות חסם (bounding boxes), ואלמנטים כגון כפתורים ושדות טקסט מסווגים באמצעות Faster R-CNN. החיצים מצביעים על המיפוי של הרכיבים שזוהו אל תוויות הסמנטיקה המתאימות להם. אנא לחצו כאן כדי לצפות בגרסה גדולה יותר של איור זה.

הפקה של תבנית פריסה ומידול היררכי

בעקבות זיהוי רכיבים באמצעות Faster R-CNN, כל אלמנט בממשק המשתמש (UI) מיוצג על ידי תיבת חסם (bounding box). עם זאת, תיבות חסם אלו לבדן אינן מעבירות את האופן שבו האלמנטים מאורגנים מבנית בתוך הממשק, למשל, אילו אלמנטים שייכים לכותרות, לסרגלי ניווט או לאזורי תוכן מקובצים. כדי להתגבר על מגבלה זו, הרכיבים שזוהו הופכים לעץ UI לוגי, שבו כל רכיב נחשב לצומת (node) ורכיבים הקשורים פונקציונלית או ויזואלית מקובצים תחת צמתי אב משותפים. כדי לזהות קבוצות פריסה משמעותיות, מיושמות טכניקות קיבץ (clustering) כגון DBSCAN או קיבץ היררכי אגלומרטיבי. שיטות אלו מנתחות קרבה מרחבית ותבניות יישור בין רכיבים כדי לזהות קשרים בין אלמנטים בממשק המשתמש. באופן המקביל לפרקטיקות עיצוב אנושיות, המערכת לומדת לזהות תבניות מבניות נפוצות כגון כותרות עליונות (headers), כותרות תחתיות (footers), רשתות (grids) ובלוקי תוכן. לאחר קביעת הקיבוץ, מנותחים מאפיינים מבניים נוספים — כולל יישור, ארגון רשתי וסדר קריאה — כדי לבנות ייצוג פריסה מקיף. לדוגמה, רכיבים המיושרים בעמודות בעرض שווה עשויים להעיד על פריסה מבוססת כרטיסים, בעוד שאלמנטים המערמים אנכית עשויים להעיד על ממשק מבוסס טפסים או פיד. על ידי שילוב של קיבץ, הסקה מרחבית וכללי יישור, המסגרת בונה עץ UI היררכי הלוכד הן קיבוץ ויזואלי והן קשרים פונקציונליים. ייצוג היררכי זה משמש כבסיס לשיפור הפריסה בהמשך ולמידול עקביות רב-מסכי, מה שמאפשר למערכת לייצר עיצובי ממשק מובנים, קוהרנטיים וממוקדי-משתמש.

נוסחאות מפורטות עבור מרחק מרחבי ודמיון יישור מוצגות בקובץ משלים 1.

קיבץ (Clustering) עבור קיבוץ פריסות (DBSCAN)

לזיהוי קבוצות פריסה, מיושם אלגוריתם DBSCAN. DBSCAN משתמש בשני פרמטרים: (1) ε = המרחק המקסימלי בין רכיבים שכנים ו-(2) = המספר המינימלי של רכיבים הדרושים ליצירת צבר (cluster). עבור ניתוח זה, פרמטרי ה-DBSCAN נבחרו באופן אמפירי בהתבסס על רזולוציית ה-UI הנורמלית (480 × 800 pixels). פרמטר מרחק השכנות נקבע ל-ε = 50 pixels כדי ללכוד קרבה מרחבית בין רכיבי UI סמוכים. המספר המינימלי של נקודות הדרוש ליצירת צבר נקבע ל-MinPts = 3 כדי למנוע היווצרות של קבוצות לא משמעותיות או שגויות של רכיבי UI.

הניסוח המפורט לבניית עץ ממשק המשתמש (UI) הלוגי מופיע בקובץ משלים 1.

מידול צבע תפיסתי באמצעות CAM02-UCS

מידול צבע תפיסתי מבטיח שהצבעים המשמשים בממשק המשתמש (UI) הנוצר יהיו הרמוניים, קריאים ויעילים מבחינה קוגניטיבית. צבעים דומיננטיים מופקים ממקורות קלט, כגון תמונות של ממשקי משתמש, באמצעות טכניקות של קיבוב (clustering). באופן ספציפי, מיושם קיבוב K-means עם אתחול K-means++ למשך 300 איטרציות כדי לקבל פלטות צבעים מייצגות. עם זאת, מרחב הצבע RGB אינו משקף במדויק את התפיסה החזותית האנושית, מה שגורם לצבעים הדומים מספרית להיראות שונים תפיסית. כדי לטפל במגבלה זו, כל הצבעים שהופקו מומרים ל-CAM02-UCS, שהוא אחיד תפיסית. במרחב זה, מרחקים שווים תואמים להבדלי צבע תפיסתיים שווים, מה שהופך אותו למתאים למידול הרמוניה וניגודיות של צבעים. לאחר המיפוי ל-CAM02-UCS, הבדלי צבע תפיסתיים מחושבים באמצעות מרחק אוקלידי, מה שמאפשר למערכת לכמת ניגודיות, הרמוניה ושונות בין צבעים. צבעים דומים מדי מופרדים כדי לשפר את הקריאות, בעוד שצבעים בעלי ניגודיות מוגזמת ממתנים כדי למנוע אי-נוחות חזותית. הפלטה הנוצרת עומדת גם בתקני נגישות כגון WCAG AA ו-AAA, ומבטיחה ניגודיות מספקת בין אלמנטים של קדמה ורקע. יתרה מכך, הרמונית הצבעים נאכפת על ידי הגבלת הקשרים בפלטה לסכמות משלימות, אנלוגיות או טריאדיות, בהתאם לנושא המיועד של ממשק המשתמש. דבר זה מבטיח שפלטת הצבעים המתוצאה תהיה לא רק מושכת ויזואלית, אלא גם נגישה פונקציונלית ואופטימלית מבחינה קוגניטיבית. כדי לזקק את הפלטה עוד יותר, מיושם תהליך אופטימיזציה תחת מגבלות של דמיון תפיסתי, ניגודיות, הרמוניה ועקביות מותג. נבחר צבע ראשי (למשל, מזהות המותג), וצבעים משניים מותאמים במונחים של לומיננסה וכרומה כדי לשמר את ההיררכיה החזותית. מנגנון הערכה מבוסס כללים בוחן פלטות מועמדות על בסיס מרחקים תפיסתיים ומדדי נגישות, תוך מזעור המאמץ הקוגניטיבי ושמירה על איזון אסתטי. כתוצאה מכך, המסגרת מייצרת סכמות צבעים לממשק משתמש המפגינות קוהרנטיות, קריאות ועקביות תפיסית ברמה מקצועית.

ביטויים מתמטיים מפורטים עבור מידול צבע תפיסתי המבוסס על CAM02-UCS מסופקים בקובץ משלים 1.

אלגוריתם S2 (קובץ משלים 1) מתאר את תזרים העבודה להפקה ואופטימיזציה של צבעים תפיסתיים המבוססים על CAM02-UCS תחת מגבלות של הרמוניה ונגישות. בשלב ראשון, צבעים דומיננטיים מופקים מתמונת הקלט ועוברים טרנספורמציה ל-CAM02-UCS כדי להבטיח שהבדלי הצבעים יתאימו לתפיסה האנושית. לאחר מכן, מרחקים תפיסתיים בין הצבעים מחושבים ומוגבלים בטווחים שהוגדרו מראש כדי לשמור על בהירות והרמוניה כאחד. בהמשך, הנגישות נאכפת באמצעות הערכת יחסי ניגודיות של לומיננס (luminance) בהתאם להנחיות WCAG. הפלטה הסופית מתקבלת על ידי אופטימיזציה של פונקציית מטרה משולבת המאזנת בין מרווחים תפיסתיים, דרישות ניגודיות ומגבלות הרמוניה של צבעים. דבר זה מבטיח שסכמות הצבעים של ממשק המשתמש (UI) שנוצרו אינן רק מושכות ויזואלית, אלא גם קריאות, נגישות ועקביות מבחינה תפיסית.

אופטימיזציה של עיצוב קוגניטיבי

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

יעד אופטימיזציה קוגניטיבית משולב

הביטוי המתמטי ליעד האופטימיזציה הקוגניטיבית המשולבת מופיע בקובץ משלים 1. מקדמים המייצגים את החשיבות של קיבוץ חזותי, יעילות אינטראקציה ומורכבות קבלת החלטות מסומנים על ידי alpha, beta ו-gamma, בהתאמה. במחקר זה, ערכיהם של alpha, beta ו-gamma נקבעו באופן אמפירי באמצעות מערך נתוני התיקוף. עבור הניסוי הנוכחי, המקדמים נקבעו באופן הבא: α = 0.5, β = 0.3 ו-γ = 0.2. תצורה זו מספקת איזון יעיל בין קיבוץ חזותי, יעילות אינטראקציה ופשטות בקבלת החלטות.

עקביות רב-מסכית ויצירת ממשק משתמש (UI)

מידול עקביות רב-מסכיים מבטיח כי מסכים שונים בתוך אפליקציה חולקים זהות חזותית, פריסה מבנית ותבנית אינטראקציה קוהרנטיות. כאשר משתמשים מנווטים בין מסכים, הם מפתחים ציפיות לגבי מיקום אלמנטים, טיפוגרפיה, ריווח והיררכיה חזותית. כדי לענות על ציפיות אלו, המערכת מנתחת תבניות חוצות-מסכים באמצעות תבניות נגזרות ממאגרי הנתונים RICO ו-ENRICO. תבניות אלו לוכדות מבני UI נפוצים כגון פריסות של דף בית–פירוט, תבניות של רשימה–פירוט, טפסים רב-שלביים ותזרימי לוחות בקרה (dashboards). באמצעות השוואת מיקום רכיבים והתנהגות קיבוץ, המערכת בונה פרופיל מבני חוצה-מסכים המזהה אילו אלמנטים צריכים להישאר עקביים ואילו עשויים להשתנות. לאחר זיהוי התבניות המבניות, המסגרת אוכפת עקביות בסולמות טיפוגרפיים, יחסי ריווח, פריסות רשת ועגינות ניווט. לדוגמה, סרגלי כותרת שומרים על גובה עקבי, כפתורי פעולה ראשיים שומרים על גודל ויישור אחידים, ובלוקים של תוכן עוקבים אחר סדר חזותי צפוי. דבר זה מושג באמצעות תהליך רגולריזציה של הפריסה המעריך כל מסך אל מול אילוצים מבניים גלובליים. אם מסך חורג מהתבניות שנלמדו — כגון ריווח פנימי (padding) לא עקבי או כותרות שאינן מיושרות — המערכת מתאימה אוטומטית את הפריסה כדי להשיב את הקוהרנטיות. תיקונים אלו מסייעים בהבטחת UX רציף ומפחיתים עלויות של מיתוג קוגניטיבי בין מסכים. המסגרת מנתחת בנוסף את גרף הניווט בין המסכים כדי לשמור על עקביות בזרימת האינטראקציה. תבניות ניווט נפוצות, כולל מעברים קדימה/אחורה, ניווט באמצעות לשוניות ותהליכי עבודה רב-שלביים, מזוהות ונאכפות. כל מעבר עובר תיקוף כדי להבטיח הלימה למודל המנטלי של המשתמש, ובכך לשפר את שמישות המערכת ולהפחית בלבול. כתוצאה מכך, מודל העקביות הרב-מסכיים ממזער רעש חזותי, מגביר את תחושת המוכרות ומקדם חווית אינטראקציה מאוחדת.

ניסוחים מתמטיים מפורטים עבור עקביות רב-מסכית ויצירת ממשק משתמש (UI) מסופקים בקובץ משלים 1.

לבסוף, מנוע הרינדור מייצר פלטים ויזואליים בפורמטים כגון wireframes ב-SVG, אב-טיפוסים ב-HTML/CSS, או דגמי ממשק משתמש (UI mockups) מבוססי פיקסלים. מסכי הממשק המתקבלים מציגים סדר קריאה נכון, קשרי צבעים הרמוניים, יישור רשת מדויק והיררכיה ויזואלית עקבית לאורך מספר מסכים.

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

תוצאות

מסגרת אב-הטיפוס האוטומטית של ממשקי משתמש (UI) המוצעת הוערכה באמצעות מערך נתונים משולב של 5,128 מסכי UI משלושה מקורות: 4,000 תמונות RICO, 1,000 מסכי ENRICO, ו-128 דגימות UI עם הערות צבע מתוך מאגר הנתונים UI Color Dataset של Guo. מערך נתונים מעורב זה מספק מדד השוואה מאוזן להערכת דיוק זיהוי הרכיבים, בהירות המבנה של הפריסה, עקביות בין מסכים מרובים והרמוניה צבעונית תפיסית.

תוצאות ניסיוניות מדגימות כי מודל הזיהוי המבוסס על Faster R-CNN משיג דיוק של 92.4% בזיהוי רכיבים ומכלל באופן יעיל על פני סגנונות שונים של ממשקי משתמש (UI) למובייל. יתרה מכך, שילוב של הערות תבניות ENRICO משפר את הסקת המסקנות לגבי הפריסה (layout reasoning), מה שמוביל לעלייה של 18.7% בבהירות הפריסה ולשימור משופר של סדר הקריאה. בניסויי הערכת צבע, מודול מידול הצבע המונחה על ידי CAM02-UCS מייצר פלטות הרמוניות יותר ב-24.5%, על פי הערכות של מעצבים, ומשיג אחידות תפיסתית גבוהה יותר בהשוואה לשיטות מסורתיות ליצירת פלטות המבוססות על RGB ו-LAB. בנוסף, מידול עקביות רב-מסכי משיג שיפור של 28% ביישור בין מסכים ובconsistency של הטיפוגרפיה. מחקרי משתמשים שכללו 30 משתתפים מדגימים הפחתה של 31% בעומס הקוגניטיבי הנתפס בעת אינטראקציה עם אבות-טיפוס שהופקו על ידי המערכת המוצעת. יחד, תוצאות אלו מעידות כי שילוב של זיהוי רכיבים, מידול צבע תפיסתי ואופטימיזציה קוגניטיבית מייצר אבות-טיפוס של UI שאינם רק מדויקים מבנית, אלא גם קוהרנטיים ויזואלית ויעילים קוגניטיבית. טבלה 3 מדגישה את סביבת הסימולציה וההגדרות הטכניות ששימשו להערכת מסגרת בניית אבות-טיפוס ה-UI המוצעת. הליכי האימון העתירים במשאבים חישוביים של Faster R-CNN ומודולי עקביות הפריסה נתמכו על ידי GPU מסוג NVIDIA RTX 4090 בעל ביצועים גבוהים. כל הניסויים נערכו בסביבת Ubuntu 22.04 תוך שימוש ב-PyTorch 2.0 עבור מימוש הלמידה העמוקה.

פרמטר	תצורה
חומרה	מעבד גרפי NVIDIA RTX 4090 GPU (24 GB), מעבד Intel i9, זיכרון RAM בנפח 64 GB
מערכת הפעלה	Ubuntu 22.04 LTS
מסגרת למידה עמוקה	PyTorch 2.0
Backbone של Faster R-CNN	ResNet-50 + FPN
רזולוציית תמונה	480 × 800 (נורמל על פני כל מערכי הנתונים)
גודל אצווה לאימון	8
אופטימיזטור	AdamW (LR = 1e−4, Weight Decay = 0.01)
עידנים	40
מרחב מידול צבעים	CAM02-UCS
הקבצה להפקת פלטה	K-means (k = 5)
קיבץ פריסה (Layout Clustering)	DBSCAN (ε = 20, min_samples = 3)

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

ארכיטקטורת ה-Faster R-CNN משתמשת ב-backbone מסוג ResNet-50 עם FPN כדי לזהות מגוון רחב של רכיבי UI בעלי רזולוציה גבוהה. כל תמונות ה-UI מותאמות באופן אחיד לגודל של 480 × 800 pixels לפני העיבוד. האימון מבוצע לאורך 60 epochs באמצעות אופטימייזר SGD, עם batch size של 16 כדי להבטיח התכנסות יציבה. מחולל פלטת הצבעים משתמש ב-CAM02-UCS עם מקבצי K-means, בעוד ש-DBSCAN משמש למקבץ פריסה מבנית. הגדרות טכניות אלו מבטיחות שתוצאות ה-UI הנוצרות יהיו ניתנות לשחזור, יציבות ובנאמנות גבוהה (high-fidelity). כדי לספק הערכה מקיפה של מסגרת אב-הטיפוס האוטומטית המוצעת ל-UI, נעשה שימוש בארבע קטגוריות של מדדי הערכה:

i) ביצועי זיהוי הרכיבים, שנותחו באמצעות דיוק (precision), רגישות (recall), מדד F1-score, חיתוך מעל איחוד (IoU) וממוצע הדיוק הממוצע (mAP), המכמתים את דיוק מודל ה-Faster R-CNN בזיהוי רכיבי ממשק משתמש (UI) במאגרי הנתונים RICO ו-ENRICO;

ii) בהירות הפריסה ועקביות מבנית, הנמדדות באמצעות שגיאת יישור (AE), דיוק הקיבוץ, נכונות סדר הקריאה ומדדי עקביות בין מסכים הנגזרים מאילוצי תבנית עיצוב;

iii) איכות צבע תפיסתית, שהוערכה באמצעות מרחק תפיסתי של CAM02-UCS (ΔE_UCS), יחסי ניגודיות של WCAG 2.1, מדד גיוון וציוני הרמוניה צבעונית בהשראת מסגרת הערכת צבעי ממשק משתמש (UI) של Guo;

iv) מדדי יעילות קוגניטיבית ממוקדי-משתמש, הכוללים עומס קוגניטיבי שנמדד באמצעות מדד עומס המשימה של נאס"א (NASA-TLX), דירוגי קוהרנטיות אסתטית ויעילות השלמת משימות.

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

מדדי זיהוי רכיבים

דיוק (Precision) מתאר את רמת הדייקנות של המודל בחיזוי רכיבי ממשק משתמש (UI) ללא יצירת חיוביים שגויים (false positives). דיוק גבוה מעיד על כך שמרבית תיבות התחומה החזויות תואמות לרכיבי UI תקפים. רגישות (Recall) מודדת את יכולתו של המודל לזהות את כל רכיבי ה-UI הרלוונטיים על המסך. רגישות גבוהה מעידה על כך שהמודל מזהה בהצלחה את מרבית הרכיבים המופיעים בנתוני האמת (ground-truth). מדד F1, המוגדר כממוצע הרמוני של הדיוק והרגישות, מספק הערכה מאוזנת והוא שימושי במיוחד כאשר רכיבי ה-UI מחולקים באופן לא שווה במאגרי הנתונים.

מדד ה-IoU מודד את רמת החפיפה בין תיבת החסם החזויה לבין תיבת החסם של ה-ground truth. במשימות זיהוי אובייקטים, נהוג להשתמש בספי IoU של 0.5 ו-0.75 כדי לייצג תנאי הערכה מתונים ומחמירים. mAP מסכם את ביצועי הזיהוי על פני מספר ספי IoU. מדד ה-mAP@0.5:0.95 מספק הערכה חסונה יותר על ידי מיצוע הדיוק (precision) על פני ספים מ-0.5 ועד 0.95 בצעדים של 0.05, ולכן הוא מקובל באופן נרחב כבנצ'מרק סטנדרטי לזיהוי אובייקטים.

תוצאות הזיהוי בשלושת מאגרי הנתונים מעידות כי מודול זיהוי הרכיבים המוצע פועל באופן עקבי וטוב. תוצאות כמותיות מוצגות ב-טבלה 4. מאגר הנתונים RICO משיג את הביצועים הגבוהים ביותר, עם דיוק (precision) של 0.91, רגישות (recall) של 0.88 וציון F1 של 0.89, וזאת הודות למערך רחב ומגוון של הערות (annotations) לרכיבי ממשק משתמש. ENRICO מראה ציונים נמוכים מעט יותר בשל מבנהו הפשוט יותר ומספר קטן יותר של סוגי רכיבים מתויגים. מאגר הנתונים של Guo רשם את ציון ה-F1 הנמוך ביותר (0.81), ככל הנראה בשל שונות ויזואלית רבה יותר ופחות דפוסי פריסה סטנדרטיים, ההופכים את הזיהוי למאתגר יותר. באופן כללי, תוצאות אלה מאששות כי המודל שומר על ביצועי זיהוי רכיבים חסונים (robust) על פני סגנונות עיצוב שונים של ממשקי משתמש ומאפיינים שונים של מאגרי נתונים.

סט של נתונים	דיוק (Precision)	רגישות (Recall)	מדד F1
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

טבלה 4: ביצועי זיהוי רכיבים במאגרי נתונים שונים. הטבלה מציגה את הדיוק (precision), הרגישות (recall) ומדד ה-F1 עבור זיהוי רכיבי ממשק משתמש (UI) במאגרי הנתונים RICO, ENRICO ו-Guo, ובכך מדגימה את יעילותו של מודל הזיהוי.

איור 3 מציג את ביצועי המודל על פני מאגרי הנתונים RICO, ENRICO ו-Guo בספי IoU של 0.5 ו-0.75. כצפוי, ערכי mAP גבוהים יותר ב-IoU 0.5 בשל דרישת חפיפה מקלה יותר. RICO מדווח באופן עקבי על ערכי mAP הגבוהים ביותר (0.89 ב-IoU 0.5 ו-0.78 ב-IoU 0.75), מה שמשקף את העושר והעקביות של האנוטציות שבו. ENRICO מציג ערכים נמוכים מעט יותר, בעוד ש-Guo מדווח על הציונים הנמוכים ביותר בשל שונות רבה יותר בסגנון הפריסה ובצפיפות הרכיבים. המגמה היורדת עם ספי IoU מחמירים יותר ממחישה כי מורכבות מאגר הנתונים משפיעה ישירות על חוסן הזיהוי.

איור 3. דיוק ממוצע ממוצע (mAP) בספי סף של intersection over union (IoU) של 0.5 ו-0.75 במאגרי נתונים שונים.תרשים הקו משווה את ביצועי זיהוי הרכיבים במאגרי הנתונים RICO, ENRICO ו-Guo. ציר ה-x מייצג את מאגרי הנתונים, וציר ה-y מציג את ערכי ה-mAP. שתי העקומות תואמות לספי סף IoU של 0.5 ו-0.75, וממחישות את השונות בביצועים תחת רמות מחמירות שונות של זיהוי. אנא לחץ כאן כדי לצפות בגרסה גדולה יותר של איור זה.

איור 4 מציגים את ה-mAP@IoU(0.5:0.95) עבור כל מערך נתונים, ובכך מספקים הערכה רחבה יותר של ביצועי הזיהוי על פני עשרה ספי ערכי IoU. התוצאות חושפות מגמת ירידה ברורה מ-RICO (0.61) ל-ENRICO (0.57) ול-Guo (0.52), מה שמאשש כי מודל הזיהוי המוצע מGENERALIZES (מכליל) בצורה הטובה ביותר על מערכי נתונים גדולים ומובנים יותר. מדד ממוצע מחמיר זה מדגיש ירידות קלות בביצועים שעשויות שלא להיות ניכרות תחת הערכה של סף בודד. ממצאים אלו מעידים על כך שעל אף שהמודל מפגין ביצועים חזקים בכל מערכי הנתונים, גיוון מוגבר בפריסה (layout) ושונות ברכיבים מציבים אתגרים נוספים תחת הערכה קפדנית בסגנון COCO. תוצאות הזיהוי מוצגות ב- איורים 3 ו-4, המספקות השוואות כמותיות של mAP ברמות IoU שונות.

איור 4. דיוק ממוצע ממוצע (mAP) ממוצע על פני ספי חיתוך על איחוד (IoU) מ-0.5 עד 0.95 במגוון סטים של נתונים.תרשים הקו מציג את ביצועי זיהוי הרכיבים בסטים של RICO, ENRICO ו-Guo באמצעות מדד ה-mAP הממוצע על פני ספי IoU בטווח שבין 0.5 ל-0.95. ציר ה-x מייצג את סטי הנתונים, וציר ה-y מציין את ערכי ה-mAP המתאימים המדווחים בסולם של 0–1, המשקפים את ביצועי המודל תחת ספי זיהוי משתנים. אנא לחצו כאן כדי לצפות בגרסה גדולה יותר של איור זה.

מדדי איכות הפריסה

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

שגיאת יישור.

AE (סטיית פיקסלים) מעיד על מידת הדיוק שבה אלמנטים של ממשק משתמש (UI) מיושרים לקווי יישור אידיאליים, כגון קווי עזר לשמאל, לימין, למעלה או לקו הבסיס. ערך AE נמוך יותר מעיד על כך שהאלמנטים מסודרים באופן עקבי עם עיוות ויזואלי מינימלי, דבר המשפר את קריאות העיצוב ואת בהירותו הכללית. מדד זה חשוב במיוחד להערכת עידון הפריסה הקוגניטיבי, שכן חוסר יישור משבש את הזרימה הוויזואלית ומגביר את המורכבות הנתפסת. איור 5 ממחיש את ה-AE במאגרי הנתונים RICO, ENRICO ו-Guo, כפי שנמדד כממוצע סטיית הפיקסלים מקווי יישור אידיאליים. התוצאות מראות כי RICO משיג את ה-AE הנמוך ביותר (4.2 px), מה שמעיד על כך שמרכיבי ה-UI במאגר נתונים זה מציגים דפוסים מבניים עקביים יותר, מה שמקל על היישור עבור המודל. ENRICO נמצא במקום השני עם סטיית יישור מתונה של 6.1 px, המשקפת שילוב של פריסות מסך מובנות היטב ומגוונות. מאגר הנתונים של Guo רשם את ה-AE הגבוה ביותר (7.4 px), וזאת בשל גיוון רב יותר במיקום המרכיבים ומבני פריסה שאינם סטנדרטיים, המאתגרים את העידון המבוסס על יישור. באופן כללי, תוצאות אלה מוכיחות כי המודל שומר על דיוק יישור גבוה במגוון מאגרי נתונים, למרות עלייה במורכבות הפריסה.

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

דיוק קיבוץ (GA).

מדד ה-GA מכמת עד כמה המודל מקבץ ביעילות רכיבי UI קשורים, למשל, על בסיס עקרונות Gestalt כגון קרבה, דמיון והמשכיות. דיוק קיבוץ גבוה יותר מעיד על כך שהמודל שומר על המבנה המיועד של אלמנטי ה-UI, מה שמאפשר למשתמשים לפרש את הממשק באופן טבעי יותר. מדד זה שימושי במיוחד להערכה אם מודול עידון הפריסה מארגן בהצלחה את התוכן לקבוצות ויזואליות בעלות משמעות. איור 6 מציג את התפלגות ה-GA שהושגה על ידי המסגרת המוצעת בשלושת מאגרי הנתונים. מאגר הנתונים ENRICO מציג את החציונה הגבוהה ביותר של GA ואת הטווח הבין-רבעוני הקטן ביותר, מה שמעיד על ביצועי קיבוץ יציבים ועקביים בשל הפריסות המוגדרות היטב והמתויגות לפי תבניות. מאגר הנתונים RICO מראה דיוק קיבוץ בינוני עם שונות גבוהה יותר, כנראה בשל הגיוון הרב יותר ומורכבות הפריסה שלו. מאגר הנתונים Guo UI Color רשם דיוק קיבוץ נמוך יותר, שכן הדגימות שלו הן הטרוגניות מבחינה ויזואלית ופחות ממוקדות בפריסה מבנית. באופן כללי, התוצאות מעידות על כך שמודול עידון הפריסה הקוגניטיבי פועל באופן אמין לאורך מאגרי נתונים שונים, ומשיג את ביצועי הקיבוץ הטובים ביותר בנתונים עקביים מבנית.

איור 6. התפלגות דיוק הקיבוץ בין מאגרי נתונים. תרשים הקופסה מציג את דיוק הקיבוץ בהתבסס על עקרונות Gestalt במאגרי הנתונים RICO, ENRICO ו-Guo’s UI Color. הקופסאות מייצגות את הטווח הבינ-רבעוני, הקו המרכזי מציין את החציון, והשפם מסמן את טווח הערכים. ציר ה-x מייצג את מאגרי הנתונים, וציר ה-y מציג את ציוני דיוק הקיבוץ. גודל המדגם n=5128 מסכי ממשק משתמש (RICO: 4000, ENRICO: 1000, ו-Guo: 128). אנא לחץ כאן כדי לצפות בגרסה מורחבת של איור זה.

דיוק סדר הקריאה (ROA).

דיוק סדר הקריאה (ROA) מודד עד כמה המודל חוזה במדויק את זרימת הקריאה הטבעית של מסך ממשק משתמש (UI), שבדרך כלל עוקבת אחר תבנית של מלמעלה למטה וממשמאל לימין. שמירה על סדר קריאה נכון היא חיונית לשמישות, לבהירות הניווט ולעקביות עם מוסכמות עיצוב מבוססות. ROA גבוה מעיד על כך שהמערכת שומרת על דפוסי סריקה קוגניטיביים צפויים. איור 7 מציג את ה-ROA בשלבי הערכה שונים עבור מאגרי הנתונים RICO, ENRICO ו-Guo. ENRICO משיג בעקביות את ה-ROA הגבוה ביותר בשל מבנה הפריסה הסדיר והמכוון-תבנית שלו, המאפשר חיזוי מדויק יותר של רצפי קריאה דמויי-אנוש. RICO מראה ביצועים בינוניים עם שונות קלה, המשקפת את הגיוון הרב יותר ואת המורכבות של העולם האמיתי. מאגר הנתונים Guo מציג את ה-ROA הנמוך ביותר, שכן רבים ממסכיו עשירים ויזואלית אך חסרים הירכיות קריאה מוגדרות בבירור. באופן כללי, תוצאות אלו מעידות על כך שמודול עידון הפריסה הקוגניטיבי המוצע פועל באופן האמין ביותר במאגרי נתונים מובנים, תוך שמירה על חיזויים יציבים של סדר הקריאה על פני עיצובי UI מגוונים.

איור 7. דיוק סדר הקריאה לאורך שלבי ההערכה עבור מספר מאגרי נתונים. תרשים הקווים מציג את דיוק סדר הקריאה לאורך שלבי ההערכה עבור מאגרי הנתונים RICO, ENRICO ו-Guo’s UI Color. ציר ה-x מייצג את שלב ההערכה, וציר ה-y מציין את דיוק סדר הקריאה. כל עקומה תואמת למאגר נתונים, וממחישה את השינויים בשימור הזרימה הוויזואלית לאורך שלבי ההערכה העוקבים. שלב ההערכה הוא ייצוג של שלבי הזיקוק ההדרגתיים של המסגרת המוצעת. אנא לחצו כאן כדי לצפות בגרסה מורחבת של איור זה.

מדד עקביות הפריסה (LCS)

מדד עקביות הפריסה (LCS) מודד את מידת העקביות שבה נשמרות פריסות ממשק המשתמש (UI) הנוצרות על פני מספר מסכים בתוך אותה אפליקציה. מדד זה כולל עקביות בריווח, בכללי יישור, באזורי טיפוגרפיה ובדפוסי קיבוץ. ציון גבוה יותר מעיד על קוהרנטיות משופרת בין המסכים, מה שמוביל לחוויית משתמש (UX) מאוחדת ואינטואיטיבית יותר. איור 8 מציג את ה-LCS שנמדד לאורך מספר שלבי הערכה עבור מאגרי הנתונים RICO, ENRICO ו-Guo’s UI Color. מאגר הנתונים ENRICO משיג בעקביות את ערכי ה-LCS הגבוהים ביותר בשל מסכי ה-UI שלו, המסומנים לפי דפוסים ואחידים מבנית, מה שמקל על למידה יציבה יותר של עקביות בין-מסכית. לעומת זאת, מאגר הנתונים RICO מראה עקביות מתונה אך משתפרת בהדרגה, דבר המיוחס ליכולתו של המודל להכליל פריסות UI מגוונות מאוד. כצפוי, מאגר הנתונים של Guo רשם את ערכי ה-LCS הנמוכים ביותר, מכיוון שהוא מתמקד בעיקר במאפייני צבע ולא בפריסה מבנית, מה שהופך את העקביות הרב-מסכית למאתגרת יותר. באופן כללי, תוצאות אלו מצביעות על כך שמודול העקביות בין-מסכית המוצע פועל בצורה היעילה ביותר על מאגרי נתונים מוכווני-דפוס, בעודו מספק שיפורים מדידים בכל מאגרי הנתונים.

איור 8. ציון עקביות פריסה לאורך שלבי הערכה עבור מספר מאגרי נתונים. התרשים הקווי מציג את ציוני עקביות הפריסה לאורך שלבי ההערכה עבור מאגרי הנתונים RICO, ENRICO ו-Guo’s UI Color. ציר ה-x מייצג את שלב ההערכה וציר ה-y מציין את ציוני עקביות הפריסה. כל עקומה תואמת למאגר נתונים, וממחישה את השיפור בקוהרנטיות המבנית של ממשקים שנוצרו לאורך שלבי הערכה עוקבים. אנא לחצו כאן כדי לצפות בגרסה גדולה יותר של איור זה.

מדדי איכות צבע

ערכות הצבעים שנוצרו לממשק המשתמש מוערכות באמצעות חמישה מדדים מבוססי תפיסה הנגזרים מ-CAM02-UCS: ΔE (הפרש צבע תפיסתי), המכמת את האחידות התפיסית בין צבעי הפלטה; יחס ניגודיות (מבוסס על WCAG 2.1), המעריך את קריאות האלמנטים שעל רקע; מדד הרמוניית צבעים (CHI), המודד תאימות אסתטית בין גוונים; ציון גיוון צבעים (CDS), המשקף את השונות בתוך מרחב הצבע התפיסתי; וציון בולטות צבעים (CPS), המעריך את האיזון והדומיננטיות של הצבעים בתוך הפלטה. יחד, מדדים אלו מספקים הערכה מקיפה הן של האיכות האסתטית והן של ביצועי הצבעים מהיבט של שמישות. התוצאות מדגימות כי השיטה המוצעת משיגה ערך ΔE נמוך יותר של 4.12, דבר המעיד על אחידות תפיסית משופרת בין הצבעים. יחס ניגודיות של 6.21 מאשר עמידה בתקני נגישות, ומבטיח קריאות משופרת. Table 5 מציג השוואה כמותית בין מודול מידול הצבעים המוצע לבין שיטות בסיס. ה-CHI עולה מ-0.61 ל-0.83, מה שמעיד על לכידות אסתטית משופרת במעברי צבעים. בנוסף, ה-CDS עולה ביותר מ-50%, מה שמוכיח כי הפלטות שנוצרו שומרות על גיוון עשיר יותר ללא יצירת עומס ויזואלי. ערכי CPS גבוהים יותר מעידים על התפלגות מאוזנת של צבעים דומיננטיים, המונעת רוויה יתר של גוון בודד. באופן כללי, תוצאות אלו מבססות את יעילותו של מודול מידול הצבעים מבוסס ה-CAM02-UCS ביצירת סכימות צבעים לממשק משתמש שהן הרמוניות, קריאות ואופטימליות מבחינה תפיסית.

מדד	הגדרה	השיטה המוצעת	קו בסיס1	שיפור (%)
ΔE (CAM02-UCS)	הבדל צבע תפיסתי	4.12	7.85	47.5% נמוך יותר
יחס ניגודיות (WCAG)	קריאות של זוגות רקע-קדמה	6.21	4.38	41.80%
CHI (מדד הרמוניה של צבע)	הרמוניה של גוון ורוויה	0.83	0.61	36.10%
CDS (מדד מגוון צבעים)	שונות במרחב J′a′b′	18.70	12.40	50.80%
CPS (מדד בולטות צבע)	יציבות של צבעים דומיננטיים	0.72	0.55	30.90%

טבלה 5: השוואה כמותית של מדדי איכות צבע בין השיטה המוצעת לשיטות הבסיס. הטבלה מציגה מדדי הערכה לאיכות הצבע, הכוללים הפרש צבע תפיסתי (ΔE ב-CAM02-UCS), יחס ניגודיות (WCAG), מדד הרמוניית צבעים (CHI), ציון גיוון צבעים (CDS) וציון בולטות צבעים (CPS). תוצאות השיטה המוצעת מושוות לערכי הבסיס, לצד אחוזי השיפור.

דמוגרפיה של המשתתפים ומערך המחקר

בסך הכל השתתפו 30 נבדקים בתהליך ההערכה. גיל הנבדקים נע בין 20 ל-35 שנים (גיל ממוצע: 26.4 ± 3.2 שנים). העדרי כלל אנשים מרקעים מגוונים, כולל מהנדסי תוכנה, סטודנטים ומעצבי UI/UX. בהתבסס על דיווח עצמי של מיומנות במחשב, 40% מהנבדקים סווגו כמשתמשים ברמה בינונית, 35% כמשתמשים מתקדמים ו-25% כמתחילים. לכשלי מחצית מהנבדקים היה ניסיון קודם בעיצוב UI/UX או בתחומים קשורים, בעוד ששאר הנבדקים לא. גיוון זה הבטיח הערכה מאוזנת בין רמות שונות של מומחיות טכנית והיכרות עם תחום העיצוב.

מדדי מחקר משתמשים

הערכה ממוקדת-משתמש בוצעה באמצעות מדדים מרובים, הכוללים את NASA-TLX, מדד שמישות המערכת (SUS), ציון הרמוניה אסתטית (AHS), זמן יעילות חיפוש (SET) ודירוג עקביות בין-מסכים (CSCR), כדי להעריך עומס קוגניטיבי, שמישות, משיכה ויזואלית, יעילות ועקביות.

מדד ה-NASA-TLX מכמת עומס מנטלי על ידי מדידת גורמים כגון דרישה מנטלית, מאמץ ותסכול. ציונים נמוכים יותר מעידים על עומס קוגניטיבי מופחת ועל שיפור בקלות האינטראקציה. המסגרת המוצעת הובילה באופן עקבי לציוני NASA-TLX נמוכים יותר בכל מאגרי הנתונים, מה שמעיד על מאמץ מנטלי מופחת. שיפור זה ניתן לייחס לשילוב של עקרונות עיצוב קוגניטיביים, כולל קיבוץ Gestalt, ריווח מותאם וסדר היררכי ויזואלי משופר, אשר יחד מקלים על ניווט אינטואיטיבי יותר. מדד ה-SUS מספק ציון שמישות סטנדרטי הנע בין 0 ל-100, כאשר ערכים גבוהים יותר מעידים על שמישות ובהירות משופרות. המסגרת המוצעת השיגה ציוני SUS גבוהים יותר בהשוואה לשיטות הבסיס, מה שמשקף שיפורים הן בפריסה המבנית והן בבהירות הצבעים. יישור משופר, ריווח וזרימת ניווט תרמו לממשקים שהמשתמשים תפסו כאינטואיטיביים יותר וקוהרנטיים מבחינה תפקודית. מדד AHS, הנמדד על סולם ליקרט של 7 דרגות, מעריך את המשיכה הוויזואלית הנתפסת ואת הרמוניית הצבעים. ממשקים שנוצרו באמצעות מודול מידול הצבעים המבוסס על CAM02-UCS השיגו ערכי AHS גבוהים יותר, המעידים על מעברי צבע חלקים יותר ופלטות מאוזנות יותר ויזואלית. המשתתפים העדיפו בעקביות ממשקים אלה בשל ניגודיות משופרת, קוהרנטיות בגוונים וצמצום של רעש ויזואלי, מה שמדגיש את חשיבותו של מידול צבע תפיסתי בעיצוב UI. מדד SET מודד את הזמן הדרוש למשתמשים לאיתור אלמנטי UI יעדיים במהלך משימות חיפוש ויזואלי. ערכי SET נמוכים יותר מעידים על ארגון והיררכיה ויזואליים משופרים. המסגרת המוצעת הפחיתה באופן משמעותי את ה-SET בכל מאגרי הנתונים, מה שמוכיח ששילוב של קיבוץ Gestalt, ריווח מונחה-קשב ומבני פריסה מעודנים מאפשר אינטראקציה מהירה ויעילה יותר. מדד CSCR מעריך את העקביות של עיצוב ה-UI על פני מספר מסכים. ציונים גבוהים יותר מעידים על המשכיות טובה יותר בפריסה, בצבע ובארגון המבני. המסגרת המוצעת השיגה ערכי CSCR גבוהים יותר, המשקפים את יעילותו של מודול העקביות הרב-מסכית בשמירה על סכמות צבע יציבות, ריווח ומבנים היררכיים על פני הממשקים.

איור 9 מציג את תוצאות מחקר המשתמשים ההשוואתי עבור כל המדדים (NASA-TLX, SUS, AHS, SET ו-CSCR) במאגרי הנתונים RICO, ENRICO ו-Guo. באופן כללי, נצפו שיפורים עקביים בכל מדדי ההערכה. ראוי לציין כי מאגר הנתונים Guo מראה ביצועים מעולים במדדים הממוקדים במשתמש, כולל עומס קוגניטיבי נמוך יותר (NASA-TLX), שמישות גבוהה יותר (SUS), הרמוניה אסתטית משופרת (AHS), זמן יעילות חיפוש מופחת (SET) ועקביות משופרת בין מסכים (CSCR). עם זאת, תוצאות אלו דורשות פרשנות זהירה. השיפור במדדי חוויית המשתמש (UX) שנצפה במאגר הנתונים Guo מיוחס בעיקר לעקביות הצבעים החזקה שלו ולהרכב חזותי פשוט יחסית, ולא לאיכות עדיפה של הפריסה המבנית. בעוד שהמשתמשים תופסים ממשקים אלו כהרמוניים יותר מבחינה חזותית ופחות תובעניים מבחינה קוגניטיבית, תוצאות קודמות מדגימות כי מאגר הנתונים Guo מציג ביצועים נמוכים במונחים של יישור, קיבוץ וסדר קריאה. דבר זה מדגיש הבחנה חשובה בין גורמים תפיסתיים למבניים בעיצוב ממשקי משתמש (UI). בעוד שתכונות תפיסתיות, כגון הרמוניית צבעים, משפרות משמעותית את חוויית המשתמש, דיוק מבני ועקביות של הפריסה נותרים קריטיים לשמישות פונקציונלית. לכן, עיצוב UI אופטימלי דורש איזון בין הרמוניה תפיסתית לנכונות מבנית.

איור 9. השוואה של מדדי מחקר משתמשים בין מאגרי נתונים.תרשים עמודות מקבץ המשווה מדדי מחקר משתמשים בין מאגרי הנתונים RICO, ENRICO ו-Guo’s UI Color. ציר ה-x מייצג מדדי הערכה, כולל NASA Task Load Index (NASA-TLX), system usability scale (SUS), aesthetic harmony score (AHS), structural efficiency time (SET) ו-cross-screen consistency rate (CSCR), בעוד שציר ה-y מציין את הציונים המתאימים. העמודות מייצגות את הביצועים עבור כל מאגר נתונים, וממחישות הבדלים בשמישות, בעומס קוגניטיבי, באיכות האסתטית ובעקביות הממשק. NASA-TLX (0–100, ככל שנמוך יותר כך טוב יותר), SUS (0–100, ככל שגבוה יותר כך טוב יותר), AHS (1–7 Likert), SET (s, ככל שנמוך יותר כך טוב יותר) ו-CSCR (0–1, ככל שגבוה יותר כך טוב יותר). אנא לחצו כאן כדי לצפות בגרסה גדולה יותר של איור זה.

תיקוף סטטיסטי של השערות

כדי לתקף באופן נוסף את ההשערות המוצעות (H1–H4), בוצעו בדיקות מובהקות סטטיסטית עבור מדדי הערכה מרכזיים, כולל איכות הפריסה, עומס קוגניטיבי, הרמוניית צבעים ומדדי שמישות (Table 6). התוצאות מדווחות כממוצע ± סטיית תקן, והמובהקות הסטטיסטית הוערכה באמצעות מבחני t זוגיים עם רווח סמך של 95% (p < 0.05). התוצאות מצביעות על כך שהמסגרת המוצעת משיגה שיפורים מובהקים סטטיסטית לעומת גישות הבסיס במספר מדדים, כולל דיוק יישור, דיוק קיבוץ, סדר קריאה, עומס קוגניטיבי (NASA-TLX) ומדדי הרמוניית צבעים. באופן בולט, הפחתות בעומס הקוגניטיבי ושיפורים במדדי השמישות מראים הבדלים מובהקים מאוד (p < 0.01). ממצאים אלו מאשרים כי שילוב של עקרונות עיצוב קוגניטיביים ומידול צבע תפיסתי מוביל לשיפורים מדידים ומובהקים סטטיסטית באיכות ממשק המשתמש (UI), ובכך תומכים בהשערות H1–H4.

מדד	קו בסיס (Mean ± SD)	הצעה (Mean ± SD)	שיפור (%)	p-value	מובהקות
שגיאת יישור (↓)	7.8 ± 1.2	4.2 ± 0.9	46.10%	0.003	מובהק
דיוק קיבוץ (↑)	0.68 ± 0.05	0.82 ± 0.04	20.50%	0.001	מובהק
דיוק סדר קריאה (↑)	0.72 ± 0.06	0.87 ± 0.03	20.80%	0.002	מובהק
NASA-TLX (↓)	68.5 ± 5.4	47.2 ± 4.8	31.10%	0.0005	מובהק מאוד
ציון SUS (↑)	71.3 ± 6.2	88.9 ± 4.5	24.70%	0.0008	מובהק מאוד
מדד הרמוניה צבעונית (↑)	0.61 ± 0.07	0.83 ± 0.05	36.00%	0.001	מובהק
יחס ניגודיות (↑)	4.1 ± 0.6	6.2 ± 0.5	51.20%	0.002	מובהק

טבלה 6: השוואה סטטיסטית של מדדי ביצועים בין שיטת הבסיס לשיטות המוצעות. הטבלה מציגה את הממוצע וסטיית התקן (mean ± SD) עבור מדדי ביצועים מרכזיים, הכוללים שגיאת יישור, דיוק בקיבוץ, דיוק בסדר הקריאה, מדד עומס המשימה של NASA (NASA-TLX), סולם שמישות מערכת (SUS), מדד הרמוניה של צבעים ויחס ניגודיות. מדווחים שיעורי שיפור באחוזים, ערכי p ורמות מובהקות סטטיסטית. (↑) מעיד כי ערכים גבוהים יותר הם טובים יותר, ו-(↓) מעיד כי ערכים נמוכים יותר הם טובים יותר. מובהקות סטטיסטית הוערכה ב-p < 0.05.

תצפיות ספציפיות למערך הנתונים

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

מחקר אבלציה

מחקר ה-ablation מעריך את התרומה של כל מודול בתוך המסגרת המוצעת על ידי הסרה שיטתית של רכיבים בודדים וניתוח השפעתם על איכות הפריסה (layout), מידול הצבעים וביצועי הזיהוי. איכות הפריסה מוערכת באמצעות AE, GA, ROA ו-LCS. מדד ה-AE משקף את הסטייה המיקומית של אלמנטים בממשק המשתמש (UI), כאשר ערכים גבוהים יותר מעידים על מבנה מרחבי חלש יותר. GA מעריך באיזו יעילות רכיבים מאורגנים על פי עקרונות Gestalt. מדד ה-ROA מודד את השימור של זרימה ויזואלית לוגית, בעוד ש-LCS מכמת עקביות מבנית בין מסכים במונחים של יישור, ריווח וארגון הפריסה. הידרדרות באיכות הצבע מוערכת באמצעות ΔE (הבדל צבע תפיסתי), CHI ו-CDS, אשר יחד מעריכים אחידות תפיסית, קוהרנטיות אסתטית ועושר של פלטת הצבעים. ביצועי הזיהוי מוערכים באמצעות mAP, precision ו-recall, אשר מכמתים את ההשפעה של החלפת מודול ה-Faster R-CNN במודל זיהוי פשוט יותר. יחד, מדדים אלו מספקים הערכה מקיפה של האופן שבו כל מודול תורם לביצועי המערכת הכוללים.

טבלה 7 מסכמת את התרומה של כל מודול ומשווה בין המסגרת המוצעת לבין גישות קיימות ליצירת ממשקי משתמש (UI). המודל המלא משיג את הביצועים הטובים ביותר בכל מדדי איכות הפריסה, מידול הצבע והזיהוי, מה שמוכיח כי לעיצוב קוגניטיבי, למידול צבע תפיסתי ולהבנה חזותית עמוקה יש השפעה סינרגית. כאשר מודול מידול הצבע מוסר, ערך ה-ΔE עולה באופן משמעותי, בעוד שערכי ה-CHI וה-CDS יורדים במידה ניכרת, דבר המעיד על אובדן של אחידות תפיסתית והרמוניה בצבעים. ממצא זה מאשש את חשיבותו של המידול המבוסס על CAM02-UCS בשמירה על איכות אסתטית ותפיסתית. הסרת מודול הפריסה הקוגניטיבי מובילה לעלייה משמעותית ב-AE ולירידה בולטת ב-GA וב-ROA, מה שמוכיח כי עקרונות עיצוב קוגניטיביים חיוניים ליצירת פריסות קוהרנטיות מבנית וקריאות. הסרת מודול העקביות הרב-מסכית מובילה להפחתה ב-LCS, מה שמאשש את תפקידו בשמירה על תבניות פריסה עקביות לאורך מספר מסכים. החלפת גלאי ה-Faster R-CNN ב-CNN פשוט יותר גורמת לירידה חדה ב-mAP, בדיוק (precision) ובבזיהוי (recall), דבר המדגיש את החשיבות הקריטית של זיהוי רכיבים חסון בתוך תהליך העבודה הכולל. בהשוואה לשיטות בסיס (baseline), כולל pix2code, REDRAW ו-LDGM, המסגרת המוצעת מציגה עליונות עקבית על פני כל הגישות בכל הנוגע לדיוק הפריסה, קוהרנטיות חזותית ואיכות צבע תפיסתית.

שיטה / מודול	AE ↓	GA ↑	ROA ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
מודול צבע הוסר	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
מודול פריסה קוגניטיבי הוסר	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
עקביות בין-מסכית הוסרה	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
Faster R-CNN הוחלף ב-Simple CNN	0.16	0.85	0.91	0.85	4.15	0.82	18.1	0.74
Pix2Code	0.25	0.61	0.65	0.51	10.2	0.48	9.6	0.65
REDRAW	0.21	0.66	0.72	0.56	8.7	0.52	11.4	0.72
LDGM (Layout Diffusion)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
המודל המלא המוצע	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

טבלה 7: מחקר אבלציה (Ablation study) וניתוח ביצועים השוואתי של המסגרת המוצעת לעומת שיטות בסיס. הטבלה מעריכה את ההשפעה של רכיבים בודדים על ידי השוואת המודל המוצע המלא עם גרסאות שבהן הוסרו מודולים ספציפיים (מודול צבע, מודול פריסה קוגניטיבית, עקביות רב-מסכית, והחלפת Faster R-CNN ב-CNN פשוט), וכן שיטות בסיס (pix2code, REDRAW ו-LDGM). הביצועים מוערכים באמצעות שגיאת יישור (AE), דיוק קיבוץ (GA), דיוק סדר קריאה (ROA), מדד עקביות פריסה (LCS), הפרש צבע תפיסתי (ΔE), מדד הרמוניית צבע (CHI), מדד גיוון צבע (CDS) וממוצע דיוק ממוצע (mAP). (↑) מציין שערכים גבוהים יותר הם טובים יותר, ו-(↓) מציין שערכים נמוכים יותר הם טובים יותר.

זמינות נתונים:

מאגרי הנתונים ששימשו במחקר זה זמינים בקישורים הבאים: מאגר הנתונים RICO: https://interactionmining.org/rico; מאגר הנתונים ENRICO: https://github.com/luileito/enrico; מאגר נתוני צבעי ממשק המשתמש (UI Color Dataset) של Guo: https://github.com/guozhongke/UI-Color-Dataset.

קובץ משלים 1. ניסוחים מתמטיים ופרטי יישום מורחבים.קובץ זה מספק את הניסוחים המתמטיים המפורטים ואת זרימות העבודה האלגוריתמיות התומכות במסגרת המוצעת לאב-טיפוס אוטומטי של ממשק משתמש (UI). הוא כולל אימון לזיהוי רכיבים, חילוץ תבניות פריסה, מידול הרמוניית צבעים, יעד מאוחד לאב-טיפוס UI, פרטי זיהוי Faster R-CNN, חישובי מרחק מרחבי ודמיון יישור, בניית עץ UI לוגי, מידול צבע תפיסתי מבוסס CAM02-UCS, אופטימיזציה של עיצוב קוגניטיבי, מידול עקביות רב-מסכי, ואלגוריתמים S1–S3.אנא לחצו כאן להורדת קובץ זה.

דיון

הממצאים מדגימים שיפורים בעלי מובהקות סטטיסטית בישימות, בארגון המבני ובאיכות התפיסית (p < 0.05), ומאששים את היעילות של שילוב עקרונות עיצוב קוגניטיביים באבטיפוסים אוטומטיים של ממשקי משתמש (UI). בניגוד למערכות מסורתיות ליצירת ממשקי משתמש המסתמכות בעיקר על זיהוי חזותי או על היוריסטיקות מבוססות-כללים, המסגרת המוצעת משלבת קיבוץ גשטאלט, מידול היררכי, מגבלות ריווח וקריאות תפיסית לאורך כל תהליך השחזור של ממשק המשתמש. שיפורים שנצפו ב-NASA-TLX, SUS ו-SET מאשרים עוד הפחתה בעלת מובהקות סטטיסטית בעומס הקוגניטיבי (NASA-TLX, p.< 0.01). תוצאות אלו מעידות כי יצירה אוטומטית של ממשקי משתמש צריכה להתרחב מעבר לדיוק של השחזור החזותי ולשלב ידע בעיצוב ממוקד-משתמש כדי להשיג שימושיות מעשית. בנוסף, כל ההיפותזות שנוסחו (H1–H4) נתמכות אמפירית על ידי תוצאות הניסוי.

מעבר לשיפורים במבנה העיצוב (layout), האינטגרציה של מידול צבע תפיסתי מבוסס CAM02-UCS מובילה לשיפורים מובהקים סטטיסטית בהרמוניה של צבעים, בנגישות וביציבות תפיסית (p < 0.05), כפי שמשתקף בשיפורים ב-ΔE, CHI, CDS ויחס הניגודיות. בהשוואה לעבודות קודמות, כגון יצירה אוטומטית של ערכות נושא לצבעי ממשק משתמש (UI) המבוססת על תמונות, המתמקדת בעיקר באופטימיזציה של צבעים, המסגרת המוצעת משלבת הן עידון של הצבע והן עידון של מבנה העיצוב בתוך צינור עיבוד (pipeline) מאוחד. יתרה מכך, הכללת מודול לעקביות רב-מסכית נותנת מענה למגבלה מרכזית של גישות קודמות שהתמקדו ביצירת ממשקי משתמש למסך בודד בלבד. השוואה עם שיטות קיימות, כולל pix2code³¹, REDRAW^23,24, ו-LDGM³², מראה כי גישות אלו שמות דגש בעיקר על שחזור מבני או מידול גנרטיבי ללא שילוב של עקרונות קוגניטיביים, הרמוניזציה תפיסית של צבעים או הסקה רב-מסכית. המסגרת המוצעת מראה שיפורים מובהקים סטטיסטית לעומת שיטות אלו (p < 0.05) במדדי דיוק של מבנה העיצוב (AE, GA ו-ROA), במדדים תפיסתיים (CHI ו-ΔE) ובמדדי שמישות (SUS ו-CSCR). ממצאים אלו מדגישים את היתרון בשילוב של עקרונות עיצוב קוגניטיביים, מידול צבע תפיסתי ולמידה עמוקה בתוך מערכת מאוחדת.

תצפית חשובה מהתוצאות היא ההבחנה בין גורמים מבניים לגורמים תפיסתיים המשפיעים על חוויית המשתמש (UX). אופטימיזציה מבנית משפרת את התקינות התפקודית ואת בהירות הפריסה, בעוד שאופטימיזציה תפיסית — ובמיוחד הרמוניה של צבעים — משפיעה באופן משמעותי על תפיסת המשתמש ועל העומס הקוגניטיבי. הממצאים מצביעים על כך שעיצוב ממשק משתמש (UI) אופטימלי דורש איזון בין דיוק מבני לבין קוהרנטיות תפיסית. למרות השיפורים שהוכחו, נותרו מגבלות מסוימות. לדוגמה, הביצועים במערכי נתונים קטנים יותר ומכווני תפיסה יותר, כגון מערך הנתונים Guo UI Color, נמוכים יותר במדדים מבניים בשל שונות בארגון הפריסה ואנוטציות מבניות מוגבלות. מאפיינים אלו מציבים אתגרים בלמידה של תבניות פריסה עקביות ומערכות יחסים היררכיות. עבודות עתידיות יתמקדו בשיפור החוסן במערכי נתונים כאלה.

מנקודת מבט תיאורטית, מחקר זה מדגים כי ניתן לשפר משמעותית את יצירת ממשקי משתמש (UI) על ידי הטמעת עקרונות קוגניטיביים ותפיסתיים ישירות בתוך תהליכי עבודה של למידה עמוקה. המחקר קורא תיקר לתפיסה המקובלת לפיה יצירת UI היא אך ורק בעיה של ראייה ממוחשבת או יצירת קוד. תחת זאת, הוא מדגיש את החשיבות של שילוב אחידות תפיסתית (באמצעות CAM02-UCS), הפחתת עומס קוגניטיבי (באמצעות עקרונות Gestalt ומידול היררכי), ועקביות עיצובית רב-מסכית כמרכיבי ליבה במערכות UI אוטומטיות. עבודה זו תורמת למעבר לעבר מודלים חישוביים הממוקדים בבני אדם, שבהם יצירת UI לוקחת בחשבון לא רק נכונות מבנית, אלא גם גורמים פסיכולוגיים ותפיסתיים. ככזו, היא מניחה תשתית לכיוון תיאורטי חדש עבור בינה עיצובית אוטומטית.

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

המסגרת המוצעת מציגה גישה ממוקדת-אדם לאב-טיפוס אוטומטי של ממשקי משתמש (UI) באמצעות שילוב של עקרונות עיצוב קוגניטיביים, מידול צבע תפיסתי (CAM02-UCS) ועקביות פריסה של מסכים מרובים בתוך צינור חישוב מאוחד. בניגוד לגישות קודמות שהתמקדו בעיקר בשחזור מבני או בזיהוי חזותי, המסגרת ממדלת באופן מפורש קיבוץ גשטאלט, היררכיה, אופטימיזציה של ניגודיות ואחידות תפיסתית. תוצאות ניסיוניות מדגימות שיפורים משמעותיים בשמישות (SUS ו-NASA-TLX), בהרמוניה חזותית (AHS, CHI ו-ΔE) ובביצועים מבניים (GA, ROA, LCS ו-mAP), מה שמאשר כי מידול קוגניטיבי ותפיסתי משפר את איכות ה-UI ואת חוויית המשתמש (UX). עבודות עתידיות יבחנו את השילוב של מודלי ראייה-שפה מבוססי transformer כדי לשפר את ההבנה הסמנטית וההסקה המבנית. בנוסף, שילוב של התאמה אישית אדפטיבית, פריסות רספונסיביות למכשירים וזירוף אנושי (human-in-the-loop) עשויים להגביר עוד יותר את הישימות המעשית של המערכת. באופן כללי, עבודה זו מספקת בסיס למערכות עיצוב UI מונעות AI מהדור הבא, שאינן רק מדויקות מבחינה חזותית, אלא גם יעילות קוגניטיבית, הרמוניות תפיסתית וניתנות לפריסה מעשית.

חומרים

רשימת החומרים שנעשה בהם שימוש במאמר זה

שם	חברה	מספר קטלוג	הערות
מעבד (CPU)	AMD Ryzen 9 7950X (16 ליבות, 32 תהליכים, 4.5–5.7 GHz)	Advanced Micro Devices (AMD), ארה"ב	Ryzen 9 7950X
ערכת הכלים CUDA (CUDA Toolkit)	גרסה 11.8	NVIDIA Corporation, ארה"ב	CUDA Toolkit 11.8
cuDNN	גרסה 8.9	NVIDIA Corporation, USA	cuDNN v8.9
Faster R-CNN	מודל לזיהוי אובייקטים (עם רשת להצעת אזורים - Region Proposal Network)	Meta AI Research / Detectron2	מסגרת העבודה Detectron2
Matplotlib	גרסה 3.7	צוות הפיתוח של Matplotlib	v3.7.0
NVIDIA RTX 4090 GPU	כרטיס גרפי 24 GB GDDR6X	NVIDIA Corporation, סנטה קלרה, קליפורניה, ארה"ב	RTX 4090
NumPy	גרסה 1.24	מפתחי NumPy	v1.24.0
OpenCV	גרסה 4.8	קרן OpenCV	v4.8.0
PyTorch	גרסה 2.0	PyTorch Foundation (Meta AI)	v2.0.0
ResNet-50 עם FPN	רשת CNN בסיסית (Backbone) עם רשת פירמידת מאפיינים (Feature Pyramid Network)	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	גרסה 1.3	מפתחי Scikit-learn	v1.3.0
SciPy	גרסה 1.10	קהילת SciPy	v1.10.0
זיכרון מערכת (RAM)	64 GB DDR5	Corsair / Kingston (או מקבילה להם)	ערכה של DDR5 בנפח 64GB
מערכת ההפעלה Ubuntu	גרסה 22.04 LTS	Canonical Ltd., UK	Ubuntu 22.04 LTS