Notion
دفتر ملاحظات ورقي دافئ تحت شمس الظهيرة
تبدو واجهة Notion كدفتر ملاحظات ورقي محبوب في ضوء النهار الساطع: لوحة دافئة بلون كريمي (#f6f5f4) تُشعرك بملمسها بدلاً من أن تكون جامدة، وخطوط sans-serif أنيقة تُضفي عمقًا تحريريًا على نص المنتج، والألوان تُستخدم كعلامات ترقيم بسيطة - تُبرز "حبوب" الخوخ الأفعال، ولون أزرق واحد يُرسي الحركة الرئيسية، ومجموعة متغيرة من ألوان الزينة (المرجاني، والعنبري، والسماوي، والليل) تُلوّن خلفيات البطاقات كالملصقات. تُرتّب البطاقات على لوحة ذات حدود وزوايا رفيعة - بدون ظلال أو ألوان معدنية - مثل الأقسام المُسطّرة في دفتر ملاحظات Moleskine. الرسوم المتحركة مرحة ونابضة بالحياة، مع انتقالات سلسة عند 200 مللي ثانية ورسوم متحركة نابضة بالحياة للشخصيات تُضفي حيوية على الواجهة دون أن تكون مُزخرفة.
عند التوسيط، يقتصر الحد الأقصى للعرض على 1440 بكسل تقريبًا. العنصر الرئيسي عبارة عن مجموعة متمركزة: صف من الرموز ← عنوان رئيسي كبير من سطرين مع حبة ملونة مدمجة ← عنوان فرعي ← صف يحتوي على زرين للحث على اتخاذ إجراء ← نموذج أولي كبير لواجهة مستخدم المنتج. أسفل العنصر الرئيسي، تتناوب الأقسام بين شبكات من البطاقات البيضاء ولوحات ملونة. جدار الشعارات عبارة عن شبكة متمركزة من صف واحد لشعارات الشركاء بتدرجات الرمادي. تستخدم كتل الميزات تخطيطًا من عمودين (نص على اليسار، لوحة ملونة على اليمين)، بالتناوب من اليسار إلى اليمين بين الأقسام. يستخدم قسم "اسأل مساعديك عند الطلب" شبكة بطاقات 2×2، حيث تشغل البطاقة العلوية العرض الكامل، وينقسم الصف السفلي إلى عمودين متساويين. المسافات بين الأقسام واسعة (حوالي 80 بكسل)، مما يخلق إيقاعًا رأسيًا هادئًا. شريط التنقل عبارة عن شريط علوي ثابت بارتفاع 64 بكسل مع عناصر تنقل متمركزة وأزرار إجراءات محاذية لليمين.
تُعدّ الرسوم التوضيحية أساسية، دون وجود صور فوتوغرافية. تعتمد اللغة البصرية على رموز مسطحة مُصوّرة (حواف دائرية داخل دوائر ملونة بحجم 2 بكسل)، وعناصر زخرفية تجريدية (خطوط متعرجة مرسومة يدويًا، وبريق، وأسهم، وأشكال زهور)، ونماذج أولية لواجهة مستخدم المنتج. تظهر الرموز في النافذة الرئيسية على شكل صف أفقي من سبعة رموز رمزية، وتنتشر عبر الصفحة كعلامات ترقيم مرحة. لقطات شاشة المنتج هي العناصر البصرية "الحقيقية" الوحيدة: فهي تُظهر واجهة 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— نص التنقل الثانوي، نص المساعدة الخافت، تسميات الأزرار المعطلة - شفافية الحبر 60% - Graphite
#615d59— يتميز النص الرئيسي بلون دافئ - رمادي مائل للبني، والذي يتناغم مع الخلفية الدافئة.
الطباعة
من 12 إلى 96 بكسل · 10 خطوات
- NotionInter — الاستبدال: Inter · الخطوط العريضة 400, 500, 600, 700 · الخط الرئيسي من نوع sans-serif هو خط إنساني هندسي ذو تدرجات دقيقة، ويُستخدم بأحجام 400 لنص المحتوى، و500 لواجهة المستخدم/التنقل، و600-700 للعناوين. يستخدم مقياس الخط تباعدًا سلبيًا حادًا بين الأحرف في الأحجام الكبيرة (-4.6 بكسل عند 96 بكسل، و-2 بكسل عند 72 بكسل)، مما يجعل العنوان يبدو أكثر كثافة وثقة، بدلاً من أن يكون فضفاضًا.
- Lyon Text — الاستبدال: Source Serif Pro · الخطوط العريضة 400 · يُستخدم الخط ذو الزوائد التحريرية، المخصص لأقسام محددة من النص الرئيسي ومقدمات الأقسام، باعتدال (أربع مرات) لإضفاء وزن أدبي على الخط، على غرار الاقتباس في تصميم مجلة. وهو بمثابة عنصر تمييز منهجي وليس تسلسلاً هرمياً موازياً.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | متوسط |
| الخطوة الأساسية | 8px |
| نصف قطر الزر | 8px |
| نصف قطر البطاقة | 12px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 80px |
| عرض الصفحة | 1440px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Notion وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Mollie — عداد من الكشمير، وسجل داكن. اترك مساحة بيضاء واسعة للتصميم التحريري حول النص الأسود، ثم عزز النقاط المتعلقة بالمنتج بألوان كريمية دافئة، وبني إسبريسو، وصور ملموسة لوسائل الدفع الفعلية.
- Kagi — غرفة قراءة منفصلة. أنشئ مساحة بيضاء مفتوحة حول نص جرافيتي جريء، باستخدام لمسات أرجوانية خفيفة وأسطح بألوان الباستيل الدافئة لكسر الهدوء.
- Milanote — ميلانوت هو استوديو إبداعي متخصص. أنشئ صفحات تحريرية على طراز المعرض باستخدام لوحات بصرية عائمة: جدران بإطارات داكنة، ومساحة عرض بيضاء، ولقطات شاشة تبدو كأشياء حقيقية ذات عمق ناعم.
- Co2 — أطلس مناخي في ضوء الشتاء. صمم صفحات تشبه منظرًا جويًا، حيث تبرز العناوين ذات الخطوط المزخرفة والبيانات المصنفة حسب الفئات والصور الجليدية هوامش بيضاء واسعة.
- GitButler — اللون الفيروزي في نهاية النص. مزيج من عناوين ذات حروف serif عالية التباين مع شبكات تقنية دقيقة، وأسطح جرافيت دافئة، ولمسة فيروزية خفيفة.
- ElevenLabs — مجموعة صور بألوان كريمية دافئة مع عناوين دقيقة. دفتر ملاحظات على طراز باوهاوس - ورق بلون قشر البيض، وحبر أسود، ولمسة واحدة من اللونين الأرجواني والبرتقالي لعرض المنتج.
- Awesomic — شبكة زنك تحريرية بعلامات ترقيم برتقالية تذكرنا بالقصاصات الورقية.
- Monad — مجلة فنية تحريرية حول الرق الدافئ
- Dub — لوحة تحكم ورق الأرز غير اللامع من لينك
- Seline Analytics — جدول تحليلي هادئ على ورق دافئ
- Anthropic — مجلة علمية ميدانية على ورق رق دافئ - أسطح عاجية هادئة، وعناوين تحريرية ذات حروف مزخرفة، ولمسة طينية واحدة تظهر فقط عند الحاجة إلى العمل.
- Calendly — حبر أزرق داكن على رخام بارد