المكاسب:
- القدرة على تحويل غرض الشاشة وأولوية المحتوى إلى ملخص واضح وإنتاج مسودات وأشكال مختلفة للإطار السلكي باستخدام الذكاء الاصطناعي
- القدرة على التقييم السريع لمخرجات الأدوات التي تنشئ واجهات من النص وفحصها وفقًا لمبادئ التصميم
- القدرة على تطوير الإطارات السلكية للذكاء الاصطناعي مع مراعاة المحتوى الحقيقي وحالة الحافة وإمكانية الوصول
Wireframe هو الهيكل العظمي للشاشة على مستوى الخط، مجردًا من الألوان والتفاصيل المرئية والعلامة التجارية. والغرض منه بسيط: اختبار أولوية المحتوى وموضعه وتدفقه بسرعة؛ حل السؤال "ماذا وأين ولماذا هنا" دون الخوض في علم الجمال. يصف التصميم منخفض الدقة أيضًا مرحلة المسودة الأولى هذه. يعمل الذكاء الاصطناعي على تسريع هذه الخطوة بشكل جذري: فالأدوات التي تولد إطارات سلكية من النص تنشئ مخططًا تفصيليًا للشاشة من طلب من جملة واحدة. لكن هذه السرعة تدعو أيضًا إلى الاعتقاد الخاطئ بأن "المخرج الأول هو التصميم النهائي". تعلمك هذه الوحدة كيفية إنشاء إطارات سلكية للذكاء الاصطناعي بطريقة ذكية وناضجة بشكل نقدي.
أولا الموجز، ثم الإنتاج
تنشأ معظم الإطارات السلكية السيئة من ملخص سيء. إذا أخبرت الذكاء الاصطناعي "بإنشاء شاشة تسجيل دخول" فستحصل على نمط عام. يتضمن ملخص الإطار السلكي القوي ما يلي:
- الغرض من الشاشة: لماذا يأتي المستخدم إلى هذه الشاشة، ماذا يستفيد منها؟
- أولوية المحتوى: ما هي العناصر الثلاثة الأكثر أهمية؟ أين يجب أن تقع عين المستخدم أولاً؟
- السياق: الجهاز (الجوال/سطح المكتب)، الحالة المزاجية الحالية للمستخدم، الشاشة السابقة.
- القيود: العناصر المطلوبة (إخلاء المسؤولية، عنصر العلامة التجارية)، حد المساحة.
- طلب الاختلاف: كم عدد التخطيطات المختلفة التي تريد رؤيتها.
عندما تقدم هذا الموجز، ينتج النموذج خيارات مختلفة ستساعدك على اتخاذ القرار؛ وإذا كان الموجز ضعيفا، فستكون جميعها متشابهة وغير مجدية.
نصيحة: اسأل الذكاء الاصطناعي ليس عن إطار سلكي واحد "مثالي"، ولكن عن 3 أساليب مختلفة بشكل واضح (على سبيل المثال، "قائمة واحدة ثقيلة، واحدة ثقيلة الصورة، واحدة تركز على إجراء واحد"). مجموعة متنوعة من الخيارات تفتح نقاطك العمياء.
الموقع الواقعي للأدوات التي تولد واجهات من النص
في السنوات الأخيرة، أصبحت الأدوات التي تعد بـ "اكتبها وستظهر الواجهة" منتشرة على نطاق واسع. هذه تنتج مسودة بداية سريعة حقًا. ولكن إذا كنت لا تعرف حدوده، فإنه سوف يضللك:
- لم يتم اختباره مع محتوى حقيقي: تكون نماذج النصوص دائمًا بالطول المثالي؛ إذا تجاوز العنوان الفعلي، فقد يتم تعطيل التخطيط.
- لا توجد حالات حافة: عادةً لا يتم رسم القائمة الفارغة والاسم الطويل وحالة الخطأ.
- إمكانية الوصول ليست هي الوضع الافتراضي: غالبًا لا يتم التحكم في التباين ومنطقة اللمس وترتيب القراءة.
- إنه غير مبال بالنموذج العقلي: النموذج ينتج "الواجهة المتوسطة"، وليس عادة المستخدم الخاص بك.
الموقف الصحيح: اعتبر المخرجات بمثابة المسودة الأولية، وليس التصميم النهائي. ما يجعل الإطار السلكي "جيدًا" هو أنه تم اختباره بمحتوى حقيقي وحالة حافة وإمكانية الوصول.
المرحلة
إخراج الذكاء الاصطناعي
النضج الذي أضفته
النظام الأول
هيكل عظمي على شكل صندوق
الإصلاح على أساس أولوية المحتوى
المحتوى
عينة الطول المثالي
الاختبار بمحتوى حقيقي وفائض وفارغ
حالة الحافة
عادة لا شيء
حالات فارغة/خطأ/تحميل
إمكانية الوصول
غير محدد
التباين والتسلسل ومنطقة اللمس
رابط الدفق
شاشة واحدة
الاتساق مع الشاشة السابقة/التالية
ثلاث حالات صغيرة
الحالة 1 - ثلاثة اختلافات، قرار واضح. طلب أحد المصممين من الذكاء الاصطناعي 3 تخطيطات مختلفة للوحة المعلومات (بطاقة ملخصة، جدول، مخطط ثقيل). وصلت 3 مسودات في 15 دقيقة؛ أظهر الفريق هذه المعلومات لأصحاب المصلحة واتخذ قرارًا بشأن الاتجاه خلال 20 دقيقة. إذا تم ذلك يدويًا، فستستغرق 3 مسودات نصف يوم.
الحالة 2 - المحتوى الفعلي تعطل الترتيب. في الإطار السلكي للذكاء الاصطناعي، كانت أسماء المنتجات دائمًا مكونة من كلمتين. في الكتالوج الفعلي، كانت بعض الأسماء مكونة من 40 حرفًا وتجاوزت عدد البطاقات. قام المصمم بتغيير التخطيط بعد اختباره ببيانات حقيقية. الدرس المستفاد: محتوى العينة يكذب؛ اختبره بمحتوى حقيقي.
الحالة 3 - حالة فارغة منسية. كان الإطار السلكي لشاشة "المفضلة" يعرض القائمة الكاملة فقط. المستخدم الجديد ليس لديه المفضلة. تفتح الشاشة فارغة. طلب المصمم من الذكاء الاصطناعي أن "يرسم الحالة الفارغة أيضًا" وأضاف حالة فارغة إرشادية. الدرس المستفاد: الحالة الفارغة هي جزء من التصميم الرئيسي، وليست حافة.
المحتوى قبل، مربع بعد
المفهوم الخاطئ الأكثر شيوعًا في Wireframing هو الخلط بين التصميم وبين "وضع الصندوق". ومع ذلك، فإن الإطار السلكي الجيد يكون موجهًا نحو المحتوى: أولاً عليك أن تقرر ما هي المعلومات التي يجب أن تظهر على الشاشة وبأي أولوية؛ الصناديق هي نتيجة هذا القرار. يعد إنشاء "أولوية المحتوى" الخطوة الأولى في التخطيط الشبكي: حيث تقوم بإدراج الأشياء التي يحتاج المستخدم إلى رؤيتها على هذه الشاشة من الأكثر أهمية إلى الأقل أهمية. يعد الذكاء الاصطناعي شريكًا جيدًا في إعداد هذه القائمة؛ فهو يعطي الأولوية لعناصر المحتوى المحتملة عندما تحدد الغرض من الشاشة. ثم تقوم بترجمة تلك الأولوية بالترتيب: العنصر الأكثر أهمية في المكان الأكثر وضوحًا. عندما يتم عكس هذا الترتيب - عندما ترسم تخطيطًا جميلاً لأول مرة ثم تحاول احتواء المحتوى - يتم دفع المعلومات التي يحتاجها المستخدم فعليًا إلى الخلفية.
تنبيه: قد يؤدي الإطار السلكي ذو المظهر الجميل إلى إخفاء أولوية المحتوى غير الصحيحة. "هل هذا الإعداد جميل؟" ولكن "هل المعلومات الأكثر أهمية هي أول ما يلفت انتباهك؟" بسأل.
مطالبات قابلة للنسخ
دورك: مصمم منتجات كبير. غرض الشاشة: <<الغرض>>. الجهاز: <<الجوال/سطح المكتب>>.أهم 3 عناصر: <<القائمة>>. العناصر المطلوبة: <<list>>.المهمة: اقتراح 3 أساليب مختلفة تمامًا للإطار السلكي (مع النص، قسمًا تلو الآخر). لكل أسلوب: منطق التخطيط، وترتيب الأسبقية، وسبب نجاحه.
اختبر تعريف الإطار السلكي هذا في ظروف العالم الحقيقي:<<نص الإطار السلكي>>. ارسم أو وصف: الحالة الفارغة، المحتوى الطويل (التجاوز)، حالة الخطأ، حالة التحميل. لكل منها، اكتب كيف يجب أن يتكيف التخطيط.
تحقق من هذا الإطار السلكي لإمكانية الوصول: هل ترتيب القراءة منطقي، هل أهداف اللمس كافية، هل هناك معلومات قائمة على اللون فقط، هل الإجراء الأساسي واضح؟ قائمة المشاكل والاقتراحات واحدا تلو الآخر. الإطار السلكي: <<نص>>
قم بإنشاء محتوى نائب واقعي لهذا الإطار السلكي: 5 رؤوس بأطوال مختلفة (من القصيرة إلى الطويلة جدًا)، 3 نصوص حالة فارغة، رسالتي خطأ. الغرض: اختبار التصميم بمحتوى حقيقي وليس مثالي. السياق: <<شاشة>>
موجه ضعيف / موجه قوي
ضعيف: "إنشاء إطار سلكي للصفحة الرئيسية."
النتيجة: هيكل عام مع أولوية محتوى غير واضحة، وتوحيد، وعدم وجود حالات حافة.
Strong: "اقترح 3 مناهج مختلفة للإطار السلكي للصفحة الرئيسية للجوال ذات الغرض X؛ العناصر الثلاثة الأكثر أهمية هي؛ شرح منطق الأولوية لكل منهج؛ وإظهار حالة الخطأ والفارغ أيضًا."
النتيجة: خيارات واقعية قابلة للمقارنة ومحددة الأولويات.
الفرق: موجه قوي يعطي الغرض + الأولوية + الاختلاف + حالة الحافة.
الأخطاء الشائعة
- اعتبار الناتج الأول هو التصميم النهائي. الإطار السلكي للذكاء الاصطناعي هو البداية؛ إن المضي قدمًا في حالته غير الناضجة أمر مكلف.
- كن راضيًا عن محتوى العينة. النص الوهمي ذو الطول المثالي يجعل التخطيط يبدو جميلًا بشكل زائف.
- تجاوز الحالات الفارغة والخطأ. غالبًا ما تكون الشاشة الأولى التي يراها المستخدم فارغة.
- ترك إمكانية الوصول لآخر. يتم أخذ التباين وترتيب القراءة في الاعتبار في مرحلة الإطار السلكي ولا يتم تصحيحهما لاحقًا.
- المضي قدما مع اختلاف واحد. إن التركيز على الفكرة الأولى دون توليد خيارات يؤدي إلى تضخيم النقاط العمياء.
في ملخص
يُعد التخطيط السلكي أرخص وسيلة لاختبار أولوية المحتوى وتدفقه دون الخوض في الجوانب الجمالية؛ يعمل الذكاء الاصطناعي على تسريع هذه المرحلة بشكل كبير. المفتاح هو تقديم ملخص قوي (الغرض، الأولوية، السياق، القيد، الاختلاف) قبل الإنتاج وعرض المخرجات كمسودة أولية. لا ينضج مخرجات الأدوات التي تنشئ واجهات من النص حتى يتم اختبارها باستخدام محتوى حقيقي وحالات حافة وإمكانية الوصول. استخدم النموذج كمولد خيارات سريع؛ تضيف النضج والقرار.
مهمة التطبيق
- اختر شاشة واكتب ملخصًا يتضمن الغرض والعناصر الثلاثة الأكثر أهمية والعناصر الإلزامية.
- قم بإنشاء 3 طرق مختلفة تمامًا للإطار السلكي باستخدام الموجه الأول.
- باستخدام الموجه الرابع، قم بإنتاج محتوى عنصر نائب واقعي (قصير - طويل - فارغ) واختبر التخطيط.
- قم بإضافة الحالات الفارغة والخطأ والتحميل باستخدام الموجه الثاني.
- قم بإجراء فحص إمكانية الوصول باستخدام الموجه الثالث وقم بنشر النتائج على الإطار السلكي.
قائمة مرجعية
- [ ] كتبت ملخصًا عن الهدف والأولويات قبل الإنتاج.
- [ ] لم أقم بإنتاج نسخة واحدة بل 3 أشكال مختلفة.
- [ ] لقد اختبرت التصميم بمحتوى واقعي (طويل/قصير/فارغ).
- [ ] لقد قمت بتصميم حالات فارغة وخطأ وتحميل.
- [ ] لقد قمت بفحص إمكانية الوصول في مرحلة الإطار السلكي.
- [ ] لقد تعاملت مع الإخراج كمسودة أولية وأنضجته.