Apple
یک اتاق سفید با یک کلید آبی
طراحی اپل نمونهای از خویشتنداری است: یک بوم تقریباً سفید، فضای سفید فراوان و یک لهجه آبی پررنگ و واحد که باعث میشود هر عملی سنجیده به نظر برسد. تمرکز اصلی بر تایپوگرافی است - SF Pro، با فاصله منفی حروف که با افزایش اندازه کاهش مییابد و به تیترها وضوح معماری میدهد بدون اینکه بیش از حد سنگین باشد. محصول، طراحی است: عکسهای بزرگ محصول و تصاویر سبک زندگی غالب هستند، در حالی که عناصر کرومی در قابهای نازک، ناوبری شفاف و خطوط ظریف قرار میگیرند. بخشها با بلوکهای تمام رنگی برای مطالب تبلیغاتی، در مقابل یک پسزمینه خاکستری روشن به طور متناوب قرار میگیرند و از طریق تغییر در مقیاس به جای عناصر تزئینی، ریتم ایجاد میکنند.
طرحبندی صفحه، یک صفحه تمامعرض بدون حداکثر عرض ثابت است - بخشها از لبه تا لبه کشیده میشوند و بلوکهای متنی در مرکز تقریباً 980 پیکسل قرار دارند. ناوبری یک نوار جهانی ثابت و واحد با یک زیرپوشه اضافی برای هر محصولی است که با اسکرول ظاهر میشود. طرحبندی اصلی همیشه در مرکز قرار دارد: یک نام بزرگ محصول، یک شعار تکخطی، دو دکمه قرصی، سپس یک تصویر محصول که بقیه نمای صفحه را پر میکند. بخشها به صورت عمودی با ریتم عمودی سخاوتمندانه (64 پیکسل + بین بخشها)، با کد #f5f5f7 و پسزمینههای رنگی متناوب، روی هم چیده شدهاند. صفحه پایین یک ردیف افقی واحد از کارتهای خدمات تمامعرض (Apple TV+، Fitness+، Music، Arcade) است که هر کدام یک بلوک عکس با متن رویی و یک دکمه قرصی هستند. بدون سایدبار، بدون طرحبندی محتوای چند ستونی، بدون ترکیببندی نامتقارن - همه چیز در مرکز، روی هم چیده شده و متقارن است.
عکاسی زبان بصری غالب است. عکسهای محصول در پسزمینهای کاملاً سفید یا خاکستری ملایم و بدون هیچ زمینهای گرفته میشوند - دستگاه ستاره است، جدا و روشن. عکسهای سبک زندگی در بنرهای تمامعرض، اغلب با اشیاء برشخورده نمایش داده میشوند. گرادیانهای رنگی (آبی پاستلی، صورتی، سبز) به عنوان پسزمینهای برای بخشهای محصول عمل میکنند، نه به عنوان تزئین. آیکونوگرافی مینیمالیستی و مبتنی بر خط، با ضخامت ۱-۲ پیکسل، در همان مقیاس خاکستری متن است. هیچ تصویرسازی، هیچ گرافیک انتزاعی، هیچ رندر سهبعدی، به جز خود عکسهای محصول وجود ندارد.
پالت
برند
- Apple Blue
#0071e3— دکمههای عملیاتی پر شده، حالتهای انتخاب شده - تنها رنگ کروماتیک تعاملی که به طور مختصر استفاده شده تا هر ظاهری معنادار باشد. - Link Blue
#0066cc— حاشیههای اکشن برجسته، لینکهای جاسازیشده - در جایی که یک تبلت پرشده بیش از حد پر زرق و برق باشد، از رنگی اشباعشدهتر از آبی اپل استفاده شده است. - Signal Blue
#2997ff— قابهای تزئینی، خطوط بیرونی تصویر، حاشیه آیکونها - روشنترین رنگ آبی در سیستم، که بیشتر برای ایجاد حس و حال استفاده میشود تا تعامل با کاربر.
خنثی
- Carbon
#1d1d1f— متن اصلی، حاشیههای عنوان، خطوط ناوبری، حاشیههای کارت - رنگ جوهر غالب تقریباً مشکی با کمی گرمی است. - Frost
#f5f5f7— بوم صفحه، پسزمینه متن اصلی و سطح پاورقی به رنگ خاکستری روشن مخصوص اپل هستند، کمی سردتر از سفید خالص. - Ice
#f4f8fb— سطوح پر شده رسا، رنگهای ظریف، متن دکمه روی پسزمینه تیره - یک رنگ آبی ظریف که به بخش مورد نظر جان میبخشد بدون اینکه آن را برجسته کند. - Smoke
#333333— متن ثانویه، رنگ ناوبری، حاشیه دکمهها - یک رنگ خنثی همهکاره برای حاشیهها و آیکونهایی که به جذابیت بیشتری نسبت به خاکستری متوسط نیاز دارند. - Graphite
#474747— متن ناوبری، حاشیههای ناوبری، حاشیههای لینک - در سلسله مراتب عناصر، جایگاه میانی بین کربن و دود را اشغال میکند. - Ash
#707070— متن پاورقی، حاشیههای فهرست، حاشیههای ناوبری، متن بدنه بیصدا - خاکستری متوسط برای محتوایی که باید وجود داشته باشد اما برجسته نباشد.
تایپوگرافی
از ۱۲ تا ۵۶ پیکسل · ۸ مرحله
- SF Pro Display — جایگزینی: Inter · طرح کلی 400, 600, 700 · تیترها و متنهای بزرگ - اندازههای ۴۰ پیکسل به بالا - از قالب نمایشی برای دیافراگم باریکتر و ردیابی نگاتیو قویتر استفاده میکنند؛ ۷۰۰ برای طرحبندیهای تبلیغاتی و ۴۰۰ برای نام محصولات در محتوای سرمقاله در نظر گرفته شده است.
- SF Pro Text — جایگزینی: Inter · طرح کلی 300, 400, 600 · متن بدنه، ناوبری، دکمهها، زیرعنوانها — فونت مناسب؛ ۴۰۰ برای متن بدنه، ۳۰۰ برای زیرعنوانها و برچسبهای واجد شرایط، ۶۰۰ برای عناصر ناوبری و متن دکمه؛ فاصله منفی حروف متناسب با اندازه کاهش مییابد (از -۰.۰۲۲em تا ۱۲px به -۰.۰۱em تا ۴۴px).
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 12px |
| شعاع دکمه | 980px |
| شعاع کارت | 8px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 64px |
| عرض صفحه | 1440px |
هوش مصنوعی وبسایت شما را به سبک Apple میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Ui — طرح بالینی روی کاغذ مات
- ElevenLabs — یک مقاله تصویری با تُنهای کرم گرم با تیترهای ظریف. یک دفترچه یادداشت به سبک باوهاوس - کاغذ به رنگ پوست تخممرغ، جوهر مشکی و یک تکه رنگ بنفش و نارنجی برای نمایش محصول.
- monopo saigon — درخششی مایع و رنگینکمانی در پس سکوت تحریریه - گالری تحریریه تکرنگی که بر نوری مذاب شناور است
- Awesomic — توری زینک تحریریه با علائم نگارشی نارنجی که یادآور پولکهای رنگی است
- Monad — مجله فنی سرمقاله در مورد پوست گرم
- Dub — پنل کنترل کاغذ برنج مات لینک
- Seline Analytics — یک میز تحلیلی آرام روی کاغذ گرم
- Ventriloc — رصدخانهای از دادهها روی کاغذ گرم - یک اخگر نارنجی که دقت تکرنگ را برجسته میکند
- Duolingo — نماد کلاس بازیگوش روی کاغذ سفید
- Stripe — دفتر حسابی که با جوهر نیلی روی شیشه مات نوشته شده است
- Notion — یک دفترچه یادداشت کاغذی گرم در آفتاب ظهر
- Hyer Aviation — غروب در کابین خلبان بر فراز کاغذ پوستی. آسمان کمرنگ سپیده دم با لوگوی سریف به اندازه بدنه هواپیما تلاقی میکند و یک تکرنگ با رنگ رسی گرم، محدودیت تکرنگی را میشکند.