این سومین و آخرین قسمت از مجموعه من در مورد یادداشت های من در مورد سیستم طراحی است، می توانید قسمت مقدمه را اینجا و قسمت دوم را اینجا بیابید. در قسمت اول در مورد سیستم های طراحی صحبت کردم و در قسمت دوم در مورد شخصی سازی یک سیستم طراحی از پیش ساخته شده صحبت کردم. در این مقاله، مواردی را که من و تیمم در ClickPesa انجام دادیم تا سیستم طراحی سفارشی خود را با موفقیت ارسال کنیم، مرور خواهم کرد.
1. محدوده
اولین کاری که باید هنگام ایجاد یک سیستم طراحی انجام دهید این است که کاربرد اصلی سیستم خود را تعیین کنید. ممکن است بخواهید سیستم طراحی شما یک سیستم کلی باشد که طراحان و تیم های سازنده محصولات مختلف می توانند از آن استفاده کنند یا ممکن است بخواهید آن را فقط به پروژه های شما اختصاص دهید یا آن را حتی بیشتر به یک پروژه محدود کنید. هرچه استفاده از سیستم شما گسترده تر باشد، دامنه آن نیز گسترده تر است.
محدوده سیستم شما تعیین می کند که چه تعداد رنگ و سبک متن را باید تنظیم کنید و چه تعداد جزء و انواع آنها را باید ایجاد کنید. فرض کنید می‌خواهید یک سیستم طراحی مانند Untitled UI ایجاد کنید که طراحان و تیم‌ها بتوانند آن را بخرند و در پروژه‌های خود از آن استفاده کنند، در این صورت، باید نیازهای بسیاری از طراحان را در نظر بگیرید و یک راه‌حل کلی ایجاد کنید. سرور زمان و در عین حال به اندازه کافی قابل تنظیم است تا در محصولات آنها قرار گیرد. ممکن است در نهایت صدها مؤلفه را با انواع آنها ایجاد و نگهداری کنید.
مورد دیگر این است که اگر می خواهید یک سیستم طراحی برای محصولات خود یا برای یک محصول واحد ایجاد کنید. در این مورد، شما فقط باید رنگ ها و سبک های متن مورد نیاز را تنظیم کنید و فقط اجزایی را ایجاد کنید که محصولات شما از آنها استفاده می کنند. در ClickPesa، ما تصمیم گرفتیم یک سیستم طراحی را ارسال کنیم که بتوان از آن برای طراحی همه محصولاتمان استفاده کرد. ما تصمیم گرفتیم که محصولات ما اجزای مشترکی داشته باشند و فقط از رنگ‌های اصلی و خانواده‌های فونت استفاده کنند، بنابراین من فقط اجزایی را ایجاد کردم که برای محصولات خود نیاز داریم با چند نوع. این امر استفاده و نگهداری از سیستم طراحی را آسان می کند.
2. ایجاد سیستم
مقدمه
من و تیم دو روز را اختصاص دادیم و محصولاتمان را بررسی کردیم تا مشخص کنیم چه اجزایی را باید طراحی کنیم، سپس لیستی در صفحات گوگل با شش ستون تهیه کردیم. نام، نوع، شرح، ایالت ها، انواع، و URL به جزء. این سند به عنوان اسناد، کتاب قوانین و همچنین چک لیست سیستم طراحی عمل می کند. ما انتخاب کردیم که از google sheet استفاده کنیم تا هر عضو تیم بتواند به آن دسترسی داشته باشد و هر زمان که خواست نگاهی بیندازد.
توکن های طراحی
من با تهیه توکن های طراحی شروع کردم. من فقط رنگ‌ها، سبک‌های متن، سایه‌های رها و حاشیه‌ها را آماده کردم. تا کنون اینها تنها چیزهایی هستند که در محصولات خود به آن نیاز داشتیم.
نمادها
بعد از تنظیم تمام توکن ها، آیکون ها را آماده کردم. من از نمادهای فسفر استفاده کردم و آیکون های مشخص و پر شده را به سیستم طراحی خود منتقل کردم.
من همچنین کلمات کلیدی رایجی را اضافه کردم که از آنها برای جستجوی نمادهای خاص در توضیحات آنها استفاده می کنم تا پیدا کردن آنها آسان باشد.
اجزاء
برای ClickPesa ما روی 33 مؤلفه تصمیم گرفتیم که در همه محصولات ما از جمله GetPaid استفاده شوند. ما اجزای ضروری مانند ورودی، ناحیه متنی، دکمه‌ها و سایر اجزای خاص محصول مانند مؤلفه کارت موجودی داریم که برای نمایش موجودی حساب استفاده می‌کنیم.
اگر دوست دارید در مورد فرآیند من برای ایجاد کامپوننت های پیچیده در Figma اطلاعات کسب کنید، مقاله ای در مورد آن در اینجا نوشتم.
3. مستندات
جدا از داشتن یک برگه گوگل با توضیحی در مورد اینکه هر جزء چیست و کجا باید از آن استفاده کرد، اسنادی را نیز در Figma آماده کردم که به جزئیات نحوه استفاده از کامپوننت می‌پردازد.
نتیجه
اگر محصول شما بزرگ است، ایجاد یک سیستم طراحی از ابتدا می تواند دلهره آور به نظر برسد، اما این یک سرمایه گذاری مهم برای هر شرکتی است که می خواهد محصولات سازگار، کارآمد و به یاد ماندنی ایجاد کند. فقط از کوچک شروع کنید و آن را با توجه به نیازهای استفاده تکامل دهید.
