آناتومی اجزای رابط کاربری

عناصر زیادی وجود دارن که اجزای رابط کاربری قابل استفاده رو تشکیل می‌دن. درک ساختار این اجزا به شما این امکان رو می‌ده که اونا رو مؤثرتر طراحی و پیاده‌سازی کنین. اجزای خوب طراحی شده، قابلیت استفاده و عملکرد کلی محصولات دیجیتال رو بهبود می‌بخشن.

به طور کلی، اجزا رو می‌شه به چند دسته تقسیم کرد: متن، آیکون‌ها، رسانه و اجزای چیدمان که مهم‌ترینشون هستن. این عناصر ساختاری می‌تونن به روش‌های مختلفی ترکیب بشن تا رابط‌های کاربری منحصربه‌فردی ایجاد کنن که کاربرا رو جذب کنه و اونا رو تو استفاده از محصولتون به مؤثرترین روش‌ها راهنمایی کنه.

متن (Text)

تو طراحی رابط کاربری، متن نقش مهمی تو انتقال اطلاعات و راهنمایی تعامل کاربر داره. سلسله مراتب، زمینه و وضوح رو به ارائه محتوا می‌ده. متن رو به طور کلی می‌شه به این صورت دسته‌بندی کرد:

• عناوین (Headings): عناوین یه سلسله مراتب بصری ایجاد می‌کنن و کاربرا رو تو ساختار راهنمایی می‌کنن. عناوین واضح و مختصر یه نگاه اجمالی به موضوع محتوا ارائه می‌دن و به کاربرا تو شناسایی سریع بخش‌های مرتبط کمک می‌کنن.
• زیرعنوان‌ها (Subheadings): زیرعنوان‌ها تقسیم بیشتری رو تو بخش‌ها فراهم می‌کنن و محتوا رو به بخش‌های قابل هضم تقسیم می‌کنن. اونا روی نکات یا موضوعات خاص تأکید می‌کنن و به اسکن و درک مطلب کمک می‌کنن.
• متن اصلی (Body text): متن اصلی شامل محتوای اصلیه و اطلاعات، دستورالعمل‌ها یا توضیحات دقیق رو ارائه می‌ده. باید خوانا، مختصر و مرتبط با نیازهای کاربر باشه. نکته‌ی حرفه‌ای! ۱۶ پیکسل حداقل اندازه‌ایه که باید برای متن اصلی، مخصوصاً برای صفحاتی با متن زیاد، استفاده کنین.

برچسب‌ها (Labels)

برچسب‌ها عناصر متنی هستن که اطلاعات توصیفی در مورد اجزا و عناصر مختلف تو یه رابط دیجیتال، مثل وب‌سایت‌ها یا برنامه‌ها، ارائه می‌دن. این نشانه‌های مبتنی بر متن تو کمک به کاربرا برای درک عملکرد، زمینه یا ورودی مورد انتظار از عناصر مختلف رابط کاربری، حیاتی هستن. برچسب‌ها معمولاً روی دکمه‌ها، کنار فیلدهای فرم، جعبه‌های انتخاب، دکمه‌های رادیویی و آیکون‌ها پیدا می‌شن.

نقش اصلی اونا افزایش درک کاربر، به حداقل رسوندن سردرگمی و کاربرپسندتر کردن رابط کاربریه. برچسب‌ها با ارائه توضیحات واضح، کاربرا رو در مورد نحوه تعامل مؤثر با عناصر مختلف راهنمایی می‌کنن. مطمئن بشین برچسب‌ها خوانا هستن. از عبارات کوتاه که می‌شه سریع اسکنشون کرد و یه فونت خوانا که خیلی برجسته نیست استفاده کنین.

آیکون‌ها (Icons)

آیکون‌ها تصاویر ساده شده‌ای هستن که نشون دهنده اقدامات، اشیاء یا ایده‌ها هستن. اونا بخش مهمی از بیشتر رابط‌های کاربری هستن و به کاربرا کمک می‌کنن راهشون رو پیدا کنن. معنی اونا باید واضح و صریح باشه تا به کاربرا کمک کنه نه اینکه اونا رو گیج کنه. وقتی بهترین عملکرد رو دارن که اشیاء فیزیکی مشابه رو نشون بدن (مثل یه خونه برای «خانه» یا یه دیسک برای «ذخیره»).

آیکون‌ها همچنین می‌تونن به صورت مستقل، بدون برچسب یا اطلاعات متنی دیگه ظاهر بشن. با این حال، تو این صورت، آیکون باید به طور رایج تو اینترنت استفاده بشه و برای کاربرا بلافاصله قابل تشخیص باشه. نکته‌ی حرفه‌ای! آیکون‌ها رو ساده نگه دارین و از آنالوگ‌های فیزیکی آشنا برای جلوگیری از سردرگمی استفاده کنین.

ظرف (Container)

یه ظرف یه ناحیه یا عنصر مشخصه که سایر عناصر رابط کاربری، محتوا یا اجزا رو تو یه فضای تعریف شده نگه می‌داره و سازماندهی می‌کنه. ظرف‌ها نقش مهمی تو ساختاردهی و چیدمان عناصر تو یه صفحه وب یا داخل یه برنامه دارن. اونا به ایجاد نظم بصری، ایجاد گروه‌بندی و مدیریت چیدمان محتوا کمک می‌کنن.

ظرف‌ها می‌تونن استایل، پس‌زمینه و ویژگی‌های فاصله‌گذاری خودشون رو داشته باشن و به طراحان اجازه می‌دن نواحی بصری متمایز رو تو یه رابط کاربری ایجاد کنن. اونا همچنین می‌تونن کم و بیش نامرئی باشن و فقط ساختار یا تعادل رو پشت صحنه تو کد رابط کاربری فراهم کنن.

ابعاد (Dimensions)

ابعاد یه جزء شامل عرض و ارتفاع اونه. هر وقت امکانش هست باید مشخص بشن. ابعاد شامل حاشیه‌های اطراف یه عنصر نمی‌شه، اما شامل هرگونه padding و border می‌شه.

ارتفاع و عرض رو می‌شه با مقادیر حداقل و/یا حداکثر مشخص کرد و به اونا اجازه داد که برای جا شدن تو چیدمان، کوچک یا بزرگ بشن. وقتی ابعاد یه عنصر رو توصیف می‌کنین، اول عرض میاد. بنابراین، اگه یه عنصر ۱۲×۱۰ پیکسل باشه، یعنی ۱۲ پیکسل عرض و ۱۰ پیکسل ارتفاع داره.

شعاع گوشه (Border radius)

اجزایی که با رنگ پس‌زمینه خودشون یا حاشیه قابل مشاهده ظاهر می‌شن، شامل شعاع گوشه هستن. شعاع گوشه مشخص می‌کنه که گوشه‌های جزء چقدر باید گرد باشه.

لبه‌های تیز گاهی اوقات — آگاهانه یا ناخودآگاه — با درد مرتبط هستن (به این فکر کنین که برخورد ساق پاتون به گوشه تیز یه میز قهوه چقدر دردناکه). گوشه‌های گرد برای چشم راحت‌تر هستن و کاربرا رو به سمت مرکز عنصر هدایت می‌کنن. حتی یه گوشه کمی گرد هم می‌تونه از ارتباط دردناک گوشه‌های تیز جلوگیری کنه. مراقب باشین که تو استفاده از شعاع گوشه زیاده‌روی نکنین، چون شعاع‌های نامتناسب بزرگ هم می‌تونن برای دیدن ناخوشایند باشن.

تصویر بندانگشتی (Thumbnail)

تصاویر بندانگشتی، نمایش‌های کوچک و کوچک شده از تصاویر، ویدیوها یا آیتم‌های محتوای بزرگتر هستن. اونا به عنوان پیش‌نمایش‌های بصری عمل می‌کنن که یه نگاه اجمالی از محتوای کامل رو بدون نیاز به دسترسی به نسخه کامل به کاربرا ارائه می‌دن. تصاویر بندانگشتی معمولاً تو زمینه‌هایی مثل گالری‌های تصویر، لیست‌های پخش ویدیو، نتایج جستجو و پیش‌نمایش‌های محتوا استفاده می‌شن.

هدف اصلی تصاویر بندانگشتی اینه که کاربرا رو قادر کنه به سرعت ارتباط محتوا رو ارزیابی کنن و به اونا کمک کنه تصمیم بگیرن که آیا می‌خوان بیشتر کاوش کنن یا نه. اونا با اجازه دادن به کاربرا برای پیش‌نمایش همزمان چندین آیتم، به کاهش بار شناختی کمک می‌کنن. کلیک کردن روی یه تصویر بندانگشتی اغلب به محتوای کامل منتهی می‌شه و یه انتقال بدون درز از پیش‌نمایش به نمای دقیق رو امکان‌پذیر می‌کنه.

نگه‌دارنده‌ها (Placeholders)

نگه‌دارنده‌ها نشانه‌های بصری موقت یا توصیفی تو فیلدهای ورودی یا ظروف هستن که به کاربرا در مورد نوع محتوایی که باید وارد کنن، راهنمایی می‌کنن. اونا به عنوان اعلان‌هایی برای نشون دادن فرمت، مقدار یا هدف مورد انتظار ناحیه ورودی عمل می‌کنن.

نگه‌دارنده‌ها معمولاً با متن روشن‌تر یا محو شده تو فیلد ورودی نشون داده می‌شن و وقتی کاربرا شروع به تایپ کردن یا تعامل با فیلد می‌کنن، ناپدید می‌شن. اونا معمولاً تو فرم‌ها برای اهداف مختلفی استفاده می‌شن، مثل نشون دادن فرمت اطلاعات مورد نیاز (مثل “MM/DD/YYYY” برای یه فیلد تاریخ)، ارائه مثال (مثل “ایمیل خود را وارد کنید”) یا ارائه زمینه (مثل “اینجا جستجو کنید”).