سایت‌های الهام‌بخش طراحی UI: ۶ جا برای پیدا کردن رابط‌های واقعی
شش سایت که به‌جای موکاپ، رابط‌های واقعی نشان می‌دهند: Mobbin، Refero، Page Flows، Landingfolio، Dark Mode Design و SaaSFrame. هر کدام برای چه کاری بهترند، باز کردنشان چقدر خرج دارد و چطور در بریف از آن‌ها استفاده کنیم.
فریم خالی سخت‌ترین جا برای شروع یک طراحی است. رابط‌های واقعی کار را آسان می‌کنند: می‌بینید یک صفحه تنظیمات، یک پی‌وال یا یک هیرو وقتی تیمی آن را منتشر کرده، چه شکلی دارد. این‌ها شش سایتی هستند که صفحههای واقعی جمع می‌کنند، اینکه هرکدام برای چه کاری بهترند و کدام‌ها اول از شما ثبت‌نام می‌خواهند.
| سایت | بهترین برای | باز کردن بدون پرداخت |
|---|---|---|
| Mobbin | صفحههای واقعی اپ، بیش از ۶۰۰٬۰۰۰ | حساب رایگان، دسترسی محدود |
| Refero | جست‌وجوی صفحه‌ها، فلوها و الگوها | جست‌وجو در کتابخانه روی خود سایت |
| Page Flows | فلوهای کامل همراه با ضبط صفحه | دوره آزمایشی ۳ روزه |
| Landingfolio | لندینگ‌ها، هیروها، کامپوننت‌ها | مرور گالری |
| Dark Mode Design | طراحی‌های تیره وب‌سایت | مرور شبکه‌ی طراحی‌ها |
| SaaSFrame | وب‌سایت‌ها و صفحههای محصول SaaS | مرور بر اساس دسته‌بندی |
۱. Mobbin: صفحههای واقعی اپها
Mobbin خودش را «کتابخانه رفرنس طراحی برای اپها و سایت‌ها» می‌نامد و بیش از ۶۰۰٬۰۰۰ صفحه منتشرشده را فهرست میکند، با موارد تازه‌ی هر هفته. کتابخانه‌اش به اپها، سایت‌ها، صفحه‌ها، فلوها، انیمیشن‌ها و المان‌های UI تقسیم شده است. می‌توانید رایگان عضو شوید، اما حساب رایگان دسترسی محدود دارد و کل کتابخانه پشت پلن‌های پولی است.
دنبال چه باشید: اینکه چند اپ مختلف یک صفحه‌ی واحد را چطور حل کرده‌اند. یک نوع صفحه مثل آنبوردینگ یا پی‌وال را انتخاب کنید و قبل از اینکه مال خودتان را بکشید، پنج نمونه را پشت‌سرهم مقایسه کنید.
۲. Refero: رفرنس‌هایی که میشود جست‌وجو کرد
Refero خودش را «صفحه‌ها، فلوها و الگوهای واقعی محصول» توصیف میکند. همه‌چیزش حول جست‌وجو ساخته شده. صفحه‌اش پیشنهادهایی مثل ثبت‌نام با تأیید ایمیل، چیدمان داشبورد با نمودار و صفحههای ورود با SSO و بازیابی رمز را میدهد و برای وب‌اپ‌ها و اپ‌های iOS تب‌های جدا دارد.
دنبال چه باشید: یک سؤال مشخص که به شکل جست‌وجو تایپ شده باشد. «Calendar booking» سریع‌تر از ورق زدن یک گالری جواب‌های کاربردی میدهد.
۳. Page Flows: کل مسیر
بیشتر سایت‌های الهام‌بخش صفحههای تکی نشان می‌دهند. Page Flows مسیر بین آن‌ها را نشان میدهد. شعارش «UI/UX Inspiration from Real User Flows» است و فلوها را با ضبط صفحه و توضیحات گامبهگام همراه میکند.
می‌توانید بر اساس iOS، اندروید، وب و ایمیل فیلتر کنید و یک دوره آزمایشی ۳ روزه دارد.
دنبال چه باشید: گام‌های بین صفحه‌ها. یک فلوی ثبت‌نام خوب را آنچه بعد از دکمه اتفاق می‌افتد تعیین میکند، پس کل توالی را ببینید، نه فقط فریم اول را.
۴. Landingfolio: ایده‌های لندینگ و هیرو
Landingfolio گالری لندینگهاست. وقتی بررسی کردیم، سربرگش ۹۶۱ سایت را نشان می‌داد و ۴ مورد در همان هفته اضافه شده بود، با فیلتر بر اساس صنعت، نوع صفحه (لندینگ، قیمت‌گذاری، درباره ما، ورود، ثبت‌نام، ۴۰۴) و رنگ. کامپوننت‌هایی برای Tailwind، Webflow و Figma هم فهرست کرده است.
دنبال چه باشید: اولین صفحهای که دیده میشود، یعنی هیرو. روی صنعت خودتان فیلتر کنید و ببینید رقبا آن یک چیزی را که بازدیدکننده باید بداند چطور می‌گویند. راهنماهای ما درباره اصول طراحی لندینگ و آناتومی لندینگ SaaS می‌گویند با یافته‌هایتان چه کنید.
۵. Dark Mode Design: وبسایتهای تیره
Dark Mode Design شبکه‌ای گزینش‌شده از وبسایتهای تیره است و هر کسی میتواند سایتی را ارسال کند. هر کاشی یک طراحی تیره‌ی کامل است، پس می‌بینید دیگران کنتراست، رنگ تاکیدی و تصویرسازی را روی زمینه‌ی مشکی یا نزدیک به مشکی چطور اداره می‌کنند. همه‌ی اسکرین‌شات‌ها متعلق به صاحبانشان است.
دنبال چه باشید: رنگ دوم. ببینید هر سایت روی رنگ تاکیدی‌اش چه رنگ‌های دیگری اضافه کرده و کجا از آن‌ها استفاده میکند. مقاله‌ی ما درباره سیستم رنگ دارک مود توضیح میدهد چطور سیستم خودتان را بسازید.
۶. SaaSFrame: صفحههای SaaS
SaaSFrame «کتابخانه الهام طراحی UI و UX برای SaaS» است، از وب‌سایت‌ها و رابط‌های واقعی محصولات SaaS. دسته‌بندی‌هایش اندازه‌ی کتابخانه را نشان می‌دهند: وقتی بررسی کردیم ۲۹۶ صفحه لندینگ، ۲۱۱ صفحه قیمت‌گذاری، ۱۹۱ داشبورد، ۴۲۴ صفحه افزودن و ویرایش و ۵۷۱ صفحه راه‌اندازی حساب داشت. الگوهایی مثل ناوبری سایدبار، چک‌لیست آنبوردینگ و وضعیت‌های تولید با AI را هم فهرست میکند و می‌گوید فایل‌های قابل‌ویرایش Figma و پرامپت‌های طراحی با AI ارائه میدهد.
دنبال چه باشید: صفحههای خسته‌کننده. قیمت‌گذاری، تنظیمات و راه‌اندازی حساب تعیین می‌کنند محصول تمام‌شده به نظر برسد یا نه، و همین‌ها صفحه‌هایی‌اند که فریم خالی شروعشان را از همه سخت‌تر میکند.
چطور هر شش را با هم به کار ببریم
- صفحه را نام ببرید. صفحه یا فلویی را که طراحی میکنید یک خطی بنویسید.
- سایت مناسب را انتخاب کنید. صفحههای کامل اپ برای Mobbin، یک سؤال برای Refero، یک مسیر برای Page Flows، یک هیرو برای Landingfolio، تم تیره برای Dark Mode Design و محصول SaaS برای SaaSFrame.
- سه تا ذخیره کنید، نه سی تا. سه نمونه‌ای را بردارید که صفحه‌ی شما را بهتر از بقیه حل می‌کنند.
- برای هرکدام یک خط بنویسید. «قیمت روشن، یک دکمه» یک رفرنس است. تصویر ذخیره‌شده بدون یادداشت فقط یک تلنبار است.
- تصمیم را کپی کنید، نه پیکسل‌ها را. بگیرید که چیدمان چه کار میکند و چرا. مقاله‌ی ما درباره طراحی مبتنی بر اسکرین‌شات نشان میدهد رفرنس‌ها را چطور به یک روند کاری تبدیل کنید.
طراح یا کارفرما با «یک صفحه قیمت‌گذاری ساده مثل این یکی، با سوییچ پلن مثل آن یکی» میتواند کلی کار کند. با «مدرنش کن» تقریباً هیچ.
سایت
Mobbin
صفحههای واقعی اپها. حساب رایگان با دسترسی محدود، برای کل کتابخانه پولی.
سایت
Refero
صفحه‌ها، فلوها و الگوهای واقعی محصول که می‌توانید جست‌وجو کنید.
سایت
Page Flows
فلوهای کامل کاربر از اپ‌های برتر، همراه با ضبط صفحه.
سایت
Landingfolio
الهام برای لندینگ و هیرو.
سایت
Dark Mode Design
شبکه‌ای از طراحی‌های تیره وب‌سایت.
سایت
SaaSFrame
کتابخانه الهام طراحی UI و UX برای SaaS.
فایل رایگان Figma
۶ سایت برای ایده‌های UI
هر شش لینک و اینکه هر سایت به چه دردی می‌خورد، در یک فایل رایگان.
سوالات متداول
بهترین وب‌سایت‌ها برای الهام گرفتن در طراحی UI کدامند؟
Mobbin، Refero، Page Flows، Landingfolio، Dark Mode Design و SaaSFrame. این‌ها صفحههای اپ، رفرنس‌های قابل جست‌وجو، فلوهای کامل کاربر، لندینگ‌ها، وبسایتهای تیره و رابط‌های SaaS را پوشش می‌دهند.
آیا Mobbin رایگان است؟
تا حدی. Mobbin اجازه میدهد رایگان با دسترسی محدود عضو شوید و کل کتابخانه با بیش از ۶۰۰٬۰۰۰ صفحه پلن پولی میخواهد.
نمونههای واقعی فلوی کاربر را از کجا پیدا کنم؟
از Page Flows. فلوهای اپها و وبسایتهای واقعی را با ضبط صفحه و توضیحات گامبهگام نشان میدهد و یک دوره آزمایشی ۳ روزه دارد.
الهام برای طراحی لندینگ را از کجا پیدا کنم؟
Landingfolio گالری لندینگهاست که بر اساس صنعت و نوع صفحه فیلتر میشود. SaaSFrame هم صفحههای لندینگ SaaS را فهرست کرده است.
الهام برای وبسایتهای تیره را از کجا پیدا کنم؟
Dark Mode Design وبسایتهای تیره را در یک شبکه جمع میکند و هر کسی میتواند سایتی را ارسال کند.
چطور الهام بگیرم بدون اینکه کپی کنم؟
دو یا سه رفرنس برای صفحهای که طراحی میکنید ذخیره کنید و برای هرکدام یک خط بنویسید که چه چیزی را خوب انجام میدهد. از تصمیم استفاده کنید، مثل قیمت روشن یا دکمهی تکی، و چیدمان را خودتان بکشید.
منابع
- Mobbin، mobbin.com: «کتابخانه رفرنس طراحی برای اپها و سایت‌ها»، بیش از ۶۰۰٬۰۰۰ صفحه منتشرشده، عضویت رایگان، پلن‌ها. بررسی‌شده در ۴ نوامبر ۲۰۲۶.
- Refero، refero.design: «صفحه‌ها، فلوها و الگوهای واقعی محصول». بررسی‌شده در ۴ نوامبر ۲۰۲۶.
- Page Flows، pageflows.com: «UI/UX Inspiration from Real User Flows»، ضبط صفحه و توضیحات، دوره آزمایشی ۳ روزه. بررسی‌شده در ۴ نوامبر ۲۰۲۶.
- Landingfolio، landingfolio.com: «The Best Landing Page Design Inspiration»، ۹۶۱ سایت در روز بررسی. بررسی‌شده در ۴ نوامبر ۲۰۲۶.
- Dark Mode Design، darkmodedesign.com: شبکه‌ای از وبسایتهای تیره، امکان ارسال سایت. اسکرین‌شات‌ها متعلق به صاحبانشان است. بررسی‌شده در ۴ نوامبر ۲۰۲۶.
- SaaSFrame، saasframe.io: «SaaS UI & UX Design Inspiration Library»، تعداد صفحه‌ها طبق آنچه در روز بررسی نمایش داده می‌شد. بررسی‌شده در ۴ نوامبر ۲۰۲۶.
- ابتدا به‌صورت کاروسل در UX Brainy منتشر شد.
Collected the references and still need the interface built? Our team turns a clear brief into product UI that holds up in every state.
Get Started
