יצירת התקן Mockups בדפדפן עם

אתה יכול למצוא טונות של mockups מכשיר בחינם באינטרנט, החל PSDs לסקיצות קבצים. אבל, מה אם אתה יכול במהירות לבנות התקן mockups ב- the-fly בדפדפן שלך?

ובכן, תודה לאנשים ב- rm-labo, אתה יכול! תוסף חינם שלהם jQuery, DeviceMock.js, מאפשר לך לעטוף מכשיר וקטור סביב כל רכיב הדף, באמצעות JavaScript פשוט SVGs.

אז, איך בדיוק זה עובד?

ובכן, תחילה עליך עותק של jQuery ו גירסה של תוסף DeviceMock מ GitHub. זה מגיע עם קובץ JS, קובץ CSS, וכמה קבצי SVG כדי ליצור את המכשירים בפועל.

אתה יכול לכוון כל סוג של אלמנט בדף, מתמונה פשוטה אל div שלם, או אפילו אלמנט מוטבע כגון iframe. זה אומר שאתה יכול אפילו לבנות מיני דפדפן מגניב ממש באתר שלך עם iframe לדף אחר.

תוסף זה תומך חמישה סוגי מכשירים שוניםYou

1. דפדפן אינטרנט
2. טלפון חכם
3. טאבלט
4. שולחן העבודה
5. מחשב נייד

כל אלה mockups להשתמש סגנונות עיצוב שטוח שכן הם בנויים עם SVGs. ו, כולם נראים די דומה התקנים אפל, למשל את הטלפון החכם להיות שיבוט של ה- iPhone ואת צג שולחן העבודה נראה בולט כמו iMac.

כל אלה וקטורים קל להוסיף והם עובדים כל דפדפן עם תמיכה SVG.

אתה יכול אפילו שינוי מאפיינים כגון גודל mockup, נושא (לבן / שחור) ואת הכיוון (נוף לרוחב).

אם אתה משתמש בדפדפן mockup אתה יכול אפילו ציין כתובת אתר דמה בשורת הכתובת. זוהי דרך מהנה להוסיף עוד יותר התאמה אישית.

אמנם ספריה זו לא תהיה שימושית עבור כולם מלבד זה עושה לפתור בעיה נישה כי מפתחים רבים UI / UX הפנים כאשר prototyping.

למידע נוסף, בקר בכתובת דף GitHub או לבדוק את אתר חי עבור הדגמה פעילה.