البومة | دليلك لفهم منصة ProtoPie لصناعة و تجسيد تصاميم الـ UI/UX بإحترافية و صناعة نماذج Prototype تفاعلية البومة

دليلك لفهم منصة ProtoPie لصناعة و تجسيد تصاميم الـ UI/UX بإحترافية و صناعة نماذج Prototype تفاعلية

aqweeb 0
السلام عليكم ، لربما تتذكرون مقالنا حول منصة Adobe XD و قدراتها على توفير منصة متكاملة من أجل صناعة نماذج أولية للأعمال او Prototype، و كذا قدراتها على صناعة واجهات الإستخدام UI/UX بإحترافية، لكنها كذلك ليست الوحيدة، و ربما نجد منصات أفضل و توفر لنا خدمات أفضل كذلك . 
اليوم سنقترح عليك من جهة أخرى واحدة من أقوى المنصات المخصصة لصناعة نماذج الأعمال و الـ Prototype بفعالية أكبر، مع توفيرها كل الخصائص اللازمة من أجل إستخراج UI/UX قوية و سهلة الإستخدام، سنراجع معك في هذا المقال كل صغيرة و كبيرة حول خدمة ProtoPie و كيف تستغلها كذلك لصالحك . 

Hello, maybe you all remember our previous article about Adobe XD and how the software offer a great platform to make prototype and UI/UX design and Mobile/Website user interfaces, but Adobe XD isn’t the only platform capable to do so, and there’s some great alternatives out there maybe even better than Adobe XD . 
today, we will review one of the greatest platform that will help us create mobile prototype and UI/UX with more flexibility and better UX, and we will explain throw this article all about ProtoPie platform .

دليلك لفهم منصة ProtoPie لصناعة و تجسيد تصاميم الـ UI/UX بإحترافية

لما خدمة ProtoPie ؟ 

اخبرني صديقي، هل بحثت يوما عن منصة متكاملة تسمح لك بصناعة نماذج لتطبيقاتك على الموبايل و توفير واجهة و تجربة إستخدام مبهرة مع إمكانية تجريبها حقا على أجهزة حقيقية دون الحاجة لبرمجتها بكل سهولة ؟ 
تأتي منصة ProtoPie لتسهل علينا هذه العمليات كلها و تقدم لنا منصة واحدة تجمع كل شيئ، فمن خلالها يمكنك صناعة نماذج و واجهات إستخدام لتطبيقات الموبايل دون الحاجة لأي خبرة في البرمجة، و تذكر فقط واجهات و ليس أكواد، مع أمكانية تحريكها و إضافة انيميشن و جعله حية و متفاعلة، حتى تستطيع رؤية تطبيقك للموبايل او تطبيق العميل عن كثب و بشكل أفضل، ليس هذا فقط، بل توفر لك المنصة أيضا خدمة تجربة هذه الواجهات على أجهزة حقيقية كما لو كان تطبيقات حيا، في حين انه مجرد نموذج فقط . 
تأتي خدمة ProtoPie بمبادئ جد بسيطة في التعلم و كذا التطبيق، فأنت لا تحتاج الى اي خبرات قبلية لممارستها او البدئ في صناعة نماذجك، فحتى واجهة إستخدام البرنامج بسيطة للغاية و واضحة شبيهة بباقي برامج صناعة الجرافيك كما هو متعارف لتسمح للمستخدم بصناعة ما يريد باحترافية و سهولة . 
و نعم، لا تحتاج إلى اي خبرات برمجية، فخدمة ProtoPie تُمكنك من تجسيد التفاعلات و الأنيميشن لخلق UX احترافي دون الحاجة الى اي مهارات برمجية او تكويد، فنلدع جزء التكويد للمبرمجين، اما بالنسبة للمصممين، فيمكنك خلق واجهات دون الحاجة لكتابة كود واحد إطلاقا ! 
سنتركك قليلا مع الفيديو التالي الذي سيساعدك على فهم أكبر لخدمة ProtoPie و كيفية عملها : 

Why using ProtoPie ؟ 
Have you ever wanted a full and ideal platform that provide all the tools to create beautiful interfaces and user experiences for mobile apps easily with trying it live in your mobile and without coding at all ?
Well, ProtoPie is give us what we want, you can do all what we said in one single platform, you can use ProtoPie to create UI/UX for mobile with many options like add animations and triggers and click and all that stuff ( we will walk through all that in this article ), even you can see your UI/UX live in a real device, and yes without coding, ProtoPie can do that . 
ProtoPie come with a really easy principles in learning and executing as well, you don’t need any previous experiences to start using ProtoPie, even the software interface is so easy and similar to graphic software and platforms we used before like Adobe Photoshop, easy to use and simple . 
to close you more from the idea of ProtoPie, this video show us a little bit about the platform :  



[youtube https://www.youtube.com/watch?v=DO8U9vWjTi8]

– تشغيل النماذج على الأجهزة بكل سهولة : 

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

– Try your work live in any Device : 

And we don’t see that a lot in platforms like ProtoPie, even when you finished your prototype and everything, you keep asking yourself : ” how this will look like in a real device ? “, maybe you try to add your work in a MockUp or something, but you will not face the truth of your real prototype until it’s completely done . 
ProtoPie will help you get throw this dilemma, the platform offer us an option to try our prototype in a real devices ( Android , IOS ..), not only seeing it, but touching it, and interacting with it and try all the functions of our project,  and yes, without writing any single line of code .  

– جعل النماذج متفاعلة مع النقر او اللمس بمختلف أنواعه : 

دليلك لفهم منصة ProtoPie لصناعة و تجسيد تصاميم الـ UI/UX بإحترافية


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

– Interact with your designs  : 

One of the greatest things at all in ProtoPie platform, you can easily make your dead buttons and layout come to life, touching a button will trigger an action, that’s basically the main principle of interacting with your designs, and absolutely without coding at all . 
Adding triggers and interacting with your designs are not difficult at all, as we said before, ProtoPie platform offer us a really easy to use interface, not only this, you can also walk through all those triggers to implement all your necessary interaction in your design, like Gesture and Sensor who help us interact with our design through  Clicking and Touching and scrolling as well . 


-واجهة البرنامج : 


دليلك لفهم منصة ProtoPie لصناعة و تجسيد تصاميم الـ UI/UX بإحترافية


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

– ProtoPie Interface : 

I’ll be honest with you, it doesn’t matter really all this stuff and benefits the ProtoPie come with if the software itself was hard to use and difficult, then you have to watch a lot of courses and  videos so you can master the software, and that’s mean more work for you . 
the creators of ProtoPie knows that very well, so they offer us a beautiful and easy to use software, the software come with UI we seen it a lot in most of the graphical platforms too, especially in Adobe, if you are familiar with Adobe software like Photoshop, Illustrator and even Adobe XD, then you are in safe hands, if not, don’t worry, just open the software, take a quick look on all the options, and Voila !  the software is obvious and easy . 

– أهم التقنيات الجديدة التي يوفرها لك البرنامج : 

سنقوم في الفقرة التالية بطرح كل التقنيات الممكنة او على الأقل بعضها التي يمكنك إستخدامها من أجل صناعة  واجهات جذابة و إحترافية،و بالطبع إستعراض عضلات هذا البرنامج القوي و المنصة الصديقة : 
– إضافة الـ Scroll و خاصية النزول في النموذج من أجل تصفح كل محتوايات الصفحة . 
– إضافة خاصية التنقل بين الصفحات او Paging من أجل توفير تنقل سلس بين صفحات التطبيقات و الأكتيفيتي الخاصة به .
– خاصية One Time Trigger، و هي خاصية تسمح لك بجعل اي عنصر يتحرك لوقت محدد اثناء النقر على عنصر اخر .
– النقر المزدوج و الـ Double Tap من أجل توفير خواص لعناصر محددة في النموذج عند النقر عليها مرتين بدل مرة واحدة .
– خاصية السحب في الإتجاهات كلها، إذ يمكنك من خلال هذه الخاصية توفير او إطلاق حركة معينة اثناء السحب في احد الإتجاهات . 
– النقر المتواصل او اللمس المتواصل، و هو حين تلمس عنصرا معينا في الصفحة لمدة معينة، النماذج تدعم ذلك أيضا . 
– خاصية توسيع العناصر او الـ Pinch، و هي حين نقوم بسحب عنصر من الزوايا الخاصة به، مثلا اثناء محاولتنا تكبير صورة او شيئ من هذا القبيل، يمكنك ان تجعل النماذج الخاصة بك تدعم ذلك أيضا . 
– دعم قارئ للصوتيات و الفيديو في نماذج التطبيقات و واجهات الإستخدام الخاصة بها، إذ يمكنك إظهار فيديو او ملف صوتي و التحكم الكامل فيه . 
 و غيرها من الخواص الأخرى التي ستجدها كلها في الصفحة التالية : 

https://www.protopie.io/learn/basics/

يمكنك كذلك ان تستخدم البرنامج و تقوم بتحميله من هنا : 

https://www.protopie.io/

– The Best new technologies in ProtoPie : 

as we mentioned before, the ProtoPie platform come with a lot of new technologies in designin UI/UX designs, hoewever, the most amazing part about ProtoPie is the triggers and the interactions they offer, and here is some of the great interaction that you will find in the platform : 
– Add the scroll option to your design, so that you can scroll down and up to see how full page will look like . 
– Add Paging to your design: pagging well help us navigate through multiple pages without changing the activity, we see that a lot in the first page of apps or in the documentation, however, you can implement that without coding using the platform .  
– One Time Trigger, a good option to animate an element when clicking on it . 
– Double Tape, yes, you can add animation or any action when double clicking on an element, and don’t forget,  you will not write any single line of code . 
– Pinching, is when you drag an  element form its corners so you can control its size, you can add that as well in the design . 
– Embed videos, sounds and all the medias you want, yes you can do that too, easily and of course without coding . 
you can find all that and all the technologies used in ProtoPie here : 

https://www.protopie.io/learn/basics/

الكاتب

مواضيع متعلقة

التعليقات مغلقة