سیستم‌های طراحی را در عمل مشاهده کنید

در چند سال اخیر مبحث سیستم‌های طراحی به یکی از موضوعات محبوب و داغ در بین طراحان تبدیل شده است. اگر شما نیز به تازگی وارد این حیطه شده‌اید، به شما خوش آمد گویی می‌گویم! بسیاری از شرکت‌ها و تجارت‌ها در حال حاضر تمرکز بسیاری روی مبحث طراحی دارند و روی آن سرمایه‌گذاری می‌کنند. داشتن یک سیستم طراحی در این بین می‌تواند فواید بسیار زیادی برای شرکت‌ها و تیم‌هایی که در حال پیشرفت هستند داشته باشد. در چنین حالتی این شرکت‌ها و تیم‌ها می‌توانند کنترل روند طراحی را به خوبی در دست بگیرند. جدای از این موارد داشتن تجربه کاربری خوب برای مشتریان امری حیاتی است. داشتن یک سیستم طراحی همچنین می‌تواند اشکالاتی که در روند طراحی پیش می‌آید را کم کند، فرایند طراحی را سرعت ببخشد و آگاهی و مسئولیت‌پذیری را در بین تیم ایجاد کند. 

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

گریدها – سیستم شبکه‌ای

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

سیستم طراحی BuzzFeed کمی متفاوت‌تر است. آن‌ها دو قسمت متفاوت از یکدیگر را دارند، یکی با نام Grid و دیگری با نام Responsive. هر دو قسمت در حقیقت به موضوع شیوه کاری حالت گرید اشاره دارند اما قسمت Responsive مانند یک افزونه عمل می‌کند. 

فاصله‌گذاری

مشابه با گریدها، مبحث فاصله‌گذاری یا Spacing یکی‌دیگر از قسمت‌های مهم و مفید است. در سیستم طراحی Shopify (Polaris) آن‌ها اطلاعات بسیار جامع و کاملی را راجع به مفهوم Padding و Spacing در بین المنت‌هایی مانند card قرار داده‌اند. 

خطاها و اعتبارسنجی‌ها

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

کامپوننت‌های کدنویسی شده

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

Predix کتابخانه بسیار بزرگی از راهنمایی‌ها برای توسعه‌دهندگان در اختیار دارد. همچنین در کنار این موارد ماژول های CSS و کامپوننت‌های رابط کاربری همراه با کدهای‌شان قرار دارند. 

شیوه نامگذاری

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

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

آیکونوگرافی

از راهی که Estonia برای برخورد با آیکون‌ها و المان‌های گرافیکی در سیستم طراحی‌شان برمی‌دارند خوشم می‌آید. آن‌ها راه حل سریعی برای ارائه انتظارات‌شان از المان‌های گرافیکی را دارند. بعد از این، آن‌ها نمونه‌های واقعی از این حالت را نمایش می‌دهند. اضافه بر این مورد، آن ها یازده قاعده که شامل «باید‌ها و نبایدها» می شوند را ارائه می‌دهند.

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

تایپوگرافی

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

دسترسی‌پذیری

هر دو شرکت Microsoft و Quickbooks شامل قسمت‌های بسیاری برای دسترسی‌پذیری هستند. در این بین مخصوصا مایکروسافت جزئیات و اطلاعات بسیار زیادی را برای پیاده‌سازی قابلیت دسترسی‌پذیری در سیستم خود ارائه داده است. آن‌ها به موضوعاتی مانند ‌Contrast, Keyboard functionality, spacing, navigation clarity و... اشاره کرده‌اند. 

هدف دسترسی‌پذیری این است که از داشتن تجربه کاربری سازگار و بدون اشکالی مطمئن شوید. Quickbooks قسمتی را برای موضوع استفاده‌پذیری در موبایل نیز ارائه داده است. 

لحن و صدا

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

Monzo راهنمای جامع لحن و صدایی را در اختیار دارد که حتی شامل قواعد کلی نیز می‌شود. بعد از آن دوباره با سراغ MailChimp باز می‌گردیم. آن‌ها آیتم‌هایی مانند نوشتن پست‌های وبلاگی و ترجمه و... را در برمی‌گیرند.

لوگوها و رنگ‌ها

دو مورد بسیار مهم و اساسی از هر سیستم طراحی که مشاهده می‌کنید رنگ‌ها و لوگوها هستند. به سیستم طراحی Atlassian نگاه کنید. ببینید که چگونه می خواهند تا از یک لوگو استفاده کنند. می‌توانید به سیستم Lonely Planet نیز نگاهی بیاندازید و شیوه مدیریت رنگ‌ها را مشاهده کنید.

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

ترازبندی

من عاشق سیستم طراحی Ant هستم. آن‌ها قسمت کاملی را برای موضوع ترازبندی ارائه کرده‌اند. در نظر گرفتن بحث ترازبندی بسیار مهم است و می‌تواند یکی دیگر از آیتم‌های مهم در خلق سازگارپذیری باشد. 

المان‌های مرسوم رابط کاربری

اضافه بر تمام این موارد باید بگویم که هیج سیستم طراحی بدون استفاده کردن از المان‌های مرسوم رابط کاربری کامل نیست. منظور من از این المان‌ها، دکمه‌ها، فرم‌ها، چک‌باکس‌ها و... هستند.

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

Gestureها

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

Motion

Motionها و انیمیشن‌ها معمولا دسته‌ای از المان‌های طراحی هستند که فراموش می‌شوند. آن‌ها می‌توانند به صورت مؤثر و بسیار مثبت روی تجربه کاربری تاثیر داشته باشند. اینگونه فکر نمی‌کنید؟ سیستم طراحی IBM’s Carbon چنین قسمتی را به صورت مخصوص ایجاد کرده است. اگر از انیمیشن و ترنزیشن در وبسایت‌تان استفاده می‌کنید به این قسمت نگاهی بیاندازید.

Trello نیز در سیستم طراحی خود از چنین بخشی رونمایی کرده است. آن‌ها راهنمای جامعی را برای زمان استفاده از Motionها نوشته‌اند. 

در پایان

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

منبع