فروشگاه آنلاین قطعات کامپیوتر و گیمینگ
جیفورسGeforce.ir
یک فروشگاه قطعات کامپیوتر که همه‌ی صفحه‌هایش از یک کاتالوگ ساخته می‌شوند و هر دسته دور همان عددی طراحی شده که تصمیم خرید را می‌سازد.
01چالش
خرید قطعه‌ی کامپیوتر با قیمت شروع نمی‌شود؛ با یک سؤال شروع می‌شود: «این کارت گرافیک توی کیس من جا می‌شود؟ این رم با مادربردم کار می‌کند؟»
فروشگاه‌های معمول همه‌ی دسته‌ها را با یک قالب نشان می‌دهند و جواب این سؤال را به خود خریدار می‌سپارند؛ یعنی به تماس تلفنی، به جست‌وجو در فروم‌ها، یا به مرجوعی.
02تصمیم‌ها
-
01
یک کاتالوگ، یک منبع حقیقت
صفحه‌های دسته، محصول، تکمیل خرید، ۴۰۴ و فهرست جست‌وجو همه از یک کاتالوگ ساخته می‌شوند؛ پیکربند، فروشگاه، جست‌وجو و مدل سه‌بعدی هیچ‌وقت درباره‌ی یک عدد با هم اختلاف ندارند.
-
02
هر دسته، دور مشخصه‌ی تصمیم‌ساز
قاب مشترک است، اما چیدمان هر دسته دور همان چیزی می‌چرخد که خریدار نگاه می‌کند: متر FPS برای کارت گرافیک، نقشه‌ی واقعی هسته‌ها برای پردازنده، جدول دیتاشیت برای رم و نقشه‌ی به‌مقیاس برای کیس.
-
03
سازگاری، روی خود کارت
در هر دسته می‌پرسم «چه قطعه‌ای دارید؟» و همان قانون سازگاری پیکربند اجرا می‌شود؛ نتیجه روی هر کارت محصول نوشته می‌شود، نه در یک صفحه‌ی جدا.
03اجرا
پیکربند سیستم
سیستم‌های آماده هم با همان قوانین سازگاری سنجیده می‌شوند و اگر ناسازگار باشند، ساخت صفحه‌ها متوقف می‌شود؛ خطا پیش از انتشار پیدا می‌شود، نه بعد از فروش.
دسته‌ی کارت گرافیک
همه‌ی وضعیت فیلترها در آدرس صفحه است؛ هر نمای فیلترشده یک لینک قابل اشتراک است. جست‌وجو نیاز را هم می‌فهمد: «کارت گرافیک برای 4K» یا «زیر ۶۰ میلیون» مستقیم به دسته با همان فیلتر می‌رود.
- مدل‌های سه‌بعدی پارامتریک‌اند، نه فایل دانلودی؛ از همان مشخصات جدول ساخته می‌شوند و فقط وقتی نزدیک دید برسند و مرورگر بیکار باشد بارگذاری می‌شوند.
- اگر دو فریم پشت‌سرهم بیش از ۲۵۰ میلی‌ثانیه طول بکشد، انیمیشن سه‌بعدی متوقف می‌شود تا صفحه روان بماند.
- داده‌ی مهندسی با ارقام لاتین و فونت مونو، مثل دیتاشیت؛ قیمت و متن با ارقام فارسی.
- یک رنگ برند؛ حرارت، سیگنال و بار پردازشی با شدت همان رنگ نشان داده می‌شوند.
- صفحه‌ی بوت به سبک POST فقط در اولین بازدید هر نشست؛ ۴۰۴ با کد 0x194.
- تبدیل صفحه با View Transitions؛ عکس محصول از کارت به صفحه‌ی محصول منتقل می‌شود.
- همین کد، قالب وردپرس و فایل درون‌ریزی ووکامرس را هم می‌سازد.
04نتیجه
- به‌همراه ۵ صفحه‌ی دسته، تکمیل خرید، ۴۰۴ و فهرست جست‌وجو، همه از یک کاتالوگ.
- ۳۶صفحه‌ی محصول
- حجم عکس‌ها برای بزرگ‌ترین نسخه‌ها از ۵٫۷ مگابایت به کمتر از یک مگابایت رسید.
- ۵٫۷ ← ۱مگابایت
- چهار دسته، یک قاب مشترک و چهار چیدمان، هرکدام دور مشخصه‌ی تصمیم‌ساز.
- ۴چیدمان
- بدون فریم‌ورک؛ Three.js فقط وقتی لازم است بارگذاری می‌شود.
- ۰وابستگی npm
قیمت‌ها، موجودی و عکس‌های محصول در این نسخه‌ی پیش‌نمایش نمایشی‌اند.