با دیزاین سیستم غول‌های دنیای تکنولوژی آشنا شوید

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

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

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

در این محتوا بهترین نمونه‌های دیزاین سیستم معرفی می‌شوند. مطالعه و بررسی آن نمونه‌ها برای دیزاینرها و تیم‌های طراحی محصول بسیار مفید و آموزنده است.

 

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

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

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

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

پس،‌ دیزاین سیستم مجموعه‌ای است از اصول و کلیات دیزاین رابط کاربر محصول، راهنمای طراحی و دیزاین هر جزء از رابط کاربر، کامپوننت‌های پیش ساخته شده در ابزارهای طراحی UI/UX مثل فیگما و کدهای لازم برای پیاده‌سازی کامپوننت‌ها. 

 

دیزاین سیستم ۳ غول‌ دنیای تکنولوژی

معمولا دیزاین سیستم به ۵ بخش اصلی تقسیم می‌شود که هر بخش زیرمجموعه‌های خاص خودش را دارد. در کل، مجموعه مواردی که باید در دیزاین سیستم ذکر شود،‌ در بخش‌های زیر گنجانده می‌شود:

• Design: در این بخش کلیات طراحی رابط کاربر محصول با توجه به اصول UI دیزاین (مثل اصل کاربردپذیری) تعریف می‌شود؛ 
• Components: دکمه‌ها، منوها، نوار ناوبری، آیکون‌ها، تولتیپ‌ها … یک کامپوننت در دیزاین به حساب می‌آیند. کامپوننت‌ پایه‌ای‌ترین جزء در دیزاین است. در دیزاین سیستم مشخص می‌شود که هر کامپوننت چه ویژگی‌هایی (اندازه، شکل، رفتار و…) داشته باشد و چطور طراحی و پیاده‌سازی شود؛
• styles: تایپوگرافی، پالت رنگ‌‌،‌ شکل‌‌ها، انیمیشن‌ها و هر چیز دیگری که قرار است المان‌ها را جذاب‌تر کند، در این دسته تعریف و مشخص می‌شود؛
• Content Guidelines: در این بخش مشخص می‌شود که پیغام‌هایی که کاربران می‌بینند و  UI texts با چه لحن و زبانی باید نوشته شوند. لحن، زبان و انتخاب کلمات باید متناسب با و منعکس‌کننده‌ی صدای برند باشد. 
• Develop: کدهایی که برنامه‌نویسان و توسعه‌دهندگان سایت یا اپلیکیشن برای پیاده‌سازی و اجرای طراحی UI به آن نیاز دارند، در این بخش قرار داده می‌شود.

دیزاین سیستم محصولات غول‌های دنیای تکنولوژی کم‌ و بیش همان بخش‌ها را دارد. خوشبختانه، برند‌های بزرگ دیزاین سیستم خود و حتی تغییرات و آپدیت‌های آن را منتشر می‌کنند. پس، طراحان UI/UX در سراسر دنیا می‌توانند آن‌ها را بخوانند و از آن منابع ارزشمند استفاده کنند. 

 

۱. دیزاین سیستم اپل (Apple Human Interface Guidelines)

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

اگر Human interface Guidelines را چک کنید، فقط دیزاین سیستم اپل را پیدا نمی‌کنید. بلکه منبعی غنی از ویدوئوها، مقاله‌‌ها و منابع آموزشی را خواهید یافت. علاوه‌بر آن‌ها، در قسمت Design Resources، تمپلیت‌های آماده برای طراحی اپلیکیشن برای همه‌ی دستگاه‌های iOS را می‌توانید به رایگان دانلود کنید. در قسمت Develop نیز هر چیزی که درباره‌ی کدها و ابزارهای برنامه‌نویسی (Adobe XD & Sketch) و توسعه رابط کاربر سازگار با پلتفرم‌های اپل نیاز است، وجود دارد. 

 

 

 

در دیزاین سیستم اپل، چند بخش اصلی دیزاین سیستم (بخش‌های Content Guidelines & Styles) زیر عنوان All Components گنجانده شده است. برای مثال، اگر کامپوننت دکمه‌ها را باز کنید؛ هر چیزی که درباره‌ی طراحی دکمه‌ها باید بدانید، دسته‌بندی‌شده ذکر شده است. 

 

 

 

۲. دیزاین سیستم گوگل (Google Material)

اغراق نیست اگر بگویم که دیزاین سیستم گوگل درواقع کلاسی آموزشی برای همه‌ی طراحان UI/UX و توسعه‌دهندگان است. گوگل شرکتی است که بیش‌ از ۲۷۰ محصول را طراحی و عرضه کرده است. من و شما هر روز حداقل از چند تا از محصولات گوگل (موتور جستجو، جی میل، گوگل داکس و …) استفاده می‌کنیم.

تقسیم‌بندی‌ها در سومین (آخرین) نسخه از Google Material اندکی با دیزاین سیستم اپل متفاوت است. دیزاین سیستم گوگل ۴ بخش اصلی دارد: Develop, Foundations, Styles & Components. مهم‌ترین مزیت دیزاین سیستم گوگل این است که در بخشی با عنوان Get started، طراح تمامی منابع، ابزارها (Figma Design kit)، کدها (این دیزاین سیستم نیز متن باز است.) و دستورالعمل‌هایی را که برای پیاده‌ کردن دیزاین سیستم گوگل در طراحی محصول خود نیاز دارد، منظم و دسته‌بندی‌شده خواهد یافت. دقیقا مشخص شده است که از کجا باید آغاز کرد و در هر مرحله چه کارهایی را انجام داد. 

 

 

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

 

 

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

 

 

 

۳. IBM Carbon Design System

IBM در ۱۷۷ کشور فعالیت می‌کند و در حوزه‌های متنوع خدمات و محصولات به بازار عرضه می‌کند. طراحی و تولید سخت‌افزار و نرم‌افزار، مشاوره، Cloud Computing، AI، رباتیک و بلاک‌چین از جمله حوزه‌هایی است که IBM در آن‌ها فعالیت می‌کند. دیزاین سیستم این غول تکنولوژی Carbon نام دارد. 

 

 

این دیزاین سیستم پرجزئیات‌تر و کمی هم پیچیده‌تر است. برای استفاده از این دیزاین سیستم علاوه بر تسلط بر طراحی UI، باید به خوبی با طراحی UX هم آشنایی داشت. تا به امروز ۱۱ نسخه از کربن منتشر شده است. دیزاین سیستم کربن برای ۴ ابزار طراحی UI/UX (Figma Adobe XD، Sketch و Axure) تمپلیت‌های آماده و کامپوننت‌های رابط کاربر از پیش ساخته شده (Design Kits) دارد. 

 

 

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

 

 

بخش‌های Styles و Content Guidelines در بخش کامپوننت گنجانده شده است. برای مثال، اگر کامپوننت دکمه را باز کنید، تمام موارد مربوط به طراحی و ساختن دکمه‌ها در حالت‌های مختلف را به تفکیک پیدا می‌کنید. 

 

 

 

 

 

جمع‌بندی و نتیجه‌گیری

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

۲. در طراحی محصول، طراحی رابط کاربر یکدست و یکپارچه کمک می‌کند تا کاربر با محصول تعاملی رضایت‌بخش داشته باشد. 

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

۴. طراحی و ساختن دیزاین سیستم کاری تخصصی و مستقل‌ از طراحی UI/UX است. اگر کسی می‌خواهد یاد بگیرد چطور دیزاین سیستم طراحی کند، لازم است آموزش دیزاین سیستم را بگذراند. 

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