كيف تقوم بتخطيط التصميم ؟

In: كمبيوتر وانترنت

8 يونيو 2007

 

من الموضوعات التى تثير نقاشاُ طويلا ولا يتم التوصل فيها لنتيجة ثابتة هو أى طرق التخطيط (Layout types) يفضل إستخدامها عند التفكير فى إنشاء موقع الكترونى ولعل ذلك يعرضنا لماهية طرق التخطيط المتعارف عليها بالنسبة لتصميم مواقع الويب و ما هو تعريف و مميزات و عيوب كل طريقة و يستحق الذكر أن طرق التخطيط المستخدمة فى تصميم المواقع الإلكترونية لها تأثير كبير على قابلية الإستخدام و الوصول و يتضح ذلك بالتعرف على خصائص كل طريقة :

1- التخطيط الثابت (Fixed layout):
هو ان تكون مكونات التصميم لها عرض ثابت باستخدام وحدة قياس مطلقة وليست نسبية ( مثل البكسل و السنتيمتر و الإنش)
المميزات :

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

العيوب :

 

  • -لا يتأثر بالتغيير فى أبعاد الشاشة أو تغيير حجم نافذة المتصفح , فعلى سبيل المثال إذا كنت تستخدم لابتوب بأبعاد شاشة شديدة الإتساع فسترى بعض التصميمات الثابتة تبدو بحجم صغير للغاية على شاشتك و ستتعجب لم يضيق المصمم التصميم لهذا الحد و هناك متسع من المساحة !! , و لا يخطر على بالك ان التصميم يظهر سليماُ على أبعاد معينة و يبدو عليها ملائماُ تماماُ , و بالمثل عند إستخدامك للويب من الهاتف المحمول .
  • - لا يتأثر بتغيير المستخدم لحجم خط الكتابة , إن فكرت فى تكبير حجم خط الكتابة بضغطك على ( “+” + Ctrl) فسترى ان التصميم لا تتغير أبعادة وفقا لهذا التغيير فى حجم الخط بل وقد يتشوة التصميم بالكامل و تخرج الكتابة من على حدودة


مثال :
Floral Touch .حاول تغيير أبعاد الشاشة و تكبير حجم الخط بالضغط على ( “+” + Ctrl) و راقب التأثير على التصميم .

2- التخطيط السائل أو المتدفق (liquid / fluid layout):

هو ان تكون مكونات التصميم محدد لها العرض بنسبة مئوية (%)من عرض نافذة المتصفح ( أحب ان أفكر بة كما السائل الذى يأخذ شكل الإناء الذى يحتوية ).

المميزات

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

العيوب :

  • -لا يستجيب للتغير فى حجم خط الكتابة
  • -فى حالة استخدام أبعاد شاشة شديدة الإتساع (بشكل كبير جدا )قد تجد انة نتيجة لتمدد التصميم ليوائم هذة الأبعاد فالكتابة النصية أيضا تمتد لتجد مقاطع الكتابة النصية ممتدة بخط عرضى عريض لدرجة تصعب معة قرائتها (و يمكن التغلب على هذا العيب باستخدام خاصية التنسيق “max-width” والتى تحدد عرضا للعنصر لا يمكن تجاوزة تجنبا لهذة الأبعاد الغريبة .
  • -فى حالة إستخدام أبعاد شاشة صغيرة للغاية مثل الهواتف المحمولة أو مثلا تصغير عرض نافذة المتصفح لدرجة كبيرة جدا فسترى ان التصميم السائل قد تدفق ليلائم هذا العرض الضيق الجديد و نتيجة لذلك سيحدث تداخل فى مقاطع الكتابة لدرجة قد يستحيل معها القراءة (و يمكن التغلب على هذا العيب باستخدام خاصية التنسيق “min-width” والتى تحدد حداُ أدنى لعرض العنصر حتى لا ينكمش لعرض غير مرغوب بة يتعارض مع قابلية الإستخدام .

مثال :

JJ Fluid Solution .حاول تغيير أبعاد الشاشة و تكبير حجم الخط بالضغط على ( “+” + Ctrl) و راقب التأثير على التصميم .

3- التخطيط المرن (elastic layout):

و تذكرنى تسميتة بالشخصية الكارتونية ” elastic girl ” فى فيلم الكارتون الشهير “The incredibles” :) , وهذا التخطيط يشبة لحد كبير التخطيط الثابت فهو يستخدم فى تحديد عرض مكونات الصفحة وحدة قياس ولكنها ليست مطلقة مثل نظيرة الثابت ولكنها نسبية ( مثل em ,ex), وهو لا يستجيب للتغير فى أبعاد الشاشة أو عرض المتصفح ولكنة يستجيب على خلاف ذلك لتغيير حجم خط الكتابة

المميزات :

  • -يستجيب للتغير فى حجم خط الكتابة فلو قمت بالضغط على ( “+” + Ctrl) ستجد التصميم قد امتد فى مرونة ليلائم هذا الحجم الجديد للخط .


العيوب:

  • لا يستجيب للتغير فى أبعاد الشاشة ولا عرض نافذة المتصفح.

مثال :

Elastic Lawn .حاول تغيير أبعاد الشاشة و تكبير حجم الخط بالضغط على( “+” + Ctrl) و راقب التأثير على التصميم .

4-التخطيط المختلط أو الهجين (Hyprid layout) :
وهو مزيج من بعض أو كل طرق التخطيط السابقة فمثلاُ من الممكن أن يكون التخطيط العام للتصميم سائل و لكن القوائم الجانبية تتبع التخطيط الثابت و ذلك بكون عرضها ثابت القياس .

  • و يتضح من عرض هذة الطرق المختلفة للتخطيط انة من الصعب ان نخرج بطريقة واحدة لتكون هى المثلى , بل لكل طريقة مميزات و عيوب و يجب أن يكون الإختيار و فقاُ لمتطلبات و خصائص التصميم الذى تقوم بة .
  • أيضاُ يجب الأخذ فى الإعتبار أن الطرق السابقة هى طرق لتخطيط التصميم و التحكم فى سلوكة و خصائصة وليست هى الكود الفعلى الذى بة يصاغ التصميم . بمعنى أنها لا علاقة لها بالقضية المثارة عن استبدال الجداول بالطبقات “Divs” فى التصميم
  • و ستجد أغلب الأمثلة المستخدمة لشرح هذة الطرق سواءاُ على شبكة الويب أو فى كتب تعليمية تستخدم تطبيق هذة الطرق ياستخدام نظام الطبقات “Divs ” ولن تجد إلا القليل للغاية من الأمثلة لهذة الطرق ياستخدام نظام الجداول فى بناء التصميم مثل ذلك المثال table_liquid
  • Digg
  • del.icio.us
  • Facebook
  • Tumblr
  • Twitter

23 تعليق على كيف تقوم بتخطيط التصميم ؟

Avatar

أحمد

يونيو 9th, 2007 at 5:51 ص

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

Avatar

منة الله

يونيو 10th, 2007 at 5:32 م

فاطمة

ادعوك للمشاركة في استطلاع راي

اكثر 10 مدونات تاثيرا في قرائها

و احب ان اخبرك ان مدونتك تم ترشيحها فعلا

اليك الرابط

http://www.6ef.blogspot.com/

Avatar

FTM

يونيو 10th, 2007 at 6:33 م

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

منة الله :
شكراُ لدعوتك لى و سأقوم بتفقد الرابط الاّن .

Avatar

هارون

يونيو 11th, 2007 at 3:29 م

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

Avatar

كريم

يونيو 12th, 2007 at 7:18 ص

معلوماتى فى تطوير المواقع لا تتعدى معرفة طفل عن علوم الفيزياء :) … إستفدت من مقالتك كثيرا يا فاطمة .. وأتمنى المزيد ..

تقبلى تحياتى وإلى الأمام دائما
:)

Avatar

رائد

يونيو 12th, 2007 at 3:52 م

طرح متسلسل لمعلومات قيمة و مدونة هادئة يرتاح المرء فيها من وعثاء النت

Avatar

عادل

يونيو 12th, 2007 at 9:18 م

شكرا على المهلومات المفيدة ومنكم نتعلم

Avatar

عـبدالله

يونيو 13th, 2007 at 2:45 م

بسم الله الرحمن الرحيم
السلام عليكم ورحمــة الله وبركاته

وأنا بعد صحيح إني مبتدئ في أمور تصميم الصفحات لكني أتعلم
بارك الله فيكِ أختي في الله على هذه المعلومات

دمتِ بطاعة الله

Avatar

FTM

يونيو 15th, 2007 at 7:50 ص

هارون :
شكرا لإطلالتك الطيبة أخ هارون و أتمنى ان أقدم ما يفيد و لو بسطر .

كريم :
:D كلنا نتعلم و فعلا نشعر دوما اننا نلهث لمتابعة التطور السريع لهذة العلوم و يشعر أمامها انة طفل ,شكرا لك كريم و اتمنى ان أكون أفدتك , ..تحياتى لك .

رائد :
مرحبا بك فى مدونتى , و شكراُ لرأيك و اتمنى زياراتك مجددا .

عادل :
شكراُ عادل , نحن جميعاُ نتعلم …مرحبا بك فى المدونة .

عـبدالله :
أهلا بك أخ عبد الله , أسعدتنى زيارتك و اتمنى ان أكون قد أفدت , تحياتى لك .

Avatar

Stylish

يونيو 17th, 2007 at 3:19 م

أحييكِ على هذا التوضيح .. دائماً ما شغلتني محاولات تخطيط التصميمات و اختيار المناسب منها , و اختلاف متطلبات كل تصميم مما يؤدي لتغيير التخطيط أكثر من مرة . .

تحياتي إليكِ

Avatar

FTM

يونيو 18th, 2007 at 9:33 ص

Stylish :
يسعدنى ان يكون المقال قد أفادك , أسعدنى زيارتك الأولى للمدونة و اّمل الا تكون الأخيرة ..تحياتى لك ;)

Avatar

محمد عبد الشكور

يونيو 19th, 2007 at 2:31 م

السلام عليكم,

بجد فعلاً اهنئك علي التديونة المميزة هذه.. هي بالفعل رئعة.
عندما نتكلم علي تخطيط التصميم..فمن الصعب ان المصمم يختار طريقة واحدة من هذه الطرق انا عن نفسي اتمين ان اخذ من كل تخطيط “حتة” :)
و علي فكرة فان نوع لموقع و محتوياته يكون لها تأثير كبير علي نوع التخطيط المستخدم, فمثلا التصمميات في المدونات تختلف عنها في تصميم موقع اخباري و هكذا…

تدوينة رائعة بدون شك ! :)

تحياتي,,محمد

Avatar

FTM

يونيو 20th, 2007 at 6:00 ص

محمد عبد الشكور :
أهلا بك , سعيدة برأيك و تشجيعك لى ;) . أنا موافقة جدا على رأيك بان كل نوع من المواقع يلائمة تخطيط , يعنى فى مواقع يكون محتواها ثرى جداُ و محتاجة مساحة لعرض كل المحتوى مثل المواقع الإخبارية و هذا النوع من المواقع برأى يلائمة جداُ التصميمات السائلة و بالعكس أحياناُ تصادف مواقع المفروض ان يكون محتواها صغير جدا فهذة يلائمها تصميم ثابت لانة فى هذة الحالة التصميم المفروض انة يعكس حجم المحتوى للموقع ….سرتنى زيارتك ..تحياتى لك .

Avatar

ضياء

يونيو 21st, 2007 at 9:55 م

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

Avatar

FTM

يونيو 26th, 2007 at 6:53 ص

ضياء :
شكرا لتشريفك المدونة يا ضياء و متشكرة على رأيك الجميل دة… ;) …

Avatar

ضياء

أغسطس 11th, 2007 at 1:45 م

شكرا لهذا الموقع الجميل وشكرا للعاملين فيها

Avatar

المصمم توقيع

أغسطس 27th, 2007 at 3:40 ص

شرح مرتب وواضح جداً الله يعطيك العافية، كنت ناوي أن أغطي هذا الموضوع في مدونتي ولكنني سأربط لهذا الموضوع إن شاء الله :)

والسـلام.

Avatar

FTM

أغسطس 31st, 2007 at 8:51 م

ضياء :
مرحبا بك و شكرا لك .

المصمم توقيع :
مرحبا بك فى مدونتى و شكرا لتشجيعك , يسرنى أن يكون الموضوع قدم نفعا و اتمنى لك التوفيق فى مدونتك .

Avatar

لؤلؤة انجمينا

أكتوبر 27th, 2008 at 10:26 م

رووووووووووووعة جدا
ومعلومات قيمة ومفيدة بالفعل
جزاك الله خير

Avatar

fr7ty

ديسمبر 9th, 2008 at 11:05 م

السلام عليكم

موقع أكثر من رائع شكرا لكم

موضوع جميل جدا يستحق القراءه

يوتيوب فيديو فرحتي

http://www.fr7ty.com

منتديات نسائيه

http://www.fr7ty.com/vb

Avatar

عرب بس

أغسطس 25th, 2009 at 9:56 م

جزاكم الله خيرا على المعلومات الرائعة والجديدة … كنت أبحث عن مثل هذا الموضوع والذى دلنى عليه هو صديق على الايميل

الخفاجى : مدونة عرب بس http://arabbas.blogspot.com

Avatar

حركات

أكتوبر 8th, 2009 at 2:48 م

موقع أكثر من رائع

Avatar

ناصر هزازي

نوفمبر 16th, 2009 at 6:03 ص

موضوع أكثر من رائع حقيقة ، أتمنى أن أقف على تصميم لموقع بهي ولكن ، أريد عمل ذلك ولا أعرف من البداية في التصميم العملي .

أضف تعليق

عن صاحبة المدونة

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

flickr

    DSC00648وردىramdankrym

تصنيفات

أرشيف

FTM مقتطفات© 2010-2005 - بدعم من WordPress و Compositio Theme