إتقان النسبة الذهبية في التصميم

يبدو تصميمك صحيحًا تقريبًا ، ولكن هناك شيء ما يشعر به. التباعد يبدو محرجا. النسب لا تعمل. يمكنك ضبط الهوامش والحشو ، ولكن هذا الإحساس المزعج بعدم التوازن يبقى. قد تكون القطعة المفقودة هي النسبة الذهبية.

وقد وجه هذا المبدأ الرياضي تصميم رائع لعدة قرون. وعيوننا تفضل بشكل طبيعي هذه النسب المحددة. يتخطى معظم المصممين النسب الذهبية أو يسيئون إساءة استخدامها بسبب صعوبة الكراك. ومع ذلك ، مع منشئ الصفحة مثل Divi 5 ، يمكنك تطبيق نسب مثالية دون حسابات معقدة.

دعونا نكتشف المزيد.

ما هي النسبة الذهبية؟

النسبة الذهبية تساوي تقريبا

1.618.

من أين أتى؟ تحصل على هذا الرقم عند تقسيم خط إلى جزأين ، حيث يساوي الجزء الأطول مقسومًا على الجزء الأقصر الخط بأكمله مقسومًا على الجزء الأطول.

يمكنك حساب النسبة الذهبية باستخدام تسلسل Fibonacci. ابدأ بـ 0 و 1. أضفها للحصول على 1. ثم أضف 1 و 1 للحصول على 2. استمر في إضافة الأرقام الأخيرة: 1 ، 2 ، 3 ، 5 ، 8 ، 13 ، 21 ، 34 ، 55 ، 89 ، 144. عندما تقسم أي رقم أكبر على الرقم السابق ، تقترب أكثر من 1.618.

هذه النسبة تظهر في كل مكان في الطبيعة. دوامة بذور عباد الشمس تتبعها. تنمو قذائف Nautilus باستخدام هذه النسب. من المحتمل أن يتبع وجهك قياسات النسبة الذهبية بين ميزاتك. عندما يتبع شيء ما هذه النسبة ، يتعرف عقلك على أنه ممتع بشكل طبيعي.

صور مجاملة: لوكاس وديناميك وانغ على Unsplash و Milena Carolina Dos Santos Mangueira

يمثل الرمز φ (PHI) نسبة رياضية فريدة من نوعها اكتشف الإغريق القدماء حوالي 300 قبل الميلاد. لقد أشاروا إليها على أنها "النسبة الإلهية" ، معتقدين أنها كشفت عن توازن بصري خاص وجمال.

لماذا يهم: من المباني القديمة إلى تصميم الويب

استخدم الإغريق هذه النسبة لمعبد بارثينون ، وتتبع الأهرامات المصرية هذه القياسات. درس فنانون مثل ليوناردو دافنشي هذه النسب لسنوات. رسم دافنشي "الرجل فيتروفيان" الشهير ، الذي يظهر النسب الذهبية في جسم الإنسان.

صورة تمثيلية

لا يزال المصممون الراسخون يستخدمون هذا. يستخدم شعار Apple نسب النسبة الذهبية. يتبع شعار الطيور Twitter السابق هذه القياسات. تضع المجلات محتوى مهمًا في بقع النسبة الذهبية بدلاً من اليمين في المركز.

الصور من باب المجاملة: Widewalls & Design Shack

درس العلماء لماذا يحب الناس أشكال النسبة الذهبية. تظهر فحوصات الدماغ المزيد من النشاط في مناطق المتعة عندما ينظر الناس إلى مستطيلات النسبة الذهبية. هذا متأصل للبشر لأن هذا يحدث في جميع الثقافات والأعمار.

يعالج عقلك هذه النسب بشكل أسرع من النسب الأخرى ، مما يعني تجربة مستخدم أفضل. عندما تصبح نسب الموقع بعيدًا عن 1.618 ، يشعر الزوار بعدم الارتياح ويتركون عاجلاً.

النسبة تخلق التوازن دون أن تكون متساوية تماما. يمكن أن تبدو التماثل المثالي مملًا على مواقع الويب. توفر النسبة الذهبية مجرد عدم تناسق لخلق اهتمام بصري مع الحفاظ على المستخدمين النظيفة والمحترفين التي يتوقعها المستخدمون.

لماذا تشعر تصاميمك "بعبارة" (وكيف تصل نسب هذا)

لقد قضيت ساعات فقط في إتقان تصميمك. الألوان هي مجرد حق. الخطوط تعمل معا. ولكن لا يزال هناك شيء ما. الشريط الجانبي يبدو واسع جدا. يبدو الرأس ضيقة بعض الشيء. منطقة المحتوى لا تتدفق مع الباقي.

هذه تجربة شائعة. يعدل العديد من المصممين الأحجام بناءً على ما يشعر به في الوقت الحالي. ربما قمت بتعيين المحتوى الرئيسي على 70 في المائة والشريط الجانبي إلى 30 في المائة. هذه الأرقام تبدو معقولة ، لكنها لا تبدو طبيعية دائمًا.

عيوننا تبحث عن التوازن والأنماط المألوفة. عندما لا تكون النسب صحيحة تمامًا ، فإن التصميم بأكمله يشعر بالحرج ، حتى لو لم تتمكن من شرح السبب. قد لا يكون خطأ كبير ، مجرد تفاصيل صغيرة تزعجك.

القضية الحقيقية غالبا ما تناسب. عندما تتجاهل التخطيطات ما هو متوازن ، يلاحظ عقلك. شيء ما يشعر ، حتى لو لم تتمكن من وضع إصبعك عليه.

ما مدى خاطئ تجربة المستخدم في التخريب

أبعاد سيئة تجعل الأمور تبدو غريبة. يتوقع عقلك أن تسير بعض الأشكال والأحجام بشكل جيد. تخيل قسم البطل الذي يأخذ نصف شاشتك بالضبط. يبدو قاسيا ومحرجًا.

الآن ، ضع في اعتبارك واحدة تستخدم 43 في المائة أو 67 في المائة من المساحة. هذا يبدو غير متوازن وفوضوي.

هذا يمكن أن يؤذي موقع الويب الخاص بك. يقرر الناس بسرعة كبيرة إذا كانوا يثقون بما يرونه. إذا نظرت الصفحة ، فقد يعتقدون أن عملك غير جدير بالثقة. التصميم الفوضوي يجعل الناس يعتقدون أن عملك ليس جيدًا.

يمكن أن تساعد النسبة الذهبية في إصلاح هذا. بدلاً من جعل القسم البطل بنسبة 70 في المائة ، جرب 61.8 في المائة ، تاركًا القسم التالي 38.2 في المائة.

هذه الأرقام ليست عشوائية. إنهم يتبعون نمطًا خاصًا يسمى 1.618 الذي تراه في الطبيعة ، كما هو الحال في الزهور والقذائف. عيونك تعرف هذا النمط وتشعر بالهدوء عندما يرون ذلك.

الحيلة هي كيف ترتبط الأجزاء ببعضها البعض. كل شيء على ما يرام إذا كان حجم رأسك يطابق منطقة المحتوى الخاصة بك باستخدام النسبة الذهبية. يبدأ تذييل وقائمة ومحتوى المحتوى معًا بدلاً من أن يبدو وكأنهم يقاتلون من أجل الفضاء.

كيفية حساب نسب النسبة الذهبية

أنت لا تحتاج إلى الرياضيات الفاخرة. فقط تذكر 62 و 38. هذه الأرقام تضيف ما يصل إلى 100 ، لذلك فهي تعمل كنسب مئوية.

تقسيم أي مساحة عن طريق إعطاء 62 ٪ للجزء الأكبر و 38 ٪ إلى الجزء الأصغر. موقع الويب الخاص بك يبلغ عرضه 1000 بكسل. اجعل المحتوى الرئيسي 620 بكسل. ضع الشريط الجانبي الخاص بك في 380 بكسل. نسبة ذهبية مثالية.

حصلت على قسم 500 بكسل-ثول. تحصل منطقتك الرئيسية على 310 بكسل. الباقي يتلقى 190 بكسل.

قواعد سريعة لقطع غيار الموقع

يجب أن يستغرق قسم البطل حوالي 60 ٪ مما يراه الناس أولاً. يذهب الباقي إلى معاينة المحتوى الرئيسي الخاص بك. جعل البطاقات 60 ٪ طولها كما هي واسعة. تصبح البطاقة التي يبلغ طولها 300 بكسل طولها 180 بكسل.

الأزرار تعمل بنفس الطريقة. عرض 100 بكسل يعني ارتفاع 60 بكسل. عمود النص الخاص بك هو 600 بكسل واسع. توقف عن إضافة محتوى حوالي 370 بكسل لأسفل. ثم أضف القسم التالي.

هل يبدو صحيحا؟

تراجع من شاشتك. يجب أن تشعر الأجزاء متوازنة الآن. تتدفق عينك بسلاسة من قسم إلى آخر. إذا واصلت التحديق في مكان واحد ، فقد تكون النسب متوقفة.

تستخدم المواقع الشهيرة هذه الانقسامات 62/38 في كل مكان. ستبدأ في رؤية النمط بمجرد معرفة ما تبحث عنه. يبقى الرياضيات مخفية ، لكن الانسجام البصري يبرز على الفور.

يخطئ المصممون في النسبة الذهبية الشائعة

يعرف معظم المصممين أن النسبة الذهبية موجودة ويريدون استخدامها. هنا حيث يكافحون عادة.

الخطأ الأكبر هو تطبيق النسب بشكل عشوائي بدون نظام. يمكنك استخدام النسب الذهبية لرأسك ، والثلث لشبكة المحتوى الخاصة بك ، ونسب عشوائية لتذييلك. اختر نهجًا واحدًا واستخدامه باستمرار عبر التصميم الخاص بك.

يدور العديد من المصممين 1.618 إلى أرقام سهلة مثل 1.5 أو 1.7. يلاحظ عقلك الفرق بين 62 ٪ و 60 ٪ ، وهذه الفجوة الصغيرة تؤثر على الوئام البصري الذي تعمل على إنشائه.

قضية شائعة أخرى هي عناصر غير متطابقة. على سبيل المثال ، يمكنك إنشاء قسم بطل متناسب تمامًا ولكن بعد ذلك إضافة معرض صور يستخدم نسب تباعد مختلفة تمامًا. تفكيك المرئي يكسر التدفق الذي أنشأته.

يطبق بعض المصممين النسبة الذهبية على النص دون النظر في قراءة الراحة. طول الخط الذي يتبع أبعاد رياضية مثالية قد يتجاوز عرض القراءة المريح. قابلية القراءة تأخذ الأولوية على الدقة الرياضية.

غالبًا ما يتجاهل مصممو الويب الاستجابة. يمكن أن تشعر نسب سطح المكتب التي تبدو متوازنة بالضيق أو تمتد على شاشات أصغر. تحتاج النسب الذهبية إلى تطبيقات مختلفة عبر أحجام الأجهزة.

العديد من بناة الصفحات الافتراضية للتخطيطات التعسفية التي تتجاهل الانسجام النسبي. تستخدم شبكات الأعمدة القياسية 33/33/33 بدلاً من نسب أكثر طبيعية.

الخطأ الأكثر قيودًا هو التخلي عن النهج بعد المحاولات الأولية. تعمل النسب الذهبية بشكل أفضل عند تطبيقها بشكل منهجي عبر بنية التخطيط ، وليس كتعديلات معزولة.

لماذا يتجاهل العديد من بناة الصفحات النسب الذهبية؟

نشأ بناة الصفحات حول تفكير المبرمج. المطورين يحبون الأرقام التي تقسم بشكل نظيف. اثني عشر عمودًا ، أربعة أقسام ، تقسيم خمسين.

تعتقد العديد من شركات البناء حقًا أن المستخدمين يجب عليهم التحكم في خيارات التصميم الخاصة بهم. إنهم لا يريدون دفع نظريات جمالية محددة على الأشخاص الذين قد يفضلون طرقًا مختلفة. بعض المصممين يكرهون النسبة الذهبية ويفضلون أنظمة نسبة أخرى. لماذا تجبر مبدأ رياضي واحد عندما يزدهر الإبداع على الخيارات؟

القضية التقنية الحقيقية أكثر فلسفة من فلسفة التصميم. النسب الذهبية تخلق العشرية الغريبة التي تنكسر على الأجهزة القديمة. حاول بناء شبكة استجابة حيث يبلغ عرض عمود واحد 61.8 ٪. نسب نظيفة مثل 25 ٪ أو 33 ٪ تتصرف بشكل متوقع عبر كل جهاز.

بدأت معظم شركات باني الصفحات كحلول تقنية ، وليس أدوات التصميم. وهي مبنية حول تخطيطات منهجية ومنطقية تعمل بشكل موثوق.

نادرا ما يشكو المستخدمون من النسب. يشكون من تخطيطات الهاتف المحمول المكسورة وأوقات التحميل البطيئة. أولويات الشركة تتبع ملاحظات المستخدم الفعلية ، وليس نظرية التصميم.

بعض البنائين قلقون بشأن المبتدئين الساحقين. يواجه المستخدمون الجدد بالفعل عشرات من خيارات التصميم ، وإضافة اعتبارات رياضية قد تخيف الأشخاص الذين يريدون فقط شيئًا نظيفًا ومهنيًا.

بناء نسب مثالية مع Divi 5

قبل أن نغوص في التزحلق الدقيق لكيفية تحول Divi 5 إلى تصميم النسبة الذهبية من الصداع الرياضي إلى بساطة نقطة ونقرة ، دعنا نأخذ مسارًا قصيرًا ونفهم ما الذي يجعل Divi اختيار مصممي WordPress الذين يريدون نتائج احترافية بدون كابوس الترميز.

ما هو ديفي؟

Divi هو منشئ صفحة WordPress مصمم للأشخاص الذين يهتمون بالتصميم البصري دون المساس بالميزات.

يمكنك سحب وإسقاط أكثر من 200 وحدة حولها وتغيير النص واختيار ألوان جديدة. كل شيء يحدث مباشرة على صفحتك ، لذلك ترى بالضبط ما سيراه الزوار.

ويأتي هذا الموضوع مليء بـ 2000+ تخطيط مسبق الصنع. هذه ليست قوالب أساسية ولكن التصميمات الكاملة للمطاعم والمصورين والمستشارين وعشرات الشركات الأخرى. اختر واحدة تناسب أسلوبك وتخصيص من هناك.

إذا قمت ببيع المنتجات عبر الإنترنت ، فإن DIVI تتضمن أكثر من 20 وحدة مصنوعة خصيصًا للمحلات التجارية. ستبدو صفحات المنتج الخاصة بك مهنية وتساعد في تحويل المتصفحات فعليًا إلى المشترين.

بناء مواقع الويب بدون الصداع

يتيح لك منشئ السمة تصميم كل جزء من موقعك. يمكنك إنشاء رؤوس مخصصة تتطابق مع علامتك التجارية ، وبناء تخطيطات مدونة فريدة من نوعها ، وحتى جعل صفحات 404 تبدو مذهلة.

يجلب Divi AI راحة الذكاء الاصطناعي في قماش التصميم الخاص بك. يمكنك إنشاء نص ،

الصور ،

شفرة،

وأقسام الصفحة بأكملها باستخدام Divi AI.

يمكنك حتى تعديل صورك الحالية عن طريق وصف ما تحتاجه.

يحل Divi Quick Sites أكبر مشكلة في مواقع الويب التي تواجهها بناة: التحديق في صفحة فارغة دون معرفة من أين تبدأ. يمكنك الاختيار من بين مواقع بداية المهنية ، والتي تحتوي على قوالب مواقع ويب احترافية ، تم إنشاؤها بواسطة فريق التصميم لدينا ، وتتميز بصور فريدة من نوعها وأعمال فنية لن تجدها في أي مكان آخر.

أو دع Divi AI يبني تخطيطات مخصصة بناءً على وصف عملك.

هذا الموقع الذي تم إنشاؤه من الذكاء الاصطناعى ليس مجرد إطار سلكي. سيحتوي على عناوين ونسخ وصور ذات صلة لكل وصفك. يمكنك أن تطلب من Divi AI إنشاء جميع الصور ، أو استخدام صورة من Unsplash ، أو استخدام أصحاب نائبة حتى تتمكن من استبدالها بنفسك.

يمكنك حتى تحديد خطوطك وألوانك والسماح لها بالركض معهم. وبالطبع ، تظل مواقع الويب قابلة للتحرير تمامًا مثل مواقع الويب العادية ، بحيث يمكنك تعديل كل ما تحتاجه لكل ذوقك.

احصل على ديفي

Divi 5: الخطوة التالية

يجب أن يشعر بناء مواقع الويب الطبيعية ، مثل رسم الأفكار على الورق. لديك رؤية ، ويجب أن تساعد أدواتك في إحياءها في الحياة دون أن تعترض الطريق. هذا بالضبط ما دفعنا إلى إعادة بناء Divi من الألف إلى الياء تمامًا.

يمثل Divi 5 ، المتوفر اليوم كألفا وجاهز لاستخدامه على مواقع الويب الجديدة ، سنوات من الاستماع إلى ما تحتاجه عند إنشاء مواقع الويب. إنها ليست أجراس وصفارات أو ميزات لا يستخدمها أحد حقًا ، ولكن التحسينات الحقيقية تجعل عملك أسرع وأكثر متعة. حافظنا على كل ما تحب في Divi وأخذناه إلى المستوى التالي.

قمنا بإعادة بناء كل شيء من نقطة الصفر باستخدام أدوات الويب الجديدة. يتم تحميل الصفحات بشكل أسرع الآن ، وعمل الضوابط بشكل أفضل. يمكنك الحفاظ على تصميماتك كما هي عبر موقعك بأكمله دون عمل إضافي.

ما الذي تم تحسينه؟ ما الجديد؟

• تتخلص إطار عمل كامل من الرموز القصيرة القديمة. كل شيء يعمل على رمز جديد قائم على كتلة يتم تحميله بشكل أسرع ويعمل بشكل أفضل.
• يتيح لك التحرير بنقرة واحدة النقر فوق أي جزء من صفحتك لتحريرها على الفور. لا مزيد من البحث عن أيقونات صغيرة أو الحفر من خلال القوائم.
• تمنحك نقاط التوقف القابلة للتخصيص سبعة أحجام شاشة للعمل معها بدلاً من ثلاثة. يمكنك تغيير كل واحد لتناسب احتياجاتك الدقيقة.
• يتيح لك دعم الوحدات المتقدمة استخدام CALC () و CLAMP () و MIN () و MAX () وجميع وحدات CSS الجديدة مباشرة في المنشئ.
• تتيح لك متغيرات التصميم حفظ الألوان والخطوط والأحجام والصور والنص والروابط في مكان واحد. قم بتغييرها مرة واحدة ، وسيقومون بالتحديث في كل مكان على موقعك.
• تتيح لك مجموعة خيارات الإعدادات المسبقة لإنقاذ الأنماط وإعادة استخدامها للحدود والخطوط والظلال والتباعد. هذه تعمل عبر أجزاء مختلفة من موقعك.
• يتيح لك الصفوف المتداخلة وضع صفوف داخل صفوف أخرى. يمكنك بناء تخطيطات معقدة بدون أقسام خاصة.
• تجمع مجموعات الوحدة النمطية عدة وحدات في وحدة واحدة. هذا يجعل التخطيطات المعقدة أسهل في الإدارة. يمكنك أيضًا صنع وحداتك المخصصة.
• تتيح لك مساحة العمل متعددة الألواح وضع لوحات حيث تريدها. يمكنك العمل مع عدة إعدادات مفتوحة في نفس الوقت.
• تمنحك إدارة السمات تحكمًا دقيقًا عند نسخ الأنماط والمحتوى والإعداد المسبق بين أجزاء مختلفة.
• يتيح لك الوضع الخفيف/المظلم اختيار السمة التي تكون أسهل على عينيك أثناء العمل.
• يتيح لك تحجيم Canvas تغيير حجم منطقة عملك لمعرفة كيف يبدو موقعك على شاشات مختلفة. لا حاجة لتبديل أوضاع المعاينة.
• تجعل تحسينات الأداء الصفحات تحميلًا بشكل أسرع ، وعرضها بشكل أسرع ، وتشعر بأنها أكثر سلاسة عند البناء.

جرب Divi 5 اليوم

Divi 5 متاح الآن لمشاريع مواقع الويب الجديدة. قمنا بإعادة بنائها من الألف إلى الياء لجعل سير العمل الخاص بك أسرع وأسهل. قم بتنزيل Alpha العام وجربه على موقعك الجديد التالي لمشاهدة التحسينات. إنه مجاني لجميع أعضاء Divi ، الجدد والقديم.

نقترح استخدامه فقط للمواقع الجديدة أثناء تحسين نظام الترحيل لمواقع Divi 4 الموجودة. إذا كنت تبدأ Fresh ، فقد حان الوقت الآن لتجربة الواجهة المحدثة وأداء أفضل.

كيفية استخدام النسب الذهبية باستخدام Divi 5

قال ما يكفي. دعنا نأخذ غوصًا عميقًا ونرى كيف يمكننا تنفيذ النسب الذهبية في موقع الويب الخاص بك باستخدام Divi 5 ، والأفضل من ذلك ، كيف يمكن توحيدها حتى لا تضطر إلى التدافع بالرياضيات في كل مرة تقوم فيها بإنشاء قسم أو صفحة جديدة.

تتيح لك متغيرات التصميم حفظ وإعادة استخدام القيم عبر موقعك. أنها تشكل الحمض النووي للهوية البصرية لموقعك. يحتوي Divi 5 على ستة أنواع: الألوان والخطوط والصور والسلاسل النصية والروابط والأرقام. لكل منها دور محدد:

• تحتوي متغيرات الألوان على ألوان العلامة التجارية والخلفيات والألوان النصية والألوان الأخرى المستخدمة على مستوى الموقع.
• تبقي متغيرات الخطوط متسقة للعناوين ونص الجسم والعناصر الخاصة.
• متغيرات الصورة تخزن الرسومات الشائعة مثل الشعارات أو أنماط الخلفية لسهولة الاستخدام.
• متغيرات السلسلة النصية حفظ محتوى قابل لإعادة الاستخدام مثل الشعارات وجهات الاتصال والملاحظات القانونية.
• تبقي متغيرات الارتباط عناوين URL التي تستخدمها غالبًا ، مثل الوسائط الاجتماعية أو الصفحات الرئيسية.
• تتناول متغيرات الأرقام قياسات البكسل ، والنسب المئوية ، و EMS ، و REMS ، ووحدات المنفذ ، والعمل مع وظائف CSS مثل CALC () للحفاظ على النسب مباشرة على أي شاشة.

إعداد متغيرات النسبة الذهبية

افتح لوحة معلومات Divi 5 والعثور على أيقونة Manager المتغيرة في الشريط الجانبي الأيسر.

انقر فوقه لفتح لوحة المتغيرات. أضف ألوانك وخطوطك وصورها ونصًا وروابط متغيرات.

ثم ، انتقل إلى علامة تبويب الأرقام لإنشاء متغيرات النسبة الذهبية. ابدأ بإضافة متغيرات الأرقام هذه:

متغيرات الطباعة

• H1 الحجم: Clamp (47px ، 4.7vw ، 76px)
  • 47 بكسل الحد الأدنى: حتى على أصغر الهواتف (عرض 320 بكسل) ، يبقى H1 الخاص بك كبيرًا بما يكفي لإنشاء التسلسل الهرمي. أي شيء أصغر يفقد التأثير كعنوان رئيسي.
  • 4.7VW القيمة المتوسطة: وحدة عرض المنفذ هذه تجعل مقياس النص بسلاسة. في عرض شاشة 1000 بكسل ، 4.7VW = 47 بكسل. في 1600 بكسل ، ينمو إلى 75 بكسل
  • 76px الحد الأقصى: نحصل على هذا عن طريق ضرب 18 بكسل × 1.618 ثلاث مرات (18 × 1.618 × 1.618 × 1.618 = 76.244px)
• H2 حجم: Clamp (29px ، 3.5vw ، 47px)
  • 29 بكسل الحد الأدنى: يحافظ على H2 بشكل ملحوظ من H1 على الهاتف المحمول أثناء البقاء قابلاً للقراءة
  • 3.5VW القياس: التحجيم الأصغر نسبيًا من H1 للحفاظ على التسلسل الهرمي
  • 47px الحد الأقصى: بالضبط 76px ÷ 1.618 = 47.122px
• H3 حجم: Clamp (18px ، 2.9VW ، 29px)
  • 18 بكسل الحد الأدنى: يطابق حجم نص الجسم على الهاتف المحمول لحفظ المساحة الرأسية
  • 2.9VW تحجيم: ينمو بلطف أكثر من العناوين الكبيرة
  • 29px الحد الأقصى: على وجه التحديد 47 بكسل ÷ 1.618 = 29.124px
• H4 حجم: المشبك (14px ، 2.2vw ، 22.4px): استمر في تقسيم ~ 29px ÷ 1.618 = 17.994px ، لكننا حددنا الحد الأدنى إلى 22.4px لقدرة على القراءة
• H5 حجم: Clamp (13px ، 1.8vw ، 18px): حجم الخط الأساسي الخاص بنا يبلغ 18 بكسل يناسب تمامًا في المقياس هنا
• نص نص الجسم: المشبك (16px ، 1.6vw ، 18px): قاعدة قياسية 18 بكسل تنبع من جميع الحسابات من

تتيح دالة المشبك () تغيير حجم النص بسلاسة بين الشاشات. يتطلب الأمر ثلاث قيم: أصغر حجم للهواتف ، والقيمة الوسطى للتوسع ، والأكبر لأجهزة الكمبيوتر المكتبية. نستخدم عرض المنفذ (VW) في الوسط لأنه يجعل النص ينمو تدريجياً مع زيادة الشاشات. لا تقفز مفاجئة بين الأحجام.

على سطح المكتب ، نلتزم بالنسب الذهبية المثالية. تحتاج شاشات الهاتف المحمول إلى تعديلات طفيفة للحفاظ على قراءة النص. قد تقترح الحسابات النقية 11px لبعض العناوين ، ولكن هذا يلفت عيون زوارك. يحافظ وضع الحد الأدنى العملي مثل 14px على التناغم البصري للنسبة الذهبية مع ضمان قدرة الجميع على قراءة المحتوى الخاص بك بشكل مريح. العلاقات النسبية تبقى سليمة. لقد تحولوا قليلاً إلى قابلية القراءة.

متغيرات التباعد

كل قيمة تضاعف السابق بـ 1.618 بالضبط:

• Space XS: Clamp (8px ، 1vw ، 10px)
  • لماذا قاعدة 10 بكسل: هذا هو أصغر حشو مستهدف لمسة مريحة على الهاتف المحمول. توصي حكمة الصناعة 44 بكسل بالأهداف الحد الأدنى للمس ، وحشو 10 بكسل على جميع الجوانب ، بالإضافة إلى أن المحتوى يجعلك هناك. أصغر من 10 بكسل يجعل العناصر تشعر بالضيق.
  • لماذا 8 بكسل الحد الأدنى: على الهواتف التي تقل عن 360 بكسل ، يمكن أن تشعر حتى 10 بكسل بالتحكم. ننخفض إلى 8 بكسل لزيادة مساحة المحتوى مع الحفاظ على تمييز العناصر.
  • لماذا 1VW: يزرع التباعد بشكل متناسب ويمنحك بالضبط 10 بكسل في عرض شاشة 1000 بكسل
• Space Small: Clamp (13px ، 1.6vw ، 16.18px): مثالي لحشو الأزرار وتباعد الحقل.
• وسط الفضاء: المشبك (21px ، 2.6vw ، 26.18px): رائع للتباعد بين كتل المحتوى ذات الصلة.
• مساحة كبيرة: المشبك (34 بكسل ، 4.2VW ، 42.36 بكسل): يخلق غرفة التنفس بين الأقسام الرئيسية أثناء التحجيم مع حجم الشاشة.
• Space XL: Clamp (55px ، 6.8vw ، 68.54px): رائع للحشو العلوي/السفلي على أقسام البطل وكتل الميزات الرئيسية. تحتاج أقسام البطل إلى حشوة كبيرة حتى على الهاتف المحمول. أقل من 50 بكسل ، يشعر محتوى البطل بالضيق ضد الحواف.
• الفضاء XXL: Clamp (89px ، 11vw ، 110.89px): استخدم بشكل ضئيل. ربما للأقسام الخاصة التي تحتاج إلى غرفة التنفس الدرامية.

تخطيط متغيرات

• عرض العمود الأساسي: 61.803 ٪
  • كيف نحصل عليه: قسّم 1 على 1.618 = 0.61803 (أو 61.803 ٪)
  • استخدم هذا لمنطقة المحتوى الرئيسية في أي تخطيط من العمود
• عرض العمود الثانوي: 38.197 ٪
  • استخدم عمود الشريط الجانبي في نفس الصف
  • مشتق من 100 ٪ - 61.803 ٪ = 38.197 ٪
• حاوية أقصى عرض: 1165 بكسل
  • يصبح النص صعبًا عندما تمتد الخطوط إلى ما بعد 72 حرفًا ،
    • وافتراض 10 بكسل كحد أدنى حجم النص ، فإن عرض القراءة الأمثل (720 بكسل) × الذهبي (1.618) = 1165 بكسل
  • تنطبق على القسم الرئيسي أو الصف الرئيسي الذي يحمل المحتوى الخاص بك
• نسبة الارتفاع الذهبي: CALC (100 ٪ / 1.618)
  • يمكن استخدام هذا كقيمة في ارتفاعات لمجموعات الوحدة النمطية/الوحدة النمطية ، مثل الصور ، وصناديق الاستدعاء ، وأقسام البطل ، وبطاقات أعضاء الفريق ، إلخ.
  • هذا من شأنه أن يخلق مستطيلات بدلاً من المربعات أو الأشكال العشوائية. يجد عقلك هذه النسب جذابة بشكل طبيعي ، مثل صورة مؤطرة تمامًا.
  • كيف نحصل على هذا؟ تقول النسبة الذهبية أنه إذا كان العرض = 1.618 ، ثم الارتفاع = 1. لذا ، إذا كان العرض = 100 ٪ ، فإن الارتفاع = 100 ٪ ÷ 1.618 = 61.8 ٪. هذه الصيغة تفعل ذلك الرياضيات تلقائيا.

احفظ هذه المتغيرات في مدير متغير Divi 5. بعد ذلك ، استخدمها في أي مكان من خلال النقر على أيقونة المتغيرات بجوار حقول العرض أو الارتفاع أو الحد الأقصى. بعد الإعداد الأولي ، لا توجد حاجة للرياضيات. أيضا ، لم يتم إصلاح أي من هذه الملصقات المتغيرة. يمكنك تبديل الملصقات بشيء منطقي.

إنشاء قسم بطل مع نسب ذهبية

دعنا نبني قسمًا بطلًا للصفحة المقصودة للكتاب ، مستوحى من إحدى تصميمات مجموعة STARTER ، باستخدام متغيرات النسبة الذهبية التي أنشأناها للتو. وهذا هو الجزء الممتع. يمكنك أخذ تلك المتغيرات المحسوبة بعناية ومشاهدة كيف تؤثر على قسم البطل الحقيقي.

ابدأ بإنشاء قسم جديد في Divi 5's Visual Builder. اضبط الارتفاع باستخدام متغير نسبة الارتفاع الذهبي. هذا يجعل من الطبيعي أن يتعرف عقلك على أنه إرضاء.

أضف متغير Space XL الخاص بك إلى الحشو العلوي والسفلي. يوفر هذا غرفة تنفس كافية على الهاتف المحمول مع التوسع بشكل مناسب على سطح المكتب.

بالنسبة لخلفية القسم ، لديك خياران رئيسيان باستخدام متغيرات التصميم الخاصة بك:

الخيار 1: خلفية اللون الصلبة

• انقر فوق حقل لون الخلفية وحدد متغير اللون الأساسي من القائمة المنسدلة. هذا يحافظ على قسم البطل الخاص بك بما يتوافق مع هوية علامتك التجارية. إذا كان لونك الأساسي خفيفًا جدًا على تباين النص ، فاستخدم متغير اللون الثانوي بدلاً من ذلك. تأكد من أن اللون الذي تختاره يوفر تباينًا كافيًا لنصك ليظل قابلاً للقراءة. مواكبة إلهامنا ، سنضيف تدرجًا من الخلفية والألوان الأساسية مع توقف بنسبة 72 ٪ و 90 درجة.

الخيار 2: خلفية الصورة

• قم بتطبيق متغير صورة Hero الخاص بك (إذا قمت بإنشاء واحدة) من خلال حقل صورة الخلفية. انقر فوق أيقونة المتغيرات بجانب إعداد صورة الخلفية وحدد متغير الصورة المحفوظة. عند استخدام صور الخلفية ، أضف تراكبًا لقدرة النص على النص. اضبط لون التراكب على متغير اللون الأساسي وضبط العتامة على 40-60 ٪. هذا يغمق الصورة بما يكفي لجعل نص أبيض هش وقابل للقراءة.
• يمكنك أيضًا استخدام متغير اللون الثانوي الخاص بك للتراكب إذا كان يتناقض مع صورة الخلفية المختارة بشكل أفضل.

إنشاء تخطيط العمود

أضف صفًا مع عمودين.

اضبط عرض العمود الأيسر على متغير عرض العمود الأساسي والعمود الأيمن إلى متغير عرض العمود الثانوي. سنقوم أيضًا بتشغيل خيار "Equalize Column Heights". بعد ذلك ، سيتم تطبيق متغير عرض الحاوية الأقصى للحفاظ على القبول في المحتوى على شاشات أكبر. هذا يمنع خطوط النص من التمدد للغاية ، وخاصة على الشاشات الأوسع.

سنقوم أيضًا بتمكين "استخدام عرض الحضيض المخصص" وضبطه على 1. سيساعدنا ذلك على استخدام رواسب ذات نسبة ذهبية بين وحداتنا.

قم بتطبيق المتغير المتوسط ​​الخاص بك على يمين العمود الأول والحشو الأيسر للعمود الثاني لإضافة مساحة للتنفس بين الأعمدة. هذا يخلق فصلًا كافيًا بين الأعمدة دون جعلها تشعر بالانفصال.

سيحمل العمود الأكبر رسالتك الرئيسية و Call-to-action. يمكن أن يحتوي العمود الأصغر على صورة بطل بسيطة أو يظل فارغًا لتصميم نظيف يركز على النص.

إعداد الطباعة التي تتدفق

في العمود الرئيسي الخاص بك ، أضف وحدتي العنوان.

اضبط الأول على H5 وتطبيق متغير حجم H5. في هذا المثال ، تحمل وحدة النص هذه المحتوى "أفضل مؤلف مبيعًا". سنستخدم أيضًا اللون الثانوي لهذا النص ونطبق نمط الخط الأكبر. سنقوم أيضًا بتطبيق خط الجسم على النص لجعله مميزًا وزيادة وزنه إلى BOLD.

اضبط الثاني على H1 وتطبيق متغير حجم H1 الخاص بك. هذا يصبح عنوانك الرئيسي. في هذا المثال ، سوف نستخدم اسم المؤلف ، الذي تمت إضافته سابقًا ، كمتغير تصميم. إذا كنت قصيرًا في الأفكار ، فيمكنك استخدام Divi AI لمساعدتك في النص الرائع.

أدناه ، أضف وحدة نصية للفقرة الداعمة الخاصة بك. تطبيق متغير حجم نص الجسم ومتغير اللون. احتفظ بهذا إلى 2-3 جمل تشرح اقتراح القيمة الأساسية الخاصة بك. على سبيل المثال ، سنضيف مقدمة موجزة لمؤلفنا. يمكنك أيضًا استخدام Divi AI لمساعدتك في النسخة هنا.

مساحة هذه العناصر باستخدام وسيط الفضاء الخاص بك كهامش بين العنوان والفقرة.

ثم ، أضف وحدة زر أسفل النص. ضع ألوانك. نحن نستخدم متغير تصميم اللون الأساسي ونص الزر.

أضف متغيرًا متوسطًا للفضاء إلى الحشو الأيسر واليمين ومساحة صغيرة إلى أعلى وأسفل لأبعاد الأزرار. هذا ينشئ زرًا يتناسب مع نصك دون أن يكون كبيرًا. استخدم متغير المساحة الكبير الخاص بك كقواس أعلى لفصله عن الفقرة.

يجب أن يستخدم نص الزر متغير حجم نص الجسم للحفاظ على الاتساق مع نص الفقرة. سنقوم أيضًا بتطبيق متغير تصميم ارتباط الزر الذي أضفناه سابقًا.

تصميم العمود الأيمن

يمكن للعمود الأيمن الاحتفاظ بأي شيء من صورة إلى نموذج على متن الطائرة. إذا كنت تستخدم صورة في العمود الأصغر ، فابقيها بسيطة. صورة لفريقك أو مكتبك أو توضيح نظيف تعمل بشكل جيد. لا تفكر في وضع الصورة: مركزه عادة داخل العمود. في هذا المثال ، سنقوم بتضمين متغير تصميم الصور لكتاب حديث. وأضف أيضًا ظل مربع لجعله بارزًا.

سنقوم أيضًا بضبط عرض الصورة ليكون حوالي 90 ٪ ، لذلك يبدو أكثر توافقًا.

بالنسبة لمواقع الاستشارات ، فإن ترك العمود الأيمن فارغًا أحيانًا يخلق مظهرًا أكثر نظافة وأكثر احترافًا يركز بشكل كامل على رسالتك.

النتيجة

فيما يلي النتيجة:

استخدم تحجيم Divi 5's Canvas لاختبار مظهر البطل عبر أحجام شاشة مختلفة. يجب أن تتعامل وظائف المشبك () في متغيراتك مع الاستجابة تلقائيًا.

على الرغم من أن متغيرات النسبة الذهبية توفر وئامًا متناسقًا ممتازًا ، فقد تحتاج إلى تعديلات طفيفة بناءً على محتوىك المحدد. قد تحتاج العناوين الطويلة إلى نص أصغر قليلاً. يمكن أن تتعامل خطوط التغذية القصيرة والثانية مع أحجام أكبر. بعض أنماط العلامات التجارية تدعو إلى تباعد أكثر إحكاما أو أكثر مرونة.

جمال متغيرات التصميم هو أن هذه التغييرات تأخذ نقرتين فقط. افتح المدير المتغير ، وضبط حجم H1 أو متغير كبير ، وشاهد التحول تطبيقًا على الفور عبر موقعك بالكامل.

يجب أن تظل H1 بارزة ولكنها قابلة للقراءة على الهاتف المحمول (47 بكسل كحد أدنى). يجب أن يشعر التباعد الخاص بك سخاء ولكن ليس مفرطًا في أي حجم شاشة. يمنحك الانقسام المكون من العمودان تصميمًا كلاسيكيًا ومحترفًا يعمل بشكل جيد لشركات الخدمات حيث يهم الثقة والوضوح أكثر من عناصر التصميم المبهجة.

الحفاظ على النسب الذهبية على مستوى الموقع مع الإعدادات المسبقة لمجموعة الخيارات

تتعامل متغيرات التصميم مع الأرقام ، ولكن الإعدادات المسبقة لمجموعة الخيارات تضمن استخدامها باستمرار عبر الموقع بأكمله.

قم ببناء القسم الأول باستخدام المتغيرات التي أنشأناها. احصل على الطباعة والتباعد والتخطيط الصحيح تمامًا. ثم انقر فوق أيقونة الإعداد المسبق بجانب كل مجموعة تصميم (الطباعة ، التباعد ، الحدود ، إلخ) وحفظها كإعدادات مسبقة لمجموعة الخيارات.

هذا يخلق كتل تصميم قابلة لإعادة الاستخدام التي تحتوي بالفعل على نسب النسبة الذهبية. بدلاً من البدء من نقطة الصفر ، قم بتطبيق هذه الإعدادات المسبقة في كل مرة تقوم فيها بإضافة قسم أو وحدة جديدة.

عندما تحتاج إلى ضبط النسب على مستوى الموقع ، قم بتغيير المتغير مرة واحدة. كل مسبقًا باستخدام تحديثاتها عبر موقعك بأكمله على الفور. لا صيد من خلال الصفحات الفردية لإجراء تغييرات.

تبقى نسبك الذهبية متسقة بدون العمل اليدوي.

الرياضيات لتصميم جميل ، Divi 5 يجعل الأمر سهلاً

هذا الشعور المزعج عندما تبدو التخطيطات "صحيحة تقريبًا" أمر منطقي أخيرًا. لم تكن من الصعب إرضاءك: كان عقلك يلتقط العلاقات النسبية التي شعرت بها.

تمنحك النسب الذهبية نقطة انطلاق موثوقة ، لكن معظم البناة تجعلك تقوم بالرياضيات في كل مرة. يتغير نظام Divi 5 متغيرات تصميم هذا تمامًا. احسب نسبك 1.618 مرة واحدة ، احفظها كمتغيرات ، ثم انقر لتطبيقها في أي مكان على موقعك.

هل تحتاج إلى ضبط التباعد عبر خمسين صفحة؟ قم بتغيير متغير واحد بدلاً من تحرير كل صفحة بشكل فردي. هل تريد طباعة متسقة تتبع النسب الذهبية؟ اضبط قيم المشبك () مرة واحدة وشاهدها تتوسع تمامًا عبر جميع الأجهزة.

تعمل الرياضيات في كل مكان ، لكن Divi 5 يجعل من العملي استخدامه باستمرار.