شما می توانید زمان مورد نیاز برای توسعه دادن رابط کاربری وب را کم کنید، این کار از طریق ابزارهای طراحی رابط کاربری فرانت اند انجام می شود. یکی از معروفترین این ابزارها فریمورک بوت استرپ است که وبسایت های بسیاری از آن بهره می‌گیرند.
برای اینکه بتوانید در این زمینه متنوع تر عمل کنید و با موارد جدیدتر دیگری نیز آشنا شوید من بهترین فریمورک‌های متن باز برای طراحی رابط کاربری را انتخاب کرده ام.
هر کدام از این فریمورک‌ها از استایل منحصر به فرد خود استفاده می کنند و تا حدی از اجزای داینامیک نیز پشتیبانی می‌کنند. اگر همراه با این فریمورک ها از برخی پلاگین های جاوااسکریپت استفاده کنید مطمئنا می توانید هرکاری را انجام دهید.
1. UIKit
UIKit یک فریمورک سبک، با قابلیت شخصی سازی و آسان در استفاده است. این فریمورک از یک ساختار ماژولار استفاده می کند که باعث می شود شما بتوانید در المنت‌های صفحه از کلاس‌ها مجددا استفاده نمایید.
این مورد برای زمانی که قصد دارید صفحه جدیدی را ایجاد نمایید و خودتان به صورت دستی کدهای مربوط به شبکه بندی و فونت ها را ننویسید بسیار مناسب است. این فریمورک همراه با مجموعه ای از آیکون‌های بسیار زیبا ارائه شده است که می توانید در برگه‌های‌تان از آن ها استفاده نمایید.
با استفاده از این فریمورک می توانید در کنار مدیران بسته مانند npm از LESS و SASS نیز استفاده کنید.
در کنار این موضوع همراه با لیست بزرگی از المان‌ها می توانید هر چیزی را در صفحه‌تان قرار دهید.
2. Foundation
Foundation فریمورکی است که دقیقا همپای بوت استرپ قدرت دارد و می تواند با آن برابری کند. اما به نظر می‌آید که فاوندیشن توجه کمتری نسبت به استایل دهی به رابط دارد.
با استفاده از این فریمورک می توانید روی المان‌های سفارشی رابط کاربری، کامپوننت‌ها و گریدهای پیشفرض دسترسی داشته باشید. هرچیزی که شما برای ایجاد یک رابط کاربری خوب نیاز دارید را می توانید در فریمورک فاوندیشن بیابید.
برای اینکه بیشتر در رابطه با طراحی های انجام شده با این فریمورک اطلاع کسب کنید می توانید به صفحه نمونه‌ها مراجعه کنید.در این جا می توانید وبسایت های مختلفی را مشاهده کنید که برای طراحی رابط کاربری همراه با ویژگی های مختلف از فریمورک فاوندیشن استفاده کرده اند.
3. Milligram
اگر می خواهید از یک رویکرد مینیمالیستی استفاده کنید و در طراحی رابط کاربری از چنین تکنیکی استفاده نمایید می توانید Milligram را بررسی کنید. این کتابخانه متن باز سی‌اس‌اس واقعا سبک است و همراه با تعدادی از ویژگی های بسیار ساده رابط کاربری عرضه شده است.
این کتابخانه از طریق مدیریت بسته‌های Bower، Yarn و npm قابل دسترس است، پس می توان هر موردی که دوست داشتید را به قسمت مدیریت کاری خود بیاورید.
تنها مشکل این کتابخانه این است که برای کار کردن نیاز دارید تا کتابخانه Normalize را نیز به صفحه‌تان اضافه نمایید. البته اگر از یک ابزار کوچک‌کننده سی‌اس‌اس استفاده کنید می توانید برای جلوگیری کردن از تعدد درخواست‌های http آن‌ها را در کنار هم و در یک فایل قرار دهید.
4. One-Nexus
در این قسمت می توانید شاهد یکی از جدیدترین ابزارهای طراحی رابط کاربری باشید که همراه با مدل‌های بسیار زیبا عرضه می شود.
One-Nexus فریمورک بزرگی است. این فریمورک از طراحی واکنشگرا بهره می برد و با دستگاه‌های تاچ سازگاری کامل دارد، مبتنی بر Sass است و با ابزارهای خودکارسازی نیز می تواند کار کند. در کل من فکر می کنم که برای شروع کار این فریمورک تا حدی پیچیده است.
اما اگر شما با ساختار فریمورک ها آشنایی داشته باشید و بتوانید با کامند لاین کار کنید One-Nexus برای شما بسیار خوب خواهد بود. این فریمورک ماژول‌های بسیاری دارد که سر شما را کاملا گیج می کند.
در هر حال نصب کردن و پیکربندی کلی فریمورک در اوایل کار، کمی وقت گیر است.
5. Semantic UI
اگر به دنبال یک فریمورک مطمئن و خوب می‌گردید، پس Semantic UI را امتحان کنید. این مورد یک کتابخانه زیبا برای رابط کاربری است که ویژگی‌های بسیاری دارد.
من Semantic را به عنوان یک بوت استرپ ناشناخته برای توسعه رابط کاربری می شناسم. این فریمورک در بین توسعه دهندگان معروف نیست اما باید بگویم که همان فایده‌های بوت استرپ را در خود دارد.
کتابخانه Semantic شامل دکمه‌ها، تب‌ها، منوهای دراپ‌داون و هرچیزی که شما نیاز دارید می شود. جدای از این موارد دیباگ کردن و رفع مشکل از این فریمورک بسیار ساده است و در کنار این موارد پوسته های پیشفرضی قرار گرفته که می توانید انتخاب کنید و آن ها را برای خودتان سفارشی سازی نمایید.
6. Pure CSS
به شخصه از Pure CSS در چندین پروژه کوچک استفاده کردم و واقعا از آن لذت بردم. این مورد یکی از بهترین فریمورک های سی‌اس‌اس است، به این دلیل که به شما اجازه می دهد تا مواردی که می خواهید در فایل توسعه‌تان باشد را خودتان اضافه کنید.
می توانید در صفحه شروع این فریمورک اطلاعات کاملی راجع به این موضوع و چگونگی استفاده از آن را پیدا کنید. این فریمورک بسیار مینیمالیستی است و می تواند در هر پروژه ای از پروژه شخصی گرفته تا پروژه شرکتی و پیچیده مورد استفاده قرار بگیرد.
7. Ink Interface Kit
با استفاده از Ink Interface Kit می توانید صفحات واکنشگرای فوق العاده‌ای را ایجاد کنید. آن‌ها ساده به نظر می رسند و کدنویسی‌شان نیز بسیار ساده است، اما در کل دقیقا چیزی که از یک فریمورک می خواهید را برای شما فراهم می کند.
Ink حتی همراه با فایل جاوااسکریپت خود عرضه می شود که براساس vanilla JS ساخته شده است. اگر قبلا از این فریمورک استفاده نکرده باشید، برای کار کردن با آن ممکن است کمی زمان لازم داشته باشید. در هر حال این فریمورک براساس سینتکس با جی‌کوئری می تواند مقایسه شود.
این فریمورک با Sass کار می کند و از semantic HTML استفاده می کند. به نظر می آید که فریمورک بسیار عالی برای فرانت اند باشد.
8. GroundworkCSS
GroundworkCSS یک فریمورک سنگین برای طراحی واکنشگرا است. در حال حاضر این فریمورک نسخه 2 خود را عرضه کرده است و شما می توانید آن را در دو قالب دانلود کنید. ۱- html/css/js و ۲- در قالب روبی‌ان‌ریلز.
هر دوی این موارد به یک صورت کار می کنند و هر دو سیستم تنومندی برای ایجاد سیستم طراحی رابط کاربری را ایجاد می کنند. می توانید نگاهی به ساختار لایه بندی آن بیاندازید تا کمی متوجه شوید که آن چگونه روی وبسایت تان خواهد بود.
9. Materialize.css
تقریبا همگان از زبان طراحی بزرگ گوگل یعنی طراحی متریال با خبر است. این طراحی را می توانید به صورت ارجینال در طراحی سیستم عامل آندروید مشاهده کنید، با این وجود چنین طراحی با استفاده از فریمورک‌هایی مانند Materialize به دنیای وب نیز آمده است.
فریمورک درست همانطور که شما انتظار دارید کار می کند. کاملا واکنشگرا، سازگاری استاندارد با انواع دستگاه‌ها، پشتیبانی از مرورگرهای مختلف و … .
تنها تفاوت این فریمورک با بقیه موارد این است که المان‌های فریمورک به صورت استاندارد براساس طراحی متریال عرضه شده اند.
در حالیکه این فریمورک، مورد علاقه من برای طراحی متریال است اما می توانید فریمورک های متریال دیگری که در سطح اینترنت وجود دارد را نیز مشاهده کنید.
10. Topcoat
وقتی بحث به موضوع کارایی می رسد نمی توانید کیفیت کدها را نادیده بگیرید. Topcoat این موضوع را به قلب خود برده و کارایی را به بخشی اصلی از فریمورک تبدیل کرده است.
استفاده از این فریمورک بسیار ساده است و همچنین خواندن کدهای CSS و HTML نوشته شده با این فریمورک بسیار ساده است.
فایده اصلی این فریمورک آزمایش بارگذاری و تمرکز داشتن روی کارایی است. هرکسی که به یک لایه بندی سفارشی همراه با سرعت بارگذاری بالا نیاز دارد می تواند نگاهی به Topcoat بیاندازد.
11. Petal
Petal یکی از موارد جدید در بین فریمورک های سی‌اس‌اس موجود در بازار است. درست مثل موارد دیگر کاملا واکنشگرا است و صد در صد متن باز است. از این رو می تواند با فریمورک های دیگر رقابت کند.
اما نکته مفید ماجرا سبک بودن فریمورک است. این فریمورک براساس پیش‌پردازنده LESS ایجاد شده است و برای کار کردن نیاز به فایل Normalize نیز دارد.
می توانید از طریق مستندات این فریمورک سینتکس و موارد دیگر آن را مشاهده کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید