طراحی اپ بلیت رویداد: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپ بلیت رویداد به سبک جونیور با هشت دستهبندی رنگی، آدرس خیابان با فونت ۸ پیکسلی و شش اطلاعات روی هر ردیف، و همان صفحه اصلاح‌شده روی زمینه تیره. همه تغییرات کنار هم، دلیل هر کدام و فایل رایگان Figma.
یک اپ رویداد فقط یک چیز می‌فروشد: یک شب بیرون رفتن. پیش‌نویس اول زیر رویدادهای درست را دارد، ولی آن‌ها را زیر آوار دفن می‌کند. با یک راهنمای جست‌وجوی ۵۰ حرفی شروع می‌شود، هشت دستهبندی رنگی، یک آدرس خیابان با فونت ۸ پیکسلی روی عکس و شش اطلاعات روی هر ردیف. نسخه اصلاح‌شده رویدادها و عکس‌ها را نگه می‌دارد و آن‌ها را روی زمینه‌ای تیره می‌گذارد که عکس‌ها را درخشان می‌کند.
کل صفحه، قبل و بعد
پیش‌نویس جونیور
اصلاح‌شده
در سمت چپ، صفحه پنج بخش دارد و هیچ‌کدام ستاره نیست: یک هدر با دو آیکون، هشت دایره، یک کارت با چهار چیز روی عکسش، و یک فهرست. در سمت راست، هدر همان سؤال است، کارت عکس ستاره است و فهرست فقط یک فهرست است. همه‌چیز از همان حاشیه ۲۰ پیکسلی شروع می‌شود، با ۱۶ پیکسل فاصله بین بخش‌ها.
| پیش‌نویس جونیور | اصلاح‌شده | |
|---|---|---|
| هدر | شهر، یک زنگ و یک سبد | «امشب در لسآنجلس»، ۲۸ پوینت |
| راهنمای جستوجو | ۵۰ حرف | «هنرمندان، سالن‌ها، رویدادها» |
| دسته‌بندی‌ها | ۸ دایره، ۸ رنگ | ۷ پیل با یک سبک، «بیشتر» سنجاقشده |
| چیزهای روی عکس ویژه | ۴ | یک چیپ تاریخ، یک قلب و نام |
| دکمه‌های کارت ویژه | ۳، با حروف بزرگ | ۱، «دریافت بلیت» |
| اطلاعات هر ردیف پرطرفدار | ۶ | تاریخ، نام، مکان، قیمت |
| تب‌ها | ۵ | ۴ |
| اندازه متن | ۸ تا ۱۳ پیکسل | ۱۱ تا ۲۸ پوینت |
اصلاح ۱: یک هدر بزرگ دوخطی و یک فیلد جستوجو
قبل
بعد
یک برچسب کوچک شهر، یک زنگ و یک سبد، در برابر یک هدر بزرگ که میگوید این صفحه برای چیست.
نوار بالای پیش‌نویس یک نوار ابزار است: شهر با فونت کوچک و ضخیم، یک زنگ، یک سبد با نشان، و بعد یک فیلد جستوجو با راهنمای ۵۰ حرفی «جست‌وجوی رویدادها، هنرمندان، سالن‌ها، تیم‌ها و بیشتر...» و یک آیکون فیلتر. به آدم میگوید کجاست و ابزار می‌دهد دستش.
نسخه اصلاح‌شده یک جمله می‌دهد. «امشب در» سفید است و «Los Angeles» سرخابی با یک فلش کوچک، پس هنوز می‌شود شهر را عوض کرد. با ۲۸ پوینت بزرگ‌ترین متن صفحه است.
فیلد جستوجو میگوید «هنرمندان، سالن‌ها، رویدادها» و آیکون فیلترش را نگه می‌دارد. زنگ و سبد از هدر رفتند و این بازطراحی نشان نمی‌دهد کجا می‌روند.
قاعده برای استفاده دوباره: بالای صفحه اصلی باید با کلمات بگوید این صفحه برای چیست.
اصلاح ۲: هشت دایره تبدیل می‌شوند به یک ردیف پیل
قبل
بعد
دو ردیف با هشت رنگ مختلف، در برابر یک ردیف با یک سبک و پیل انتخابشده پر شده.
هشت دایره پیش‌نویس صورتی، آبی، زرد، بنفش، سبز، نارنجی، آبی روشن و رز هستند، و همان پاستل‌های حالت روشن‌اند که همان‌طور روی صفحه سیاه رها شده‌اند. دو ردیف جا می‌گیرند و از آدم میخواهند پیش از دیدن حتی یک رویداد انتخاب کند.
نسخه اصلاح‌شده یک ردیف پیل است. «کنسرت‌ها» با سرخابی برند، #D6246E، پر شده و بقیه پیل‌های تیره ساده‌اند. ردیف اسکرول می‌شود، پس «کمدی» عمداً با لبه بریده شده و به آدم میگوید سمت راست باز هم هست.
«بیشتر» ته ردیف سنجاق شده، پس فهرست کامل همیشه یک تپ فاصله دارد. فهرست دسته‌ها از هشت به هفت پیل رسید و بقیه پشت «بیشتر» هستند.
قاعده برای استفاده دوباره: فیلترها باید مثل فیلتر رفتار کنند. یک ردیف، یک حالت انتخاب، یک رنگ.
اصلاح ۳: یک کارت ویژه با یک دکمه
قبل
بعد
یک عکس با برچسب، یک عنوان بلند، جزئیات ریز و دو دکمه، در برابر یک عکس بزرگ، یک نام و یک دکمه.
پیش‌نویس چهار چیز روی عکس می‌گذارد: یک برچسب قرمز «SELLING FAST!!»، یک قلب، یک عنوان با حروف بزرگ، «NEON NIGHTS LIVE: THE WORLD TOUR 2026»، و یک خط تاریخ، ساعت، مکان و آدرس خیابان با فونت ۸ پیکسلی. زیرش یک قیمت با کارمزد و دو دکمه است، «BUY TICKETS» و «SHARE»، با حروف بزرگ. بیشتر عکس زیر متن رفته است.
نسخه اصلاح‌شده ارتفاع عکس را ۲۲۸ پیکسل می‌کند و می‌گذارد صحنه دیده شود. نام روی یک سایه سیاه نرم است که از ۰ تا ۷۸ درصد زیر عنوان می‌رود، پس متن سفید روی هر بخش عکس خوانا است. یک چیپ سفید تاریخ، «OCT 24»، جای تاریخ در خط ریز را می‌گیرد.
مکان و ساعت کوچک می‌شوند و می‌شوند «Marlow Theatre · شنبه ۸ شب». زیر عکس، «از ۴۵ دلار» و «۳۱۲ نفر می‌روند» سمت چپ‌اند و یک دکمه، «دریافت بلیت»، سمت راست. برچسب، آدرس خیابان و دکمه اشتراکگذاری رفتند.
قاعده برای استفاده دوباره: یک کارت، یک اقدام. کار کارت گرفتن یک تپ است، پس فقط یکی بدهید.
اصلاح ۴: ردیف‌های پرطرفدار با تاریخ، مکان و قیمت
قبل
بعد
شش اطلاعات در یک خط خاکستری و دو آیکون، در برابر یک تاریخ، یک نام، یک مکان و یک قیمت.
هر ردیف در پیش‌نویس نام، تاریخ، ساعت، مکان، محدودیت سنی، بازه قیمت و تعداد علاقهمندان را در یک خط با فونت ۸ پیکسلی که می‌شکند حمل می‌کند. روی هر ردیف یک قلب و یک آیکون اشتراکگذاری هم هست. با هم خوانده شوند، یک پاراگراف می‌شوند.
نسخه اصلاح‌شده برای هر اطلاعات یک جا می‌دهد. تاریخ بالا است، به رنگ برند و با حروف بزرگ: «FRI, OCT 30». نام زیرش ضخیم است، مکان زیر آن خاکستری، و قیمت سمت راست در یک چیپ گرد، «$25»، که قیمت شروع از «$25-$40» پیش‌نویس است.
عکس می‌ماند، بهصورت یک تصویر بندانگشتی مربع. محدودیت سنی، تعداد علاقهمندان، قلب و آیکون اشتراکگذاری از ردیف رفتند، و یک اپ کامل هنوز برایشان جا لازم دارد.
قاعده برای استفاده دوباره: وقتی یک ردیف اطلاعات زیاد دارد، رتبهبندیشان کنید و به چهار تای اول جای مستقل بدهید.
اصلاح‌های کوچک‌تر
- یک زمینه تیره که سیاه نیست. پیش‌نویس روی
#000000خالص نشسته و پاستل‌های حالت روشن را دارد. نسخه اصلاح‌شده از#0B0B0Fنزدیک به سیاه با سطوح تیره iOS،#1C1C1E، استفاده می‌کند تا کارت‌ها از زمینه بلند شوند. - یک رنگ تاکیدی، و یک رنگ روشنتر برای متن. سرخابی برند
#D6246Eپیل انتخابشده و دکمه‌ها را پر می‌کند. یک طیف روشنتر،#EC4F88، برای متن و آیکون سرخابی روی زمینه تیره به کار می‌رود، جایی که سرخابی پایه برای خوانایی خوب بیش از حد کم‌نور است. - یک لبه چپ. پیش‌نویس ۱۴ پیکسل چپ و ۱۲ پیکسل راست داشت. نسخه اصلاح‌شده ۲۰ پیکسل برای هر دو طرف و ۱۶ پیکسل بین بخش‌ها دارد.
اپ رویداد خودتان را ارزیابی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا هدر میگوید صفحه برای چیست؟ | یک جمله سریع‌تر از یک نوار ابزار جهت می‌دهد |
| آیا دسته‌ها یک ردیف با یک سبک‌اند؟ | هشت رنگ مثل هشت انتخاب خوانده می‌شوند |
| آیا کارت ویژه یک دکمه دارد؟ | دو دکمه تپ را تقسیم می‌کنند |
| آیا متنی روی عکس کوچک‌تر از ۱۲ پوینت هست؟ | در حال حرکت خوانده نمی‌شود |
| آیا می‌توانید چهار اطلاعات یک ردیف پرطرفدار را نام ببرید؟ | شش اطلاعات در یک خط، هیچ خوانده نمی‌شوند |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را بهصورت کامپوننت دارد، هر اصلاح را بهصورت یک جفت قبل و بعد، متغیرهای رنگ و سبک‌های متن iOS.
فایل رایگان Figma
صفحه اصلی بلیت رویداد، قبل و بعد
هر دو صفحه و هر بخش اصلاح‌شده بهصورت کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش آن را در درفت‌هایتان کپی کنید.
سؤالات متداول
صفحه اصلی یک اپ بلیت رویداد اول باید چه نشان دهد؟
یک هدر که میگوید صفحه برای چیست، مثل «امشب در لسآنجلس»، بعد یک فیلد جستوجو و یک ردیف پیل دستهبندی. رویداد ویژه بلافاصله بعد از آن میآید.
چطور یک کارت رویداد ویژه طراحی کنیم؟
یک عکس بزرگ، نام رویداد روی یک سایه نرم، تاریخ بهصورت چیپ، قیمت و یک دکمه. آدرس خیابان، برچسبها و دکمه اشتراکگذاری را برای صفحه رویداد نگه دارید.
یک اپ رویداد چند دستهبندی باید نشان دهد؟
حدود هفت پیل در یک ردیف اسکرولشونده، با پیل انتخابشده پر و «بیشتر» سنجاقشده ته ردیف. هشت دایره رنگی در دو ردیف از آدم میخواهند زیادی زود انتخاب کند.
آیا اپ رویداد باید از حالت تاریک استفاده کند؟
به رویدادها میآید، چون عکس صحنه و جمعیت روی زمینه تیره میدرخشد. از یک نزدیک به سیاه مثل #0B0B0F با سطوح روشنتر استفاده کنید، نه سیاه خالص با رنگهای حالت روشن.
چطور جزئیات رویداد را در یک فهرست نشان دهیم؟
رتبهبندیشان کنید: اول تاریخ با رنگ تاکیدی، بعد نام، مکان و قیمت. محدودیت سنی، تعداد علاقهمندان و آیکونهای اضافه را برای صفحه جزئیات بگذارید.
منابع
- هر دو صفحه از خود ما هستند، در Figma طراحی و اندازه‌گیری شده‌اند. نام رویدادها، مکان‌ها و آدرس خیابان ساختگی‌اند؛ تاریخ‌ها با تقویم ۲۰۲۶ بررسی شده‌اند.
- عکس‌ها از Pexels، از Thibault Trillet (صحنه ویژه، روی هر دو صفحه)، Sid Dalal، julio cesar resendiz resendiz، Maor Attias و Martin Lopez.
- کنتراست با فرمول کنتراست WCAG 2.2 بررسی شده: متن سفید روی
#D6246Eبرابر ۴.۸:۱ است، و#EC4F88روی زمینه تیره ۵.۷:۱ است، در حالی که#D6246E۴.۱:۱ می‌شد. - Apple Human Interface Guidelines: Typography، برای اندازه‌های متن iOS که در صفحه اصلاح‌شده به کار رفته‌اند.
- ابتدا بهصورت یک کاروسل در App Brainy منتشر شد.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
