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

Jun Shi; Di Chen

doi:10.3791/71071

מאמר מחקר

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

DOI:

10.3791/71071

⸱

14 באוגוסט 2026

Jun Shi¹ , Di Chen²

¹School of Art and Communication, Shanghai Institute of Commerce and Foreign Languages, ²Hubei College of the Arts

במאמר זה

סיכום

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

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

תקציר

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

עיצוב ממשק משתמש (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 חכם וממוקד-אדם.

מבוא

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

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

גישות מוקדמות ליצירה אוטומטית של ממשקי משתמש (UI) משלבות טכניקות מסורתיות של עיבוד תמונה עם מודלי למידה עמוקה לזיהוי וסיווג אזורים³^,⁴. כיום, אסטרטגיות דומיננטיות ליצירת קוד של ממשקי משתמש גרפיים (GUI) מיישמות טכניקות של ראייה ממוחשבת כדי לנתח תמונות UI ולהמיר אותן לייצוגים מובנים של צד-לקוח (front-end)⁵^,⁶^,⁷. בעוד ששיטות עיבוד תמונה מסתמכות על מאפיינים המוגדרים ידנית, גישות של למידה עמוקה מחלצות ייצוגים היררכיים ממאגרי נתונים רחבי היקף. כתוצאה מכך, חוקרים בחנו גישות היברידיות המשלבות למידה עמוקה עם טכניקות עיבוד תמונה ספציפיות לתחום כדי לשפר את החוסן ואת הדיוק.

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

במקביל, גישות של למידה עמוקה שיפרו משמעותית את זיהוי רכיבי ממשק המשתמש (UI) ואת הבנת הפריסה. רשתות נוירונים אפשרו ניתוח מבני מדויק יותר של ממשקים בנייד¹³. עם זאת, שיטות אלו מתמקדות בעיקר בדיוק הזיהוי ולעתים קרובות מזניחות היבטים ברמה גבוהה יותר, כגון שמישות קוגניטיבית, היררכיית פריסה ויעילות אינטראקציה. הוצעו גם מודלים גנרטיביים עבור סינתזה של פריסות UI¹⁴^,¹⁵, אך הם ניצבים בפני אתגרים בשמירה על עקביות בין מסכים ובמתן החלטות עיצוביות ניתנות לפירוש¹⁶. גישות אחרות מתמקדות בדמיון ויזואלי או באיכות הרינדור, אך חסרות מסגרת מאוחדת המשלבת סמנטיקה של רכיבים, הרמוניה של צבעים ומגבלות שמישות¹⁷. זיהוי טקסט הוא חשוב אף הוא להבנת תוכן ה-UI. טכניקות כגון רשתות נוירונים רקורסיביות קונבולוציוניות (CRNNs) מאפשרות זיהוי מדויק של תבניות טקסט מורכבות במסכי ממשק¹⁸^,¹⁹^,²⁰.

הוצעו מספר מערכות ליצירת קוד UI מתוך סקיצות או תמונות. Sketch2Code משתמשת בזיהוי אובייקטים כדי להמיר סקיצות לייצוגי קוד²¹^,²², אך היא רגישה לאיכות התמונה. REDRAW מספקת תהליך (pipeline) אוטומטי לאיסוף נתונים ואימון מודלים, המשלב רשתות נוירונים קונבולוציוניות ורשתות נוירונים רקורסיביות כדי ליצור ייצוגי UI מובנים²³^,²⁴. עבודות מאוחרות יותר הציגו מדדי הערכה משופרים לבחינת איכות ה-UI שנוצר²⁵. גישות עדכניות יותר כוללות מודלים מבוססי דיפוזיה ומודלים מבוססי טרנספורמר ליצירת פריסה (layout), כגון diffusion layout transformers ללא שיטות autoencoder, יצירת פריסות GUI באמצעות גרפי סידור GUI מבוססי טרנספורמר, ויצירת פריסות UI המונחית על ידי מודלי שפה גדולים²⁶^,²⁷^,²⁸. סקירה השוואית של גישות אלו מוצגת ב-טבלה 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 משתפרות.

פרוטוקול

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

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

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

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

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

איור 1 ממחיש את זרימת העבודה מקצה לקצה של מסגרת אב-טיפוס ממשק משתמש (UI) אוטומטית המוצעת, אשר הופכת צילום מסך גולמי של ממשק משתמש לאב-טיפוס מזוקק קוגניטיבית. התהליך מתחיל בתמונת ממשק המשתמש הקלטתית, המועברת למודול זיהוי רכיבים המבוסס על Faster R-CNN. מודול זה מזהה אלמנטים של הממשק כגון כפתורים, סמלים, שדות טקסט ומכלים, ומוציא את תיבות התחומיות (bounding boxes) ותוויות המחלקות התואמות להם. הרכיבים שהזוהו מעובדים לאחר מכן בשלב חילוץ ההיררכיה והפריסה. בהתבסס על יחסים מרחביים ותבניות מבניות, המערכת בונה עץ פריסה היררכי המשקף את האופן שבו משתמשים תופסים באופן טבעי את ארגון המסך. ייצוג זה לוכד קיבוץ ויזואלי ותלויות מבניות בין אלמנטים של ממשק המשתמש. הפריסה שחולצה עוברת לאחר מכן זיקוק באמצעות אופטימיזציה קוגניטיבית על ידי החלת עקרונות עיצוב ממוקד-משתמש. אלו כוללים קיבוץ גשטלט עבור צבירה ויזואלית, חוק פיטס (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. האימון בוצע באמצעות אופטימייזר gradient descent סטוכסטי (SGD) עם קצב למידה של 0.001, גודל אצווה (batch size) של 16, ועד 60 תקופות (epochs). הוחל מנגנון עצירה מוקדמת (early stopping) למניעת התאמת יתר (overfitting) באמצעות קבוצת תיקוף המהווה 20% מהנתונים. למרות שהאימון הוגדר לעד 60 תקופות, התכנסות הושגה בדרך כלל מוקדם יותר באמצעות עצירה מוקדמת המבוססת על הפסד התיקוף (validation loss). ערכי המומנטום ודעיכת המשקל (weight decay) נקבעו ל-0.9 ו-0.0005, בהתאמה. העשרת הנתונים (data augmentation) כללה נורמליזציה, היפוך אופקי אקראי, וכן חיתוך ושינוי גודל אקראיים.

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

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

מערך נתונים	סה"כ התמונות הזמינות	תמונות ששימשו במחקר	המטרה במסגרת המוצעת
מאגר הנתונים RICO³⁰	66,261	4,000	זיהוי רכיבי ממשק משתמש, הפקת פריסה מבנית
מאגר הנתונים ENRICO²⁹	1,464	1,000	למידת תבניות עיצוב, מידול עקביות פריסה
מאגר נתוני צבעי ממשקי משתמש של Guo¹	128	128	חילוץ תבנית צבעים, הערכה תפיסתית של צבעים
סך הכל משולב	67,853	5,128	סט נתונים מקיף לזיהוי, פריסה ומידול צבע

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

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

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

מאגרי המידע RICO, ENRICO ומאגר ה-UI Color של Guo תומכים יחד בשלושת מרכיבי הליבה הפונקציונליים של מסגרת העבודה המוצעת לאב-טיפוס אוטומטי של ממשקי משתמש (UI): זיהוי רכיבים, מידול פריסה ואופטימיזציה תפיסתית של צבעים. מאגר הנתונים RICO מכיל אוסף רחב של למעלה מ-66,000 מסכי UI לנייד ומשמש בעיקר לאימון מודול זיהוי הרכיבים. הגיוון שבו מאפשר למודל Faster R-CNN ללמוד ייצוגים חסונים של אלמנטים נפוצים ב-UI, כגון כפתורים, תמונות ושדות טקסט, במגוון רחב של אפליקציות. הדבר מבטיח זיהוי ומיקום מדויקים של רכיבי UI תחת תנאי עיצוב משתנים. מאגר הנתונים ENRICO מספק מסכי UI באיכות גבוהה עם תיוגי תבניות, לצורך למידה של קשרים מבניים ותבניות פריסה. הוא מאפשר למערכת להבין קשרים בין-רכיביים, ארגון היררכי ותבניות עיצוב נפוצות. מאגר נתונים זה ממלא תפקיד קריטי במידול מבני פריסה ובאכיפת עקביות בין מסכים שונים, מה שמאפשר למסגרת העבודה לייצר פריסות התואמות למוסכמות עיצוב מקובלות. לעומת זאת, מאגר ה-UI Color של Guo משמש ספציפית למידול צבעים תפיסתי וקוגניטיבי. בניגוד ל-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. סכימה שהוגדרה מראש נקבעה לפני הסימון כדי לסווג אלמנטים של ממשק המשתמש לקטגוריות כגון כפתור, טקסט, תמונה, אייקון ומכל (container). עבור ייצוג תיבות החסימה, הוחלה מערכת צירים אחידה, ומידע היררכי נבנה על בסיס מערכות יחסים מרחביות בין אלמנטים והקשרי הורה-ילד שלהם בעץ הפריסה. בנוסף, נקבעו הנחיות כדי להבטיח סימון עקבי של אלמנטים, טיפול נכון ברכיבים חופפים ואכיפת ספי גודל מינימליים במערכי הנתונים RICO, ENRICO ו-Guo.

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

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

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

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

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

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

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

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

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

כדי לזהות קבוצות פריסה, נעשה שימוש ב-DBSCAN. אלגוריתם ה-DBSCAN משתמש בשני פרמטרים: (1) ε = המרחק המקסימלי בין רכיבים שכנים ו-(2) = מספר הרכיבים המינימלי הנדרש להיווצרות צביר. עבור ניתוח זה, פרמטרי ה-DBSCAN נבחרו באופן אמפירי בהתבסס על רזולוציית ממשק המשתמש (UI) הנורמלית (480 × 800 pixels). פרמטר מרחק השכנות נקבע כ-ε = 50 pixels כדי ללכוד קרבה מרחבית בין רכיבי UI סמוכים. מספר הנקודות המינימלי הנדרש להיווצרות צביר נקבע כ-MinPts = 3 כדי למנוע היווצרות של קבוצות לא משמעותיות או שגויות של רכיבי 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 contrast ratios) בהתאם להנחיות WCAG. הפלטה הסופית מתקבלת על ידי אופטימיזציה של פונקציית מטרה משולבת המאזנת בין ריווח תפיסתי, דרישות ניגודיות ומגבלות הרמוניית צבעים. דבר זה מבטיח שסכמות הצבעים של ממשק המשתמש (UI) שנוצרו לא יהיו רק מושכות ויזואלית, אלא גם קריאות, נגישות ועקביות מבחינה תפיסית.

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

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

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

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

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

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

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

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

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

תוצאות

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

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

תוצאות ניסיוניות מדגימות כי מודל הזיהוי המבוסס על Faster R-CNN משיג דיוק של 92.4% בזיהוי רכיבים ומכליל ביעילות סגנונות ממשק משתמש (UI) ניידים מגוונים. יתרה מכך, שילוב של השראות דפוס ENRICO משפר את הסקת המסקנות לגבי הפריסה, מה שמוביל לעלייה של 18.7% בבהירות הפריסה ולשיפור בשימור סדר הקריאה. בניסויי הערכת צבע, מודול מידול הצבעים המונהג על ידי CAM02-UCS מייצר פלטות הרמוניות יותר ב-24.5%, על פי הערכות מעצבים, ומשיג אחידות תפיסתית גבוהה יותר בהשוואה לשיטות מסורתיות ליצירת פלטות המבוססות על RGB ו-LAB. בנוסף, מידול עקביות רב-מסכי משיג שיפור של 28% ביישור בין מסכים ובבעקביות הטיפוגרפיה. מחקרי משתמש שכללו 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 Processor, 64 GB RAM
מערכת הפעלה	Ubuntu 22.04 LTS
מסגרת למידה עמוקה	PyTorch 2.0
Backbone של Faster R-CNN	ResNet-50 + FPN
רזולוציית תמונה	480 × 800 (נורמליזציה לכל מערכי הנתונים)
גודל Batch לאימון	8
אופטימייזר	AdamW (LR = 1e−4, Weight Decay = 0.01)
Epochs	40
מרחב מידול צבעים	CAM02-UCS
קישור (Clustering) להוצאת פלטת צבעים	K-means (k = 5)
קישור (Clustering) של פריסה	DBSCAN (ε = 20, min_samples = 3)

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

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

i) ביצועי זיהוי רכיבים, שנותחו באמצעות דיוק (precision), רגישות (recall), מדד F1, חפיפה מעל איחוד (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). דיוק גבוה מרמז על כך שרוב תיבות התחום (bounding boxes) שנחזו תואמות לרכיבי 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, וזאת הודות לקבוצה גדולה ומגוונת של תוויות רכיבי UI. ENRICO מראה ציונים נמוכים יותר מעט בשל מבנהו המפושט יותר ומספר קטן יותר של סוגי רכיבים מתויגים. מערך הנתונים Guo רשם את ציון ה-F1 הנמוך ביותר (0.81), ככל הנראה בשל שונות ויזואלית גדולה יותר ופחות תבניות פריסה סטנדרטיות, ההופכות את הזיהוי למאתגר יותר. באופן כללי, תוצאות אלו מאשרות כי המודל שומר על ביצועי זיהוי רכיבים חסונים על פני סגנונות עיצוב UI ומאפייני מערכי נתונים שונים.

מערך נתונים	דיוק	השבה	מדד F1
RICO	0.91	0.88	0.89
אנריקו	0.87	0.84	0.85
גואו	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 מחמירים יותר ממחישה כי מורכבות מערך הנתונים משפיעה ישירות על חוסן הזיהוי.

figure-results-1
איור 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), מה שמאשש כי מודל הזיהוי המוצע מראה הכללה מיטבית במערכי נתונים גדולים ומובנים יותר. מדד ממוצע מחמיר זה מדגיש ירידות ביצועים קלות שעשויות שלא להיות גלויות תחת הערכה של סף בודד. ממצאים אלו מעידים כי, למרות שהמודל מפגין ביצועים חזקים בכל מערכי הנתונים, גיוון רב יותר בפריסה ושונות ברכיבים מציבים אתגרים נוספים תחת הערכה קפדנית מסוג COCO. תוצאות הזיהוי מוצגות באיורים 3 ו-4, המספקים השוואות כמותיות של mAP ברמות IoU שונות.

figure-results-2
איור 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) מיושרים עם קווי יישור אידיאליים, כגון קווי guia לשמאל, ימין, למעלה או קווי בסיס (baseline). AE נמוך יותר מעיד על כך שהרכיבים מסודרים באופן עקבי עם עיוות חזותי מינימלי, מה שמשפר את הקריאות ואת בהירות העיצוב הכללית. מדד זה חשוב במיוחד להערכת זיקוק פריסה קוגניטיבי, שכן חוסר יישור משבש את הזרימה החזותית ומגביר את המורכבות הנתפסת. איור 5 ממחיש את ה-AE במאגרי הנתונים RICO, ENRICO ו-Guo, כפי שנמדד כסטיית פיקסלים ממוצעת מקווי יישור אידיאליים. התוצאות מראות ש-RICO משיג את ה-AE הנמוך ביותר (4.2 px), מה שמעיד על כך שרכיבי ה-UI במאגר נתונים זה מציגים דפוסים מבניים עקביים יותר, המקלים על היישור עבור המודל. ENRICO נמצא במקום השני עם סטיית יישור מתונה של 6.1 px, המשקפת שילוב של פריסות מסך מובנות היטב וגיווניות. מאגר הנתונים Guo רשם את ה-AE הגבוה ביותר (7.4 px), בשל הגיוון הרב יותר במיקום הרכיבים ומבני פריסה שאינם סטנדרטיים, המאתגרים את הזיקוק המבוסס על יישור. באופן כללי, תוצאות אלו מדגימות כי המודל שומר על דיוק יישור גבוה במגוון מאגרי נתונים, למרות המורכבות הגוברת של הפריסה.

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

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

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

figure-results-4
איור 6. התפלגות דיוק הקיבוץ (grouping accuracy) במערכי נתונים שונים. תרשים הקופסה (box plot) מציג את דיוק הקיבוץ המבוסס על עקרונות גשטאלט במערכי הנתונים RICO, ENRICO ו-Guo’s UI Color. הקופסאות מייצגות את הטווח הבינ-רבעוני, הקו המרכזי מציין את החציון, והשערים (whiskers) מציינים את טווח הערכים. ציר ה-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 מגוונים.

figure-results-5
איור 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 הנמוכים ביותר, מאחר והוא מתמקד בעיקר במאפייני צבע ולא בפריסה מבנית, מה שהופך את העקביות בין מספר מסכים למאתגרת יותר. באופן כללי, תוצאות אלו מעידות כי מודול עקביות בין-מסכי המשתמש המוצע פועל בצורה היעילה ביותר על מאגרי נתונים מכווני-תבנית, בעודו מספק שיפורים מדידים בכל מאגרי הנתונים.

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

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

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

מדד	הגדרה	השיטה המוצעת	קו בסיס¹	שיפור (%)
ΔE (CAM02-UCS)	הבדל צבע תפיסתי	4.12	7.85	נמוך ב-47.5%
יחס ניגודיות (WCAG)	קריאות של זוגות רקע-קדמה (FG–BG)	6.21	4.38	41.80%
CHI (מדד הרמוניה של צבעים)	גוון & הרמוניה כרומטית	0.83	0.61	36.10%
מדד גיוון צבעים (CDS - Color Diversity Score)	שונות ב-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 grouping), ריווח מותאם והיררכיה חזותית משופרת, אשר יחד מקלים על ניווט אינטואיטיבי יותר. מדד SUS מספק ציון שמישות סטנדרטי הנע בין 0 ל-100, כאשר ערכים גבוהים יותר מעידים על שמישות ובהירות משופרות. המסגרת המוצעת השיגה ציוני SUS גבוהים יותר בהשוואה לשיטות הבסיס, מה שמשקף שיפורים הן בפריסה המבנית והן בבהירות הצבעים. יישור משופר, ריווח וזרימת ניווט תרמו לממשקים שהמשתמשים תפסו כאינטואיטיביים וקוהרנטיים יותר מבחינה תפקודית. מדד AHS, הנמדד בסולם ליקרט בן 7 נקודות, מעריך את המשיכה החזותית הנתפסת ואת הרמוניית הצבעים. ממשקים שנוצרו באמצעות מודול מידול הצבעים המבוסס על CAM02-UCS השיגו ערכי AHS גבוהים יותר, המעידים על מעברי צבע חלקים יותר ופלטות צבעים מאוזנות יותר חזותית. המשתתפים העדיפו בעקביות ממשקים אלה בשל ניגודיות משופרת, קוהרנטיות של גוונים וצמצום של עומס חזותי, מה שמדגיש את חשיבות מידול הצבעים התפיסתי בעיצוב ממשקי משתמש (UI). מדד SET מודד את הזמן הנדרש למשתמשים כדי לאתר אלמנטים של ממשק משתמש במהלך משימות חיפוש חזותי. ערכי SET נמוכים יותר מעידים על ארגון והיררכיה חזותית משופרים. המסגרת המוצעת הפחיתה משמעותית את ה-SET בכל מערכי הנתונים, ובכך הוכיחה ששילוב של קיבוץ גשטלט, ריווח מונחה-קשב ומבני פריסה מזוקקים מאפשר אינטראקציה מהירה ויעילה יותר. מדד CSCR מעריך את עקביות עיצוב ממשק המשתמש על פני מספר מסכים. ציונים גבוהים יותר מעידים על רציפות טובה יותר בפריסה, בצבע ובארגון המבני. המסגרת המוצעת השיגה ערכי CSCR גבוהים יותר, מה שמשקף את יעילותו של מודול העקביות הרב-מסכית בשמירה על סכמות צבעים, ריווח ומבנים היררכיים יציבים על פני הממשקים.

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

figure-results-7
איור 9. השוואה של מדדי מחקר משתמשים בין סטים של נתונים. תרשים העמודות מקבוצים משווה מדדי מחקר משתמשים בין סטי הנתונים RICO, ENRICO ו-Guo’s UI Color. ציר ה-x מייצג מדדי הערכה, הכוללים את מדד עומס המשימות של נאס"א (NASA-TLX), סולם שמישות המערכת (SUS), ציון הרמוניה אסתטית (AHS), זמן יעילות מבנית (SET), ושיעור עקביות בין מסכים (CSCR), בעוד שציר ה-y מציין את הציונים המתאימים. העמודות מייצגות את הביצועים עבור כל סט נתונים, וממחישות הבדלים בשמישות, בעומס קוגניטיבי, באיכות אסתטית ובעקביות הממשק. NASA-TLX (0–100, נמוך יותר הוא טוב יותר), SUS (0–100, גבוה יותר הוא טוב יותר), AHS (1–7 Likert), SET (s, נמוך יותר הוא טוב יותר), ו-CSCR (0–1, גבוה יותר הוא טוב יותר). אנא לחצו כאן כדי להציג גרסה גדולה יותר של איור זה.

תיקוף סטטיסטי של היפותזות

כדי לתקף עוד יותר את ההשערות המוצעות (H1–H4), בוצעו בדיקות מובהקות סטטיסטיות עבור מדדי הערכה מרכזיים, הכוללים איכות פריסה, עומס קוגניטיבי, הרמוניה של צבעים ומדדי שמישות (טבלה 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 study)

מחקר האבליציה (ablation study) מעריך את התרומה של כל מודול במסגרת המוצעת על ידי הסרה שיטתית של רכיבים בודדים וניתוח השפעתם על איכות הפריסה (layout), מידול הצבעים וביצועי הגילוי. איכות הפריסה מוערכת באמצעות AE, GA, ROA ו-LCS. מדד ה-AE משקף את הסטייה המיקומית של אלמנטים בממשק המשתמש (UI), כאשר ערכים גבוהים יותר מעידים על מבנה מרחבי חלש יותר. GA מעריך עד כמה הרכיבים מאורגנים ביעילות לפי עקרונות הגשטאלט. 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; מערך נתוני צבעי ממשק משתמש של Guo: https://github.com/guozhongke/UI-Color-Dataset.

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

דיון

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

הממצאים מדגימים שיפורים בעלי מובהקות סטטיסטית בישימות, בארגון המבני ובאיכות התפיסית (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²³^,²⁴, ו-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 מהדור הבא, שאינן רק מדויקות מבחינה חזותית, אלא גם יעילות קוגניטיבית, הרמוניות תפיסתית וניתנות לפריסה מעשית.

גילויים

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

למחברים אין ניגודי עניינים.

תודות

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

המחברים מודים על התמיכה האקדמית והמוסדית שניתנה על ידי Wuhan College of Foreign Languages & Foreign Affairs, Keimyung University, ו-Shanghai Institute of Commerce and Foreign Languages במהלך השלמת מחקר זה.

חומרים

רשימת החומרים שנעשה בהם שימוש במאמר זה
שם	חברה	מספר קטלוג	הערות
מעבד (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

מקורות

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Weingerl P. Automated image-based user interface color theme generation. Appl Sci. 2024;14:2850.
Feng Z, Fang J, Cai B, Zhang Y. Guis2Code: Computer vision tool to generate code automatically from graphical user interface sketches. In: Proc Int Conf Artif Neural Netw; 2021; p. 53–65.
Chen C, Zhang X, Yang Y, Li Y. GalleryDC: Design search knowledge discovery through auto-created GUI component gallery. Proc ACM Hum Comput Interact. 2019;3:1–22.
Chen J, et al. Object detection for graphical user interface: Old-fashioned deep learning combination. In: Proc ACM Eur Softw Eng Conf Symp Found Softw Eng; 2020; p. 1202–1214.
Xie M, et al. UIED: Hybrid tool for GUI element detection. In: Proc ACM Eur Softw Eng Conf Symp Found Softw Eng; 2020; p. 1655–1659.
Gijsenij A, et al. Determining key colors from a design perspective using dE-means color clustering. Color Res Appl. 2023;48:69–87.
Yuan LP, et al. InfoColorizer: Interactive recommendation of color palettes for infographics. IEEE Trans Vis Comput Graph. 2022;28:4252–4266.
Cao Y, et al. Influences of color salience and location of website links on user performance and affective experience. Int J Hum Comput Interact. 2021;37:547–559.
Liu W, Cao Y, Proctor RW. App icon color and border shape influence visual search efficiency and user experience. Int J Ind Ergon. 2021;84:103160.
Yamin PAR, Park J, Kim HK, Hussain M. Effects of button colour and background on augmented reality interfaces. Behav Inf Technol. 2023;43:663–676.
Deng L, Zhang ZR, Zhou FY, Liu RY. Effects of app icon border form and interface background color saturation. Adv Multimed. 2022;2022:1166656.
Weingerl P, Hladnik A, Javoršek D. Machine learning model for extracting image prominent colors. Color Res Appl. 2020;45:409–426.
Huang K, et al. WovenProbe: Probing possibilities for on-skin systems. In: Proc ACM Des Interact Syst Conf; 2021; p. 1193–1207.
Dewez D, Guillemot C, Bailly G, Isenberg T. Dual body representations during an isomorphic 3D manipulation. IEEE Trans Vis Comput Graph. 2022;28:2047–2057.
Kim J, Kim C, Nam KY. ThinkWrite: Design interventions for online petition deliberation. In: Proc CHI Conf Hum Factors Comput Syst Ext Abstr; 2022.
Gao L, Wang Y, Müller S, Hudson SE. DataLev: Mid-air data physicalisation using acoustic levitation. In: Proc CHI Conf Hum Factors Comput Syst; 2023; p. 1–14.
Khorsandi PM, Ogata M, Rekimoto J, Inami M. FabriCar: In-car media interactions using e-textile sensors. In: Proc ACM Des Interact Syst Conf; 2023; p. 764–776.
Zhang Z, Ding Y, Huang C. Automatic front-end code generation via multi-head attention. In: Proc Int Conf Comput Eng Appl; 2023; p. 869–872.
Jain V, et al. Sketch2code: Transformation of sketches to UI using deep neural network [preprint]. arXiv:1910.08930; 2019.
Chai Y, et al. Dynamic prototype network for few-shot malware detection. IEEE Trans Knowl Data Eng. 2023;35:4754–4766.
Qiu J, et al. AI security in 5G networks: Adversarial examples. IEEE Veh Technol Mag. 2020;15:95–100.
Qiu J, et al. Automatic concept extraction from big data in smart city. IEEE Trans Comput Soc Syst. 2020;7:225–233.
Xie M. UI2CODE: Computer vision-based reverse engineering of UI design [Internet]. GitHub; 2021. Available from: https://github.com
Wang C, Bochkovskiy A, Liao HYM. CSPNet: Backbone enhancing learning capability of CNNs. In: Proc IEEE Conf Comput Vis Pattern Recognit Workshops; 2020; p. 1571–1580.
Hui M, et al. Unifying layout generation with decoupled diffusion model. In: Proc IEEE Conf Comput Vis Pattern Recognit; 2023; p. 18434–18443.
Wang Y, et al. Dolfin: Diffusion layout transformers without autoencoder. In: Proc Eur Conf Comput Vis; 2024; p. 513–530.
Sobolevsky A, et al. GuiLGet: GUI layout generation with transformer [preprint]. arXiv:2304.09012; 2023.
Lu Y, et al. UI layout generation with LLMs guided by UI grammar [preprint]. arXiv:2310.15455; 2023.
Leiva LA, Hota A, Oulasvirta A. ENRICO: A dataset for mobile UI design modeling. In: Proc Int Conf Hum Comput Interact Mobile Devices Serv; 2020.
Li G, et al. Learning to denoise mobile UI layouts. In: Proc CHI Conf Hum Factors Comput Syst; 2022; p. 1–15.
Beltramelli T. pix2code: Generating code from a GUI screenshot. In: Proc ACM SIGCHI Symp Eng Interact Comput Syst; 2018.
Zheng G, et al. LayoutDiffusion: Controllable diffusion model. In: Proc IEEE Conf Comput Vis Pattern Recognit; 2023; p. 18424–18433.

הדפסות חוזרות והרשאות

בקש הרשאה לשימוש חוזר בטקסט או באיורים של מאמר JoVE זה

בקש הרשאה

תגיות

Engineering All Prototyping Cognitive and Visual Design User Interfaces color modelling component detection

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

במאמר זה

סיכום

תקציר

מבוא

פרוטוקול

תוצאות

דיון

גילויים

תודות

חומרים

מקורות

הדפסות חוזרות והרשאות

תגיות

מאמרים קשורים