img

نمونه اولیه وب‌سایت خود را با Marvel ایجاد کنید.

/
/
/
ابزار Marvel یک ابزار آنلاین فوق العاده است که طراحان را قادر می سازد تا نمونه اولیه برنامه های موبایل و پروژه های وب خود را به راحتی در آن تولید کنند. اما بسیاری از ابزارهای دیگر آنلاین در دنیا مانند InVision، Framer، و Flinto وجود دارند، پس چرا ما آن ها را انتخاب نکنیم و از Marvel استفاده کنیم؟

ابزار Marvel دارای بسیاری از قابلیت های مفید از جمله همگام سازی با Dropbox می باشد؛ زمانی که شما در برنامه فتوشاپ کاری را انجام می دهید و Save را می زنید این نمونه اولیه از کار شما به صورت همزمان آپدیت می شود. اگر شما معمولاً با نقاشی کشیدن بر روی یک کاغذ پروژه خود را آغاز می کنید، می توانید این نقاشی های خود را از طریق یک برنامه موبایل به این ابزار اضافه کنید. انواع مختلفی از تغییرات و ژست ها در این ابزار وجود دارند که شما قادر خواهید بود تا تیم های بدون محدودیتی را ایجاد کنید تا این تیم ها بتوانند نمونه اولیه شما را ببینند و بر روی آن کار کنند. و در نهایت، شما می توانید ابزار Marvel را با دیگر ابزارها و دیگر برنامه های آنلاین مانند Sketch و Slack متصل کنید.
پس اگرچه تعداد زیادی از دیگر برنامه های ساخت نمونه اولیه در دنیا وجود دارند، شما در استفاده از ابزار Marvel راحت تر خواهید بود-این راحتی تنها برای ابزارها و قابلیت های خوب آن نیست، بلکه این برنامه رابط کاربری مناسبی نیز دارد. پس در این آموزش ما بخش سربرگ (head) را با استفاده از برنامه فتوشاپ از یک وب سایت طراحی می کنیم، و سپس طراحی خود را با استفاده از Marvel و ساختن یک منوی آبشاری متحرک برای آن و یک عنصر جعبه پروفایل جان می بخشیم. لینک مربوط به شروع کار با Marvel در زیر موجود است:
marvelapp.com/fhadchg

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

گام ۲- راه اندازی صفحه
در فتوشاپ، یک سند جدید را با اندازه ۱۹۲۰*۲۲۰۰ ایجاد کنید. سپس برخی از موارد را باید در آن برای خود تعیین کنید-در فتوشاپ ما به مسیر View > New Layout می رویم و تعداد ستون ها (column numbers) را بر روی ۱۲، پهنا (width) را بر روی ۷۰px و حفره (gutter) را بر روی ۳۰px قرار می دهیم. سپس جعبه Center Columns را که در پایین راهنما قرار گرفته بررسی کنید.

گام ۳- نوار پیمایش
انتخابی را از تصویر خود انجام دهید که کلیه سند را شامل شود و در حدود ۱۰۰ پیکسل ارتفاع داشته باشد. این ناحیه انتخاب شده را با سایه سبز رنگ پر کنید (این رنگ دارای کد رنگی #۸۸d34c است) یا هر رنگ دیگری که دوست دارید برای آن انتخاب کنید. سپس یک لوگوی مورد علاقه خود را در بالا سمت چپ تصویر قرار دهید و آن را در تعدادی از لینک های مسیریابی اضافه کنید، و یکی از آن ها را در لینک خانه (Home) قرار دهید. سپس یک لینک را به حساب کاربری/پروفایل خود در سمت راست اضافه کنید. ما در ادامه این آموزش از آن استفاده خواهیم کرد.

گام ۴- تصویر سربرگ و اولین منوی آبشاری
یک تصویر مناسب را برای سربرگ خود انتخاب کنید. از نقطه نظر طراحی، سعی کنید تصویری را انتخاب نمایید که کمی رنگ سبز را در خود داشته باشد، مثلاً ما تصویری که انتخاب کرده ایم دارای سرسبزی است. سپس با استفاده از یک ابزار انتخاب، اولین حالت از منوی آبشاری را برای آن با رنگ #۹۵e157 انتخاب کنید و میزان تاری (opacity) آن را به ۹۵ درصد کاهش دهید.

گام ۵- دومین حالت از منوی آبشاری
منوی آبشاری بعدی در زیر اولین منوی آبشاری ظاهر خواهد شد، اما ما این منوی دومی را در سمت راست منوی اولی قرار می دهیم. ما تنها قصد داریم چند تا از لینک ها را بر روی این منو قرار دهیم، پس نیازی نیست که این منوی دومی را بیشتر از ۴۲۰*۱۷۸px تنظیم کنیم. سپس ما به این منوی دومی یک رنگ سبز روشن تر (#aff177) را می دهیم و میزان opacity آن را به ۹۵ درصد کاهش می دهیم. حال در ادامه می توانید متن مربوط به لینک های خود را به آن اضافه کنید.

گام ۶- عنصر جعبه مشخصات (پروفایل)
در نوار پیمایش ما یک لینک برای پروفایل خودمان ساختیم، که تنها نام ما را با یک فلش کوچک بر روی خود داشت. زمانی که ما شروع به ایجاد کردن نمونه اولیه خود کردیم، بهتر است بر روی آن کلیک کنیم تا ببینیم که آیا زیبا است یا خیر. پس، ما قصد داریم که یک پروفایلی را ایجاد کنیم که زمانی که بر روی این فلش کلیک می شود، به صورت آبشاری ظاهر شود. با استفاده از ابزار انتخاب یک شکل مستطیلی را انتخاب کنید که اندازه آن در حدود ۳۳۰*۱۸۰px است. حال آن را با همان رنگ سبزی که ما برای نوار پیمایش استفاده کردیم، پر کنید.

گام ۷- پایان تنظیم جعبه پروفایل
این جعبه سبز رنگی را ایجاد کردید دقیقاً در زیر نوار پیمایش با فاصله تقریبی ۳۰px قرار دهید و با استفاده از ابزارهای تراز بندی آن را با متن “Hello….” تنظیم کنید. با استفاده از ابزار خودکار (Pen Tool)، یک فلش کوچک سبز رنگ یک طرفه را ایجاد کنید. سپس یک دایره سفید رنگ را ایجاد کنید و آن را با تصویر یک فرد (یا افراد) پر کنید، و تعدادی از اطلاعات دیگر مانند Sign Out و Edit Profile را به آن اضافه کنید و کار را تمام کنید.

گام ۸- یک پروژه را در Marvel ایجاد کنید.
حال ما می توانیم ابزار Marvel را باز کنیم (marvelapp.com) و یک حساب کاربری رایگان را در آن ایجاد کنیم. زمانی که این کار را انجام دادید، قادر خواهید بود تا یک پروژه جدید را با کلیک کردن بر روی دکمه سبز رنگ Create Project در سمت راست صفحه نمایش خود ایجاد کنید. فقط به یاد داشته باشید که شما تا زمانی که به صورت رایگان از این سایت استفاده می کنید تنها قادر به تولید یک پروژه در آن هستید و اگر بیش از یک پروژه را نیاز داشته باشید باید حق عضویت پرداخت کنید.

گام ۹- اندازه صفحه خود را انتخاب کنید
زمانی که ما یک پروژه جدید را ایجاد می کنیم یک انتخاب اندازه صفحه به ما داده می شود که به ما اجازه داده است تا اندازه های صفحه مختلفی را برای نمونه اولیه وب سایت خود انتخاب کنیم. البته این بستگی به این دارد که شما از چه پیکرنمایی استفاده می کنید و برای ما، این اندازه از نوع اندازه صفحه دسکتاپ می باشد. پس در این جا گزینه دسکتاپ را انتخاب کرده و یک نام را برای پروژه خود انتخاب کنید.

گام ۱۰- طرح‌های خود را کشیده و رها کنید.
زمانی که ما پروژه خود را در گام قبلی ایجاد کردیم، حال نوبت به این رسیده است که تعدادی از محتواها را به آن اضافه کنیم، که این محتواها همان طرح های ما (سه حالت) می باشند. شما می توانید این محتواها را از کامپیوتر خود، دراپ پاکس، گوگل درایو، یا بهتر از همه به وسیله درگ و دراپ کردن (کشیدن و رها کردن محتوا) در این پروژه، به آن اضافه نمایید. پس این سه تصویر را که طراحی کرده اید پیدا کنید و آن ها را در داخل پروژه رها کنید.

گام ۱۱- گزینه‌های پروژه
شما حالا باید سه تصویر خود را در پروژه در اندازه کوچک مشاهده کنید. چیزی که باید اکنون ببینید تعدادی از گزینه های دیگر هستند که در سمت راست قرار دارند و از آنجا می توانید اندازه این تصاویر کوچک را افزایش یا کاهش دهید، نمونه اولیه خود را دانلود کنید، و مهمتر از همه، نمونه اولیه خود را پخش کنید. همچنین خواهید دید که در این جا یک پلاگین برای Sketch نیز موجود خواهد بود و اگر شما از نقاشی کردن استفاده می کنید ما توصیه می کنیم که آن را دانلود کنید-اما ما برای این آموزش به آن نیازی نداریم.

گام ۱۲- نقاط حساس
بر روی اولین آیکن (تصویر کوچک در حالت نرمال) بروید و بر روی دکمه Edit کلیک کنید. حال ما می توانیم شروع به اضافه کردن این نقاط حساس به بخش هایی از طراحی خود به دیگر حالت ها لینک شده اند، بپردازیم. یکی از این نقاط حساس (hotspot) را بر روی دکمه Home در نوار مسیریابی رها کنید. این نقطه حساس می تواند به هر یک از حالت ها (طرح های) دیگر لینک شود و ما در گام بعدی به بررسی آن می پردازیم.

گام ۱۳- مقصد هاتسپات
بر روی این هاتسپات که ما به تازگی بر روی دکمه Home قرار داده ایم کلیک کنید تا برخی از گزینه های اضافی برای شما ظاهر شوند، که این کار شما را قادر می سازد تا نحوه رفتار کردن این هاتسپات ها را تنظیم کنید. چیزی که ما می خواهیم ابتدا انجام دهیم این است که این طرح اولیه را به طرح بعدی لینک کنیم. پس جایی که حرف از Hotspot Destination است، تصویر دوم را انتخاب کنید (منوی آبشاری-۰۱) تا این که به رنگ سبز با یک تیک در آید.

گام ۱۴- تبدیل و عمل
چیزی که ما باید اکنون انجام دهید این است که یک اسلاید تبدیل، و سپس یک عمل را ایجاد کنیم. برای این ترانزیشن (تبدیل) ما باید گزینه Fade را انتخاب کنیم، و سپس برای عمل (action) باید گزینه Hover را انتخاب کنیم و سپس مطمئن شویم که گزینه ‘Stay on target’ انتخاب شده است. زمانی که این کار را انجام دادید، این گزینه ها را ببندید و بر روی دکمه آبی رنگ Done که در بالا سمت راست قرار گرفته است کلیک کنید.

گام ۱۵- استفاده از چندین هاتسپات
حال باید تصویر دوم (منوی آبشاری- حالت ۰۱) را انتخاب کنید. در این جا ما می خواهیم هاتسپات هایی را ایجاد کنیم که همگی در اطراف دکمه Home و منوی آبشاری ما قرار بگیرند. هر هاتسپات باید به اولین طرح شما لینک شود، پس زمانی که نشانگر ماوس را بر روی دکمه Home یا هر جای دیگری در اطراف منوی آبشاری قرار می دهید، این تبدیل حرکت تصویر به اولین حالت برگردد، و باعث محو شدن منوی آبشاری شود. بر روی دکمه Done کلیک کنید و سپس برای دیدن این عمل، دکمه Play را بزنید.

گام ۱۶- به منوی آبشاری بعدی لینک شوید
این منوی آبشاری اکنون به خوبی کار می کند و شبیه به منوی معمولی شما در HTML/CSS است. حال ما می خواهیم یک هاتسپات را به یکی از لینک ها اضافه کنیم و سپس این هاتسپات را سومین تصویر (منوی آبشاری-حالت ۰۲) با حرکت تصویر Fade و عمل Hover لینک کنیم. زمانی که این کار را انجام دادید، بر روی دکمه های Done کلیک کنید و برای دیدن این نمونه اولیه دکمه Play را بزنید.

گام ۱۷- به حالت قبلی بازگردید
هر جای صفحه که ما نشانگر ماوس را قرار دهیم منوی دوم گیر خواهد کرد. پس کاری که ما باید انجام دهیم این است که یک هاتسپات دیگر را ایجاد کنیم که ما به حالت های قبلی باز می گرداند. بر روی دکمه Edit برای صفحه دوم (منوی آبشاری-حالت ۰۲) کلیک کنید و هاتسپات هایی را که در اطراف منوی مورد نظر قرار گرفته اند و دارای حرکت تصویر Fade و عمل Hover هستند، و سپس آن را به اولین صفحه موجود بدون هیچ منوی آبشاری لینک کنید.

گام ۱۸- منوی آبشاری را باز نگه دارید
آخرین کاری که ما باید بر روی این منو انجام دهیم تا مطمئن شویم که چه زمانی باید نشانگر ماوس را بر روی لینک قرار دهیم، این است که اولین منوی آبشاری را باز نگه می داریم. تنها زمانی که ما می خواهیم دو منوی آبشاری از اول باز شوند است که ماوس را بر روی یکی از آن ها قرار می دهیم. پس، دو هاتسپات را در بالا و پایین اولین منوی آبشاری که به منوی آبشاری-حالت ۰۱ لینک شده است، ایجاد کنید.

گام ۱۹- جعبه پروفایل
در این گام های پایانی ما قصد داریم که یک عنصر متحرک دیگر را به نمونه اولیه خود اضافه کنیم، تا این که وب سایتی زیباتر از یک وب سایتی که به وسیله کدها نوشته شده است داشته باشیم و مهیج تر باشد. به برنامه فتوشاپ بازگردید و این صفحه وب را با نمایش جعبه پروفایل، نه با منوهای آبشاری، صادر (export) کنید. سپس آن تصویر را با کلیک گرفته و در پروژه ما رها کنید.

 

گام ۲۰

همانند قبل ما می خواهیم یک هاتسپات را به لینک پروفایل اضافه کنیم. پس اولین تصویر را باز کنید تا یک در اطراف آن یک هاتسپات با رنگ سفید ایجاد کنید. سپس این تصویر را به طرح جدید ما اضافه کنید که به تازگی از فتوشاپ گرفته اید، از حرکت تصویر (transition) Fade برای آن به جای گزینه Hover استفاده کنید، و همانطور که هست آن را رها کرده و بر روی Action (که اولین گزینه شما می باشد) کلیک کنید.

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

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text