طراحی اپلیکیشن مدیتیشن: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپلیکیشن مدیتیشن که دست‌پخت یک طراح تازه‌کار است: پنج رنگ برای حالوهوا، متن سفید روی عکس کم‌رنگ و یک پاراگراف به‌جای آمار پیشرفت. و همان صفحه بعد از اصلاح. همه تغییرها کنار هم، دلیل هر کدام و فایل رایگان Figma.
یک اپلیکیشن مدیتیشن فقط یک قول می‌دهد: صفحه‌اش باید تو را آرام‌تر از لحظه ورودت کند. پیش‌نویس اول پایین همین را می‌خواهد، و بعد با نه رنگ، کلمات سفید روی یک عکس کم‌رنگ و یک پاراگراف به‌جای جایی که باید عدد باشد، خودش را خراب میکند. اصلاح، همه قابلیت‌ها را نگه می‌دارد و فقط صدا را کم میکند.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاحشده
صفحه چپ دوستانه و پرسروصداست. صفحه راست همان محصول است با صدای کمتر، و کم‌صدا بودن همان قابلیت اصلی است.
بشمارید چشم در هر طرف باید چه چیزی را دسته‌بندی کند. پیش‌نویس پنج رنگ حالوهوا و چهار رنگ کاشی دارد، به‌علاوه یک کادر هلویی و عکسی با متن روی آن، آن هم پیش از آنکه کسی یک کلمه بخواند. صفحه اصلاحشده یک سبز مریمی برند دارد، #4F7A5A، و یک شعله هلویی، #E0784A، که فقط برای یک چیز نگه داشته شده: روزهای پیاپی.
| پیش‌نویس تازه‌کار | اصلاحشده | |
|---|---|---|
| رنگ‌ها در بررسی حالوهوا | ۵ | ۱، به‌علاوه خاکستری |
| رنگ‌ها در کاشی‌های پیشنهادی | ۴ | ۰، بهجایش عکس |
| متن روی عکس | عنوان و ۴ برچسب | هیچ |
| پیشرفت | یک جمله | ۳ عدد |
| تب‌ها | ۵ | ۴ |
| حاشیه کناری | ۱۴ px چپ، ۱۲ px راست | ۲۰ px هر دو طرف |
| اندازه متن‌ها | ۸ تا ۱۸ px | ۱۱ تا ۲۸ pt |
اصلاح ۱: سؤال حالوهوا را یک بار بپرسید، با یک رنگ
قبل
بعد
پنج دایره رنگی با یک کلمه زیر هرکدام، در برابر یک سؤال، پنج چهره آرام و یک پاسخ انتخاب‌شده.
بررسی حالوهوا یک سؤال با پنج پاسخ است. در پیش‌نویس هر پاسخ رنگ خودش را دارد، پس پیش از آنکه کاربر چیزی انتخاب کند، ردیف انگار قبلاً پاسخ داده شده، و هیچ چیز نشان نمی‌دهد کدام انتخاب شده. رنگ اینجا کار تزئین میکند، نه کار اطلاع‌رسانی.
اصلاح، هر پنج چهره را با همان خاکستری می‌کشد و فقط چهره انتخاب‌شده را با سبز برند پر میکند، و کلمهاش را در یک چیپ کنار سؤال می‌گذارد: «آرام». حالا رنگ دقیقاً یک معنا دارد: این وضعیت فعلی است. کلمه‌های زیر چهره‌ها از ردیف حذف شده‌اند چون چیپ، کلمه چهره انتخاب‌شده را یک بار می‌گوید.
این اصل به هر اپلیکیشنی با امتیازدهی یا انتخاب منتقل می‌شود: اگر همه گزینه‌ها رنگی باشند، رنگ هیچ چیزی به کاربر نمیگوید. گزینه‌ها را خنثی نگه دارید و رنگ تأکیدی را خرج انتخاب کنید.
اصلاح ۲: عکس بالا، کلمات پایین
قبل
بعد
کلمات سفید و چهار برچسب ریز روی عکس کم‌رنگ ساحل، در برابر عکسی که عنوان، مدت و یک دکمه پخش زیرش آمده است.
پیش‌نویس یک عنوان سفید ۱۷ px و چهار برچسب ۸ px را مستقیم روی شن و دریای روشن گذاشته. سفید روی عکس کم‌رنگ ضعیف‌ترین جفت ممکن است، و برچسب‌ها کوچک‌ترین متن صفحه‌اند، درست همان‌جا که کاربر تصمیم می‌گیرد چه چیزی پخش کند. متنی که روی عکس نشسته با هر عکس هم عوض می‌شود: روزی که عکس تیره‌تری برسد، چیدمان جور دیگری خوانده می‌شود.
اصلاح، همه کلمات را به کارت و زیر عکس می‌برد، با متن تیره روی سطح ساده. عکس حالا فقط یک عکس است. چهار برچسب به یک خط اطلاعات کوچک می‌شوند، «Daily Calm، 10 min، Sleep»، و قرص Play در گوشه به دکمه‌ای گرد در انتهای خط تبدیل می‌شود، همان‌جا که انگشت شست از قبل هست. همان جلسه حالا یک عنوان، یک مدت و یک عمل دارد.
قاعده‌ای که باید تکرارش کنید: اگر کلمات مهم‌اند، سطح خودشان را بدهید. گذاشتن متن روی عکس یعنی پذیرفتن اینکه بعضی عکس‌ها آن را خراب خواهند کرد.
اصلاح ۳: دو کارت عکس به‌جای چهار کاشی رنگی
قبل
بعد
چهار کاشی پاستلی که هرکدام یک آیکون دارند، در برابر دو کارت عکس که نشان می‌دهند جلسه چه حسی دارد.
کاشی‌ها شبیه هیچ چیزی نیستند. یک جعبه بنفش با ماه، «خواب» را به همان شکل تخت می‌گوید که یک جعبه آبی با ریه‌ها «نفس» را می‌گوید، و آن چهار رنگ آرامش صفحه را گرفته‌اند. عکس‌ها خود چیز را نشان می‌دهند: آسمان شب برای جلسه خواب، دریاچه مه‌آلود برای جلسه صبح. در اپلیکیشن مدیتیشن تصویر بخشی از محصول است، چون پیش از صدا حالوهوا را می‌سازد.
ردیف اصلاحشده دو کارت نشان می‌دهد و هرکدام نام، مدت و دسته‌اش را در دو خط دارد. دو کارت باعث می‌شود هر عکس به‌اندازه کافی عریض باشد تا خوانده شود. کاشی‌های Breathe و Focus Music در این صفحه نیستند، و عنوان بخش از «Recommended For You» به «For you» کوتاه شده، چون فهرستی در صفحه اصلی خودبه‌خود برای شماست.
اصلاح ۴: سه عدد به‌جای یک پاراگراف
قبل
بعد
جمله‌ای که همان سه واقعیت در آن دفن شده، در برابر همان سه واقعیت به‌صورت عدد با برچسب.
هر دو نسخه یک چیز می‌گویند: هفت روز پیاپی، دو ساعت و سی‌وپنج دقیقه در مجموع، بیست‌وسه جلسه. پیش‌نویس همه را در یک جمله با دو علامت تعجب و یک «so far, amazing!» فشرده کرده. خواننده باید کل جمله را بخواند تا عددی را که دنبالش آمده پیدا کند، و عددی که داخل یک عبارت زندگی میکند در یک نگاه قابل مقایسه نیست.
اصلاح به هر واقعیت ستون خودش را می‌دهد: یک عدد بزرگ و یک برچسب کوچک. شعله هلویی کنار روزهای پیاپی نشسته چون همین عدد است که مردم را فردا برمی‌گرداند. حالا کاربر پیشرفتش را در همان زمانی که نگاه کردن می‌برد بررسی میکند.
اصلاح‌های کوچک‌تر
- چهار تب، نه پنج. Today، Explore، Sleep و Profile جای Home، Sleep، Meditate، Music و Profile را گرفته‌اند. Meditate و Music دیگر تب جداگانه ندارند.
- یک حاشیه. پیش‌نویس ۱۴ px در چپ و ۱۲ px در راست داشت. اصلاح ۲۰ px در هر دو طرف و ۱۴ px بین کارت‌ها را به کار می‌برد.
- احوالپرسی تمیزتر. «How are you feeling today???» از سرصفحه حذف شده، چون کارت حالوهوا آن را یک بار و با یک علامت سؤال می‌پرسد.
- یک عمل در سرصفحه. زنگ می‌ماند و یک نقطه کوچک می‌گیرد. آواتار از سرصفحه رفته، و Profile هنوز یک تب است.
- مقیاس تایپ واقعی. متن از ۸ تا ۱۸ px به اندازه‌های iOS یعنی ۱۱ تا ۲۸ pt رفت، پس کوچک‌ترین متن خوانا است و عنوان به‌وضوح عنوان است.
- لینک‌های آرام بخش‌ها. «View all >» شد «See all»، با همان کلمات در همه بخش‌ها.
اپلیکیشن سلامت خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا هر گزینه در یک انتخاب رنگ خودش را دارد؟ | اگر همه رنگی باشند، هیچ‌کدام «انتخاب‌شده» نمیگوید |
| آیا متنی روی عکس نشسته است؟ | عکس بعدی ممکن است آن را خراب کند |
| آیا روزهای پیاپی یا مجموع در یک نگاه خوانده می‌شود؟ | عددهای پنهان در جمله‌ها نادیده گرفته می‌شوند |
| آیا کارت‌های جلسه نشان می‌دهند جلسه چه حسی دارد؟ | آرامش با تصویر فروخته می‌شود |
| آیا بیش از یک رنگ تأکیدی هست؟ | هر رنگ اضافه یک چیز دیگر برای رمزگشایی است |
| آیا دو تب به یک جا میروند؟ | درهای تکراری ساختار را پنهان می‌کنند |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را بهشکل کامپوننت دارد، هر اصلاح را به‌صورت جفت قبل و بعد، متغیرهای رنگ و سبک‌های متن iOS.
فایل رایگان Figma
صفحه اصلی اپلیکیشن مدیتیشن، قبل و بعد
هر دو صفحه و تمام بخش‌های اصلاحشده به‌صورت کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش آن را در پیش‌نویس‌های خودتان کپی کنید.
سؤالات متداول
صفحه اصلی اپلیکیشن مدیتیشن باید چه چیزی نشان دهد؟
یک احوالپرسی، یک سؤال حالوهوا، جلسه امروز بهشکل یک کارت عکس با یک دکمه پخش، ردیفی کوتاه از پیشنهادها و پیشرفت کاربر. بقیه چیزها میتوانند یک ضربه آنطرفتر صبر کنند.
بررسی حالوهوا در اپلیکیشن چه شکلی باید داشته باشد؟
پنج گزینه برابر و آرام با یک سؤال بالای آنها. فقط گزینهای را که کاربر انتخاب میکند رنگی کنید و کلمهاش را یک بار بگویید. اگر هر چهره رنگ خودش را داشته باشد، هیچ چیز به کاربر نمیگوید چه چیزی انتخاب شده است.
آیا گذاشتن متن روی عکس در اپلیکیشن درست است؟
فقط وقتی متن روی ناحیهای کنترلشده بنشیند، مثلاً یک لایه تیره، و از حداقل کنتراست رد شود. روی عکس روشن و متغیر، بهجایش کلمات را زیر تصویر روی یک سطح ساده بگذارید.
روزهای پیاپی و پیشرفت را در اپلیکیشن سلامت چگونه نشان دهیم؟
بهشکل چند عدد با برچسب، مثل روزهای پیاپی، کل زمان و جلسهها. روزهای پیاپی یک تأکید کوچک میارزد، مثل یک شعله. جمله تشویقی جایگزین عدد نیست.
یک اپلیکیشن مدیتیشن چند تب باید داشته باشد؟
چهار یا پنج. اگر دو تب به یک کتابخانه میروند، ادغامشان کنید. صفحه اصلاحشده از پنج تب به چهار تب رسید.
منابع
- هر دو صفحه ساخته خودمان هستند، در Figma طراحی و اندازه‌گیری شده‌اند. کاربر، جلسهها و عددها برای این تمرین ساختگی‌اند.
- عکس‌ها از Pexels، از Татьяна Танатова، olia danilevich، Felipe Barboza و Jean-Daniel Francoeur.
- Apple Human Interface Guidelines: Typography، برای اندازه‌های متن iOS که در صفحه اصلاحشده استفاده شد.
- W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum)، برای متن روی تصویر و پس‌زمینه‌ها.
- ابتدا بهشکل کاروسل در 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
