كيف احصل على نفسك بدأت مع UXPin

01 من 09

كيف احصل على نفسك بدأت مع UXPin

قم بإعداد حساب على الصفحة الرئيسية لـ UXPin.

بينما ننتقل إلى عالم تصميم الهاتف المحمول وتصميم التطبيق والتصميم سريع الاستجابة ، فقد كان هناك تركيز متزايد على تجربة المستخدم (UX) وإطارات الأسلاك ، والنماذج الأولية التفاعلية والنماذج بالأحجام الطبيعية. هناك طن من الأدوات هناك تهدف إلى هذا المتخصصة وهم يديرون سلسلة كاملة من الحمولات العملاقة المحملة بالمظهر لتتفرق وبالكاد مفيدة. واحدة من الأدوات التي لفتت نظري هو UXPin ببساطة لأنه تم تطويره من قبل المصممين للمصممين.

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

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

02 من 09

كيف تبدأ مشروع في UXPin

يمكنك الاختيار من بين مجموعة متنوعة من أنواع المشاريع.

عند تسجيل الدخول ، ستصل إلى لوحة البيانات ، ومن هنا يمكنك إنشاء إطار سلكي جديد أو مشروع جوال جديد أو مشروع تصميم الويب سريع الاستجابة. هناك أيضًا مكونات إضافية لـ UXPin تسمح لك بإحضار مشاريع Photoshop أو Sketch. لهذا كيف أنا ذاهب لإنشاء لافتة مع بعض النص وإضافة زر البريد الإلكتروني إلى لافتة. لإنجاز هذا ، اخترت إنشاء wireframe جديد.

03 من 09

كيفية استخدام واجهة UXPin

واجهة UXPin.

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

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

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

تعتبر مكتبة The Elements مفاجأة سارة لمصممي UX. يتيح لك هذا الخيار أن تختار من 30 مكتبة تتراوح من iOS إلى Android Lolipop بالإضافة إلى إمكانية الوصول إلى عناصر Bootstrap و Foundation بالإضافة إلى رموز Font Awesome ورموز Gesture للجوال ومجموعة من الأدوات الاجتماعية.

04 من 09

كيفية إضافة عنصر إلى صفحة UXPin

إضافة عنصر هو عملية السحب والإفلات.

للبدء ، قمت بسحب عنصر Box إلى سطح التصميم وعند فتح الماوس ، يتم فتح لوحة Properties . يتيح لك زر الخصائص تسمية العنصر وتعيين قيم ارتفاع وموقع العرض للعنصر. يمكنك أيضًا إضافة مساحة إلى العنصر ، وتقريب الزوايا وضبط تعتيمها. يؤدي النقر فوق الزر "لون الخلفية" إلى فتح منتقي الألوان RGBA.

يمكنك أيضًا تعيين خط وحدود ونمط للعنصر المحدد. يمنحك Lightning Bolt القدرة على إضافة التفاعلية إلى عنصر محدد.

05 من 09

كيفية إضافة وتنسيق النص في UXPin

إضافة نص إلى عنصر UXPin.

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

06 من 09

كيفية إضافة صورة لصفحة UXPin

هناك ثلاث طرق لإضافة صورة إلى صفحة.

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

07 من 09

كيفية إضافة زر إلى صفحة UXPin

يحتوي UXPin على مكتبة أزرار ممتدة.

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

08 من 09

كيفية إضافة التفاعل إلى صفحة UXPin

يتم إضافة التفاعل والحركة من خلال لوحة Interactions.

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

حدد الزر وانقر على زر Interactions (التفاعلات) - Lightning Bolt- في الخصائص. عند فتح لوحة Interactions ، حدد New Interaction. حدد "انقر" من "بدء المشغل". في منطقة التصرف اختر Show Element. سيتم سؤالك الآن عن العنصر الذي سيتم إظهاره. انقر مرة واحدة على موقع البندقية وانقر على عنصر الإدخال. مع تحديد العنصر ، يمكنك الآن تحديد ما إذا كنت تريد تحريك العنصر أم لا. في هذه الحالة ، قررت عرض مربع الإدخال بسهولة ، وذهبت بقيمة القيمة الافتراضية 300ms.

أرغب أيضًا في تحريك الزر حوالي 65 بكسل إلى اليمين عند النقر عليه. لقد اخترت الزر ، وفتحت لوحة Interactions وحددت التفاعل الجديد . لقد استخدمت هذه الإعدادات:

لإزالة تفاعل ، حدد العنصر وافتح لوحة Interactions. حدد التفاعل في اللوحة وانقر فوق سلة المهملات لحذفها.

09 من 09

كيف لاختبار صفحتك في UXPin

تختبر في المتصفح.

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

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