المكاسب:
- القدرة على إنتاج رمز واجهة قوي لـ Jetpack Compose وSwiftUI حسب الغرض والمكون والحالات الأربع (تحميل/فارغ/خطأ/ممتلئ)، ونظام التصميم وإمكانية الوصول
- القدرة على إنتاج واجهة مفتوحة لجميع المستخدمين من خلال تحديد إمكانية الوصول من البداية، مع وضع العلامات الصحيحة والتباين الكافي واللمس المناسب.
- القدرة على إنشاء واجهات متسقة ومتعددة اللغات وجاهزة للموضوع الفاتح / الداكن من خلال قراءة اللون والمساحة من الموضوع المركزي
يتم تحديد نجاح تطبيق الهاتف المحمول إلى حد كبير من خلال واجهة المستخدم الخاصة به (واجهة المستخدم - الشاشات التي يراها المستخدم ويلمسها) وتجربة المستخدم (UX - مدى سلاسة ومتعة الاستخدام). لا يرى المستخدم الكود السيئ، لكنه يشعر بالواجهة السيئة في الثانية الأولى. يلعب الذكاء الاصطناعي دورين قويين في تطوير الواجهة: من ناحية، فهو يولد فكرة التصميم والتدفق والنص (كتابة تجربة المستخدم)؛ ومن ناحية أخرى، فإنه يحول هذا التصميم مباشرة إلى كود واجهة العمل. في هذه الوحدة، سوف نتعلم كيفية إنتاج واجهات سريعة وسهلة الوصول ومتسقة باستخدام الذكاء الاصطناعي، مع التركيز على أدوات الواجهة التعريفية الحديثة Jetpack Compose (Android) وSwiftUI (iOS). "التصريح" يعني أنه بدلاً من شرح كيفية رسم الشاشة خطوة بخطوة، فإنك تصف "هذه هي الطريقة التي يجب أن تبدو بها الشاشة في هذا الموقف"؛ الأداة تقوم بالباقي.
من التصميم إلى الكود: الترتيب الصحيح
إن مطالبة الذكاء الاصطناعي بـ "إنشاء شاشة جميلة" أمر غامض لأنه لا يمكن قياس "الجميلة". يتبع إنشاء الواجهة الجيدة هذا الترتيب:
- الغرض والمحتوى. ماذا تفعل الشاشة، ما هي المعلومات التي تظهرها، ماذا سيفعل المستخدم؟
- قائمة المكونات. أجزاء مثل العنوان والقائمة والزر وحقل النموذج.
- الحالات. جارٍ التحميل، فارغ (لا توجد بيانات)، خطأ، ممتلئ - حالات الشاشة الأساسية الأربعة.
- نظام التصميم. اللون، الطباعة، قواعد التباعد؛ الامتثال بشكل عام لإرشادات الواجهة البشرية للمادة 3 (Android) أو iOS.
- إمكانية الوصول. تسميات قارئ الشاشة، والتباين المناسب، وحجم هدف اللمس.
- شفرة. بعد أن قلت كل هذا، يتم إنشاء عرض Composable أو SwiftUI.
الخطوة الأكثر تخطيًا هي الخطوة الثالثة. يأخذ المطورون في الاعتبار الحالة "الكاملة" فقط؛ بينما في التطبيق الحقيقي، يواجه المستخدم غالبًا مواقف "تحميل" و"خطأ". إن طباعة الحالات الأربع على الذكاء الاصطناعي هي سر الواجهة القوية.
نصيحة: أضف "إنشاء تحميل، وفارغ، وخطأ، وكامل بشكل منفصل" في نهاية المطالبة. هذه الجملة الفردية تجعل واجهتك جاهزة للعالم الحقيقي وتقلل بشكل كبير من عدد الأخطاء في مرحلة ضمان الجودة (اختبار الجودة).
إمكانية الوصول غير قابلة للتفاوض
تعد إمكانية الوصول - القدرة على استخدام التطبيق من قبل المستخدمين ذوي الإعاقات البصرية أو السمعية أو الحركية - مسؤولية أخلاقية وتوقعًا قانونيًا ومتجرًا. يقوم الذكاء الاصطناعي بإنتاج كود يمكن الوصول إليه إذا رغبت في ذلك؛ يُرجع واجهة بدون علامات ومنخفضة التباين إذا لم تكن مرغوبة. ثلاث قواعد أساسية: امنح كل عنصر تفاعلي تسمية ذات معنى لقارئ الشاشة (contentDescription / AccessibilityLabel)، وتباين الألوان المناسب بين النص والخلفية (نسبة 4.5:1 على الأقل)، وهدف لمس لا يقل عن 48x48 dp/44x44 pt. اسأل الذكاء الاصطناعي عن هذه الأشياء بشكل صريح.
تحذير: يمكن للذكاء الاصطناعي أيضًا إضافة علامة وصول طويلة إلى أيقونة مزخرفة؛ وهذا يربك مستخدم قارئ الشاشة بالثرثرة غير الضرورية. يجب أن تكون العناصر الزخرفية البحتة "مخفية عن إمكانية الوصول" (يسمح لقارئ الشاشة بتخطيها). قم بمراجعة الملصقات المنتجة: دع المعنى يتكلم، دع الديكور يبقى صامتًا.
الاتساق: نظام التصميم والموضوع
لا تستخدم التطبيقات الاحترافية الألوان والمسافات العشوائية؛ يتبع نظام التصميم (مجموعة قياسية من الألوان والخطوط والمسافات والمكونات). إذا أعطيت الذكاء الاصطناعي قيم السمة الخاصة بك (اللون الرئيسي، اللون الثانوي، نصف قطر الزاوية، مقياس الطباعة)، ستخرج جميع الشاشات متسقة. إذا لم تقم بذلك، فستستخدم كل شاشة درجة مختلفة من اللون الأزرق وسيبدو التطبيق غير منظم. الطريقة الأكثر فعالية هي أن تطلب أولاً من الذكاء الاصطناعي إنشاء ملف رموز مميزة للموضوع/التصميم، ثم ربط جميع الشاشات بهذا المظهر.
الموضوع
نهج الفقراء
نهج قوي
اللون
رمز اللون يدويا لكل شاشة
الموضوع المركزي، شاشات القراءة من الموضوع
المواقف
الشاشة "الكاملة" فقط
جارٍ التحميل/فارغ/خطأ/أربع حالات كاملة
إمكانية الوصول
تمت إضافتها لاحقًا
وقد تم تعريفه في المطالبة من البداية
نص
مضمن في التعليمات البرمجية
مصدر منفصل، متعدد اللغات جاهز
ثلاث حالات صغيرة
الحالة 1 - تم حفظ الحالة الفارغة. كان لدى فريق تطبيق الأخبار حالات شاشة فردية لطباعة AI. بفضل شاشة "حالة الخمول" ("لم يتم حفظ الأخبار بعد")، لم يترك 70% من المشاركين في اختبار المستخدم التطبيق على شاشة فارغة؛ في الإصدار السابق، ظلت الشاشة الفارغة بيضاء اللون واعتقد المستخدمون أنها "مكسورة" وغادروا. نسخة صغيرة زادت معدل الاحتفاظ.
الحالة 2 - رفض التباين. تقدم أحد الفرق بطلب إلى متجر التطبيقات باستخدام شاشات تحتوي على نص باللون الرمادي الفاتح، وهو لون العلامة التجارية. أصدرت شركة Apple تحذيرًا لأسباب تتعلق بإمكانية الوصول بسبب التباين المنخفض. عندما طُلب من الذكاء الاصطناعي "زيادة تباين خلفية النص فوق 4.5:1"، أصبحت الألوان أغمق وتم حل المشكلة. ولو تم طلب ذلك من البداية، لما كان هناك أي تأخير.
الحالة 3 - ضجيج الملصقات الزخرفية. أفاد أحد مختبري ضعاف البصر أن كل أيقونة زخرفية ("خط"، "نقطة"، "ظل") تمت قراءتها بصوت عالٍ على الشاشة التي تم إنشاؤها بواسطة الذكاء الاصطناعي، مما يجعل الشاشة غير قابلة للاستخدام. أصبحت تجربة قارئ الشاشة سلسة عندما تم إخفاء العناصر الزخرفية عن إمكانية الوصول. الدرس المستفاد: تعني إمكانية الوصول "العلامات الصحيحة"، وليس "عدد كبير جدًا من العلامات".
موجه ضعيف / موجه قوي
المطالبة الضعيفة: "تصميم شاشة الملف الشخصي".
مطالبة قوية: "إنشاء شاشة ملف تعريف المستخدم لنظام التشغيل iOS/SwiftUI. المحتوى: الصورة الرمزية، الاسم، البريد الإلكتروني، زر "تحرير الملف الشخصي"، قائمة الإعدادات. الحالات: تحميل (الهيكل العظمي)، خطأ (زر إعادة المحاولة)، كامل. التصميم: غير مادي، يتوافق مع iOS HIG؛ ألوان النظام، النوع الديناميكي. إمكانية الوصول: تسمية إمكانية الوصول لكل عنصر، أيقونات زخرفية مخفية، هدف اللمس بحد أدنى 44 نقطة. اقرأ قيم السمات من ملف منفصل، لا تقم بتضمين رمز اللون في الشاشة أولاً، ارسم شجرة المكونات، ثم قم بتصدير الكود."
قوالب قابلة للنسخ
قالب إنشاء الشاشة: "إنشاء [اسم الشاشة] لـ [النظام الأساسي/الأداة]. المحتوى: [العناصر]. إجراءات المستخدم: [الإجراءات]. إنشاء أربع حالات بشكل منفصل: تحميل، فارغ، خطأ، ممتلئ. نظام التصميم: [Material 3 / iOS HIG]، القراءة من الرموز المميزة للموضوع. إمكانية الوصول: التسميات، التباين >=4.5:1، معيار هدف اللمس."
قالب نظام السمة/التصميم: "إنتاج تعريف سمة مركزية لتطبيقي ([إنشاء سمة / بنية رمزية للتصميم في SwiftUI]): - اللون الأساسي [ست عشري]، الثانوي [ست عشري]، لون الخطأ، لون السطح - مقياس الطباعة (العنوان، النص، الوصف) - مقياس التباعد (4،8،16،24) - معيار نصف قطر الزاوية، أضف دعم السمة الفاتحة والداكنة."
قالب تدقيق إمكانية الوصول:"تحقق من رمز الشاشة هذا لسهولة الوصول:1) هل هناك أي عناصر تفاعلية غير مميزة؟2) هل نسب التباين كافية؟3) هل أهداف اللمس كبيرة بما يكفي؟4) هل العناصر الزخرفية مخفية عن قارئ الشاشة؟ اقترح إصلاحات لكل مشكلة. [رمز]"
تصميم لقالب التعليمات البرمجية: "أصف التصميم التالي: [وصف الشاشة أو لقطة الشاشة]. قم بترجمة هذا إلى كود [إنشاء/SwiftUI]. حافظ على التباعد والمحاذاة وفقًا للتصميم، ولكن أضف الحالات الأربع."
الأخطاء الشائعة
- مجرد التفكير في الوضع الكامل. في أغلب الأحيان يرى المستخدم الحقيقي شاشة التحميل/الخطأ.
- تضمين اللون والمساحة في التعليمات البرمجية. إذا لم يكن الموضوع مركزيًا، فسيتم فقدان الاتساق وتصبح الصيانة صعبة.
- ترك إمكانية الوصول لآخر. وإضافته لاحقًا أمر مكلف؛ إنه مجاني إذا تم طلبه من البداية.
- الإفراط في التسمية. تؤدي قراءة العناصر الزخرفية أيضًا إلى تعطيل تجربة قارئ الشاشة.
- تضمين النص في الكود. عند الحاجة إلى دعم متعدد اللغات، فمن الضروري تغيير كل شاشة يدويًا؛ أبقِ النصوص منفصلة.
- نتوقع نسخة طبق الأصل من لقطة الشاشة. ينتج تصميم الذكاء الاصطناعي تقريبًا. يتم ضبط دقة البكسل يدويًا.
في ملخص
الذكاء الاصطناعي قوي في إنتاج الواجهة، ولكنه يتطلب التوجيه. الترتيب الصحيح: الغرض، المكونات، الحالات الأربع (تحميل/فارغ/خطأ/ممتلئ)، نظام التصميم، إمكانية الوصول، ثم الكود. إمكانية الوصول غير قابلة للتفاوض وتعني "الملصق الصحيح"، وليس "عدد كبير جدًا من التصنيفات". للحصول على الاتساق، اقرأ اللون والتباعد من القالب المركزي، ولا تقم بتضمينه في التعليمات البرمجية. الإرادة القوية هي التي تحدد كل هذا منذ البداية؛ وبذلك تكون الواجهة جاهزة للعالم الحقيقي وموافقة المتجر وجميع المستخدمين.
مهمة التطبيق
باستخدام "قالب إنشاء الشاشة" لشاشة الإعدادات، اطلب من الذكاء الاصطناعي إنشاء كود أو رمز SwiftUI واطلب جميع الحالات الأربع. ثم قم بالتحقق من نفس الرمز باستخدام "قالب التحقق من إمكانية الوصول". ابحث عن تحسين واحد على الأقل لإمكانية الوصول وأصلحه (ملصق مفقود، أو تباين منخفض، أو هدف لمس صغير) ولاحظ الحالة (جاري التحميل/فارغ/خطأ) التي تعتقد أنها ستظهر في أغلب الأحيان في الاستخدام الحقيقي.
قائمة مرجعية
- [ ] لقد أوضحت الغرض من العرض ومكوناته في الموجه
- [ ] لقد تم إنشاء الحالات الأربع (جاري التحميل/فارغ/خطأ/ممتلئ) بشكل منفصل
- [ ] لقد قمت بقراءة اللون والمساحة من السمة المركزية، ولم أقم بتضمينها في الكود.
- [ ] أردت تسميات إمكانية الوصول والتباين منذ البداية
- [ ] لقد تحققت من إخفاء العناصر الزخرفية عن قارئ الشاشة
- [ ] أبقيت النصوص منفصلة، وجاهزة للغات متعددة