0 تا 100 دیزاین سیستم با دیزایناسور

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