یک دیزاین سیستم شامل مجموعه‌ای از کامپوننت‌های مختلف است که می‌توان آنها را در پروژه استفاده کرد. دیزاین سیستم به شما این امکان را می‌دهد تا طرحهای خود را در مقیاس پروژه‌های بزرگ مدیریت کنید. به عبارتی دیگر، دیزاین سیستم منبع اصلی عناصر طراحی است که به تیم‌ها اجازه طراحی، درک و توسعه یک محصول را می‌دهد. به دلیل آشنایی بیشتر مخاطبان با کلمه دیزاین سیستم، از ترجمه دیزاین سیستم به سیستم طراحی xخودداری کردیم. همانطور که قبلا هم خدمت شما عرض کرده بودیم، کلمه دیزاین معادل فارسی خیلی مناسبی ندارد!
سیستم طراحی فقط برای طراحان نیست. ما به عنوان یک طراح، با نقش‌های تیمی متفاوت(طراحان، توسعه دهندگان، پژوهشگران، مدیران محصول و تولید کنندگان محتوا) همکاری می‌کنیم. سیستم طراحی یک زمینه مشترک و یا زبان مشترک برای برقراری ارتباط بین یک تیم ارائه می‌کند. این کار قطعا بهره‌وری و همکاری بین تیم را افزایش خواهد داد زیرا محصول شما به مرور زمان تکامل می‌یابد.
احتمالا می‌دانید که Style Guide و Pattern Library فقط برخی ازخروجی‌های یک سیستم طراحی هستند. راهنمای سبک همانطور که از نامش پیداست بر معرفی سبک طراحی و فاکتورهای بصری مانند(رنگ‌ها, فونت ها, تصاویر …) و کاربرد آنها تاکید دارد. در صورتی که در یک کتابخانه الگو مولفه‌های کارکردی و کاربرد آنها را هم نمایش می‌دهیم و دیزاین سیستم مفهومی فراتر از این دو دارد و به فلسفه و چرایی هر المان نیز می‌پردازد.
داشتن دیزاین سیستم باعث صرفه‌جویی در منابع مالی شما می‌شود! در این قسمت برای شما توضیح خواهیم داد که اصلی‌ترین مزایای طراحی یدزاین سیستم کدام‌ها هستند:
بعد از پاسخ دادن به این سوالات، می‌توانیم کار بر روی یک سیستم طراحی را گام به گام به همراه هم پیش ببریم: به نظر شما پروسه طراحی دیزاین سیستم با چه مرحله‌ای شروع خواهد شد؟
همانطور که در بالا اشاره شد، یک دیزاین سیستم به دستیابی به هدف محصول کمک می‌کند. چگونه هدف را درک کنیم؟ با ایجاد ارزش‌ها، و ارزش‌ها اغلب زمانی موثر و به یادماندنی هستند که از صفات استفاده می‌کنند. در این بخش صفت را یک اصل درنظر می‌گیریم. بنابراین اگر می‌خواهید یک دیزاین سیستم برای سرویس خود بسازید، می‌توانید به پرسش‌های زیر پاسخ دهید:
اینجا چند نمونه اصول طراحی را از شرکت‌های معروف بخوانید:
Google Material Design: با متریال دیزاین محصولات زیبا و لمس شدنی طراحی کنید.
Airbnb: متحد، فراگیر، نمادین، محاوره‌ای
Uber: آموزنده، غیرسرزده، متمرکز و به موقع
یک‌بار دیگر اطمینان حاصل کنید که اصل طراحی‌تان با هدف محصول/سرویس شما همسو است و در ذهن خود، اصول را حفظ کنید. بدیهی است که هیچ کمپانی نمی‌تواند به نیازهای همه پاسخ دهد، اما می‌توان به یک نقطه نظر کاربردی و مفید دست پیدا کرد. این دیدگاه به شما کمک می‌کند تا اولین تاثیرگذاری را روی مشتریان خود داشته باشید و همچنین به شما کمک می‌کند تا حتی زمانی که افراد زیادی با آن کار می‌کنند، با آنها ارتباط برقرار کنید. شما دیزایناسور را با چه صفاتی توصیف می‌کنید؟ برایمان جالب است بدانیم❤️
بعد از پایه‌ریزی یک اصل طراحی، ما می‌خواهیم به عمق اجزای کاربردی بیشتری در یک دیزاین سیستم شیرجه بزنیم! انواع مختلفی از یک دیزاین سیستم وجود دارد که یکی از آنها Pattern Library است.
در ادامه می‌خواهیم این کتابخانه را ایجاد کنیم. در ارتباطات روزمره ای که داریم، هر آنچه که می‌گوییم، دو جنبه اصلی دارد: محتوا و لحن صحبت ما. این مثال را می‌توانیم در زمان طراحی Pattern Library نیز درنظر بگیریم.
فرض کنید که محصول شما یک وب سایت تجارت الکترونیک است:
محصولی را پیدا کنید که آنها می‌خواهند(نیاز دارند)
آن محصول را در وب سایت خود به فروش برسانید
یک مرور از کارها بنویسید
از نظر سبک و آهنگ، می‌خواهید کاربران شما چه برداشت اولیه‌ای داشته باشند؟
در چه شرایطی، کاربران شما بازخورد خواهند داد؟
در اینجا بعضی از عناصری که می‌توانید در هنگام شکل‌گیری سبک زیبایی‌شناسی خود در نظر بگیرید:
رنگ، حالت‌های تعاملی، انیمیشن، تایپوگرافی، فاصله‌گذاری، سبک Iconography، اشکال و کادرها، تصویرسازی‌ها، عکس‌ها
و صداها
همانطور که به احتمال ۹۹درصد با این موضوع آشنایی دارید، Material Design برای اولین بار به عنوان یک زبان طراحی توسط گوگل در سال ۲۰۱۴ معرفی شد. از آن زمان به‌بعد Material Design به سیستمی سازگار از دستورالعمل‌ها، کامپوننت‌ها و ابزارهایی تبدیل شده است که طراحی رابط کاربری را بیش از پیش لذت‌بخش کرده است.
متریال دیزاین بر اساس کد منبع‌باز (open-source code) است که همکاری بین طراحان و توسعه‌دهندگان را تسهیل می‌کند و به تیم‌ها کمک می‌کند تا به سرعت محصولات خود را بسازند. اگر برای تهیه پالت رنگی متریال دیزاین نیاز به منابع آموزشی بیشتر دارید، این مطلب را مطالعه کنید:
بهترین ابزارهای ساخت پالت رنگی متریال دیزاین
دیزاین سیستم Fluent توسط Microsoft در سال ۲۰۱۷ توسعه یافت و به سرعت به یکی از محبوب‌ترین دیزاین سیستم‌ها تبدیل شد. این دیزاین سیستم شامل دستورالعمل‌هایی برای طراحی و تعاملهای موجود در نرم‌افزار مورد استفاده قرار می‌گیرد و برای کلیه دستگاه‌ها و سیستم عامل ویندوز ۱۰ طراحی شده است.
عناصر حسی در این دیزاین سیستم مبتنی بر پنج کامپوننت اصلی است: نور، عمق، حرکت، جنس و مقیاس، البته نکته مهمی که درباره این دیزاین سیستم وجود دارد این است که این سبک بیشتر به طراحی صفحه‌های مسطح میل می‌کند و قاعدتا خبری از سایه‌ها نیست.
Atlassian یک شرکت نرم افزاری استرالیایی است که با توسعه اپلیکیشن Jira (ردیابی و مدیریت پروژه) و ابزار همکاری تیم خودش و همچنین نرم‌افزار Wiki Confluence معروف شد. Atlassian همچنین دیزاین سیستم را اولین بار به‌عنوان دستورالعمل‌های طراحی (Atlassian ADG) در سال ۲۰۱۲ منتشر کرد.
این دیزاین سیستم بسیار مفصل است، از الگوهای طراحی و کامپوننت‌های کد گرفته تا کتابخانه‌ای از مجموعه طراحی‌های رابط کاربری در Sketch تشکیل شده است. همچنین می توانید استدلال پشت هر کدام از آنها را در دیزاین سیستم Atlassian پیدا کنید. فلسفه طراحی اطلسین بسیار جالب و جذاب است.
دیزاین سیستم IBM ممکن است مانند سایر دیزاین سیستمهای دیگر پر زرق و برق و شیک نباشد، اما کاملا شفاف، کاربردی و صریح (straight to point) است که در عین حال به‌خوبی عمل می‌کند. چندین مثال از استفاده این دیزاین سیستم وجود دارد؛ مرور منطقی و شسته و رُفته از انیمیشن‌ها، Icongraphy، رنگ‌ها، کد قابل استفاده مجدد و موارد دیگر.
Airbnb نه تنها خدمات مهمان‌نوازی مقرون به‌صرفه را در سراسر جهان ارائه می دهد بلکه این شرکت بینش دیزاین سیستم خود را به اشتراک گذاشته است که شامل تکنیک‌هایی در زمینه Cutting Edge است. Airbnb Design از کامپوننت‌هایی تشکیل شده است که “مانند عناصر یک ارگانیسم زنده” هستند که در آن مجموعه‌ای از خصوصیات هر یک از کامپوننت‌ها، با شخصیت و عملکرد خاص خود تعریف می‌شوند. یک کامپوننت می‌تواند با دیگر کامپوننت‌ها همکاری کند و یا خود به تکامل برسد، در حالی که هنوز جزئی از اکوسیستم بزرگتر و در حال تکامل است.
شرکت آمریکایی رسانه‌های اینترنتی، اخبار و سرگرمی BuzzFeed به خاطر سبک بی‌پروا، گستاخانه و سرگرم کننده‌اش شناخته شده است و دیزاین سیستم آنها، Solid نیز از این قاعده مستثنی نیست. دیزاین سیستم Solid پر از اعتماد به نفس است، اما هنوز مختصر و مفید است و به عنوان یک مرجع مفید برای CSS BuzzFeed کار می‌کند.
Buffer بستری را برای مدیریت رسانه‌های اجتماعی فراهم می‌کند. این شرکت همچنین بینشی را در مورد اصول دیزاین سیستم خود ارائه می‌دهد. دستورالعمل Buffer مبتنی بر مفهوم طراحی اتمی است. ایده اصلی این دیزاین سیستم این است که قسمت‌های مستقل (اتم) را می‌توان در ساختارهای بزرگتر (مولکول‌ها) ترکیب کرد که به نوبه خود می‌توانند در ساختارهای حتی بزرگتر (ارگانیسم‌ها) ترکیب شوند.?
Salesforce یک غول در نرم افزارهای مبتنی بر فناوری ابری از جمله CRM، خدمات مشتری، اتوماسیون بازاریابی، تجزیه‌وتحلیل و توسعه اپلیکیشن است. این شرکت آمریکایی دیزاین سیستمی کامل و مستند به نام Lightining را خلق کرده است که این دیزاین سیستم پروژه منبع‌باز است که بر ساخت اپلیکیشن‌های تجاری متمرکز است. این دیزاین سیستم یک دستورالعمل حرفه‌ای و جامع برای دسترسی‌پذیری، کامپوننت‌ها، الگوها، Utilities، Design Tokens و موارد دیگر را ارائه می‌دهد.
ایجاد و نگهداری یک دیزاین سیستم مطمئنا برای هیچ پروژه کوتاه مدتی نیست. اما تمام تلاشی که شما در خلق یک دیزاین سیستم به کار خواهید گرفت، درنهایت با توجه به کدها و عناصر قابل استفاده مجدد در هر سازمانی که مقیاس بزرگی دارد، اهمیت پیدا می‌کند.
گام ۱. فهرست اجزای رابط کاربری فعلی خود را ارزیابی کنید و ناسازگاری‌های موجود را یادداشت کنید
بهترین نقطه برای شروع ساخت یک دیزاین سیستم، ارزیابی چیزی است که اکنون دارید. کدام عناصر را دوست دارید؟ کدام یک را می خواهید جایگزین کنید؟ تناقض بین محصولات یا صفحات کجا وجود دارد؟
شما باید هر (Digital Assetsدارایی دیجیتال) و همه مواردی که از قبل وجود دارند را مرور کنید. هدف نهایی ایجاد یک راهنمای جامع و مخزنی از منابع مختلف است. بنابراین هر آنچه که نیاز است، باید در آن گنجانده شود. حتما به این موارد به‌خوبی نگاهی بیندازید:
اگر یک استارتاپ جدید هستید و هیچ عناصر طراحی نهایی را برای بررسی ندارید، در مورد هر یک از این موارد به دقت فکر کنید تا گزینه‌هایی را انتخاب کنید که به بهترین وجه با نام تجاری شما تناسب داشته باشند. بعدا، باید به هر حال یک لیست حرفه‌ای ایجاد کنید. بنابراین تصمیم‌گیری در مورد این موارد خیلی زود آغاز نخواهد شد.
بله درست است، شما می‌توانید این مرحله را قبل از ارزیابی اجزای رابط کابری خود انجام دهید. با این حال، اگر با مقاومت در این بخش روبرو شدید، توصیه می‌کنیم ابتدا به دنبال تناقض‌ها و ناهماهنگی‌ها باشید تا در ادامه بتوانید از این طریق اهرم استدلال، نتایج موردنظر خود را به‌دست آورید. برای شروع کافیست یک لیست از ناهماهنگی‌ها و خطاهای رابط کاربری فعلی خود تهیه کنید.
صرف‌نظر از اینکه چه تعداد خطا جمع می‌کنید، شما باید امتیازات کارآیی استفاده از یک دیزاین سیستم متمرکز را برای تیم خود برجسته کنید. همه موارد گفته شده در مقدمه این مقاله را تکرار کنید و با ساده شدن ورودی‌های فرآیند طراحی از ابتدا تا انتها، در مقدار زمان و حجم کاری که از طریق دیزاین سیستم انجام می‌شود صرفه‌جویی می‌کنید.
یک مشکل رایج در مورد دیزاین سیستم‌ها این است که شرکت وقت آن را ندارد که یک پروژه جانبی (طراحی دیزاین سیستم خود) را انجام دهد. اما حقیقت این است که دیزاین سیستم‌ها در بازه زمانی طولانی، اثر خود را می‌گذارند و صرفه‌جویی زمانی خیلی خیلی بیشتر از آن چیزی که فکر آن را بکنید برای شما به ارمغان می‌آورند. شما در آینده نیازی به طراحی مجدد بسیاری از اجزا و کامپوننت‌ها نخواهید داشت!
اکنون می‌خواهیم وارد بخش جذاب دیزاین سیستم شویم. ایجاد یک لیست جامع از تمام گزینه‌های طراحی خود، شاید این لیست را از بین عناصر موجود انتخاب کنید یا از چرک‌نویس‌های موجود، آن را ایجاد کنید. ناگفته نماند که باید ناهماهنگی‌ها را از اولین قدم اصلاح کنید قبل از اینکه این موارد را به لیست جامع خود اضافه کنید.
پالت رنگی نقطه خوبی برای شروع است. شاید متوجه شده باشید که ممکن است یک طراح! بیش از صد سایه مختلف خاکستری استفاده کند. چقدر ساده‌تر می‌شد اگر هر کسی فقط از یک سایه استفاده می‌کرد و می‌توانست آن را در یک دیزاین سیستم به‌راحتی در اختیار داشته باشد.
سایه‌ها و رنگ‌های انتخابی خود را برای هر رنگی که بیشترین استفاده را از آنها می‌کنید را شناسایی کنید و دستورالعمل‌های قطعی خود را برای نحوه استفاده از آنها بنویسید. البته این موضوع شامل رنگ‌های برند اصلی شما نیز می‌شود. البته به رنگ‌های ثانویه خود نیز توجه کنید. به‌عنوان مثال، متن، لینک‌ها، دکمه‌های ویژه و یا پس‌زمینه شما چه رنگی است؟
به یاد داشته باشید کدهایHEX ، RGBA یا HSL را درج کنید، تا حد ممکن دقیق باشند.
در مرحله بعد، شما می‌خواهید گزینه‌های تایپوگرافی خود را مرور و جمع‌بندی کنید. اگر از قبل یک دستورالعمل برای این موضوع دارید، بیشتر کارها برای شما انجام شده است.
دیزاین سیستم‌ها می‌توانند فنی‌تر از دستورالعمل‌های استاتیک باشند، بنابراین از این مزیت استفاده کنید. اندازه‌ها ، فضا‌ها ، فونت‌ها و … متن خود را که ترجیح می‌دهید، یادداشت کنید و همچنین قوانینی را که در مورد استفاده بکار می‌برید مانند کی؟ و کجا؟ آنها را نیز در نظر بگیرید. به‌عنوان مثال، عناوین بخش‌ها در مقالات وبلاگ شما چه اندازه‌ای دارند؟ برای call-to-actions در سایت از چه فونتی استفاده می‌کنید؟
از جزئیات ریزی مانند وزن قلم، ارتفاع بین خطوط یا قوانین سفارش‌سازی شده برای فاصله بین کلمات در صورت لزوم غافل نشوید.
یک دیزاین سیستم خوب به شما این امکان را می‌دهد تا به سادگی کامپوننت‌های بصری را مستقیماً در پروتوتایپ اولیه خود ترسیم کنید. هرچه موارد طراحی گرافیکی بیشتری در دیزاین سیستم جمع‌آوری شود، جریان کاری برای پروژه‌های آینده سریعتر خواهد بود.
فراموش نکنید که قسمت‌های مناسب حتی code snippets یا دیگر مستندات توسعه‌دهندگان که ممکن است لازم داشته باشند را درج کنید. این مستندسازی کوچک، کمک بزرگی در مرحله توسعه خواهد داشت.
در میان موارد طراحی گرافیکی، به کتابخانه‌هایی از جمله موارد زیر نیاز دارید:
علاوه بر این، ممکن است شما بخواهید لیستی از اصول طراحی را برای همه افراد درج کنید که در صورت ایجاد یک ویژگی گرافیکی جدید، از آنها پیروی کند. داشتن اندازه‌ها، رنگ‌ها، سازگاری‌ها، قالب‌های پرونده در یک دفترچه قوانین، این اطمینان را حاصل می‌کند که استایل شرکت شما در آینده دست نخورده باقی بماند.
سرانجام، یک کتابخانه الگوها از تمام عناصر طراحی خود، به ویژه عناصر تعاملی ایجاد کنید. ممکن است بین الگوهای رابط کاربری و موارد گرافیکی همپوشانی وجود داشته باشد. در کل، الگوهای رابط کاربری شما نسبت به تصاویر ایستا پیشرفته‌تر هستند.
به‌منظور روشن شدن بیشتر مطلب، الگوهای رابط کاربری شامل هر عنصر طراحی است که شما به طور مداوم برای رابط سایت، اپلیکیشن یا محصول خود استفاده می‌کنید. به‌عنوان مثال، نحوه رویکرد شما نسبت به عملکرد جستجو الگوی رابط کاربری به‌حساب می‌آید؟ آیا پنجره ورودی گسترش می‌یابد یا باز باقی می‌ماند؟ در کجا بر روی صفحه قرار می‌گیرد؟ آیا متن placeholder را درج می‌کنید یا نه؟
هنگام سازماندهی کردن الگوهای رابط کاربری خود، یادداشت‌های مربوط به استفاده برای روشن کردن جزئیات و نحوه استفاده از آن را درج کنید. همچنین به استفاده از تصاویر یا نشانه‌های بصری کمک می کند تا جستجوی آنها آسان‌تر شود.
به‌علاوه، به سازماندهی زیر بخش‌های کتابخانه الگوی شما نیز کمک می کند. سعی کنید آنها را بر اساس کارکردها، مانند “ناوبری” یا براساس نوع آنها مانند “منوهای کشویی” دسته‌بندی کنید.
نتیجه‌گیری
دیزاین سیستم‌ها افزودنی نسبتاً جدیدی برای دنیای طراحی دیجیتال هستند. آنها در حال تغییر دادن بازی دنیای دیجیتال هستند. سرعت طراحی شما را چندبرابر می‌کند، عناصر رابط کاربری یکپارچه خواهید داشت، برند شما منسجم‌تر خواهد بود و ده‌ها مزیت دیگر… آیا شما تجربه طراحی دیزاین سیستم را داشته‌اید؟ لطفا نظرات خود را با بقیه دوستان در میان بگذارید❤️
