طراحی اپ تناسب اندام: بازطراحی صفحه خانه، قبل و بعد
صفحه خانه یک اپ تناسب اندام که کار یک طراح تازه‌کار است: چهار کاشی آمار، یک عکس شلوغ تمرین و نموداری که چیزی برای خواندن ندارد، و همان صفحه پس از اصلاح. هر تغییر کنار هم، دلیل هر کدام، و فایل رایگان Figma.
وظیفه صفحه خانه یک اپ تناسب اندام یک چیز است: به کاربر بگوید امروز چطور پیش میرود و یک راه روشن برای شروع به او بدهد. پیش‌نویس اول زیر همه عددهای درست را دارد، اما آن‌ها را در چهار کاشی تنگ، متن سفید روی یک عکس شلوغ و نموداری بدون چیزی برای خواندن تحویل میدهد. اصلاح، همه قابلیت‌ها را نگه می‌دارد و فقط تغییر میدهد که هر بخش چقدر از چشم کار می‌کشد.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاح‌شده
در سمت چپ، چشم ابتدا به هدری با چهار چیز می‌رسد، بعد چهار کاشی در چهار رنگ، بعد یک عکس، دو دکمه و یک قلب، یک نمودار، و ردیف دوم تمرین‌ها که نوار تب آن را بریده است. در سمت راست سه کارت و یک هدر هست: امروز چطور پیش میرود، اکنون چه کنم، هفته چه شکلی است.
چیزی که کسی دلتنگش شود از فهرست قابلیت‌ها حذف نشده است. قدمها، کالری، آب، ضربان قلب، تمرین روز و فعالیت هفته همه هنوز هستند. فقط در شکل‌های کمتر و بزرگ‌تر جمع شده‌اند.
| پیش‌نویس تازه‌کار | اصلاح‌شده | |
|---|---|---|
| کنترل‌های هدر | 3 آیکن و یک آواتار | 1 دکمه |
| عددهای امروز | 4 کاشی در 4 رنگ | 1 کارت، 3 حلقه و یک چیپ ضربان قلب |
| دکمه‌های کارت تمرین | 2 دکمه و یک قلب | 1 دکمه پخش |
| نمودار هفتگی | 7 میله نارنجی، بدون عدد | مجموع، روند، امروز با رنگ نارنجی |
| تب‌ها | 5 | 4 |
| حاشیه کناری | 14 px چپ، 12 px راست | 20 px در هر دو سو |
| اندازه متن‌ها | 8 تا 16 px | 11 تا 28 pt |
اصلاح 1: یک کارت از حلقهها به جای چهار کاشی
قبل
بعد
چهار کاشی پاستلی که هرکدام یک آیکن، یک عدد، یک برچسب و یک نوار باریک دارند، در برابر یک کارت با سه حلقه، هدف زیر هر برچسب و ضربان قلب به شکل چیپی کوچک.
هر کاشی در پیش‌نویس یک عدد می‌گوید و یک نوار باریک می‌کشد، اما نمی‌گوید نوار نسبت به چه چیزی سنجیده میشود. 8,432 قدم می‌تواند خوب باشد یا بد. خواننده باید هدف را از طول نوار حدس بزند، آن هم نوارهایی که باریک‌اند.
حلقهها هدف را هم با کلمه می‌گویند ("از 10,000"، "از 600 kcal"، "از 2 L") و هم با شکل: حلقه یا پر است یا نیست. یک نگاه به این سؤال جواب میدهد: "امروز در مسیرم؟". ضربان قلب یک اندازهگیری است، نه هدف، پس حلقه نمی‌گیرد. به چیپی در گوشه میرود که نشان میدهد نوع دیگری از عدد است.
قاعده‌ای که میشود تکرار کرد: اگر عددی هدف دارد، هدف را نشان بده. اگر ندارد، آن را به شکل پیشرفت درنیاور.
اصلاح 2: یک دکمه پخش، یک سایه پشت کلمات
قبل
بعد
یک عنوان بخش، نشان NEW، متن سفید 9 px روی عکس و سه کنترل زیر آن، در برابر عکسی برچسب‌دار، متن بزرگ‌تر روی سایه و یک دکمه پخش.
متن سفید روی عکس فقط جایی خوانا است که عکس اتفاقاً تیره باشد. در پیش‌نویس، خط جزئیات از روشن‌ترین بخش تصویر می‌گذرد، کف باشگاه و یک تی‌شرت خاکستری، و در 9 px ناپدید میشود. اصلاح یک سایه سیاه روی عکس می‌اندازد که در لبه پایین، دقیقاً جای کلمات، به 72% می‌رسد و متن را بزرگ‌تر می‌گذارد.
پیش‌نویس همچنین پیش از آنکه کاربر بتواند عمل کند سؤالی می‌پرسد: Start Now، یا Details، یا ذخیره با قلب؟ با تمرین امروز فقط یک کار باید کرد: شروعش. یک دکمه پخش گرد این را بدون یک کلمه می‌گوید. جزئیات یک لمس دورتر هستند وقتی کسی بخواهد، اما دیگر با عمل اصلی رقابت نمی‌کنند.
نشان "NEW" و عنوان بخش "تمرین امروز" تقریباً یک چیز را دو بار می‌گفتند. اصلاح یک برچسب نگه می‌دارد، چیپی روی عکس.
اصلاح 3: نمودار را با مجموع شروع کن
قبل
بعد
هفت میله نارنجی مساوی با یک منوی کشویی و یک راهنما، در برابر مجموع هفته با تایپ بزرگ، چیپ روند و یک میله با نارنجی پررنگ.
نمودار به یک سؤال جواب میدهد و نمودار پیش‌نویس نمی‌گوید کدام. هفت میله با همان نارنجی تند، بدون مقدار و با راهنما برای تنها سری، پس خواننده باید خودش تصمیم بگیرد چه برداشتی بکند. اصلاح اول با کلمات به محتمل‌ترین سؤال جواب میدهد: 4 ساعت و 12 دقیقه این هفته، 18% بیشتر از هفته قبل.
میلهها حالا زمینه‌اند، نه پیام. پنج‌تا سایه کم‌رنگی از رنگ برند هستند و امروز، شنبه، نارنجی پررنگ است، پس چشم روی جایی می‌نشیند که کاربر در هفته است. یکشنبه میله‌ای کوتاه می‌ماند تا هفته از چپ به راست تا امروز خوانده شود. منوی کشویی "این هفته" و راهنمای "دقایق فعالیت" حذف شدند چون عنوان هر دو را می‌گوید.
قاعده‌ای که میشود تکرار کرد: عددی را که توضیح دادنش با نمودار یک دقیقه طول می‌کشد بالا بگذار و بگذار میلهها بقیه را بگویند.
اصلاح 4: یک دکمه در هدر
قبل
بعد
یک آواتار، یک سلام با علامت تعجب، خط دوم با دو علامت دیگر و سه آیکن، در برابر تاریخ، یک سلام و یک دکمه اعلان‌ها.
هدر پیش‌نویس پیش از هر محتوایی هفت چیز دارد: یک آواتار، دو خط سلام و سه آیکن. آواتار به حساب کاربر میرود و اپ از قبل تب Profile دارد، پس اصلاح آن را از هدر برمی‌دارد. آیکن‌های جستجو و تنظیمات هم با آن می‌روند و جا برای سلام باز میشود.
اصلاح تنها چیزی را نگه می‌دارد که سزاوار گوشه بالا است: اعلان‌ها، با یک نقطه وقتی چیز تازه‌ای هست. سلام به تاریخ و یک نام با تایپ بزرگ تبدیل میشود که بدون علامت تعجب به خواننده می‌گوید عددهای امروز مال چه روزی هستند.
اصلاح‌های کوچک‌تر
- چهار تب، نه پنج. Home، Workouts، Progress و Profile. تب‌های Stats و Community جایشان را به یک تب Progress دادند.
- یک حاشیه. پیش‌نویس 14 px چپ و 12 px راست داشت، پس کارت‌ها کمی از مرکز خارج به نظر می‌رسیدند. اصلاح 20 px در هر دو سو و 16 px بین کارت‌ها می‌گذارد.
- یک رنگ برای عمل. پیش‌نویس کاشی‌های هلویی، زرد، صورتی و آبی به‌علاوه نارنجی داشت. اصلاح نارنجی را برای عمل می‌گذارد و کهربایی و آبی را فقط روی دو حلقه نگه می‌دارد، جایی که حلقهها را از هم جدا می‌کنند.
- مقیاس تایپ واقعی. متن از 8 تا 16 px به اندازه‌های متن iOS یعنی 11 تا 28 pt رفت، پس هیچ چیز روی صفحه کوچک‌تر از کوچک‌ترین کپشن سیستم نیست.
- بدون ردیف Recommended. ردیف دوم عکس‌ها در پیش‌نویس را نوار تب می‌برید. اصلاح صفحه خانه را بعد از نمودار تمام می‌کند.
- سلام آرام‌تر. "اهداف امروز را بترکان!!" شد تاریخ بالای نام.
اپ تناسب اندام خودت را ممیزی کن
| سؤال | چرا مهم است |
|---|---|
| آیا هر عدد پیشرفت هدفش را نشان میدهد؟ | عدد بدون هدف پیشرفت نیست |
| آیا کارت تمرین یک عمل روشن دارد؟ | دو دکمه و یک قلب تصمیم‌گیری می‌خواهند |
| آیا متنی مستقیم روی عکس گذاشته شده؟ | خوانایی نباید به عکس بستگی داشته باشد |
| آیا نمودار اول با کلمات منظورش را می‌گوید؟ | میله‌های بدون مقدار خواننده را به حدس وامی‌دارند |
| آیا هدر تب‌ای را تکرار می‌کند؟ | دو در برای یک اتاق فقط شلوغی اضافه می‌کند |
فایل Figma را بگیر
فایل رایگان هر دو صفحه را به شکل کامپوننت دارد، هر اصلاح را به صورت جفت قبل و بعد، متغیرهای رنگ و استایل‌های متن iOS.
فایل رایگان Figma
صفحه خانه تناسب اندام، قبل و بعد
هر دو صفحه و هر بخش اصلاح‌شده به شکل کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش در پیش‌نویس‌هایت کپی کن.
سؤالات متداول
صفحه خانه یک اپ تناسب اندام ابتدا چه چیزی را باید نشان دهد؟
امروز چطور پیش میرود: قدمها، کالری و آب در برابر اهدافشان، در یک کارت. تمرین روز را مستقیم زیر آن با یک راه روشن برای شروع بگذار.
آیا حلقههای پیشرفت در اپ تناسب اندام از نوارهای پیشرفت بهترند؟
برای چند هدف روزانه، بله. حلقه با یک نگاه خوانده میشود، پر بودن یا نبودن را بدون مقیاس نشان میدهد و عددی در مرکزش جا میشود. ضربان قلب را از حلقهها بیرون نگه دار، چون اندازهگیری است و هدفی برای پر شدن ندارد.
چطور متن سفید را روی عکس تمرین خوانا کنیم؟
یک سایه تیره پشت کلمات بگذار، قویترین جایی که متن نشسته، و متن را با اندازهای خوانا بنویس. به این تکیه نکن که عکس در جای درست تیره باشد.
نمودار فعالیت در اپ تناسب اندام چطور باید طراحی شود؟
با مجموع و روند به کلمات شروع کن، بعد میلهها را با سایه ملایم نشان بده و روز جاری را با رنگ برند. راهنما و منوی کشوییای را که عنوان پوشش میدهد حذف کن.
یک اپ تناسب اندام چند تب باید داشته باشد؟
چهار یا پنج. تبهایی را که عددهای مرتبط دارند، مثل Stats و Community، در یک جا مثل Progress ادغام کن.
منابع
- هر دو صفحه کار خودمان هستند، طراحی و اندازه‌گیری‌شده در Figma.
- عکس‌ها از Pexels، از pessoas uem، Julia Larson، Tima Miroshnichenko و Vitaly Gariev.
- 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
