طراحی اپ پادکست: بازطراحی صفحه خانه، قبل و بعد
صفحه خانه یک اپ پادکست جونیورانه با یک خط نازک پیشرفت، سه آیکون روی هر ردیف چارت و شش رنگ ژانر، و همان صفحه بعد از اصلاح. هر تغییر کنار هم، دلیل پشت هرکدام، و فایل رایگان Figma.
رایج‌ترین کاری که آدم‌ها در یک اپ پادکست می‌کنند این است که از همان جایی که رها کرده بودند ادامه بدهند. پیش‌نویس اول زیر هر چیزی را که شنونده لازم دارد دارد، جز همین یک چیز را که قایم کرده: اپیزودی که شنونده نیمهاش بوده در یک کارت کوچک با یک خط نازک پیشرفت، میان سه کاور گم شده است. اصلاح، نمایش‌ها، چارت و ژانرها را نگه می‌دارد و اپیزود متوقفشده را به بزرگ‌ترین چیز صفحه تبدیل میکند.
کل صفحه، قبل و بعد
پیش‌نویس جونیور
اصلاحشده
سمت چپ، اپیزود شنونده یکی از سه کاور هماندازه است با ۲ px پیشرفت زیرش، و هر ردیف چارت با سه آیکون تمام میشود. سمت راست، اپیزود متوقفشده کارت خودش را دارد با نوار پیشرفت ۶ px و سه کنترل بزرگ، و ردیف‌های فهرست با یک دکمه تمام می‌شوند.
| پیش‌نویس جونیور | اصلاحشده | |
|---|---|---|
| اپیزود متوقفشده | یکی از ۳ کاور، خط پیشرفت ۲ px | یک کارت، نوار پیشرفت ۶ px، ۳ کنترل |
| آیکون‌های هر ردیف فهرست | ۳ | ۱ |
| رنگ‌های ژانر | ۶ | ۱ |
| کنترلهای مینی‌پلیر | قبلی، توقف، بعدی | ۳۰ ثانیه عقب، توقف، ۳۰ ثانیه جلو |
| تب‌ها | ۵ | ۴ |
| حاشیه کناری | ۱۴ px چپ، ۱۲ px راست | ۲۰ px از هر دو طرف |
| اندازه متن‌ها | ۸ تا ۲۰ px | ۱۱ تا ۲۸ pt |
اصلاح ۱: یک کارت بزرگ برای اپیزودی که رها کرده‌اید
قبل
بعد
سه کاور با یک خط نازک پیشرفت، در برابر یک کارت با زمان باقیمانده و کنترل‌ها.
«ادامه شنیدن» در پیش‌نویس یک قفسه است. سه کاور هماندازه کنار هم نشسته‌اند، هرکدام با خط پیشرفت ۲ px، عنوانی که روی «Ep. 142: Why Great Apps Feel Calm (And...» بریده شده و «۲۳ دقیقه مانده» با حروف ریز خاکستری. برای ادامه دادن همان اپیزود مهم، شنونده باید یک اپیزود را باز کند، منتظر پلیر بماند و پخش را بزند.
اصلاح، به اپیزود متوقفشده یک کارت می‌دهد. کاور، یک برچسب بنفش، «ادامه شنیدن · ۲۳ دقیقه مانده»، عنوان کامل «چرا اپ‌های عالی آرام حس می‌شوند» و نام نمایش، «Studio Hour · اپیزود ۱۴۲»، بالا قرار دارند. پایین‌تر، یک نوار پیشرفت ۶ px کنار سه کنترل نشسته: ۳۰ ثانیه عقب، پخش و ۳۰ ثانیه جلو. دو کاور دیگر از این بخش بیرون رفته‌اند.
دکمه‌های ۳۰ ثانیه عقب و جلو یک فلش دایره‌ای با عدد ۳۰ داخلش هستند، در هدف لمسی ۴۴ px، همان الگویی که Audible استفاده میکند. شنونده‌ای که وسط کار قطع شده می‌تواند بدون ترک صفحه خانه نیم دقیقه به عقب برگردد.
قانون قابل‌استفاده دوباره: کاری که آدم در حال انجامش بود محتمل‌ترین اقدام بعدی است، پس به آن یک کارت و کنترل‌هایش را بدهید.
اصلاح ۲: عنوان‌های دو خطی و یک دکمه پخش
قبل
بعد
عنوان‌های بریده، شماره رتبه و سه آیکون، در برابر عنوان‌های کامل و یک دکمه پخش.
هر ردیف چارت در پیش‌نویس با یک فلش دانلود، منوی سه‌نقطه و مثلث پخش تمام میشود، پس عنوان باید در فضای باقیمانده جا شود و نمی‌شود: «The Week in Tech, in 20 Minutes: Al...»، «How to Learn Anything in 30 Days...»، «Live from Brooklyn Part 2 (Uncut Ex...». رتبه یک عدد بزرگ بنفش است و زیر هر عنوان یک خط نمایش، دسته و مدت را نگه می‌دارد.
اصلاح اجازه می‌دهد عنوان در دو خط بشکند: «هفته در دنیای تک، در ۲۰ دقیقه». زیرش یک خط می‌آید، روز و مدت، «امروز · ۲۱ دقیقه». سمت راست یک دکمه پخش گرد قرار دارد، تنها اقدامی که یک ردیف لازم دارد، و هدف لمسی‌اش به اندازه کافی بزرگ است. دانلود و منو روی ردیف نیستند و این بازطراحی نمی‌کشد که کجا بروند.
این بازطراحی علاوه بر ظاهر، کار فهرست را هم عوض کرد. پنج ردیف رتبه‌بندی‌شده «چارت برتر» به سه ردیف «بعدی» تبدیل شد، پس یک اپ واقعی هنوز برای چارت جایی لازم دارد.
قانون قابل‌استفاده دوباره: بگذارید عنوان بشکند، چون عنوان بریده خوانده نمی‌شود، و به هر ردیف یک اقدام بدهید.
اصلاح ۳: ژانرها در یک سبک
قبل
بعد
شش رنگ توپر در دو ردیف، در برابر یک ردیف قرص که یکی‌اش پر است.
برچسب‌های ژانر پیش‌نویس صورتی، آبی، قرمز، سبز، نارنجی و فیروزه‌ای هستند، هرکدام با متن سفید توپر. دو ردیف جا می‌گیرند.
اصلاح یک ردیف قرص در یک سبک است. «همه» با بنفش برند #8B5CF6 پر شده و بقیه سفیدند. «بیشتر» در انتها برای ژانرهایی است که جا نمی‌شوند. فقط قرص پر معنایی دارد: «این چیزی است که الان به آن نگاه می‌کنید».
قانون قابل‌استفاده دوباره: رنگ باید بگوید کدام انتخاب شده. نباید بگوید کدام کدام است.
اصلاح ۴: مینی‌پلیر با کنترل‌هایی که مردم استفاده می‌کنند
قبل
بعد
قبلی، توقف و بعدی، در برابر ۳۰ ثانیه عقب، توقف و ۳۰ ثانیه جلو.
مینی‌پلیر کمترین فضا را روی صفحه دارد، پس هر کنترلش باید جایش را ثابت کند. سه کنترل پیش‌نویس قبلی، توقف و بعدی‌اند. قبلی و بعدی به اپیزودی دیگر می‌پرند.
اصلاح از ۳۰ ثانیه عقب، توقف و ۳۰ ثانیه جلو استفاده میکند. کاور و عنوان، «چرا اپ‌های عالی حس...»، سمت چپ می‌مانند و نمایش زیرش است. خط پیشرفت در لبه بالایی پلیر می‌دود، پس بدون گرفتن یک ردیف نشان می‌دهد اپیزود تا کجا رفته است.
قانون قابل‌استفاده دوباره: مینی‌پلیر باید سه دکمه‌ای را داشته باشد که مردم هنگام گوش دادن واقعاً استفاده می‌کنند.
اصلاح‌های کوچک‌تر
- یک لبه چپ. حاشیه‌های پیش‌نویس ۱۴ px چپ و ۱۲ px راست بود. اصلاح ۲۰ px از هر دو طرف و ۱۶ px بین کارت‌ها استفاده میکند.
- یک بنفش برند. اصلاح از
#8B5CF6برای پرها و دکمه‌های پخش استفاده میکند، و از#7C3AEDتیره‌تر برای متن بنفش کوچک که برای خوانده شدن کنتراست بیشتری می‌خواهد. - یک مقیاس تایپ واقعی. متن از ۸ تا ۲۰ px به اندازههای iOS یعنی ۱۱ تا ۲۸ pt رسید.
- عنوان بزرگ‌تر، هدر کوچک‌تر. هدر پیش‌نویس یک آیکون جستجو، یک زنگ و یک آواتار داشت. اصلاح آواتار و یک عنوان بزرگ «Podcasts» را نگه می‌دارد.
- چهار تب، نه پنج. خانه، مرور، کتابخانه، جستجو و پروفایل به «Listen now»، مرور، کتابخانه و جستجو تبدیل شد. پروفایل همان آواتار در هدر است.
اپ پادکست خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا اپیزود متوقفشده از بقیه کاورها بزرگ‌تر است؟ | محتمل‌ترین ضربه بعدی است |
| آیا شنونده از صفحه خانه می‌تواند ۳۰ ثانیه به عقب برگردد؟ | شنونده‌های قطع‌شده اول از همه به آن نیاز دارند |
| آیا عنوان‌ها می‌شکنند یا بریده می‌شوند؟ | عنوان بریده خوانده نمی‌شود |
| چند آیکون هر ردیف را تمام میکند؟ | یک اقدام پیدا میشود، سه تا باید اسکن شوند |
| آیا رنگ ژانر فقط یک معنا دارد؟ | رنگ باید گزینه انتخابشده را نشان بدهد |
| آیا مینی‌پلیر دکمه‌هایی دارد که مردم استفاده می‌کنند؟ | ۳۰ ثانیه عقب و جلو پراستفاده‌ترین‌ها برای مخاطبان کتاب صوتی و پادکست‌اند |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را به‌صورت کامپوننت دارد، هر اصلاح را به‌صورت جفت قبل و بعد، متغیرهای رنگ و استایل‌های متن iOS.
فایل رایگان Figma
صفحه خانه پادکست، قبل و بعد
هر دو صفحه و هر بخش اصلاحشده به‌صورت کامپوننت Figma. رایگان، فقط برای مشاهده، آن را در پیش‌نویس‌های خودتان کپی کنید.
سؤالات متداول
صفحه خانه اپ پادکست اول از همه چه چیزی را باید نشان بدهد؟
اپیزودی که شنونده نیمهاش بوده، روی یک کارت بزرگ با زمان باقیمانده، پخش، و ۳۰ ثانیه عقب و جلو. چارتها، ژانرها و نمایشهای جدید بعد از آن میآیند.
مینی‌پلیر پادکست چه دکمه‌هایی باید داشته باشد؟
۳۰ ثانیه عقب، توقف و ۳۰ ثانیه جلو. اپیزود قبلی و بعدی به اپیزودی دیگر می‌پرند، پس آن‌ها را برای پلیر کامل بگذارید.
بخش ادامه شنیدن را چطور طراحی کنیم؟
یک کارت برای آخرین اپیزود متوقفشده، با کاور، عنوان کامل، نمایش، زمان باقیمانده و نوار پیشرفت، بهعلاوه کنترلهای ادامه. هماندازه بقیه کاورها نباشد.
اپ پادکست چطور باید اپیزودها را فهرست کند؟
بگذارید عنوان در دو خط بشکند، روز و مدت را در یک خط خاکستری بیاورید و ردیف را با یک دکمه پخش تمام کنید. دانلود و منو را به صفحه اپیزود ببرید.
فیلترهای ژانر اپ پادکست را چطور طراحی کنیم؟
یک ردیف قرص در یک سبک، با گزینه انتخابشده پر به رنگ برند و «بیشتر» در انتها. شش رنگ روی شش برچسب باعث میشود رنگ هیچ معنایی نداشته باشد.
اپ پادکست از چه اندازه فونتی باید استفاده کند؟
مقیاس متن پلتفرم. صفحه اصلاحشده از اندازههای iOS از ۱۱ تا ۲۸ pt استفاده میکند، با یک عنوان بزرگ.
منابع
- هر دو صفحه از خود ما هستند، در Figma طراحی و اندازه‌گیری شده‌اند. نام نمایش‌ها، اپیزودها و آدم‌ها ساختگی‌اند؛ کاورها عکس‌هایی هستند که نام نمایش روی آن‌ها نوشته شده.
- عکس‌ها از Pexels، از Jace Oner، Somogro Bangladesh، Sound On، Brett Sayles، Ali Dashti، frank minjarez و pessoas uem.
- Apple Human Interface Guidelines: Typography، برای اندازههای متن iOS که در صفحه اصلاحشده استفاده شده.
- Apple Human Interface Guidelines: Accessibility، برای اندازه هدف لمسی ۴۴ pt.
- ابتدا به‌صورت کاروسل در 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
