طراحی صفحه پروفایل: بازطراحی پروفایل و تنظیمات اپ، قبل و بعد
صفحه پروفایلی که یک لیست تخت با سیزده ردیف است، و همان صفحه پس از اصلاح: یک ردیف هویت، یک کارت عضویت واقعی، تنظیمات گروه‌بندی‌شده که وضعیتشان را نشان می‌دهند و یک خروج آرام. همه تغییرات کنار هم، همراه با فایل رایگان Figma.
یک صفحه پروفایل سه کار دارد: نشان دادن اینکه شما کی هستید، نشان دادن اینکه چه دارید، و دادن جایی برای تغییر چیزها. پیش‌نویس اول زیر هر سه را انجام می‌دهد، اما همه را در یک لیست تخت با سیزده ردیف، با امتیازها فشرده در یک خط کوچک و دکمه خروج به‌عنوان بلندترین صدای صفحه. این یک کشوی خرت‌وپرت است: همه‌چیز آنجاست و هیچ‌چیز راحت پیدا نمی‌شود.
اصلاح، همه قابلیت‌ها را نگه می‌دارد. به هر کار یک بلوک جدا می‌دهد و اجازه می‌دهد ردیف‌ها وضعیتشان را نشان بدهند، تا بیشتر تنظیمات را بدون باز کردن بشود خواند.
کل صفحه، قبل و بعد
پیش‌نویس مبتدی
اصلاح‌شده
در سمت چپ، همه‌چیز وزن یکسان دارد. آواتار، نام، ایمیل و شماره تلفن وسط روی هم چیده شده‌اند، بنر مزاحم درست بالای امتیازها نشسته، و بعد سیزده ردیف در صفحه پایین می‌روند که هرکدام رنگ آیکون خودش را دارد. دکمه قرمز پهن پایین قوی‌ترین رنگ صفحه است، پس آخرین چیزی که چشم پیدا میکند همان اقدامی است که هیچ‌کس نباید اتفاقی بزند.
در سمت راست، صفحه چهار بلوک و یک رنگ دارد. ردیف هویت کوتاه است، کارت امتیاز را حمل میکند، و کاشی‌ها و لیست تنظیمات بقیه را نگه می‌دارند. رنگ کبالتی برند روی کارت، دکمه ویرایش و تب فعال دیده می‌شود، و قرمز فقط یک بار، روی خروج، بهصورت متن ساده.
چه چیزی تغییر کرد، با اندازه‌گیری
هر تفاوت روی یک صفحه، از دو فریم Figma:
| پیش‌نویس مبتدی | اصلاح‌شده | |
|---|---|---|
| هویت | چینش وسط‌چین: آواتار، نام، ایمیل، تلفن، ویرایش پروفایل | یک ردیف: آواتار، نام، ایمیل، دکمه کوچک ویرایش |
| امتیاز | یک خط ۹ پوینتی: «Points: 12480 | Tier: Gold | Next: Platinum (13000)» | یک کارت با عدد ۴۴ پوینتی و «۵۲۰ امتیاز تا Platinum» |
| منو | ۱۳ ردیف در یک لیست، ۷ رنگ آیکون | ۳ کاشی و ۵ ردیف گروه‌بندی‌شده، ۱ رنگ آیکون |
| وضعیت ردیف | فقط اعلان‌ها (یک نشان) و دعوت دوستان (یک برچسب) | تعداد، موجودی، کارت، زبان و یک سوییچ، همه قابل‌مشاهده |
| خروج | یک دکمه قرمز ۳۸ پیکسلی، تمام‌عرض | متن قرمز ۱۷ پوینتی، وسط‌چین |
| نوار تب | ۵ تب، آیکون‌های پر و خطی مخلوط | ۵ تب در نوار شناور، یک سبک آیکون |
| حاشیه | ۱۴ چپ، ۱۲ راست | ۲۰ در هر دو طرف |
اصلاح ۱: یک ردیف برای اینکه کی هستید
قبل
بعد
یک آواتار وسط‌چین، نام، یک ایمیل، یک شماره تلفن و یک دکمه خطی ویرایش پروفایل، با یک بنر زرد زیرشان، در برابر یک ردیف: آواتار در چپ، نام و ایمیل کنارش و یک قرص کوچک ویرایش در راست.
چینش وسط‌چین حدود ۱۶۰ پوینت ارتفاع خرج میکند تا یک نام و یک ایمیل را بگوید. شماره تلفن بی‌فایده‌ترین خط آن است و دکمه ویرایش پروفایل یک کنترل خطی کامل است که با هرچه زیرش هست رقابت میکند.
اصلاح یک ردیف است: آواتار در یک طرف، نام و ایمیل کنارش و ویرایش بهصورت یک قرص کوچک در انتها. ارتفاع بلوک ۶۰ پوینت است به‌جای ۱۵۸، پس بلوک بعدی بالاتر شروع می‌شود. بنر مزاحم «پروفایلت را کامل کن و ۵۰ امتیاز بگیر!!!» از بالای صفحه رفته است. درخواست تکمیل پروفایل جایش بعد از اولین اجرا یا داخل ویرایش است، نه بالای چیزی که آمده‌اید ببینید.
قاعده برای استفاده دوباره: آدم اسم خودش را می‌داند. به هویت یک ردیف بدهید و جا را به چیزهایی بدهید که تغییر می‌کنند.
اصلاح ۲: یک خط متن را به کارت تبدیل کنید
قبل
بعد
یک لوگوتایپ کوچک و بعد «Points: 12480 | Tier: Gold | Next: Platinum (13000)» در یک خط متن ریز، در برابر یک کارت آبی تیره با لوگوتایپ، یک برچسب طلایی، عدد ۱۲,۴۸۰ با حروف درشت، یک نوار پیشرفت و «۵۲۰ امتیاز تا Platinum».
امتیازها دلیل باز کردن این صفحه توسط یک عضو هستند، و پیش‌نویس آن‌ها را با کوچک‌ترین حروف صفحه می‌نویسد. همه عددها آنجا هستند، اما خواننده باید تفریق را خودش انجام دهد: ۱۳,۰۰۰ منهای ۱۲,۴۸۰.
اصلاح تفریق را به جای او انجام می‌دهد. کارت امتیاز را با ۴۴ پوینت نشان می‌دهد، سطح را بهصورت یک برچسب طلایی، نواری که ۸۳ درصد پر است و جمله «۵۲۰ امتیاز تا Platinum». سطح طلایی از ۱۰,۰۰۰ شروع می‌شود، پس ۱۲,۴۸۰ بیشتر راه تا سطح بعد را رفته و نوار آن را در یک نگاه نشان می‌دهد. کارت همچنین از کبالت برند و یک طلای سطح استفاده میکند، که آن را قوی‌ترین بلوک صفحه میکند، و درست هم هست: تنها چیزی است که به کسی که نگاهش میکند پاداش می‌دهد.
قاعده برای استفاده دوباره: نتیجه جمع را نشان بدهید، نه عددهایی که واردش شده‌اند.
اصلاح ۳: تنظیمات را گروه‌بندی کنید و وضعیتشان را نشان بدهید
قبل
بعد
سیزده ردیف در یک لیست، از سفارش‌های من تا شرایط و ضوابط، هرکدام با آیکون رنگی و فلش خودش، در برابر سه کاشی (سفارش‌ها، کیف پول، ذخیره‌شده‌ها) و یک گروه سفید با پنج ردیف: آدرس‌ها، روش‌های پرداخت، اعلان‌ها، زبان و راهنما و قوانین.
سیزده ردیف با اندازه یکسان، فلش یکسان و هفت رنگ آیکون هیچ نظمی ندارند. سفارش‌های من و شرایط و ضوابط به یک اندازه مهم به نظر می‌رسند، و پیش‌نویس تا وقتی ضربه نزنید چیزی درباره پشت هر ردیف نمی‌گوید.
اصلاح لیست را بر اساس میزان استفاده مردم مرتب میکند:
- سفارش‌ها، کیف پول و ذخیره‌شده‌ها کاشی می‌شوند. این‌ها سه جایی هستند که مردم بیشتر می‌روند، پس هدف‌های بزرگ و هرکدام یک واقعیت زنده می‌گیرند: «۲ فعال»، «$42.50» و «۱۸ مورد».
- تنظیمات در یک گروه می‌نشینند. آدرس‌ها می‌گوید «۲ ذخیره‌شده»، روش‌های پرداخت می‌گوید «Visa ·· 4242» و زبان می‌گوید «English». کاربر بدون ضربه می‌تواند بررسی‌شان کند.
- اعلان‌ها به یک سوییچ تبدیل می‌شود. انتخابی روشن و خاموش است، پس صفحه خودش را لازم ندارد.
- ردیف‌های کماستفاده پشت راهنما و قوانین می‌روند. دعوت دوستان، امتیاز به اپ، درباره ما، سیاست حریم خصوصی و شرایط هنوز وجود دارند، یک ضربه عمیق‌تر.
هر ردیف پیش‌نویس هنوز در دسترس است. هیچ‌چیز حذف نشده، هرچیز جایی گذاشته شده که تکرار استفاده‌اش می‌گوید. آیکون‌ها هم یک رنگ مشترک دارند، پس رنگ روی صفحه معنایی دارد: برند، چیزهای فعال و قابل‌لمس را نشان می‌دهد.
اصلاح ۴: خروج را آرام کنید
قبل
بعد
یک دکمه قرمز تمام‌عرض با حروف بزرگ سفید که LOG OUT نوشته، در برابر کلمات خروج به رنگ قرمز، ۱۷ پوینت، وسط‌چین با فضای خالی اطرافشان.
یک دکمه قرمز توپر بلندترین کنترل صفحه پیش‌نویس است و خواهش میکند فشارش بدهید. خروج نادر و کمی مخرب است، چون کاربر را به صفحه ورود برمی‌گرداند. باید پیدا کردنش آسان و اتفاقی زدنش سخت باشد.
اصلاح قرمز را نگه می‌دارد، چون قرمز هنوز می‌گوید این یک اقدام ترک‌کردن است، و پرکردگی را برمی‌دارد. متنی ساده زیر گروه تنظیمات است، با فضای خالی اطرافش. هنوز یک ضربه فاصله دارد، اما دیگر چشم را نمی‌کشد.
اصلاح‌های کوچک‌تر
- عنوان بزرگ به جای نوار ناوبری. «پروفایل من» با فلش بازگشت، آیکون اشتراک و آیکون خورشید شد «پروفایل» با ۳۴ پوینت. نوار تب از قبل می‌گوید کجایید، پس فلش بازگشت رفته و زنگ اعلان تنها آیکون باقی‌مانده است.
- یک حاشیه. پیش‌نویس ۱۴ در چپ و ۱۲ در راست دارد. اصلاح ۲۰ در هر دو طرف و ۱۴ بین بلوک‌ها.
- یک مقیاس تایپ. متن در پیش‌نویس از ۸ تا ۱۵ پیکسل است. اصلاح از اندازه‌های iOS بین ۱۱ تا ۳۴ پوینت استفاده میکند.
- یک رنگ تأکید. پیش‌نویس هفت رنگ آیکون، یک بنر زرد و یک دکمه قرمز دارد. اصلاح کبالت برند، یک طلا برای سطح و قرمز برای خروج دارد.
- یک نوار تب شناور. پنج تب می‌مانند، اما یک سبک آیکون دارند و فقط تب فعال پر است.
صفحه پروفایل خودتان را بازبینی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا هویت یک ردیف است؟ | آدم اسمش را می‌داند، پس نباید ۱۶۰ پوینت بگیرد |
| آیا می‌توانید امتیاز یا وضعیت را در یک ثانیه بخوانید؟ | خلاصه با متن ریز خواننده را به محاسبه وامی‌دارد |
| آیا پراستفاده‌ترین جاها از کم‌استفاده‌ها بزرگ‌ترند؟ | ردیف‌های مساوی آنچه مهم است را پنهان می‌کنند |
| آیا هر ردیف تنظیمات مقدار فعلی‌اش را نشان می‌دهد؟ | وضعیت پاسخ بیشتر مراجعه‌هاست |
| آیا بیش از یک رنگ تأکید هست؟ | هفت رنگ آیکون معنایی ندارد |
| آیا خروج بلندتر از ویرایش است؟ | اقدام نادر باید آرام باشد |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را دارد، با بلوک‌های اصلاح‌شده بهصورت کامپوننت.
فایل رایگان Figma
بازطراحی صفحه پروفایل، قبل و بعد
هر دو صفحه و هر بخش بهصورت کامپوننت Figma. رایگان، فقط مشاهده، آن را در پیش‌نویس‌های خود کپی کنید.
سوالات متداول
یک صفحه پروفایل در اپ باید چه چیزی نشان بدهد؟
اینکه کاربر کیست، چه دارد، و راهی برای تغییر تنظیماتش. هویت را در یک ردیف کوتاه بگذارید، امتیاز، موجودی یا طرح را در یک کارت و تنظیمات را زیرش گروه‌بندی کنید.
دکمه خروج در صفحه پروفایل کجا باشد؟
پایین تنظیمات، زیر آخرین گروه، بهصورت متن ساده. باید در دسترس باشد، اما هرگز بلندترین کنترل صفحه نباشد.
لیست تنظیمات چند ردیف باید داشته باشد؟
پنج تا هفت ردیف در نمای اول خوب کار میکند. موارد کماستفاده مثل صفحههای قانونی و امتیازدهی به اپ را پشت یک ردیف مثل راهنما و قوانین ببرید.
آیا ردیف‌های تنظیمات باید مقدار فعلی را نشان بدهند؟
بله. مقداری مثل «English» یا «Visa ·· 4242» بدون ضربه پاسخ می‌دهد، و برای انتخاب ساده روشن یا خاموش، سوییچ از ردیف بهتر است.
امتیازهای وفاداری را چطور در صفحه پروفایل نشان بدهیم؟
بهصورت یک کارت با عدد درشت، سطح فعلی بهصورت برچسب و یک جمله درباره قدم بعدی، مثل «۵۲۰ امتیاز تا Platinum». تفریق را برای خواننده انجام بدهید.
منابع
- هر دو صفحه از خودمان است و در Figma طراحی و اندازه‌گیری شده‌اند. اپ، عضو و عددها ساختگی‌اند.
- اندازه‌های متن از مقیاس تایپ iOS در Apple Human Interface Guidelines پیروی می‌کنند.
- عکس آواتار: Tamra Creatives Agency در Pexels.
- ابتدا بهصورت کاروسل در 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
