عندك فكرة مشروع تقني Startup أو تطبيق جوال Mobile App ؟
هل تعرف كيف ترسم نموذج تفاعلي Prototype لفكرتك ؟💡
اضغط ❤️ وتابع معي الثريد 👇
هل تعرف كيف ترسم نموذج تفاعلي Prototype لفكرتك ؟💡
اضغط ❤️ وتابع معي الثريد 👇
👋 بداية إذا أنت بالرياض ،،
أتشرف بحضورك ورشة العمل عن تصميم البروتوتايب لفكرتك التقنية بمركز ريادة الأعمال الرقمية Code لنبني سوياً نموذج تفاعلي لفكرة تقنية 😉
العدد محدود ،،
الورشة حضورية بمقر المركز الأحد ٨ أغسطس ٢٠٢٢
سجل مقعدك من هذا النموذج
code.mcit.gov.sa
أتشرف بحضورك ورشة العمل عن تصميم البروتوتايب لفكرتك التقنية بمركز ريادة الأعمال الرقمية Code لنبني سوياً نموذج تفاعلي لفكرة تقنية 😉
العدد محدود ،،
الورشة حضورية بمقر المركز الأحد ٨ أغسطس ٢٠٢٢
سجل مقعدك من هذا النموذج
code.mcit.gov.sa
أولاً:ما هي النمذجة Prototype ؟
هي عبارة عن رسم شاشات التطبيق سواء ملونة بما يُسمى واجهات التطبيق UI أو حتى خطوط رمادية وهي ما نسميه Wireframe ، ظاهر بالصورة الفرق بينهما، ثم ربطها لتظهر بطريقة تفاعلية وكأن الفكرة أصبحت تطبيق حقيقي
هي عبارة عن رسم شاشات التطبيق سواء ملونة بما يُسمى واجهات التطبيق UI أو حتى خطوط رمادية وهي ما نسميه Wireframe ، ظاهر بالصورة الفرق بينهما، ثم ربطها لتظهر بطريقة تفاعلية وكأن الفكرة أصبحت تطبيق حقيقي
ثانياً: ما هي أدوات رسم wireframe ؟
لديك مجموعة من الحلول، فيمكنك أن ترسمها بالورقة والقلم، أو أن تستخدم أداة Tool لرسمها، ومن أشهر أدوات رسم ال Wireframe :
adobe.com
sketch.com
figma.com
invisionapp.com
balsamiq.com
لديك مجموعة من الحلول، فيمكنك أن ترسمها بالورقة والقلم، أو أن تستخدم أداة Tool لرسمها، ومن أشهر أدوات رسم ال Wireframe :
adobe.com
sketch.com
figma.com
invisionapp.com
balsamiq.com
adobe.com/mena_en/produc…
invisionapp.com
Collaborate better | InVision
InVision is the online whiteboard and productivity platform powering the future of work. See how InV...
sketch.com
Sketch
Sketch is the all-in-one platform for digital design — with collaborative design tools, prototyping...
figma.com
Figma: the collaborative interface design tool.
Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.
balsamiq.com
Balsamiq. Rapid, Effective and Fun Wireframing Software | Balsamiq
Balsamiq is the company behind Balsamiq Wireframes, the industry standard low-fidelity wireframing t...
ثالثاً: كيف ترسم wireframe بنفسك؟
لتستطيع ذلك يجب أن تعرف مكونات شاشة الجوال، إليك بعض المعلومات العامة عنها
١- يوجد شاشة اسمها Splash screen وهي التي تظهر عند فتح التطبيق
٢- قائمة الرئيسية تكون جانبية Side Bar أو سفلية Tab Bar
٣- البيانات المتكررة تظهر في List أو Grids أو Cards
لتستطيع ذلك يجب أن تعرف مكونات شاشة الجوال، إليك بعض المعلومات العامة عنها
١- يوجد شاشة اسمها Splash screen وهي التي تظهر عند فتح التطبيق
٢- قائمة الرئيسية تكون جانبية Side Bar أو سفلية Tab Bar
٣- البيانات المتكررة تظهر في List أو Grids أو Cards
٤- هناك حقول تُستخدم في النماذج مثل الحقل النصي Text ومربع الخيار CheckBox والاختيار من متعدد Radio والقوائم المنسدلة Select والأزرار Buttons وغيرها من الحقول التي تستخدم لجمع المعلومات من المستخدم، إذا فتحت أي أداة رسم Wireframe فستجد أيقونات هذه المكونات وستفهمها بالتأكيد
رابعاً: كيف تجعل ال Wireframe تفاعلي؟
تحويل الوايرفريم إلى شيئ تفاعلي هو إحدى مراحل نمذجة ومحاكاة الفكرة، حيث نقوم بربط كل شاشة وكل رابط / زر / جزء من البيانات بالشاشة التي سينتقل إليها المستخدم فعلياً عند الضغط عليها، وبالتالي يُمكنك عرض فكرتك على المستثمرين وكأنها شيئ واقعي
تحويل الوايرفريم إلى شيئ تفاعلي هو إحدى مراحل نمذجة ومحاكاة الفكرة، حيث نقوم بربط كل شاشة وكل رابط / زر / جزء من البيانات بالشاشة التي سينتقل إليها المستخدم فعلياً عند الضغط عليها، وبالتالي يُمكنك عرض فكرتك على المستثمرين وكأنها شيئ واقعي
هذا مثال لكيف يكون الشكل العام لشاشات تطبيق بعد إتمام ربطه وتحويله إلى وايرفريم تفاعلي Prototype ،، الأمر بسيط ،، يمكنك إنجازه بنفسك أو الاستعانة بتقني متخصص لتنفيذها
جاري تحميل الاقتراحات...