إنشاء نماذج بالحجم الطبيعي للأجهزة في المستعرض باستخدام DeviceMock

يمكنك العثور على العديد من النماذج المجانية للأجهزة على الإنترنت ، بدءًا من ملفات PSD إلى ملفات Sketch. ولكن ، ماذا لو كنت تستطيع بسرعة بناء نماذج بالأحجام الطبيعية الجهاز على ذبابة في متصفحك?

حسنًا ، بفضل الأشخاص في rm-labo ، يمكنك! البرنامج المساعد jQuery المجاني الخاص به ، DeviceMock.js ، يتيح لك لف جهاز متجه حول أي عنصر صفحة, باستخدام جافا سكريبت و SVGs بسيطة.

كيف يعمل هذا بالضبط?

حسنا ، تحتاج أولا نسخة من مسج و إصدار من المكون الإضافي DeviceMock من GitHub. يأتي ذلك مع ملف JS وملف CSS وبعض ملفات SVG لإنشاء الأجهزة الفعلية.

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

هذا البرنامج المساعد يدعم خمسة أنواع مختلفة من الأجهزة:

1. متصفح الإنترنت
2. الهاتف الذكي
3. لوح
4. سطح المكتب
5. حاسوب محمول

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

كل هذه المتجهات سهلة الإضافة وتعمل فيها كل متصفح مع دعم SVG.

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

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

منحت هذه المكتبة لن تكون مفيدة للجميع ولكن هل يحل مشكلة ملائمة أن العديد من المطورين UI / UX تواجه عند النماذج.

لمعرفة المزيد ، يرجى زيارة جيثب الصفحة أو تحقق من موقع مباشر لعرض تجريبي نشط.