من كان يعرف أن Adobe CC يمكن أن يكون Wireframe؟

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

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

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

تمامًا مثل الكثير من المصممين الذين انتقلوا إلى التصميم الرقمي من عالم الطباعة ، فأنا خبير في تطبيقات Adobe مثل Illustrator و InDesign و Photoshop. يمكنني استخدامها بكفاءة وبشكل حدسي من أي مكان وفي أي وقت (حتى لو أيقظني أحدهم في منتصف الليل ورفض إعطائي فنجانًا من القهوة).

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

مع كل مشروع ، عادةً ما أبدأ التصميم من خلال عمل رسومات تخطيطية تقريبية جدًا على الورق ، أو على جهاز iPad أو شاشة الهاتف الذكي إذا لم أكن بالقرب من مكتب مكتبي. هذه الرسومات موجودة لتركيز أفكاري فيما يتعلق بالمفهوم المختار ؛ ربما لن يرى العميل أيًا منهم أبدًا. عندما أشعر بالثقة في أن فكرتي تعمل ، أنتقل إلى التخطيط الشبكي. عادةً ما أستخدم Adobe Illustrator و InDesign معًا: Illustrator لإنشاء معظم عناصر مجموعة واجهة المستخدم و InDesign للإطار السلكي نفسه.

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

إيجابيات وسلبيات استخدام Adobe InDesign كإطار سلكي وأداة النماذج الأولية

لبعض الوقت الآن ، لم يكن Adobe InDesign تطبيقًا للنشر المكتبي فحسب ، بل يُستخدم أيضًا على نطاق واسع في النشر الرقمي وإنشاء EPUB. هناك أيضًا عدة أسباب تجعلها أداة مناسبة للتخطيط الشبكي أيضًا:

• الصفحات الرئيسية - يمكنك تطبيق عناصر تصميم عامة بسرعة وباستمرار مثل التنقل والرؤوس والتذييلات وما إلى ذلك باستخدام الصفحات الرئيسية. يمكنك إنشاء أي عدد تريده من الصفحات الرئيسية ، وعلاوة على ذلك ، يمكن أن يعتمد أحدهم الرئيسي على الآخر.
• دعم الشبكة الصلبة - يتيح لك إنشاء أنواع مختلفة من الشبكات وتطبيقها بسهولة ، وتكملة الأعمدة ، والأدلة الأفقية والرأسية لإنشاء وحدات وشبكات فرعية لمزيد من التعقيد والدقة.
• التخطيطات البديلة - تُمكّن الإطارات السلكية لأجهزة واتجاهات متعددة في نفس الملف.
• مكتبات CC - تُنشئ مكتبة من الأصول المختلفة القابلة لإعادة الاستخدام مثل الكائنات والألوان والأحرف وأنماط الفقرة شائعة الاستخدام. قم بإنشاء أصول في InDesign ، أو Illustrator ، أو Photoshop ، أو باستخدام تطبيق Adobe Capture للأجهزة المحمولة - أيهما تفضل.
• الطبقات - توفر القدرة على تنظيم ، وتجميع ، وإظهار / إخفاء ، وقفل / فتح الكائنات والمحتوى بشكل انتقائي في الإطار السلكي. كل صفحة من وثيقة InDesign متعددة الصفحات لها نفس عدد الطبقات وترتيبها. تنعكس جميع التغييرات التي تجريها على الطبقات على كل الصفحات ، مثل الرؤية أو ترتيب التراص أو الحذف.
• الأنماط والجداول - تمنح التحكم الكامل في مظهر النص والكائنات والجداول من خلال استخدام أنماط InDesign. يمكن أن ترث الأنماط من بعضها البعض مما يوفر القدرة على تسلسل التنسيق المطلوب بسهولة عبر المستند. يعد إنشاء الجداول وتنسيقها لاستخدامها كعناصر محتوى للإطار الشبكي أو حتى عناصر مساعدة لأغراض التخطيط أمرًا بسيطًا للغاية.
• تكامل Typekit - في نماذج بالأحجام الطبيعية عالية الدقة ، يمكنك استخدام أي من خطوط Typekit التي تتزامن مع سطح المكتب.
• التفاعل والرسوم المتحركة - يمكنك استخدام ميزات الرسوم المتحركة والتفاعلية المضمنة في Adobe InDesign لإنشاء حالات مختلفة من عناصر تصميم الويب أو التطبيق لنماذج أولية تفاعلية. يستخدم معظم الأشخاص هذه الميزات أثناء إنشاء المجلات لحلول النشر الرقمية وتصدير EPUB ذي التخطيط الثابت ، ولكنها مناسبة أيضًا للنماذج الأولية.
• خيارات التصدير - يمكن لـ InDesign تصدير الإطارات الشبكية والنماذج الأولية التي تقوم بإنشائها بتنسيقات متنوعة. من المحتمل أن تكون ملفات PDF التفاعلية هي التنسيق الذي تختاره في معظم الحالات ، ولكن يمكنك أيضًا استخدام ميزة Publish Online لتحويل مستندك إلى HTML تفاعلي ، والذي يمكن عرضه في مستعرضات سطح المكتب والأجهزة المحمولة الحديثة. لسوء الحظ ، ليس لديك سيطرة كبيرة على التصدير باستخدام Publish Online ، ويتم استضافة الملفات المصدرة على خوادم Adobe. يمكنك مشاركة النموذج الأولي URL لعميلك أو تضمينه في موقعك. لمزيد من التحكم والتصدير المباشر إلى HTML5 ، يمكنك استخدام الامتداد in5 من Ajar Productions.

يحتوي Adobe InDesign على العديد من المحترفين لاستخدامه كأداة للإطار الشبكي والنماذج الأولية ، ولكن له أيضًا بعض العيوب:

• عدم وجود قوالب وعناصر الإطار السلكي المحددة مسبقًا - نظرًا لأن InDesign لا يُقصد به أن يكون أداة تخطيط شبكي ، يجب عليك إنشاء قوالب وأصول كائن وتحضيرها بنفسك. (سأوضح لك كيفية التعامل مع هذه الخطوة لاحقًا في المقالة.) والخبر السار هو أن معظم هذا العمل سيتم إنجازه مرة واحدة فقط ، وبعد بضع ساعات من العمل ، ستكون جاهزًا لبدء إطارات InDesign السلكية. أيضًا ، هناك الكثير من الأصول ومجموعات الإطارات الشبكية التي يمكنك تنزيلها من الإنترنت ، لذلك ليست هناك حاجة لرسم كل شيء بنفسك.
• ميزات التفاعل والرسوم المتحركة محدودة - على الرغم من أنه يمكنك بسهولة توصيل الصفحات وإضافة بعض التفاعل والرسوم المتحركة ، إلا أن العملية قد تستغرق وقتًا طويلاً في بعض الأحيان. بعض أدوات التفاعل البسيطة ليست بديهية للغاية. إذا لم تكن قد استخدمت ميزات تفاعل InDesign ، فستحتاج إلى التغلب على منحنى تعليمي بسيط قبل أن تتمكن من تطبيقها بكفاءة.
• لا يمكن تصدير مستندات InDesign مباشرة كملفات PSD ذات طبقات - إذا قمت بالتصميم المرئي في Adobe Photoshop وأردت أن يكون لديك عناصر إطار سلكي منفصلة لبناء التصميم الخاص بك ، فسيتعين عليك تصدير الإطارات السلكية إلى PDF أولاً. بعد ذلك ستحتاج إلى فتح ملف PDF في Illustrator وتصديره مرة أخرى كملف PSD متعدد الطبقات. يمكن للأشخاص الذين يعملون على جهاز Mac أيضًا استخدام برنامج نصي مجاني كتبه Rob Day لحفظ ملفات InDesign كملف PSD متعدد الطبقات.

التحضير الجيد للإطار السلكي هو نصف العمل

ابدأ بضبط بيئة العمل الخاصة بك. إذا لم يكن لديك بالفعل مساحة عمل محفوظة في Illustrator و InDesign لهذا النوع من العمل ، فقم بإنشاء واحدة. في Illustrator ، ابدأ بمساحة عمل الويب المحددة مسبقًا وقم بتكييفها حسب رغبتك: أغلق اللوحات التي لا تستخدمها كثيرًا ، وتأكد من فتح اللوحات التي ستستخدمها ، ثم رتبها لتناسب أسلوب عملك.

عند الانتهاء ، احفظ مساحة العمل باختيار Window> Workspace> New Workspace… افعل نفس الشيء في InDesign باستخدام مساحة عمل Digital Publishing كبداية.

تجميع مجموعات الإطار السلكي / نموذج بالحجم الطبيعي / النموذج الأولي

يتطلب سير عمل الإطارات السلكية الفعال باستخدام Illustrator و InDesign أن تستثمر بعض الوقت في إنشاء مجموعة أصول واجهة المستخدم أولاً. منذ تقديم Adobe Creative Cloud ، تعد CC Libraries هي أفضل طريقة لتخزين جميع مكونات مجموعة واجهة المستخدم الخاصة بك.

يمكنك إنشاء مكتبة واحدة أو أكثر لأغراض التخطيط الشبكي والنماذج الأولية. على سبيل المثال ، يمكنك إنشاء مكتبة واحدة للتخطيط الشبكي لمواقع الويب ، وأخرى لتطبيقات iOS ، وثالثة لتطبيقات Android ، وما إلى ذلك.

لإنشاء مكتبة Adobe CC ، افتح لوحة Libraries واختر Create New Library من قائمة hamburger في اللوحة. يمكن إنشاء الأصول التي تضعها في المكتبات واستخدامها في تطبيقات Adobe لسطح المكتب أو الأجهزة المحمولة المختلفة على جميع الأجهزة التي تقوم بتسجيل الدخول إليها باستخدام معرف Adobe الخاص بك. هذا يعني أنه يمكنك البدء بالمشروع على جهاز iPad أو iPhone ، والمتابعة على كمبيوتر سطح المكتب في المكتب ، وإجراء تغييرات اللحظة الأخيرة على الكمبيوتر المحمول المنزلي باستخدام نفس الأصول المتوفرة على جميع الأجهزة.

إذا كنت تعمل كجزء من فريق أكبر ، فيمكن مشاركة أصول المكتبة بين أعضاء الفريق. يمكن أن تحتوي المكتبات على ألوان ورسومات وأنماط طبقة (في Photoshop فقط) وأنماط فقرة وحرف. يمكنك إضافة الأصول في المكتبات من خلال النقر على الزر المقابل في أسفل لوحة CC Library مع تحديد العنصر المعني. يمكنك أيضًا إضافة أصول رسومية عن طريق سحبها مباشرة من لوح الرسم إلى لوحة Libraries.

يتم تنظيم الأصول في المكتبات حسب الفئات. التزم بالممارسات الجيدة وأعد تسمية كل أصل باسم ذي معنى. المكتبات قابلة للبحث ، والعثور على أحد الأصول عن طريق كتابة بداية اسمها سيوفر لك الكثير من الوقت لاحقًا ، خاصةً عندما يكون لديك العديد من العناصر المختلفة في مكتباتك. لتغيير اسم الأصل ، انقر فوقه نقرًا مزدوجًا واكتب اسمًا جديدًا.

تكوين مكونات طقم الهيكل السلكي

على الرغم من أن Adobe InDesign يحتوي على بعض أدوات الرسم الأساسية التي تشبه إلى حد كبير أدوات Illustrator ، إلا أن Illustrator يعد خيارًا أفضل بكثير لرسم عناصر مختلفة في الإطار السلكي الخاص بك. كقاعدة عامة ، قم بإنشاء جميع عناصر المجموعة التي تتطلب بعض الرسم أكثر تعقيدًا من الأشكال الهندسية الأساسية في Illustrator. قم بإنشاء عناصر أبسط تحتوي على نص ستحتاج إلى تغييره في التخطيط ، مثل الأزرار البسيطة ، في InDesign.

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

ابدأ بإنشاء مستند جديد للإطار السلكي أو مكونات مجموعة النماذج. تحقق جيدًا من اختيار ملف تعريف الويب / الأجهزة في Illustrator أو هدف النشر على الويب / الرقمي من مربع الحوار New Document. يضمن ذلك استخدام وحدات البكسل كوحدات وتعيين صيغة اللون على RGB.

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

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

أصول Adobe Illustrator في مكتبات CC

الأصول التي تضيفها إلى المكتبات من Illustrator مرتبطة بشكل افتراضي (منذ Adobe CC 2015). هذا يعني أنه عندما تقوم بتعديل أصل مكتبة في Illustrator ، فإن التغييرات تنعكس في جميع المثيلات المستخدمة. إذا كنت تريد إضافة أصل غير مرتبط إلى المستند ، فاضغط على مفتاح الخيار / البديل أثناء سحبه من اللوحة.

عند استخدام أصول Illustrator المرتبطة في InDesign ، سيكون لها رمز سحابة صغير في الزاوية اليسرى العليا عند عرض المستند في الوضع العادي. يتم سردها جميعًا أيضًا في لوحة الروابط. إذا قمت بتعديل أصل مكتبة في Illustrator ، فلن يتم إجراء التغييرات في مستند InDesign تلقائيًا. سيتم استبدال رمز السحابة برمز علامة تعجب رابط معدل ، وسيتعين عليك تحديث هذه الروابط.

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

ضع في اعتبارك هذه الخصائص عند إنشاء إطارات سلكية: أضف أصولًا إلى المكتبة من Illustrator عندما تفترض أنها ستحتاج إلى تعديل وتحديث عالميًا ، أو قم بإضافتها من InDesign عندما تعلم أنك تريد تعديلها بشكل فردي. لاحظ أنه يمكنك أيضًا إنشاء رسومات في Illustrator ، ونسخها / لصقها في InDesign ، ثم تعديلها إذا لزم الأمر قبل إضافتها إلى المكتبة كأصل InDesign.

إذا نسيت أي أصل رسومي تم إنشاؤه بواسطة أي تطبيق ، فانظر إلى الجانب الأيمن من كل عنصر في لوحة المكتبة أثناء استخدام إظهار العناصر كقائمة.

مرونة Adobe InDesign مع المحتوى والنسخ

للتأكد من أنه يمكنك بسهولة تغيير النسخ والطباعة في الإطارات الشبكية ، قم بإنشاء حاويات نص في InDesign. يتميز InDesign بميزة رائعة لملء مربعات النص بنص العنصر النائب. عند رسم مربع نص ، انقر بزر الماوس الأيمن فوقه واختر Fill With Placeholder Text .

أضف مربعات نص إلى مكتبة Adobe مثل أي عنصر رسومي آخر عن طريق سحبها. عند استخدام أصول النص هذه لاحقًا كجزء من تخطيط الإطارات الشبكية ، يمكنك تعديل مربع النص بالإضافة إلى محتواه في الإطار السلكي الخاص بك.

ضع في اعتبارك إنشاء عناصر واجهة مستخدم للأزرار في InDesign أيضًا. لإنشاء زر ، قم بإنشاء إطار نص ، واكتب النص ، ثم استخدم Object> Text Frame Options لتعريف التباعد الداخلي. اضبط الضبط الرأسي للنص داخل المربع عن طريق تحديد الخيار المطلوب من القائمة المنسدلة Align.

قم بالتبديل إلى علامة التبويب الحجم التلقائي واختر الحجم التلقائي المناسب (من المحتمل أن يكون العرض فقط) ونقطة مرجعية مناسبة. إذا كنت لا تريد السماح لـ InDesign بتقسيم النص إلى أكثر من سطر واحد ، فتحقق من خيار No Line Breakks.

استخدم الموارد الموجودة

هناك الكثير من مجموعات أدوات التخطيط الشبكي من Adobe Illustrator والنماذج الأولية لواجهة المستخدم المتاحة على الإنترنت والتي يمكنك شراؤها أو حتى تنزيلها مجانًا إذا كنت تريد حلاً جاهزًا. ربما لديك بالفعل عناصر يمكنك حفرها من مشاريعك المكتملة. افتح تلك المستندات ، وقم بتعديل أي عناصر تم إنشاؤها مسبقًا حسب الضرورة ، وضعها في المكتبات الخاصة بها.

إذا كنت تصمم نظامًا أساسيًا معينًا - على سبيل المثال ، تطبيق iOS أو Android - فتأكد من قراءة إرشادات الواجهة البشرية بعناية واستخدام الأصول المناسبة. قد يكون من الملائم أن يكون لديك عناصر واجهة مستخدم خاصة بأنظمة أساسية مختلفة في مجموعتك.

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

إنشاء قوالب InDesign Wireframe

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

نظرًا لأنه يوصى باستخدام نوع من الشبكة لتخطيط عناصر الإطار السلكي ، قم بإعداد الهوامش وإنشاء شبكة عمود عن طريق تعيين العدد المطلوب من الأعمدة ومساحة التوثيق. يمكنك تغيير هذه الإعدادات لاحقًا من Layout> Margins and Columns مع تحديد الصفحة الرئيسية (أو الصفحات) الخاصة بها في لوحة الصفحات.

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

يمكنك أيضًا إنشاء قوالب إضافية لأغراض العرض التقديمي باستخدام نماذج بالأحجام الطبيعية للجهاز كإطار للإطارات السلكية الخاصة بك. نظرًا لأنه يمكن ربط مستند InDesign بآخر ، يمكنك إنشاء إطارات سلكية في مستند InDesign واحد ثم وضعه في مستند آخر للعروض التقديمية.

على الرغم من أنه قد يبدو معقدًا في البداية ، إلا أنه في الواقع سير عمل بسيط للغاية وفعال. يجعل الاحتفاظ بالإطارات الشبكية الفعلية في مستند منفصل من السهل الاستمرار في البناء من الإطارات السلكية المعتمدة إلى التصميم المرئي المصقول.

من السهل أيضًا إنشاء قوالب جاهزة للعرض التقديمي يتم فيها وضع إطارات سلكية وإضافة ملصقات وتعليقات ، وتكون قادرًا على عرض أفضل الحلول للعميل. عند إجراء تعديلات على ملف إطار سلكي ، ما عليك سوى تحديثه مثل أي رابط آخر في مستند عرض تقديمي و ta-daaa! جميع التغييرات في العرض التقديمي الخاص بك كذلك.

في لوحة Layers ، يمكنك إعداد طبقات منفصلة لأنواع مختلفة من المحتوى: عناصر واجهة المستخدم والميزات التفاعلية والإيماءات والتسميات والملاحظات. إذا كنت بحاجة إلى المزيد من الطبقات لمشروع معين ، فستتمكن من إضافتها بسهولة في أي وقت أثناء عملية التخطيط الشبكي.

عند الانتهاء من الإنشاء ، احفظ القوالب الخاصة بك كملفات قالب InDesign.indt. بعد حفظ جميع القوالب التي تحتاجها ، فأنت جاهز أخيرًا لبدء التخطيط الشبكي بكفاءة.

بناء هياكل الأسلاك

أول الأشياء أولاً - ابدأ بالصفحة الرئيسية. اسحب جميع العناصر العالمية التي ستكون هي نفسها عبر جميع شاشات مشروعك من المكتبة. إذا كنت تصمم موقعًا إلكترونيًا ، فعادة ما تكون هذه الرؤوس مع الشعار والتنقل والتذييل. نظرًا لأنه يمكنك إنشاء أكثر من صفحة رئيسية ويمكن أن يرث كل منهما من الآخر ، يمكنك الاستفادة من تداخل الصفحات الرئيسية.

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

لا يمكنك تحديد العناصر الرئيسية أو تغييرها أو حذفها من صفحات المستند العادية ما لم تنقر عليها أثناء الضغط على Command / Control + Shift لتجاوز العنصر الرئيسي. بمجرد تجاوز العنصر الخاص بك ، يمكنك تغيير أي من معلماته أو حذفه بالكامل من التخطيط.

ضع في اعتبارك أنه حتى عند تجاوز العنصر ، فإن المعلمات التي لم تغيرها ستظل موروثة من الرئيسي. على سبيل المثال ، إذا تجاوزت عنصرًا عن طريق تغيير لونه ، فلن يتغير حجمه لأنه لا يزال متصلاً بالسيد. علاوة على ذلك ، إذا قمت بتغييره في الصفحة الرئيسية ، فسيتم أيضًا تعديله على العنصر الذي تجاوزته مسبقًا.

عند إدراج صفحات إضافية في مستند الإطارات الشبكية ، تذكر أن تبنيها على أساس كل منها. إذا كنت بحاجة إلى تغيير الأساسي للصفحات الموجودة بالفعل في التخطيط ، فحددها في لوحة الصفحات ، وانقر بزر الماوس الأيمن واختر تطبيق الرئيسي على الصفحات. استخدم أصول المكتبة وقم بترتيبها باستخدام Smart Guides وخيارات Align لإنشاء تخطيطات الإطار السلكي النهائية لواجهة المستخدم.

إذا كنت تقوم بإنشاء تصميمات لأكثر من حجم شاشة واحد ، فقم بعمل تخطيطات بديلة من Layouts> Create Alternate Layout أو لوحة Pages. يمكنك استخدام قواعد التخطيط السائلة عند إنشاء تخطيطات بديلة لاعتماد عناصر الصفحة تلقائيًا من حجم واتجاه إلى آخر ، أو يمكنك التحكم فيها يدويًا. لتطبيق واختبار قواعد التخطيط السائل ، استخدم أداة الصفحة أو افتح اللوحة Window> Interactive> Liquid Layout.

إضافة التفاعل

يحتوي Adobe InDesign على مجموعة من ميزات التفاعل التي يمكنك الاستفادة منها عند إنشاء إطارات سلكية أو نماذج أولية. ستعتمد الميزات التي ستدرجها على التنسيق النهائي الذي ستحتاجه للإطارات السلكية أو النماذج الأولية أو العروض التقديمية.

إذا كنت تقوم بالتصدير بتنسيق PDF ، فسيكون التفاعل محدودًا ، ولكن يمكنك على الأقل عمل روابط بين الشاشات باستخدام لوحة الارتباطات التشعبية لإنشائها. حدد العنصر الذي تريد أن يتصرف كرابط وانقر على أيقونة New Hyperlink. من القائمة المنسدلة Link To ، اختر Page وأدخل رقم الصفحة المطلوب. كرر هذا الإجراء على جميع العناصر التي تريد أن تتصرف كروابط بين الشاشات.

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

يمكنك إنشاء أزرار من أي رسم أو نص أو صورة أو مجموعة عناصر. لإنشاء زر من كائن محدد ، استخدم لوحة Window> Interactive> Buttons and Forms وانقر على أيقونة Convert to Button.

يمكن أن يكون للأزرار حالات مختلفة تم إنشاؤها للمظاهر العادية ومظاهر التمرير والنقر. لإضافة حالات التمرير أو النقر فوق الأزرار ، انقر عليها في لوحة الأزرار وقم بتحرير مظهر الزر لكل حالة. لإضافة إجراء إلى الزر ، انقر فوق علامة الجمع واختره من القائمة. ضع في الاعتبار أن الإجراءات التي تتم بموجب SWF / EPUB لن تعمل في ملفات PDF التفاعلية.

لإنشاء عناصر منبثقة ، اختر إظهار / إخفاء الأزرار والنماذج. لإخفاء الأزرار حتى يتم تشغيلها ، حدد الخيار Hidden until Triggered. يمكنك تضمين كائنات متعددة الحالات في ملف PDF تفاعلي ، ولكن فقط إذا قمت بتصديرها كملف SWF أولاً ثم وضعها مرة أخرى في مخطط InDesign لتصدير PDF. إن سير العمل هذا ممل ولا يمكن رؤية ملفات PDF بشكل صحيح في جميع برامج قراءة PDF ، لذا حاول تجنب القيام بذلك ما لم يكن ذلك ضروريًا حقًا.

إذا كنت تريد تحويل مستندك إلى نموذج أولي بتنسيق HTML باستخدام ميزة النشر عبر الإنترنت في InDesign CC 2015 ، فيمكنك استخدام العديد من الخيارات التفاعلية مثل الرسوم المتحركة والكائنات متعددة الحالات وإجراءات الأزرار المتعددة ، بما في ذلك كل تلك المخصصة لتصدير SWF / EPUB.

يمكنك إضافة رسوم متحركة بسيطة باستخدام لوحة Animation واختيار أحد الإعدادات المسبقة المضمنة من القائمة المنسدلة وتعيين خصائصها. يمكن تطبيق رسم متحرك واحد على كائن واحد فقط ، ولكن إذا كنت بحاجة إلى إضافة المزيد منها ، فقم بتجميع الكائن في مربع فارغ واستخدم الرسوم المتحركة الجديدة على هذا الكائن الذي تم إنشاؤه حديثًا.

بالنسبة لعناصر واجهة المستخدم التي تتطلب إظهار حالات مختلفة ، قم بإنشاء كائن متعدد الحالات. إنشاء كائن منفصل لكل دولة. يمكن أن تكون الكائنات عنصرًا واحدًا (صورة ، مربع نص ، رسم) أو مجموعة من العناصر المختلفة. افتح لوحة Window> Interactive> Object States ، وحدد جميع الكائنات التي قمت بإنشائها للكائن متعدد الحالات ، وانقر فوق الزر New في أسفل اللوحة.

بعد إنشاء الكائن متعدد الحالات ، ستحتاج إلى إنشاء أزرار للانتقال من حالة كائن إلى أخرى. تكشف إجراءات Go To Next State أو Go To Previous State عن حالة الكائن المحددة من خلال إجراء Go To State.

إذا كنت ترغب في الحصول على إطار قابل للتمرير في الإطار السلكي / النموذج الأولي الخاص بك ، فإن أسهل طريقة لإنشاء إطار هي باستخدام امتداد Universal Scrolling Frames من Ajar Productions. بعد تنزيل الامتداد وتثبيته ، يمكنك استخدامه كلوحة InDesign. للحصول على إطار قابل للتمرير ، ستحتاج إلى إنشاء محتوى بالإضافة إلى إطار واحد للحاوية.

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

من خلال الجمع بين الأزرار والكائنات متعددة الحالات والرسوم المتحركة والإطارات القابلة للتمرير ، يمكنك تحقيق تجربة تفاعلية غنية. لاختبار التفاعل في InDesign ، استخدم لوحة EPUB Interactivity Preview. يمكنك معاينة صفحة واحدة أو الوثيقة بأكملها. قم بتكبير لوحة المعاينة حسب حاجتك.

إذا لم تكن قد استخدمت ميزات Adobe InDesign التفاعلية ، فاستعد لأن هناك القليل من منحنى التعلم في البداية. ولكن مع القليل من الممارسة وبعض التجارب والخطأ ، سوف تتقنها بسرعة.

تصدير المستندات النهائية

عند الانتهاء من إنشاء الإطارات الشبكية وملفات العرض التقديمي ، كل ما تبقى هو إظهار أفكارك الرائعة للعميل بأفضل طريقة ممكنة. لهذا الغرض ، ستحتاج إلى تصدير الإطارات الشبكية بتنسيق يمكن لعميلك معاينته. على الرغم من أنه يمكن تصدير ملفات InDesign بتنسيقات متنوعة ، فمن المحتمل أنك ستستخدم PDF التفاعلي أو ميزة Publish Online إذا كنت تختبر نماذج أولية وظيفية منخفضة أو عالية الدقة. للحفظ كملف PDF تفاعلي ، اختر Adobe PDF (تفاعلي) من القائمة المنسدلة Format في مربع الحوار Export واضبط الخصائص حسب الحاجة. لا تنس تحديد النماذج والوسائط إذا كانت هناك عناصر تفاعلية تريد تضمينها. يمكن للعملاء عرض إطارات PDF السلكية في برنامج Adobe Reader المجاني وكتابة جميع تعليقاتهم في نفس الملف.

يمكنك أيضًا استخدام مستند PDF تم تصديره من InDesign لإنشاء نموذج أولي لـ InVision (أو أداة أخرى تدعم ملفات PDF). إذا كانت أداة النماذج الأولية القياسية الخاصة بك ، ربما Marvel ، لا يمكنها استيراد ملف PDF ، فقم بتصدير صفحات InDesign wireframe على هيئة صور JPEG أو PNG.

لتصدير نموذج HTML تفاعلي يمكن رؤيته في المتصفحات الحديثة على أجهزة مختلفة ، انتقل إلى File> Publish Online ، أو انقر فوق الزر Publish Online من شريط التطبيق. بعد تحضير المستند للنشر عبر الإنترنت وتحميله ، يمكنك نسخ عنوان URL للمستند لمشاركته مع أصحاب المصلحة وبدء عملية المراجعة. يمكنك أيضًا تضمين النموذج الأولي المنشور على موقعك.

يتمثل الجانب السلبي لميزة Publish Online في أنها لا تتمتع بأي تحكم إضافي في التصدير ، ويتم تخزين الملفات دائمًا على خوادم Adobe. أيضًا ، لا تزال ميزة معاينة ولا يمكنك التأكد من الاتجاه الذي ستطوره Adobe فيه ، أو حتى إذا كان سيتم إيقافها.

بمجرد تصدير الإطار السلكي / النموذج الأولي الخاص بك ، فقد حان الوقت لبدء عملية الاختبار والمراجعة والتكرار.