طراحی اپ املاک: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپ املاک که از شما می‌خواهد همه‌چیز را یک‌جا بخوانید، و همان صفحه پس از اصلاح. تک‌تک تغییرات کنار هم، دلیل هر کدام، و فایل رایگان Figma.
صفحه اصلی یک اپ املاک یک کار دارد: کاربر را از «دارم دنبال خانه می‌گردم» به آگهی‌ای برساند که بخواهد بازش کند. پیش‌نویس اول زیر هیچ چیز را خراب نمی‌کند. همه قابلیت‌ها کار می‌کنند. فقط از خواننده می‌خواهد همه‌چیز را یک‌جا ببیند: یک فیلد جستجو، پنج دستهبندی گرد، چهار دکمه متفاوت، یک بنر و یک کارت با نه جزئیات ریز.
نسخه اصلاح‌شده همه قابلیت‌ها را نگه می‌دارد و فقط ترتیب، اندازه و تعداد سبک‌ها را عوض می‌کند.
کل صفحه، قبل و بعد
پیش‌نویس مبتدی
اصلاح‌شده
در سمت چپ، چشم با یک فیلد جستجو، پنج دایره دستهبندی، چهار کنترل در سه سبک مختلف، یک بنر آبی تمام‌عرض، یک ستاره، یک فلش، دو دکمه روی هم روی هر عکس و یک دکمه شناور نقشه روبه‌رو می‌شود که روی جزئیات آگهی نشسته است. هیچ‌کدام به‌تنهایی اشتباه نیست. اما کنار هم، چیزی به‌عنوان «اولین چیزی که باید خواند» وجود ندارد.
در سمت راست، صفحه از بالا به پایین خوانده می‌شود: شما کی هستید، چه چیزی جستجو کنید، اجاره یا خرید، چه نوع خانه‌ای، و بعد یک آگهی بزرگ. بنر هنوز هست، اما پایین‌تر و کوچک‌تر منتظر می‌ماند، جایی که نمی‌تواند با جستجو رقابت کند.
| پیش‌نویس مبتدی | اصلاح‌شده | |
|---|---|---|
| حاشیه‌های کناری | ۱۲ چپ، ۱۶ راست | ۲۰ در همه ردیف‌ها |
| اندازه متن | ۹ تا ۱۵ px | ۱۱ تا ۲۲ pt، مقیاس تایپ iOS |
| فاصله‌گذاری | مقادیر درهم | 4، 8، 12، 16 |
| سبک کنترل‌ها بالای آگهی‌ها | ۴ (پر، ساده، خط‌دار، متنی) | ۲ (دکمه فیلتر و segmented control) |
| بنر تبلیغاتی | ۱۰۷ px ارتفاع، بالای آگهی‌ها | ۶۸ px ارتفاع، پایین آن‌ها |
| تب‌ها | ۵ تا، آیکون‌های پر و خطی مخلوط | ۴ تا، همه خطی، تب فعال به آبی برند |
اصلاح ۱: یک ردیف جستجو، یک کنترل اجاره یا خرید
قبل
بعد
یک فیلد جستجوی خط‌دار با میکروفون، پنج آیکون دستهبندی گرد، بعد یک دکمه پر اجاره، کلمه ساده خرید، یک دکمه خط‌دار مرتب‌سازی و یک لینک فیلتر. در برابر یک فیلد جستجوی خاکستری با یک دکمه فیلتر آبی، و اجاره و خرید به‌شکل دو نیمه یک segmented control.
پیش‌نویس چهار کنترل را در یک ردیف می‌گذارد و به هر کدام ظاهری متفاوت می‌دهد: اجاره دکمه پر است، خرید متن ساده، مرتب‌سازی خط‌دار و فیلتر یک لینک ساده با آیکون. خواننده باید پیش از استفاده از هر کدام بفهمد کدام دکمه است، کدام تب و کدام سوئیچ.
اصلاح، به هر کار یک شکل می‌دهد. جستجو و فیلتر در یک ردیف‌اند، چون فیلتر کردن بخشی از جستجو کردن است. اجاره یا خرید انتخاب بین دقیقاً دو چیز است، و این همان کاری است که segmented control برایش ساخته شده: هر دو گزینه دیده می‌شوند و گزینه انتخابشده واضح روشن است. مرتب‌سازی کنار می‌رود، چون فقط وقتی نتیجه‌ای هست اهمیت پیدا می‌کند.
قاعده برای استفاده مجدد: اگر دو کنترل یک نوع کار را انجام می‌دهند، باید شبیه هم باشند. اگر کارهای متفاوتی می‌کنند، نباید شبیه باشند.
اصلاح ۲: دسته‌بندی‌هایی که انتخاب را نشان می‌دهند
قبل
بعد
پنج دایره نازک خط‌دار با یک برچسب کوچک زیر هر کدام، که فقط برچسب آبی می‌گوید آپارتمان انتخاب شده است. در برابر چیپ‌های پر با آیکون و یک کلمه در یک خط، که آپارتمان‌ها آبی تو‌پر است و چیپ‌های بعدی از لبه بیرون می‌زنند.
در پیش‌نویس، تنها نشانه انتخابشده بودن یک گزینه، برچسب آبی با متن کوچک زیر یک دایره است. خود دایره‌ها یکسان به نظر میرسند، پس چشم باید برچسب‌ها را یکی‌یکی بخواند تا گزینه فعال را پیدا کند.
چیپی با رنگ پر، پاسخ را پیش از پرسیده شدن سؤال می‌دهد. حالت انتخابشده رنگ و وزن متفاوتی دارد، نه یک تفاوت ریز در متن. چیپ‌ها همچنین پهن‌تر از ارتفاع‌شان هستند، پس آیکون و کلمه در یک خط می‌نشینند و کل ردیف ارتفاع کمتری می‌گیرد. چیپی که از لبه راست بریده شده نشان می‌دهد ردیف اسکرول می‌شود، بدون نیاز به هیچ فلشی.
اصلاح ۳: کارت آگهی که به ترتیب خوانده می‌شود
قبل
بعد
آگهی‌های ویژه با یک ستاره و یک فلش، یک عکس با نشان «یک‌ساله» و دکمه‌های بعلاوه و قلب، قیمت آبی ۲٬۴۰۰ دلار در ماه، قرص‌های فروش و اجاره، یک آدرس، و جزئیات اتاقخواب و حمام که زیر دکمه شناور نقشه بریده شده است. در برابر یک عکس بزرگ با گوشه‌های گرد و یک قلب، بعد ۲٬۴۰۰ دلار در ماه، آپارتمان ۲ خوابه، آلفاما، لیسبون و ۲ خواب، ۲ حمام، ۹۸۰ فوت مربع.
کسی که به یک خانه نگاه می‌کند چهار سؤال را با همین ترتیب می‌پرسد: چقدر، چیست، کجاست و چقدر بزرگ است. اصلاح، کارت را به همین ترتیب می‌چیند، یک پاسخ در هر خط. قیمت بزرگ‌ترین متن است، بعد نوع خانه، بعد خط‌های کم‌رنگ‌تر برای مکان و جزئیات.
پیش‌نویس پاسخ‌ها را قاطی می‌کند. قیمت یک خط را با دو قرص «فروش» و «اجاره» شریک می‌شود، برای خانه‌ای که فقط اجاره‌ای است. آدرس بالای جزئیات و زیر قیمت و با رنگی متفاوت آمده. جزئیات متن کوچک ۹ پوینتی است و آخرینش زیر دکمه نقشه پنهان شده، پس خواننده متراژ را از دست می‌دهد، عددی که اغلب مردم مقایسه می‌کنند.
از روی عکس هم حذف شد: نشان «یک‌ساله» و دکمه بعلاوه. دو دکمه شناور روی هر تصویر تصمیم‌هایی می‌خواهند که خواننده هنوز نگرفته. یک قلب کافی است و عکس بزرگ‌تر است، چون عکس است که خانه را می‌فروشد.
قاعده برای استفاده مجدد: کارت یک جمله است. ترتیب کلمات را مشخص کنید، بعد به هر کلمه یک سبک بدهید.
اصلاح ۴: چهار تب با یک سبک آیکون
قبل
بعد
خانه، املاک من، پیامها، علاقهمندیها و بیشتر، با آیکون‌های پر و خطی مخلوط. در برابر خانه، ذخیرهشدهها، پیامها و پروفایل، همه با آیکون خطی، و فقط خانه آبی.
پیش‌نویس پنج تب دارد و سه‌تای آن‌ها شبیه هم‌اند: املاک من، علاقهمندیها و بیشتر، همه مثل جاهایی به نظر میرسند که ممکن است خانه ذخیره‌شده یا متعلق به شما در آن باشد. آیکون‌هایش هم شکل‌های پر (خانه، پیامها) را با خطی (ساختمان، قلب) قاطی می‌کند، پس تشخیص تب فعال از تبی که فقط سنگین‌تر کشیده شده سخت است.
اصلاح چهار تب با یک سبک آیکون به کار می‌برد، پس تنها تفاوت بین تب‌ها این است که کدام فعال است. «علاقهمندیها» می‌شود «ذخیرهشدهها»، کلمه‌ای کوتاه‌تر که با قلب روی کارت جور است. «بیشتر» می‌شود «پروفایل»، نامی که می‌گوید پشتش چیست. رهنمودهای Apple نوار تب را ناوبری بین بخش‌های سطح بالا توصیف می‌کنند، پس مقصدی که در واقع منویی از باقی‌مانده‌هاست جایی در آن ندارد.
اصلاح‌های کوچک‌تر
- هدری که آدمی در آن هست. اصلاح یک سلام، یک آواتار با حروف اول نام در دایره آبی تو‌پر و یک زنگ با نقطه قرمز اضافه می‌کند. پیش‌نویس هدر ندارد، پس هیچ چیز نمی‌گوید این اپ مال کیست.
- یک حاشیه. پیش‌نویس ۱۲ در چپ و ۱۶ در راست به کار می‌برد، پس هیچ چیز با لبه صفحه هم‌تراز نیست. اصلاح ۲۰ را در دو طرف هر ردیف به کار می‌برد.
- یک مقیاس فاصله. فاصله‌ها 4، 8، 12 یا 16 هستند. وقتی همه فاصله‌ها از یک فهرست کوتاه می‌آیند، ردیف‌ها بدون هیچ خط جداکننده‌ای به هم مرتبط دیده می‌شوند.
- مقیاس متن از خود پلتفرم. متن پیش‌نویس از ۹ تا ۱۵ px بدون هیچ الگویی می‌رود. اصلاح از اندازه‌های iOS از ۱۱ تا ۲۲ pt استفاده می‌کند، اندازه‌هایی که مردم می‌توانند بخوانند.
- بنری آرام‌تر. «خانه‌ات را رایگان آگهی کن» کلمه تأکیدی ایتالیک، طرح خانه و دکمه دوم داخلش را از دست داد. حالا یک ردیف با یک فلش است.
اپ املاک خودتان را بازرسی کنید
| سؤال | چرا مهم است |
|---|---|
| می‌توانید بگویید بالای صفحه از شما می‌خواهد چه یک کاری انجام دهید؟ | بدون اولین چیز برای خواندن، همه‌چیز با یک سرعت خوانده می‌شود |
| آیا دو کنترلی که یک کار را می‌کنند شبیه هم‌اند؟ | سبک‌های مخلوط مردم را وادار می‌کند حدس بزنند چه چیزی دکمه است |
| آیا دستهبندی انتخابشده از آن سر اتاق هم پیداست؟ | حالت انتخابشده نباید نیاز به خواندن داشته باشد |
| آیا هر کارت آگهی به ترتیب قیمت، خانه، مکان، جزئیات پاسخ می‌دهد؟ | مردم سؤال‌ها را با همین ترتیب می‌پرسند |
| آیا جزئیاتی زیر یک دکمه شناور پنهان شده؟ | متراژ عددی است که مردم مقایسه می‌کنند |
| آیا دو تب به نظر می‌رسد به یک جا می‌روند؟ | درهای تکراری باعث می‌شود مردم مطمئن نباشند کجا بروند |
| آیا هر ردیف از یک حاشیه چپ و راست استفاده می‌کند؟ | هم‌ترازی ارزان‌ترین راه برای تمام‌شده به نظر رسیدن است |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه، هر بخش از صفحه اصلاح‌شده بهصورت کامپوننت، متغیرهای رنگ، سبک‌های متن iOS و یک راهنما با منبع عکس‌ها را دارد.
فایل رایگان Figma
صفحه اصلی اپ املاک، قبل و بعد
هر دو صفحه و هر بخش اصلاح‌شده بهصورت کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش آن را در پیش‌نویس‌های خودتان کپی کنید.
سؤالات متداول
صفحه اصلی اپ املاک باید اول چه چیزی نشان دهد؟
یک فیلد جستجو با یک دکمه فیلتر، بعد اجاره یا خرید و نوع ملک. آگهی‌ها را درست زیر آن بگذارید و بنر و پیشنهادهای فرعی را بعد از آن‌ها.
اجاره و خرید در اپ ملکی چطور نشان داده شوند؟
بهصورت segmented control با دو نیمه، تا هر دو گزینه همیشه دیده شوند و گزینه انتخابشده واضح برجسته باشد. چهار سبک دکمه متفاوت در یک ردیف مردم را به حدس زدن وامیدارد.
کارت آگهی ملک باید چه چیزهایی داشته باشد؟
اول قیمت، بعد نوع خانه، مکان و جزئیات کلیدی مثل اتاقخواب، حمام و متراژ. یک دکمه علاقهمندی روی عکس کافی است.
یک اپ املاک چند تب باید داشته باشد؟
چهار تعداد خوبی است: خانه، ذخیرهشدهها، پیامها و پروفایل. از دو تبی که شبیه یک مکان به نظر میرسند، مثل علاقهمندیها و املاک من، دوری کنید.
چطور نشان دهیم کدام دستهبندی انتخاب شده؟
چیپ انتخابشده را با رنگ برند پر کنید و بقیه را خنثی نگه دارید. تغییر کوچک رنگ متن زیر یک دایره بهراحتی از چشم میافتد.
منابع
- هر دو صفحه از خودمان است، در Figma طراحی و اندازه‌گیری شده.
- عکس‌ها از Unsplash به‌نام Luke van Zyl، A. L. Brown و Annie Spratt، تحت مجوز Unsplash.
- Apple Human Interface Guidelines: Tab bars.
- 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
