سیستم‌های طراحی، کیت‌های رابط کاربری و راهنمای سبک. هر زمان که نام تجاری مطرح می شود، این اصطلاحات هم مطرح می شوند.
اینها اصطلاحاتی هستند که هر طراح محصول باید بداند. نه فقط برای دانستن معنی آنها، بلکه همچنین نحوه استفاده، ساخت و پیاده سازی سیستم های طراحی، کیت‌های رابط کاربری و راهنمای سبک.
بیاید برای همیشه پرونده این 3 دوست عزیز رو ببندیم:))
در ابتدا تعریف هر کدوم رو به صورت واضح بیان میکنیم.
راهنمای سبک یا Style Guide چیست؟
راهنمای سبک سندی است که شامل مجموعه‌ای از قوانین یا استانداردهای سبک گرافیکی، رنگ، تایپوگرافی، نمادنگاری، تصاویر و اصول یک برند است و نحوه استفاده از آن را راهنمایی می‌کند.
راهنمای سبک(Style Guide) ابزاری برای طراحی و توسعه است که انسجام را در رابط کاربری و تجربه یک محصول دیجیتال به ارمغان می آورد. در هسته خود، آنها: همه عناصر طراحی و تعاملاتی را که در یک محصول رخ می دهد، ثبت می کنند. اجزای مهم UI مانند دکمه ها، تایپوگرافی، رنگ، آیکون ها و غیره را در خود جای میدهند.
کیت های رابط کاربری(UI Kit) مجموعه ای سازمان یافته از اجزای طراحی کاربردی قابل استفاده مجدد است. معمولاً از آن به عنوان قلب یک سیستم طراحی معمولی یاد می شود.
کیت های رابط کاربری تعریف می کنند که اجزای رابط کاربری محصولات شما چیست، چگونه رفتار می کنند و چگونه باید در محصول دیجیتالی شما استفاده یا پیاده سازی شوند
عناصری که معمولا در Ui Kit قرار میگیرند:
سیستم طراحی(Design System) مجموعه کاملی از استانداردهای طراحی (راهنمای سبک) و مستندات همراه با کیت ابزار UI، شامل الگوهای UI، اصول طراحی UX و اجزاء است. هنگامی که به یک سیستم طراحی در این زمینه نگاه می کنیم، همه چیزهایی را که طراحان و توسعه دهندگان برای ساخت و مقیاس محصولات دیجیتالی نیاز دارند را در بر می گیرد.
من Design System را مجموعه‌ای از قوانین، اصول، طرح‌ها یا رویه‌ها تعریف میکنم که شامل راهنماهای سبک بصری، کتابخانه‌های الگو، دستورالعمل‌ها و ارزش‌های برند، مستنداتی است که پایه یک زبان طراحی مشترک را تشکیل می‌دهد که به ایجاد استاندارد و کارآمد کمک می‌کند.
توجه به این نکته ضروری است که سیستم های طراحی مانند موجودات زنده هستند. آنها به طور مداوم در کنار محصول و با ظهور فناوری های جدید در حال تکامل و توسعه هستند.
و حالا بریم سراغ موضوع اصلی?. ما هر کدوم از این موارد رو توضیح دادیم
راهنمای سبک و کیت رابط کاربری، مشابه هم هستند، اما یک تفاوت جزئی دارن. راهنمای سبک، شامل مجموعه ای از قوانین و عناصر ui است. اما کیت رابط کاربری، مجموعه ای سازمان یافته از کامپوننت های ui است.
به عنوان مثال: در سند Style Guide، عناصری مانند دکمه ها، رنگ ها، اینپوت ها قرار میگیرند. اما در سند Ui Kit فرم ها، کارت ها، منو ها و ... قرار میگیرند.
اگرچه این کتابخانه ها دارای اسناد و دستورالعمل های گسترده هستند، اما آنها سیستم های طراحی نیستند. طراحان و مهندسان می‌توانند هر طور که بخواهند از این کتابخانه‌های مؤلفه منبع باز استفاده کنند. آنها می‌توانند اجزای کتابخانه را بدون محدودیت ویرایش کنند (به طوری که از نسخه اصلی قابل تشخیص نباشند)، الگوهای جدید بسازند، با کتابخانه‌های دیگر ترکیب شوند یا اجزای سفارشی ایجاد کنند.
اما سیستم طراحی(Design System) متفاوت است. طراحان و مهندسان باید از قطعات به عنوان بلوک های ساختمانی استفاده کنند. آنها باید دستورالعمل‌های سیستم، راهنمای سبک، اصول و سایر اسناد را دنبال کنند تا رابط‌های کاربری با ظاهری سازگار طراحی کنند – مانند پیروی از دستورالعمل‌ها برای ساخت مجموعه لگو.
اگر اعضای تیم بخواهند یک جزء را تغییر دهند یا یک الگوی جدید معرفی کنند، باید از رویه های حاکمیتی سیستم طراحی پیروی کنند. در برخی موارد، تیم سیستم طراحی در مورد نحوه ساخت آن جزء جدید حرف آخر را خواهد زد.
سیستم های طراحی، کیت رابط کاربری و راهنمای سبک تضمین می کنند که فرآیند طراحی محصول به سرعت و کارآمد انجام می شود. آنها به ساخت سریعتر محصولات مقیاس پذیر کمک می کنند و در عین حال تجربه کاربری ثابتی را حفظ می کنند.
در آخر میخوام چند نمونه از Design System های معروف رو معرفی کنم:
معرفی منابع:
ممنونم از وقتی که گذاشتید و مقاله رو مطالعه کردید. انشاالله که مفید واقع شده باشد.
در کنار هم پیشرفت میکنیم.
