إطار عمل مؤتمت لإنشاء النماذج الأولية لواجهات المستخدم يدمج مبادئ التصميم المعرفي والبصري لتحسين قابلية الاستخدام ووضوح التخطيط

ملخص

تقدم هذه الدراسة إطار عمل لأتمتة تصميم النماذج الأولية لواجهات المستخدم، يدمج بين مبادئ التصميم المعرفي، ونمذجة الألوان الإدراكية، والتعلم العميق. يعمل النظام على تحسين إمكانية الوصول، ووضوح التخطيط، والتناغم اللوني، والاتساق عبر الشاشات المختلفة، مما يؤدي إلى تصميمات واجهة متماسكة ومركزة حول المستخدم.

الملخص

يتطلب التصميم الفعال لواجهة المستخدم (UI) توازناً متناغماً بين الجاذبية البصرية، وسهولة الاستخدام المعرفية، واتساق التخطيط. ومع ذلك، تركز نهج توليد واجهات المستخدم التلقائية الحالية بشكل أساسي على المظهر البصري أو اكتشاف المكونات، وتفتقر إلى إطار عمل موحد يدمج المبادئ المعرفية، والذكاء اللوني، والاستدلال الهيكلي. علاوة على ذلك، تعاني الطرق الحالية من محدودية تعميم التخطيط، وضعف القابلية للتفسير، واختيار ألوان ثابت، وسلوك غير متسق عبر الشاشات. وفي هذا السياق، يقترح هذا العمل إطار عمل مؤتمت للنماذج الأولية لواجهة المستخدم يدمج اكتشاف المكونات القائم على الشبكة العصبية الالتفافية القائمة على المناطق الأسرع (Faster R-CNN) والنمذجة اللونية الإدراكية الموجهة بفضاء الألوان الموحد CIECAM02 (CAM02-UCS)، والمعززة بمبادئ التصميم المعرفي والبصري. تُستخدم Faster R-CNN لتحديد مكونات واجهة المستخدم واستنتاج الهياكل الهرمية من مجموعات بيانات الواجهات واسعة النطاق. كما تقوم وحدة توليد ألوان محسنة بتحليل صور العلامة التجارية أو الصور المرجعية لضمان سمات لونية متناغمة، وموحدة إدراكياً، ومتوافقة مع معايير سهولة الاستخدام باستخدام CAM02-UCS. ويتم تحسين هذه المخرجات بشكل أكبر من خلال قواعد التصميم المعرفي، بما في ذلك تجميع جشتالت (Gestalt grouping)، وقانون فيتس (Fitts’ law)، وقانون هيك (Hick’s law)، والتباعد القائم على الانتباه، ونمذجة التسلسل الهرمي البصري، وذلك لتوليد تخطيطات واجهة مستخدم منقحة وموجهة نحو المهام تلقائياً. وتظهر التجارب التي أُجريت على مجموعات بيانات RICO وENRICO وGuo’s UI Color أن النظام المقترح يحقق دقة اكتشاف للمكونات بنسبة 92.4%، ويحسن وضوح التخطيط ودقة ترتيب القراءة بنسبة 18.7%، وينتج لوحات ألوان صنفها المصممون بأنها أكثر تناغماً بنسبة 24.5% مقارنة بالطرق المرجعية. كما تشير تقييمات المستخدمين إلى انخفاض بنسبة 31% في الحمل المعرفي المدرك وزيادة بنسبة 28% في اتساق التصميم عبر الشاشات. وتثبت هذه النتائج أن الجمع بين الفهم الهيكلي القائم على التعلم العميق والنمذجة اللونية المرتكزة إدراكياً ومبادئ التصميم المعرفي ينتج نماذج أولية لواجهة المستخدم عالية الكفاءة، ومتماسكة جمالياً، وسهلة الاستخدام. ويؤسس هذا الإطار نهجاً مبتكراً وشاملاً للنماذج الأولية المؤتمتة لواجهة المستخدم الذكية والمتمركزة حول الإنسان.

المقدمة

تُعد واجهات المستخدم الرسومية (GUIs) وسيطاً أساسياً للتواصل بين البشر وأنظمة الكمبيوتر، حيث تؤثر بشكل كبير على سهولة الاستخدام، وإمكانية الوصول، وتجربة المستخدم (UX) بشكل عام^1,2. وتعتمد أنظمة البرمجيات الحديثة على واجهات بديهية وجذابة بصرياً لجذب المستخدمين والحفاظ عليهم. وتقليدياً، يتضمن تصميم واجهة المستخدم إنشاء مخططات رسومية يقوم المهندسون لاحقاً بترجمتها إلى كود برمجي للواجهة الأمامية (front-end code). ومع ذلك، فإن الاختلافات في البروتوكولات الخاصة بكل منصة عبر أنظمة التشغيل المختلفة تتطلب تكييفاً متكرراً، مما يزيد من تعقيد عملية التطوير والجهد المبذول فيها. وبناءً على ذلك، برز التوليد الآلي لكود واجهة المستخدم كاتجاه بحثي مهم، مما يقلل من الجهد اليدوي ويعزز كفاءة التطوير.

تجمع النهج المبكرة لتوليد واجهات المستخدم (UI) آلياً بين تقنيات معالجة الصور التقليدية ونماذج التعلم العميق للكشف عن المناطق وتصنيفها^3,4. وفي الوقت الحالي، تطبق الاستراتيجيات السائدة لتوليد أكواد واجهات المستخدم الرسومية (GUI) تقنيات الرؤية الحاسوبية لتحليل صور واجهة المستخدم وتحويلها إلى تمثيلات هيكلية للواجهة الأمامية (front-end)^5,6,7. وبينما تعتمد طرق معالجة الصور على ميزات مصممة يدوياً، تعمل نهج التعلم العميق على استخراج تمثيلات هرمية من مجموعات بيانات واسعة النطاق. ونتيجة لذلك، استكشف الباحثون نهجاً هجينة تجمع بين التعلم العميق وتقنيات معالجة الصور المتخصصة في المجال لتحسين المتانة والدقة.

يعد اللون عاملاً حاسماً آخر في تصميم واجهة المستخدم (UI)، حيث يؤثر على إدراك المستخدم، وسهولة الاستخدام، والجاذبية الجمالية¹. ويصبح الحفاظ على الاتساق بين محتوى الصورة ومخططات ألوان واجهة المستخدم أمراً صعباً عندما تختلف المدخلات المرئية في التدرج اللوني والسياق^8,9,10. وبناءً على ذلك، ركزت أبحاث مكثفة على التوليد الآلي للوحات الألوان ونمذجة الألوان الإدراكية. وتشمل الطرق الحالية لتوليد الألوان تقنيات تعتمد على فضاء الألوان CIELAB¹¹. وتستخدم مناهج أخرى خوارزميات التجميع، مثل k-means، لاستخراج الألوان السائدة من الصور¹². ونتيجة لذلك، اعتمدت الأعمال الحديثة بشكل متزايد على مناهج قائمة على البيانات وتعلم الآلة لنمذجة الألوان.

بالتوازي مع ذلك، أدت مناهج التعلم العميق إلى تحسين اكتشاف مكونات واجهة المستخدم وفهم التخطيط بشكل كبير. فقد مكنت الشبكات العصبية من إجراء تحليل هيكلي أكثر دقة لواجهات الهاتف المحمول¹³. ومع ذلك، تركز هذه الطرق بشكل أساسي على دقة الاكتشاف وغالباً ما تغفل عن جوانب أعلى مستوى مثل سهولة الاستخدام المعرفية، والتسلسل الهرمي للتخطيط، وكفاءة التفاعل. كما تم اقتراح نماذج توليدية لتخليق تخطيط واجهة المستخدم^14,15، ولكنها تواجه تحديات في الحفاظ على الاتساق عبر الشاشات وتقديم قرارات تصميم قابلة للتفسير¹⁶. وتركز مناهج أخرى على التشابه البصري أو جودة العرض ولكنها تفتقر إلى إطار عمل موحد يجمع بين دلالات المكونات، والتناغم اللوني، وقيود سهولة الاستخدام¹⁷. ويعد التعرف على النصوص أمراً مهماً أيضاً لفهم محتوى واجهة المستخدم؛ حيث تتيح تقنيات مثل الشبكات العصبية التكرارية الالتفافية (CRNNs) التعرف الدقيق على أنماط النصوص المعقدة في شاشات الواجهة^18,19,20.

تم اقتراح عدة أنظمة لتوليد كود واجهة المستخدم (UI) من المخططات أو الصور. يستخدم نظام Sketch2Code تقنية اكتشاف الكائنات لتحويل المخططات إلى تمثيلات برمجية^21,22، إلا أنه يتأثر بجودة الصور. بينما يوفر نظام REDRAW مساراً مؤتمتاً لجمع البيانات وتدريب النماذج، حيث يدمج بين الشبكات العصبية التلافيفية والمتكررة لتوليد تمثيلات هيكلية لواجهة المستخدم^23,24. وقد قدمت أعمال لاحقة مقاييس تقييم محسنة لتقدير جودة واجهة المستخدم المولدة²⁵. وتشمل المنهجيات الأكثر حداثة نماذج قائمة على الانتشار (diffusion-based) ونماذج قائمة على المحولات (transformer-based) لتوليد التخطيطات، مثل محولات تخطيط الانتشار دون استخدام طرق المشفر التلقائي، وتوليد تخطيط واجهة المستخدم الرسومية باستخدام رسوم ترتيب واجهة المستخدم الرسومية القائمة على المحولات، وتوليد تخطيط واجهة المستخدم بتوجيه من النماذج اللغوية الكبيرة^26,27,28. ويقدم الجدول 1 نظرة عامة مقارنة لهذه المنهجيات.

المراجع والمنهج(ات) الرئيسية	الهدف	المزايا	العيوب
توليد سمات ألوان واجهة المستخدم بناءً على الصور بشكل آلي: استخراج الألوان البارزة + نمذجة الألوان الإدراكية CAM02-UCS¹	توليد سمات ألوان واجهة المستخدم تلقائياً من الصور المرجعية مع تحسين التناغم وسهولة الاستخدام.	تأسيس إدراكي قوي (CAM02-UCS)؛ يوازن بشكل صريح بين التناغم وسهولة الاستخدام (التباين والتنوع)؛ يتضمن تنفيذاً قائماً على الويب وتقييماً من قبل المصممين.	يركز فقط على اللون/السمة (وليس على التخطيط أو هيكلية المكونات)؛ يعتمد على القواعد/الاستدلالات بدلاً من التركيب الآلي لواجهة المستخدم المتعلم بالكامل.
توحيد توليد التخطيط باستخدام نموذج انتشار مفكك (LDGM)²⁵	توليد تخطيطات موحدة ومرنة للمشاهد الرسومية وواجهات المستخدم.	تنوع وقابلية تحكم متطورة في توليد التخطيطات؛ يدعم التوليد الشرطي وأنواعاً متعددة من السمات.	قد تظهر مخرجات نماذج الانتشار مشكلات في المحاذاة أو تفاصيل التخطيط الدقيقة ما لم يتم تقييدها؛ تعقيد أعلى في النموذج وتكلفة أكبر في الاستنتاج.
محولات تخطيط الانتشار بدون طرق الترميز التلقائي: محول + انتشار لتوليد التخطيط (بدون ترميز تلقائي)²⁶	تحسين الدقة والمحاذاة لمعايير توليد التخطيط (مقاييس FID والمحاذاة والتداخل).	التقاط أفضل للارتباطات الدلالية بين الكائنات المتجاورة؛ أداء قوي في مقاييس FID والمحاذاة.	يركز بشكل أساسي على هندسة التخطيط (المواقع، الأحجام، الفئات) بدلاً من دلالات واجهة المستخدم.
توليد تخطيط واجهة المستخدم الرسومية باستخدام نماذج قائمة على المحولات من رسوم ترتيب واجهة المستخدم الرسومية (GUI-AGs)²⁷	إنشاء تخطيطات لواجهة المستخدم الرسومية من قيود موضعية/بيانية لمساعدة المصممين.	تلتقط التمثيلات البيانية القيود العلاقاتية؛ يتيح المحول توليداً مرناً مشروطاً بالقيود.	قد يتطلب رسوماً بيانية صريحة للقيود من المصممين؛ تركيز محدود على مقاييس الألوان وسهولة الاستخدام.
توليد تخطيط واجهة المستخدم باستخدام النماذج اللغوية الكبيرة الموجهة بقواعد واجهة المستخدم: النماذج اللغوية الكبيرة (LLMs) + قواعد واجهة مستخدم هرمية²⁸	استكشاف النماذج اللغوية الكبيرة لتوليد التخطيطات وتحسين القابلية للتفسير/التحكم عبر تمثيلات القواعد.	قابلية تحكم وتفسير عالية المستوى؛ يمكن الاستفادة من التعلم في السياق من النماذج اللغوية الكبيرة (من نوع GPT).	عمل في مراحله الأولى مع تحقق تجريبي محدود؛ تصميم القواعد ومدى متانتها عبر واجهات المستخدم

الجدول 1: مقارنة بين الطرق الحالية لنمذجة ألوان واجهة المستخدم وتوليد التخطيط. يلخص الجدول النهج التمثيلية لتصميم واجهة المستخدم، بما في ذلك توليد سمات الألوان، وتوليد التخطيط القائم على الانتشار، والطرق القائمة على المحولات (transformer)، وتوليد التخطيط الموجه بنماذج اللغات الكبيرة. ويتم عرض التقنية الأساسية، والهدف، والمزايا، والقيود لكل طريقة، مع تسليط الضوء على الاختلافات في النمذجة الإدراكية، والقدرة على توليد التخطيط، وقابلية التحكم، واعتبارات سهولة الاستخدام.

على الرغم من هذه التطورات، لا يزال هناك قصور أساسي: إذ لا يوجد نظام حالي يدمج بشكل مشترك بين اكتشاف المكونات، ونمذجة الألوان الإدراكية، ومبادئ التصميم المعرفي، واتساق التخطيط عبر الشاشات المتعددة ضمن إطار عمل واحد متكامل من البداية إلى النهاية¹. وعادةً ما تعمل النهج الحالية على تحسين جانب واحد أو جانبين فقط — مثل الاكتشاف أو التخطيط أو اللون — دون النظر في الاعتمادات المتبادلة بينها. ويسلط هذا التجزؤ الضوء على فجوة بحثية حرجة في تطوير أنظمة مؤتمتة وموحدة لعمل نماذج أولية لواجهات المستخدم تكون متمحورة حول الإنسان. وبشكل خاص، غالباً ما يتم التعامل مع مبادئ التصميم المعرفي، مثل قوانين Gestalt، وقانون Fitts، وقانون Hick، من منظور مفاهيمي بدلاً من دمجها رسمياً في النماذج الحسابية.

لمعالجة هذه المحدوديات، تقترح هذه الدراسة إطار عمل مؤتمتاً وشاملاً لإنشاء نماذج أولية لواجهات المستخدم يدمج بين اكتشاف المكونات، ونمذجة الألوان الإدراكية، ومبادئ التصميم المعرفي ضمن نظام موحد. وقد صُمم إطار العمل هذا لتحسين جودة المخطط، وتقليل العبء المعرفي، وتعزيز التناغم اللوني، وزيادة القابلية العامة للاستخدام. وقد تم التحقق من هذه التحسينات من خلال تجارب أجريت على مجموعات بيانات RICO وENRICO وGuo’s UI Color، مما أظهر فعالية الدمج بين الجوانب الهيكلية والإدراكية والمعرفية ضمن مسار مؤتمت واحد لإنشاء نماذج واجهات المستخدم الأولية. وتفترض الدراسة أن دمج اكتشاف المكونات القائم على التعلم العميق، ونمذجة الألوان الإدراكية، ومبادئ التصميم المعرفي ضمن إطار عمل موحد سيؤدي إلى تحسين جودة النماذج الأولية لواجهات المستخدم بشكل كبير مقارنة بالنهج الحالية. وتحديداً، تقترح الفرضية H1 أن إطار العمل يعزز جودة المخطط، بما في ذلك المحاذاة، والتجميع، وترتيب القراءة. وتفترض الفرضية H2 أن إطار العمل يقلل من العبء المعرفي للمستخدم. بينما تشير الفرضية H3 إلى أن نمذجة الألوان الإدراكية تحسن تنسيق الألوان والتناغم البصري. وتنص الفرضية H4 على تحسن القابلية العامة للاستخدام والجودة الجمالية للنماذج الأولية لواجهات المستخدم.

البروتوكول

تستخدم هذه الدراسة مجموعات بيانات متاحة للعموم ولا تتضمن مشاركين من البشر أو الحيوانات.

يدمج إطار عمل النمذجة الأولية الآلي لواجهات المستخدم المقترح بين الفهم الهيكلي القائم على التعلم العميق، ونمذجة الألوان الموحدة إدراكياً، ومبادئ التصميم المعرفي لإنتاج نماذج أولية لواجهات متماسكة ومركزة حول المستخدم. تبدأ المنهجية باستخدام بنية Faster R-CNN المدربة على مجموعتي بيانات RICO وENRICO للكشف عن مكونات واجهة المستخدم واستخراج علاقاتها الهرمية، مما يتيح تفسيراً دقيقاً لتخطيطات الشاشات المتنوعة. يتم بعد ذلك معالجة المكونات المكتشفة بواسطة وحدة ذكاء الألوان، التي تستخرج إشارات الألوان بناءً على العلامة التجارية أو الصور، وتنمذج التشابه الإدراكي باستخدام CAM02-UCS، وتنشئ لوحات ألوان متناغمة ومراعية للتباين ومتوافقة مع معايير إمكانية الوصول. لاحقاً، يتم تطبيق مبادئ التصميم المعرفي — بما في ذلك قوانين تجميع جشتالت، وقانون فيتس، وقانون هيك، والتباعد القائم على الانتباه، وقيود التسلسل الهرمي البصري — من خلال محرك تحسين معرفي لتدقيق التنظيم المكاني ومحاذاة المكونات. وأخيراً، تعمل طبقة استدلال التخطيط على دمج القيود الهيكلية والإدراكية والمعرفية لإنتاج نماذج أولية لواجهات مستخدم متسقة عبر شاشات متعددة توازن بين سهولة الاستخدام والجماليات والوضوح الوظيفي. يضمن هذا المسار المتكامل التماسك الإدراكي، ويقلل الحمل المعرفي، ويلتزم بمبادئ التصميم المتمحور حول الإنسان. يوضح الشكل 1 سير العمل الكامل للطريقة المقترحة.

الشكل 1. البنية العامة لإطار عمل بناء النماذج الأولية لواجهة المستخدم المؤتمتة المقترح. يوضح المخطط المسار الكامل، بدءاً من صورة واجهة المستخدم المدخلة. يتم إجراء الكشف عن المكونات باستخدام Faster R-CNN لتحديد عناصر الواجهة. ثم تتم معالجة المكونات المكتشفة باستخدام النمذجة الإدراكية القائمة على CAM02-UCS لاستخراج التسلسل الهرمي والمخطط. بعد ذلك، يتم تطبيق التحسين المعرفي باستخدام مبادئ Gestalt، وقانون Fitts، وقانون Hick، والتعديلات القائمة على الانتباه. تشير الأسهم إلى تدفق البيانات بين الوحدات، مما يؤدي في النهاية إلى مخرجات النموذج الأولي لواجهة المستخدم. يرجى النقر هنا لعرض نسخة أكبر من هذا الشكل.

نظرة عامة على إطار العمل

الشكل 1 يوضح سير العمل المتكامل لإطار عمل النمذجة الأولية الآلي لواجهة المستخدم المقترح، والذي يحول لقطة شاشة خام لواجهة المستخدم إلى نموذج أولي منقح معرفياً. تبدأ العملية بصورة واجهة المستخدم المدخلة، والتي يتم تمريرها إلى وحدة اكتشاف المكونات القائمة على Faster R-CNN. تحدد هذه الوحدة عناصر الواجهة مثل الأزرار، والأيقونات، وحقول النصوص، والحاويات، وتُخرج المربعات المحيطة المقابلة لها وتصنيفات الفئات. يتم بعد ذلك معالجة المكونات المكتشفة في مرحلة استخراج التسلسل الهرمي والتخطيط. وبناءً على العلاقات المكانية والأنماط الهيكلية، يقوم النظام ببناء شجرة تخطيط هرمية تعكس كيفية إدراك المستخدمين لتنظيم الشاشة بشكل طبيعي. يلتقط هذا التمثيل التجميع البصري والتبعيات الهيكلية بين عناصر واجهة المستخدم. يتم لاحقاً تنقيح التخطيط المستخرج من خلال التحسين المعرفي عبر تطبيق مبادئ التصميم المتمحور حول الإنسان. وتشمل هذه المبادئ تجميع Gestalt للتجميع البصري، وقانون Fitts لتحسين حجم هدف اللمس وسهولة الوصول، وقانون Hick لتقليل تعقيد اتخاذ القرار، والتباعد القائم على الانتباه لتحسين التسلسل الهرمي البصري. ونتيجة لذلك، يصبح التخطيط أكثر بديهية وقابلية للقراءة وكفاءة في تفاعل المستخدم. وأخيراً، يتم دمج التخطيط المحسّن مع نمذجة الألوان الإدراكية لإنتاج نموذج أولي متماسك لواجهة المستخدم. وتكون الواجهة الناتجة دقيقة هيكلياً، ومتناغمة بصرياً، ومتوافقة مع توقعات سهولة الاستخدام البشرية.

تم تنفيذ إطار العمل باستخدام PyTorch 2.0 على نظام Ubuntu 22.04. وأُجريت التجارب على نظام مجهز بوحدة معالجة رسومات NVIDIA RTX 4090 (بذاكرة فيديو VRAM سعة 24 GB). واستخدم نموذج Faster R-CNN بنية أساسية من نوع ResNet-50 تم تدريبها مسبقاً على مجموعة بيانات ImageNet. نُفذ التدريب باستخدام مُحسِّن الانحدار الاشتقاقي العشوائي (SGD) بمعدل تعلم 0.001، وحجم دفعة 16، ولمدة تصل إلى 60 حقبة تدريبية (epochs). وطُبقت آلية التوقف المبكر لمنع الإفراط في التخصيص (overfitting) باستخدام مجموعة تحقق تضم 20% من البيانات. ورغم أن التدريب كان مقرراً لمدة تصل إلى 60 حقبة، إلا أن التقارب عادةً ما كان يتحقق في وقت سابق من خلال التوقف المبكر بناءً على خسارة التحقق. وقد تم ضبط الزخم (Momentum) واضمحلال الوزن (weight decay) على 0.9 و0.0005 على التوالي. وشمل تعزيز البيانات عمليات التسوية، والقلب الأفقي العشوائي، والقص العشوائي وتغيير الحجم.

تجهيز مجموعة البيانات

لدعم إطار عمل النمذجة الأولية الآلية لواجهة المستخدم المقترح، تم استخدام ثلاث مجموعات بيانات متكاملة: 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 بكسل، وتحويلها إلى فضاء لوني sRGB موحد، وإعادة شرحها بصناديق إحاطة معيارية وبيانات وصفية هرمية لضمان التوافق بين مجموعات البيانات. ويرد عرض عام لمجموعات البيانات المستخدمة في هذه الدراسة في الجدول 2. تدعم مجموعة بيانات RICO الكشف واسع النطاق عن مكونات واجهة المستخدم والتحليل الهيكلي، بينما تعزز ENRICO قدرة النموذج على التعرف على أنماط التخطيط وفرض الاتساق عبر الشاشات. أما مجموعة بيانات Guo لألوان واجهة المستخدم، وبالرغم من صغر حجمها، فإنها تلعب دوراً حاسماً في تقييم التناغم اللوني الإدراكي ونمذجة التباين. وتوفر هذه المجموعات معاً أساساً شاملاً ومتوازناً لتدريب والتحقق من وتقييم إطار عمل النمذجة الأولية الآلية لواجهة المستخدم المقترح.

مجموعة البيانات	إجمالي الصور المتاحة	الصور المستخدمة في الدراسة	الغرض في الإطار المقترح
مجموعة بيانات RICO30	66,261	4,000	كشف مكونات واجهة المستخدم، استخراج المخطط الهيكلي
مجموعة بيانات ENRICO29	1,464	1,000	تعلم أنماط التصميم، نمذجة اتساق التنسيق
مجموعة بيانات غوو لألوان واجهة المستخدم (Guo’s UI Color Dataset)1	128	128	استخلاص سمة الألوان، التقييم الإدراكي للألوان
الإجمالي المدمج	67,853	5,128	مجموعة بيانات شاملة للكشف، والتخطيط، ونمذجة الألوان

الجدول 2: ملخص لمجموعات البيانات المستخدمة في الإطار المقترح. يوضح الجدول مجموعات البيانات المستخدمة في التدريب والتقييم، بما في ذلك مجموعات بيانات RICO وENRICO وGuo’s UI Color. ويرصد الجدول العدد الإجمالي للصور المتاحة، والمجموعة الفرعية المستخدمة في هذه الدراسة، والدور المحدد لكل مجموعة بيانات في الكشف عن المكونات، ونمذجة التخطيط، والتحليل اللوني الإدراكي ضمن الإطار المقترح.

تم استخدام استراتيجية أخذ عينات طبقية للحفاظ على التنوع في مكونات واجهة المستخدم، وهياكل التخطيط، وتوزيعات الألوان عبر مجموعات بيانات 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’s UI Color مجتمعة المكونات الوظيفية الثلاثة الأساسية لإطار عمل النمذجة الأولية الآلية لواجهات المستخدم المقترح، وهي: اكتشاف المكونات، ونمذجة المخطط، وتحسين الألوان الإدراكي. تحتوي مجموعة بيانات RICO على مجموعة واسعة النطاق تضم أكثر من 66,000 شاشة واجهة مستخدم للهاتف المحمول، وتُستخدم بشكل أساسي لتدريب وحدة اكتشاف المكونات؛ حيث يتيح تنوعها لنموذج Faster R-CNN تعلم تمثيلات قوية لعناصر واجهة المستخدم الشائعة، مثل الأزرار والصور وحقول النصوص عبر مجموعة واسعة من التطبيقات، مما يضمن الاكتشاف الدقيق وتحديد مواقع مكونات واجهة المستخدم في ظل ظروف تصميم متنوعة. وتوفر مجموعة بيانات ENRICO شاشات واجهة مستخدم عالية الجودة وموسومة بأنماط لتعلم العلاقات الهيكلية وأنماط المخططات، مما يمكن النظام من فهم العلاقات بين المكونات، والتنظيم الهرمي، وقوالب التصميم الشائعة. وتلعب مجموعة البيانات هذه دوراً حاسماً في نمذجة هياكل المخططات وفرض الاتساق عبر الشاشات المتعددة، مما يسمح لإطار العمل بتوليد مخططات تتماشى مع اتفاقيات التصميم المعتمدة. وفي المقابل، تُستخدم مجموعة بيانات Guo’s UI Color خصيصاً للنمذجة اللونية الإدراكية والمعرفية، وبخلاف RICO وENRICO اللتين تركزان على الجوانب الهيكلية، تحتوي هذه المجموعة على صور واجهة مستخدم منسقة مع سمات لونية مشروحة. وتُستخدم هذه الشروحات لتدريب وحدات استخراج الألوان وتقييم التناغم؛ ومن خلال رسم خرائط العلاقات اللونية في مساحات لونية إدراكية مثل CAM02-UCS، يتعلم إطار العمل توليد لوحات ألوان توازن بين التباين، وسهولة الوصول، والانسجام الجمالي. وتشكل مجموعات البيانات هذه معاً مسار عمل متكاملاً: حيث تدعم RICO اكتشاف المكونات، وتتيح ENRICO فهم أنماط المخططات والاتساق الهيكلي، وتسهل مجموعة بيانات Guo تحسين الألوان الإدراكي. ويضمن هذا التكامل أن تكون النماذج الأولية لواجهات المستخدم المُولّدة دقيقة هيكلياً، ومتناغمة بصرياً، ومحسنة معرفياً.

تَمّ إجراء التسوية (Normalization) باستخدام متوسط قدره [0.485, 0.456, 0.406] وانحراف معياري قدره [0.229, 0.224, 0.225]. وطُبقت تقنيات تعزيز البيانات، بما في ذلك الاقتصاص العشوائي والقلب الأفقي والتدوير، لتحسين تعميم النموذج. بالإضافة إلى ذلك، تم تغيير مقياس قيم البكسل لتكون ضمن النطاق [0, 1]، وتغيير حجم جميع الصور إلى دقة 480 × 800 بكسل لضمان الاتساق عبر مجموعات البيانات. وتُستخدم الصور التي تم تغيير حجمها إلى 224 × 224 بكسل لغرض التعزيز أثناء التدريب، بينما يتم الحفاظ على الدقة الأصلية البالغة 480 × 800 بكسل لتحليل المخطط. كما تم ضبط المربعات المحيطة (Bounding boxes) لتصفية التعليقات التوضيحية غير ذات الصلة باستخدام عتبات محددة مسبقاً. ولتحقيق التوحيد عبر مجموعات البيانات، تم وضع تعليقات توضيحية يدوية لجميع عناصر واجهة المستخدم باستخدام أداة التعليق التوضيحي LabelImg. كما وُضع مخطط محدد مسبقاً قبل عملية التعليق التوضيحي لتصنيف عناصر واجهة المستخدم إلى فئات مثل الزر والنص والصورة والأيقونة والحاوية. ولتمثيل المربعات المحيطة، تم تطبيق نظام إحداثيات موحد، وبُنيت المعلومات الهرمية بناءً على العلاقات المكانية بين العناصر وارتباطات الأب والابن ضمن شجرة المخطط. بالإضافة إلى ذلك، وُضعت إرشادات لضمان الاتساق في التعليق التوضيحي للعناصر، والتعامل السليم مع المكونات المتداخلة، وفرض عتبات الحد الأدنى للحجم عبر مجموعات بيانات RICO وENRICO وGuo.

تتوفر الصياغات الرياضية التفصيلية لتدريب كشف المكونات واستخراج أنماط المخطط في الملف التكميلي 1.

تم تدريب نموذج Faster R-CNN باستخدام خوارزمية SGD بزخم قدره 0.9 واضمحلال للوزن قدره 0.0005. وقد تم ضبط معدل التعلم الأولي عند 0.001 وتعديله باستخدام سياسة اضمحلال تدريجي (step decay) بناءً على أداء التحقق. أُجري التدريب لمدة تصل إلى 60 حقبة (epochs) وبحجم دفعة قدره 16. كما طُبق التوقف المبكر لمنع الإفراط في التخصيص (overfitting)، وذلك باستخدام مجموعة تحقق تشكل 20% من بيانات التدريب.

تقوم دالة التعيين f(.) بأخذ عناصر واجهة المستخدم المكتشفة كمدخلات وتنتج تمثيلاً تخطيطياً هرمياً كمخرجات. وهي تحسب علاقات التجاور بين عناصر واجهة المستخدم بناءً على المسافة المكانية ومعايير المحاذاة، وتنشئ مصفوفة تجاور لتمثيل هذه العلاقات. ثم يتم تطبيق خوارزمية تجميع، مثل DBSCAN، لتجميع المكونات ذات الصلة. وفي النهاية، يتم تنظيم العناصر المجمعة في هياكل هرمية بناءً على علاقات الأصل والفرع، مما يشكل تمثيلاً تخطيطياً منظماً.

تتوفر الصيغ التفصيلية لنمذجة التناغم اللوني وهدف التحسين الموحد في الملف التكميلي 1.

تقوم دالة الهدف هذه بصياغة رياضية لعملية دمج الكشف الهيكلي، واستنتاج التخطيط، ونمذجة الألوان الإدراكية، مما يضمن مساهمة جميع مكونات الإطار عملياً في توليد نماذج أولية لواجهة المستخدم تكون متماسكة ومركزة على المستخدم. تُجرى عملية التحسين بطريقة نمطية لكل مكون من مكونات الإطار. يُستخدم خوارزمية SGD لتدريب وحدة الكشف عن المكونات، بينما يُستخدم مُحسّن Adam أثناء التحسين المشترك للهدف الموحد. ويُستخدم الهدف المدمج لتوجيه الأداء العام للنظام. وفي مراحل التحسين المشترك، يتم تقليل دالة الهدف باستخدام مُحسّن Adam بمعدل تعلم قدره 0.001 وحجم دفعة يبلغ 16. يتم التدريب لمدة تصل إلى 60 epoch، مع تطبيق التوقف المبكر عندما يكون التغير في خسارة التحقق أقل من 10⁻⁴ لخمس epochs متتالية.

كشف المكونات باستخدام Faster R-CNN

يوظف الإطار المقترح نموذج Faster R-CNN للكشف التلقائي عن مكونات واجهة المستخدم، بما في ذلك الأزرار، والأيقونات، وحقول النصوص، والصور، والحاويات. ويعد Faster R-CNN ملائماً لهذه المهمة لأنه يجمع بين الدقة العالية في اكتشاف الكائنات والتوليد الفعال لمقترحات المناطق، وهو أمر أساسي للتعامل مع تخطيطات واجهة المستخدم المعقدة التي تحتوي على عناصر متكدسة بكثافة. يستخدم النموذج عمود فقري من نوع ResNet-50 مُدرب مسبقاً على مجموعة بيانات ImageNet لاستخراج خرائط السمات الالتفافية من كل شاشة واجهة مستخدم. وخلال التدريب، تم تجميد الطبقات المبكرة للحفاظ على السمات البصرية العامة، بينما تم ضبط الطبقات العليا (conv4_x و conv5_x) بدقة للكشف عن المكونات الخاصة بواجهة المستخدم. وتلتقط خرائط السمات هذه الهياكل البصرية، والحواف، والقوام، وحدود المكونات. وأثناء عملية الكشف، تحدد شبكة مقترحات المناطق (RPN) المناطق المرشحة (المراسي/anchors) التي يحتمل أن تحتوي على مكونات واجهة المستخدم. وتُعرَّف المراسي باستخدام مقاييس متعددة (128 و 256 و 512) ونسب عرض إلى ارتفاع (1:1 و 1:2 و 2:1) لاستيعاب عناصر واجهة المستخدم ذات الأحجام المتنوعة. وخلال التدريب، تُصنف المراسي التي تزيد قيمة التقاطع فوق الاتحاد (IoU) فيها عن 0.7 مع صناديق الحقيقة الأرضية على أنها موجبة، بينما تُصنف تلك التي تقل قيمة IoU فيها عن 0.3 على أنها سالبة؛ أما المراسي ذات قيم IoU المتوسطة فيتم تجاهلها. ويتم تخصيص احتمالية لكل مرساة تشير إلى وجود مكون ما. ثم يتم تطبيق عملية كبح غير الحد الأقصى (NMS) لإزالة المقترحات الزائدة والمتداخلة، مما يضمن تحديد المواقع بكفاءة لعناصر واجهة المستخدم ذات الدلالة حتى في الواجهات المزدحمة. وبمجرد إنشاء المناطق المرشحة، يتم تصنيف كل مقترح إلى فئات مكونات محددة مسبقاً، ويتم تحسين إحداثيات الصندوق المحيط الخاص به. وتقوم عملية محاذاة منطقة الاهتمام (ROI Align) باستخراج تمثيلات سمات ثابتة الحجم لكل مقترح، والتي يتم معالجتها بعد ذلك بواسطة طبقات متصلة بالكامل للتصنيف والانحدار. ويخرج فرع التصنيف احتمالات الفئات، بينما يتنبأ فرع الانحدار بإحداثيات دقيقة للصندوق المحيط. يتم تدريب نموذج Faster R-CNN بالكامل من البداية إلى النهاية عن طريق تحسين دالة خسارة مشتركة تجمع بين خسارة RPN وخسارة الكشف النهائية. وهذا يمكّن النظام ليس فقط من التعرف بدقة على مكونات واجهة المستخدم، ولكن أيضاً من تحديد مواقعها بدقة عبر هياكل الواجهات المتنوعة. يتوفر وصف تفصيلي للكشف عن مكونات Faster R-CNN، بما في ذلك مرحلة RPN، وتصنيف ROI، وتحسين الصندوق المحيط، وهدف التحسين النهائي، في الملف التكميلي 1.

الخوارزمية S1 توضح سير عمل كشف المكونات والاستخراج الهيكلي بالتفصيل (الملف التكميلي 1). وهي تصف العملية الكاملة للكشف التلقائي عن مكونات واجهة المستخدم واستخراجها هيكلياً من صورة شاشة خام. يتم أولاً معالجة الصورة المدخلة مسبقاً وتمريرها عبر شبكة عصبيّة تلافيفية (CNN backbone) لاستخراج السمات البصرية العميقة. وتستخدم شبكة اقتراح المناطق (RPN) هذه السمات لإنشاء مربعات إحاطة مرشحة، والتي يتم تنقيحها لاحقاً من خلال التصنيف والانحدار. كما تقوم خوارزمية عدم التداخل (NMS) بإزالة عمليات الكشف الزائدة لضمان دقة التحديد الموضعي. وعقب عملية الكشف، يتم تجميع المكونات بناءً على التقارب المكاني باستخدام خوارزمية التجميع المكاني للتطبيقات القائم على الكثافة مع الضجيج (DBSCAN). تتيح خطوة التجميع هذه بناء شجرة واجهة مستخدم هرمية تلتقط علاقات "الأب-الابن" والمجموعات المنطقية بين المكونات. ويشكل هذا التمثيل الهرمي الأساس لتحليل المخطط وفهم واجهة المستخدم لاحقاً. يوضح الشكل 2 عملية كشف المكونات باستخدام Faster R-CNN على شاشة واجهة مستخدم للهاتف المحمول. تحتوي الواجهة المدخلة (يساراً) على عناصر واجهة مستخدم مثل الأزرار والكتل النصية، والتي يتم إحاطتها تلقائياً بمربعات إحاطة. ثم يتم تصنيف هذه المناطق المكتشفة إلى فئات من المكونات (على سبيل المثال: زر ونص)، كما تشير الروابط الموضحة. وتعمل وحدة الكشف Faster R-CNN (يميناً) على تنقيح إحداثيات مربعات الإحاطة، وتعيين التسميات الدلالية، وإخراج معلومات مهيكلة على مستوى المكون. وتعد هذه الخطوة أساساً حاسماً للعمليات اللاحقة، بما في ذلك استخراج المخطط، والتحسين المعرفي، وتوليد نماذج أولية لواجهة المستخدم، وذلك من خلال توفير تمثيلات دقيقة وذات دلالة سيمانتيكية لمكونات واجهة المستخدم.

الشكل 2. كشف المكونات لعناصر واجهة المستخدم باستخدام Faster R-CNN. يوضح الشكل عملية الكشف عن مكونات واجهة المستخدم من لقطة شاشة لواجهة الإدخال. يتم تحديد المناطق ذات الأهمية باستخدام مربعات الإحاطة، وتُصنف العناصر مثل الأزرار وحقول النصوص باستخدام Faster R-CNN. وتشير الأسهم إلى ربط المكونات المكتشفة بتسمياتها الدلالية المقابلة. يرجى النقر هنا لعرض نسخة أكبر من هذا الشكل.

استخراج نمط التخطيط والنمذجة الهرمية

بعد الكشف عن المكونات باستخدام Faster R-CNN، يتم تمثيل كل عنصر من عناصر واجهة المستخدم (UI) من خلال مربع إحاطة. ومع ذلك، فإن مربعات الإحاطة هذه وحدها لا توضح كيفية تنظيم العناصر هيكليًا داخل الواجهة، على سبيل المثال، أي العناصر تنتمي إلى الرؤوس، أو أشرطة التنقل، أو مناطق المحتوى المجمعة. ولمعالجة هذا القصور، يتم تحويل المكونات المكتشفة إلى شجرة واجهة مستخدم منطقية، حيث يُعامل كل مكون كعقدة، وتُجمع المكونات المرتبطة وظيفيًا أو بصريًا تحت عقد أب مشتركة. ولتحديد مجموعات التخطيط ذات الدلالة، يتم تطبيق تقنيات التجميع مثل DBSCAN أو التجميع الهرمي التراكمي. وتحلل هذه الطرق التقارب المكاني وأنماط المحاذاة بين المكونات للكشف عن العلاقات بين عناصر واجهة المستخدم. وبطريقة مماثلة لممارسات التصميم البشري، يتعلم النظام التعرف على الأنماط الهيكلية الشائعة مثل الرؤوس، والتذييلات، والشبكات، وكتل المحتوى. وبمجرد تأسيس عملية التجميع، يتم تحليل خصائص هيكلية إضافية—بما في ذلك المحاذاة، وتنظيم الشبكة، وترتيب القراءة—لبناء تمثيل شامل للتخطيط. على سبيل المثال، قد تشير المكونات المحاذات في أعمدة متساوية العرض إلى تخطيط قائم على البطاقات، بينما قد تشير العناصر المكدسة رأسيًا إلى واجهة قائمة على النماذج أو الموجزات. ومن خلال دمج التجميع، والاستدلال المكاني، وقواعد المحاذاة، يبني الإطار شجرة واجهة مستخدم هرمية تلتقط كلًا من التجميع البصري والعلاقات الوظيفية. ويشكل هذا التمثيل الهرمي الأساس لعمليات تحسين التخطيط اللاحقة ونمذجة الاتساق عبر الشاشات المتعددة، مما يمكن النظام من إنشاء تصميمات واجهة هيكلية، ومتماسكة، ومركزة حول المستخدم.

تتوفر الصيغ التفصيلية للمسافة المكانية وتشابه المحاذاة في الملحق رقم 1.

التجميع من أجل تجميع المخططات (DBSCAN)

يتم تطبيق خوارزمية DBSCAN لتحديد مجموعات التخطيط. تستخدم DBSCAN معلمتين: (1) ε = المسافة القصوى بين المكونات المتجاورة و(2) = الحد الأدنى لعدد المكونات المطلوبة لتكوين عنقود. وفي هذا التحليل، تم اختيار معلمات DBSCAN تجريبياً بناءً على دقة واجهة المستخدم الموحدة (480 × 800 pixels). وقد تم ضبط معلمة مسافة الجوار على ε = 50 pixels لالتقاط التقارب المكاني بين مكونات واجهة المستخدم المتجاورة. كما تم ضبط الحد الأدنى لعدد النقاط المطلوبة لتكوين عنقود على MinPts = 3 لتجنب تكوين مجموعات غير ذات أهمية أو زائفة من مكونات واجهة المستخدم.

يتم توفير صياغة بناء شجرة واجهة المستخدم المنطقية المفصلة في الملف التكميلي 1.

نمذجة اللون الإدراكي باستخدام CAM02-UCS

يضمن نمذجة الألوان الإدراكية أن تكون الألوان المستخدمة في واجهة المستخدم (UI) المُولدة متناغمة ومقروءة وفعالة إدراكيًا. يتم استخراج الألوان السائدة من المصادر المدخلة، مثل صور واجهة المستخدم، باستخدام تقنيات التجميع (clustering). وبشكل محدد، يتم تطبيق تجميع K-means مع تهيئة K-means++ لمدة 300 تكرار للحصول على لوحات ألوان تمثيلية. ومع ذلك، فإن فضاء الألوان RGB لا يعكس الإدراك البصري البشري بدقة، مما يعني أن الألوان المتشابهة رقميًا قد تبدو مختلفة إدراكيًا. ولمعالجة هذا القصور، يتم تحويل جميع الألوان المستخرجة إلى CAM02-UCS، وهو فضاء منتظم إدراكيًا. وفي هذا الفضاء، تتوافق المسافات المتساوية مع فروق لونية متساوية مدركة، مما يجعله مناسبًا لنمذجة التناغم والتباين اللوني. وبمجرد نقلها إلى CAM02-UCS، تُحسب الفروق اللونية الإدراكية باستخدام المسافة الإقليدية (Euclidean distance)، مما يمكن النظام من قياس التباين والتناغم والاختلاف بين الألوان. ويتم الفصل بين الألوان المتشابهة جدًا لتحسين المقروئية، بينما يتم تخفيف حدة الألوان شديدة التباين لتجنب الإجهاد البصري. كما تلتزم لوحة الألوان المُولدة بمعايير إمكانية الوصول مثل WCAG AA و AAA، مما يضمن تباينًا كافيًا بين عناصر المقدمة والخلفية. علاوة على ذلك، يتم فرض التناغم اللوني عن طريق حصر علاقات لوحة الألوان في المخططات التكاملية أو المتماثلة أو الثلاثية، وذلك اعتمادًا على نمط واجهة المستخدم المقصود. وهذا يضمن أن لوحة الألوان الناتجة ليست جذابة بصريًا فحسب، بل هي أيضًا سهلة الوصول وظيفيًا ومحسنة إدراكيًا. ولزيادة تحسين لوحة الألوان، يتم تطبيق عملية تحسين تحت قيود التشابه الإدراكي والتباين والتناغم واتساق العلامة التجارية. يتم اختيار لون أساسي (على سبيل المثال، من هوية العلامة التجارية)، وتُعدل الألوان الثانوية من حيث السطوع والتشبع اللوني للحفاظ على التسلسل الهرمي البصري. وتقوم آلية تقييم قائمة على القواعد بفحص لوحات الألوان المرشحة بناءً على المسافات الإدراكية ومقاييس إمكانية الوصول، مما يقلل من الجهد الإدراكي مع الحفاظ على التوازن الجمالي. ونتيجة لذلك، ينتج هذا الإطار مخططات ألوان لواجهة المستخدم تتميز بتماسك ومقروئية واتساق إدراكي على مستوى احترافي.

تتوفر التعبيرات الرياضية التفصيلية لنمذجة اللون الإدراكي القائمة على CAM02-UCS في الملف التكميلي 1.

الخوارزمية S2 (الملف التكميلي 1) تصف سير عمل استخراج الألوان الإدراكية وتحسينها استناداً إلى CAM02-UCS تحت قيود التناغم وإمكانية الوصول. في البداية، يتم استخراج الألوان السائدة من الصورة المدخلة وتحويلها إلى CAM02-UCS لضمان أن الفوارق اللونية تتوافق مع الإدراك البشري. ثم يتم حساب المسافات الإدراكية بين الألوان وتقييدها ضمن حدود محددة مسبقاً للحفاظ على كل من الوضوح والتناغم. لاحقاً، يتم فرض إمكانية الوصول من خلال تقييم نسب تباين السطوع وفقاً لإرشادات WCAG. ويتم الحصول على لوحة الألوان النهائية عن طريق تحسين دالة هدف مدمجة توازن بين التباعد الإدراكي، ومتطلبات التباين، وقيود التناغم اللوني. يضمن ذلك أن تكون مخططات ألوان واجهة المستخدم الناتجة جذابة بصرياً، وقابلة للقراءة، وميسرة، ومتسقة إدراكياً.

تحسين التصميم المعرفي

يضمن تحسين التصميم المعرفي ألا تكون النماذج الأولية لواجهة المستخدم التي يتم إنشاؤها تلقائيًا متسقة بصريًا فحسب، بل وسهلة الفهم والتفاعل أيضًا. تدمج هذه الوحدة مبادئ التصميم المعرفي الأساسية، بما في ذلك مبادئ جشطلت (Gestalt)، وقانون فيتس (Fitts’ law)، وقانون هيك (Hick’s law)، لتوجيه ترتيب مكونات واجهة المستخدم وتجميعها وتباعدها. تتوفر الصيغ الرياضية المفصلة لتحسين التصميم المعرفي في الملحق 1.

هدف التحسين المعرفي المتكامل

يوجد التعبير الرياضي لهدف التحسين المعرفي المتكامل في الملف التكميلي 1. ويُرمز للمعاملات التي تمثل أهمية التجميع البصري، وكفاءة التفاعل، وتعقيد اتخاذ القرار بالرموز alpha وbeta وgamma على التوالي. وفي هذه الدراسة، تم تحديد قيم alpha وbeta وgamma تجريبياً باستخدام مجموعة بيانات التحقق. وبالنسبة للتجربة الحالية، تم تعيين المعاملات كما يلي: α = 0.5 وβ = 0.3 وγ = 0.2. يوفر هذا التكوين توازناً فعالاً بين التجميع البصري وكفاءة التفاعل وبساطة اتخاذ القرار.

اتساق الشاشات المتعددة وتوليد واجهة المستخدم

يضمن نمذجة الاتساق متعدد الشاشات مشاركة الشاشات المختلفة داخل التطبيق لهوية بصرية وتخطيط هيكلي ونمط تفاعل متماسك. فبينما يتنقل المستخدمون عبر الشاشات، تتكون لديهم توقعات بشأن مواضع العناصر، وطباعة النصوص، والمسافات، والتسلسل الهرمي البصري. ولتلبية هذه التوقعات، يقوم النظام بتحليل الأنماط العابرة للشاشات باستخدام قوالب مشتقة من مجموعات بيانات RICO وENRICO. وتلتقط هذه القوالب هياكل واجهة المستخدم الشائعة مثل تخطيطات (الصفحة الرئيسية-التفاصيل)، وأنماط (القائمة-التفاصيل)، والنماذج متعددة الخطوات، وتدفقات لوحات المعلومات. ومن خلال مقارنة مواضع المكونات وسلوك التجميع، ينشئ النظام ملفاً هيكلياً عابراً للشاشات يحدد العناصر التي يجب أن تظل متسقة وتلك التي قد تختلف. وبمجرد تحديد الأنماط الهيكلية، يفرض الإطار الاتساق في مقاييس طباعة النصوص، ونسب المسافات، وتخطيطات الشبكة، ومراسي التنقل. فعلى سبيل المثال، تحافظ أشرطة العناوين على ارتفاع ثابت، وتحتفظ الأزرار الأساسية بحجم ومحاذاة موحدة، وتتبع كتل المحتوى ترتيباً بصرياً متوقعاً. ويتم تحقيق ذلك من خلال عملية تسوية التخطيط التي تقيّم كل شاشة وفقاً لقيود هيكلية عامة. وإذا انحرفت شاشة ما عن القوالب المتعلمة — مثل وجود حواشي غير متسقة أو عناوين غير محاذات — يقوم النظام بتعديل التخطيط تلقائياً لاستعادة التماسك. وتساعد هذه التصحيحات في ضمان تجربة مستخدم سلسة وتقليل تكاليف التبديل المعرفي عبر الشاشات. وعلاوة على ذلك، يحلل الإطار مخطط التنقل بين الشاشات للحفاظ على الاتساق في تدفق التفاعل. حيث يتم تحديد وفرض أنماط التنقل الشائعة، بما في ذلك انتقالات الأمام/الخلف، والتنقل المبوب، وسير العمل متعدد الخطوات. ويتم التحقق من كل انتقال لضمان توافقه مع النموذج الذهني للمستخدم، مما يحسن القابلية للاستخدام ويقلل من الارتباك. ونتيجة لذلك، يقلل نموذج الاتساق متعدد الشاشات من الضجيج البصري، ويعزز الألفة، ويرتقي بتجربة تفاعل موحدة.

تتوفر الصيغ الرياضية التفصيلية لاتساق الشاشات المتعددة وتوليد واجهة المستخدم في الملف التكميلي 1.

وأخيراً، يقوم محرك التصيير بإنشاء مخرجات مرئية بتنسيقات مثل المخططات الهيكلية SVG، أو النماذج الأولية HTML/CSS، أو نماذج واجهة المستخدم القائمة على البكسل. وتُظهر شاشات واجهة المستخدم الناتجة ترتيب قراءة صحيحاً، وعلاقات لونية متناغمة، ومحاذاة دقيقة للشبكة، وتدرجاً بصرياً متسقاً عبر شاشات متعددة.

توفر الخوارزمية S3 سير عمل تحسين التخطيط المعرفي البصري واتساق الشاشات المتعددة (الملف التكميلي 1). تصف الخوارزمية S3 عملية التحسين المعرفي والهيكلي المتكاملة المستخدمة لإنشاء تخطيطات واجهة مستخدم سهلة الاستخدام؛ حيث تدمج التجميع الإدراكي (مبادئ جشتالت)، وكفاءة التفاعل (قانون فيتس)، وبساطة اتخاذ القرار (قانون هيك) ضمن إطار تحسين موحد. في البداية، يتم تقييم العلاقات المكانية بين المكونات لإنشاء تجميعات إدراكية، ثم يتم تحسين كفاءة التفاعل عن طريق ضبط حجم المكونات ومواقعها، بينما يتم التحكم في تعقيد القرار من خلال الحد من عدد الخيارات المقدمة للمستخدمين. بالإضافة إلى ذلك، تفرض الخوارزمية اتساق الشاشات المتعددة من خلال مواءمة كل شاشة مع قوالب تخطيط متعلمة، مما يضمن التوحيد في الطباعة والتباعد والتنظيم الهيكلي. بعد ذلك، تقوم دالة تحسين متعددة الأهداف بتنقيح التخطيط من خلال موازنة المحاذاة والتباعد والتكلفة المعرفية، مما ينتج عنه واجهة متماسكة بصرياً وفعالة معرفياً. وبشكل عام، تضمن هذه الخوارزمية أن تحافظ تخطيطات الشاشات المتعددة التي يتم إنشاؤها على مستويات عالية من الاتساق البصري، وقابلية الاستخدام، والوضوح الإدراكي.

النتائج

تم تقييم إطار عمل نماذج واجهات المستخدم الآلي المقترح باستخدام مجموعة بيانات متكاملة تضم 5,128 شاشة واجهة مستخدم من ثلاثة مصادر: 4,000 صورة من RICO، و 1,000 شاشة من ENRICO، و 128 عينة واجهة مستخدم مشروحة بالألوان من مجموعة بيانات Guo لألوان واجهات المستخدم. وتوفر مجموعة البيانات المختلطة هذه معياراً متوازناً لتقييم دقة اكتشاف المكونات، ووضوح الهيكل التخطيطي، والاتساق عبر الشاشات المتعددة، والتناغم اللوني الإدراكي.

تظهر النتائج التجريبية أن نموذج الكشف القائم على Faster R-CNN يحقق دقة في الكشف عن المكونات تصل إلى 92.4%، كما يتميز بقدرة فعالة على التعميم عبر أنماط متنوعة من واجهات المستخدم للهواتف المحمولة. علاوة على ذلك، فإن دمج تعليقات أنماط ENRICO يعزز الاستدلال في التخطيط، مما أدى إلى زيادة بنسبة 18.7% في وضوح التخطيط وتحسين الحفاظ على ترتيب القراءة. وفي تجارب تقييم الألوان، تولد وحدة نمذجة الألوان الموجهة بواسطة CAM02-UCS لوحات ألوان أكثر تناسقاً بنسبة 24.5% وفقاً لتقييمات المصممين، وتحقق تماثلاً إدراكياً أعلى مقارنة بطرق توليد لوحات الألوان التقليدية القائمة على RGB و LAB. بالإضافة إلى ذلك، تحقق نمذجة الاتساق متعدد الشاشات تحسناً بنسبة 28% في المحاذاة عبر الشاشات واتساق الطباعة. وتظهر دراسات المستخدمين التي شملت 30 مشاركاً انخفاضاً بنسبة 31% في العبء المعرفي المدرك عند التفاعل مع النماذج الأولية التي أنتجها النظام المقترح. وتشير هذه النتائج مجتمعة إلى أن الجمع بين الكشف عن المكونات، ونمذجة الألوان الإدراكية، والتحسين المعرفي ينتج نماذج أولية لواجهة المستخدم ليست دقيقة هيكلياً فحسب، بل متماسكة بصرياً وفعالة معرفياً أيضاً. يسلط الجدول 3 الضوء على بيئة المحاكاة والإعدادات التقنية المستخدمة لتقييم إطار عمل النماذج الأولية لواجهة المستخدم المقترح. وقد دُعمت إجراءات التدريب كثيفة الحوسبة لنموذج Faster R-CNN ووحدات اتساق التخطيط بواسطة وحدة معالجة رسومات 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
العمود الفقري لـ Faster R-CNN	ResNet-50 + FPN
دقة الصورة	480 × 800 (مُوحّدة عبر جميع مجموعات البيانات)
حجم دفعة التدريب	8
المُحسِّن	AdamW (LR = 1e−4, Weight Decay = 0.01)
عدد الدورات (Epochs)	40
فضاء نمذجة الألوان	CAM02-UCS
التجميع لاستخراج لوحة الألوان	K-means (k = 5)
تجميع المخطط	DBSCAN (ε = 20, min_samples = 3)

الجدول 3: معلمات التنفيذ والتكوين التجريبي للإطار المقترح. يلخص الجدول إعدادات الأجهزة والبرمجيات المستخدمة لتدريب النموذج وتقييمه، بما في ذلك الموارد الحسابية، ونظام التشغيل، وإطار التعلم العميق، وبنية النموذج، ودقة الصورة، ومعلمات التدريب، واستراتيجية التحسين، وفضاء نمذجة الألوان، وطرق التجميع المستخدمة لاستخراج لوحة الألوان وتجميع التخطيط.

تستخدم بنية Faster R-CNN عمود فقري من نوع ResNet-50 مع شبكة هرمية الميزات (FPN) للكشف عن مجموعة واسعة من مكونات واجهة المستخدم الدقيقة. يتم تغيير حجم جميع صور واجهة المستخدم بشكل موحد إلى 480 × 800 بكسل قبل المعالجة. يتم إجراء التدريب على مدار 60 حقبة (epochs) باستخدام محسن SGD، مع حجم دفعة يبلغ 16 لضمان التقارب المستقر. يستخدم مولد لوحة الألوان نظام CAM02-UCS مع تجميع K-means، بينما يُستخدم DBSCAN لتجميع المخطط الهيكلي. تضمن هذه الإعدادات التقنية أن تكون نتائج واجهة المستخدم المولدة قابلة للتكرار ومستقرة وعالية الدقة. ولتقديم تقييم شامل لإطار عمل النمذجة الأولية المؤتمتة لواجهة المستخدم المقترح، يتم استخدام أربع فئات من مقاييس التقييم:

أ) أداء اكتشاف المكونات، والذي تم تحليله باستخدام الدقة (precision)، والاستدعاء (recall)، ومقياس F1-score، والتقاطع فوق الاتحاد (IoU)، ومتوسط الدقة المتوسطة (mAP)، وهي مقاييس تحدد مدى دقة نموذج Faster R-CNN في التعرف على مكونات واجهة المستخدم عبر مجموعتي بيانات RICO وENRICO؛

2) وضوح التخطيط والاتساق الهيكلي، ويتم قياسهما من خلال خطأ المحاذاة (AE)، ودقة التجميع، وصحة ترتيب القراءة، ودرجات الاتساق عبر الشاشات المشتقة من قيود نمط التصميم؛

iii) جودة اللون الإدراكية، التي تم تقييمها باستخدام المسافة الإدراكية CAM02-UCS (ΔE_UCS)، ونسب تباين WCAG 2.1، ومؤشر التنوع، ودرجات التناغم اللوني المستوحاة من إطار عمل Guo لتقييم ألوان واجهة المستخدم؛

4) مقاييس الكفاءة المعرفية المتمحورة حول المستخدم، بما في ذلك الحمل المعرفي الذي تم قياسه بواسطة مؤشر ناسا لحمل المهام (NASA-TLX)، وتقييمات التماسك الجمالي، وكفاءة إنجاز المهام.

تتيح هذه المقاييس تقييم إطار العمل ليس فقط من حيث دقة الكشف، ولكن أيضاً من حيث التناغم الإدراكي، وجودة القابلية للاستخدام، والتجربة المعرفية.

مقاييس الكشف عن المكونات

تصف الدقة (Precision) مدى إحكام النموذج في التنبؤ بمكونات واجهة المستخدم دون إنشاء إيجابيات كاذبة. وتعني الدقة العالية أن معظم صناديق الإحاطة المتوقعة تتوافق مع عناصر واجهة مستخدم صالحة. أما الاستدعاء (Recall) فيقيس قدرة النموذج على تحديد جميع مكونات واجهة المستخدم ذات الصلة على الشاشة. ويشير الاستدعاء العالي إلى أن النموذج ينجح في اكتشاف معظم المكونات المرجعية (ground-truth). ويوفر مقياس F1-score، الذي يُعرف بأنه المتوسط الهندسي للدقة والاستدعاء، تقييماً متوازناً ويكون مفيداً بشكل خاص عندما تكون مكونات واجهة المستخدم موزعة بشكل غير متساوٍ عبر مجموعات البيانات.

يقيس مقياس IoU مدى تداخل صندوق الإحاطة المتوقع مع صندوق الإحاطة الحقيقي. وفي مهام اكتشاف الكائنات، تُستخدم عتبات IoU بقيمة 0.5 و0.75 عادةً لتمثيل شروط تقييم متوسطة وصارمة. ويلخص mAP أداء الاكتشاف عبر عتبات IoU متعددة. ويوفر مقياس mAP@0.5:0.95 تقييمًا أكثر قوة من خلال حساب متوسط الدقة عبر العتبات من 0.5 إلى 0.95 بخطوات قدرها 0.05، وعليه فهو مقبول على نطاق واسع كمعيار قياسي لاكتشاف الكائنات.

تشير نتائج الكشف عبر مجموعات البيانات الثلاث إلى أن وحدة كشف المكونات المقترحة تعمل بشكل جيد ومتسق. وتظهر النتائج الكمية في الجدول 4. حققت مجموعة بيانات RICO أعلى أداء، بدقة بلغت 0.91، واستدعاء بنسبة 0.88، ومقياس F1 قدره 0.89، وذلك بفضل مجموعتها الكبيرة والمتنوعة من تعليقات مكونات واجهة المستخدم. وتظهر مجموعة ENRICO درجات أقل قليلاً بسبب هيكلها الأكثر تبسيطاً وقلة أنواع المكونات المشروحة. وسجلت مجموعة بيانات Guo أدنى مقياس F1 (0.81)، ويرجع ذلك على الأرجح إلى التباين البصري الأكبر وقلة أنماط التخطيط الموحدة، مما يجعل عملية الكشف أكثر صعوبة. وبشكل عام، تؤكد هذه النتائج أن النموذج يحافظ على أداء قوي في كشف المكونات عبر مختلف أنماط تصميم واجهة المستخدم وخصائص مجموعات البيانات.

مجموعة البيانات	الدقة	الاستدعاء	مقياس 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-score للكشف عن مكونات واجهة المستخدم عبر مجموعات بيانات 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) عند عتبات التقاطع فوق الاتحاد (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 المختلفة.

الشكل 4. متوسط الدقة المتوسطة (mAP) المحسوب عبر عتبات التقاطع فوق الاتحاد (IoU) من 0.5 إلى 0.95 عبر مجموعات البيانات. يوضح المخطط الخطي أداء الكشف عن المكونات عبر مجموعات بيانات RICO و ENRICO و Guo باستخدام مقياس mAP المحسوب عبر عتبات IoU التي تتراوح من 0.5 إلى 0.95. يمثل المحور السيني مجموعات البيانات، ويشير المحور الصادي إلى قيم mAP المقابلة المسجلة على مقياس من 0 إلى 1، مما يعكس أداء النموذج تحت عتبات كشف متغيرة. يرجى النقر هنا لعرض نسخة أكبر من هذا الشكل.

مقاييس جودة التخطيط

يتم تقييم جودة التخطيط باستخدام AE، ودقة التجميع (GA)، ودقة ترتيب القراءة (ROA)، والتي تقيم مجتمعةً الصحة الهيكلية، والتنظيم الإدراكي، والقابلية المعرفية للقراءة لتخطيطات واجهة المستخدم الناتجة.

خطأ في المحاذاة.

يشير AE (الانحراف القائم على البكسل) إلى مدى محاذاة عناصر واجهة المستخدم مع خطوط المحاذاة المثالية، مثل أدلة المحاذاة لليسار أو اليمين أو الأعلى أو خط الأساس. ويشير انخفاض قيمة AE إلى أن العناصر مرتبة بشكل متسق مع حد أدنى من التشوه البصري، مما يحسن القابلية للقراءة ووضوح التصميم العام. وتعتبر هذه المقياس مهمًا بشكل خاص لتقييم تحسين التخطيط المعرفي، حيث أن عدم المحاذاة يقطع التدفق البصري ويزيد من التعقيد الملحوظ. يوضح الشكل 5 قيمة AE عبر مجموعات بيانات RICO وENRICO وGuo، مقاسة كمتوسط انحراف البكسل عن خطوط المحاذاة المثالية. وتظهر النتائج أن RICO تحقق أدنى AE (4.2 px)، مما يشير إلى أن مكونات واجهة المستخدم في مجموعة البيانات هذه تظهر أنماطًا هيكلية أكثر اتساقًا، مما يسهل عملية المحاذاة بالنسبة للنموذج. وتليها ENRICO بانحراف محاذاة متوسط قدره 6.1 px، مما يعكس مزيجًا من تخطيطات الشاشة جيدة الهيكلة والمتنوعة. بينما تسجل مجموعة بيانات Guo أعلى AE (7.4 px)، وذلك بسبب تنوعها الأعلى في وضع المكونات وهياكل التخطيط غير القياسية، والتي تشكل تحديًا للتحسين القائم على المحاذاة. وبشكل عام، تثبت هذه النتائج أن النموذج يحافظ على دقة محاذاة قوية عبر مجموعات البيانات المختلفة، رغم زيادة تعقيد التخطيط.

الشكل 5. خطأ المحاذاة عبر مجموعات البيانات. يوضح الشكل خطأ المحاذاة عبر مجموعات البيانات؛ حيث تشير القيم الأدنى إلى محاذاة أفضل. يرجى النقر هنا لعرض نسخة أكبر من هذا الشكل.

دقة التجميع (GA).

تقيس دقة التجميع (GA) مدى فعالية النموذج في تجميع مكونات واجهة المستخدم ذات الصلة، على سبيل المثال، بناءً على مبادئ الجشطالت مثل التقارب والتشابه والاستمرارية. وتشير دقة التجميع الأعلى إلى أن النموذج يحافظ على الهيكل المقصود لعناصر واجهة المستخدم، مما يمكن المستخدمين من تفسير الواجهة بشكل طبيعي أكثر. وتعد هذه المترية مفيدة بشكل خاص لتقييم ما إذا كانت وحدة تحسين التخطيط تنجح في تنظيم المحتوى إلى مجموعات بصرية ذات معنى. يوضح الشكل 6 توزيع دقة التجميع (GA) التي حققها الإطار المقترح عبر المجموعات الثلاث من البيانات. تُظهر مجموعة بيانات ENRICO أعلى قيمة وسيطة لدقة التجميع وأصغر نطاق ربيعي، مما يشير إلى أداء تجميع مستقر ومتسق نظرًا لتخطيطاتها المحددة جيدًا والمصنفة حسب الأنماط. بينما تظهر مجموعة بيانات RICO دقة تجميع متوسطة مع تباين أعلى، ويرجع ذلك على الأرجح إلى تنوعها الأكبر وتعقيد التخطيط فيها. وتسجل مجموعة بيانات Guo UI Color دقة تجميع أقل، حيث أن عيناتها غير متجانسة بصرياً وأقل تركيزاً على التخطيط الهيكلي. وبشكل عام، تشير النتائج إلى أن وحدة تحسين التخطيط المعرفي تعمل بشكل موثوق عبر مجموعات البيانات، حيث تحقق أفضل أداء تجميع في البيانات المتسقة هيكلياً.

الشكل 6. توزيع دقة التجميع عبر مجموعات البيانات. يوضح المخطط الصندوقي دقة التجميع بناءً على مبادئ الجشتالت عبر مجموعات بيانات RICO وENRICO وGuo’s UI Color. تمثل الصناديق المدى الربيعي، ويشير الخط المركزي إلى الوسيط، بينما تدل الشعيرات على نطاق القيم. يمثل المحور السيني مجموعات البيانات، ويوضح المحور الصادي درجات دقة التجميع. حجم العينة n=5128 شاشة واجهة مستخدم (RICO: 4000، وENRICO: 1000، وGuo: 128). يرجى النقر هنا لعرض نسخة أكبر من هذا الشكل.

دقة ترتيب القراءة (ROA).

تقيس دقة ترتيب القراءة (ROA) مدى دقة النموذج في التنبؤ بتدفق القراءة الطبيعي لشاشة واجهة المستخدم، والذي يتبع عادةً نمطاً من الأعلى إلى الأسفل ومن اليسار إلى اليمين. ويعد الحفاظ على ترتيب القراءة الصحيح أمراً أساسياً لسهولة الاستخدام، ووضوح التنقل، والاتساق مع اتفاقيات التصميم المعتمدة. وتشير قيمة ROA المرتفعة إلى أن النظام يحافظ على أنماط المسح المعرفي المتوقعة. يوضح الشكل 7 قيمة ROA عبر مراحل تقييم مختلفة لمجموعات بيانات RICO وENRICO وGuo. تحقق ENRICO باستمرار أعلى قيمة ROA نظراً لهيكل تخطيطها المنتظم والموجه وفق أنماط محددة، مما يسمح بتنبؤ أكثر دقة بتسلسلات القراءة الشبيهة بالبشر. وتظهر RICO أداءً متوسطاً مع تباين طفيف، مما يعكس تنوعها الأكبر وتعقيدها في العالم الحقيقي. أما مجموعة بيانات Guo فتظهر أدنى قيمة ROA، حيث أن العديد من شاشاتها غنية بصرياً ولكنها تفتقر إلى تسلسلات هرمية واضحة للقراءة. وبشكل عام، تشير هذه النتائج إلى أن وحدة تحسين التخطيط المعرفي المقترحة تعمل بموثوقية أكبر في مجموعات البيانات المنظمة، مع الحفاظ على تنبؤات مستقرة لترتيب القراءة عبر تصميمات واجهات المستخدم المتنوعة.

الشكل 7. دقة ترتيب القراءة عبر مراحل التقييم لمجموعات بيانات متعددة. يوضح المخطط الخطي دقة ترتيب القراءة عبر خطوات التقييم لمجموعات بيانات RICO و ENRICO و Guo’s UI Color. يمثل المحور السيني (x) مرحلة التقييم، ويشير المحور الصادي (y) إلى دقة ترتيب القراءة. يمثل كل منحنى مجموعة بيانات، مما يوضح التغيرات في الحفاظ على التدفق البصري عبر مراحل التقييم المتتالية. تمثل مرحلة التقييم مراحل التنقيح التدريجي لإطار العمل المقترح. يرجى النقر هنا لعرض نسخة أكبر من هذا الشكل.

درجة اتساق المخطط (LCS)

تقيس درجة اتساق التخطيط (LCS) مدى الحفاظ على اتساق تخطيطات واجهة المستخدم المُنشأة عبر شاشات متعددة داخل التطبيق نفسه. ويشمل ذلك الاتساق في المسافات، وقواعد المحاذاة، ومناطق الطباعة، وأنماط التجميع. وتشير الدرجة الأعلى إلى تحسن في التماسك عبر الشاشات، مما يؤدي إلى تجربة مستخدم (UX) أكثر توحيداً وبداهة. يعرض الشكل 8 درجة LCS التي تم قياسها عبر مراحل تقييم متعددة لمجموعات بيانات RICO وENRICO وGuo’s UI Color. تحقق مجموعة بيانات ENRICO باستمرار أعلى قيم لـ LCS نظراً لشاشات واجهة المستخدم الموحدة هيكلياً والمصنفة حسب الأنماط، مما يسهل التعلم الأكثر استقراراً للاتساق عبر الشاشات. وفي المقابل، تظهر مجموعة بيانات RICO اتساقاً متوسطاً ولكنه يتحسن بشكل مطرد، وهو ما يعزى إلى قدرة النموذج على التعميم عبر تخطيطات واجهة مستخدم شديدة التنوع. وكما هو متوقع، تسجل مجموعة بيانات 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 الامتثال لمعايير إمكانية الوصول، مما يضمن تعزيز قابلية القراءة. يعرض الجدول 5 مقارنة كمية بين وحدة نمذجة الألوان المقترحة والطرق المرجعية. حيث ارتفع مؤشر CHI من 0.61 إلى 0.83، مما يشير إلى تحسن التماسك الجمالي في الانتقالات اللونية. بالإضافة إلى ذلك، زادت درجة CDS بنسبة تزيد عن 50%، مما يثبت أن اللوحات المُولدة تحافظ على تباين أغنى دون إحداث فوضى بصرية. وتشير قيم CPS الأعلى إلى توزيع متوازن للألوان السائدة، مما يمنع التشبع المفرط لأي تدرج لوني واحد. وبشكل عام، تؤكد هذه النتائج فعالية وحدة نمذجة الألوان القائمة على CAM02-UCS في توليد مخططات ألوان لواجهة المستخدم تكون متناغمة، وقابلة للقراءة، ومُحسّنة إدراكياً.

مقياس	تعريف	الطريقة المقترحة	الخط المرجعي1	التحسن (%)
Δإي (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)	التباين في 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). فبينما تعمل السمات الإدراكية، مثل التناغم اللوني، على تعزيز تجربة المستخدم بشكل كبير، تظل الدقة الهيكلية واتساق التخطيط أمرين حاسمين للقابلية الوظيفية للاستخدام. وبناءً على ذلك، يتطلب التصميم الأمثل لواجهة المستخدم توازناً بين التناغم الإدراكي والصحة الهيكلية.

الشكل 9. مقارنة مقاييس دراسة المستخدم عبر مجموعات البيانات. يقارن المخطط الشريطي المجمّع مقاييس دراسة المستخدم عبر مجموعات بيانات RICO وENRICO وGuo’s UI Color. يمثل المحور السيني مقاييس التقييم، بما في ذلك مؤشر ناسا لحمل المهام (NASA-TLX)، ومقياس سهولة استخدام النظام (SUS)، ودرجة التناغم الجمالي (AHS)، ووقت الكفاءة الهيكلية (SET)، ومعدل الاتساق عبر الشاشات (CSCR)، بينما يشير المحور الصادي إلى الدرجات المقابلة. تمثل الأشرطة الأداء لكل مجموعة بيانات، مما يوضح الاختلافات في سهولة الاستخدام، والحمل المعرفي، والجودة الجمالية، واتساق الواجهة. NASA-TLX (0–100، الأقل هو الأفضل)، SUS (0–100، الأعلى هو الأفضل)، AHS (مقياس ليكرت 1–7)، 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-TLX)، ومقياس سهولة استخدام النظام (SUS)، ومؤشر التناغم اللوني، ونسبة التباين. كما تم رصد نسب التحسن، وقيم p، ومستويات الدلالة الإحصائية. يشير الرمز (↑) إلى أن القيم الأعلى هي الأفضل، ويشير الرمز (↓) إلى أن القيم الأدنى هي الأفضل. تم تقييم الدلالة الإحصائية عند p < 0.05.

ملاحظات خاصة بمجموعة البيانات

يمكن إرجاع الأداء المنخفض نسبيًا الملاحظ في المقاييس الهيكلية لمجموعة بيانات Guo إلى خصائصها المتأصلة. فمجموعة بيانات Guo أصغر من RICO وENRICO، وتركز بشكل أساسي على سمات اللون الإدراكية بدلاً من التعليقات التوضيحية للهيكل التنظيمي. ونتيجة لذلك، تظهر هذه المجموعة تباينًا أعلى في وضع المكونات، وتنظيمًا هرميًا أضعف، وهياكل تخطيط أقل اتساقًا عبر الشاشات. تجعل هذه الخصائص تعلم الهيكل وتحسين التخطيط أكثر صعوبة، مما يفسر انخفاض الأداء في مقاييس المحاذاة، والتجميع، وترتيب القراءة، على الرغم من الأداء القوي في التقييمات الإدراكية والتقييمات التي تركز على المستخدم.

دراسة الاستئصال

تقيم دراسة الاستئصال مساهمة كل وحدة ضمن الإطار المقترح من خلال إزالة المكونات الفردية بشكل منهجي وتحليل تأثيرها على جودة التخطيط، ونمذجة الألوان، وأداء الكشف. يتم تقييم جودة التخطيط باستخدام AE وGA وROA وLCS؛ حيث يعكس AE الانحراف الموضعي لعناصر واجهة المستخدم، وتشير القيم الأعلى إلى ضعف البنية المكانية. ويقيم GA مدى فعالية تنظيم المكونات وفقاً لمبادئ غيشتالت (Gestalt). ويقيس ROA مدى الحفاظ على التدفق البصري المنطقي، بينما يحدد LCS الاتساق الهيكلي عبر الشاشات من حيث المحاذاة والتباعد وتنظيم التخطيط. كما يتم تقييم تدهور جودة الألوان باستخدام ΔE (فرق اللون الإدراكي)، وCHI، وCDS، والتي تقيم مجتمعة التوحيد الإدراكي، والتماسك الجمالي، وثراء لوحة الألوان. أما أداء الكشف فيتم تقييمه باستخدام mAP والدقة (precision) والاستدعاء (recall)، والتي تحدد كمياً تأثير استبدال وحدة Faster R-CNN بنموذج كشف أبسط. وتوفر هذه المقاييس مجتمعة تقييماً شاملاً لكيفية مساهمة كل وحدة في الأداء العام للنظام.

الجدول 7 يلخص مساهمة كل وحدة ويقارن الإطار المقترح مع مناهج توليد واجهات المستخدم الحالية. يحقق النموذج الكامل أفضل أداء عبر جميع مقاييس جودة التخطيط، ونمذجة الألوان، والكشف، مما يثبت أن التصميم المعرفي، ونمذجة الألوان الإدراكية، والفهم البصري العميق لها تأثير تآزري. وعندما تتم إزالة وحدة نمذجة الألوان، تزداد قيمة ΔE بشكل ملحوظ، بينما تنخفض قيم CHI و CDS بشكل كبير، مما يشير إلى فقدان التجانس الإدراكي والتناغم اللوني. وهذا يؤكد أهمية النمذجة القائمة على CAM02-UCS في الحفاظ على الجودة الجمالية والإدراكية. ويؤدي حذف وحدة التخطيط المعرفي إلى زيادة كبيرة في AE وانخفاض ملحوظ في GA و ROA، مما يثبت أن مبادئ التصميم المعرفي ضرورية لإنتاج تخطيطات متماسكة هيكلياً وسهلة القراءة. كما يؤدي إزالة وحدة اتساق الشاشات المتعددة إلى انخفاض في LCS، مما يؤكد دورها في الحفاظ على أنماط تخطيط متسقة عبر شاشات متعددة. وينتج عن استبدال كاشف Faster R-CNN بشبكة CNN أبسط انخفاض حاد في mAP والدقة والاستدعاء، مما يسلط الضوء على الأهمية البالغة للكشف القوي عن المكونات في مسار العمل الإجمالي. وبالمقارنة مع الطرق المرجعية، بما في ذلك 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: دراسة الاستئصال وتحليل الأداء المقارن للإطار المقترح والطرق المرجعية. يقيم الجدول تأثير المكونات الفردية من خلال مقارنة النموذج المقترح الكامل مع متغيرات تم فيها إزالة وحدات محددة (وحدة اللون، وحدة التخطيط المعرفي، اتساق الشاشات المتعددة، واستبدال 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 لألوان واجهة المستخدم (UI Color Dataset): https://github.com/guozhongke/UI-Color-Dataset.

الملف التكميلي 1. الصيغ الرياضية وتفاصيل التنفيذ الموسعة. يوفر هذا الملف الصيغ الرياضية التفصيلية وسير العمل الخوارزمي الذي يدعم إطار عمل النمذجة الأولية المؤتمتة لواجهة المستخدم المقترح. ويتضمن التدريب على اكتشاف المكونات، واستخراج أنماط التخطيط، ونمذجة التناغم اللوني، والهدف الموحد للنمذجة الأولية لواجهة المستخدم، وتفاصيل اكتشاف Faster R-CNN، وحسابات المسافة المكانية وتشابه المحاذاة، وبناء شجرة واجهة المستخدم المنطقية، ونمذجة الألوان الإدراكية القائمة على CAM02-UCS، وتحسين التصميم المعرفي، ونمذجة اتساق الشاشات المتعددة، والخوارزميات من S1 إلى S3.يرجى النقر هنا لتحميل هذا الملف.

المناقشة

تُظهر النتائج تحسنات ذات دلالة إحصائية في سهولة الاستخدام، والتنظيم الهيكلي، والجودة الإدراكية (p < 0.05)، مما يؤكد فعالية دمج مبادئ التصميم المعرفي في النمذجة الأولية المؤتمتة لواجهات المستخدم. وبخلاف أنظمة توليد واجهات المستخدم التقليدية التي تعتمد بشكل أساسي على الكشف البصري أو الاستدلالات القائمة على القواعد، يدمج الإطار المقترح تجميع "جشتالت"، ونمذجة التسلسل الهرمي، وقيود التباعد، والقابلية للقراءة الإدراكية طوال عملية إعادة بناء واجهة المستخدم بأكملها. كما تؤكد التحسينات الملحوظة في مقاييس NASA-TLX وSUS وSET حدوث انخفاض ذي دلالة إحصائية في العبء المعرفي (NASA-TLX, p.< 0.01). وتشير هذه النتائج إلى أن التوليد المؤتمت لواجهات المستخدم يجب أن يتجاوز دقة إعادة البناء البصري ليشمل معرفة التصميم المتمحور حول الإنسان لتحقيق سهولة استخدام عملية. بالإضافة إلى ذلك، فإن جميع الفرضيات الموضوعة (H1–H4) مدعومة تجريبياً بالنتائج الاختبارية.

علاوة على تحسينات المخطط، يؤدي دمج نمذجة الألوان الإدراكية القائمة على CAM02-UCS إلى تحقيق مكاسب ذات دلالة إحصائية في التناغم اللوني، وإمكانية الوصول، والاستقرار الإدراكي (p < 0.05)، وهو ما ينعكس في التحسينات التي طرأت على ΔE و CHI و CDS ونسبة التباين. ومقارنة بالأعمال السابقة مثل التوليد الآلي لمظاهر ألوان واجهة المستخدم القائمة على الصور، والتي تركز بشكل أساسي على تحسين الألوان، فإن الإطار المقترح يدمج كلاً من تحسين الألوان والمخطط ضمن مسار عمل موحد. علاوة على ذلك، فإن إدراج وحدة اتساق الشاشات المتعددة يعالج قصوراً رئيسياً في النهج السابقة التي ركزت فقط على توليد واجهة مستخدم لشاشة واحدة. ويظهر المقارنة مع الطرق الحالية، بما في ذلك pix2code³¹ و REDRAW^23,24 و LDGM³²، أن هذه النهج تركز أساساً على إعادة البناء الهيكلي أو النمذجة التوليدية دون دمج المبادئ المعرفية، أو التناغم اللوني الإدراكي، أو الاستنتاج عبر الشاشات المتعددة. ويُظهر الإطار المقترح تحسينات ذات دلالة إحصائية مقارنة بهذه الطرق (p < 0.05) عبر مقاييس دقة المخطط (AE و GA و ROA)، والمقاييس الإدراكية (CHI و ΔE)، ومقاييس سهولة الاستخدام (SUS و CSCR). وتسلط هذه النتائج الضوء على ميزة الجمع بين مبادئ التصميم المعرفي، ونمذجة الألوان الإدراكية، والتعلم العميق ضمن نظام موحد.

من الملاحظات الهامة المستخلصة من النتائج هي التمييز بين العوامل الهيكلية والإدراكية التي تؤثر على تجربة المستخدم (UX). إذ يعمل التحسين الهيكلي على تعزيز الصحة الوظيفية ووضوح التخطيط، بينما يؤثر التحسين الإدراكي -ولا سيما التناغم اللوني- بشكل كبير على إدراك المستخدم والعبء المعرفي. وتشير النتائج إلى أن التصميم الأمثل لواجهة المستخدم (UI) يتطلب توازناً بين الدقة الهيكلية والاتساق الإدراكي. وبالرغم من التحسينات التي تم إثباتها، لا تزال هناك بعض القيود؛ فعلى سبيل المثال، ينخفض الأداء في مجموعات البيانات الأصغر والأكثر تركيزاً على الجوانب الإدراكية، مثل مجموعة بيانات Guo UI Color، فيما يتعلق بالمقاييس الهيكلية، وذلك بسبب التباين في تنظيم التخطيط ومحدودية التعليقات التوضيحية الهيكلية. وتفرض هذه الخصائص تحديات في تعلم أنماط تخطيط وعلاقات هرمية متسقة. وسيركز العمل المستقبلي على تحسين القوة والمتانة عبر مثل هذه مجموعات البيانات.

من منظور نظري، يوضح هذا البحث أنه يمكن تحسين توليد واجهة المستخدم بشكل كبير من خلال دمج المبادئ المعرفية والإدراكية مباشرة في سير عمل التعلم العميق. وتتحدى هذه الدراسة الرؤية التقليدية القائلة بأن توليد واجهة المستخدم هو مجرد مشكلة تتعلق برؤية الكمبيوتر أو توليد الكود البرمجي. وبدلاً من ذلك، تسلط الضوء على أهمية دمج التوحيد الإدراكي (عبر CAM02-UCS)، وتقليل الحمل المعرفي (عبر مبادئ Gestalt ونمذجة التسلسل الهرمي)، وتماسك التصميم متعدد الشاشات كمكونات أساسية لأنظمة واجهة المستخدم المؤتمتة. ويساهم هذا العمل في التحول نحو نماذج حوسبة محورها الإنسان، حيث لا يراعي توليد واجهة المستخدم الصحة الهيكلية فحسب، بل يأخذ في الاعتبار أيضاً العوامل النفسية والإدراكية. وبذلك، يرسخ هذا البحث توجهاً نظرياً جديداً لذكاء التصميم المؤتمت.

من منظور عملي، يوفر الإطار المقترح حلاً قابلاً للتطبيق لمصممي واجهات المستخدم، وفرق تطوير المنتجات، وأدوات بناء النماذج الأولية. ومن خلال تقليل الحمل المعرفي وتحسين كفاءة البحث، يقوم النظام بتوليد تخطيطات لواجهات المستخدم تتطلب قدراً أقل من التعديلات اليدوية لتلبية معايير التصميم المهنية. كما يضمن استخدام سمات الألوان المحسنة إدراكيًا الامتثال لإرشادات إمكانية الوصول مثل WCAG 2.1، مما يتيح إمكانية الاستخدام الفوري في التطبيقات الواقعية. بالإضافة إلى ذلك، تسهل وحدة الاتساق متعدد الشاشات عملية التطوير السريع للتطبيقات متعددة الصفحات من خلال الحفاظ على أنماط تخطيط وتصميم متسقة دون الحاجة إلى تعديلات يدوية. وبشكل عام، يمتلك هذا الإطار القدرة على تقليل وقت تطوير واجهات المستخدم بشكل كبير مع تحسين جودة وسهولة استخدام التصاميم المولدة.

يقدم الإطار المقترح نهجاً يتمحور حول الإنسان لإنشاء النماذج الأولية التلقائية لواجهات المستخدم من خلال دمج مبادئ التصميم المعرفي، ونمذجة الألوان الإدراكية (CAM02-UCS)، واتساق تخطيط الشاشات المتعددة في مسار حوسبة موحد. وبخلاف النهج السابقة التي ركزت بشكل أساسي على إعادة البناء الهيكلي أو الكشف البصري، يقوم هذا الإطار بنمذجة تجميع الجشتالت، والتسلسل الهرمي، وتحسين التباين، والانتظام الإدراكي بشكل صريح. وتظهر النتائج التجريبية تحسينات ملحوظة في سهولة الاستخدام (SUS و NASA-TLX)، والتناغم البصري (AHS و CHI و ΔE)، والأداء الهيكلي (GA و ROA و LCS و mAP)، مما يؤكد أن النمذجة المعرفية والإدراكية تعزز جودة واجهة المستخدم وتجربة المستخدم. وسيتناول العمل المستقبلي استكشاف دمج نماذج الرؤية واللغة القائمة على المحولات (transformer-based) لتحسين الفهم الدلالي والاستنتاج الهيكلي. بالإضافة إلى ذلك، فإن دمج التخصيص التكيفي، والتخطيطات المستجيبة للأجهزة، والتحسين بمشاركة العنصر البشري قد يعزز بشكل أكبر من القابلية التطبيقية العملية للنظام. وبشكل عام، يوفر هذا العمل أساساً لأنظمة تصميم واجهات المستخدم المدعومة بالذكاء الاصطناعي من الجيل القادم، والتي لا تكتفي بالدقة البصرية فحسب، بل تكون أيضاً فعالة معرفياً، ومتناغمة إدراكياً، وقابلة للنشر عملياً.

المواد

قائمة المواد المستخدمة في هذه المقالة

الاسم	الشركة	رقم فهرسي	التعليقات
وحدة المعالجة المركزية (المعالج)	AMD Ryzen 9 7950X (16-core, 32-thread, 4.5–5.7 GHz)	Advanced Micro Devices (AMD), USA	Ryzen 9 7950X
مجموعة أدوات CUDA Toolkit	الإصدار 11.8	NVIDIA Corporation, USA	CUDA Toolkit 11.8
cuDNN	الإصدار 8.9	NVIDIA Corporation, USA	cuDNN v8.9
Faster R-CNN	نموذج لكشف الأشياء (مع شبكة اقتراح المناطق)	Meta AI Research / Detectron2	Detectron2 framework
Matplotlib	الإصدار 3.7	Matplotlib Development Team	v3.7.0
وحدة معالجة الرسوميات NVIDIA RTX 4090 GPU	بطاقة رسوميات 24 GB GDDR6X	NVIDIA Corporation, Santa Clara, CA, USA	RTX 4090
NumPy	الإصدار 1.24	NumPy Developers	v1.24.0
OpenCV	الإصدار 4.8	OpenCV Foundation	v4.8.0
PyTorch	الإصدار 2.0	PyTorch Foundation (Meta AI)	v2.0.0
ResNet-50 مع FPN	شبكة عصبية تلافيفية أساسية مع شبكة هرم الميزات	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	الإصدار 1.3	Scikit-learn Developers	v1.3.0
SciPy	الإصدار 1.10	SciPy Community	v1.10.0
ذاكرة النظام (RAM)	64 GB DDR5	Corsair / Kingston (أو ما يعادلها)	DDR5 64GB Kit
نظام التشغيل Ubuntu	الإصدار 22.04 LTS	Canonical Ltd., UK	Ubuntu 22.04 LTS