لماذا تعتبر الإطارات الشبكية مهمة في عملية التصميم
نشرت: 2017-01-29يعتبر Wireframing طريقة سريعة وفعالة لتحديد مشكلات قابلية الاستخدام في وقت مبكر من عملية التصميم الخاصة بك.
إذا كنت مصمم ويب ، فأنا متأكد من أنك على دراية بالتخطيط الشبكي وإذا كنت مصممًا لتجربة المستخدم (UX) ، مثلي ، فمن المحتمل أنك تقضي نسبة كبيرة من وقتك في إنشاء إطارات سلكية إما يدويًا بالورق والقلم الرصاص أو باستخدام أداة رقمية مثل Proto.io .
هذه المقالة مخصصة لأولئك الذين سمعوا المصطلح ويرغبون في معرفة المزيد حول لماذا يجب أن تلعب الإطارات الشبكية دورًا مهمًا في عملية التصميم الخاصة بك. سنغطي أيضًا أفضل السبل لاستخدامها في المحادثات مع أصحاب المصلحة والعملاء المعنيين.
لنبدأ بالإجابة على السؤال "ما هو الهيكل الشبكي؟"
أحب التفكير في إطار سلكي مثل الهيكل العظمي للصفحة. هذا الهيكل العظمي هو تصوير ثنائي الأبعاد لواجهة الصفحة الذي يُظهر تباعد العناصر على الصفحة ، وكيفية ترتيب أولويات المحتوى ، والوظائف المتاحة ، وكيف سيتفاعل المستخدمون مع الموقع. كما أنها تلعب دورًا حيويًا في ربط هندسة المعلومات بالجوانب المرئية للتصميم من خلال إظهار المسارات بين الصفحات المختلفة. الإطارات السلكية خالية عن قصد من الألوان والرسومات والخطوط المنمقة.
إذا لم يكن لدينا هيكل عظمي قوي للبدء ، فكل الأشياء التي نضعها فوقها ، مثل الوظائف أو الأسلوب ، لا تحظى بفرصة فعلية.
فكر في عملية بناء منزل جديد. إذا ركزت كل طاقتك على التصميم الداخلي ، مثل ألوان الجدران ونسيج الأرائك ، بدلاً من مخطط هيكل المنزل ، فهل تعتقد أنه سيخدم غرضه؟ على الاغلب لا. يعد البدء بالتصميم الداخلي ، وليس الهيكل الأساسي للمنزل ، أمرًا بديهيًا.
ما الذي لا يجب تضمينه في الإطار السلكي؟
من المهم حقًا الحفاظ على بساطة الإطارات الشبكية. هذا لأن الهدف من التخطيط الشبكي ، كما هو مذكور أعلاه ، هو إظهار كيفية وضع العناصر على الصفحة وكيف يجب أن يعمل التنقل في الموقع. يمكن أن تؤدي الألوان أو الصور الكثيرة جدًا إلى تشتيت انتباه القارئ عن التركيز على التخطيط وعناصر التنقل. تأكد من إزالة أو تقليل استخدام الألوان والصور والرسومات والخطوط المنمقة لتحقيق هدفك في تصوير تمثيل مرئي بسيط للهيكل العظمي.
ضع ما يلي في الاعتبار:
موصى به لك:
كيف ستحول Metaverse صناعة السيارات الهندية
ماذا يعني توفير مكافحة الربح بالنسبة للشركات الهندية الناشئة؟
كيف تساعد الشركات الناشئة في تكنولوجيا التعليم في تطوير مهارات القوى العاملة في الهند وتصبح جاهزة للمستقبل ...
الأسهم التقنية في العصر الجديد هذا الأسبوع: مشاكل Zomato مستمرة ، EaseMyTrip تنشر Stro ...
تتخذ الشركات الهندية الناشئة اختصارات في مطاردة للتمويل
منصة التسويق الرقمي Logicserve Bags INR 80 Cr Funding، Rbrands as LS Dig ...
- حافظ على ألوانك إلى الرمادي والأبيض والأسود.
- استخدم خطًا عامًا. يساعد هذا في منع تشتيت انتباه المستخدم بأسلوب الطباعة. لا يزال إظهار التسلسل الهرمي للمعلومات من خلال الخط أمرًا مهمًا ، على الرغم من ذلك ، ويمكن إظهاره ببساطة من خلال تغيير حجم الخط وما إذا كان "عاديًا" أو " مائلًا " أو "غامقًا".
- تجنب الرسومات والصور ذات الأسلوب العالي. بدلاً من ذلك ، أقترح استخدام المستطيلات والمربعات كعناصر نائبة ، مع إضافة "x" في منتصف المربع لإظهار مكان وضع الصورة. يمكنك أيضًا القيام بنفس الشيء لإظهار مكان وضع مقاطع الفيديو بمثلث كزر تشغيل في وسط المربع.
الأسباب الخمسة الرئيسية لاستخدام الإطارات الشبكية
تعتبر Wireframes أداة رائعة لجعل عملائك يركزون على ما تريدهم أن يفكروا فيه مبكرًا في عملية التصميم.
تعد الإطارات الشبكية طريقة رائعة لإرشاد العملاء وأصحاب المصلحة عبر بنية تصميماتك دون منحهم فرصة لتشتيت انتباههم بالألوان والصور. إذا كان الهدف من اجتماعك هو جعل عملائك يفكرون في العناصر التي يجب أن تكون على الصفحة وكيف ستعمل هذه العناصر على الموقع ، فإن مجرد إزالة الألوان والصور والصفحات المنمقة يجعلها أكثر وضوحًا. يمكنك بعد ذلك بسهولة جمع التعليقات من العميل والمساهمين حول التنقل في الموقع وتخصيص العناصر على الصفحات. بدلاً من التركيز على كيفية "عدم عمل اللون الأحمر لهم" كزر للحث على اتخاذ إجراء. يبدو مضحكا ، لكنه يحدث كثيرا!
تسمح لك Wireframes بتخطيط وظائف الصفحات ، والتعرف على المشكلات مبكرًا ، وتوفير الوقت في المراجعات لاحقًا.
يعد إجراء تغييرات على إطار سلكي أقل إيلامًا بكثير من إجراء تغييرات على الإطار السلكي عالي الدقة مع الكثير من عناصر التصميم. تستغرق الحاجة إلى إعادة صياغة نموذج بالحجم الطبيعي عالي الدقة وقتًا أطول لإجراء التغييرات. إذا استثمرت الوقت في التفكير في وظائف الصفحات من خلال التخطيط الشبكي في وقت مبكر من عملية التصميم الخاصة بك ، فستكون سعيدًا جدًا لأنك فعلت ذلك. إنه بالتأكيد الوقت المستغرق بكفاءة عالية.
بعبارة أخرى ، فإن تعيين الوظيفة مبكرًا سيقلل من مقدار الترجيح الذي غالبًا ما يأتي مع مرحلة التطوير. من المؤكد أنه من الأسهل إعادة كتابة الوظيفة في إطار سلكي ، مقارنةً بتطبيق ويب.
يتيح لك Wireframing الفرصة للتعرف على عميلك بشكل أفضل.
ستبدأ في رؤية أنماط في السلوكيات والدوافع كلما زاد الوقت الذي تقضيه مع عميلك. بمرور الوقت ، ستؤثر المعرفة التي تكتسبها من ملاحظاتهم فقط على أفضل طريقة للعمل معهم في المستقبل وكيفية جعل وقتك معهم أكثر إنتاجية. يعد التخطيط الشبكي أيضًا طريقة رائعة لجذب عملائك إلى التركيز. يحب العملاء القفز بخمس خطوات للأمام لأنه من المثير البدء في التفكير في المنتج النهائي. لكن القضاء على فرص تشتيت انتباه العملاء عن التفكير في وظائف وهيكل التصميم سيكون شيئًا ستجده مجزيًا للغاية.
يعتبر Wireframing أداة رائعة لجمع الملاحظات واكتشاف العيوب مبكرًا.
إذا كانت الكفاءة هي هدفك ، وهو على الأرجح هدف ، فإن التخطيط الشبكي هو المكان الذي يجب أن تبدأ منه. قد تكون هناك مناسبات تشعر فيها بالضغط لبدء تصميم نموذج بالحجم الطبيعي عالي الدقة فورًا بسبب قيود الوقت أو المال. حاول أن تتذكر أنه بدون جمع التعليقات الجيدة في وقت مبكر ، قد تنشئ عملية مراجعة مضنية وتستغرق وقتًا طويلاً في وقت لاحق ، مما يجعل كل شيء أقل كفاءة.
تعتبر الإطارات الشبكية طريقة رائعة لتحديد أولويات المحتوى من خلال المساعدة في الكشف عن قيود المساحة وتصميم التسلسل الهرمي للعناصر على الصفحة.
إن إتاحة الفرصة مبكرًا لتصور التسلسل الهرمي لصفحاتك والبدء في عرض قيود المساحة بشكل مرئي سيوفر لك الكثير من الوقت لاحقًا عندما تبدأ في تصميم الصفحات وتعبئتها بالمحتوى. يجب أن تقوم بجمع التعليقات حول الأطر السلكية الخاصة بك من أصحاب المصلحة ، وتحريك الأشياء بسرعة على الأطر الشبكية الخاصة بك بناءً على التعليقات التي تتلقاها ، وجمع التعليقات مرة أخرى ، والتكرار حتى تصل إلى هدفك المقصود.
استنتاج
تدفع الإطارات الشبكية قابلية الاستخدام إلى المقدمة ويعتبر استخدامها طريقة قوية لتوضيح تخطيط الصفحات ووظائف العناصر الموجودة على الصفحة.
إن استخدام الإطارات الشبكية في وقت مبكر من عملية التصميم يفرض عليك أنت وعملائك النظر بموضوعية في سهولة الاستخدام ، ومسارات التحويل ، وموضع العناصر ، ويساعد في تحديد العيوب مبكرًا. هذه كلها أشياء تؤدي إلى منتجات بديهية وعملية وممتعة.
[ظهر هذا المنشور لأول مرة على مدونة Proto.io وتم نسخه بإذن.]