User Interface (UI) Element | عنصر رابط کاربری (UI)

عنصر رابط کاربری کوچک‌ترین واحد معنادار بصری یا تعاملی روی سطح محصول است: یک دکمه، یک فیلد، یک آیکون، یک سوئیچ، یک برچسب. همهٔ کارهایی که کاربر انجام می‌دهد از خلال یکی از همین واحدها می‌گذرد؛ به همین دلیل عنصر را واحد اتمی کار رابط می‌نامند. وقتی واژگان عناصر را بشناسید، هر صفحه مثل جمله‌ای خوانده می‌شود که از واژه‌های آشنا ساخته شده است. این مدخل روی عنصر تکی و شغل اتمی‌اش تمرکز دارد—نه کامپوننت سیستمی با کپسوله‌سازی و گونه، و نه «عنصر طراحی UI» به‌معنای بحث ترکیب و واژگان بصری در فرایند طراحی.

واحد اتمی؛ جایی که جملهٔ رابط از آن شروع می‌شود

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

نام‌گذاری عنصر اولین گام واژگان مشترک است. اگر یک نفر «چیپ» می‌گوید و دیگری «تگ» و سومی «دکمهٔ کوچک»، مهندسی سه پیاده‌سازی می‌سازد.

چهار خانواده؛ شغل را با شکل اشتباه عوض نکنید

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

در نقد طراحی بپرسید: این قطعه باید اطلاعات بدهد، ورودی بگیرد، جابه‌جا کند، یا عمل را آتش بزند؟ اگر جواب دو تا باشد، یا ترکیب کامپوننتی لازم است یا شغل‌ها قاطی شده‌اند.

کاربردپذیری در مقیاس عنصر رخ می‌دهد

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

اگر فقط در سطح جریان یا وایرفریم درشت فکر کنید و عنصر را «جزئیات بعدی» بدانید، جزئیات بعدی همان‌جایی می‌شود که کاربر每日 آسیب می‌بیند.

واژگان مشترک طراحی و مهندسی

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

در بازبینی کد و طراحی، ارجاع به نام عنصر ابهام «آن چیز آبی» را کم می‌کند و تصمیم‌ها را قابل ردیابی می‌کند.

مرز با کامپوننت و با عنصر طراحی UI

عنصر UI واحد کوچک است؛ کامپوننت UI معمولاً ترکیب خودکفاتر با منطق و حالت و API گونه است—مثل نوار جستجوی کامل. در گفتگوی روزمره گاهی این دو جابه‌جا به کار می‌روند، اما در سیستم‌سازی تمایز مفید است: اتم را برای ثبات معنا و دسترس‌پذیری سخت‌گیرانه مدیریت کنید؛ کامپوننت را برای مونتاژ مقیاس. «عنصر طراحی UI» در ادبیات بعضی منابع به همان اتم‌های بصری اشاره دارد اما زاویهٔ بحث اغلب ترکیب، سلسله‌مراتب بصری و نقش در فرایند طراحی است. اینجا زاویه، واحد تعامل روی سطح محصول و قرارداد شغل خانواده‌هاست—نه کارگاه ترکیب‌بندی و نه کاتالوگ کامپوننت سازمانی.

اگر مدخل‌ها را یکی کنید، خواننده نمی‌فهمد کی باید به دسترس‌پذیری یک آیکون فکر کند و کی به نسخهٔ featured یک ProductCard.

دسترس‌پذیری اتمی

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

حالت فوکوس را حذف نکنید تا «زیباتر» شود؛ کاربر صفحه‌کلید بدون فوکوس در مه حرکت می‌کند. برای لمس، ناحیهٔ کلیک را بزرگ‌تر از گرافیک شستی در نظر بگیرید.

ثبات؛ پیش‌بینی همان سرعت است

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

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

فراتر از کنترل کلاسیک صفحه

با ورودی صوتی، ژست، و بازخورد لمسی، مفهوم عنصر گسترش می‌یابد: یک فرمان صوتی کوتاه یا یک ویبرهٔ تأیید هم می‌تواند واحد تعامل باشد. اصل همان است—واحد معنادار با شغل روشن و بازخورد قابل درک—اما طراحی باید کانال را بشناسد. عنصر صوتی بدون تأیید شنیداری، یا ژست بدون افوردنس آموزشی، همان شکست اتمی را در کانال جدید تکرار می‌کند.

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

چک سریع وقتی عنصر بد رفتار می‌کند

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

جمع‌بندی: عنصر UI واحد اتمی سطح تعامل است؛ جایی که دسترس‌پذیری، بازخورد و قرارداد شغل واقعاً رخ می‌دهد. آن را از کامپوننت سیستمی و از زاویهٔ عنصر طراحی جدا نگه دارید، خانواده‌ها را قاطی نکنید، واژگان مشترک بسازید، و ثبات رفتار را مثل دارایی محصول محافظت کنید. صفحهٔ خوب معمولاً مجموعهٔ عناصر درست‌کار است که با دقت کنار هم نشسته‌اند—نه یک تصویر واحد که بعداً به زور قابل کلیک شده باشد.