Notion
یک دفترچه یادداشت کاغذی گرم در آفتاب ظهر
رابط کاربری Notion در نور روز مانند یک دفترچه یادداشت کاغذی محبوب به نظر میرسد: یک بوم گرم و کرمی (#f6f5f4) که به جای استریل، حس لامسه را القا میکند، تایپوگرافی sans-serif سخاوتمندانه که به متن محصول وزن نوشتاری میدهد و رنگ به عنوان نقطهگذاری پراکنده استفاده میشود - "قرصهای" هلویی افعال را برجسته میکنند، یک آبی واحد عمل اصلی را تثبیت میکند و یک آرایه چرخشی از رنگهای تأکیدی (مرجانی، کهربایی، آسمانی، نیمهشب) پسزمینه کارتها را مانند برچسب رنگ میکنند. کارتها روی یک بوم با حاشیهها و گوشههای نازک - بدون سایه، بدون کروم - مانند بخشهای خطدار یک دفترچه یادداشت Moleskine قرار میگیرند. انیمیشن بازیگوشانه و فنری است، با انتقالهای روان در 200 میلیثانیه و انیمیشنهای فنری شخصیت که بدون تزئینی بودن، به رابط کاربری زندگی میبخشند.
در حالت مرکزی، حداکثر عرض تقریباً به ۱۴۴۰ پیکسل محدود میشود. عنصر اصلی یک پشته مرکزی است: یک ردیف از نمادها → یک تیتر بزرگ دو خطی با یک قرص رنگی تعبیه شده → یک زیرعنوان → یک ردیف با دو دکمه فراخوان → یک ماکت بزرگ رابط کاربری محصول. در زیر عنصر اصلی، بخشها بین شبکههای کارتهای سفید و پنلهای رنگی قرار گرفتهاند. دیوار لوگو یک شبکه تک ردیفی مرکزی از لوگوهای شرکا در مقیاس خاکستری است. بلوکهای ویژگی از یک طرح دو ستونی (متن در سمت چپ، پنل رنگی در سمت راست) استفاده میکنند که از چپ به راست بین بخشها متناوب هستند. بخش "از دستیاران خود در صورت تقاضا بپرسید" از یک شبکه کارت ۲x۲ استفاده میکند، جایی که کارت بالایی تمام عرض را اشغال میکند و ردیف پایینی به دو ستون مساوی تقسیم میشود. ناودانهای بین بخشها سخاوتمندانه هستند (~۸۰ پیکسل) و یک ریتم عمودی آرام ایجاد میکنند. ناوبری یک نوار بالایی ثابت با ارتفاع ۶۴ پیکسل با عناصر ناوبری مرکزی و دکمههای عملیاتی راستچین است.
تصاویر از اهمیت بالایی برخوردارند، بدون عکس. زبان بصری بر اساس نمادهای مسطح و مصور (لبههای گرد در دایرههای رنگی ۲ پیکسلی)، عناصر تزئینی انتزاعی (خطوط موجدار دستساز، اکلیلی، فلشها، اشکال گل) و ماکتهایی از رابط کاربری محصول ساخته شده است. نمادها در پنجره اصلی به صورت یک ردیف افقی از هفت آواتار ظاهر میشوند و به صورت نقطهگذاریهای بازیگوشانه در سراسر صفحه پراکنده شدهاند. اسکرینشاتهای محصول تنها عناصر بصری "واقعی" هستند: آنها رابط کاربری واقعی Notion (تابلوهای Kanban، نمایش اسناد، پنلهای عامل هوش مصنوعی) را با مجموعهای کامل از عناصر و دادههای واقعی نشان میدهند. ماکت محصول در پنجره اصلی بزرگ و در مرکز قرار دارد و یک سایه واحد ایجاد میکند که آن را از بوم جدا میکند. هیچ عکس سبک زندگی، هیچ تصویر استوک یا رندرهای سهبعدی انتزاعی وجود ندارد.
پالت
برند
- Notion Blue
#0075de— عنصر اصلی که دکمه فراخوان (CTA) را پر میکند، یک تأکید در ناوبری فعال، دکمههای عمل پر شده تنها طرح رنگی در یک سیستم تقریباً تک رنگ هستند که به اندازه کافی اشباع شده است تا به عنوان یک سوئیچ درک شود.
خنثی
- Paper Warmth
#f6f5f4— بوم صفحه، پسزمینه پنجره اصلی و پسزمینه بخش، همگی رنگهای گرم و کمی بژ دارند که به سیستم حس لامسه و آنالوگ میدهد. - Pure White
#ffffff— سطوح کارت، پنلهای برجسته، پسزمینه لوگو، متن متضاد روی کارتهای تیره. - Ink Black
#000000— متن اصلی، لینکهای ناوبری، سرتیترها - با شفافیتهای مختلف (100%، 95%، 90%، 60%، 40%، 20%) برای ایجاد سلسله مراتب بدون اضافه کردن رنگهای جدید استفاده میشوند. - Charcoal
#111111— یک گزینه متن تیره برای قسمتهایی از رابط کاربری که رنگ مشکی خالص خیلی زننده به نظر میرسد. - Stone
#757575— متن ناوبری ثانویه، متن کمکی بیصدا، برچسبهای دکمه غیرفعال - ۶۰٪ آلفای جوهر - Graphite
#615d59— متن اصلی لحنی گرم - خاکستری مایل به قهوهای - دارد که با پسزمینه گرم هماهنگ است.
تایپوگرافی
از ۱۲ تا ۹۶ پیکسل · ۱۰ مرحله
- NotionInter — جایگزینی: Inter · طرح کلی 400, 500, 600, 700 · فونت اصلی sans-serif یک فونت انسانگرای هندسی با ظرافتهای ظریف است که در اندازههای ۴۰۰ برای متن بدنه، ۵۰۰ برای ناوبری/رابط کاربری و ۶۰۰-۷۰۰ برای عنوانها استفاده میشود. مقیاس فونت از فاصلهگذاری منفی حروف در اندازههای بزرگتر (-۴.۶px در ۹۶px، -۲px در ۷۲px) استفاده میکند که باعث میشود عنوان فشردهتر و مطمئنتر به نظر برسد، نه اینکه بیروح باشد.
- Lyon Text — جایگزینی: Source Serif Pro · طرح کلی 400 · فونت سریف سرمقاله، که برای بخشهای جداگانه متن اصلی و مقدمههای بخشها در نظر گرفته شده است، به طور محدود (چهار بار) استفاده شده است تا به فونت وزن ادبی بدهد، شبیه به یک نقل قول در طرحبندی مجله. این فونت به جای یک سلسله مراتب موازی، به عنوان یک تأکید سیستماتیک عمل میکند.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 8px |
| شعاع دکمه | 8px |
| شعاع کارت | 12px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 80px |
| عرض صفحه | 1440px |
هوش مصنوعی وبسایت شما را به سبک Notion میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- ElevenLabs — یک مقاله تصویری با تُنهای کرم گرم با تیترهای ظریف. یک دفترچه یادداشت به سبک باوهاوس - کاغذ به رنگ پوست تخممرغ، جوهر مشکی و یک تکه رنگ بنفش و نارنجی برای نمایش محصول.
- Awesomic — توری زینک تحریریه با علائم نگارشی نارنجی که یادآور پولکهای رنگی است
- Monad — مجله فنی سرمقاله در مورد پوست گرم
- Dub — پنل کنترل کاغذ برنج مات لینک
- Seline Analytics — یک میز تحلیلی آرام روی کاغذ گرم
- Anthropic — یک ژورنال علمی میدانی روی پوست گرم - سطوح عاجی آرام، سربرگهای سرصفحهدار و یک لهجه گلی که فقط در صورت نیاز به اقدام ظاهر میشود.
- Calendly — جوهر آبی تیره روی مرمر سرد
- Augen Pro — ارائه سفید اپل، آبی الکتریکیِ بالینی، بیوزن و ملایم را به عنوان تنها عنصر تأکیدی در فضایی تکرنگ به نمایش میگذارد.
- Antimetal — شرح وقایع سرمقالهای روی کاغذ کرمرنگ - صبحی آرام در یک مجله علمی، جایی که خویشتنداری، اعتماد به نفس را منتقل میکند و حروف سریف بار سنگین را به دوش میکشند
- Perk — لیموی برقی روی کاغذ روغنی گرم
- Ditto — کارگاهی زیر نور خورشید که نمونههایی از گلهای وحشی خلق میکند. سطوح کرم گرم، رنگ پایه زرد پر جنب و جوش، جوهرهای سرمهای تیره، و اشکال رنگی ارگانیک که در پشت اثر شکوفا شدهاند.
- Officevibe — یک مجلهی سرمقالهای با کاغذ کرمرنگ گرم. یک مقالهی متفکرانه در مورد مدیریت منابع انسانی را تصور کنید که به عنوان یک محصول ارائه میشود - یک فونت سریفِ کجخطی که از طریق یک رابط کاربری آبی مدرن زمزمه میشود.