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

ملخص

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

الملخص

يتطلب التصميم الفعال لواجهة المستخدم (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 grouping) للتكتل البصري، وقانون فيتس (Fitts’ law) لتحسين حجم هدف اللمس وإمكانية الوصول، وقانون هيك (Hick’s law) لتقليل تعقيد اتخاذ القرار، والتباعد القائم على الانتباه لتحسين التسلسل الهرمي البصري. ونتيجة لذلك، يصبح التخطيط أكثر بديهية وقابلية للقراءة وكفاءة لتفاعل المستخدم. وأخيراً، يتم دمج التخطيط المُحسن مع نمذجة الألوان الإدراكية لإنتاج نموذج أولي متماسك لواجهة المستخدم. وتكون الواجهة الناتجة دقيقة هيكلياً، ومتناغمة بصرياً، ومتوافقة مع توقعات سهولة الاستخدام البشرية.

تم تنفيذ إطار العمل باستخدام PyTorch 2.0 على نظام Ubuntu 22.04. وأجريت التجارب على نظام مجهز بوحدة معالجة رسومات NVIDIA RTX 4090 (بذاكرة فيديو VRAM سعتها 24 GB). استخدم نموذج Faster R-CNN عمود فقري من نوع ResNet-50 مدرب مسبقاً على مجموعة بيانات ImageNet. وقد تم التدريب باستخدام مُحسن الانحدار العشوائي (SGD) بمعدل تعلم قدره 0.001، وحجم دفعة يبلغ 16، ولمدة تصل إلى 60 دورة تدريبية (epochs). طُبقت تقنية التوقف المبكر لمنع الإفراط في التخصيص باستخدام مجموعة تحقق تشمل 20% من البيانات. وعلى الرغم من أن التدريب قد استمر حتى 60 دورة، إلا أن التقارب كان يتحقق عادةً في وقت مبكر عبر التوقف المبكر بناءً على خسارة التحقق. تم ضبط الزخم واضمحلال الوزن على 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 pixels، وتحويلها إلى فضاء لوني موحد sRGB، وإعادة شرحها بصناديق إحاطة وبيانات وصفية هيكلية معيارية لضمان التوافق بين مجموعات البيانات. ويرد عرض عام لمجموعات البيانات المستخدمة في هذه الدراسة في الجدول 2. تدعم مجموعة بيانات RICO الكشف واسع النطاق عن مكونات واجهة المستخدم والتحليل الهيكلي، بينما تعزز ENRICO قدرة النموذج على التعرف على أنماط المخططات وفرض الاتساق عبر الشاشات. أما مجموعة بيانات ألوان واجهة المستخدم الخاصة بـ Guo، رغم صغر حجمها، فإنها تلعب دوراً حاسماً في تقييم التناغم اللوني الإدراكي ونمذجة التباين. وتوفر هذه المجموعات معاً أساساً شاملاً ومتوازناً لتدريب والتحقق من وتقييم إطار عمل النمذجة الأولية الآلي لواجهة المستخدم المقترح.

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

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

تم استخدام استراتيجية أخذ العينات الطبقية للحفاظ على التنوع في مكونات واجهة المستخدم، وهياكل التخطيط، وتوزيعات الألوان عبر مجموعات بيانات RICO وENRICO وGuo. تم تقسيم مجموعة البيانات إلى مجموعات فرعية للتدريب (70%)، والتحقق (15%)، والاختبار (15%) باستخدام أخذ العينات الطبقية. تم تطبيع الصور باستخدام المتوسط (0.485, 0.456, and 0.406) والانحراف المعياري (0.229, 0.224, and 0.225). تضمنت عملية تعزيز البيانات القلب الأفقي العشوائي (الاحتمالية = 0.5) والقص العشوائي (نطاق المقياس: 0.8–1.0)، يليه تغيير الحجم إلى 224 × 224 بكسل والذي تم تطبيقه أثناء التدريب.

توسيم المكونات والمعالجة المسبقة

تدعم مجموعات بيانات RICO وENRICO وUI Color الخاصة بـ Guo مجتمعة المكونات الوظيفية الثلاثة الأساسية لإطار عمل نمذجة واجهة المستخدم المؤتمت المقترح: الكشف عن المكونات، ونمذجة التنسيق، وتحسين الألوان الإدراكي. تحتوي مجموعة بيانات RICO على مجموعة واسعة النطاق تضم أكثر من 66,000 شاشة واجهة مستخدم للهواتف المحمولة، وتُستخدم بشكل أساسي لتدريب وحدة الكشف عن المكونات. ويمكّن تنوعها نموذج Faster R-CNN من تعلم تمثيلات قوية لعناصر واجهة المستخدم الشائعة مثل الأزرار والصور وحقول النصوص عبر مجموعة واسعة من التطبيقات، مما يضمن الكشف الدقيق وتحديد مواقع مكونات واجهة المستخدم في ظل ظروف تصميم متنوعة. وتوفر مجموعة بيانات ENRICO شاشات واجهة مستخدم عالية الجودة ومصنفة حسب الأنماط لتعلم العلاقات الهيكلية وأنماط التنسيق، مما يُمكّن النظام من فهم العلاقات بين المكونات والتنظيم الهرمي وقوالب التصميم الشائعة. وتلعب مجموعة البيانات هذه دوراً حاسماً في نمذجة هياكل التنسيق وفرض الاتساق عبر الشاشات المتعددة، مما يسمح لإطار العمل بإنشاء تنسيقات تتماشى مع اتفاقيات التصميم الراسخة. وفي المقابل، تُستخدم مجموعة بيانات UI Color الخاصة بـ Guo خصيصاً للنمذجة اللونية الإدراكية والمعرفية. وبخلاف RICO وENRICO اللتين تركزان على الجوانب الهيكلية، تحتوي مجموعة البيانات هذه على صور مختارة لواجهات المستخدم مع سمات لونية مشروحة. وتُستخدم هذه الشروحات لتدريب وحدات استخراج الألوان وتقييم التناغم اللوني. ومن خلال تعيين العلاقات اللونية في مساحات ألوان إدراكية مثل CAM02-UCS، يتعلم إطار العمل توليد لوحات ألوان توازن بين التباين وسهولة الوصول والانسجام الجمالي. وتشكل هذه المجموعات معاً مسار عمل متكامل: حيث تدعم RICO الكشف عن المكونات، وتُمكّن ENRICO فهم أنماط التنسيق والاتساق الهيكلي، وتسهل مجموعة بيانات Guo تحسين الألوان الإدراكي. ويضمن هذا التكامل أن تكون نماذج واجهات المستخدم المولدة دقيقة هيكلياً، ومتناغمة بصرياً، ومحسنة معرفياً.

تم إجراء التسوية (Normalization) باستخدام متوسط قدره [0.485, 0.456, 0.406] وانحراف معياري قدره [0.229, 0.224, 0.225]. وطُبقت تقنيات تعزيز البيانات (Data augmentation)، بما في ذلك القص العشوائي، والقلب الأفقي، والتدوير، لتحسين قدرة النموذج على التعميم. بالإضافة إلى ذلك، تم تغيير مقياس قيم البكسل لتصبح في النطاق [0, 1]، وتم تغيير حجم جميع الصور إلى دقة 480 × 800 pixels لضمان الاتساق عبر مجموعات البيانات. وتُستخدم الصور التي تم تغيير حجمها إلى 224 × 224 pixels لغرض التعزيز أثناء التدريب، بينما يتم الحفاظ على الدقة الأصلية 480 × 800 pixels لتحليل المخطط (layout analysis). كما تم تعديل مربعات الإحاطة (Bounding boxes) لاستبعاد التعليقات التوضيحية غير ذات الصلة باستخدام عتبات محددة مسبقاً. ولتحقيق التوحيد عبر مجموعات البيانات، تم وضع تعليقات توضيحية يدوية لجميع عناصر واجهة المستخدم باستخدام أداة التعليق التوضيحي LabelImg. كما وُضع مخطط محدد مسبقاً قبل عملية التعليق لتصنيف عناصر واجهة المستخدم إلى فئات مثل: الزر (button)، والنص (text)، والصورة (image)، والأيقونة (icon)، والحاوية (container). ولتمثيل مربعات الإحاطة، تم تطبيق نظام إحداثيات موحد، وبُنيت المعلومات الهرمية بناءً على العلاقات المكانية بين العناصر وارتباطات الوالد والطفل (parent–child associations) ضمن شجرة المخطط. بالإضافة إلى ذلك، وُضعت إرشادات لضمان اتساق التعليقات التوضيحية للعناصر، والتعامل السليم مع المكونات المتداخلة، وفرض عتبات الحد الأدنى للحجم عبر مجموعات بيانات RICO وENRICO وGuo.

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

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

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

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

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

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

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

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

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

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

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

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

التجميع لغرض تجميع المخطط (DBSCAN)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

النتائج

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

تُظهر النتائج التجريبية أن نموذج الكشف القائم على 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، مع حجم دفعة (batch size) يبلغ 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، ولذلك فهو مقبول على نطاق واسع كمعيار قياسي لاكتشاف الأشياء.

تشير نتائج الكشف عبر مجموعات البيانات الثلاث إلى أن وحدة الكشف عن المكونات المقترحة تؤدي أداءً جيداً وثابتاً. تم عرض النتائج الكمية في Table 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 (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. يمثل المحور السيني مجموعات البيانات، بينما يوضح المحور الصادي قيم 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 أعلى وسيط لـ GA وأصغر مدى ربيعي، مما يشير إلى أداء تجميع مستقر ومتسق نظراً لتخطيطاتها المحددة جيداً والمصنفة وفق أنماط. بينما تظهر مجموعة بيانات RICO دقة تجميع متوسطة مع تباين أعلى، ويرجع ذلك على الأرجح إلى تنوعها الأكبر وتعقيد تخطيطاتها. وتسجل مجموعة بيانات Guo UI Color دقة تجميع أقل، حيث أن عيناتها غير متجانسة بصرياً وأقل تركيزاً على التخطيط الهيكلي. وبشكل عام، تشير النتائج إلى أن وحدة تحسين التخطيط المعرفي تعمل بشكل موثوق عبر مجموعات البيانات، محققة أفضل أداء تجميع في البيانات المتسقة هيكلياً.

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

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

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

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

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

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

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

مقاييس جودة اللون

يتم تقييم سمات ألوان واجهة المستخدم (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 في إنشاء مخططات ألوان لواجهة المستخدم تكون متناغمة، وقابلة للقراءة، ومُحسنة إدراكياً.

المقياس	التعريف	الطريقة المقترحة	الخط المرجعي1	التحسن (%)
Δ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 (درجة التنوع اللوني)	التباين في فضاء J′a′b′	18.70	12.40	50.80%
CPS (درجة البروز اللوني)	استقرار الألوان السائدة	0.72	0.55	30.90%

الجدول 5: مقارنة كمية لمقاييس جودة الألوان بين الطريقة المقترحة والطرق المرجعية. يعرض الجدول مقاييس تقييم جودة الألوان، بما في ذلك فرق اللون الإدراكي (ΔE في CAM02-UCS)، ونسبة التباين (WCAG)، ومؤشر تناغم الألوان (CHI)، ودرجة تنوع الألوان (CDS)، ودرجة بروز الألوان (CPS). وتتم مقارنة نتائج الطريقة المقترحة بالقيم المرجعية، إلى جانب نسب التحسن.

الخصائص الديموغرافية للمشاركين وتصميم الدراسة

شارك ما مجموعه 30 مشاركاً في عملية التقييم، تراوحت أعمارهم بين 20 و35 عاماً (متوسط العمر: 26.4 ± 3.2 سنة). شملت المجموعة أفراداً من خلفيات متنوعة، بما في ذلك مهندسو برمجيات، وطلاب، ومصممو واجهة المستخدم وتجربة المستخدم (UI/UX). وبناءً على الكفاءة الذاتية في استخدام الحاسوب، صُنّف 40% من المشاركين كمستخدمين متوسطين، و35% كمستخدمين متقدمين، و25% كمبتدئين. وكان لدى نصف المشاركين تقريباً خبرة سابقة في تصميم واجهة المستخدم وتجربة المستخدم (UI/UX) أو المجالات ذات الصلة، بينما لم يمتلك بقية المشاركين هذه الخبرة. وقد ضمن هذا التنوع إجراء تقييم متوازن عبر مختلف مستويات الخبرة التقنية والإلمام بالتصميم.

مقاييس دراسة المستخدم

أُجري تقييم متمحور حول المستخدم باستخدام مقاييس متعددة، شملت مؤشر NASA-TLX، ومقياس سهولة استخدام النظام (SUS)، ودرجة التناغم الجمالي (AHS)، ووقت كفاءة البحث (SET)، وتقييم اتساق الشاشات المتقاطعة (CSCR)، وذلك لتقييم الحمل المعرفي، وسهولة الاستخدام، والجاذبية البصرية، والكفاءة، والاتساق.

يقوم مقياس NASA-TLX بتكميم العبء الذهني من خلال قياس عوامل مثل الطلب الذهني، والجهد، والإحباط. وتشير الدرجات المنخفضة إلى انخفاض الحمل المعرفي وتحسن سهولة التفاعل. وقد أدى الإطار المقترح باستمرار إلى الحصول على درجات NASA-TLX أقل عبر جميع مجموعات البيانات، مما يشير إلى انخفاض الجهد الذهني. ويمكن إرجاع هذا التحسن إلى دمج مبادئ التصميم المعرفي، بما في ذلك تجميع Gestalt، والتباعد الأمثل، والتسلسل الهرمي البصري المحسن، والتي تسهل مجتمعة تنقلاً أكثر بديهية. ويوفر مقياس SUS درجة سهولة استخدام معيارية تتراوح من 0 إلى 100، حيث تشير القيم الأعلى إلى تحسن في سهولة الاستخدام والوضوح. وقد حقق الإطار المقترح درجات SUS أعلى مقارنة بالطرق المرجعية، مما يعكس تحسينات في كل من التخطيط الهيكلي ووضوح الألوان. وقد ساهم تحسين المحاذاة والتباعد وتدفق التنقل في واجهات اعتبرها المستخدمون أكثر بديهية وتماسكاً من الناحية الوظيفية. أما مقياس AHS، الذي يتم قياسه على مقياس ليكرت المكون من 7 نقاط، فيقيم الجاذبية البصرية المتصورة والتناغم اللوني. وقد حققت الواجهات التي تم إنشاؤها باستخدام وحدة نمذجة الألوان القائمة على CAM02-UCS قيم AHS أعلى، مما يشير إلى انتقالات لونية أكثر سلاسة ولوحات ألوان أكثر توازناً بصرياً. وقد فضل المشاركون باستمرار هذه الواجهات بسبب تحسن التباين، وتماسك التدرج اللوني، وتقليل الفوضى البصرية، مما يسلط الضوء على أهمية نمذجة الألوان الإدراكية في تصميم واجهات المستخدم. ويقيس SET الوقت الذي يستغرقه المستخدمون لتحديد عناصر واجهة المستخدم المستهدفة أثناء مهام البحث البصري. وتشير قيم SET المنخفضة إلى تحسن في التنظيم والتسلسل الهرمي البصري. وقد خفض الإطار المقترح قيمة SET بشكل كبير عبر جميع مجموعات البيانات، مما يثبت أن دمج تجميع Gestalt، والتباعد الموجه بالانتباه، وهياكل التخطيط المنقحة يتيح تفاعلاً أسرع وأكثر كفاءة. ويقيم مقياس 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.

مقياس	القيمة المرجعية (المتوسط ± الانحراف المعياري)	المقترح (المتوسط ± الانحراف المعياري)	نسبة التحسن (%)	القيمة الاحتمالية (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	ذو دلالة إحصائية عالية
درجة مقياس سهولة الاستخدام (↑)	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 يلخص مساهمة كل وحدة ويقارن الإطار المقترح مع نهج توليد واجهة المستخدم (UI) الحالية. يحقق النموذج الكامل أفضل أداء في جميع مقاييس جودة المخطط، ونمذجة الألوان، والكشف، مما يثبت أن التصميم المعرفي، ونمذجة الألوان الإدراكية، والفهم البصري العميق لها تأثير تآزري. عند إزالة وحدة نمذجة الألوان، تزداد قيمة Δ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 لألوان واجهة المستخدم (Guo’s 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