طراحی رابط و تولید کد رابط کاربری با هوش مصنوعی

سود:

• امکان تولید کد رابط قوی برای Jetpack Compose و SwiftUI به ترتیب هدف، جزء، چهار حالت (بارگیری/خالی/خطا/پر)، سیستم طراحی و دسترسی
• امکان تولید رابطی که با تعریف دسترسی از ابتدا، با برچسب گذاری صحیح، کنتراست کافی و لمس مناسب برای همه کاربران باز باشد.
• امکان ایجاد رابط های سازگار، چند زبانه و آماده تم روشن/تاریک با خواندن رنگ و فاصله از تم مرکزی

موفقیت یک برنامه تلفن همراه تا حد زیادی با رابط کاربری آن (UI - صفحه‌هایی که کاربر می‌بیند و لمس می‌کند) و تجربه کاربر (UX - چقدر نرم و لذت‌بخش است) تعیین می‌شود. کاربر کد بد را نمی بیند، اما رابط کاربری بد را در ثانیه اول احساس می کند. هوش مصنوعی دو نقش قدرتمند در توسعه رابط ایفا می کند: از یک طرف، ایده طراحی، جریان و متن (نوشتن UX) را تولید می کند. از طرفی مستقیماً این طرح را به کد رابط کاری تبدیل می کند. در این بخش، نحوه تولید رابط‌های سریع، در دسترس و سازگار با هوش مصنوعی را با تمرکز بر ابزارهای رابط مدرن Jetpack Compose (اندروید) و SwiftUI (iOS) یاد خواهیم گرفت. "اعلامی" به این معنی است که به جای توضیح گام به گام نحوه ترسیم صفحه، توضیح می دهید که "صفحه نمایش در این شرایط باید اینگونه باشد". ابزار بقیه کارها را انجام می دهد.

از طراحی تا کد: ترتیب درست

گفتن به هوش مصنوعی که "صفحه نمایش زیبا بسازید" مبهم است زیرا "زیبا" قابل اندازه گیری نیست. نسل رابط خوب از این ترتیب پیروی می کند:

1. هدف و محتوا. صفحه نمایش چه کاری انجام می دهد، چه اطلاعاتی را نشان می دهد، کاربر چه خواهد کرد؟
2. لیست اجزاء بخش هایی مانند عنوان، فهرست، دکمه، فیلد فرم.
3. موقعیت ها بارگیری، خالی (بدون داده)، خطا، پر - چهار حالت اصلی صفحه.
4. سیستم طراحی. رنگ، تایپوگرافی، قوانین فاصله. به طور کلی با دستورالعمل های رابط انسانی مواد 3 (اندروید) یا iOS مطابقت دارد.
5. قابلیت دسترسی برچسب های صفحه خوان، کنتراست کافی، اندازه هدف لمسی.
6. کد. با گفتن همه اینها، نسل Composable یا SwiftUI View.

مرحله سوم که اغلب از آنها صرفنظر می شود. توسعه دهندگان فقط حالت "کامل" را در نظر می گیرند. در حالی که در برنامه واقعی کاربر بیشتر با موقعیت های "بارگیری" و "خطا" مواجه می شود. چاپ هر چهار حالت در هوش مصنوعی راز یک رابط قوی است.

نکته: «تولید بارگیری، خالی، خطا، و پر به طور جداگانه» را در انتهای فرمان اضافه کنید. این جمله تنها رابط شما را برای دنیای واقعی آماده می کند و تعداد خطاها را در مرحله QA (تست کیفیت) به میزان قابل توجهی کاهش می دهد.

دسترسی غیر قابل مذاکره است

دسترسی - توانایی استفاده از برنامه توسط کاربران با ناتوانی بینایی، شنوایی یا حرکتی - هم یک مسئولیت اخلاقی و هم یک فروشگاه و انتظار قانونی است. در صورت تمایل، هوش مصنوعی کد قابل دسترسی تولید می کند. در صورت عدم تمایل، یک رابط بدون برچسب و با کنتراست پایین را برمی گرداند. سه قانون سرانگشتی: به هر عنصر تعاملی یک برچسب معنادار برای صفحه خوان (contentDescription / AccessibilityLabel)، تضاد رنگ کافی بین متن و پس زمینه (حداقل نسبت 4.5:1) و هدف لمسی حداقل 48x48 dp/44x44 pt بدهید. این موارد را به صراحت از هوش مصنوعی بپرسید.

احتیاط: هوش مصنوعی همچنین می‌تواند یک برچسب دسترسی طولانی را به یک نماد تزئینی اضافه کند. این کار کاربر صفحه خوان را با پچ پچ های غیر ضروری غرق می کند. عناصر صرفاً تزئینی باید "از دسترس پذیری پنهان شوند" (مجاز است توسط صفحه خوان نادیده گرفته شود). برچسب های تولید شده را مرور کنید: بگذارید معنی دار صحبت کند، بگذارید تزئینی سکوت کند.

سازگاری: سیستم طراحی و موضوع

برنامه های حرفه ای از رنگ های تصادفی و فاصله استفاده نمی کنند. از یک سیستم طراحی پیروی می کند (مجموعه استاندارد رنگ ها، فونت ها، فاصله ها و اجزا). اگر به هوش مصنوعی مقادیر تم خود را بدهید (رنگ اصلی، رنگ ثانویه، شعاع گوشه، مقیاس تایپوگرافی)، همه صفحه‌ها ثابت خواهند شد. اگر این کار را نکنید، هر صفحه از رنگ آبی متفاوت استفاده می کند و برنامه به هم ریخته به نظر می رسد. کارآمدترین راه این است که ابتدا از هوش مصنوعی بخواهید که یک فایل تم/طراحی را ایجاد کند، سپس تمام صفحه‌ها را به آن تم متصل کنید.

موضوع

رویکرد ضعیف

رویکرد قوی

رنگ

کد رنگی دستی هر صفحه

تم مرکزی، صفحه نمایش از روی موضوع خوانده می شود

موقعیت ها

فقط "تمام" صفحه

در حال بارگذاری/خالی/خطا/چهار حالت کامل

دسترسی

بعدا اضافه شد

از ابتدا در ادعا تعریف شده است

متن

در کد تعبیه شده است

منبع جداگانه، چند زبانه آماده

سه کیف کوچک

مورد 1 - مورد خالی ذخیره شده است. یک تیم برنامه خبری حالت های تک تک صفحه نمایش چاپ هوش مصنوعی را داشت. به لطف صفحه "وضعیت غیرفعال" ("هنوز خبری ذخیره نشده")، 70٪ از شرکت کنندگان در آزمایش کاربر برنامه را روی صفحه خالی رها نکردند. در نسخه قبلی، صفحه خالی سفید باقی می ماند و کاربران فکر می کردند "شکسته" است و می رفتند. یک کپی کوچک باعث افزایش میزان ماندگاری می شود.

مورد 2 - رد کنتراست. یک تیم با صفحه نمایش هایی با متن خاکستری روشن، رنگ نام تجاری، به اپ استور مراجعه کردند. اپل به دلیل قابلیت دسترسی به دلیل کنتراست پایین هشدار داد. وقتی به هوش مصنوعی گفته شد که کنتراست متن و پس‌زمینه را بالای 4.5:1 افزایش دهد، رنگ‌ها تیره‌تر شدند و مشکل حل شد. اگر از ابتدا درخواست می شد تاخیر نداشت.

مورد 3 - سر و صدای برچسب تزئینی. یک آزمایش‌کننده کم بینا گزارش داد که هر نماد تزئینی ("خط"، "نقطه"، "سایه") با صدای بلند بر روی صفحه نمایش تولید شده توسط هوش مصنوعی خوانده می‌شود و صفحه نمایش را غیرقابل استفاده می‌کند. وقتی عناصر تزئینی از دسترس پذیری پنهان شدند، تجربه صفحه خوان سیال شد. درس: دسترسی به معنای «برچسب‌های مناسب» است، نه «تگ‌های زیاد».

اعلان ضعیف / اعلان قوی

اعلان ضعیف: "یک صفحه نمایه طراحی کنید."

پیام قدرتمند: "صفحه نمایه کاربر برای iOS/SwiftUI ایجاد کنید. محتوا: آواتار، نام، ایمیل، دکمه "ویرایش نمایه"، لیست تنظیمات. وضعیت ها: بارگیری (اسکلت)، خطا (دکمه امتحان مجدد)، کامل. طراحی: غیر مادی، مطابق با iOS HIG؛ رنگ های سیستم، نوع پویا. قابلیت دسترسی: قابلیت دسترسی: نماد لمسی حداقل 4 نماد، برچسب پنهان برای هر عنصر. مقادیر تم را از یک فایل جداگانه بخوانید، ابتدا کد رنگی را روی صفحه قرار ندهید، سپس کد را صادر کنید.

قالب های قابل کپی

الگوی تولید صفحه: "[صفحه نمایش] برای [پلتفرم/ابزار] تولید کنید. محتوا: [عناصر]. اقدامات کاربر: [عملکرد]. چهار حالت را به‌طور جداگانه ایجاد کنید: بارگیری، خالی، خطا، پر. سیستم طراحی: [Material 3 / iOS HIG]، خواندن از نشانه‌های تم. دسترسی: برچسب‌ها، کنتراست، 1 استاندارد، کنتراست 4.

الگوی سیستم طرح زمینه/طراحی: "تعریف تم مرکزی برای برنامه من ([نوشتن طرح زمینه / ساختار نشانه طراحی در SwiftUI]): - رنگ اصلی [هگز]، ثانویه [هگز]، رنگ خطا، رنگ سطح - مقیاس تایپوگرافی (عنوان، بدنه، توضیحات) - مقیاس فاصله (4،8،16،24 نور استاندارد و استاندارد تاریک)."

الگوی بررسی دسترس‌پذیری:"این کد صفحه نمایش را برای دسترسی بررسی کنید:1) آیا عناصر تعاملی بدون برچسب وجود دارد؟ 2) آیا نسبت کنتراست کافی است؟ 3) آیا اهداف لمسی به اندازه کافی بزرگ هستند؟

الگوی طراحی به کد: "من طرح زیر را توصیف می‌کنم: [توضیحات صفحه نمایش یا اسکرین‌شات]. این را به کد [نوشتن/SwiftUI] ترجمه کنید. فاصله و تراز را با طرح درست نگه دارید، اما هر چهار حالت را اضافه کنید."

اشتباهات رایج

• فقط به وضعیت کامل فکر می کنم. بیشتر اوقات کاربر واقعی صفحه بارگیری/خطا را می بیند.
• جاسازی رنگ و فاصله در کد. اگر موضوع محوری نباشد، ثبات از بین می رود و نگهداری مشکل می شود.
• دستیابی برای آخر باقی بماند. افزودن آن بعداً گران است. در صورت درخواست از ابتدا بدون هزینه است.
• برچسب زدن. خواندن عناصر تزئینی نیز تجربه صفحه خوان را مختل می کند.
• جاسازی متن در کد هنگامی که پشتیبانی چند زبانه مورد نیاز است، لازم است هر صفحه را به صورت دستی تغییر دهید. متون را جدا نگه دارید
• انتظار یک کپی دقیق از اسکرین شات. طراحی هوش مصنوعی تقریباً دقت پیکسل به صورت دستی تنظیم می شود.

به طور خلاصه

هوش مصنوعی در تولید رابط قدرتمند است، اما به راهنمایی نیاز دارد. ترتیب صحیح: هدف، اجزاء، چهار حالت (بارگیری/خالی/خطا/پر)، سیستم طراحی، قابلیت دسترسی و سپس کد. دسترسی غیرقابل مذاکره است و به معنای "برچسب مناسب" است، نه "برچسب های زیاد". برای هماهنگی، رنگ و فاصله را از موضوع مرکزی بخوانید، آن را در کد قرار ندهید. اراده قوی همه اینها را از ابتدا مشخص می کند. بنابراین، رابط برای دنیای واقعی، تایید فروشگاه و همه کاربران آماده است.

وظیفه کاربردی

با استفاده از «الگوی تولید صفحه» برای صفحه تنظیمات، از هوش مصنوعی کد Compose یا SwiftUI را بخواهید و هر چهار حالت را درخواست کنید. سپس همان کد را با «الگوی بررسی دسترس‌پذیری» بررسی کنید. حداقل یک بهبود دسترس‌پذیری (برچسب از دست رفته، کنتراست کم، یا هدف لمسی کوچک) را پیدا کرده و اصلاح کنید و توجه داشته باشید که کدام وضعیت (بارگیری/خالی/خطا) بیشتر در استفاده واقعی ظاهر می‌شود.

چک لیست

• [ ] من هدف و اجزای نمایشگر را در اعلان روشن کردم
• [ ] من چهار حالت (بارگیری/خالی/خطا/پر) را جداگانه تولید کردم
• [ ] من رنگ و فاصله را از موضوع مرکزی خوانده ام، آن را در کد جاسازی نکردم.
• [ ] من از ابتدا برچسب های دسترسی و کنتراست را می خواستم
• [ ] من تأیید کردم که عناصر تزئینی از صفحه‌خوان پنهان هستند
• [ ] من متون را جدا نگه داشتم، آماده برای چندین زبان