/إنشاء الـ wireframes – المقال السادس

إنشاء الـ wireframes – المقال السادس

إذا كنت تعمل علي تصميم تطبيق أو موقع [  تصميم واجهة المستخدم – user interface – ] ، بعد الأنتهاء من عملية الرسم او الـ sketching وطرح الافكار المختلفة لتصميمك أمامك وأختيار الفكره المناسبة ، تأتي بعدها خطوه هامة وهي  الـ wireframing ، تقوم في هذه الخطوة بتحديد اشياء لا يمكن للرسم البسيط تحديدها .


فيسمح لك الـ wireframe بتحديد أماكن واحجام المحتوي أو المعلومات التي تريد عرضها ، أيضا ترتيبها مما يجعل بناء الـ layout للتطبيق أسهل .

اذا ماهو الـ wireframe ، ولماذا نقوم بعمل هذه الخطوة :

الـ wireframe ببساطة عباره عن تخطيط بسيط غالباً ما يكون خالي من الألوان [ الأبيض والأسود ] .

هذا التخطيط يُستخدم لعمل هيكل التطبيق فتقوم فيه بتحديد أحجام وأماكن العناصر المختلفة و مناطق التحويل بين الصفح المختلفة  . [ navigation ]

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

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

على سبيل المثال ، يمكن للـ wireframe أن يحتوي على حالات مختلفة لزر معين button أو قائمة menu ليوضح كيفية استخدامها .

شكل الـ wireframe :

1

هل يبدو هذا المثال مألوفاً ؟
هذا لأنه الـ wireframe الخاص بـ Facebook ، كما تلاحظ فهو تخطيط بسيط و مُجرد من الالوان ، الصور ، الشعارات و الخط ، ولكنه يوضح الهيكلة الخاصة بالموقع وما يقدمه .

 

الـ wireframe لا يختص فقط علي المواقع ايضا يتم عمل wireframes للتطبيقات ، مثال آخر لـ mobile app :
2

كيفية عمل الـ wireframes :

من أجل الحفاظ علي الـ wireframes خالية من التصميم و التركيز علي الهيكل فقط، يتم  أستخدام الـ blocks كوسيلة سهلة لتحديد العناصر .

 

علي سبيل المثال فلنفترض اننا نقوم بعمل صفحة شخصية  (blog) ونريد عمل ال wireframes الخاص بها .
أولاً نقوم بتحديد الاماكن الاساسية كالـ header والـ body و الـ footer، الـ header في أعلي الصفحة ، نقوم بعمل مستطيل -block- هذا الـ block يدل علي المكان و الحجم التقريبي للـ header  وكذلك نقوم بعمل واحد للـ body والـ footer .

Basic Wireframe Design 1

ثم نبدأ بإضافة بعض العناصر فيه ، فمثلاً في الـ header نقوم بعمل block يدل علي الشعار ، ايضاً نقوم بعمل menu للـ navigation لتوضيح الصفحات الموجودة بالموقع فمثلاً يوجد فيها  home , about , portfolio ,contact me .

Basic Wireframe Design 2

 

اما في الـ body  نريد عرض المحتوي أو  الـ content الخاص بكل صفحة ، فلنفترض اننا في صفحة الـ portfolio و نريد عرض الاعمال ، كل عمل سيكون عبارة عن صورة للعمل و عنوانه و وصف بسيط عنه .

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

نكرر الصف مره اخري ، وبهذا نكون انتهينا من ال body الخاص بصفحة الـ portfolio .

Basic Wireframe Design 3

وأخيرا نريد عمل الـ footer للصفحة ، سنقوم بعمل footer بسيط ، يوجد فيه فقط الأسم و بعض الروابط للـ social media .

نقوم بعمل  block يوضح مكان الأسم  و blocks لتوضيح روابط للـ social media .

Basic Wireframe Design 4

وها نحن انتهينا من الـ wireframe للصفحة .

حسنا لماذا نقوم بهذه الخطوة ؟ ما هي اهمية الـ wireframes :

– من اكبر المميزات الـ wireframes انها تمكنك من  اختبار قابلية الاستخدام للتطبيق الـ usability .

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

– يوضح خريطه الموقع او التطبيق بصرياً .

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

– يسهل التواصل مع العميل و يوضح بعض المفاهيم الصعب توضيحها .

هناك بعض المصطلحات قد لا يفهمها العميل فمثلا  “google map integration” ، “product filtering” ،

slide show” “dropdown menu”و هكذا، فيقوم الـ wireframe بتمثيل هذه المصطلحات بصريا لتكون واضحة للعميل .

– اخيرا تخطي هذه المرحلة قد يكلفك إجراء تغييرات في مراحل متقدمة .

هذا لان ال wireframes يساعدك علي رؤية الـ features مجردة من دون أي style فتسطيع الحكم عليها بسهولة  فتستطيع ان تقرر أن تزيل feature معينة من التطبيق او الموقع لانها لا تتوافق مع أهداف موقعك بسهولة .

__________________________________________________________

 : For further Reading

http://www.orbitmedia.com/blog/7-reasons-to-wireframe/