همه چیز درباره دیزاین سیستم

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

دیزاین سیستم ها برای این به وجود آمدند که راه حلی برای اشتباهات ما باشند و زمانی که نیاز به توسعه طرحمان داریم به ما کمک کنند.

دیزاین سیستم چیست؟

تعاریف زیادی برای دیزاین سیستم وجود دارد ولی باورهای اشتباه ما از گذشته باعث می شود که ما با این تعریف شروع کنیم که دیزاین سیستم چه چیزی نیست؟

دیزاین سیستم Sketch library ، Style guide ، Pattern library نیست. در واقع همه این موارد به علاوه کلی مفهوم و کاربرد دیگر دیزاین سیستم را تشکیل می دهند.

دیزاین سیستم تنها منبع موثقی هست که با دسته بندی همه المان های مورد نیاز تیم طراحی این امکان را فراهم می کند تا یک محصول، طراحی و توسعه داده شود.

بنابراین دیزاین سیستم یک خروجی نیست، بلکه مجموعه ای از خروجی هاست. این سیستم به صورت مداوم همگام با ابزار ها و تکنولوژی های جدید تکامل می یابد.

این سیستم متشکل از المان های ملموس و نا ملموسی است از جمله ابزارهای مورد نیاز طراحان و برنامه نویسان، پترنها، دستورالعمل ها و … و همچنین شامل موارد نا محسوسی شامل ارزش های برند، روش های انجام کار، ذهنیت افراد، نظرهای مطرح شده و …

تفاوت Style Guide و Pattern Library چیست؟

هر دو این موارد از ملزومات طراحی هستند.

Style Guide

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

Pattern Library

این بخش شامل مولفه های عملکردی و کاربردهایشان می شود.

خیلی از دیزاین سیستم های فعلی شامل هر دو بخش گفته شده هستند، به عنوان مثال Shopify رو در نظر بگیرید که بخش Visual آن نشان دهنده Style Guide و قسمت Component آن همان Pattern Library است.

تمایل افراد برای ساده کردن فرآیند طراحی و مولفه های آن موضوع جدیدی نیست اما در سال های اخیر بسیار بیشتر هم شده است به طوری که بیشتر شرکت ها همه فعالیت های طراحی خود را دیجیتالی کرده اند.

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

باید شکاف بین دنیای چاپ و دیجیتال را با یک زبان مشترک که مدام در حال تکامل است پر کنیم. دیزاین سیستم در واقع همان دستورالعمل های گرافیکی گذشته است که بالغ تر و یکپارچه تر شده است. در واقع ابزاری است که این امکان را فراهم می کند تا مجموعه ای از کامپوننت های مورد نیازمان را بسازیم و با سایر افراد به اشتراک بگذاریم.

درون این سیستم چه می گذرد؟

هدف اصلی دیزاین سیستم، تسهیل فعالیت های اعضای تیم است.

بنابراین به جای اینکه از خودمان بپرسیم چه اطلاعاتی لازم است به دیزاین سیستم بدهیم ، باید بپرسیم چه کسی و چگونه قرار است از آن استفاده کند؟

زمانی که جامعه هدف، ایده اولیه، میزان حرفه ای بودن اعضای تیم درباره موضوع مورد بحث، ابزارهای قابل استفاده و … را مشخص کردیم و تعیین کردیم روی چه چیزی باید کار کنیم، به آسانی می توانیم کار را شروع کنیم.

اهداف و ارزش ها

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

ارزش ها ، با توجه به اهداف برند، انتخاب های ما را شکل می دهند. مهم است که طرح های ما با این ارزش های کلیدی در تضاد نباشند.

علاوه بر ارزش های برند و محصول، ارزش های دیگری نیز می توانیم برای تیم تعیین کنیم که ذهنیت مشترک بین اعضای تیم ایجاد کند.

قواعد طراحی

اولین نکته ای که باید به خاطر بسپارید : قواعد طراحی بسیار بیشتر از جوانب بصری یک محصول هستند.

قواعد طراحی، دستورالعمل هایی هستند که به تیم طراحی کمک می کنند تا به اهداف تعیین شده برای محصول نهایی دست یابند.

قواعد طراحی، انتخاب های ما را در فرآیند طراحی تعیین می کنند.

زبان و هویت برند

هویت برند باید در جهت استراتژی و اهداف برند تعریف شود

Alla Kholmatova الگوهای ادراکی را طبق لیست زیر مشخص می کند:

• رنگها
• فونتها
• فضاها
• اشکال
• آیکونها
• تصاویر
• انیمیشنها
• آواهاولحنها
• صداها

همه این ها الفبای یک برند را شکل می دهند که تعیین این ها شروع خوبی در طراحی محسوب می شود ولی قطعا کافی نیست.

ما از این الفبا برای ساختن کلمات استفاده می کنیم که بتوانیم با کنار هم قرار دادن درست این کلمات به یک جمله خوب برسیم. این الفبا به قواعد یا گرامر نیاز دارند که نقش یکپارچگی را در دیزاین سیستم ایفا می کند.

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

کامپوننت ها و پترن ها

کامپوننت ها و پترن ها قلب سیستم طراحی هستند. تمام المان هایی که درباره آنها بحث کردیم در واقع به خلق این دو مورد کمک می کنند تا بتوانیم امکان داشتن یک تجربه خوب و مستمر از محصولمان ایجاد کنیم.

کامپوننت های ما در واقع مانند قسمت های یک LEGO می باشند که در نرم افزارهای طراحی مانند اسکچ توسط طراحان استفاده می شوند و توسط برنامه نویسان مستقیما به کد تبدیل می شوند.

عملکرد این کامپوننت ها باید مشخصا تعیین شود.

پترن ها در واقع راهنمای استفاده منطقی از این کامپوننت ها هستند.

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

ایده دیزاین سیستم از کجا آمده است؟

دیزاین سیستم با الهام از ساختار مولکولی مواد در سال ۲۰۱۳ توسط Brad Frost معرفی و Atomic Design نام گرفت.

مفهوم Atomic Design اجزای صفحه را به بخش های مختلفی که کوچکترین آن اتم بود تقسیم میکرد.

این بخش ها شامل ۵ سطح میشد که شامل موارد زیر است:

اتم (Atoms)

اتم ها کوچکترین اجزای صفحه می باشند که می تواند شامل دکمه ها ، برچسب ها (Label) ، اجزای فرم ها ، رنگ ها ، فونت ها و … باشد.

مولکول (Molecules)

مولکول متشکل از چندین اتم می باشد. به طور مثال ترکیب یک باکس متنی (Text Box) و یک دکمه (Button) می تواند باکس جستجو را بسازد که یک مولکول را تشکیل دهد که به آنها Component هم میگویند.

ارگانیزم (Organisms)

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

قالب (Templates)

قالب ها از چندین ارگانیزم تشکیل شده است و ظاهر کلی رابطه کاربری ما را تشکیل میدهد.

به طور مثال قرار گرفتن منو بالای سایت و محتوای مطلب و بخش مطالب مرتبط و دیدگاه ها که هر کدام یک ارگانیزم هستند ، قالب ما را شکل میدهد.

صفحه (Pages)

صفحات نمونه واقعی قالب ها می باشند که محتوای واقعی شامل متون و تصاویر و … در آن قرار گرفته است. ظاهری که از هر وب سایت یا اپلیکیشن موبایل میبینید مرحله آخر این روند یعنی صفحات میباشد.

چه نوع دیزاین سیستمی مناسب است؟

می توانیم بگوییم تقریبا به ازای هر تیم یا محصول یک دیزاین سیستم وجود دارد،

برای تعریف سیستم مخصوص به خودمان باید یک سری سوالات را پاسخ دهیم:

• چند نفر قرار است از این سیستم استفاده کنند؟
• مشخصات این افراد و اینکه تا چه حد به موضوع اشراف دارند تعیین شود
• چند محصول قرار است یکپارچه شوند؟ روی چند پلتفرم؟ چه تکنولوژی استفاده میشود(Angular, React,...)؟
• تداوم این محصول راچگونه تعریف میکنیم؟

سیستم قاعده مند و بی قاعده

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

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

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

سیتم ماژولار یا یکپارچه

یک سیستم ماژولار از بخش های مختلف که می توانند قابل تغییر یا قایل استفاده مجدد باشند تشکیل شده است. این سیستم برای پروژه هایی که نیاز به مقیاس پذیری سریع دارند یا باید با کاربران مختلف تطبیق داده شوند بسیار مناسب است. نکته منفی این سیستم ها این است که ممکن است گران تمام شوند زیرا ایجاد ماژول هایی که مستقل هستند اما باید به درستی کنار یکدیگر عمل کنند که کار راحتی نیست!

این مدل سیستم ها در کاربردهایی با مقیاس بزرگ بسیار مناسب هستند از جمله سایت های تجارت الکترونیک، مالی و دولتی .

در یک سیستم ماژولار ، مفهوم Atomic Design (طراحی اتمی) بسیار جذاب خواهد بود.

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

سیستم متمرکز یا توزیعی

خود سازمانی که از سیستم طراحی استفاده می کند در تکامل و مقیاس پذیری این سیستم نقش مهمی دارد. Nathan Curtis انواع مختلف سازمان ها را توضیح می دهد که در تصویر زیر ۲ مدل آورده شده است:

در مدل متمرکز یک تیم به سیستم اختصاص داده می شود تا آن را بهبود دهد. این تیم برای تسهیل کار سایر تیم ها ایجاد می شود و در ارتباط نزدیکی با آنها قرار دارد تا اطمینان حاصل کند این سیستم نیازهایشان را تامین می کند.

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

در هر کدوم از این مدل ها، پیشنهاد می شود همه افراد مشارکت داشته باشند و به بهبود سیستم کمک کنند تا حس مشارکت در همه افراد تیم به وجود بیاید.

نمونه ای از دیزاین سیستم ها

Material Design به خاطر سادگی در جستجو و ابزارهایی که در اختیار طراحان و برنامه نویسان قرار می دهد

Atlassian به خاطر کامل و جامع بودنشان (مثل Jira)

Polaris از کمپانی Shopify ، به خاطر یکپارچگی که بین طراحان و برنامه نویسان ایجاد می کند.

IBM ، برای عملکرد فوق العادش در ایجاد زبان طراحی

ابزارهایی برای ساخت دیزاین سیستم

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

Invision App در کنار Sketch و Adobe XD یکی از بهترین ابزارهای طراحی می باشد که برای ساخت دیزاین سیستم ابزاری جداگانه دارد.

UX Pin هم مانند Invision App دارای یک دیزاین سیستم مجزا است که به راحتی میتوانید از آن استفاده کنید.

Sketch یک اپ طراحی است که روی سیستم عامل مک قابل استفاده است و در کنار کاربرد خود این امکان را به شما میدهد که بتوانید دیزاین سیستم خود را طراحی کنید.

Adobe XD هم این امکان را به شما میدهد که در کنار کاربرد خود ، بتوانید دیزاین سیستم خود را دستی طراحی و پیاده سازی کنید. Adobe XD بر خلاف Sketch روی ویندوز و مک قالب استفاده می باشد.

Figma یک ابزار طراحی است که در کنار کاربرد خود به شما امکان طراحی دیزاین سیستم را می دهد. همچنین به دلیل اینکه فیگما کلود می باشد امکان استفاده روی ویندوز ، مک و خود بستر وب (مرورگر) را به شما میدهد.

Lucid هم یک ابزار خوب برای ساخت دیزاین سیستم می باشد.

Lingo یک ابزار بسیار خوب است که در کنار کاربردهایی که دارد امکان ساخت دیزاین سیستم و مدیریت آن را به شما می دهد.

Atomize یک پکیج ساخته است که شامل تعداد زیادی کامپوننت است و یک دیزاین سیستم کامل برای پروژه شماست.

نتیجه گیری

یک سیستم طراحی، یک محصول کامل است که به اعضای تیم یک پروژه کمک می کند تا محصول دیگری را خلق کنند!

همانند هر محصول خوب دیگری، این سیستم نیز به صورت مستمر در حال بهبود است و کاربران آن (طراحان، برنامه نویسان و…) همیشه هدف اصلی این بهبود خواهند بود.

هرچه این سیستم با جریان کاری طراحان و برنامه نویسان همسو تر باشد، اثر بخشی بیشتری دارد.

تمام آنچه گفته شد فقط یک شروع بود!

در آینده نزدیک شاهد تحولات تکنیکی بسیاری برای راحت تر کردن زندگی خواهیم بود به نحوی که تمرکز طراحان فقط روی ایجاد یک تجربه خوب برای کاربران بدون داشتن دغدغه پیاده سازی باشد.