() translation by (you can also view the original English article)
تُسْتَخْدَمُ النِّسْبَةُ الذَّهَبِيَّةُ ضِمْنَ إِطَارِ كُلِّ أَنْوَاعِ التَّصْمِيــمَاتِ، خَاصَّةً لِجَعْلِ التَّوَازُن فِي الْمُحْتَوَى ذُو النَّصِ الْكَثِيفِ. يمكنها أن تساعد المصممين لإنشاء تسلسل هرمى و جذب إنتباه أعين المستخدمين لمناطق معينة تفحص الأمثلة التالية وتعلم كيف يوظفها المصممون!
ما هى النسبة الذهبية؟
النسبة الذهبية هى نسبة رياضية, عادة ما توجد فى الطبيعة, وتستخدم فى نظريات التصميم الكلاسيكية لإنشاء تراكيب معتدلة. إنها تساوى 1.6180 تقريبًا, وتُعرف أيضًا بإسم "المتوسط الذهبى" , "القسم الذهبى",ويُرمز لها بالرمز فاى "ϕ".
المستطيل الذهبى هو مستطيل طوله يساوى 1.6180 عرضه. مثال, div أحد جوانبه يساوى 300px والآخر يساوى 300*1.6180 ≈ 485px يمكن أن يُقال عليه مستطيل ذهبى
إذا رسمت مربع من ذلك المستطيل الذهبى, ستحصل على مستطيل ذهبى آخر
يمكنك عمل نفس الشئ للمستطيل الأصغر, وستحصل على نفس النتيجة بالتأكيد كما بالصورة:
متسلسلة فيوبانشى
متسلسلة فيوبانشى شبيهة للنسبة الذهبية, ولكن ليسوا متطابقين . إنها عبارة عن سلسلة من الأرقام حيث يكون الرقم التالى يساوى مجموع الرقمين السابقين مثال: 0, 1, 1, 2, 3, 4, 7
إذا أخذنا مربع, واضفنا له مربع آخر فسنحصل على مستطيل:
ثم أضف مربع آخر, للجانب الأكبر طولًا للشكل النهائى:
هلم جرًا:
بالتأكيد, سنحصل على نفس النتيجة كما المستطيل الذهبى, ولكن هذه المرة عن طريق الاضافة وليس الإقتطاع. النسبة الذهبية ومتسلسلة فيوبانشى كلاهما سيعطنا نسب جذابة متشابهة.
لنقم الآن بتحليل بعض المواقع حيث نستطيع أن نطبق على ما تعلمناه.
المثال الأول: YSTudio
عن ماذا يتحدث ذلك الموقع؟
“Your Local Studio " هو استديو يقدم خدمات التصميم والتطوير يوجد فى كوبنهاجن, بالدنمارك. إنهم يتخصصون فى إنشاء الأفكار المرئية المختلفة لصنع تجارب تطور الأماكن المحيطة.
كيف يوظف الموقع النسبة الذهبية؟
يستخدم الموقع النسبة الذهبية فى صفحتان من أصل ثلاثة. الصفحة الرئيسية تُقدم نظرة عامة على الأجزاء الرئيسية بالعمل. أيًا كان, عندما تزور وتتصفح الموقع سترى أنه يطبق بعض المفاهيم التقليدية فى تخطيط الصفحات مع أشكال مختلفة للمستطيل الذهبى.
لما هذا فعال؟
تريد أن تتميز عن الحشد مثلهم ؟ Yourlocalstudio قد فعلوا ذلك عن طريق إستخدام النسبية الذهبية فى تصميم موقعهم. ويتميز التصميم بنظرة تقدمية مع نظام شبكة محددة. يمكنك القول أن فى تلك الأيام كل موقع يبدوا كأنه bootstrap تصفح مواقع أخرى جيدًا لتجد أنها تجذب الأنتباه مع تخطيط أكثر تنظيمًا
المثال الثانى: Mashable
عن ماذا يتحث الموقع ؟
Mashable هو موقع أخبار; مصدر معلومات, معرفة ومصادر للجيل المتصل.
كيف وظف النسبة الذهبية ؟
لقد اسخدمت خدمة اختبار النسبة الذهبية من UX Triggers لأكتشف كيف استخدم Mashable متسلسلة فيوبانشى فى تصميمه. تخطيط مرن للمحتوى , مع العناوين فى اليسار وروابط لأخبار أخرى فى اليمين, فُصلت عن طريق الشبكية.
لما هذا فعال ؟
النسبة الذهبية فعالة هنا, لإنها تسمح لموقع جلب محتوى بإعطاء مساحة كافية للإنقرائية على عكس بعض المواقع التى تكون مكتظة المحتوى لإستخدامها نظام الشبكية المعتاد, ولكن Mashable يُوضح أن النسبة الذهبية يمكن أن تكون فعالة حتى وإن كانت غير مرئية.
المثال الثالث: Jackson & Kent
عن ماذا يتحث الموقع ؟
Jackson & Kent شركة لمنتجات الويب من فرنسا. إنهم يختصون فى الخدمان التقنية مثل HTML5, CSS3, Drupal, Wordpress, PHP/MySQL, Flash إلخ.
كيف وظف النسبة الذهبية ؟
الصورة بالأسفل تُوضح كيف أن الأعمال السابقة تُمثل مساحة كبيرة من التصميم. ويوجد أيضًا مساحة من معلومات عن الشركة نفسها و شريط التنظيم "navigation bar" فى منتصف الشاشة. زر الإتصال, كما يظهر بالأسفل, يستخدم النسبة الذهبية كنظام للشبكية لتنظيم التصميم فى طريقة فريدة.
لما هو فعال ؟
المثال هنا يشجعك لتصفح المواقع ولإكتشاف محتواها أفقيًا الرؤية الشبكية والأقسام المختلفة الحجم تجعل المحتوى أكثرإثارة للأهتمام بصريًا و من المرجح أن يكون المستخدم محظوظ لعرض المحتوى على سطح المكتب (وايضاً على تابلت), وهناك ترقيم للصفحات على محور افقي. هذه طريقة مبتكرة لعرض كل جزء من المحتوى, بل ايضاً لواجهة المستخدم ككل.
خاتمة
النسبة الذهبية تجذب أعين المستدمين لمناطق معينة فى واجهة الإستخدام. كمفهوم يمكن أن تساعدك لتفكر فى أماكن وضع المحتوى وكيفية إستخدام التسلسل الهرمى بفعالية. الدمج بين التخطيط, الإنقرائية, الألوان والقواعد الشاملة لتساعدك أن تأخد تصاميمك لمستوى أفضل.
