بیاین قبل از اینکه شروع کنیم، با هم دیگه یه چیزی رو فرض کنیم. فکر کنید وارد یه سایتی شدین که بیشتر از چهار یا پنج تا دیزاین مختلف برای دکمه هاش در نظر گرفته، رنگ‌های متفاوت، شکل‌های مختلف و حتی سایزها هم با هم دیگه هیچ هماهنگی ای ندارن.
احتمالا این شرایط تجربه کاربری خیلی تمیز و خوبی براتون نمیسازه! حالا توی همین وضعیت کذایی نجات دهنده‌یِ واقعی دیزاین سیستمیهِ که قراره مثل یک ابرقهرمان وارد صحنه بشه.
تعریف دیزاین سیستم در معنای کلی به این شکله: یک دیزاین سیستم مجموعه‌ای از راهنماها و اصول مربوط به یک کسب و کاره. دیزاین سیستم کمک میکنه تا هویت بصری برند تو طول پروسه‌ی تولید، ثابت و یکسان بمونه. دیزاین سیستم‌ها بر اساس نیازهای پروژه و کسب و کارها تولید میشن و مثل یک موجود زنده در حین پروژه میتونن بسته به نیاز تکامل و تغییر پیدا کنن.
اما بیاین یکم بیشتر وارد قضیه بشیم. و چندتا سوال هم مطرح کنیم.
داشتن یک دیزاین سیستم علاوه بر اینکه باعث داشتن ثبات توی کار میشه میتونه به دلیل وجود استایل‌های محدودتر به کمک دولوپرها هم بیاد و از اونجایی که ممکنه پیش بیاد که یک پروداکت نیاز به بهتر شدن داشته باشه اگه شما از اون دسته دیزاینرهای هوشمندی باشین که از دیزاین سیستمِ قهرمان استفاده کردین تواناییتون برای تغییر، به شکل عجیبی بیشتر میشه. بزارید قضیه رو یه جور دیگه توضیح بدم؛ فرض کنید همه‌ی دکمه‌ها (Button) توی سایت شما مستطیل‌های گوشه تیز هستن و حالا یهو کارفرماتون به این مسئله فکر میکنه که انقدر تیز بودن مستطیل‌ها نه تنها تجربه‌ی کاربری خوبی برای کاربرها ایجاد نمیکنه بلکه میتونه خشونت آمیز و ترسناک هم باشه. حالا شما باید توی 100 صفحه بچرخید و تک تک مستطیل‌های گوشه تیزتون رو گوشه گرد کنید. اما نه، بیاین به جای توصیف وضعیت شما تو اون لحظات یکم به عقب برگردیم و وضعیت شما وقتی دیزاین سیستم دارید رو توصیف کنیم. داشتن دیزاین سیستم صادقانه میتونه شرایط شما رو از این رو به اون رو کنه. شما از یک آدم مفلوک با حجم بی پایان مستطیل‌های نوک تیزی که منتظرن تا توسط شما صیقل داده بشن به آدمی تبدیل میشید که با چندتا کلیک ساده قراره به تمامی خواسته‌هاش برسه.
وقتی صحبت از دیزاین سیستم میشه زیاد پیش میاد که با چیزهای دیگه‌ای مثل استایل گاید یا پترن لایبراری اشتباه گرفته بشه، پس بد نیست الان به طور کلی تفاوت‌هاشون رو بررسی و تلاش کنیم که این اشتباه رو تا حدی کمتر کنیم.
استایل گاید اولین و کم جزئیات‌ترین خروجی ماست. توی این بخش فقط قراره استایل کلی کار مثل پالت رنگی، تایپوگرافی، آیکون‌ها و لوگو مشخص بشن. یعنی اصول کلی برندی که قراره براش کار رو دیزاین کنیم. اطلاعات این بخشمون میتونه خیلی زیاد شبیه به هویت بصری‌ای باشه که هر برند یا سازمانی برای خودش تعریف کرده.
پترن لایبراری مرحله دوم با جزئیات بیشتری نسبت به استایل گایدهاست. این بخش شامل همه‌ی اطلاعات استایل گایدهاست و علاوه بر اون به سوالاتی مثل یک چیز کجا و چطور باید باشه و کجا و چطور باید اجرا بشه هم پاسخ می‌ده. پترن لایبراری مشخص میکنه که اجزای رابط کاربری محصولات ما چه چیزهایی هستن، چطور رفتار میکنن و چطور باید در محصول ما استفاده یا پیاده سازی بشن.
خب این بخش هم مرحله سوم و کامل‌ترین بخش ماست. شامل تمامی اطلاعات دو تا بخش قبل یعنی استایل گاید و پترن لایبراری‌ها. دیزاین سیستم‌ها مجموعه اطلاعات جامع و کاملی هستن که بخش‌های مختلفی رو شامل میشن و از اونجایی که کل این مقاله در مورد دیزاین سیستم‌هاست احتمالا ابهامات شما در مورد این بخش کمتر از دوتا بخش قبلی باشه. اما برای اینکه کمترشون هم بکنیم بهتون پیشنهاد می‌کنم به لینک‌های زیر سر بزنید و نمونه‌های کامل و خوبی رو از دیزاین سیستم‌ها ببینید. البته جا داره این رو هم بگم که دیزاین سیستم‌هایی مثل متریال دیزاین، بوت استرپ یا انت دیزاین، دیزاین سیستم‌هایی هستن که این قابلیت رو دارن تا توسط همه‌ی دیزاینرها استفاده بشن. یعنی این دیزاین سیستم‌ها مثل یک راهنمایی هستن که میشه با مطالعشون اصول کلی و بایدها و نبایدهای دیزاینمون رو در بیاریم. البته این رو هم فراموش نکنیم که در آخر این ما هستیم که قوانین مربوط به دیزاینمون رو مشخص می‌کنیم و تو این کار هیچ باید و نبایدی وجود نداره.
بخش مهم قواعد دیزاین سیستم توسط دیزاینرها تعیین و ساخته میشه، مواردی مثل فاصله‌ی بین باکس‌ها، فونت، رنگها، شکل ایکون‌ها، پالت‌رنگی و حتی لحنی که قراره با اون با مخاطبمون صحبت کنیم. مثلا فکر کنید وقتی کاربر داره شماره تلفنش رو برای ثبت نام وارد میکنه یک رقم کم می‌زنه، حالا فکر کنید ما قراره بهش بگیم شمارت مشکل داره و دوباره بزنش، برای رسوندن این مفهوم به کاربرمون ما میتونیم از روش‌های مختلفی استفاده کنیم یکی ممکنه بگه "ای بابا به نظر میرسه شمارت مشکل داره یه بار دیگه امتحان کن" یا مثلا "لطفا شمارتون رو دوباره وارد کنید" این که کدوم رو انتخاب کنید بسته به برندی و کاربرهایی که خواهید داشت میتونه متفاوت باشه ولی مسئله اینکه همین انتخاب لحن هم بخشی از دیزاین سیستم ماست.
دیزاین سیستم‌ها علاوه بر اینکه باعث میشن کار برای خود دیزاینرها راحت تر بشه، کار رو برای کل تیم راحت‌تر میکنن، داشتن یک فایل کامل که قراره برامون مشخص کنه از چه متریال، شیپ، رنگ و حتی زبانی استفاده کنیم باعث میشه هر دیزاینری ساز خودشو نزنه و خروجی خیلی یک دست‌تر بشه.همین مسئله باعث میشه کاربر یک تجربه کاربری بهتر هم داشته باشه و همونطوری که قبلتر هم گفتیم وجود یک نظم و هارمونی و محدودیت استفاده از اشکال و سایزهاشون کار رو برای دولوپرها هم راحت‌تر میکنه.
