اپلیکیشن

یک اپلیکیشن موبایل‌اول و واکنش‌گرا به زبان فارسی با نام «دنیای خوراکی‌ها» بساز که برای معرفی و دسته‌بندی مواد غذایی خارجی طراحی شده باشد. اپ باید کاملاً روی دستگاه کار کند و اطلاعات و علاقه‌مندی‌های کاربر را به‌صورت محلی ذخیره کند تا بعد از بستن و بازکردن دوباره باقی بمانند. برای شروع، از محتوای نمونه‌ی داخلی و واقعی‌نما درباره محصولات شناخته‌شده از کشورهای مختلف استفاده کن؛ هر محصول شامل نام فارسی و نام اصلی، کشور مبدأ، برند، دسته‌بندی، تصویر یا تصویرسازی مناسب، توضیح کوتاه، مواد تشکیل‌دهنده، هشدارهای غذایی احتمالی، روش مصرف و وضعیت علاقه‌مندی باشد. صفحه‌ها و قابلیت‌ها: ۱. صفحه اصلی: هدر جذاب با عنوان اپ، جست‌وجوی سریع، دسته‌بندی‌های قابل لمس مثل شکلات و شیرینی، نوشیدنی، اسنک، سس و چاشنی، صبحانه، غذای آماده و محصولات سالم؛ همچنین بخش محصولات محبوب و تازه‌اضافه‌شده. ۲. صفحه فهرست محصولات: نمایش کارت‌های محصول با تصویر، نام، کشور و دسته‌بندی؛ جست‌وجو بر اساس نام یا برند، فیلتر بر اساس دسته‌بندی و کشور، مرتب‌سازی بر اساس محبوبیت یا نام، و امکان پاک‌کردن فیلترها. ۳. صفحه جزئیات محصول: تصویر بزرگ، اطلاعات کامل، کشور مبدأ، برند، مواد تشکیل‌دهنده، آلرژن‌ها، شیوه مصرف و دکمه افزودن یا حذف از علاقه‌مندی‌ها. ۴. صفحه علاقه‌مندی‌ها: محصولات ذخیره‌شده با امکان بازکردن جزئیات و حذف از فهرست. اگر چیزی ذخیره نشده، یک حالت خالی دوستانه نمایش بده. ظاهر اپ مدرن، تمیز و اشتهابرانگیز باشد؛ از رنگ‌های گرم الهام‌گرفته از بسته‌بندی خوراکی‌ها، کارت‌های گرد، آیکون‌های واضح و تصاویر مناسب استفاده کن. رابط کاربری فارسی و راست‌به‌چپ باشد و متن‌ها ساده و خوانا باشند. داده‌های نمونه را طوری انتخاب کن که تنوع کشورها و دسته‌بندی‌ها را نشان بدهد و کاربر بتواند اپ را بدون ورود اطلاعات اولیه امتحان کند. چیدمان باید responsive و mobile-first باشد: ابتدا برای عرض کوچک طراحی شود و از عرض ۳۶۰ پیکسل تا عرض کامل دسکتاپ بدون به‌هم‌ریختگی و بدون اسکرول افقی کار کند. از عرض ثابت پیکسلی و ارتفاع ثابت برای بخش‌های متنی استفاده نشود و از flex یا grid، درصد و واحدهای نسبی استفاده شود. در عرض بزرگ، محتوا در ستون‌بندی مناسب یا با محدودکردن عرض متن نمایش داده شود، نه با کش‌آمدن یک ستون. دکمه‌ها و همه عناصر قابل لمس حداقل ۴۴×۴۴ پیکسل باشند و فاصله کافی داشته باشند. هیچ قابلیتی فقط با hover در دسترس نباشد. safe-area inset برای نوارهای بالا و پایین رعایت شود، meta viewport استاندارد وجود داشته باشد و نوار پایین روی ناچ یا محتوای صفحه نیفتد. تجربه کاربری روی گوشی اندروید و مرورگر دسکتاپ یکسان و روان باشد.