معرفی پروژه
نئوتک یک پلتفرم دادهمحور مبتنی بر هوش مصنوعی است که برای تحلیل، پیشبینی و تصمیمسازی در حوزههای فینتک و تکنولوژی ساخته شده. هدف ما خلق تجربهای یکپارچه بود که هم برای کاربران حرفهای با نیاز به نمودارها و شاخصهای تخصصی مناسب باشد و هم برای کاربران تازهوارد که به معرفی قابلیتها و روایت تصویری شفاف نیاز دارند.
این پروژه شامل طراحی صفحه فرود (Landing)، داشبورد عملیاتی، ماژول کیف پول دیجیتال، کارتهای وضعیت بازار، و الگوهای محتوایی برای بلاگ/اطلاعرسانی است. در تمام لایهها، محوریت با سادگی، تمرکز بر داده و حس آیندهنگری بوده است.
هدفهای کلیدی تجربه کاربری (UX Goals)
- کاهش بار شناختی با اولویتبندی اطلاعات حیاتی در نخستین نگاه (First Meaningful Paint اطلاعاتی).
- ارائه روایت بصری از «مسیر ارزش» نئوتک: از کشف مسئله تا تصمیمسازی و اقدام.
- ایجاد انسجام ادراکی بین برند، زبان بصری و رفتار تعاملی (Microinteractions).
- تضمین دسترسپذیری برای تاریکترین سطوح پسزمینه با کنتراست و اندازه قلم استاندارد.
هویت بصری و زبان طراحی
پالت رنگ بر پایه تِم تیره با درخشش نارنجی-مسّی و نقاط نئونی انتخاب شد تا حس دقت، قدرت و امنیت داده را تقویت کند. شبکههای گریدی نرم، خطوط ظریف و نورپردازی موضعی (Glow) به شکل هدایتگر توجه کاربر عمل میکنند. تایپوگرافی مدرن و خوانا اجازه میدهد مقیاسبندی اطلاعات در موبایل تا دسکتاپ بدون فشار بصری انجام شود.
- Primary: #0E0E12 (پسزمینه)، #FF7A2F تا #FFA865 (لهجه نئونی)
- Secondary: خاکستریهای خنثی برای متن و خطوط راهنما
- Typo Scale: 12/14/16/20/24/32/40 با کنتراست حداقل 4.5:1
- Iconography: آیکونهای اختصاصی برای وضعیتها و شاخصها
در هِرو (Hero) صفحه فرود، پیام کلیدی ارزش نئوتک در یک جمله کوتاه و یک Call-to-Action دوحالته (آزمایش دمو / شروع رایگان) ارائه شد. بافتهای گرادینتی و خطوط مداری، حس حرکت داده را القا میکنند و حضور موجود زنده (مانند چشم شاهین) استعارهای از دقت و دید بلندمدت است.
داشبورد داده و کیف پول دیجیتال
داشبورد با الگوی کارتهای دادهای طراحی شد تا هر واحد اطلاعاتی استقلال ادراکی داشته باشد. نمودارهای روند، درصد تغییرات، و شاخصهای کلیدی در کنار سوییچر داراییها قرار گرفتهاند. رنگهای سبز/نارنجی فقط برای دلالت معنایی افزایش/کاهش استفاده شده تا خطای تفسیر بصری کاهش یابد.
- کارت موجودی با ماسککردن اطلاعات حساس و امکان Copy Address.
- سکشن مبادله با ورودیهای عددی، اعتبارسنجی لحظهای و نمایش نرخ تبدیل.
- نمودار خطی با نقطههای برجسته روی وقایع مهم (Tooltips با تاخیر کوتاه).
- فیلترهای زمانی (۱ روزه/۷ روزه/۱ ماهه/۱ ساله) با بازخورد فعالسازی واضح.
معماری اطلاعات و جریان کاربر
نقشه پیمایش بر سه ستون «معرفی → مزایا → اقدام» در لندینگ و «مرور کلی → جزئیات → اقدام» در داشبورد استوار شد. در هر گام، تنها یک عمل اصلی پیشنهاد میشود تا از چندگزینگی و تصمیمزدگی جلوگیری شود. دستهبندی اطلاعات در عمق دو سطحی نگه داشته شده تا دسترسی سریع روی موبایل حفظ شود.
دسترسپذیری (A11y) و خوانایی
- کنتراست متن/پسزمینه مطابق WCAG AA در تمام حالتها.
- فوکوس استایل واضح برای کیبوردنویگیشن و عناصر قابل کلیک.
- هدف لمسی حداقل 44×44px برای کنترلهای اصلی.
- خطوط راهنما و برچسبهای کمکی برای مقادیر مالی و کریپتو.
کامپوننتها و دیزاین سیستم
برای تسهیل توسعه و مقیاسپذیری، یک دیزاینسیستم سبک با توکنهای رنگ، سایه، شعاع گوشه، فاصلهگذاری و الگوهای سهحالته (Default/Hover/Active) تعریف شد. دکمهها، کارتها، چپسها، تبها، اینپوتها و باجها قابل استفاده مجدد هستند و با تغییر توکنها، کل سیستم تمبندی میشود.
- Radius: 16–24px با سایههای نرم چندلایه
- Spacing Scale: 8px-based (8/12/16/24/32/48)
- States: Focus, Hover, Pressed, Disabled با انیمیشن 120ms
- Empty States و Loading Skeleton برای پایداری ادراکی
کارایی، رندر و عملکرد
گرافیکها به WebP و SVG بهینه شدند، تایپوگرافی با سابستینگ و Lazy Loading مدیریت شد و از کاهش برندینگ در فونتهای عنوان برای افزایش سرعت استفاده گردید. در نمودارها، رندر مرحلهای و محدودسازی نقاط داده در ویو اولیه اجرا شد تا افت فریم رخ ندهد.
- First Contentful Paint زیر 1.1s در دسکتاپ نمونه.
- بهینهسازی تصاویر هرو و کارتها با اندازههای پاسخگو (srcset).
- کاهش Reflow با استفاده از ارتفاعهای رزروشده برای Skeleton.
- Minify/CSS Critical Extract برای کاهش بلاک رندر.
فرآیند طراحی و تحویل
- Discovery & Benchmark: جمعآوری نیازهای کاربر و معیارهای رقبا.
- Information Architecture: تعریف سناریوها و جریان وظایف.
- Wireframe → Hi-Fi: از طرحهای خاکستری تا ماکاپهای نهایی.
- Prototype & Test: تست سناریوها و اصلاح براساس بازخورد.
- Design System & Handoff: مستندسازی و تحویل به تیم توسعه.
نتایج و تأثیر
پس از اعمال طراحی جدید، نرخ تعامل با سکشنهای تحلیلی و نرخ کلیک روی CTA اصلی افزایش یافت. ساختار کارتهای داده به کاربران حرفهای امکان اسکن سریعتری داد و کاربران جدید نیز مسیر آشنایی تا اقدام را بدون سردرگمی طی کردند. دیزاینسیستم ایجاد شده، هزینه نگهداری و زمان افزودن فیچرهای تازه را بهطور محسوسی کاهش میدهد.
اقلام تحویلشده
- فایلهای طراحی هایفیدلیتی (Desktop/Tablet/Mobile).
- کتابچه سبک (Style Guide) و توکنهای دیزاینسیستم.
- نمونهکد HTML/CSS برای کامپوننتهای کلیدی.
- پکیج آیکونهای اختصاصی و دستورالعمل دسترسپذیری.
جمعبندی
نئوتک نمونهای از همنشینی طراحی مینیمال تیره با کارکردهای دادهمحور است. روایت منسجم، کنتراست هوشمند و میکرواینترکشنهای سنجیده، بستری فراهم کرده که تصمیمگیری سریعتر، امنتر و لذتبخشتر شود.
