طراحی اپ ناوبری: بازطراحی صفحه رانندگی، قبل و بعد
یک صفحه ناوبری رانندگی با هفده کنترل و یک دستور ۱۱ پیکسلی، و همان صفحه اصلاح‌شده: یک کارت بزرگ پیچ، دو دکمه روی نقشه، تابلوی محدودیت سرعت که با یک نگاه خوانده می‌شود و یک نوار سفر با یک دکمه قرمز پایان. تک‌تک تغییرها کنار هم، همراه با فایل رایگان Figma.
صفحه رانندگی یک قانون دارد: راننده برای هر نگاه حدود یک ثانیه وقت دارد و پیچ بعدی باید در همان یک ثانیه خوانده شود. پیش‌نویس اول زیر، پیچ را در یک جمله ۱۱ پیکسلی توی یک نوار سبز می‌گذارد، بعد دور جاده را با هفده کنترل، یک تبلیغ و چهار پین نقشه پر می‌کند. هر قابلیتی که یک راننده بخواهد در آن هست و هیچ‌کدامش با سرعت خوانده نمی‌شود.
نسخه اصلاح‌شده همه کارکردها را نگه می‌دارد. پیچ بعدی را بزرگ‌ترین چیز صفحه می‌کند و هر چیزی را که به یک دقیقه بعد مربوط نیست از روی جاده کنار می‌زند.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاح‌شده
سمت چپ، دستور یک جمله است. راننده باید «In 400 ft turn right onto 16th St, then continue for 0.2 mi and turn left onto Mission St» را با اندازه ۱۱ پیکسل بخواند، آن هم وقتی ماشین در حرکت است. مسیر خطی باریک ۴ پیکسلی است، ماشین یک نقطه ۱۳ پیکسلی است، و یک تبلیغ قهوه و چهار پین برای جلب توجه با جاده رقابت می‌کنند. نوار تب هم پایین صفحه را میگیرد، با اینکه هیچکس هنگام رانندگی تب عوض نمیکند.
سمت راست، صفحه سه بلوک دارد: پیچ در بالا، جاده در وسط و سفر در پایین. مسیر آنقدر پهن است که دنبال شود، ماشین یک مهره واضح است و نقشه فقط جاده را نشان می‌دهد.
چه چیزی تغییر کرد، اندازه‌گیری‌شده
| پیش‌نویس تازه‌کار | اصلاح‌شده | |
|---|---|---|
| پیچ بعدی | یک جمله ۱۱ پیکسلی در نوار سبز | کارتی با فلش ۵۲ پوینتی، فاصله ۲۸ پوینتی و خیابان ۱۷ پوینتی |
| پیچ بعد از آن | داخل همان جمله | یک چیپ کوچک «Then» چسبیده زیر کارت |
| مسیر | خط ۴ پیکسلی، نقطه ۱۳ پیکسلی برای ماشین | مسیر آبی ۹ پیکسلی روی حاشیه سفید ۱۴ پیکسلی، مهره ۳۲ پوینتی |
| دکمه‌های نقشه | پنج دکمه ۳۸ پیکسلی، گرد و مربع قاطی، به‌علاوه یک ستون زوم | دو دایره سفید ۴۰ پوینتی: بازگشت به موقعیت و صدا |
| سرعت | جعبه محدودیت ۳۶ پیکسلی و دایره سرعت ۳۶ پیکسلی | تابلوی محدودیت ۴۸ در ۶۰ پوینت کنار «23» ۳۲ پوینتی |
| نوار سفر | خط ۱۰ پیکسلی و پنج دکمه ۳۰ پیکسلی با حروف بزرگ ۹ پیکسلی | «18 min» ۲۴ پوینتی به رنگ سبز، مسافت و زمان رسیدن، یک End قرمز |
| تب‌ها | پنج تا، با آیکن‌های توپر و توخالی قاطی | هیچ‌کدام هنگام رانندگی |
| کنترل‌های روی صفحه | هفده | چهار |
اصلاح ۱: جمله را به یک دستور بزرگ تبدیل کنید
قبل
بعد
یک نوار سبز باریک با یک خط متن ریز که دو پیچ را نام می‌برد، در برابر یک کارت سبز با فلش بزرگ پیچ، «400 ft» و «16th St»، و یک چیپ کوچک «Then» با فلش چپ که زیر لبه چپ کارت چسبیده است.
راننده سه واقعیت لازم دارد: به کدام سمت، چقدر دورتر و کجا. جمله این‌ها را در خودش دارد، اما به ترتیبی که آدم‌ها حرف می‌زنند، پس چشم باید از چپ به راست بخواند تا مهم‌ترین را پیدا کند. پیچ دوم ته جمله دفن شده و آخر خوانده می‌شود یا اصلاً خوانده نمی‌شود.
اصلاح، به هر واقعیت اندازه خودش را می‌دهد. فلش می‌گوید به کدام سمت، 400 ft می‌گوید چقدر دورتر، و نام خیابان با اندازه کوچک‌تر زیر آن می‌نشیند چون بخشی است که با تابلوی خیابان تطبیق می‌دهید. پیچ دوم یک چیپ کوچک چسبیده به کارت می‌شود، پس «و بعد از آن» خوانده می‌شود و نه دستور دومی با وزن برابر.
قاعده برای استفاده دوباره: وقتی آدم یک ثانیه وقت دارد، جمله را به یک شکل و یک عدد تبدیل کنید.
اصلاح ۲: دو دکمه روی نقشه نگه دارید
قبل
بعد
نقشه‌ای با پنج دکمه در لبه راست (لایه‌ها، ماشین، قطب‌نما، پرچم و صدا، بعضی گرد و بعضی مربع)، یک ستون زوم در چپ، یک تبلیغ قهوه و چهار پین، در برابر یک نقشه تمیز با فقط دو دکمه گرد سفید پایین سمت راست: بازگشت به موقعیت و صدا.
هر دکمه روی جاده چیزی است که راننده ممکن است وسوسه شود در حال حرکت بزند. پیش‌نویس پنج دکمه در راست دارد، دو دکمه زوم در چپ، و ترکیبی از شکل‌های گرد و مربع که هرکدام را شبیه نوع متفاوتی از چیز می‌کند. تبلیغ و چهار پین هدف‌های بیشتر و رنگ بیشتری روی مسیر اضافه می‌کنند.
اصلاح، دو دکمه‌ای را نگه می‌دارد که راننده وسط سفر استفاده می‌کند: بازگشت به موقعیت، وقتی نقشه کشیده شده، و صدا. زوم با دو انگشت است. دکمه‌های لایه‌ها، ترافیک، قطب‌نما و گزارش پشت یک فلش در نوار سفر می‌روند، پس چیزی حذف نشد، به جایی منتقل شد که مسافر یا ماشین پارک‌شده بتواند به آن برسد. تبلیغ و پین‌ها از جاده رفتند، چون مسیر تنها چیزی است که باید رنگی باشد.
قاعده برای استفاده دوباره: هرچه چیزهای کمتری در حال حرکت قابل لمس باشند، لمس‌های کمتری اتفاق می‌افتد.
اصلاح ۳: محدودیت سرعت را به شکل تابلو بکشید
قبل
بعد
یک جعبه کوچک با نوشته LIMIT 25 و یک دایره تیره با 23 mph که روی لبه چپ نقشه روی هم چیده شده‌اند، در برابر یک چیپ سفید با تابلوی محدودیت سرعت شامل SPEED LIMIT و عدد بزرگ 25، کنار یک 23 بزرگ و یک mph کوچک.
رانندگان از قبل می‌دانند تابلوی محدودیت سرعت چه شکلی است: سفید، حاشیه مشکی، کلمات SPEED LIMIT، یک عدد بزرگ. پیش‌نویس از یک جعبه ریز و یک دایره تیره استفاده می‌کند که شبیه هیچ چیزی که راننده دیده نیست، و آن‌ها را بالای هم می‌گذارد تا مجبور شوند مقایسه کنند.
اصلاح، تابلوی واقعی را با اندازه ۴۸ در ۶۰ پوینت می‌کشد، با حاشیه ۲ پیکسلی و عدد ۲۶ پوینتی، و سرعت فعلی را درست کنارش با ۳۲ پوینت می‌گذارد. کنار هم، دو عدد به یک سؤال جواب می‌دهند: آیا بیش از حد مجازم؟ این یک نگاه می‌خواهد، بدون خواندن.
قاعده برای استفاده دوباره: وقتی یک شیء واقعی خودش معنا را حمل می‌کند، همان شیء واقعی را بکشید.
اصلاح ۴: سفر را به چیزی که چک می‌کنید برسانید
قبل
بعد
یک خط ۱۰ پیکسلی با متن 18 min (4.2 mi)، Arrive 9:59 AM، Fastest route، Light traffic، بالای پنج دکمه هم‌اندازه: Exit، Steps، Share، Search و Add Stop، در برابر یک شیت سفید با 18 min با حروف درشت سبز، 4.2 mi و 9:59 AM زیر آن، یک دکمه قرمز End و یک فلش.
در طول سفر راننده سه چیز را چک می‌کند: چقدر مانده، چقدر راه، و کی می‌رسم. پیش‌نویس این‌ها را در یک خط ۱۰ پیکسلی با دو واقعیت دیگر می‌گذارد، بعد پنج دکمه هم‌اندازه با حروف بزرگ ۹ پیکسلی اضافه می‌کند، پس «Exit» که سفر را تمام می‌کند شبیه «Share» به نظر می‌رسد.
اصلاح، زمان باقی‌مانده را با ۲۴ پوینت و به رنگ سبز می‌گذارد، مسافت و زمان رسیدن را زیرش، و یک قرص قرمز End. قرمز چون پایان دادن به سفر تنها کنشی است که هزینه دارد. Steps، Share، Search و Add Stop پشت فلش می‌روند، یک لمس دورتر برای مسافر.
قاعده برای استفاده دوباره: به عددی که مردم بیشتر از همه چک می‌کنند بیشترین جا را بدهید، و به تنها کنش پرهزینه تنها رنگ هشدار را.
اصلاح‌های کوچک‌تر
- یک نقشه دوم. صفحه اصلاح‌شده نقشه خودش را دارد، پهن‌تر بریده شده و با ماشین پایین صفحه، پس مسیر از ماشین به بالا و دور می‌رود و جاده پیش رو را نشان می‌دهد نه جاده‌ای که تازه رفته‌اید.
- یک حاشیه تمیز. مسیر یک حاشیه سفید ۱۴ پیکسلی زیر خط آبی ۹ پیکسلی دارد، پس هم روی جاده‌های زرد و هم روی بلوک‌های خاکستری خوانا می‌ماند.
- بدون نوار تب. پنج تب از نمای رانندگی برداشته شد. Drive، Explore، Saved، Trips و Profile برای وقتی هستند که ماشین پارک است.
- یک شکل برای دکمه‌ها. فقط دایره، ۴۰ پوینت، تا هدف‌ها شبیه هدف باشند.
صفحه رانندگی خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا پیچ بعدی در یک ثانیه خوانده می‌شود؟ | جمله خوانده می‌شود، شکل و عدد دیده می‌شوند |
| در حال حرکت چند چیز قابل لمس است؟ | هرکدام فرصتی برای یک لمس اشتباه است |
| آیا محدودیت سرعت به شکل تابلو کشیده شده؟ | رانندگان بدون خواندن آن را رمزگشایی می‌کنند |
| آیا مسیر از جاده‌ها متمایز است؟ | خط باریک در نقشه شلوغ گم می‌شود |
| آیا دکمه پرهزینه تنها دکمه قرمز است؟ | رنگ هشدار فقط یک بار کار می‌کند |
| آیا چیزی روی نقشه هست که به یک دقیقه بعد مربوط نباشد؟ | تبلیغ و پین به صفحه پارک تعلق دارند |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را دارد، با هر بخش اصلاح‌شده به شکل یک کامپوننت.
فایل رایگان Figma
بازطراحی ناوبری رانندگی، قبل و بعد
هر دو صفحه و هر بخش به شکل کامپوننت Figma. رایگان، فقط مشاهده، آن را در پیش‌نویس‌های خودتان کپی کنید.
سؤالات متداول
یک صفحه اپ ناوبری هنگام رانندگی باید چه چیزی نشان دهد؟
پیچ بعدی، فاصله تا آن، نام خیابان، سرعت فعلی و محدودیت سرعت، زمان باقی‌مانده و یک راه برای پایان دادن به سفر. بقیه چیزها می‌توانند پشت یک لمس باشند.
دستور پیچ در یک اپ رانندگی چقدر باید بزرگ باشد؟
آنقدر بزرگ که با یک نگاه خوانده شود: در این بازطراحی فلش ۵۲ پوینت و فاصله ۲۸ پوینت است. جمله یکخطی با ۱۱ پیکسل باید خوانده شود، و راننده وقت خواندن ندارد.
یک صفحه نقشه هنگام رانندگی چند دکمه باید داشته باشد؟
دو تا کافی است: بازگشت به موقعیت و صدا. زوم با دو انگشت است، و لایه‌ها، ترافیک و گزارش می‌توانند پشت یک فلش برای مسافر یا ماشین پارک‌شده باشند.
محدودیت سرعت در یک اپ چطور باید نشان داده شود؟
به شکل تابلویی که رانندگان از قبل میشناسند، با حاشیه، کلمات SPEED LIMIT و یک عدد بزرگ، کنار سرعت فعلی تا هر دو با یک نگاه مقایسه شوند.
چرا نوار تب را از صفحه ناوبری حذف کنیم؟
هیچکس هنگام رانندگی تب عوض نمیکند و نوار، جا و توجه را از جاده میگیرد. وقتی سفر تمام شد برمیگردد.
دکمه پایان سفر چه رنگی باید باشد؟
قرمز، و باید تنها قرمز روی صفحه باشد. پایان دادن به سفر تنها کنشی است که هزینه دارد، پس تنها رنگ هشدار را میگیرد.
منابع
- هر دو صفحه ساخت خودمان هستند، در Figma طراحی و اندازه‌گیری شده‌اند. اپ Waymark ساختگی است، و 23 mph، محدودیت 25، 18 min، 4.2 mi و 9:59 AM نمونه‌ای هستند و در هر دو طرف یکسان.
- مسیر از خیابان‌های واقعی محله Mission سان‌فرانسیسکو می‌گذرد: Valencia St، 16th St و Mission St. داده نقشه: OpenStreetMap contributors.
- آیکن‌ها: Phosphor Icons (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
