كيف احصل على نفسك بدأت مع UXPin
بينما ننتقل إلى عالم تصميم الهاتف المحمول وتصميم التطبيق والتصميم سريع الاستجابة ، فقد كان هناك تركيز متزايد على تجربة المستخدم (UX) وإطارات الأسلاك ، والنماذج الأولية التفاعلية والنماذج بالأحجام الطبيعية. هناك طن من الأدوات هناك تهدف إلى هذا المتخصصة وهم يديرون سلسلة كاملة من الحمولات العملاقة المحملة بالمظهر لتتفرق وبالكاد مفيدة. واحدة من الأدوات التي لفتت نظري هو UXPin ببساطة لأنه تم تطويره من قبل المصممين للمصممين.
قبل أن نمضي قدما … التحذير. إذا كانت شركتك عبارة عن منظمة تفضل امتلاك البرامج ، فإن UXPin لا يناسبك. يتم تنفيذ جميع الأعمال المنجزة في هذا التطبيق في المتصفح ويتم حفظ المشاريع التي تحفظها في حسابك.
لبدء استخدام UXPin ، يمكنك تشغيل متصفح والتوجه إلى UXPin. من هنا ، يمكنك الاشتراك للحصول على إصدار تجريبي مجاني أو الترتيب للحصول على خطة شهرية بناءً على احتياجك المتوقع. عملية التسجيل سهلة للغاية ، وبمجرد الانتهاء من تعيين اسم المستخدم وكلمة المرور ، يكون جاهزًا للبدء.
كيف تبدأ مشروع في UXPin
عند تسجيل الدخول ، ستصل إلى لوحة البيانات ، ومن هنا يمكنك إنشاء إطار سلكي جديد أو مشروع جوال جديد أو مشروع تصميم الويب سريع الاستجابة. هناك أيضًا مكونات إضافية لـ UXPin تسمح لك بإحضار مشاريع Photoshop أو Sketch. لهذا كيف أنا ذاهب لإنشاء لافتة مع بعض النص وإضافة زر البريد الإلكتروني إلى لافتة. لإنجاز هذا ، اخترت إنشاء wireframe جديد.
كيفية استخدام واجهة UXPin
يتم تقسيم Design Design إلى أربعة مناطق. في المنطقة السوداء على اليسار ، توجد سلسلة من الأدوات التي تتيح لك الرجوع إلى لوحة المعلومات ، وفتح العناصر التي ستستخدمها ، وفتح لوحة Smart Elements ، والبحث عن العناصر ، وإضافة ملاحظات إلى الصفحة وإضافة أعضاء الفريق. في الجزء السفلي ، هناك زر يفتح برنامجًا تعليميًا قصيرًا ، وآخر يتيح لك الوصول إلى حسابك والآخر يصل إلى الأسئلة الشائعة ، دعنا نسأل الأسئلة وحتى تقديم التعليقات.
في المنطقة الزرقاء على طول القمة توجد سلسلة من الأدوات والخصائص. تسمح لك الأزرار المظلمة الموجودة في الجانب الأيسر بتكرار التصميم وضبط إعدادات المشروع ومشاركة الصفحة والقيام بمحاكاة داخل الصفحة.
لوحة Elements هي المكان الذي تلتقط فيه القطع والقطع الخاصة بسطح التصميم ، واسم مشروعك وأضف أو أزل صفحات.
تعتبر مكتبة The Elements مفاجأة سارة لمصممي UX. يتيح لك هذا الخيار أن تختار من 30 مكتبة تتراوح من iOS إلى Android Lolipop بالإضافة إلى إمكانية الوصول إلى عناصر Bootstrap و Foundation بالإضافة إلى رموز Font Awesome ورموز Gesture للجوال ومجموعة من الأدوات الاجتماعية.
04 من 09كيفية إضافة عنصر إلى صفحة UXPin
للبدء ، قمت بسحب عنصر Box إلى سطح التصميم وعندما أقوم بتحرير الماوس ، فإن لوحة الخصائص يفتح. يتيح لك زر الخصائص تسمية العنصر وتعيين قيم ارتفاع وموقع العرض للعنصر. يمكنك أيضًا إضافة مساحة إلى العنصر ، وتقريب الزوايا وضبط تعتيمها. يؤدي النقر فوق الزر "لون الخلفية" إلى فتح منتقي الألوان RGBA.
يمكنك أيضًا تعيين خط وحدود ونمط للعنصر المحدد. يمنحك Lightning Bolt القدرة على إضافة التفاعلية إلى عنصر محدد.
05 من 09كيفية إضافة وتنسيق النص في UXPin
لإضافة نص ، اسحب عنصر النص إلى سطح التصميم وأدخل النص الخاص بك. انقر فوق خاصية النص زر لفتح خصائص الخط وتنسيق النص الخاص بك. إذا كنت بحاجة إلى نص من النص الوهمي ، فأضف عنصرًا نصيًا وانقر فوق GORERATE LOREM IPSUM زر في خصائص الخط.
06 من 09كيفية إضافة صورة لصفحة UXPin
هناك طريقتان لإنجاز هذه المهمة. يمكنك استعمال ال أداة الصورة في شريط الأدوات ، أضف عنصر صورة من المكتبة أو قم ببساطة بسحب وإسقاط صورة من سطح المكتب إلى العنصر على سطح التصميم كما هو موضح أعلاه.
07 من 09كيفية إضافة زر إلى صفحة UXPin
على الرغم من وجود عنصر زر ، يدخل " زر " داخل ال بحث المنطقة ، كما هو موضح أعلاه ، يفتح جميع الأزرار الموجودة في جميع المكتبات. اسحب الواحد الذي يعمل من أجلك على سطح التصميم واستخدم الخصائص لتغيير اللون والخط وحتى نصف قطر الحدود. لتغيير النص داخل الزر ، انقر مرة واحدة على النص وأدخل النص الجديد.
08 من 09كيفية إضافة التفاعل إلى صفحة UXPin
هذه ليست معقدة كما قد تظهر لأول مرة. بالنسبة إلى إدخال البريد الإلكتروني ، أضفت عنصر إدخال ، وقمت بتغيير حجمه ، ودخلت النص ، وقمت بتنسيق النص. مع تحديد عنصر الإدخال انقر فوق الزر "خصائص" وعندما خصائص العنصر تظهر انقر فوق رؤية button- the eyeball - في الزاوية العلوية اليمنى من اللوحة.
حدد الزر وانقر فوق زر التفاعلات - البرق البرق في الخصائص. عند فتح لوحة Interactions ، حدد New Interaction. حدد "انقر" من "بدء المشغل". في منطقة التصرف اختر Show Element. سيتم سؤالك الآن عن العنصر الذي سيتم إظهاره. انقر مرة واحدة على موقع البندقية وانقر على عنصر الإدخال. مع تحديد العنصر ، يمكنك الآن تحديد ما إذا كنت تريد تحريك العنصر أم لا. في هذه الحالة ، قررت عرض مربع الإدخال بسهولة ، وذهبت بقيمة القيمة الافتراضية 300ms.
أرغب أيضًا في تحريك الزر حوالي 65 بكسل إلى اليمين عند النقر عليه. لقد اخترت الزر ، وفتحت لوحة Interactions وحددت تفاعل جديد. لقد استخدمت هذه الإعدادات:
- اثار: انقر
- عمل: يتحرك بواسطة
- نقل الاتجاه: 65 بكسل على المحور x
- حيوية: الخطي
- المدة الزمنية: 300 مللي ثانية
لإزالة تفاعل ، حدد العنصر وافتح لوحة Interactions. حدد التفاعل في اللوحة وانقر فوق سلة المهملات لحذفها.
09 من 09كيف لاختبار صفحتك في UXPin
نظرًا لحقيقة أنك تعمل في المتصفح ، فإن الاختبار بسيط جدًا. انقر على تصميم محاكاة زر. ستفتح الصفحة في المتصفح ويمكنك اختبارها. سيكون هناك أيضًا لوحة مضافة إلى الجانب الأيسر من الصفحة تسمح بالتعليقات ، وخريطة الموقع إذا كانت هناك صفحات متعددة ، واختبار قابلية الاستخدام ، ومشاركة مباشرة ، وتحرير ، والعودة إلى لوحة البيانات.
يوجد في أسفل الصفحة لوحة صغيرة أخرى تتيح لك إظهار العناصر التفاعلية وإظهار أو إخفاء التعليقات ومشاركة رابط المشروع مع الآخرين.
