Linear
أداة دقيقة في منتصف الليل
نظام التصميم الخطي عبارة عن مركز تحكم ليلي مبني على أسطح سوداء تقريبًا (#08090a) مع كتابة بيضاء ناصعة ولمسة نهائية واحدة من اللون الأخضر الليموني (#e4f222) تعمل كمصباح يدوي عملي - صغير الحجم، عالي التباين، ويُستخدم باعتدال للإشارة إلى الإجراءات. تتعامل الواجهة مع الظلام كأساس وليس كموضوع: النص أبيض ناصع مع تباعد ضيق بين الأحرف (-0.022em)، وأوزان الخطوط تتراوح بين 400 و510 بدلاً من الخطوط العريضة، والحدود رفيعة للغاية (0.5 بكسل) للسماح للهندسة بأداء الدور الذي تؤديه الظلال عادةً. تبدو المكونات مصممة بدقة متناهية - أنصاف أقطار 6 بكسل و12 بكسل، وهوامش صغيرة 8-12 بكسل، وغياب شبه تام للعناصر الزخرفية - مما يسمح لواجهة المستخدم الخاصة بالمنتج (بطاقات المهام، ولوحات كانبان، ولوحات وكيل الذكاء الاصطناعي) بأن تكون النسيج البصري الوحيد في نظام هادئ.
يبلغ أقصى عرض للتصميم حوالي 1200 بكسل، وهو مُتمركز في المنتصف، بخلفية داكنة تمتد إلى حواف نافذة العرض. العنصر الرئيسي هو عنوان رئيسي كبير، مُحاذى لليسار (64-72 بكسل)، مُقترنًا بعبارة تحث المستخدم على اتخاذ إجراء (CTA) مُحاذية لليمين، يليه لقطة شاشة كبيرة للمنتج تمتد قليلاً خارج العرض الأقصى. يتناوب تصميم الأقسام بين تركيبات ثنائية الأعمدة مع نص على اليسار وصورة على اليمين، وشرائط عرض منتجات كاملة العرض مفصولة بهوامش رأسية 96 بكسل. الشريط الذي يحمل شعار العميل عبارة عن صف أفقي واحد. لا تستخدم الصفحة أبدًا شبكات بطاقات ثلاثية الأعمدة أو هياكل مُرصّفة - تظل كثافة المعلومات منخفضة، حيث تستخدم معظم الأقسام مساحة بيضاء واسعة وعنصرًا محوريًا واحدًا على الشاشة. شريط التنقل عبارة عن شريط علوي ثابت مع شعار مُحاذى لليسار وروابط مُحاذية لليمين، بدون شريط جانبي أو قائمة رئيسية ضخمة.
تعتمد لغة Linear البصرية على لقطات شاشة للمنتج: فالرسومات التوضيحية في البداية وفي الأقسام هي صور حقيقية لواجهة مستخدم تطبيق Linear، مُلتقطة بأقصى قدر من التفاصيل - بطاقات المهام، ولوحات كانبان، ولوحات معلومات وكيل الذكاء الاصطناعي، ولوحات الأوامر - موضوعة في إطارات رفيعة. لا صور جاهزة، ولا صور نمط حياة، ولا رسومات توضيحية تجريدية. تُعرض الشعارات كشريط رمادي محايد (#8a8f98) بحجم موحد للعملاء. أما الأيقونات فهي صور SVG خطية بسيطة بتدرج رمادي أحادي اللون. تطفو لقطة الشاشة في أعلى الصفحة على تدرج خطي دقيق (من الداكن إلى الفاتح)، مما يخلق عمقًا بصريًا دون استخدام مناظر طبيعية حقيقية. كل عنصر بصري هو عنصر وظيفي في المنتج نفسه.
لوحة الألوان
ماركة
- Acid Lime
#e4f222— تُشكل أزرار التحكم الرئيسية ومؤشرات التنقل النشطة لمسةً لامعةً تكسر نظام الألوان الأحادي اللون.
حيادي
- Mist
#d0d6e0— العناوين الثانوية، نص الأزرار على الأسطح الداكنة - Void
#08090a— لوحة الصفحة، صورة خلفية بعرض كامل - بشكل افتراضي، يتم وضع جميع العناصر على هذه الخلفية. - Carbon
#0f1011— تُعد أسطح البطاقات، وأشرطة التنقل، خطوة متقدمة عن لوحة الرسم لوضع المحتوى داخل البطاقات. - Obsidian
#161718— أسطح مرتفعة، ألواح كرتونية أعمق - Graphite
#23252a— حدود دقيقة، فواصل، خطوط خارجية دقيقة للأزرار - حواف مزخرفة ذات تباين منخفض - Smoke
#383b3f— تتميز الحواف الرقيقة بتباين أعلى من فواصل الأقسام المصنوعة من الجرافيت.
الطباعة
من 13 إلى 72 بكسل · 8 خطوات
- Inter Variable — الاستبدال: Inter (variable) · الخطوط العريضة 300, 400, 510, 590 · خط واجهة المستخدم الأساسي وخط العنوان - يُستخدم في التنقل، ونص الصفحة، والعناوين، والأزرار، والبطاقات.
- Berkeley Mono — الاستبدال: JetBrains Mono · الخطوط العريضة 400 · نص واجهة المستخدم المجاور للرمز - معرّفات الإصدار (ENG-2703)، اختصارات لوحة المفاتيح، بيانات تعريف خط أحادي المسافة
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | واسع |
| الخطوة الأساسية | 8px |
| نصف قطر الزر | 6px |
| نصف قطر البطاقة | 12px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 96px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Linear وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Aaru — مرصد مجال الجسيمات في منتصف الليل
- Atlas Card — قبو منتصف الليل، بشعاعه الياقوتي الوحيد، هو مساحة سوداء حالكة حيث الشيء الوحيد المهم هو اللون الأزرق الكهربائي العميق.
- Checkly — مركز التحكم بمهام المدار العميق
- Savee — لوحة سوداء للمنسقين البصريين
- Inngest — مرصد مظلم وهادئ، مجهز للعمل بالأجهزة، مضاء بضوء مؤشر كهرماني واحد
- Dala — كوكبة تحوم على مخمل أسود
- Origin Financial — معرض ليلي للفخامة الهادئة. غرفة هادئة، تكاد تكون مظلمة، حيث تخلق الخطوط الكبيرة ذات الزخارف وبعض اللوحات الملونة المضيئة شعوراً بأن التمويل عمل فني منتقى بعناية.
- Hyperstudio — التصميم محفور على حجر الأوبسيديان. النص والخطوط الدقيقة تُحيط بمساحة بيضاء من السواد الخالص، مع علامات بوصلة ذهبية متفرقة تُشير إلى الطريق.
- Air — منحوتة "سماء منتصف الليل من خلال الزجاج"
- Resend — مخمل أسود بلون نيون أرجواني
- Raycast — مركز قيادة منتصف الليل، كورال نيون
- Dimension — محطة عمل مضاءة عند الغسق بألواح زجاجية مصنفرة