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

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

کل صفحه، قبل و بعد

پیش‌نویس تازه‌کار

اصلاح‌شده

سمت چپ، اولین چیز در هیرو عنوانی با حروف بزرگ است و خطی که آن‌قدر ریز است که خوانده نمی‌شود. سمت راست، هیرو یک نام دارد، یک خط و یک دکمه.

اصلاح ۱: هدری که دو کار انجام می‌دهد

قبل

بعد

چهار آیکون کوچک، در برابر دو دکمه گرد.

هدر پیش‌نویس جست‌وجو، کست، زنگ با نقطه قرمز و آواتار بیننده را در خود دارد، هرکدام حدود ۲۰ پیکسل عرض. ردیف شلوغ است و آواتار تکرار تب Profile پایین صفحه است.

نسخه اصلاح‌شده جست‌وجو و اعلان‌ها را نگه می‌دارد، به‌شکل دو دکمه گرد ۴۰ پیکسلی، و آیکون کست و آواتار را حذف می‌کند. نقطه زنگ فیروزه‌ای است. پروفایل پیش‌تر تب خودش را دارد، پس هدر لازم نیست آن را تکرار کند.

قاعده‌ای برای استفاده دوباره: هر کنترل باید در یک جا زندگی کند. اگر نوار تب Profile دارد، هدر به عکس پروفایل نیازی ندارد.

اصلاح ۲: فقط یک دکمه Play

قبل

بعد

یک عنوان، یک خط ریز واقعیت‌ها و سه دکمه، در برابر یک عنوان، یک خط و یک دکمه.

هیرو باارزش‌ترین فضای صفحه است و پیش‌نویس آن را پر کرده است. عنوان با حروف بزرگ در پایینِ میانه پوستر نشسته، زیر نشان قرمز «NEW EPISODES». زیر آن یک خط ۹ پیکسلی شش واقعیت را در خود دارد: «2025 • TV-MA • 2 Seasons • Sci-Fi, Action, Drama • ★ 8.3». بعد سه دکمه PLAY و MY LIST و INFO می‌آیند، همه با حروف بزرگ و تقریباً هم‌وزن، پس بیننده پیش از زدن باید انتخاب کند.

نسخه اصلاح‌شده عنوان را به پایین چپ تصویر می‌برد، با محوشدگی تیره زیرش تا خوانا بماند، و یک خط کوتاه زیر عنوان می‌گذارد: «Sci-fi · Season 2 · 2025». نشان به رنگ فیروزه‌ای برند «New season» می‌گوید.

زیر تصویر، یک دکمه پهن سفید «Play» بیشتر عرض را می‌گیرد و یک «+» گرد کنارش برای لیست می‌نشیند. INFO در صفحه نیست.

قاعده‌ای برای استفاده دوباره: هیرو یک اقدام لازم دارد. بزرگ‌ترین دکمه صفحه را به آن بدهید و بقیه چیزها را کوچک‌تر کنید.

اصلاح ۳: کارت‌های پهن که می‌گویند چقدر مانده

قبل

بعد

سه پوستر بلند با نوار قرمز باریک، در برابر دو کارت پهن با زمان باقی‌مانده.

ردیف «Continue Watching for Alex» در پیش‌نویس سه پوستر بلند نشان می‌دهد. زیر هرکدام یک نوار پیشرفت قرمز ۳ پیکسلی و برچسبی مثل «S2:E5» با متن ۱۰ پیکسلی است. پوستر می‌گوید سریال چیست. نمی‌گوید بیننده کجا ایستاده، و نوار قرمز رنگ دوم در اپی فیروزه‌ای است.

نسخه اصلاح‌شده از دو کارت پهن استفاده می‌کند، با نوار پیشرفت فیروزه‌ای داخل تصویر و یک عنوان زیر هرکدام. خط زیر عنوان می‌گوید «S2 E5 · 12 min left»، که به پرسشی جواب می‌دهد که آدم هنگام برداشتن دوباره سریال می‌پرسد: وقت این را دارم؟

قاعده‌ای برای استفاده دوباره: ردیف ادامه برای جای بیننده است. زمان باقی‌مانده را نشان بدهید، نه فقط کد قسمت را.

اصلاح ۴: رتبه‌هایی که می‌شود خواند

قبل

بعد

چهار پوستر با یک نشان یکسان، در برابر چهار پوستر با رتبه‌هایشان.

ردیف «TRENDING NOW» در پیش‌نویس چهار پوستر دارد و هرکدام همان نشان قرمز «TOP 10» را به تن دارد. نشان می‌گوید همه‌شان در ده تای برترند و نمی‌گوید کدام رتبه. بیننده نمی‌تواند اولی را از چهارمی تشخیص دهد.

نسخه اصلاح‌شده ردیف را «Top 10 today» نام می‌گذارد و کنار هر پوستر یک عدد بزرگ توخالی می‌گذارد: ۱، ۲، ۳، ۴. حالا ردیف ترتیبی برای خواندن از چپ به راست دارد. لینک «See all» از فیروزه‌ای برند استفاده می‌کند، همان رنگ نوارهای پیشرفت.

قاعده‌ای برای استفاده دوباره: رتبه‌بندی باید رتبه را نشان بدهد. نشانی که روی همه آیتم‌ها یکی است تزئین است.

اصلاح‌های کوچک‌تر

• یک رنگ برند. نسخه اصلاح‌شده فیروزه‌ای #22D3EE را برای لوگوتایپ، پیشرفت و لینک‌ها به کار می‌برد. نشان‌ها و نوارهای پیشرفت قرمز رفته‌اند.
• زمینه‌ای که با هیرو جور است. نسخه اصلاح‌شده از کهربایی هیرو، #3A2510، به #0E0E12 محو می‌شود، پس اولین صفحه مثل یک تصویر حس می‌شود. پیش‌نویس روی مشکی خالص #000000 نشسته است.
• یک لبه چپ. حاشیه‌های پیش‌نویس ۱۴ پیکسل چپ و ۱۲ پیکسل راست بود. نسخه اصلاح‌شده ۲۰ پیکسل در هر دو سو و ۱۶ پیکسل میان بخش‌ها دارد.
• یک مقیاس تایپ واقعی. متن از ۷ تا ۳۰ پیکسل به اندازه‌های iOS یعنی ۱۱ تا ۲۸ پوینت رسید.
• چهار تب، نه پنج. Home، Search، Coming Soon، Downloads و More شد Home، Search، Downloads و Profile.

صفحه استریمینگ خودتان را بازبینی کنید

سوالات متداول

صفحه خانه یک اپ استریمینگ باید اول چه چیزی نشان بدهد؟

یک هیرو با عنوان سریال، یک خط کوتاه از واقعیت‌ها و یک دکمه بزرگ Play. جای خود بیننده، یعنی ردیف ادامه تماشا، درست بعد از آن می‌آید.

یک بنر هیرو باید چند دکمه داشته باشد؟

یک دکمه اصلی، و حداکثر یک دکمه فرعی کوچک مثل به‌علاوه برای لیست. سه دکمه هم‌وزن بیننده را پیش از زدن پلی مجبور به انتخاب می‌کند.

ردیف ادامه تماشا را چطور طراحی کنیم؟

از کارت‌های پهن با نوار پیشرفت، عنوان و زمان باقی‌مانده مثل «12 min left» استفاده کنید. پوستر بلند نشان می‌دهد سریال چیست، و کارت پهن نشان می‌دهد بیننده کجا ایستاده.

ردیف Top 10 را چطور طراحی کنیم؟

کنار هر پوستر یک شماره رتبه بزرگ بگذارید تا ردیف ترتیب داشته باشد. نشانی که روی همه پوسترها «Top 10» می‌گوید نمی‌گوید سریال کدام رتبه را دارد.

چه رنگ‌هایی برای یک اپ استریمینگ تیره کار می‌کنند؟

یک رنگ تأکیدی برای پیشرفت و لینک‌ها، روی زمینه تیره. صفحه اصلاح‌شده فیروزه‌ای #22D3EE را روی زمینه‌ای به کار می‌برد که از کهربایی هیرو به #0E0E12 محو می‌شود.

یک اپ استریمینگ باید از چه اندازه فونتی استفاده کند؟

مقیاس متن خود پلتفرم. صفحه اصلاح‌شده از اندازه‌های iOS از ۱۱ تا ۲۸ پوینت استفاده می‌کند، پس هیچ چیز در هیرو زیر ۱۱ نیست.

منابع

• هر دو صفحه از خودمان هستند، در Figma طراحی و اندازه‌گیری شده‌اند. بیننده، سریال‌ها و اپ Streamix ساختگی هستند و هر پوستر یک رنگ تخت با عنوانی است که با تایپ نوشته شده.
• عکس آواتار از Pexels، اثر Amir SeilSepour.
• Apple Human Interface Guidelines: Typography، برای اندازه‌های متن iOS که در صفحه اصلاح‌شده به کار رفته.
• Apple Human Interface Guidelines: Dark Mode، برای طراحی رابطی که روی زمینه تیره کار می‌کند.
• نخستین‌بار به‌شکل کاروسل در App Brainy منتشر شد.