نمونه های اولیه تعاملی را در Framer طراحی کنید

محتوا

• وارد کردن از Sketch
• لایه های ماسک و آواتار ایجاد کنید
• حالت ها را تعریف کنید
• تحریک و تحریک بین ایالات
• آن را روی یک دستگاه تلفن همراه واقعی امتحان کنید

استدلال در مورد نمونه سازی طراحی جدید نیست - این همان کل اخبار مربوط به طراحی در مرورگر است. وقتی یک طرح را در زمینه واقعی آن می بینید ، کاملاً متفاوت است. وقتی مجبور نباشید در مورد عملکرد و احساس یک رابط تصور کنید بهتر تصمیم می گیرید. به نظر می رسد این کار اضافی باشد ، اما بینشی که می توانید با دیدن کار طراحی خود کسب کنید بسیار ارزشمند است.

Framer یک ابزار نمونه سازی جدید مبتنی بر کد است. می توانید درست مثل معمول در Sketch (یا Photoshop) ماکت ایجاد کنید و آنها را به Framer وارد کنید. سپس ، کمی CoffeeScript بنویسید و می توانید کارهای زیادی انجام دهید.

من قصد دارم اصول نمونه سازی را در Framer با استفاده از نمونه نمونه اولیه برنامه iOS با دو نمایش به شما آموزش دهم: نمای نمای و نمای بزرگنمایی تصویر آواتار کاربر. ما نمونه اولیه نحوه باز و بسته شدن نمای عکس گسترده را نمونه برداری خواهیم کرد و همچنین آن را متحرک سازی خواهیم کرد. نسخه ی نمایشی آنلاین را در اینجا مشاهده کنید (برای دیدن کد منبع ، فقط روی نماد گوشه بالا سمت چپ کلیک کنید). همچنین به نسخه آزمایشی Framer نیاز دارید که می توانید آن را در framerjs.com دریافت کنید.

وارد کردن از Sketch

اولین قدم وارد کردن لایه ها از Sketch به Framer است. در حالی که طرح در Sketch باز است ، کافی است بر روی دکمه Import در Framer کلیک کنید و در کادر گفتگوی زیر پرونده صحیح را انتخاب کنید. Framer به طور خودکار تصاویر را از هر لایه وارد کرده و از طریق کدی مانند این در دسترس قرار می دهد:

sketch = Framer.Importer.load "import / profile"

برای دسترسی به لایه های وارد شده از آن متغیر استفاده کنید. به عنوان مثال ، برای ارجاع لایه ای با نام "محتوا" در پرونده Sketch ، sketch.content را در Framer تایپ می کنید.

لایه های ماسک و آواتار ایجاد کنید

عملکرد اصلی این نمونه اولیه این است که تصویر آواتار را هنگام ضربه زدن گسترش دهید و سپس هنگام ضربه زدن دوباره آن را ببندید. ابتدا ، ما دو لایه ماسک ایجاد خواهیم کرد - یک ماسک تو در تو ، یا یک ماسک درون یک ماسک دیگر. ما هر دو ماسک را به صورت یکجا متحرک می کنیم تا یک اثر باز و بسته زیبا و ظریف ایجاد کنیم. لایه headerMask وقتی عکس آواتار را بسط داد به یک مستطیل بریده می شود و لایه ماسک آن را به یک دایره کوچک در نمای نمای برش می دهد.

لایه headerMask را به این صورت ایجاد کنید:

headerMask = عرض لایه جدید: عرض صفحه ، ارتفاع: 800 پس زمینه رنگ: "شفاف"

اولین خط کد ، لایه جدید را ایجاد و نامگذاری می کند. سپس ، با استفاده از نحو تورفتگی CoffeeScript ، عرض ، ارتفاع و خصوصیات پس زمینه را تنظیم می کنیم. ما از پس زمینه شفاف استفاده خواهیم کرد تا هنگام گسترش عکس آواتار ، لایه های زیر نشان داده شوند.

بعد ، لایه ماسک را ایجاد کنید:

mask = new عرض لایه: 1000 ، ارتفاع: 1000 پس زمینه رنگ: "شفاف" ، حاشیه Radius: 500 سال: sketch.header.height - 100 superLayer: header مقیاس ماسک: 0.2 ، مبدا Y: 0

ما یک لایه جدید ایجاد می کنیم و خصوصیات را به همان روش تنظیم می کنیم. مرز بزرگRadius این لایه را به صورت دایره در می آورد. ما لایه ماسک را طوری قرار می دهیم که با لایه هدر ، که از Sketch وارد شده است ، همپوشانی داشته باشد. ما همچنین به 20 درصد یا 0.2 می رسیم. یک مبدأ صفر نقطه لنگر یا ثبت تصویر را در لبه بالایی تنظیم می کند.

ویژگی باقی مانده ، superLayer ، لایه headerMask را که به عنوان والد این لایه جدید ایجاد کرده ایم ، تنظیم می کند. این نحوه پوشش دادن در Framer است. به سادگی خاصیت superLayer را تنظیم کنید و لایه والد کودک را مخفی می کند.

بعد ، باید گرافیک آواتار را ایجاد کرده و درون آن ماسک های جدید قرار دهیم. برای بزرگنمایی و متحرک سازی مرزهای برش ، لایه آواتار را به صورت دستی ایجاد می کنیم. یک عکس را در زیر پوشه 'images' پوشه پروژه کپی کنید. سپس با استفاده از آن تصویر یک لایه ایجاد کنید:

آواتار = تصویر لایه جدید: "images / avatar.png" عرض: mask.width ، قد: mask.height superLayer: mask ، force2d: true

توجه کنید که ما superLayer آواتار را لایه ماسک قرار می دهیم. اکنون هر دو درون headerMask قرار گرفته اند. ما همچنین عرض و ارتفاع را تنظیم می کنیم تا تصویر ناحیه پوشیده شده را کاملاً پر کند.

در آخر ، ما یک متغیر برای ذخیره موقعیت Y ماسکی که برای انیمیشن استفاده خواهیم کرد ، ایجاد خواهیم کرد. ما مرکز آن را به صورت افقی قرار می دهیم ، زیرا بزرگتر از صفحه است.

maskY = mask.y mask.centerX ()

حالت ها را تعریف کنید

اولین قدم در ایجاد یک انیمیشن ، تعریف حالت های آغازین و پایان است. در Framer ، حالت ها مانند قاب های کلیدی است که با کد نوشته شده اند. دولت فقط مجموعه ای از خواص است. هر لایه یک حالت پیش فرض دارد. برای این نمونه اولیه ، این پیش فرض به عنوان نقطه شروع انیمیشن عمل می کند ، بنابراین فقط باید برای هر لایه حالت دوم تعیین کنیم.

نحو حالت ها بسیار ساده است. به لایه ارجاع دهید ، از روش layer.states.add () استفاده کنید و سپس خصوصیاتی را که باید وارد شوند لیست کنید.

sketch.content.states.add (پنهان کردن: {opacity: 0}) headerMask.states.add (حرکت: {y: 120}) mask.states.add (رشد: {مقیاس: 1.1 ، y: maskY - 420})

حالت دوم برای لایه محتوا ، که از Sketch وارد شده و حاوی تمام عناصر صفحه نمایه دیگر است ، باید کاملاً شفاف باشد. به این ترتیب ، وقتی آواتار گسترش یابد ، پس زمینه مشکی خواهیم داشت و نمادها و عناصر وارد شده باقیمانده نشان داده می شوند.

خط دوم کد یک حالت برای headerMask ایجاد می کند ، که به سادگی آن را به موقعیت Y 120 تغییر می دهد. این به شما اجازه می دهد هنگام بزرگ شدن عکس آواتار ، عنوان و دکمه بستن در بالای صفحه نشان داده شوند. همچنین باعث کاهش مرزهای برش عکس آواتار می شود.

سرانجام ، یک حالت جدید برای لایه ماسک ، آن را با استفاده از متغیر maskY که قبلاً ایجاد کردیم ، مقیاس بندی کرده و بالا می برد. از آنجا که مبدا Y (یا نقطه لنگر) لایه ماسک لبه بالایی آن است ، باید آن را 420 پیکسل به سمت بالا حرکت دهیم تا مرکز تصویر قابل مشاهده باشد.

تحریک و تحریک بین ایالات

برای متحرک سازی بین حالت های پیش فرض و حالات جدیدی که به تازگی ایجاد کردیم ، فقط به چهار خط کد دیگر نیاز داریم. ما یک کنترل کننده کلیک را روی لایه آواتار تنظیم خواهیم کرد. وقتی کاربری آن را روی صفحه نمایه لمس می کند ، با حالت دوچرخه سواری به نمای بزرگتر منتقل می شویم. وقتی دوباره روی آن ضربه زد ، ما به حالت های پیش فرض برمی گردیم تا دوباره به یک دایره کوچک برگردد. همان خطوط کد هر دو تعامل را کنترل می کنند:

avatar.on Events.Click ، ​​-> headerMask.states.next () mask.states.next () sketch.content.states.next ()

خط اول این بلوک کنترل کننده کلیک روی لایه آواتار را تنظیم می کند. هر زمان که به آن ضربه زد ، مهم نیست که چگونه برش داده شده یا اندازه آن چه باشد ، دستورات بعدی اجرا می شوند.

سپس ما به سادگی به هر لایه مراجعه می کنیم و برای تغییر وضعیت از روش layer.states.next () استفاده می کنیم. وقتی از () layer.states.next استفاده می کنید ، Framer از تنظیمات پیش فرض انیمیشن داخلی استفاده می کند. این بسیار راحت است ، اما شما می توانید با ظرافت منحنی های انیمیشن ، انیمیشن های بهتری تهیه کنید.

هنگام استفاده از حالاتی مانند اینجا ، به راحتی می توانید هر منحنی انیمیشن را با استفاده از خاصیت layer.states.animationOptions جداگانه تغییر دهید. فقط با سه تنظیم جزئی ، انیمیشن کاملاً متفاوت است:

sketch.content.states.animationOptions = منحنی: "سهولت" ، زمان: 0.3 headerMask.states.animationOptions = منحنی: "بهار (150 ، 20 ، 0)" mask.states.animationOptions = منحنی: "بهار (300 ، 30 ، 0) "

برای لایه محتوا که کم کم محو می شود ، ما یک انحنای ساده از پیش تعیین شده ، سهولت را انتخاب می کنیم و مدت زمان انیمیشن را روی 0.3 تنظیم می کنیم تا بسیار سریع باشد.

برای لایه های headerMask و mask ، از یک منحنی فنر استفاده کنید. برای اهداف ما ، فقط باید بدانید که مقادیر منحنی فنر سرعت و گزاف گویی انیمیشن را تغییر می دهد. مقادیر مربوط به لایه mask ، انیمیشن آن را بسیار سریعتر از headerMask و محتوا می کند. برای جزئیات بیشتر در مورد تنظیمات منحنی فنر ، به اسناد Framer در framerjs.com/docs مراجعه کنید.

آن را روی یک دستگاه تلفن همراه واقعی امتحان کنید

دیدن طرح روی دستگاه واقعی بسیار م thanثرتر از استفاده از شبیه ساز است و مزایای آن را در کار خود خواهید دید. Framer شامل یک ویژگی آینه است که یک سرور داخلی است که از طریق شبکه محلی شما به نمونه اولیه شما URL ارائه می دهد. به سادگی با استفاده از دستگاه خود از URL بازدید کنید.

شما همه چیزهایی را که باید بدانید برای نمونه سازی اولیه طرح های خود در Framer یاد گرفته اید. منتظر چی هستی؟

کلمات: جارود دریزدیل

Jarrod Drysdale نویسنده ، مشاور طراحی ، سازنده محصولات دیجیتال است. این مقاله در اصل در شماره 270 مجله نت منتشر شده است.

این را دوست داشتید؟ اینها رو بخون!

• نمونه های اولیه قابل کلیک و زنده را در Sketch ایجاد کنید
• نحوه راه اندازی وبلاگ
• بهترین ویرایشگرهای عکس