লাভ:
- উদ্দেশ্য, উপাদান, চারটি অবস্থা (লোডিং/খালি/ত্রুটি/পূর্ণ), ডিজাইন সিস্টেম এবং অ্যাক্সেসযোগ্যতার ক্রমে জেটপ্যাক কম্পোজ এবং সুইফটইউআই-এর জন্য শক্তিশালী ইন্টারফেস কোড তৈরি করার ক্ষমতা
- সঠিক লেবেলিং, পর্যাপ্ত বৈসাদৃশ্য এবং উপযুক্ত স্পর্শ সহ শুরু থেকে অ্যাক্সেসযোগ্যতা সংজ্ঞায়িত করে একটি ইন্টারফেস তৈরি করার ক্ষমতা যা সমস্ত ব্যবহারকারীর জন্য উন্মুক্ত।
- কেন্দ্রীয় থিম থেকে রঙ এবং স্থান পড়ে সামঞ্জস্যপূর্ণ, বহু-ভাষা এবং হালকা/গাঢ় থিম প্রস্তুত ইন্টারফেস তৈরি করার ক্ষমতা
একটি মোবাইল অ্যাপের সাফল্য মূলত তার ইউজার ইন্টারফেস (UI — ব্যবহারকারী যে স্ক্রিন দেখে এবং স্পর্শ করে) এবং ব্যবহারকারীর অভিজ্ঞতা (UX — এটি ব্যবহার করা কতটা মসৃণ এবং উপভোগ্য) দ্বারা নির্ধারিত হয়। ব্যবহারকারী খারাপ কোড দেখতে পায় না, কিন্তু প্রথম সেকেন্ডে খারাপ ইন্টারফেস অনুভব করে। AI ইন্টারফেস বিকাশে দুটি শক্তিশালী ভূমিকা পালন করে: একদিকে, এটি ডিজাইন ধারণা, প্রবাহ এবং পাঠ্য (UX লেখা) তৈরি করে; অন্যদিকে, এটি সরাসরি এই ডিজাইনটিকে কার্যকরী ইন্টারফেস কোডে রূপান্তর করে। এই ইউনিটে, আমরা শিখব কিভাবে AI এর সাথে দ্রুত, অ্যাক্সেসযোগ্য এবং সামঞ্জস্যপূর্ণ ইন্টারফেস তৈরি করা যায়, আধুনিক ঘোষণামূলক ইন্টারফেস টুল জেটপ্যাক কম্পোজ (Android) এবং SwiftUI (iOS) এর উপর ফোকাস করে। "ঘোষণামূলক" এর অর্থ হল যে কীভাবে পর্দা আঁকতে হয় তা ধাপে ধাপে ব্যাখ্যা করার পরিবর্তে, আপনি বর্ণনা করেন "এই পরিস্থিতিতে পর্দাটি এইভাবে দেখা উচিত"; টুল বাকি কাজ করে.
ডিজাইন থেকে কোড পর্যন্ত: সঠিক অর্ডার
AI কে "একটি সুন্দর স্ক্রিন তৈরি করতে" বলা অস্পষ্ট কারণ "সুন্দর" পরিমাপ করা যায় না। ভাল ইন্টারফেস প্রজন্ম এই আদেশ অনুসরণ করে:
- উদ্দেশ্য এবং বিষয়বস্তু। স্ক্রিন কী করে, কী তথ্য দেখায়, ব্যবহারকারী কী করবে?
- উপাদান তালিকা। অংশ যেমন শিরোনাম, তালিকা, বোতাম, ফর্ম ক্ষেত্র।
- পরিস্থিতি। লোড হচ্ছে, খালি (কোন তথ্য নেই), ত্রুটি, পূর্ণ — চারটি মৌলিক স্ক্রীন অবস্থা।
- ডিজাইন সিস্টেম। রঙ, টাইপোগ্রাফি, ব্যবধানের নিয়ম; সাধারণত ম্যাটেরিয়াল 3 (Android) বা iOS-এর হিউম্যান ইন্টারফেস নির্দেশিকা মেনে চলা।
- অ্যাক্সেসযোগ্যতা। স্ক্রীন রিডার লেবেল, পর্যাপ্ত কনট্রাস্ট, টাচ টার্গেট সাইজ।
- কোড। এই সব বলে, Composable বা SwiftUI ভিউ প্রজন্ম।
সবচেয়ে ঘন ঘন এড়িয়ে যাওয়া ধাপ হল তৃতীয়টি। বিকাশকারীরা শুধুমাত্র "পূর্ণ" অবস্থা বিবেচনা করে; যেখানে বাস্তব প্রয়োগে ব্যবহারকারী বেশিরভাগই "লোডিং" এবং "ত্রুটি" পরিস্থিতির সম্মুখীন হয়। AI তে চারটি রাজ্যই মুদ্রণ করা একটি শক্তিশালী ইন্টারফেসের গোপনীয়তা।
টিপ: প্রম্পটের শেষে "লোডিং, খালি, ত্রুটি এবং সম্পূর্ণ আলাদাভাবে তৈরি করুন" যোগ করুন। এই একক বাক্যটি আপনার ইন্টারফেসকে বাস্তব জগতের জন্য প্রস্তুত করে তোলে এবং QA (গুণমান পরীক্ষা) পর্বে ত্রুটির সংখ্যা উল্লেখযোগ্যভাবে হ্রাস করে।
অ্যাক্সেসযোগ্যতা অ-আলোচনাযোগ্য
অ্যাক্সেসযোগ্যতা - চাক্ষুষ, শ্রবণ বা মোটর অক্ষমতা সহ ব্যবহারকারীদের দ্বারা অ্যাপ্লিকেশনটি ব্যবহার করার ক্ষমতা - উভয়ই একটি নৈতিক দায়িত্ব এবং একটি স্টোর এবং আইনি প্রত্যাশা। ইচ্ছা হলে এআই অ্যাক্সেসযোগ্য কোড তৈরি করে; ইচ্ছা না হলে ট্যাগবিহীন, কম-কনট্রাস্ট ইন্টারফেস ফেরত দেয়। থাম্বের তিনটি নিয়ম: প্রতিটি ইন্টারেক্টিভ উপাদানকে স্ক্রিন রিডারের জন্য একটি অর্থপূর্ণ লেবেল দিন (বিষয়বস্তুর বিবরণ / অ্যাক্সেসিবিলিটি লেবেল), পাঠ্য এবং পটভূমির মধ্যে পর্যাপ্ত রঙের বৈসাদৃশ্য (অন্তত 4.5:1 অনুপাত), এবং কমপক্ষে 48x48 dp/44x44 pt এর স্পর্শ লক্ষ্য। AI কে এই বিষয়গুলি স্পষ্টভাবে জিজ্ঞাসা করুন।
সতর্কতা: এআই একটি আলংকারিক আইকনে একটি দীর্ঘ অ্যাক্সেসিবিলিটি ট্যাগ যোগ করতে পারে; এটি অপ্রয়োজনীয় কথাবার্তায় স্ক্রিন রিডার ব্যবহারকারীকে অভিভূত করে। সম্পূর্ণরূপে আলংকারিক উপাদানগুলি "অ্যাক্সেসিবিলিটি থেকে লুকানো" হওয়া উচিত (স্ক্রিন রিডার দ্বারা এড়ানোর অনুমতি দেওয়া হয়েছে)৷ উত্পাদিত লেবেল পর্যালোচনা করুন: অর্থপূর্ণ কথা বলতে দিন, আলংকারিক নীরব থাকতে দিন।
ধারাবাহিকতা: নকশা সিস্টেম এবং থিম
পেশাদার অ্যাপ্লিকেশন এলোমেলো রং এবং ব্যবধান ব্যবহার করে না; একটি ডিজাইন সিস্টেম অনুসরণ করে (রঙ, ফন্ট, ব্যবধান, এবং উপাদানগুলির মানক সেট)। আপনি যদি AI কে আপনার থিমের মান (প্রধান রঙ, মাধ্যমিক রঙ, কোণার ব্যাসার্ধ, টাইপোগ্রাফি স্কেল) দেন তবে সমস্ত স্ক্রিন সামঞ্জস্যপূর্ণ হবে। আপনি যদি তা না করেন, প্রতিটি স্ক্রিন নীল রঙের একটি ভিন্ন শেড ব্যবহার করবে এবং অ্যাপটি বিশৃঙ্খল দেখাবে। সবচেয়ে কার্যকরী উপায় হল প্রথমে AI কে একটি থিম/ডিজাইন টোকেন ফাইল তৈরি করতে বলা, তারপর সেই থিমের সাথে সমস্ত স্ক্রীন আবদ্ধ করা।
বিষয়
দরিদ্র পদ্ধতি
শক্তিশালী পন্থা
রঙ
প্রতিটি পর্দায় ম্যানুয়ালি রঙ কোড করুন
কেন্দ্রীয় থিম, থিম থেকে পর্দা পড়া
পরিস্থিতি
শুধুমাত্র "পূর্ণ" পর্দা
লোড হচ্ছে/খালি/ত্রুটি/পূর্ণ চারটি অবস্থা
অ্যাক্সেসযোগ্যতা
পরে যোগ করা হয়েছে
এটি শুরু থেকেই দাবিতে সংজ্ঞায়িত করা হয়েছে
পাঠ্য
কোড এম্বেড করা
পৃথক উৎস, বহু-ভাষা প্রস্তুত
তিনটি মিনি কেস
কেস 1 - খালি কেস সংরক্ষিত। একটি নিউজ অ্যাপ টিমের এআই প্রিন্টের পৃথক স্ক্রিন স্টেট ছিল। "অলস অবস্থা" স্ক্রীনের জন্য ধন্যবাদ ("এখনও কোন সংবাদ সংরক্ষিত হয়নি"), ব্যবহারকারী পরীক্ষায় অংশগ্রহণকারীদের 70% একটি ফাঁকা স্ক্রিনে অ্যাপটি ছেড়ে যায়নি; পূর্ববর্তী সংস্করণে, ফাঁকা স্ক্রীনটি সাদা ছিল এবং ব্যবহারকারীরা ভেবেছিলেন এটি "ভাঙা" এবং ছেড়ে গেছে। একটি ছোট কপি ধারণ হার বৃদ্ধি.
কেস 2 - কনট্রাস্ট প্রত্যাখ্যান। একটি দল অ্যাপ স্টোরে হালকা ধূসর, ব্র্যান্ডের রঙের পাঠ্য সহ স্ক্রিন সহ আবেদন করেছে৷ অ্যাপল কম বৈসাদৃশ্যের কারণে অ্যাক্সেসযোগ্যতার ভিত্তিতে একটি সতর্কতা জারি করেছে। যখন AI-কে বলা হয়েছিল "টেক্সট-ব্যাকগ্রাউন্ড কন্ট্রাস্ট 4.5:1 এর উপরে বাড়াতে", রংগুলি গাঢ় হয়ে গেল এবং সমস্যার সমাধান হয়ে গেল। শুরু থেকেই অনুরোধ থাকলে আর দেরি হতো না।
কেস 3 — আলংকারিক লেবেল গোলমাল। একজন দৃষ্টি প্রতিবন্ধী পরীক্ষক রিপোর্ট করেছেন যে প্রতিটি অলঙ্কার আইকন (“লাইন,” “ডট,” “শ্যাডো”) AI-উত্পাদিত স্ক্রিনে উচ্চস্বরে পড়া হয়েছে, যার ফলে স্ক্রিনটি ব্যবহারের অযোগ্য হয়ে পড়েছে। স্ক্রিন রিডার অভিজ্ঞতা তরল হয়ে ওঠে যখন আলংকারিক উপাদানগুলি অ্যাক্সেসযোগ্যতা থেকে লুকিয়ে রাখা হয়। পাঠ: অ্যাক্সেসযোগ্যতা মানে "সঠিক ট্যাগ", "অনেক ট্যাগ" নয়।
দুর্বল প্রম্পট / শক্তিশালী প্রম্পট
দুর্বল প্রম্পট: "একটি প্রোফাইল স্ক্রিন ডিজাইন করুন।"
শক্তিশালী প্রম্পট: "iOS/SwiftUI-এর জন্য ব্যবহারকারীর প্রোফাইল স্ক্রিন তৈরি করুন। বিষয়বস্তু: অবতার, নাম, ইমেল, 'প্রোফাইল সম্পাদনা করুন' বোতাম, সেটিংস তালিকা। স্ট্যাটাস: লোডিং (কঙ্কাল), ত্রুটি (পুনরায় চেষ্টা করার বোতাম), সম্পূর্ণ। ডিজাইন: নন-মেটেরিয়াল, iOS HIG-এর সাথে সামঞ্জস্যপূর্ণ; সিস্টেমের রঙ, গতিশীল প্রকার। প্রতিটি অ্যাক্সেসযোগ্যতা, অ্যাকসেসিবিলিটি গোপনীয়তা টাচ টার্গেট মিন 44pt একটি আলাদা ফাইল থেকে থিম মান পড়ুন, প্রথমে কম্পোনেন্ট ট্রি আঁকুন, তারপর কোড এক্সপোর্ট করুন৷
অনুলিপিযোগ্য টেমপ্লেট
স্ক্রীন জেনারেশন টেমপ্লেট: "[প্ল্যাটফর্ম/টুল]-এর জন্য [স্ক্রিন নাম] তৈরি করুন। বিষয়বস্তু: [উপাদান]। ব্যবহারকারীর ক্রিয়াকলাপ: [ক্রিয়া]। পৃথকভাবে চারটি অবস্থা তৈরি করুন: লোডিং, খালি, ত্রুটি, সম্পূর্ণ। ডিজাইন সিস্টেম: [ম্যাটেরিয়াল 3 / iOS HIG], থিম টোকেনগুলি থেকে পড়ুন। অ্যাক্সেসিবিলিটি, টার্গেটল্যাব = 5> টাচ।
থিম/ডিজাইন সিস্টেম টেমপ্লেট:"আমার অ্যাপের জন্য একটি কেন্দ্রীয় থিমের সংজ্ঞা তৈরি করুন ([SwiftUI-তে থিম/একটি ডিজাইন টোকেন স্ট্রাকচার রচনা করুন]):- প্রাথমিক রঙ [হেক্স], সেকেন্ডারি [হেক্স], ত্রুটির রঙ, পৃষ্ঠের রঙ- টাইপোগ্রাফি স্কেল (শিরোনাম, বডি, বিবরণ)- স্পেসিং স্কেল (4,8,16,24)-এ কোণার আলোকে সমর্থন করে।
অ্যাক্সেসিবিলিটি অডিট টেমপ্লেট:"অভিগম্যতার জন্য এই স্ক্রিন কোডটি পরীক্ষা করুন: 1) কোন ট্যাগবিহীন ইন্টারেক্টিভ উপাদান আছে কি? 2) বৈসাদৃশ্য অনুপাত কি পর্যাপ্ত? 3) স্পর্শ লক্ষ্যগুলি কি যথেষ্ট বড়? 4) আলংকারিক উপাদানগুলি কি স্ক্রিন রিডার থেকে লুকানো আছে? প্রতিটি সমস্যার সমাধানের পরামর্শ দিন। [কোড]"
কোড টেমপ্লেটের জন্য ডিজাইন: "আমি নিম্নলিখিত ডিজাইনের বর্ণনা দিচ্ছি: [স্ক্রীনের বিবরণ বা স্ক্রিনশট]। এটিকে [কম্পোজ/সুইফটইউআই] কোডে অনুবাদ করুন। ডিজাইনে ব্যবধান এবং সারিবদ্ধকরণ সত্য রাখুন, তবে চারটি অবস্থা যোগ করুন।"
সাধারণ ভুল
- শুধু সম্পূর্ণ পরিস্থিতি সম্পর্কে চিন্তা. বেশিরভাগ সময় প্রকৃত ব্যবহারকারী লোডিং/ত্রুটি স্ক্রীন দেখেন।
- কোড এম্বেডিং রঙ এবং স্থান. থিম কেন্দ্রীয় না হলে, সামঞ্জস্য হারিয়ে যায় এবং রক্ষণাবেক্ষণ কঠিন হয়ে পড়ে।
- শেষের জন্য অ্যাক্সেসযোগ্যতা ছেড়ে যাচ্ছে। পরে যোগ করা ব্যয়বহুল; শুরু থেকে অনুরোধ করা হলে এটি খরচ-মুক্ত।
- ওভারলেবেলিং। আলংকারিক উপাদান পড়ার কারণেও স্ক্রিন রিডারের অভিজ্ঞতা ব্যাহত হয়।
- কোড এম্বেড করা পাঠ্য. যখন বহুভাষিক সমর্থনের প্রয়োজন হয়, তখন প্রতিটি পর্দা ম্যানুয়ালি পরিবর্তন করা প্রয়োজন; লেখাগুলো আলাদা রাখুন।
- স্ক্রিনশট থেকে একটি সঠিক কপি আশা করছি। এআই ডিজাইন প্রায় উত্পাদন করে। পিক্সেল নির্ভুলতা ম্যানুয়ালি সেট করা হয়।
সংক্ষেপে
AI ইন্টারফেস উত্পাদনে শক্তিশালী, তবে এর জন্য নির্দেশিকা প্রয়োজন। সঠিক ক্রম: উদ্দেশ্য, উপাদান, চারটি অবস্থা (লোডিং/খালি/ত্রুটি/পূর্ণ), ডিজাইন সিস্টেম, অ্যাক্সেসযোগ্যতা, তারপর কোড। অ্যাক্সেসযোগ্যতা অ-আলোচনাযোগ্য এবং এর অর্থ হল "সঠিক লেবেল", "অনেক লেবেল" নয়। সামঞ্জস্যের জন্য, কেন্দ্রীয় থিম থেকে রঙ এবং ব্যবধান পড়ুন, এটি কোডে এম্বেড করবেন না। দৃঢ় ইচ্ছা প্রথম থেকেই এই সব সংজ্ঞায়িত করে; সুতরাং, ইন্টারফেস বাস্তব বিশ্বের জন্য প্রস্তুত, দোকান অনুমোদন এবং সমস্ত ব্যবহারকারী.
আবেদন টাস্ক
একটি সেটিংস স্ক্রিনের জন্য "স্ক্রিন জেনারেশন টেমপ্লেট" ব্যবহার করে, কম্পোজ বা SwiftUI কোডের জন্য AI-কে জিজ্ঞাসা করুন এবং চারটি রাজ্যের জন্য অনুরোধ করুন। তারপর "অ্যাক্সেসিবিলিটি চেক টেমপ্লেট" দিয়ে একই কোড চেক করুন। অন্তত একটি অ্যাক্সেসিবিলিটি উন্নতি (অনুপস্থিত লেবেল, কম বৈসাদৃশ্য, বা ছোট টাচ টার্গেট) খুঁজুন এবং ঠিক করুন এবং কোন স্থিতি (লোডিং/খালি/ত্রুটি) আপনি মনে করেন বাস্তব ব্যবহারে প্রায়শই প্রদর্শিত হবে তা নোট করুন।
চেকলিস্ট
- [ ] আমি প্রম্পটে প্রদর্শনের উদ্দেশ্য এবং উপাদানগুলি পরিষ্কার করেছি৷
- [ ] আমি চারটি অবস্থা (লোডিং/খালি/ত্রুটি/পূর্ণ) আলাদাভাবে তৈরি করেছি
- [ ] আমি কেন্দ্রীয় থিম থেকে পড়া রঙ এবং স্থান তৈরি করেছি, আমি এটি কোডে এম্বেড করিনি।
- আমি শুরু থেকেই অ্যাক্সেসিবিলিটি লেবেল এবং বৈসাদৃশ্য চেয়েছিলাম
- [ ] আমি যাচাই করেছি যে আলংকারিক উপাদানগুলি স্ক্রিন রিডার থেকে লুকানো আছে৷
- [ ] আমি পাঠ্যগুলিকে আলাদা রেখেছি, একাধিক ভাষার জন্য প্রস্তুত