طراحی اپلیکیشن ردیاب هزینه: بازطراحی داشبورد بودجه، قبل و بعد
داشبورد بودجه‌ای با نمودار دایرهای هشت‌تکه و جدول نه‌نقطه‌ای، و همان صفحه اصلاح‌شده: اول یک عدد، یک نوار تخت، ردیف‌های ساده و ماه به‌عنوان عنوان. همه تغییرها کنار هم، با فایل رایگان Figma.
مردم اپ بودجه را باز می‌کنند تا یک چیز را بفهمند: هنوز چقدر می‌توانم خرج کنم. پیش‌نویس اول زیر همه‌چیز را گزارش می‌دهد. عدد در آخرین جعبه از چهار جعبه هم‌اندازه با اندازه 10 px نشسته، هزینهها یک نمودار دایرهای هشت‌تکه با راهنمای 8 px است و تراکنش‌ها یک جدول پنج‌ستونه با اندازه 9 px.
اصلاح، همه کارکردها را نگه می‌دارد و فقط ترتیب را عوض می‌کند. عدد اول می‌آید و بزرگ است، نمودار دایرهای به یک نوار تخت تبدیل میشود و جدول به چهار ردیف ساده و خوانا.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاح‌شده
در سمت چپ، هیچ چیز راهبری نمی‌کند. چهار جعبه، یک نمودار دایرهای، یک نمودار میله‌ای، یک ردیف فیلتر و یک جدول همگی تقریباً هم‌وزن‌اند و پاسخ تنها پرسش مهم، عددی 10 px در جعبه چهارم است. چشم باید کل صفحه را بگردد تا آن را پیدا کند.
در سمت راست، صفحه به‌ترتیب پاسخ می‌دهد: چقدر مانده، بقیه کجا رفت، اخیراً چه شد. یک عدد بزرگ است، بقیه متن ساده‌اند و هر عنصر فقط یک کار رنگی دارد.
چه چیزی تغییر کرد، با اندازه‌گیری
| پیش‌نویس تازه‌کار | اصلاح‌شده | |
|---|---|---|
| زمینه | چهار جعبه دارای حاشیه، نوار خاکستری سرجدول | سفید ساده، بدون کارت، بدون کاشی، بدون سایه |
| حاشیه‌ها | 14 چپ، 12 راست | 20 در هر دو طرف |
| عدد اصلی | $1,284 در جعبه چهارم با 10 px | $1,284 با 48 ضخیم، اول صفحه |
| هزینهها | نمودار دایرهای 160 px، هشت تکه، راهنمای 8 px | نوار انباشته تخت با ارتفاع 10 px، راهنمای دو در دو |
| بودجهها | نمایش داده نمی‌شود | ردیف‌های ساده، نوار 4 px زیر هرکدام |
| تراکنش‌ها | پنج ستون با 9 px | چهار ردیف با 15 و 13 px، دایره حرف 36 px |
| عنوان | منوی کشویی کنار منو، خروجی و زنگ | ماه با 28 ضخیم، لوگوتایپ کوچک بالایش |
| تب‌ها | پنج تا، آیکون‌های توپر و خطی مخلوط، بعلاوه شناور | چهار تا، نوار تخت 78 px با خط مویی |
اصلاح 1: مانده برای خرج را اول بگذارید
قبل
بعد
چهار جعبه کوچک هم‌اندازه در یک ردیف: درآمد $4,200 سبز، هزینهها $1,916 قرمز، پس‌انداز $1,000 آبی و مانده $1,284 مشکی، همه با 10 px، در برابر $1,284 با حروف درشت و ضخیم و زیرش «مانده از $3,200 و 12 روز باقیمانده» به رنگ خاکستری.
چهار جعبه به همه عددها یک اندازه می‌دهند، پس هیچ‌کدام پاسخ نیست. کاربر باید بداند «مانده» همان عدد مهم است و بعد آن را با 10 px بخواند.
اصلاح، یکی را انتخاب می‌کند. $1,284 با 48 px ضخیم است و خط زیرش دو واقعیتی را می‌آورد که آن را معنادار می‌کنند: بودجه‌ای که از آن می‌آید، $3,200، و روزهای باقیمانده ماه. عدد بدون بودجه‌اش یک اطلاعات بی‌ارزش است. با بودجه، کاربر می‌داند باید نگران باشد یا نه.
عددها جمع می‌شوند، پس چیزی برای جا شدن ساخته نشده. درآمد $4,200 منهای $1,000 پس‌انداز میشود بودجه $3,200 و با $1,916 هزینه، $1,284 می‌ماند. درآمد و پس‌انداز به تب آمار رفتند.
قاعده برای استفاده دوباره: عددی را پیدا کنید که صفحه برایش باز میشود، آن را بزرگ‌ترین چیز صفحه کنید و زمینه‌اش را در یک خط زیرش بنویسید.
اصلاح 2: یک نوار تخت بهجای نمودار دایرهای
قبل
بعد
یک نمودار دایرهای بزرگ با هشت تکه رنگی با برچسب اجاره، غذا، تفریح، حمل‌ونقل، خرید، سلامت، قبض‌ها و اشتراک‌ها با راهنمای ریز و درصدها، در برابر یک نوار انباشته باریک به رنگ‌های نیلی، مرجانی، کهربایی و سبزآبی با انتهای کم‌رنگ، راهنمای دو در دو شامل اجاره $1,100، غذا $412، تفریح $186 و سایر $218 و سه ردیف بودجه با نوار باریک زیرشان.
نمودار دایرهای در بهترین حالت هم سخت خوانده میشود، چون آدم‌ها زاویه‌ها را بد مقایسه می‌کنند. هشت تکه آن را بدتر می‌کند. پنج تکه هرکدام چند درصد بیشتر نیستند، پس باریکه‌اند و راهنمایی که نامشان را می‌گوید 8 px است.
نوار از چپ به راست خوانده میشود، مثل نوار پیشرفت، که همه از قبل می‌فهمند. با مقیاس بودجه $3,200 کشیده شده، پس انتهای کم‌رنگ همان $1,284 باقیمانده است و صفحه یک عدد را دو بار و در دو شکل نشان می‌دهد. پنج دسته کوچک در «سایر» با $218 جمع می‌شوند و در بودجهها باز می‌شوند. تکه‌ها جمع می‌شوند: 1,100 + 412 + 186 + 84 + 62 + 30 + 22 + 20 میشود $1,916.
بودجهها درست زیر آن بهشکل ردیف‌های ساده‌اند: یک نام، «$412 از $600» و یک نوار 4 px. نوار به‌سمت یک سقف پر میشود، پس نشان می‌دهد کاربر چقدر به آن نزدیک است. نمودار دایرهای نمی‌تواند.
قاعده برای استفاده دوباره: وقتی اجزا یک کل را میسازند از یک نوار استفاده کنید و بخش‌های کوچک را در «سایر» جمع کنید.
اصلاح 3: چهار ردیف، نه یک جدول
قبل
بعد
عنوان تراکنش‌ها با دکمه‌های فیلتر همه، درآمد و هزینهها بالای جدولی پنج‌ستونه با تاریخ، فروشنده، دستهبندی، روش و مبلغ، ده ردیف متن 9 px و دکمه شناور بعلاوه مرجانی که آخرین مبلغ‌ها را می‌پوشاند، در برابر عنوان «اخیر» با «مشاهده همه» به رنگ مرجانی و چهار ردیف: M سبزآبی برای Marlow Market، R بنفش برای Reel House، A کهربایی برای Alder Studio با درآمد سبز و C سبز برای Cityline Transit.
جدول پنج‌ستونه با 9 px یک صفحه‌گسترده است. روی گوشی باید چشم را تنگ کرد و در امتداد ردیف افقی خواند و دکمه شناور بعلاوه روی ستون مبلغ‌ها نشسته، پس آخرین رقم‌ها پوشیده می‌شوند.
برای صفحه اصلی چهار ردیف کافی است. دایره 36 px با حرف فروشنده چیزی به چشم می‌دهد که به آن بچسبد، فروشنده 15 است، دستهبندی 13 و خاکستری و مبلغ سمت راست. درآمد تنها سبز فهرست است، پس حقوق بدون برچسب هم دیده میشود. تاریخ، روش پرداخت و فیلترها از «مشاهده همه» و از هر ردیف باز می‌شوند، پس چیزی از دست نمی‌رود.
قاعده برای استفاده دوباره: صفحه اصلی چند مورد اخیر را نشان می‌دهد، نه کل تاریخچه را. فیلترها را پشت «مشاهده همه» بگذارید.
اصلاح 4: ماه را عنوان کنید
قبل
بعد
یک ردیف سربرگ با آیکون منو، کلمه Penny به رنگ مرجانی، کلمه Dashboard، منوی کشویی نوامبر 2026، آیکون خروجی و زنگ با نقطه قرمز، در برابر لوگوتایپ کوچک Penny مرجانی بالای «نوامبر» با 28 پوینت ضخیم و یک شورون، زنگ با نقطه قرمز و یک بعلاوه مرجانی.
سربرگ پیش‌نویس شش چیز را با یک اندازه نگه داشته: منو، لوگوتایپ، برچسب «Dashboard» که هیچ نمی‌گوید، یک منوی کشویی، خروجی و یک زنگ. منوی کشویی کنترلی است که مردم واقعاً استفاده می‌کنند و کوچک‌ترین است.
اصلاح به صفحه عنوان می‌دهد و عنوان همان کنترل است. «نوامبر» با 28 ضخیم و یک شورون است، لوگوتایپ کوچک و در خط خودش است و بعلاوه از دکمه شناور به سربرگ، کنار زنگ، رفته. منو و برچسب Dashboard به تب پروفایل رفتند و خروجی به آمار.
قاعده برای استفاده دوباره: اگر کنترل اصلی یک فیلتر است، آن را عنوان کنید.
اصلاح‌های کوچک‌تر
- هر کارکرد می‌ماند. نمودار هفتگی، درآمد و پس‌انداز به آمار می‌روند. پنج دسته کوچک در «سایر» جمع می‌شوند و همراه با اهداف در بودجهها باز می‌شوند. فیلترها، تاریخ‌ها و روش پرداخت از «مشاهده همه» و از هر ردیف باز می‌شوند.
- حاشیه‌های یکسان. پیش‌نویس 14 px چپ و 12 px راست دارد. اصلاح هر دو را 20 می‌کند.
- بدون جعبه. اصلاح هیچ کارت، کاشی یا سایه‌ای ندارد. فاصله و تایپ چیزها را جدا می‌کنند.
- تب‌های کمتر. چهار تب در یک نوار تخت 78 px با خط مویی، بهجای پنج تب با آیکون‌های توپر و خطی مخلوط.
- مقیاس تایپ. متن از 13 تا 48 px است، در برابر 8 تا 13 px در پیش‌نویس.
- جا زیر محتوا. اصلاح 67 px بالای نوار تب تمام میشود، پس چیزی بریده یا پوشیده نمی‌شود. در پیش‌نویس یک بعلاوه شناور روی جدول نشسته.
صفحه بودجه خودتان را ممیزی کنید
| پرسش | چرا مهم است |
|---|---|
| آیا عددی که مردم برایش اپ را باز می‌کنند بزرگ‌ترین چیز صفحه است؟ | همه باید آن را با یک نگاه پیدا کنند |
| آیا می‌گوید عدد از چه چیزی است؟ | رقم بدون بودجه‌اش اطلاعات بی‌ارزش است |
| آیا اجزای نمودار یک کل میسازند که بشود با یک نوار نشان داد؟ | نوار سریعتر از زاویه‌ها خوانده میشود |
| آیا هر ردیف را از فاصله یک بازو میشود خواند؟ | 9 px یک صفحه‌گسترده است |
| آیا کنترل اصلی عنوان است؟ | پراستفاده‌ترین کنترل نباید کوچک‌ترین باشد |
| آیا یک دکمه شناور محتوا را می‌پوشاند؟ | رقم‌هایی را که رویشان نشسته پنهان می‌کند |
فایل Figma را بگیرید
فایل رایگان شامل پیش‌نویس تازه‌کار، صفحه اصلاح‌شده و هر بخش بهشکل کامپوننت است.
فایل رایگان Figma
بازطراحی صفحه ردیاب هزینه، قبل و بعد
هر دو صفحه و هر بخش بهشکل کامپوننت Figma. رایگان، فقط مشاهده، آن را در پیش‌نویس‌های خودتان کپی کنید.
سوالات متداول
صفحه اصلی یک ردیاب هزینه چگونه باید طراحی شود؟
با مانده برای خرج شروع کنید، بزرگ، با بودجه و روزهای باقیمانده در یک خط زیرش. بعد یک نوار تخت برای اینکه پول کجا رفت، چند ردیف ساده بودجه و چهار تراکنش اخیر، و بقیه پشت «مشاهده همه».
برای دستهبندی هزینهها نمودار دایرهای بهتر است یا نوار؟
نوار انباشته تخت، وقتی اجزا یک کل میسازند. مردم طول را سریعتر از زاویه میخوانند و دستههای کوچک بهجای یک باریکه، بهشکل یک بخش نوار دیده میمانند. کوچکترینها را در «سایر» جمع کنید.
نمودار بودجه چند دسته باید نشان دهد؟
سه یا چهار. در این صفحه پنج دسته کوچک در «سایر» با $218 جمع می‌شوند و در بودجهها باز می‌شوند، پس نوار خوانا می‌ماند.
عدد اصلی در یک اپ مالی چقدر بزرگ باشد؟
آنقدر بزرگ که اولین چیزی باشد که دیده میشود. اینجا مانده 48 px ضخیم است، در برابر 28 px برای عنوان ماه و 15 px برای ردیفها.
صفحه اصلی چند تراکنش باید نشان دهد؟
چهار تا پنج ردیف، با 13 تا 15 px، و یک پیوند «مشاهده همه» برای فهرست کامل، فیلترها و روش پرداخت.
نوار تب یک اپ بودجه چه چیزهایی باید داشته باشد؟
چهار تب کافی است: خانه، آمار، بودجهها و پروفایل. اهداف داخل بودجهها قرار میگیرند.
منابع
- هر دو صفحه از خودمان است و در Figma طراحی و اندازه‌گیری شده. اپ Penny، فروشنده‌ها و مبلغ‌هایش ساختگی‌اند. رقم‌ها در هر دو صفحه سازگارند: درآمد $4,200 منهای پس‌انداز $1,000 میشود بودجه $3,200، هزینه $1,916 باعث میشود $1,284 بماند و 12 روز باقیمانده یعنی 18 نوامبر، تاریخ جدیدترین تراکنش.
- الگوی بررسی‌شده: Copilot Money و Monarch، با یک عدد مانده برای خرج، یک نوار برای دسته‌ها، ردیف‌های ساده و نوار تب تخت.
- آیکون‌ها از Phosphor (MIT) هستند. هیچ عکسی استفاده نشده.
- ابتدا بهشکل کاروسل در 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
