فائدہ:
- جیٹ پیک کمپوز اور سوئفٹ یو آئی کے لیے مقصد، جزو، چار حالتوں (لوڈنگ/خالی/غلطی/مکمل)، ڈیزائن سسٹم اور رسائی کے لحاظ سے مضبوط انٹرفیس کوڈ تیار کرنے کی صلاحیت
- درست لیبلنگ، کافی کنٹراسٹ اور مناسب ٹچ کے ساتھ ایک انٹرفیس تیار کرنے کی صلاحیت جو شروع سے ہی رسائی کی وضاحت کرکے تمام صارفین کے لیے کھلا ہو۔
- مرکزی تھیم سے رنگ اور جگہ پڑھ کر مستقل، کثیر زبان اور ہلکے/ڈارک تھیم کے لیے تیار انٹرفیس بنانے کی صلاحیت
ایک موبائل ایپ کی کامیابی کا تعین بڑی حد تک اس کے یوزر انٹرفیس (UI — وہ اسکرین جسے صارف دیکھتا اور چھوتا ہے) اور صارف کے تجربے (UX — اس کا استعمال کتنا ہموار اور پر لطف ہے) سے ہوتا ہے۔ صارف برا کوڈ نہیں دیکھتا، لیکن پہلے سیکنڈ میں برا انٹرفیس محسوس کرتا ہے۔ AI انٹرفیس کی ترقی میں دو طاقتور کردار ادا کرتا ہے: ایک طرف، یہ ڈیزائن خیال، بہاؤ اور متن (UX تحریر) پیدا کرتا ہے؛ دوسری طرف، یہ اس ڈیزائن کو براہ راست ورکنگ انٹرفیس کوڈ میں تبدیل کرتا ہے۔ اس یونٹ میں، ہم سیکھیں گے کہ کس طرح AI کے ساتھ تیز، قابل رسائی اور مستقل انٹرفیس تیار کیا جائے، جدید اعلانیہ انٹرفیس ٹولز Jetpack Compose (Android) اور SwiftUI (iOS) پر فوکس کیا جائے۔ "اعلانیہ" کا مطلب ہے کہ اسکرین کو کس طرح کھینچنا ہے، مرحلہ وار وضاحت کرنے کے بجائے، آپ "اس صورت حال میں اسکرین کو اس طرح نظر آنا چاہیے" کی وضاحت کرتے ہیں۔ ٹول باقی کام کرتا ہے۔
ڈیزائن سے کوڈ تک: صحیح ترتیب
AI کو "خوبصورت اسکرین بنانے" کے لیے کہنا مبہم ہے کیونکہ "خوبصورت" کی پیمائش نہیں کی جا سکتی۔ اچھی انٹرفیس نسل اس ترتیب کی پیروی کرتی ہے:
- مقصد اور مواد۔ اسکرین کیا کرتی ہے، کیا معلومات دکھاتی ہے، صارف کیا کرے گا؟
- اجزاء کی فہرست۔ حصے جیسے عنوان، فہرست، بٹن، فارم فیلڈ۔
- حالات۔ لوڈ ہو رہا ہے، خالی (کوئی ڈیٹا نہیں)، خرابی، مکمل — اسکرین کی چار بنیادی حالتیں۔
- ڈیزائن سسٹم۔ رنگ، نوع ٹائپ، وقفہ کاری کے اصول؛ عام طور پر میٹریل 3 (Android) یا iOS کے انسانی انٹرفیس کے رہنما خطوط کی تعمیل کرنا۔
- رسائی۔ اسکرین ریڈر لیبلز، مناسب کنٹراسٹ، ٹچ ٹارگٹ سائز۔
- کوڈ یہ سب کہنے کے بعد، کمپوز ایبل یا سوئفٹ یو آئی ویو جنریشن۔
سب سے زیادہ کثرت سے چھوڑا جانے والا مرحلہ تیسرا ہے۔ ڈویلپرز صرف "مکمل" حالت پر غور کرتے ہیں؛ جبکہ حقیقی ایپلی کیشن میں صارف کو زیادہ تر "لوڈنگ" اور "خرابی" کے حالات کا سامنا کرنا پڑتا ہے۔ چاروں ریاستوں کو AI پر پرنٹ کرنا ایک مضبوط انٹرفیس کا راز ہے۔
ٹپ: پرامپٹ کے آخر میں "لوڈنگ، خالی، غلطی، اور مکمل الگ سے پیدا کریں" شامل کریں۔ یہ ایک جملہ آپ کے انٹرفیس کو حقیقی دنیا کے لیے تیار کرتا ہے اور QA (کوالٹی ٹیسٹنگ) کے مرحلے میں غلطیوں کی تعداد کو نمایاں طور پر کم کرتا ہے۔
رسائی غیر گفت و شنید ہے۔
قابل رسائی - بصری، سماعت یا موٹر معذوری والے صارفین کے ذریعہ ایپلیکیشن کو استعمال کرنے کی صلاحیت - ایک اخلاقی ذمہ داری اور اسٹور اور قانونی توقع دونوں ہے۔ AI اگر چاہے تو قابل رسائی کوڈ تیار کرتا ہے۔ اگر مطلوبہ نہ ہو تو ٹیگ کے بغیر، کم کنٹراسٹ انٹرفیس لوٹاتا ہے۔ انگوٹھے کے تین اصول: ہر ایک انٹرایکٹو عنصر کو اسکرین ریڈر کے لیے ایک بامعنی لیبل دیں (مواد کی تفصیل / قابل رسائی لیبل)، متن اور پس منظر کے درمیان مناسب رنگ کا تضاد (کم از کم 4.5:1 تناسب)، اور کم از کم 48x48 dp/44x44 pt کا ٹچ ہدف۔ اے آئی سے یہ چیزیں واضح طور پر پوچھیں۔
احتیاط: AI آرائشی آئیکن میں ایک لمبا قابل رسائی ٹیگ بھی شامل کر سکتا ہے۔ یہ اسکرین ریڈر صارف کو غیر ضروری چہچہاہٹ سے مغلوب کر دیتا ہے۔ خالصتاً آرائشی عناصر "قابل رسائی سے پوشیدہ" ہونے چاہئیں (اسکرین ریڈر کو چھوڑنے کی اجازت ہے)۔ تیار کردہ لیبلز کا جائزہ لیں: معنی خیز کو بولنے دیں، آرائشی کو خاموش رہنے دیں۔
مستقل مزاجی: ڈیزائن سسٹم اور تھیم
پیشہ ورانہ ایپلی کیشنز بے ترتیب رنگ اور وقفہ کاری کا استعمال نہیں کرتی ہیں۔ ایک ڈیزائن سسٹم کی پیروی کرتا ہے (رنگوں، فونٹس، وقفہ کاری، اور اجزاء کا معیاری سیٹ)۔ اگر آپ AI کو اپنی تھیم کی قدریں (مین رنگ، ثانوی رنگ، کونے کا رداس، نوع ٹائپ کا پیمانہ) دیتے ہیں، تو تمام اسکرینیں مستقل طور پر سامنے آئیں گی۔ اگر آپ ایسا نہیں کرتے ہیں تو، ہر اسکرین نیلے رنگ کے مختلف شیڈ کا استعمال کرے گی اور ایپ بے ترتیبی نظر آئے گی۔ سب سے موثر طریقہ یہ ہے کہ پہلے AI سے تھیم/ڈیزائن ٹوکنز فائل بنانے کے لیے کہے، پھر تمام اسکرینوں کو اس تھیم سے منسلک کریں۔
موضوع
غریب نقطہ نظر
مضبوط نقطہ نظر
رنگ
ہر اسکرین کو دستی طور پر رنگین کوڈ کریں۔
مرکزی تھیم، سکرینیں تھیم سے پڑھی جاتی ہیں۔
حالات
صرف "مکمل" اسکرین
لوڈنگ/خالی/غلطی/پوری چار حالتیں۔
رسائی
بعد میں شامل کیا گیا۔
اس کی تعریف شروع سے ہی دعوے میں کی گئی ہے۔
متن
کوڈ میں سرایت
الگ ماخذ، کثیر زبان تیار
تین چھوٹے مقدمات
کیس 1 - خالی کیس محفوظ ہو گیا۔ ایک نیوز ایپ ٹیم کے پاس AI پرنٹ انفرادی اسکرین اسٹیٹس تھیں۔ "بیکار حالت" اسکرین کا شکریہ ("ابھی تک کوئی خبر محفوظ نہیں ہوئی")، صارف کی جانچ میں 70% شرکاء نے ایپ کو خالی اسکرین پر نہیں چھوڑا؛ پچھلے ورژن میں، خالی اسکرین سفید ہی رہی اور صارفین نے سوچا کہ یہ "ٹوٹا" ہے اور چھوڑ دیا گیا ہے۔ ایک چھوٹی کاپی نے برقرار رکھنے کی شرح میں اضافہ کیا۔
کیس 2 - کنٹراسٹ کو مسترد کرنا۔ ایک ٹیم نے ایپ اسٹور پر اسکرینوں کے ساتھ درخواست دی جس میں متن کے ساتھ ہلکے بھوری رنگ، برانڈ کا رنگ ہے۔ ایپل نے کم کنٹراسٹ کی وجہ سے رسائی کی بنیادوں پر ایک انتباہ جاری کیا۔ جب AI کو کہا گیا کہ "ٹیکسٹ بیک گراؤنڈ کنٹراسٹ کو 4.5:1 سے بڑھائیں"، تو رنگ گہرے ہو گئے اور مسئلہ حل ہو گیا۔ اگر شروع سے ہی درخواست کی جاتی تو تاخیر نہ ہوتی۔
کیس 3 - آرائشی لیبل شور۔ ایک نابینا ٹیسٹر نے اطلاع دی کہ ہر زیور کا آئیکن ("لائن،" "ڈاٹ،" "شیڈو") AI سے تیار کردہ اسکرین پر بلند آواز سے پڑھا جاتا ہے، جس سے اسکرین ناقابل استعمال ہو جاتی ہے۔ اسکرین ریڈر کا تجربہ اس وقت سیال بن گیا جب آرائشی عناصر کو رسائی سے پوشیدہ رکھا گیا۔ سبق: رسائی کا مطلب ہے "صحیح ٹیگز،" نہیں "بہت زیادہ ٹیگز۔"
کمزور فوری / مضبوط اشارہ
کمزور اشارہ: "ایک پروفائل اسکرین ڈیزائن کریں۔"
طاقتور پرامپٹ: "iOS/SwiftUI کے لیے صارف کی پروفائل اسکرین بنائیں۔ مواد: اوتار، نام، ای میل، 'پروفائل میں ترمیم کریں' بٹن، ترتیبات کی فہرست۔ حالتیں: لوڈنگ (کنکال)، غلطی (دوبارہ کوشش کرنے کا بٹن)، مکمل۔ ڈیزائن: غیر مادی، iOS HIG کے مطابق؛ سسٹم کے رنگ، متحرک قسم: رسائی کے لیے ہر ایک کو چھپایا جا سکتا ہے، رسائی کی صلاحیت ٹچ ٹارگٹ min 44pt ایک علیحدہ فائل سے تھیم ویلیوز کو اسکرین پر ایمبیڈ نہ کریں، پھر کوڈ کو ایکسپورٹ کریں۔"
کاپی کرنے کے قابل ٹیمپلیٹس
اسکرین جنریشن ٹیمپلیٹ: "[پلیٹ فارم/ٹول] کے لیے [اسکرین کا نام] بنائیں۔ مواد: [عناصر]۔ صارف کی کارروائیاں: [کارروائیاں]۔ چار حالتیں الگ سے بنائیں: لوڈنگ، خالی، خرابی، مکمل۔ ڈیزائن سسٹم: [مٹیریل 3 / iOS HIG]، تھیم ٹوکنز سے پڑھیں۔ ایکسیسبیلٹی، ٹارگٹ لیب = 5> ٹچ۔
تھیم/ڈیزائن سسٹم ٹیمپلیٹ: "میری ایپ کے لیے مرکزی تھیم کی تعریف تیار کریں ([سوفٹ یو آئی میں تھیم /ایک ڈیزائن ٹوکن ڈھانچہ تحریر کریں]):- بنیادی رنگ [ہیکس]، ثانوی [ہیکس]، خرابی کا رنگ، سطح کا رنگ- نوع ٹائپ پیمانہ (ٹائٹل، باڈی، تفصیل) - اسپیسنگ اسکیل (4,8,16,24)-A کونے کی روشنی اور کونے کی روشنی کو سپورٹ کریں۔
ایکسیسبیلٹی آڈٹ ٹیمپلیٹ:"ایکسیسبیلٹی کے لیے اس اسکرین کوڈ کو چیک کریں:1) کیا کوئی غیر ٹیگ شدہ انٹرایکٹو عناصر ہیں؟ 2) کیا کنٹراسٹ ریشوز کافی ہیں؟ 3) کیا ٹچ ٹارگٹس کافی بڑے ہیں؟ 4) کیا آرائشی عناصر اسکرین ریڈر سے پوشیدہ ہیں؟ ہر مسئلے کے لیے اصلاحات تجویز کریں۔ [code]"
کوڈ ٹیمپلیٹ کے لیے ڈیزائن: "میں مندرجہ ذیل ڈیزائن کی وضاحت کرتا ہوں: [اسکرین کی تفصیل یا اسکرین شاٹ]۔ اسے [کمپوز/سوئفٹ یو آئی] کوڈ میں ترجمہ کریں۔ اسپیسنگ اور سیدھ کو ڈیزائن میں درست رکھیں، لیکن چاروں حالتوں کو شامل کریں۔"
عام غلطیاں
- صرف پوری صورتحال کے بارے میں سوچنا۔ زیادہ تر وقت حقیقی صارف لوڈنگ / ایرر اسکرین کو دیکھتا ہے۔
- کوڈ میں رنگ اور جگہ کو سرایت کرنا۔ اگر تھیم مرکزی نہیں ہے تو مستقل مزاجی ختم ہو جاتی ہے اور دیکھ بھال مشکل ہو جاتی ہے۔
- آخری تک رسائی کو چھوڑنا۔ اسے بعد میں شامل کرنا مہنگا ہے۔ اگر شروع سے درخواست کی جائے تو یہ لاگت سے پاک ہے۔
- اوور لیبلنگ۔ آرائشی عناصر کا پڑھنا بھی اسکرین ریڈر کے تجربے میں خلل ڈالتا ہے۔
- کوڈ میں متن کو سرایت کرنا۔ جب کثیر لسانی مدد کی ضرورت ہو تو، ہر اسکرین کو دستی طور پر تبدیل کرنا ضروری ہے۔ متن کو الگ رکھیں۔
- اسکرین شاٹ سے عین مطابق کاپی کی توقع ہے۔ AI ڈیزائن تقریبا پیدا کرتا ہے. پکسل کی درستگی دستی طور پر سیٹ کی گئی ہے۔
خلاصہ میں
AI انٹرفیس کی پیداوار میں طاقتور ہے، لیکن اس کے لیے رہنمائی کی ضرورت ہے۔ صحیح ترتیب: مقصد، اجزاء، چار حالتیں (لوڈنگ/خالی/غلطی/مکمل)، ڈیزائن سسٹم، رسائی، پھر کوڈ۔ ایکسیسبلٹی غیر گفت و شنید ہے اور اس کا مطلب ہے "صحیح لیبل،" نہیں "بہت زیادہ لیبلز۔" مستقل مزاجی کے لیے، مرکزی تھیم سے رنگ اور فاصلہ پڑھیں، اسے کوڈ میں شامل نہ کریں۔ مضبوط ارادہ شروع سے ہی اس سب کی وضاحت کرتا ہے۔ اس طرح، انٹرفیس حقیقی دنیا، اسٹور کی منظوری اور تمام صارفین کے لیے تیار ہے۔
درخواست کا کام
سیٹنگ اسکرین کے لیے "اسکرین جنریشن ٹیمپلیٹ" کا استعمال کرتے ہوئے، AI سے کمپوز یا SwiftUI کوڈ کے لیے پوچھیں اور چاروں ریاستوں کی درخواست کریں۔ پھر اسی کوڈ کو "ایکسیسبیلٹی چیک ٹیمپلیٹ" کے ساتھ چیک کریں۔ کم از کم ایک قابل رسائی بہتری تلاش کریں اور اسے ٹھیک کریں (گمشدہ لیبل، کم کنٹراسٹ، یا چھوٹا ٹچ ٹارگٹ) اور نوٹ کریں کہ کون سی حیثیت (لوڈنگ/خالی/خرابی) آپ کے خیال میں اکثر حقیقی استعمال میں ظاہر ہوگی۔
چیک لسٹ
- [ ] میں نے پرامپٹ میں ڈسپلے کے مقصد اور اجزاء کو واضح کر دیا ہے۔
- میرے پاس چار حالتیں (لوڈنگ/خالی/غلطی/مکمل) الگ سے تیار کی گئی تھیں
- میں نے مرکزی تھیم سے رنگ اور جگہ کو پڑھا، میں نے اسے کوڈ میں شامل نہیں کیا۔
- میں شروع سے ہی ایکسیسبیلٹی لیبلز اور کنٹراسٹ چاہتا تھا۔
- میں نے تصدیق کی کہ آرائشی عناصر اسکرین ریڈر سے پوشیدہ ہیں۔
- میں نے متن کو الگ رکھا، متعدد زبانوں کے لیے تیار