الصفحة الرئيسية » UI / UX » هذا 500 بايت Javascript يمكن التنبؤ حركات المؤشر المستخدم

    هذا 500 بايت Javascript يمكن التنبؤ حركات المؤشر المستخدم

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

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

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

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

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

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

    وهنا ل مثال مقتطف من العرض قبل الأوان:

     premonish.onIntent ((el، trust) => // el هو عنصر DOM المتوقع // trust هو النتيجة من 0-1 حول مدى ثقتنا في هذا التوقع.)؛ 

    ال onIntent () يتم خبز الطريقة في Premonish ويسمى كلما لاحظت المكتبة مستخدم يتحرك نحو بعض العناصر.

    يمكنك أيضا استخدام طريقة أخرى, onMouseMove (), الذي يعمل في كل مرة يغير المؤشر وظائف X / Y على الشاشة. وبهذه الطريقة يمكنك معرفة كيفية حساب Premonish على احتمالات نية المستخدم.

    يمكنك العثور على مجموعة من المعلومات في GitHub repo الرئيسية التي يتضمن مقتطفات شفرة بسيطة لتبدأ. التهيئة يتطلب فقط سلسلة من المحددات أو عناصر DOM يجب أن تكون مستهدفة.

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

    تفحص ال عرض حي لنرى كيف يعمل كل هذا ولرؤية “وضع التصحيح” حيث يمكنك مشاهدة كيفية عمل خوارزمية التنبؤ في الوقت الفعلي.

    يمكنك أيضًا مشاركة أفكارك والتعبير عن الشكر للمبدع Matthew Conlen على حسابه على Twittermathisonian.