برای طراحی یک وب‌سایت یا اپلیکیشن مقیاس‌پذیر، به روشی مؤثر و کارآمد برای مدیریت آن بدون ارائه خطاها، ناسازگاری‌ها یا تجربیات پر از اصطکاک نیاز دارید. این همان چیزی است که یک سیستم طراحی UI برای آن است.
در این مقدمه بر سیستم‌های طراحی، نمونه‌های واقعی سیستم‌های طراحی را که امروزه سازمان‌های پیشرو استفاده می‌کنند، بررسی خواهیم کرد. ما همچنین دلایل نیاز به یک سیستم طراحی، زمان‌هایی که به آن نیاز ندارید و مواردی که هنگام ساختن سیستم خود باید شامل شود را بررسی خواهیم کرد.
الگوهای تایپوگرافی در سیستم طراحی Mailchimp
سیستم طراحی چیست؟
هنگام طراحی یک رابط کاربری برای یک وب سایت یا برنامه، به راحتی می توان جزئیات را از بین برد. هر بار که یک صفحه یا مؤلفه جدید اضافه می کنید یا پیچیدگی یک پروژه را افزایش می دهید، نگه داشتن زبانه ها در همه چیز دشوارتر می شود.
یعنی سخت می شود بدون یک سیستم طراحی
سیستم طراحی مجموعه‌ای از دستورالعمل‌ها، سبک‌ها، مؤلفه‌ها، الگوها و سایر منابعی است که برای ایجاد رابط کاربری برای محصولات دیجیتال استفاده می‌شود. به آن به عنوان زبان بصری یک برند فکر کنید.
چه چیزی در یک سیستم طراحی گنجانده شود
یک سیستم طراحی یک چارچوب به خوبی سازماندهی شده و مستند است که طراحی UI را ساده می کند. در عین حال، مقیاس، به روز رسانی و مدیریت محصولات دیجیتال را برای تیم های دیجیتال آسان تر می کند. سوالاتی در مورد اینکه چه چیزی، چرا و چه زمانی استفاده شود، همگی پاسخ داده می شوند.
اگرچه هر سیستم طراحی ظاهر منحصر به فرد خود را دارد، ساختار اغلب از برندی به برند دیگر یکسان است. در اینجا رایج ترین اجزای یک سیستم طراحی آمده است:
اصول طراحی
این بخش با نام های زیادی خوانده می شود. برای مثال:
- بررسی اجمالی
- معرفی
- نام تجاری
- دستورالعمل های طراحی
- اصول طراحی
همچنین همیشه به یک شکل رفتار نمی شود. برخی از این بخش برای گسترش اهداف و مأموریت برند استفاده می کنند. دیگران از آن برای توضیح اصول رانندگی در پشت سیستم طراحی استفاده می کنند.
به عنوان مثال، این صفحه نمای کلی در است سیستم طراحی رعد و برق:
توضیح می دهد که وضوح، کارایی، سازگاری و زیبایی برای تصمیم گیری در مورد طراحی محصولات Salesforce استفاده می شود.
راهنمای سبک
راهنماهای سبک می توانند در داخل و خارج از سیستم های طراحی وجود داشته باشند. اما هدف آنها همیشه یکسان است: ارائه یک مرجع بصری و دستورالعمل برای سبک های اساسی مورد استفاده در هنگام طراحی برای یک برند.
این عناصر اساسی شامل موارد زیر است:
- رنگ
- تایپوگرافی
- شمایل نگاری
- لوگوها
- تصویرسازی
- فاصله گذاری
- چیدمان
- حرکت – جنبش
همچنین ممکن است شامل اطلاعات مربوط به پاسخگویی، جهانی شدن و دسترسی باشد. یافتن اطلاعات در مورد نشانه های طراحی در این بخش نیز رو به افزایش است.
هر توکن طراحی دارای یک کلید json و مقدار مربوطه است. اگر به دنبال یک مثال خوب از ظاهر این هستید، بررسی کنید سیستم طراحی Polaris Shopify:
توکن ها به پر کردن شکاف بین تصمیمات طراح و اجرای آنها توسط توسعه دهنده کمک می کنند. با انتخاب نشانه های طراحی خاص، نمی توان تصمیم طراح را به چالش کشید.
آنها همچنین پیاده سازی و به روز رسانی سبک های جهانی را آسان تر می کنند.
اجزاء
کتابخانه کامپوننت گام بعدی در تعریف زبان بصری برند است. در آن، اجزای رابط کاربری قابل استفاده مجدد مانند:
- آکاردئون
- پودرهای سوخاری
- دکمه ها
- ظروف
- لیست ها
- نوارهای پیشرفت
- جستجو در فرم ها
- زبانه ها
- ورودی های متن
اینها بلوک های اصلی UI هستند. هر بخش از کتابخانه اجزا، کامپوننت، نحوه استفاده از آن و تغییرات مختلف را باز می کند.
به عنوان مثال، این است دکمه صفحه در سیستم طراحی لونا Sainsbury:
کاربران سبک های مختلف دکمه را توضیح داده و به صورت بصری به تصویر می کشند. در پایین صفحه، بایدها و نبایدها را برای استفاده از مؤلفه و همچنین نکاتی در مورد نحوه ایجاد برچسب پیدا می کنند.
کتابخانه الگو
کتابخانه‌های الگو بر پایه مؤلفه‌ها ساخته می‌شوند. آنها حاوی ترکیبی از مؤلفه‌ها هستند که به کاربران کمک می‌کنند وظایف خاصی را در یک وب‌سایت یا برنامه انجام دهند.
یک مثال خوب برای این فرم است. این الگو ممکن است اجزایی مانند:
- برچسب ها
- ورودی های متن
- چک باکس ها
- کشویی
- دکمه ها
- پودرهای سوخاری
- نوارهای پیشرفت
- پیغام خطا
را سیستم طراحی شفافیت برای VMware مثال خوبی است اگر می خواهید ببینید الگوها چگونه هستند تشکیل می دهد معمولا خطاب می شوند:
شما فقط یک تصویر بصری از سبک ها و اجزای مورد استفاده برای ایجاد الگو پیدا نخواهید کرد. بایدها و نبایدها را در مورد نحوه ارائه آن پیدا خواهید کرد. همه چیز از قرار دادن تا دسترسی نیز پوشش داده شده است.
اطلاعات تکمیلی
برخی از سیستم های طراحی به اصول بالا پایبند هستند. سایر موارد شامل اطلاعات اضافی هستند. مثلا:
- قطعه کد
- دستورالعمل های محتوا
- منابعی مانند قالب ها، کیت های رابط کاربری و افزونه ها
آنچه شما در برنامه خود قرار می دهید بستگی به این دارد که شما و تیمتان از چه چیزی بیشترین بهره را ببرید. اگر چیزی وجود دارد که طراحی موثرتر رابط های کاربری مقیاس پذیر را برای شما آسان تر می کند، ممکن است ارزش گنجاندن اطلاعات در سیستم طراحی خود را داشته باشد.
نمونه های سیستم طراحی
برای اینکه سیستم های طراحی موثر واقع شوند، باید در سازمان قابل دسترسی و اشتراک گذاری باشند. به این دلیل که این فقط طراحان و توسعه دهندگان وب نیستند که از سیستم های طراحی استفاده می کنند.
در حالی که بسیاری از شرکت‌ها ترجیح می‌دهند سیستم‌های طراحی خود را خصوصی نگه دارند، برخی از سازمان‌های بزرگتر ترجیح می‌دهند آنها را به صورت آنلاین منتشر کنند. بنابراین ما نمونه‌های سیستم طراحی زنده زیادی برای ارجاع داریم.
مثلا:
میز کار سیستم طراحی برای Gusto است:
لباس خواب سیستم طراحی برای Gitlab است:
کوله پشتی سیستم طراحی Skyscanner است:
مداد شمعی سیستم طراحی Freshworks است:
این است اطلسی سیستم طراحی:
و این سیستم طراحی برای کنسرسیوم وب جهانی:
مزایای سیستم های طراحی
ایجاد یک سیستم طراحی برای سازمان شما مزایای زیادی دارد:
- بهره وری: سبک‌های خوب طراحی شده و اجزا و الگوهای قابل استفاده مجدد، طراحی محصولات دیجیتال را آسان‌تر و سریع‌تر می‌کنند.
- کیفیت: هنگام طراحی و به روز رسانی محصولات دیجیتال خود، خطاها و ناهماهنگی ها را کاهش دهید.
- وضوح: یک زبان بصری یکپارچه ایجاد کنید تا همه – از جمله استخدام‌های جدید – دقیقاً بدانند که چگونه دیدگاه برند خود را به یک رابط بصری ترجمه کنند.
- اثربخشی: همه جزئیات از قبل به خوبی در نظر گرفته شده است، بنابراین مجبور نیستید در حین پرواز تصمیم بگیرید یا وقت خود را در جلسات بی شماری صرف کنید تا بتوانید همه را جذب کنید.
- اتوماسیون: وقتی یک سیستم طراحی با ابزاری مانند Figma همگام‌سازی می‌شود، به‌روزرسانی‌های UI را می‌توان در کسری از زمانی که برای انجام دستی نیاز دارد، در کل محصول منتشر کرد.
- مقیاس پذیری: محصولات بهتری ایجاد کنید که مقیاس سریع‌تری داشته باشند، عالی به نظر برسند و تجربه‌ای عالی را در اختیار کاربران قرار دهند.
- یکسان سازی: یک تجربه منسجم، ثابت و با کیفیت برای کاربران خود در هر یک از محصولات و کانال های دیجیتال خود ایجاد کنید.
از آنجایی که سیستم طراحی به طور موثر به تمام سوالاتی که ممکن است افراد در مورد طراحی رابط کاربری یک محصول داشته باشند پاسخ می دهد، شما زمان بیشتری برای تمرکز بر روی موضوعات مهمتر خواهید داشت – مانند رسیدگی به کارهای پیچیده و اصلاح تجربه کاربری.
چه زمانی به یک سیستم طراحی نیاز دارید؟
چیزی که باید بپرسیم این است که چه زمانی نباید شما از یک سیستم طراحی استفاده می کنید. در حالی که دلایل زیادی برای ایجاد یک سیستم طراحی وجود دارد، برخی مواقع وجود دارد که بازده چنین کاری پرزحمت بسیار ناچیز است.
به عنوان مثال، اگر در حال ساخت یک وب سایت برای یک پروژه شخصی، یک تجارت کوچک یا یک کارآفرین هستید، ممکن است به سیستم طراحی نیاز نداشته باشید.
برای فهمیدن این موضوع، باید تعداد صفحات مورد نیاز خود و همچنین پتانسیل رشد برای کسب و کار و سایت را در نظر بگیرید. اگر سایت در طول زمان کم و بیش به همان اندازه و محدوده باقی بماند، احتمالاً یک سیستم طراحی غیر ضروری خواهد بود.
همچنین اگر به تنهایی کار کنید، ممکن است کاربرد زیادی برای یک سیستم طراحی پیدا نکنید. سیستم های طراحی یک راه عالی برای پر کردن شکاف بین طراحی و توسعه وب هستند. آنها همچنین برای ارائه تیم های دیجیتال (با بازاریابان، نویسندگان، و سایر غیر طراحان) با یک منبع از حقیقت مفید هستند.
نکته دیگری که باید در نظر گرفت بودجه است. اگر مشتری شما مبلغ زیادی را برای ساخت یک وب سایت یا برنامه به شما پیشنهاد نمی کند، ساخت یک سیستم طراحی ممکن است بسیار پرهزینه و زمان بر باشد. با این حال، این بدان معنا نیست که نمی‌توانید با تغییر نیازها و بودجه آنها آن را در مسیر خود قرار دهید.
نتیجه
مقدمه بالا برای سیستم های طراحی تمام اصول اولیه ای را که برای شروع کار با سیستم های طراحی نیاز دارید را پوشش می دهد.
در مجموع، یک سیستم طراحی چیزی بیش از یک کتابخانه از اجزای بصری است که هنگام طراحی یک محصول دیجیتال استفاده می کنید. این چارچوبی است که جزئیات زبان بصری یک برند را ارائه می دهد و قوانین و دستورالعمل هایی را برای نحوه استفاده از آن ارائه می دهد.
اگر در حال ساخت وب سایت ها و برنامه های بزرگ و مقیاس پذیر هستید، این روزها یک سیستم طراحی ضروری است.
