Accordion | آکاردئون

آناتومی یک آکاردئون؛ از ماشه تا پنل

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

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

حالت‌ها و رفتار تعاملی

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

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

ساختار معنایی و دسترس‌پذیری

ماشه باید دکمهٔ واقعی باشد نه عنصر تزئینی کلیک‌پذیر. ارتباط بین دکمه و پنل با ویژگی‌هایی مثل aria-expanded و ارجاع شناسه برقرار می‌شود تا صفحه‌خوان وضعیت را اعلام کند. عناوین داخل یا روی هدر باید سلسله‌مراتب سند را حفظ کنند. فوکوس صفحه‌کلید باید مرتب روی ماشه‌ها حرکت کند و با کلیدهای استاندارد باز و بسته شود.

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

نشانهٔ بصری و افوردنس

آیکون‌های رایج مثل فلش یا مثبت/منفی به کاربر می‌گویند بخش جمع‌شدنی است. جهت فلش باید با قرارداد محصول یکی باشد و با باز شدن تغییر کند. کل هدر معمولاً هدف کلیک بزرگ‌تری از خود آیکون است تا در لمس موبایل راحت باشد. کنتراست متن هدر و ضخامت جداکننده‌ها به اسکن سریع فهرست بخش‌ها کمک می‌کند.

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

محتوای داخل پنل؛ محدودیت‌ها

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

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

جایگاه در سیستم طراحی

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

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

آزمایش کیفیت مؤلفه

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

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

جزئیات پیاده‌سازی که آناتومی را می‌شکنند

استفاده از div قابل کلیک به‌جای button، فراموش کردن به‌روزرسانی aria-expanded، قفل شدن فوکوس داخل پنل بسته، و انیمیشن ارتفاعی که در کاهش حرکت همچنان اجباری است از شکست‌های پیاده‌سازی رایج‌اند. همچنین اگر چند آکاردئون در صفحه شناسه‌های تکراری داشته باشند، ارتباط ماشه و پنل خراب می‌شود. در بررسی کد، این موارد باید مثل باگ بصری جدی گرفته شوند.

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

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

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

آکاردئون در برابر گسترش تکی متن

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

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