منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا با کمک هوش مصنوعی · آبان ۱۴۰۵ · زمان مطالعه: حدود ۹ دقیقه

کیت رابط کاربری (UI Kit) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند. ترجمه و بازنویسی این متن با کمک هوش مصنوعی انجام شده است.

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

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

کیت رابط کاربری چیست؟

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

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

کیت، کتابخانه، سیستم طراحی

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

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

• - کیت رابط: اجزای بصری آماده، معمولاً در یک ابزار طراحی مثل فیگما. شکل دکمه را می‌دهد، اما نمی‌گوید کِی از آن استفاده کنید.
• - کتابخانهٔ اجزا: همان اجزا، با کد و رفتار و حالت‌های مختلف. دکمه‌ای که می‌داند غیرفعال یا در حال بارگذاری چه شکلی دارد.
• - سیستم طراحی: اجزا، به‌علاوهٔ اصول، رهنمودها، توکن‌ها و فرایندی برای نگهداری و تغییر. می‌گوید چرا این دکمه و نه آن یکی. شرح رهنمودها را در رهنمودهای طراحی آورده‌ام.

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

شش فایدهٔ کیت

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

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

یک ادعای منبع را باید با احتیاط خواند. اینکه کیتی ویژگی‌های دسترس‌پذیری دارد، به این معنا نیست که رابطی که با آن ساخته می‌شود دسترس‌پذیر است. کنتراست دکمهٔ کیت ممکن است درست باشد، اما اگر رنگش را عوض کنید یا روی تصویر بگذاریدش، دیگر نیست. دسترس‌پذیری را باید روی رابط نهایی سنجید، نه روی کیت.

سه نوع کیت

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

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

چطور کیت درست را انتخاب کنیم

منبع سه معیار برای انتخاب پیشنهاد می‌کند.

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

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

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

کیت، و خطر یک چهرهٔ تکراری

این بخش در منبع نیست. منبع بیشتر از فایده‌های کیت می‌گوید. اما کیت یک هزینهٔ پنهان هم دارد که معمولاً دیر دیده می‌شود.

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

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

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

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

کیت رابط کاربری در بافت فارسی

این بخش هم افزودهٔ من است و از کار روی محصولات فارسی‌زبان می‌آید.

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

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

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

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

جمع‌بندی

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

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