سیستم طراحی چیست؟
بسیاری از سازمان‌ها و شرکت‌ها چیزی را ایجاد کرده‌اند که به آن سیستم طراحی می‌گویند، اما این مجموعه‌ها معمولاً چیزی بیش از گروهی از عناصر طراحی و قطعاتی کد نیستند. در حالیکه یک راهنمای استایل‌بندی یا یک کتابخانه الگو می‌تواند نقطه شروع خوبی برای یک سیستم طراحی باشد، ولی تنها عناصر این سیستم نیستند.
سیستم زبان طراحی چیست؟
هر چند که هنوز یک اصطلاح مشترک بین طراحان در جامعه طراحی برای این مفهوم شکل نگرفته است و آن را با مفاهمی مختلفی از جمله سیستم طراحی، زبان طراحی، خطوط راهنمای استایل‌بندی، کتابخانه الگوها، سیستم زبان طراحی و غیره می‌شناسند، اما تقریباً همه به یک مفهوم اشاره می‌کنند:
در دهه 1960، تکنولوژی‌های کامپیوتری شروع به سبقت گرفتن از برنامه‌های نرم‌افزاری کردند. رایانه‌ها سریعتر و ارزان‌تر شدند، اما فرآیند توسعه نرم‌افزار تدریجی پیش می‌رفت، نگهداری آن سخت بود و خیلی مواقع با خطا روبرو بود. این فاصله و شرایط دشواری که در آن بودیم، به عنوان “بحران نرم‌افزار” شناخته می‌شد.
در 1968، در کنفرانس NATO که در مورد مهندسی نرم افزار بود، داگلاس مک‌ایلروی ایده توسعه مبتنی بر اجزا[2] را به عنوان یک راه‌حل ممکن برای این شرایط پیشنهاد کرد. توسعه مبتنی بر اجزاء با ایجاد امکان استفاده مجدد برای کدهای برنامه روشی را برای سرعت بخشیدن به فرآیند برنامه‌نویسی فراهم می‌کرد که منجر به کاراتر شدن آنها و مقیاس‌پذیری بهتر می‌شد. این کار باعث کاهش تلاش‌ها، هزینه‌ها و همچنین افزایش سرعت توسعه نرم‌افزار می‌شود.
حالا پس از گذشت 50 سال از بحران نرم‌افزار، ما شاهد چالش مشابهی هستیم، اما این بار در حوزه طراحی با آن مواجه گشته‌ایم. طراحی در حال تلاش برای مقیاس‌پذیری با فرآیند توسعه و تولید برنامه‌هاست.
آیا تا به حال این اتفاق برایتان افتاده است که در حین بازرسی واسط کاربری متوجه شده باشید که از تعداد زیادی رنگ از خانواده آبی یا جایگشت‌های مختلفی از یک دکمه استفاده شده باشد. این مسئله را در هر یک از قطعات واسط کاربری ضرب کنید تا ببینید که برنامه شما تا چه اندازه از لحاظ طراحی ناسازگار، ناقص و برای نگهداری و توسعه پیچیده است.
برای حل مسئله عقب ماندن طراحی از فرآیند توسعه، شرکت‌ها می‌توانند یکی از سه کار زیر را انجام دهند:
- افراد بیشتری را انتخاب کنند
- سریعتر طراحی کنند
- راه‌حل‌هایی را طراحی کنند که برای چند مسئله قابل استفاده باشد
حتی با بودن افراد بیشتر هم واقعیت این است که سفارشی طراحی کردن یک محصول به سختی قابل مقیاس‌پذیری است. این مدل طراحی کند است، ناسازگار بوده و برای نگهداری در طول زمان بسیار سخت است.
اینجا همان جایی است که یک سیستم زبان طراحی می‌تواند کمک شایانی به فرآیند طراحی نماید.
چرا نیاز به سیستم زبان طراحی داریم؟
استفاده از سیستم زبان طراحی در یک شرکت یا سازمان فواید بسیاری را برای تمامی تیم‌های توسعه محصول و همچنین تیم‌های دیگر مانند بازاریابی، برند، فروش، پشتیبانی و غیره دارد. در عین حال، کاربر نیز از یکپاچگی و همخوانی محصول در سکوهای مختلف سود برده و در انتها تجربه کاربری بهتری را خواهد داشت. از فواید استفاده از سیستم زبان طراحی می‌توان به موارد زیر اشاره نمود:
طراحی مقیاس‌پذیر
زمانی که یک محصول بزرگ شده و تیم طراحی نیز توسعه می‌یابد، متمرکز شدن طراحان بر روی بخشهای مختلف برنامه مانند: جستجو، مدیریت حساب و غیره امری کاملاً طبیعی است. این مسئله که معمولاً همراه با جدا شدن طراحان از یکدیگر هست، منجر به ایجاد زبان طراحی قطعه قطعه شده‌ای می‌گردد که در آن هر طراح به زبان خود صحبت می‌کند. این مسئله زمانی اتفاق می‌افتد که طراحان مشکل را به صورت فردی و نه به شکلی سیستماتیک حل می‌کنند.
با نبود یک زبان طراحی مشترک برای یکپارچه‌سازی محصول یا خانواده محصولات، تجربه کاربری شروع به شکسته شدن می‌کند؛ همانطور که فرآیند طراحی نیز همین بلا بر سرش می‌آید. برای ایجاد تراز در داخل تیم، باید یک مرجع مشترک از آنچه درست است در اختیار همه قرار بگیرد – محلی برای ارجاع به الگوها و استایل‌های رسمی و درست طراحی.
معمولاً این کار با یک مستند ایستا شبیه کتاب یا یک مجموعه از طراحی‌ها ایجاد می‌شود ولی تجربه نشان داده است که این نوع از مراجع به سرعت قدیمی شده و در طول چند ماه، دیگر قابل استفاده نیستند. به همین دلیل، برای این مسئله پیشنهاد می‌شود تا از یک سایت که با خود سیستم زبان طراحی ساخته شده باشد، استفاده گردد.
مدیریت قرض‌های طراحی
هر چه که سن برنامه بیشتر می‌شود، قرض تیم‌ها به آن بیشتر می‌گردد. تیم طراحی نیز از این مسئله مبرا نیست. البته منظورمان قرض مالی نیست؛ بیشتر قرض فنی است. زمان‌هایی بوده است که به دلیل فشار کاری یا اولویت زمانی، تیم طراحی مجبور شده است که به سرعت از طراحی ها بگذرد و یا چیزی را آماده کند و اصلاح آن را به آینده موکول نماید. این مسئله باعث می‌گردد که نگهداری طراحی در طول زمان به شدت سخت و پیچیده شده و در طول زمان جمع این قروض منجر به سنگین شدن آن و کاهش سرعت رشد گردد.
اگرچه عمل طراحی به‌ذات منجر به ایجاد قرض نمی‌گردد – مانند پول خرج کردن که به‌ذات باعث مقروض شدن نمی‌شود، اما استفاده از سیستم زبان طراحی به شما کمک می‌کند تا این میزان قرض را به حداقل برسانید.
طراحی سازگار
اجزایی که استاندارد شده باشند و به شکلی سازگار و شکلی مکرر به کار گرفته شوند منجر به تولید برنامه‌هایی می‌گردند که عملیات آنها برای کاربر قابل پیش‌بینی‌تر و قابل فهم‌تر است. این نوع از اجزاء همچنین به طراحان این امکان را می‌دهند که زمان کمتری را بر روی استایل دادن به المان‌ها و جنبه‌های بصری آنها بگذارند و زمان بیشتری را صرف ایجاد تجربه کاربری بهتری بکنند.
تولید نمونه اولیه سریعتر
هنگامی که با یک سیستم زبان طراحی کار می‌کنید، استفاده از جریانات، تعاملات و اجزاء و قرار دادن آنها در کنار هم به سرعت چیدن لگوهای اسباب‌بازی برای ساخت یک وسیله می‌شود. این مسئله به شما کمک می‌کند تا تعداد نامحدودی نمونه اولیه را برای آزمایش ایده‌های مختلف بسازید تا تیم خود را در رسیدن به بینش و داده مناسب یاری کنید.
تکرارپذیری سریعتر
چه بخواهید سیستم را به بلوغی جدید برسانید و یا تغییراتی در مسیر واسط کاربری ایجاد نمایید، استفاده از سیستم زبان طراحی موجب می گردد تا نتیجه نوشتن صدها خط کد فقط با تغییر چند کاراکتر امکان‌پذیر باشد. در نتیجه توسعه سریعتر شده و تکرارهای طراحی و توسعه، سریعتر و با سختی کمتری صورت می‌گیرند.
بهبود کاربردپذیری
ناسازگاری در واسط کاربری موجب کاهش کاربردپذیری می‌گردد. استفاده از سیستم زبان طراحی موجب یکپارچگی در طراحی و المان‌ها شده و استفاده نامناسب از آنها را در جایگاه‌های مختلف کاهش می‌دهد.
در نظر گرفتن دسترس‌پذیری
در یک سیستم زبان طراحی، دسترس‌پذیری (طراحی سیستم برای کاربرانی با ناتوانی جسمی یا ذهنی) در سطح اجزاء در نظر گرفته می‌شود. این کار با بهینه‌سازی طراحی و پیاده‌سازی برای سرعت‌های پایین اینترنت یا کامپیوترهای قدیمی صورت می‌پذیرد.
کاهش هزینه و زمان
استفاده از سیستم زبان طراحی، منجر به این می‌گردد تا با یکبار طراحی شدن اجزاء اصلی و پیاده‌سازی آنها، سرعت توسعه محصول افزایش پیدا کرده و در عین حال هزینه‌ها نیز کاهش پیدا کند. زیرا طراحان نیازی به فکر کردن در مورد هر قطعه از طراحی نداشته و برنامه‌نویسان نیز نباید هر قطعه را از اول کدنویسی کنند. این مسئله می‌تواند منجر به افزایش کارایی و کیفیت محصول و در عین حال توسعه قابلیت‌های جدید در زمانی کمتر گردد.
سیستم یا زبان طراحی ؟
یکی از مواردی که در هنگام مواجه با مفهوم سیستم زبان طراحی با آن روبرو می‌شویم وجود عبارات دیگری در حوزه طراحی است که با این مفهوم اشتباه گرفته می‌شوند. در اینجا به بررسی آن مفاهیم و تفاوتشان با مفهوم سیستم زبان طراحی می‌پردازیم.
راهنمای استایل‌بندی (Style Guide): علی‌رغم اینکه راهنمای استایل، تمامی موارد لازم برای طراحی بصری المان‌ها را در حوزه تجربه کاربری و طراحی واسط کاربری بیان می‌دارد ولی این مستند بخشی از یک سیستم زبان طراحی است. در کنار این بخش باید قسمت‌های دیگری از جمله اجزاء، قوانین تجربه کاربری و غیره نیز وجود داشته باشند تا بتوان از همگی در راستای طراحی یک محصول مناسب استفاده کرد.
کتابخانه الگوها (Pattern Library): مانند راهنمای استایل، کتابخانه الگوها نیز بخش دیگری از سیستم زبان طراحی است که به طراحان کمک می‌کند تا اجزای موجود در سیستم را براساس قوانین و الگوهای مناسب مورد استفاده قرار دهند.
کتاب یا راهنمای برند (Branding Guide): یکی از مسائلی که در توسعه سیستم زبان طراحی مطرح می‌شود تقابل موارد موجود در کتاب یا راهنمای برند و آن چیزی است که باید در سیستم زبان طراحی آورده شود. بخش‌هایی از سیستم زبان طراحی به‌خصوص در بخش طراحی بصری مشابه آن چیزی است که در کتاب یا راهنمای برند آمده است.
در طراحی یک سیستم زبان طراحی باید به این نکته توجه داشت که تمام طراحی‌های اجزاء و قوانینی که به خصوص براساس فضای طراحی بصری سیستم طراحی می‌شوند باید تابع قوانین برند بوده تا هویت سازمان و محصول را مشخص نماید ولی آنچه در راهنمای برند مطرح می‌شود برای کلیت سازمان بوده و طبیعی است در هنگام استفاده در یک محصول دیجیتال باید این مفاهیم در لایه خود دوباره با نگاه به مفاهیم اصلی بازنویسی شوند. این کار به منزله نادیده گرفتن اصول برند نبوده و صرفا استفاده مناسب از مفاهیم در جایگاه خود است. بدیهی است در عدم نبود یک سیستم زبان طراحی تمامی قوانین برند مستقیم بر روی طراحی اثرگذار هستند.
چه نوع از سیستم یا زبان طراحی؟
می‌توان گفت که به ازاء هر تیم یا محصول یک سیستم طراحی وجود دارد. برای توسعه نسخه‌ای مناسب برای محصولمان باید سوالات درستی را از خود بپرسیم.
- چه افرادی از این سیستم استفاده می‌کنند؟
- سابقه آنها چه چیزی است و آیا بلوغ کافی برای استفاده از این مفهوم را دارند؟
- چند محصول از این سیستم استفاده خواهند کرد؟ بر روی چند سکو؟ و چه تعداد تکنولوژی؟
- چه درجه‌ای از سازگاری را در طول خانواده محصولات نیاز داریم؟
بسته یا آزاد؟
یک سیستم بسته دارای مستندات جامع و با جزئیات کامل است و به طور کاملی بین طراحی و توسعه هماهنگ شده است. برای اضافه شدن یک الگوی جدید به سیستم یک مسیر کاملاً سفت و سختی وجود دارد. یک سیستم بسته باید جامع باشد تا بتواند بیشتر حالت‌هایی که یک تیم با آنها برخورد می‌کند را دربرگیرد.
یک سیستم آزاد فضای بیشتری را برای تجربه کردن طراح در اختیارشان قرار می‌دهد. این مدل از سیستم برای فراهم کردن چارچوبی برای تیم‌ها در عین در نظر گرفتن مقدار آزادی عمل مطرح می‌شود. طراحان و توسعه دهندگان براساس نیازی که دارند، این آزادی را خواهند داشت که از مفاهیم آن استفاده کنند یا نه.
ماژولار یا یکپارچه؟
یک سیستم ماژولار از بخشهای قابل جایگزینی و با قابلیت استفاده مجدد ساخته شده است. این مدل برای پروژه‌هایی مناسب هستند که به سرعت می‌خواهند بزرگ شوند و باید نیازهای کاربران مختلفی را پوشش دهند. نکته منفی در مورد این سیستم‌ها این است که اغلب تولید چنین سیستم‌هایی هزینه بر است (چون طراحی ماژولی که بتواند به صورت مستقل باشد در حالیکه با بقیه هم بتواند کار کند، کار سختی است). این نوع از سیستم به شکلی خاص برای پروژه‌هایی با مقیاس بزرگ مانند سایت‌های تجارت الکترونیکی، مالی، دولتی مناسب است. برای طراحی سیستم ماژولار می‌توان از مدل Atomic Design اسفاده کنیم.
تمرکز یک سیستم یکپارچه برای رسیدن به یک بستر واحد است. اگر چه این سیستم هم دارای اجزاء است ولی این اجزاء قابل جا‌به‌جایی نیستند. این نوع از سیستم بیشتر برای محصولاتی استفاده می‌شود که بخشهای کمی با قابلیت تکرار دارند و معمولاً بیشتر نیازمند تغییرات در سطح طراحی هستند.
متمرکز یا توزیع شده؟
در مدل متمرکز، یک تیم مرکزی مسئول سیستم و توسعه آن است. این تیم، کار بقیه تیم‌ها را تسهیل می‌دهد و باید به طور نزدیکی با آنها کار کند تا مطمئن شود که سیستم نیاز تمام تیم‌ها را پوشش دهد.
در یک مدل توزیع شده، چندین نفر از چندین تیم مسئول توسعه هستند. این مدل از سیستم سریعتر توسعه می‌یابد برای اینکه همه درگیر آن هستند، ولی حتماً احتیاج به یک رهبر تیمی دارد تا چشم‌انداز کلی را حفظ کند.
نمونه‌هایی از سیستم زبان طراحی
در دنیا نمونه‌های بسیاری از شرکت‌ها و سازمان‌هایی وجود دارند که سیستم زبان طراحی مخصوص به خود را طراحی کرده‌اند. این سیستم‌ها عموماً در سطوح مختلف، از یک سیستم زبان طراحی کامل مانند Google Material Design یا Microsoft Fluent Design گرفته تا سیستم‌های کوچکتر مانند Airbnb Design System، Spotify Design System، Linkedin Design System و غیره، طراحی گردیده‌اند.
نمونه‌هایی از سیستم‌های طراحی
Google Material Design
Atlasian
