طراحی اپ مدیریت وظایف: بازطراحی صفحه امروز، قبل و بعد
صفحه‌ای از یک اپ وظایف با طراحی تازه‌کارانه: پیشرفت به شکل کسر با دو رقم اعشار، پنج چیپ فیلتر رنگی، تاریخ قرمز روی هر وظیفه و دکمه شناور روی آخرین آن، و همان صفحه پس از اصلاح. تک‌تک تغییرات کنار هم و فایل رایگان Figma.
یک اپ وظایف باید حس کمک بدهد. پیش‌نویس اول در زیر دقیقاً می‌داند امروز چه چیزی موعد دارد، ولی آن را با یک تاریخ قرمز روی هر خط، چیپ‌های رنگی برای هر اولویت و دکمه‌ای که روی آخرین وظیفه پارک شده می‌گوید. شبیه آلارم است. نسخه اصلاح‌شده همه وظایف و همه اطلاعات را نگه می‌دارد و آلارم را تا حد یک لیست آرام پایین می‌آورد.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کارانه
اصلاح‌شده
در سمت چپ، هر وظیفه توضیح، تا سه تگ، یک تاریخ قرمز و دسته‌ای از چهره‌ها دارد. در سمت راست، هر وظیفه یک خط و نیم است و لیست اولین چیزی است که چشم روی آن می‌نشیند.
بشمارید چشم باید چه چیزهایی را پردازش کند. پیش‌نویس یک باکس پیشرفت رنگی، پنج چیپ فیلتر در پنج رنگ، و روی هر وظیفه یک توضیح، تگهای رنگی، یک تاریخ قرمز و اغلب دسته‌ای آواتار دارد. صفحه اصلاح‌شده یک حلقه، یک سوییچ سه‌بخشی و یک لیست دارد.
| پیش‌نویس تازه‌کارانه | اصلاح‌شده | |
|---|---|---|
| پیشرفت | «1/5 tasks completed (20.00%)» و یک نوار | حلقه ۲۰ درصد و «۱ از ۵ انجام شده» |
| فیلترها | ۵ چیپ در ۵ رنگ | ۳ کلمه در یک سوییچ |
| تگ رنگی در هر وظیفه | تا ۳ | ۰ |
| تاریخ قرمز | هر وظیفه | هیچ‌کدام |
| نمایش اولویت با | فیلتر چیپ رنگی و یک تگ | یک نقطه کوچک |
| افزودن وظیفه | دکمه شناور ۵۶ پیکسلی روی لیست | یک ردیف در انتهای لیست |
| تب‌ها | ۵ | ۴ |
| حاشیه کناری | ۱۴ پیکسل چپ، ۱۲ پیکسل راست | ۲۰ پیکسل از هر دو طرف |
| اندازه متن‌ها | ۸ تا ۲۰ پیکسل | ۱۱ تا ۲۸ پوینت |
اصلاح ۱: پیشرفت به شکل یک حلقه و یک جمله
قبل
بعد
یک کسر، یک درصد با دو رقم اعشار، یک نوار و یک تشویق، در برابر یک حلقه و یک جمله.
پیش‌نویس یک چیز را سه بار می‌گوید: «1/5»، «20.00%» و نواری که یک‌پنجم پر است. دو رقم اعشار لو می‌دهد: «20.00%» عددی است که یک برنامه چاپ کرده، نه عددی که آدم نیاز داشته باشد. و خط زیر آن کوچک، خاکستری و با دو علامت تعجب تمام می‌شود.
اصلاح یک تصویر انتخاب می‌کند، یک حلقه ۲۰ درصدی، و یک جمله با دو واقعیت مهم: یکی از پنج انجام شده، چهار مورد مانده. جمله با بخش مفید تمام می‌شود، «بعدی ساعت ۴:۰۰ بعدازظهر»، که به کاربر می‌گوید بعد چه کند، به‌جای اینکه تشویقش کند.
حلقه با قرمز برند کشیده شده، همان قرمز ردیف افزودن و تب فعال.
اصلاح ۲: فیلتر بر اساس زمان، نه رنگ
قبل
بعد
پنج چیپ برای اولویت و وضعیت در پنج رنگ، در برابر سه کلمه در یک سوییچ.
چیپ‌های پیش‌نویس دو سؤال را قاطی می‌کنند. High، Medium و Low میپرسند وظیفه چقدر مهم است، Done می‌پرسد در چه وضعیتی است و All (5) همه چیز را می‌خواهد. این پنج چیپ از پنج رنگ و دو شعاع گوشه استفاده می‌کنند، پس حتی شکل‌ها هم با هم هماهنگ نیستند.
برای استفاده از آن‌ها کاربر باید اول یاد بگیرد که قرمز یعنی فوری، نارنجی یعنی متوسط و سبز یعنی کم، و
اصلاح یک سؤال می‌پرسد، همان که مردم از یک لیست کارها میپرسند: کی. همه، امروز و پیشرو سه کلمه در یک سوییچ هستند که مثل یک کنترل با یک حالت انتخاب‌شده خوانده می‌شود، و با تب‌های پایین هم می‌خواند: تب امروز، تب پیشرو. اولویت ناپدید نشد. به ردیف‌ها رفت، به شکل یک نقطه کوچک (اصلاح ۳).
اصلاح ۳: یک وظیفه یک خط و نیم است
قبل
بعد
روی هر وظیفه عنوان، توضیح، تگ، خط موعد قرمز و آواتار، در برابر یک عنوان، یک زمان و یک لیست.
هر وظیفه در پیش‌نویس میتواند پنج نوع اطلاعات داشته باشد: توضیح، تا سه تگ رنگی، یک «Due: 10/24/2026 5:00 PM» قرمز، گروهی آواتار و یک چک‌باکس. «Urgent!!» به‌عنوان تگ روی وظیفه‌ای آمده که در خط موعد هم قرمز است. هر وظیفه امروز موعد دارد و هر تاریخ قرمز است، پس قرمز دیگر یعنی «دیر شده» نیست و یعنی «یک وظیفه هست».
اصلاح به هر وظیفه یک عنوان و یک خط خاکستری می‌دهد: زمان و لیستی که به آن تعلق دارد. «۵:۰۰ بعدازظهر، Work». تاریخ حذف شده چون سربرگ از قبل می‌گوید چه روزی است.
تگ‌ها در نام لیست ادغام شدند. اولویت به یک نقطه کوچک در سمت راست تبدیل شد، قرمز برای وظیفه اول و نارنجی برای دومی، و جایی که چیزی برای علامت‌زدن نیست نقطه‌ای نیست. وظیفه انجام‌شده در لیست می‌ماند، خط‌خورده و با برچسب «انجام شد»، با یک تیک پر در قرمز برند.
وظایف در یک کارت سفید با جداکننده باریک بین‌شان قرار دارند، پس لیست مثل یک چیز واحد خوانده می‌شود.
اصلاح ۴: «افزودن وظیفه» در انتهای لیست
قبل
بعد
یک دکمه شناور که آخرین وظیفه را می‌پوشاند، در برابر یک ردیف در انتهای لیست.
دکمه شناور دنبال کاربر می‌آید و هر چه زیرش باشد را می‌پوشاند. در پیش‌نویس روی آخرین وظیفه نشسته، آواتارهای سمت راست ردیف را می‌بُرد و سنگین‌ترین شیء صفحه است: ۵۶ پیکسل، قرمز اشباع، با سایه.
اصلاح همان کاری را می‌کند که یک لیست می‌کند: با چیزی تمام می‌شود که می‌شود به آن اضافه کرد. «افزودن وظیفه» در یک ردیف درست همانجا که آخرین وظیفه تمام می‌شود نشسته، با یک بعلاوه کوچک و همان قرمز بقیه اکشن‌ها. سایه‌ای نیست و چیزی پوشانده نمی‌شود. کسی که لیست را اسکرول می‌کند از قبل به انتهای آن نگاه می‌کند، پس اکشن افزودن همانجا که چشم میایستد پیدا می‌شود.
اصلاحات کوچک‌تر
- چهار تب، نه پنج. امروز، پیشرو، مرور و پروفایل جای امروز، پیشرو، پروژه‌ها، جستجو و پروفایل را گرفتند.
- یک حاشیه. پیش‌نویس ۱۴ پیکسل چپ و ۱۲ پیکسل راست داشت. اصلاح ۲۰ پیکسل از هر دو طرف.
- یک سربرگ واقعی. «My Tasks» با تاریخ کامل به یک «شنبه، ۲۴ اکتبر» کوچک بالای یک «امروز» بزرگ تبدیل شد و آواتار به زنگ تبدیل شد.
- یک قرمز. قرمز برند،
#E5484D، حلقه، آیکون افزودن و تب فعال را پوشش می‌دهد. متن قرمز از#D92D20عمیق‌تر استفاده می‌کند تا خوانا بماند. - یک مقیاس تایپ واقعی. متن از ۸ تا ۲۰ پیکسل به اندازه‌های iOS یعنی ۱۱ تا ۲۸ پوینت رفت.
اپ وظایف خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا یک عدد در دو شکل ظاهر می‌شود، مثل 1/5 و ۲۰٪؟ | یک تصویر و یک جمله انتخاب کنید |
| آیا فیلترها یک سؤال میپرسند؟ | قاطی کردن اهمیت و وضعیت کاربر را به رمزگشایی وامی‌دارد |
| آیا قرمز برای چیزی جز اکشن و فوریت استفاده شده؟ | اگر همه چیز قرمز است، هیچ چیز دیر نشده |
| آیا یک وظیفه در یک خط و نیم خوانده می‌شود؟ | لیست‌ها اسکن می‌شوند، خوانده نمی‌شوند |
| آیا دکمه افزودن محتوا را می‌پوشاند؟ | دکمه شناور آخرین مورد را پنهان می‌کند |
| وقتی صفحه از قبل یک روز است، آیا تاریخ روی ردیف‌ها هست؟ | تکرار روز نویز است |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را به شکل کامپوننت دارد، هر اصلاح را به صورت جفت قبل و بعد، متغیرهای رنگ و استایل‌های متن iOS.
فایل رایگان Figma
صفحه امروز اپ وظایف، قبل و بعد
هر دو صفحه و هر بخش اصلاح‌شده به شکل کامپوننت Figma. رایگان، فقط مشاهده، آن را در پیش‌نویس‌های خود کپی کنید.
سوالات متداول
صفحه امروز یک اپ وظایف باید چه چیزی نشان بدهد؟
پیشرفت امروز، راهی برای جابهجایی بین همه، امروز و پیشرو، لیست وظایف با زمانهایشان و اکشن افزودن وظیفه. توضیحات و تاریخهای بلند میتوانند برای صفحه جزئیات وظیفه بمانند.
یک اپ وظایف چگونه باید پیشرفت را نشان بدهد؟
به شکل یک حلقه یا یک نوار بهعلاوه یک جمله، مثل «۱ از ۵ انجام شده». یک عدد را هم به شکل کسر، هم درصد و هم نوار چاپ نکنید. اگر درصد نشان میدهید، گردش کنید.
یک اپ وظایف چگونه باید اولویت را نشان بدهد؟
با یک نقطه کوچک یا یک پرچم روی ردیفهایی که به آن نیاز دارند، نه با تگهای رنگی روی هر وظیفه. اولویت میتواند فیلتر یا مرتبسازی هم باشد، اما لازم نیست اصلیترین آن باشد.
آیا اپ لیست کارها باید دکمه افزودن شناور داشته باشد؟
دکمه شناور رایج است، ولی در صفحه لیست میتواند آخرین مورد را بپوشاند. ردیف «افزودن وظیفه» در انتهای لیست چیزی را نمیپوشاند و همانجا که چشم میایستد قرار دارد.
فیلترهای یک اپ لیست کارها باید چه باشند؟
سؤالهایی که مردم میپرسند: همه، امروز و پیشرو. برای هر کنترل یک سؤال نگه دارید و فیلتر اولویت را با فیلتر وضعیت در یک ردیف قاطی نکنید.
منابع
- هر دو صفحه از خود ما هستند، در Figma طراحی و اندازه‌گیری شده‌اند. وظایف، آدم‌ها و مشتری برای این تمرین ساختگی‌اند. ۱ از ۵ وظیفه انجام‌شده یعنی ۲۰ درصد.
- عکس‌ها از Pexels توسط pessoas uem، Iphanyi Ezemenari و Ajan Yogi.
- Apple Human Interface Guidelines: Typography، برای اندازه‌های متن iOS که در صفحه اصلاح‌شده استفاده شده است.
- Apple Human Interface Guidelines: Color، درباره اینکه انتقال معنا را فقط به رنگ وانگذاریم.
- ابتدا به شکل کاروسل در 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
