اصول دیزاین سیستم چیست؟ خود دیزاین سیستم چیست؟ اصلا این مفهوم ازکجا آمده و چرا مهم است؟ 

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

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

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

اینجاست که دیزاین سیستم در طراحی محصول ضروری می‌شود. 

اگر می‌خواهید با طراحی محصول و اصول آن بیشتر آشنا شوید، «۵ اصل اساسی در طراحی محصول [راهنمای جامع]» را بخوانید. 

اصول دیزاین سیستم

قبل‌از‌اینکه درباره‌ی اصول دیزاین سیستم حرف بزنم، لازم است آن را تعریف کنم و همچنین درباره‌ی مزایای دیزاین سیستم و اهمیتی که در روند طراحی محصول دارد، کمی توضیح دهم. 

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

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

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

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

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

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

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

برای مثال، در دیزاین سیستم سایت آکادمی آمانج مواردی از این دست مشخص شده است:

• نقل‌قول‌های انگلیسی با رنگ سبز و ترجمه‌ی آن‌ها (فارسی)‌ با قرمز نوشته شوند؛
•  دکمه‌های CTA چه شکلی و چه رنگی باشند؛
• عنوان‌های اصلی و فرعی در تمامی صفحات چه رنگی باشند؛
• در قسمت‌های مختلف سایت از چه فونتی استفاده شود؛
• نوع آیکون‌ها و رنگ‌بندی آن‌ها در تمام سایت معلوم شده است و … .

۴ اصل اساسی در دیزاین سیستم

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

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

۱. در طراحی دیزاین سیستم باید اهداف و ارزش‌های پروژه (محصول) درنظر گرفته شده باشد

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

۲. دیزاین سیستم باید سازگار با هویت و زبان برند طراحی شده باشد 

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

۳. دیزاین سیستم هم قواعد و اصول کلی دیزاین و هم جزییات را مشخص می‌کند 

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

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

۴. باید اطمینان حاصل شود که تمامی تیم‌ها دیزاین سیستم طراحی‌شده را درک می‌کنند

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

 دیزاین سیستم باید ساده و واضح طراحی شده باشد. چون اگر مبهم باشد، به اهداف خود نمی‌رسد و ممکن است خودش سوءتفاهم ایجاد کند و مانعی برای کار تیمی شود. بنابراین، باوجوداینکه دیزاین سیستم باکمک‌گرفتن از نرم‌افزار‌ها، مثلا فیگما، پیاده‌سازی می‌شود؛ توضیحات و متنی نوشته شده (Documentation) نیز آن را همراهی می‌کند. هدف توضیحات در دیزاین سیستم این است که درک زبان مشترکی را که طراحی شده است، تضمین کند.