گزارش طراحی جدید UI Kit ایران‌سرور
ساختن یک رابط کاربری جدید، یا اضافه کردن بخش‌های جدید به محصول (سایت یا اپ) بدون داشتن UI Kit و Design System کار سختی است؛ چرا که هر جزء جدیدی باید با ساختار هماهنگ باشد، همسو با برند انتخاب شود و ظاهر خوب و مدرنی داشته باشد.
UI Kit و Design System دو ابزاری هستند که کار طراحان و توسعه‌دهندگان محصول را به‌شدت راحت می‌کنند و دردسرهای ایجاد تغییرات را از بین می‌برند.
در این مقاله می‌خواهیم توضیحاتی درباره طراحی UI Kit و Design System داشته باشیم و UI Kit جدید ایران‌سرور را معرفی کنیم.
UI Kit چیست؟
UI Kit یا User Interface Kit مجموعه‌ای از استایل‌ها، کامپوننت‌ها، فونت‌ها، دکمه‌ها و … است.
UI Kit به شما کمک می‌کند که بدون اینکه نیاز باشد چیزی را از اول طراحی کنید، اجزا (همان کامپوننت‌ها)ی موجود را ویرایش کنید یا توسعه دهید. مواردی مانند چک‌باکس‌ها، فلش‌ها، منوهای کشویی و فرم ها ارزش توسعه مجدد را ندارند و بهتر است از روی نمونه‌های قبلی آن‌ها را ایجاد کنیم.
این کار چه فایده‌ای دارد؟
مزایای UI Kit چیست؟
در درجۀ اول، UI Kit کمک می‌کند که تا حد زیادی در هزینه صرفه‌جویی کنید و خیلی موثرتر و بهتر از زمان‌تان استفاده کنید. حالا چرا؟
چون دیگر لازم نیست که درگیر جزئیات و استانداردها شوید؛ مثلاً می‌دانید که ابعاد دکمه‌های CTA باید چقدر باشد، یا سایز فونت عنوان در همه صفحات به یک اندازه است.
علاوه بر این، اگر بخواهید به‌روزرسانی خاصی در طرح‌ها انجام دهید، یا مثلاً رنگ برخی دکمه‌ها را عوض کنید، در چند ثانیه می‌توانید این کارها را انجام دهید.
Design System چیست؟
تعاریف مختلفی دربارۀ دیزاین سیستم وجود دارد. اما برای درک بهتر، آن را مثل یک منبع حقیقت تصور کنید! در این منبع، هر چیزی که مربوط به طراحی است، گروه‌بندی شده و تیم‌ها می‌توانند با استفاده آن‌ها، طراحی و توسعۀ بخش‌های مختلف محصول را پیش ببرند.
تفاوت UI Kit و Design System
Design System یا سیستم طراحی، بسیار پیشرفته‌تر از UI Kit است. UI به‌خوبی از پس Prototype و طراحی‌های بصری برمی‌آید؛ اما اگر سازمان بزرگی شامل دپارتمان‌ها و تیم‌های مختلف دارید (مثل گوگل) باید از دیزاین سیستم به عنوان منبع استفاده شود.
معرفی UI Kit مجموعۀ ایران‌سرور
UI Kit جدید، حاصل تلاش‌های چندین ماهۀ تیم توسعه محصول ایران سرور است. این Kit ، بخشی از برنامه‌های آیندۀ ماست، که شامل طراحی دیزاین سیستم کلی برای مجموعه ایران‌سرور است.
هدف از طراحی این Kit رابط کاربری، برقراری هماهنگی بصری، بین اجزا و بخش‌های مختلف وب‌سایت ایران‌سرور، و همچنین دسترسی راحت‌تر تمامی تیم‌ها، از جمله، مولتی مدیا، توسعه، سوشال مدیا و …، به یک طراحی یکپارچه است.
✅ برای مشاهدۀ UI Kit ایران‌سرور روی لینک کلیک کنید.
همانطور که می‌بینید، این کیت شامل 4 بخش اصلی زیر است:
- پالت رنگ‌ها
- تایپوگرافی
- استایل
- کامپوننت‌های UI
هر کدام از این بخش را در ادامه بررسی می‌کنیم
پالت رنگ‌ها (Color Pallet)
در این بخش، تمام رنگ‌های به‌کار رفته در طراحی وب‌سایت ایران‌سرور، در 4 گروه مشخص شده است:
- رنگ های اصلی
- طیف خاکستری
- رنگ هشدارها
- رنگ‌های گرادیانت
با استفاده از پالت، اگر قرار باشد بخش جدیدی به سایت اضافه شود، خیلی راحت می‌شود از این رنگ‌ها استفاده کرد و طراحی آن را سریع‌تر پیش برد.
تایپوگرافی (Typography)
در این بخش، فونت‌های فارسی و انگلیسی به‌کاررفته در سایت و اندازه متن در بخش‌های مختلف را مشاهده می‌کنید.
اگر دقت کنید، 3 اندازه مختلف هم برای صفحه نمایش تعریف شده و با کلیک روی آن می‌توانید اندازه متن متناسب با اندازه هر صفحه نمایش را ببینید.
استایل (Style)
در بخش استایل، با حاشیه‌ها، سایه‌ها، کادرها و … کار داریم. مثلاً در بخش DROPSHADOWS، میزان و مختصات سایه، در اندازه‌های مختلف تعیین شده است. یعنی در صورت ایجاد چنین کادری در سایت، فقط کافی است از همین دستور پیروی کنیم.
اجزای رابط کاربری (UI Components)
این بخش، جذاب‌ترین بخش Kit UI است. اینجا، هر دکمه، منو، فیلد، فرم، چک‌باکس و … که در طراحی رابط کاربری نیاز است، کنار هم گردآوری شده‌اند.
پیشنهاد می‌کنم برای مشاهده کامپوننت‌های مختلف، به لینک UI Kit ایران‌سرور رفته و با کلیک روی بخش‌های مختلف، آن را بررسی کنید.
این کیت، تنها بخشی از دیزاین سیستم ایران‌سرور است که به‌زودی از آن رونمایی خواهیم کرد. تا اینجای کار، بسیار مشتاقیم که نظرات، پیشنهادات و انتقادات شما عزیزان را بشنویم.
ظاهر جدید پنل کاربری ایران‌سرور
در ادامۀ روند تغییرات ایران‌سرور، اخیراً صفحۀ کاربری ایران‌سرور یا Hub نیز ظاهر جدیدی به خود گرفته است.
ما در طراحی جدید، به برابرسازی UI Kit پرداختیم و از فونت‌ها، رنگ‌ها، سایزها، دکمه‌ها، جدول‌ها و … یکپارچه با سایت استفاده کردیم. در حال حاضر، نسخه جدید سایت ایران‌سرور و نسخه جدید هاب، از استاندارد Ui kit استفاده می‌کنند.
ادامۀ این مسیر
هدف ما، ایجاد یک تجربه خوب و به‌یادمانی برای کاربران است و تمام تلاش‌مان را می‌کنیم که در تک‌تک جزئیات، این احساس به شما عزیزان منتقل شود.
در ضمن، با کمال اشتیاق آمادۀ شنیدن نظرات، پیشنهادات و انتقادات شما هستیم. اگر از کاربران ایران‌سرور هستید خوشحال می‌شویم تجربه خود را در رابطه با این تغییرات به ما بگویید.
