طراحی اپلیکیشن یادگیری زبان: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپ یادگیری زبان که آمارش را در یک جمله ۹ پیکسلی می‌نویسد و یک واحد درسی را به شکل دوازده ردیف هم‌اندازه فهرست میکند، و همان صفحه اصلاحشده: شمارنده‌های ساده، یک بنر یکدست برای واحد، یک جاده از گره‌ها و فقط یک حباب شروع. تک‌تک تغییرها کنار هم، همراه با فایل رایگان Figma.
یک اپ زبان در صفحه اصلی‌اش فقط یک کار دارد: یادگیرنده را به درس امروز برساند. پیش‌نویس اول زیر هر چیزی را که یادگیرنده لازم دارد دارد، اما مثل کارنامه مدرسه خوانده می‌شود. آمار یک جمله خاکستری است، واحد درسی دوازده ردیف هم‌اندازه با درصد است، یک بنر پرسروصدا اشتراک می‌فروشد و قدم بعدی یک دکمه کوچک CONTINUE پایین صفحه است.
اصلاح، همه کارکردها را نگه می‌دارد و فقط ظاهر و جای آن‌ها را عوض میکند. آمار به چهار شمارنده ساده تبدیل می‌شود، واحد درسی یک بنر یکدست می‌شود، فهرست به یک جاده از گره‌ها تبدیل می‌شود و یک حباب می‌گوید Start.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاحشده
سمت چپ، همه چیز وزن یکسانی دارد. خط آمار ۹ پیکسلی، بنر زرد پرسروصدا، دوازده ردیف و دکمه CONTINUE همگی هم‌زمان توجه می‌خواهند و هیچ‌کدام نمی‌گوید «اول به من بزن».
سمت راست، صفحه از بالا به پایین به همان ترتیبی که یادگیرنده فکر میکند خوانده می‌شود: وضعم چطور است، این کدام واحد است، در آن کجا هستم، به چه چیزی ضربه بزنم. یک جاده هست، یک حباب و یک اقدام.
چه چیزی تغییر کرد، با اندازه‌گیری
| پیش‌نویس تازه‌کار | اصلاحشده | |
|---|---|---|
| آمار | یک جمله، ۹ پیکسل | پرچم، استریک، جواهر، قلب با فونت ضخیم ۱۶ پیکسل، یک برچسب کوچک PLUS |
| واحد | یک خط متن، «Unit 3 Ordering Food»، و لینک Guide | بنر بنفش ۳۵۰ در ۷۶، عنوان ۲۰ پیکسل، لبه پایین ۴ پیکسل تیرهتر |
| درسها | دوازده ردیف ۴۲ پیکسلی، نام ۱۱ پیکسل، XP و درصد ۹ پیکسل | جاده‌ای از گرههای ۶۴ پیکسلی، فقط یک نام نمایش داده می‌شود |
| قدم بعدی | یک CONTINUE ۹۱ در ۳۰ با حروف بزرگ پایین صفحه | یک حباب Start روی گره فعلی |
| حاشیه‌ها | ۱۴ چپ، ۱۲ راست | ۲۰ از هر دو طرف |
| تب‌ها | پنج تا، آیکون‌های پر و خطی مخلوط | چهار تا، فقط آیکون، یک سبک |
اصلاح اول: آمار را در یک خط ساده نگه دارید
قبل
بعد
سربرگ پیش‌نویس: Hola My Course با Spanish course، زیر آن استریک ۴۱ روزه و یک منوی کشویی اسپانیایی، سپس یک نوار خاکستری با متن Level A2 62.5%، XP 1240، Hearts 4/5، Gems 320، League Silver، و بعد یک بنر زرد با GO PLUS NOW و ۵۰٪ تخفیف ماه اول و دکمه UPGRADE. در برابر یک ردیف: پرچم اسپانیا، شعله با ۴۱، جواهر با ۳۲۰، قلب با ۴ و یک برچسب کوچک زرد PLUS.
پیش‌نویس آمارش را به شکل جمله می‌نویسد: «Level A2 62.5% | XP 1240 | Hearts 4/5 | Gems 320 | League Silver». ۹ پیکسل است، خاکستری است و باید مثل متن خوانده شود. یادگیرنده‌ای که هر روز اپ را باز میکند نمی‌خواهد اعداد خودش را بخواند، می‌خواهد نگاهشان کند.
اصلاح به هر عدد یک آیکون و یک رنگ میدهد: شعله برای استریک ۴۱ روزه، جواهر برای ۳۲۰، قلب برای ۴. همه در یک ردیف با فونت ضخیم ۱۶ پیکسل‌اند، پس چشم یک‌جا همه را برمی‌دارد. منوی کشویی اسپانیایی به پرچم تبدیل می‌شود که فهرست زبان‌ها را باز میکند. بنر «GO PLUS NOW!!!» با ۵۰٪ تخفیف و دکمه UPGRADE به یک برچسب کوچک PLUS در انتهای ردیف کوچک می‌شود و پیشنهاد از همان باز می‌شود.
سطح، XP و League Silver به تب Profile رفتند. مهم‌اند، اما نه هر بار که اپ باز می‌شود.
قاعده برای استفاده مجدد: اعدادی را که یادگیرنده هر روز چک میکند به شکل آیکون نشان بدهید و بقیه را یک ضربه دورتر ببرید.
اصلاح دوم: به واحد یک بنر یکدست بدهید
قبل
بعد
یک خط متن با Unit 3 به صورت ضخیم و Ordering Food به صورت خاکستری، با لینک خط‌دار Guide در سمت راست. در برابر یک بنر بنفش یکدست با SECTION 1, UNIT 3 با حروف کوچک بزرگ‌نما، Ordering Food با فونت سفید ۲۰ پیکسل، یک جداکننده بسیار نازک و آیکون کتاب، با لبه تیرهتر در پایین.
در پیش‌نویس، واحد فقط یک برچسب است. «Unit 3» و «Ordering Food» با یک لینک متنی در یک خط نشسته‌اند و هیچ چیز نمی‌گوید که این همان سرتیتری است که همه چیز زیرش به آن تعلق دارد.
اصلاح آن را به بنر تبدیل میکند: ۳۵۰ در ۷۶، شعاع ۱۲، بنفش برند، عنوان ۲۰ پیکسلی و لبه پایین ۴ پیکسل تیرهتر که آن را قابل فشردن نشان میدهد. این تنها بلوک بزرگ رنگی صفحه است، پس یادگیرنده بدون خواندن می‌فهمد در کدام واحد است. لینک Guide به آیکون کتاب در سمت راست، پشت یک جداکننده بسیار نازک، تبدیل شده و هنوز یک ضربه فاصله دارد.
قاعده برای استفاده مجدد: وقتی صفحه‌ای سرتیتری دارد که همه چیز زیرش به آن تعلق دارد، به آن یک بلوک رنگی بدهید، نه یک خط متن.
اصلاح سوم: فهرست را به جاده تبدیل کنید
قبل
بعد
دوازده ردیف در یک فهرست، هرکدام با یک آیکون، یک نام و XP و درصد در سمت راست: سه تا با تیک بنفش و ۱۰۰٪، Ordering Drinks با آیکون پخش و ۰٪، و هشت تا با قفل خاکستری و ۰٪، از Main Courses تا Unit Review. در برابر یک جاده پیچ‌درپیچ از پنج دایره درشت: دو گره بنفش تیک‌خورده، یک گره بنفش ستاره‌دار با حلقه زرد و دو گره خاکستری قفلشده.
این اصلاحی است که کل صفحه را به دوش می‌کشد. در پیش‌نویس، هر درس یک ردیف ۴۲ پیکسلی است با نام ۱۱ پیکسلی و دو عدد ۹ پیکسلی. دوازده ردیف هم‌اندازه می‌گویند دوازده چیز به یک اندازه مهم‌اند و یادگیرنده باید خودش آن یکی را که تمام نشده پیدا کند.
جاده این را فقط با شکل و رنگ می‌گوید. گرههای تمامشده بنفش با تیک‌اند، گره فعلی بنفش با ستاره و حلقه پیشرفت است و گرههای قفلشده خاکستری با قفل‌اند. هر گره ۶۴ پیکسل با لبه پایین ۵ پیکسل تیرهتر است و حلقه دور گره فعلی ۹۲ پیکسل است که سه‌دوازدهم آن با زرد پر شده. وضعیت واحد را از آن سر اتاق هم می‌شود خواند، بدون هیچ متنی.
چیزی از دست نرفته. نام‌ها از روی گره‌ها باز می‌شوند، XP در حباب درس فعلی نشان داده می‌شود و ۱۰۰٪ به تیک و ۰٪ به قفل تبدیل شده. بقیه درسها جلوتر در جاده‌اند. Duolingo این مسیر را استاندارد اپهای یادگیری کرد و اینجا هم به همان دلیل کار میکند: پیشرفت چیزی است که در آن راه می‌روید، نه چیزی که می‌خوانید.
قاعده برای استفاده مجدد: وقتی آیتم‌ها وضعیت و ترتیب دارند، وضعیت را با شکل و رنگ و ترتیب را با موقعیت نشان بدهید.
اصلاح چهارم: یک حباب Start روی گره فعلی بگذارید
قبل
بعد
یک دکمه کوچک بنفش با متن CONTINUE با حروف بزرگ در پایین سمت راست، زیر فهرست. در برابر یک حباب سفید با حاشیه بسیار نازک با متن Ordering Drinks و Start, 12 XP، با یک فلش به پایین که به گره ستاره‌دار بنفش داخل حلقه زردش اشاره میکند.
در پیش‌نویس، قدم بعدی یک دکمه CONTINUE ۹۱ در ۳۰ زیر دوازده ردیف است. از درسی که آن را شروع میکند دور است، پس یادگیرنده باید این دو را به هم وصل کند. همچنین مثل دکمه UPGRADE بالاتر با حروف بزرگ نوشته شده، پس شبیه اقدام اصلی نیست.
اصلاح، اقدام را روی چیزی که روی آن عمل میکند می‌گذارد. یک حباب بالای گره فعلی نام درس را می‌گوید، «Ordering Drinks»، و می‌نویسد «Start · 12 XP». حاشیه ۲ پیکسلی بسیار نازک دارد و سایه ندارد، پس بخشی از جاده به نظر می‌رسد. فقط درس فعلی نام دارد، پس فقط یک چیز برای ضربه زدن هست.
قاعده برای استفاده مجدد: اقدام اصلی را کنار شیئی که روی آن عمل میکند بگذارید و شیء را در اقدام نام ببرید.
اصلاح‌های کوچک‌تر
- همه کارکردها می‌مانند. منوی کشویی اسپانیایی همان پرچم است. عنوان My Course همان تب Learn است. League Silver و تب League به تب Profile رفتند. پیشنهاد از برچسب PLUS باز می‌شود.
- یک حاشیه. پیش‌نویس ۱۴ پیکسل چپ و ۱۲ پیکسل راست دارد. صفحه اصلاحشده ۲۰ از هر دو طرف و ۱۶ بین بلوک‌ها استفاده میکند.
- یک جفت رنگ تأکیدی. بنفش (
#7C3AED) رنگ اقدام روی بنر و گره‌هاست. زرد خورشیدی (#FFC53D) فقط برای حلقه پیشرفت و برچسب PLUS است. - مقیاس تایپ. پیش‌نویس از ۹ تا ۱۵ پیکسل می‌رود. صفحه اصلاحشده بزرگ‌تر است، با شمارنده‌های ۱۶ پیکسلی و عنوان واحد ۲۰ پیکسلی.
- یک نوار تب تخت. پنج تب با آیکون‌های پر و خطی مخلوط به چهار آیکون در یک سبک و بدون برچسب تبدیل شدند.
- بدون سایه. عمق از لبه‌های پایین تیرهتر ۴ و ۵ پیکسلی می‌آید، نه از سایه.
صفحه یادگیری خودتان را بررسی کنید
| پرسش | چرا مهم است |
|---|---|
| آیا یادگیرنده بازگشتی استریک خود را با یک نگاه می‌خواند؟ | اعداد روزانه باید آیکون باشند، نه جمله |
| آیا سرتیتر واحد یک بلوک رنگی است؟ | به یادگیرنده می‌گوید کجاست |
| آیا فهرست درسها وضعیت را بدون متن نشان میدهد؟ | شکل و رنگ سریع‌تر از درصد خوانده می‌شوند |
| آیا دقیقاً یک اقدام اصلی وجود دارد؟ | دو دکمه اصلی یعنی هیچ‌کدام اصلی نیست |
| آیا اقدام کنار درسی است که آن را شروع میکند؟ | فاصله، یادگیرنده را مجبور میکند آن‌ها را به هم وصل کند |
| آیا پیشنهاد ارتقا کوچک‌تر از درس است؟ | فروختن بالای یادگیری، مردم را فراری میدهد |
فایل Figma را بگیرید
فایل رایگان شامل پیش‌نویس تازه‌کار، صفحه اصلاحشده و هر بخش به شکل کامپوننت است.
فایل رایگان Figma
بازطراحی صفحه یادگیری زبان، قبل و بعد
هر دو صفحه و تک‌تک بخش‌ها به شکل کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش آن را در پیش‌نویس‌های خود کپی کنید.
سوالات متداول
صفحه اصلی یک اپ یادگیری زبان چگونه باید طراحی شود؟
بالا چند شمارنده ساده نشان بدهید، یک بنر یکدست برای واحد، یک جاده از گرههای درس که وضعیت با رنگ و شکل نشان داده می‌شود، و یک حباب Start روی درس فعلی. یادگیرنده باید بدون خواندن ببیند کجاست و به چه چیزی باید ضربه بزند.
چرا اپهای زبان به جای فهرست از مسیر استفاده میکنند؟
مسیر وضعیت و ترتیب را با یک نگاه نشان میدهد. درسهای تمامشده، فعلی و قفلشده متفاوت به نظر میرسند، پس یادگیرنده لازم نیست دوازده ردیف را بخواند تا درس بعدی را پیدا کند.
یک اپ زبان چه آماری را در صفحه اصلی نشان بدهد؟
آنچه یادگیرنده هر روز چک میکند: استریک، جواهر یا امتیاز و قلبها. سطح، XP و لیگ میتوانند در تب پروفایل باشند.
پیشنهاد ارتقا در یک اپ یادگیری کجا باید باشد؟
به شکل یک برچسب کوچک در ردیف آمار که پیشنهاد را باز میکند. یک بنر بزرگ بالای درسها با خود درس بر سر توجه رقابت میکند.
یک گره درس چقدر باید بزرگ باشد؟
حدود ۶۴ پیکسل، که هدف راحتی برای انگشت شست است. صفحه اصلاحشده از گرههای ۶۴ پیکسلی با لبه پایین ۵ پیکسل تیرهتر و حلقه ۹۲ پیکسلی روی گره فعلی استفاده میکند.
منابع
- هر دو صفحه از خود ماست، طراحی و اندازه‌گیری‌شده در Figma. اپ، Hola، و همه داده‌هایش ساختگی‌اند. اعداد در هر دو صفحه یکی‌اند: استریک ۴۱ روزه، ۳۲۰ جواهر، ۴ قلب، و درس ۴ از ۱۲، Ordering Drinks، با ۱۲ XP.
- الگوی مطالعه‌شده: مسیر یادگیری Duolingo و Babbel.
- آیکون‌ها از Phosphor (MIT) هستند. لوگو Baloo 2 ExtraBold است. هیچ عکسی استفاده نشده.
- ابتدا به شکل کاروسل در 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
