طراحی اپ چت: بازطراحی لیست چت، قبل و بعد
یک لیست چت مبتدی با چهار آیکون در هدر، شش فیلتر که از صفحه بیرون می‌زنند و تاریخ کامل روی هر ردیف، و همان صفحه بعد از اصلاح. تک‌تک تغییرها کنار هم، دلیل هر کدام، و فایل رایگان Figma.
یک لیست چت فقط یک کار دارد: نشان بدهد چه کسی نوشته، چه گفته و آیا به جواب نیاز دارد. پیش‌نویس اول زیر هر قابلیتی را که یک اپ پیامرسان بخواهد دارد و همه را یک‌جا فریاد می‌زند: چهار آیکون در نوار عنوان، یک فیلد جست‌وجو که خودش را توضیح می‌دهد، شش فیلتر که از لبه بیرون می‌زنند و تاریخ کامل روی هر ردیف. نسخه اصلاحشده همان آدم‌ها و همان پیام‌ها را نگه می‌دارد و به هر بخش صفحه فقط یک وظیفه می‌دهد.
کل صفحه، قبل و بعد
پیش‌نویس مبتدی
اصلاحشده
در سمت چپ، چشم با چهار آیکون، یک راهنمای جست‌وجوی ۴۷ کاراکتری، پنج حلقه رنگین‌کمانی یکسان، ردیف فیلتری که تمام نمی‌شود و هفت ردیف پیام تک‌خطی با یک تاریخ و یک نشان برای هر کدام روبه‌رو می‌شود. در سمت راست، چشم یک عنوان بزرگ، یک دکمه، یک فیلد جست‌وجو، پنج چهره، چهار چیپ و پنج ردیف را می‌بیند که مثل جمله خوانده می‌شوند.
| پیش‌نویس مبتدی | اصلاحشده | |
|---|---|---|
| آیکون‌های هدر | ۴ | ۱ |
| راهنمای جست‌وجو | ۴۷ کاراکتر | «جست‌وجو» |
| چیپ‌های فیلتر | ۶ تا، بیرون از صفحه | ۴ تا، همه پیدا |
| زمان ردیف | "10/24/26 9:41 AM" | "9:41"، «دیروز»، «پنجشنبه» |
| نشان خواندهنشده | قرمز ۲۰ px | آبی ۱۷ px، خاکستری وقتی بی‌صدا است |
| تب‌ها | ۵ | ۴ |
| حاشیه کناری | ۱۴ px چپ، ۱۲ px راست | ۲۰ px در هر دو طرف |
| اندازه متن‌ها | ۹ تا ۲۰ px | ۱۱ تا ۲۸ pt |
اصلاح ۱: یک اکشن در عنوان، جست‌وجویی که میگوید جست‌وجو
قبل
بعد
چهار آیکون و فیلد جست‌وجویی که فهرست چیزهای قابل جست‌وجو را میگوید، در برابر یک دکمه و کلمه تنهای «جست‌وجو».
نوار عنوان پیش‌نویس یک دوربین، یک مداد، یک ذره‌بین و یک منو دارد. ذره‌بین بالای فیلد جست‌وجویی نشسته که خودش ذره‌بین دارد، پس صفحه یک جست‌وجو را دو بار پیشنهاد می‌دهد.
نسخه اصلاحشده تنها اکشنی را نگه می‌دارد که مردم برایش می‌آیند، یعنی نوشتن پیام تازه، و به آن یک دکمه گرد و نرم با آبی برند می‌دهد. عنوان به یک عنوان بزرگ تبدیل می‌شود، همان الگوی iOS، تا صفحه پیش از هر چیز بگوید کجا هستید. فیلد جست‌وجو میگوید «جست‌وجو». آن ۴۷ کاراکتر پیش‌نویس، «پیام‌ها، افراد، گروهها و بیشتر»، فیلدی را توضیح می‌داد که همه بلدند چطور استفاده‌اش کنند.
قاعده‌ای که می‌شود تکرار کرد: نوار عنوان یک اکشن می‌گیرد، و فیلدی به نام جست‌وجو به جمله نیاز ندارد.
اصلاح ۲: حلقه‌ای که یعنی تازه
قبل
بعد
پنج حلقه رنگین‌کمانی یکسان و نامهای بریده، در برابر آبی برای تازه، خاکستری برای دیدهشده و نامهای کوچک کامل.
وقتی همه حلقه‌ها یکسان‌اند، حلقه هیچ اطلاعاتی نمی‌دهد. پیش‌نویس به هر پنج استوری یک گرادیان یکسان داده، پس استوری دیدهشده درست مثل استوری ندیده است، و نام‌ها به «Jessica M...» و «Daniel Ro...» بریده شده‌اند.
نسخه اصلاحشده به حلقه معنا می‌دهد. حلقه آبی ۲٫۵ px یعنی تازه. حلقه خاکستری ۱٫۵ px یعنی دیدهشده.
استوری خودتان اول می‌نشیند با یک بعلاوه کوچک روی آن، و هر نام یک نام کوچک کامل است: Jessica، Daniel، Amara، Leo. نامهای کوتاه جا می‌شوند، و مردم همدیگر را با نام کوچک صدا می‌زنند.
قاعده‌ای که می‌شود تکرار کرد: از رنگ برای جدا کردن دو حالت استفاده کنید، و فقط حالتی را رنگی نشان دهید که به توجه نیاز دارد.
اصلاح ۳: چهار چیپ، یک سبک، تعداد روی چیپ خودش
قبل
بعد
شش چیپ توخالی در ردیفی پهن‌تر از صفحه، در برابر چهار چیپ که جا می‌شوند و تعداد به شکل نشان.
پیش‌نویس شش چیپ در یک ردیف ۴۳۴ px روی ستونی ۳۶۴ px دارد. ششمی نصف شده، پس صفحه به کاربر میگوید چیز بیشتری هست و سرنخی نمی‌دهد که چیست. تعدادها داخل پرانتز در برچسب‌ها هستند، «خواندهنشده (۱۲)» و «گروهها (۳)»، که طول هر برچسب را متفاوت میکند.
نسخه اصلاحشده چهار تا نگه می‌دارد: همه، خواندهنشده، علاقهمندیها و گروهها. چیپ انتخاب‌شده آبی پر است و بقیه خاکستری نرم. تعداد خوانده‌نشده‌ها روی چیپ خودش به شکل یک نشان آبی کوچک می‌رود، چون تنها عددی است که مردم می‌خواهند و همان نشانی است که در ردیف‌های پایین هم می‌بینند. گروهها تعدادش را از دست داد.
کانال‌ها و بایگانی از ردیف بیرون رفتند. آن‌ها قابلیت‌های واقعی‌اند، و این بازطراحی نشان نمی‌دهد کجا می‌روند، پس یک اپ کامل هنوز برایشان جایی لازم دارد.
قاعده‌ای که می‌شود تکرار کرد: ردیف فیلتر باید داخل صفحه تمام شود، و چیپ انتخاب‌شده باید تنها چیپ پر باشد.
اصلاح ۴: ردیف‌هایی با فرد، دو خط و زمان کوتاه
قبل
بعد
یک خط بریده، یک مهر زمانی کامل و یک نشان قرمز با آیکون، در برابر دو خط، یک زمان کوتاه و یک نشان آرام.
هر ردیف یک پیام در مقیاس کوچک است، و پیش‌نویس پیام را بعد از حدود پنج کلمه می‌برد: «Haha yes!! Send me the photos fro...». جا به تاریخ رفته، «10/24/26 9:41 AM»، و به یک آیکون سنجاق یا بلندگوی کوچک کنار یک نشان قرمز. تاریخی با سال و ثانیه، برای پیامی که همین امروز صبح آمده، بی‌فایده‌ترین چیز روی یک ردیف است.
نسخه اصلاحشده به پیش‌نمایش دو خط می‌دهد، پس «Haha yes! Send me the photos from last night when you get a chance» بدون باز کردن چت خوانا است. زمان کوتاه است: «9:41» برای امروز، «دیروز»، بعد «پنجشنبه».
چت خواندهنشده زمانش را آبی می‌گیرد و یک نشان آبی ۱۷ px. گروه بی‌صدا، Design Team، نشان خاکستری می‌گیرد تا شمرده شود بی‌آنکه صدا بزند. آواتارها به ۵۲ px بزرگ می‌شوند، و پیام صوتی یک میکروفون کوچک قبل از مدتش می‌گیرد.
قاعده‌ای که می‌شود تکرار کرد: جای ردیف را خرج پیام کنید، و زمان را همان‌طور بنویسید که مردم می‌گویند.
اصلاح‌های کوچک‌تر
- یک لبه چپ. پیش‌نویس ۱۴ px چپ و ۱۲ px راست داشت. نسخه اصلاحشده ۲۰ px در هر دو طرف میگذارد، و جداکننده‌ها بعد از آواتار شروع می‌شوند.
- یک رنگ برای توجه. نشان‌های پیش‌نویس قرمزند، حلقه‌ها نارنجی تا بنفش و چیپ خواندهنشده توخالی. نسخه اصلاحشده از آبی برند
#2E7CF6برای تازه، انتخاب‌شده و خواندهنشده استفاده میکند، و خاکستری برای هر چیز آرام. - یک مقیاس تایپ واقعی. متن از ۹ تا ۲۰ px به اندازههای متن iOS یعنی ۱۱ تا ۲۸ pt رسید، با عنوان بزرگ در بالا.
- چهار تب، نه پنج. چت‌ها، تماس‌ها، دوربین، وضعیت و تنظیمات پیش‌نویس شدند چت‌ها، تماس‌ها، به‌روزرسانی‌ها و تنظیمات. دوربین از نوار تب رفت.
- چهره‌های بزرگ‌تر. آواتارها در لیست به ۵۲ px بزرگ شدند، پس فرد اولین چیزی است که هر ردیف نشان می‌دهد.
لیست چت خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| چند اکشن در نوار عنوان هست؟ | یک اکشن پیدا می‌شود، چهار تا اسکن می‌شود |
| آیا فیلد جست‌وجو خودش را با یک جمله توضیح می‌دهد؟ | کلمه «جست‌وجو» همین حالا کافی است |
| آیا هر حلقه یا نقطه دقیقاً یک معنا دارد؟ | سبکی که برای همه چیز باشد چیزی نمی‌گوید |
| آیا ردیف فیلتر داخل صفحه تمام می‌شود؟ | چیپ بریده‌شده چیزی را که ارائه می‌دهد پنهان میکند |
| آیا پیش‌نمایش دست‌کم دو خط است؟ | خواننده نباید برای خواندن پیام چت را باز کند |
| آیا زمان‌ها همان‌طور که مردم می‌گویند نوشته شده‌اند؟ | «دیروز» از تاریخی با سال سریع‌تر است |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را به شکل کامپوننت دارد، هر اصلاح را به صورت جفت قبل و بعد، متغیرهای رنگ و سبک‌های متن iOS.
فایل رایگان Figma
لیست چت، قبل و بعد
هر دو صفحه و تمام بخش‌های اصلاحشده به شکل کامپوننت‌های Figma. رایگان، فقط برای مشاهده، آن را در پیش‌نویس‌های خود کپی کنید.
سوالات متداول
یک صفحه لیست چت باید روی هر ردیف چه نشان بدهد؟
فرد، دو خط از آخرین پیام، یک زمان کوتاه و یک نشان کوچک برای خواندهنشده. تاریخ کامل، آیکون‌های اضافه و نشان دوم را کنار بگذارید.
یک اپ پیامرسان باید چند فیلتر نشان بدهد؟
چهار چیپ در لیست اصلی کافی است: همه، خواندهنشده، علاقهمندیها و گروهها. بقیه، مثل بایگانی، را پشت یک منو یا در صفحهای دیگر بگذارید، و مطمئن شوید ردیف هرگز از لبه بیرون نمیزند.
حلقههای استوری را در یک اپ چت چطور طراحی کنیم؟
یک رنگ برای تازه و یک رنگ آرام برای دیدهشده به کار ببرید تا حلقه اطلاعات برساند. اصلاح ما حلقه آبی را برای تازه و حلقه نازک خاکستری را برای دیدهشده میگذارد، با نامهای کوچک کامل زیر چهرهها.
یک اپ چت زمان پیام را چطور نشان بدهد؟
به کوتاهیای که آدم میگوید: ساعت برای امروز، بعد «دیروز»، بعد روز هفته. تاریخ کامل را برای خود چت نگه دارید.
یک اپ چت از چه اندازه فونتی استفاده کند؟
از مقیاس متن پلتفرم استفاده کنید. صفحه اصلاحشده از اندازههای iOS از ۱۱ تا ۲۸ pt استفاده میکند، با عنوان بزرگ برای نام صفحه.
منابع
- هر دو صفحه از خود ما هستند، در Figma طراحی و اندازه‌گیری شده‌اند. نام‌ها و پیام‌ها برای این تمرین ساختگی‌اند.
- عکس‌ها از Pexels، از Татьяна Танатова، Iphanyi Ezemenari، pessoas uem، Son Hoa Nguyen، Ajan Yogi، Tamra Creatives Agency، Kenneth Surillo و kaleef lawal.
- Apple Human Interface Guidelines: Typography، برای اندازههای متن iOS و عنوان بزرگ استفاده‌شده در صفحه اصلاحشده.
- Apple Human Interface Guidelines: Accessibility، برای اندازه هدف لمسی ۴۴ pt.
- ابتدا به شکل کاروسل در 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
