JONGMA.DEV

Design & UXنُشر · حُدّث

فيبوناتشي في تصميم الويب: لماذا تجعل النسبة موقعك أسرع وأكثر مصداقية

فيبوناتشي في تصميم الويب يعني أن كل المساحات البيضاء تأتي من متتالية واحدة، 8 و13 و21 و34 و55 و89 و144 بكسل، بدلاً من قيم عشوائية. ولأن كل خطوة هي مجموع الخطوتين السابقتين، ينشأ إيقاع تشعر العين أنه صحيح. النتيجة: تصميم أهدأ وأكثر مصداقية، وقرارات تصميم أقل، وشيفرة أسهل في الصيانة.

قسم البطل في صفحة jongma.dev الرئيسية مع خطوط رفيعة تحدد إيقاع فيبوناتشي وانقسام الأعمدة الذهبي
طبقة نِسَب على صفحتنا الرئيسية: الخطوط الليمونية تحدد إيقاع فيبوناتشي الرأسي، والخط السماوي النسبة الذهبية (φ 0.618).

ما هو نظام تباعد فيبوناتشي؟

بدلاً من اختيار الهوامش والفراغات بالحدس (12 بكسل هنا، 15 هناك، 40 أبعد)، تثبّت مقياسًا واحدًا تأتي منه كل مسافة. نستخدم متتالية فيبوناتشي: 8 و13 و21 و34 و55 و89 و144 بكسل. كل قيمة هي مجموع القيمتين قبلها، والنسبة بين القيم المتتالية تقترب من النسبة الذهبية (1:1.618)، وهي النسبة نفسها في عروق الأوراق والأصداف والعمارة الكلاسيكية.

تُعرَّف هذه المتتالية مرة واحدة في الشيفرة كرموز تصميم (tokens) وتُعاد في كل مكان. يبعد العنوان 34 بكسل عن ترويسته، وتتنفس الفقرة 89 بكسل، وينقسم العمودان على النسبة الذهبية. هكذا لا تكون كل مسافة قرارًا منفصلاً، بل موضعًا على سُلّم ثابت.

لماذا تؤثر النسبة في الثقة وقابلية الاكتشاف

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

وهناك مكسب تقني أيضًا. مقياس تباعد واحد يعني قرارات تصميم أقل، وتطويرًا أسرع، وتخطيطًا أكثر قابلية للتنبؤ، ما يساعد على منع المحتوى المتزحزح (إشارة من Core Web Vitals). وبالنسبة لمحركات الإجابة بالذكاء الاصطناعي، تُحتسب الحِرفية القابلة للإثبات إشارة سلطة: موقع يبرّر تصميمه منهجيًا يشعّ خبرة.

كيف نطبّقه، وكيف نتحقق منه

على jongma.dev تأتي كل مسافة من رموز فيبوناتشي، ويقسم قسم البطل (hero) النصَّ والرسم البياني على النسبة الذهبية. ليس زينة تُضاف لاحقًا بل أساس التخطيط، تمامًا كما نبني في منهجيتنا المعبد: الأساس أولًا ثم البنية.

لإثبات صحته، نضع طبقة نِسَب بخطوط رفيعة فوق الصفحة الحقيقية: خطوط أفقية تحدد الإيقاع الرأسي، وخط رأسي يحدد انقسام الأعمدة الذهبي، وكل مسافة مُقاسة تقع على أقرب قيمة في المتتالية. تصميم يمكن قياسه لا مجرد النظر إليه.

· Maricio Jongma, Jongma Development

FAQ

توفّر متتالية فيبوناتشي قيم التباعد المنفصلة (8 و13 و21 و34 و55 و89 و144 بكسل) للهوامش والفراغات؛ أما النسبة الذهبية (1:1.618) فهي العلاقة الناشئة عنها، ونستخدمها للانقسامات الأكبر مثل توزيع الأعمدة. وهما مترابطتان: المتتالية تقترب من النسبة.

ليس بوعي، لكنه يشكّل حكمه. النسبة المتسقة تُقرأ كأنها مدروسة ومهنية، ما يرفع الثقة والتحويل. أما التباعد العشوائي فيبدو فوضويًا حتى لو لم يستطع المرء تفسير السبب.

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

تحدث مع وكيلنا الذكي مايندرت فيلهلموس