01 از 09
چگونه خودتان را با UXPin آغاز کنید
همانطور که ما به قلمرو طراحی موبایل، طراحی برنامه و طراحی پاسخگو حرکت می کنیم تمرکز بیشتری روی UX (تجربه کاربر) و wireframing ، prototyping تعاملی و مدل ها وجود دارد. یک تن از ابزارهایی وجود دارد که در این طاقچه هدف قرار می گیرند و از لحاظ پیچیدگی، ویژگی های کثیف و خشن و به سختی مفید است. یکی از ابزارهایی که چشم من را گرفت، UXPin به این دلیل است که توسط طراحان برای طراحان طراحی شده است.
قبل از اینکه ما رو به جلو برویم ... هشدار. اگر شما یک سازمان است که ترجیح می دهد خود را به نرم افزار و سپس UXPin برای شما نیست. تمام کارهای انجام شده در این برنامه در مرورگر انجام می شود و پروژه هایی که ذخیره می کنید به حساب شما ذخیره می شود.
برای شروع با UXPin شما یک مرورگر را راه اندازی می کنید و به UXPin سر می زنید. از اینجا می توانید برای یک دادگاه آزاد ثبت نام کنید یا یک برنامه ماهانه بر اساس نیاز پیش بینی شده خود تنظیم کنید. فرایند ثبت نام کاملا آسان است و هنگامی که شما نام کاربری و رمز عبور خود را تنظیم کرده اید، آماده هست برای شروع.
02 از 09
نحوه شروع پروژه در UXPin
هنگامی که شما وارد سیستم می شوید به داشبورد وارد می شوید و از اینجا می توانید تصمیم بگیرید که یک قاب جدید، یک پروژه جدید موبایل یا یک پروژه طراحی وب پاسخگو ایجاد کنید. همچنین افزونه هایی برای UXPin وجود دارد که به شما امکان می دهد پروژه های فتوشاپ یا طرح خود را وارد کنید. برای این چگونه می خواهم یک بنر با برخی از متن ایجاد کنم و دکمه ایمیل را به بنر اضافه کنم. برای انجام این کار من انتخاب یک قاب جدید ایجاد کردم.
03 از 09
نحوه استفاده از رابط UXPin
سطح طراحی به چهار حوزه تقسیم می شود. در ناحیه سیاه در سمت چپ، مجموعه ای از ابزارها هستند که به شما اجازه می دهند به داشبورد بازگردید، عناصری را که استفاده می کنید باز کنید، پنل Smart Elements را باز کنید، عناصر را جستجو کنید، یادداشت ها را به صفحه اضافه کنید و اعضای تیم را اضافه کنید. در پایین یک دکمه است که یک آموزش کوتاه را باز می کند، دیگری که به شما اجازه می دهد به حساب خود دسترسی داشته باشید و دیگری که به پرسش های متداول دسترسی پیدا می کند، بگذارید سوالاتی بپرسید و حتی بازخوردی را ارائه دهید.
در ناحیه آبی در بالا، مجموعه ای از ابزارها و خواص هستند. دکمه های تیره تر در سمت راست به شما این امکان را می دهند که طرح خود را تکرار کنید، تنظیمات پروژه را تنظیم کنید، صفحه را به اشتراک بگذارید و یک شبیه سازی مرورگر را در صفحه انجام دهید.
پانل Elements جایی است که شما می توانید بیت ها و قطعات را برای سطح طراحی بکشید، پروژه خود را نام ببرید و صفحات را اضافه یا حذف کنید.
کتابخانه Elements برای طراحان UX غافلگیر کننده است. این پاپ به شما اجازه می دهد تا از 30 کتابخانه ای که از iOS به Android Lolipop انتخاب شده اند دسترسی داشته باشید. همچنین به عناصر بوت استرپ و بنیاد همراه با آیکون های فونت بسیار معروف، آیکون های ژست برای موبایل و مجموعه ای از ابزارهای اجتماعی دسترسی پیدا خواهید کرد.
04 از 09
چگونه یک عنصر را به یک صفحه UXPin اضافه کنید
برای شروع، عنصر جعبه را به سطح طراحی کشانده کردم و هنگامی که منوس را رها میکنیم، پانل Properties باز می شود. دکمه Properties به شما اجازه می دهد که عنصر را نامگذاری کنید و ارتفاع عرض عنصر و مقادیر موقعیت را تنظیم کنید. شما همچنین می توانید عنصر را به عنصر اضافه کنید، گوشه ها را دور بکشید و کدورت را تنظیم کنید. با کلیک بر روی دکمه رنگ پس زمینه، یک مجموعه رنگ RGBA باز می شود.
شما همچنین می توانید فونت، مرز و الگو را به عنصر انتخاب شده اختصاص دهید. رعد و برق بولت توانایی اضافه کردن تعامل به یک عنصر انتخابی را می دهد.
05 از 09
چگونه برای اضافه کردن و قالب متن در UXPin
برای اضافه کردن متن، عنصر متن را به سطح طراحی بکشید و متن خود را وارد کنید. روی دکمه Property Property کلیک کنید تا خواص قلم باز شود و متن شما را فرمت کند. اگر شما نیاز به یک بلوک متن ساختگی دارید، یک عنصر متنی را اضافه کنید و بر روی دکمه GENERATE LOREM IPSUM در خواص قلم کلیک کنید.
06 از 09
چگونه می توان یک تصویر را به یک صفحه UXPin اضافه کرد
چند راه برای انجام این کار وجود دارد. شما می توانید از ابزار تصویر در نوار ابزار استفاده کنید، یک عنصر تصویر را از کتابخانه اضافه کنید و یا به سادگی تصویر را از دسکتاپ خود به یک عنصر روی سطح طراحی بکشید، همانطور که در بالا نشان داده شده است.
07 از 09
چگونه برای اضافه کردن یک دکمه به صفحه UXPin
اگرچه یک عنصر دکمه وجود دارد، وارد کردن دکمه در ناحیه جستجو ، همانطور که در بالا نشان داده شده، تمام دکمه های موجود در همه کتابخانه ها را باز می کند. برای رنگ کردن، فونت و حتی شعاع مرز، یکی از آنها را روی سطح طراحی طراحی کنید و از Properties استفاده کنید. برای تغییر متن داخل دکمه، یک بار در متن کلیک کرده و متن جدید را وارد کنید.
08 از 09
چگونه برای اضافه کردن تعامل به یک صفحه UXPin
این به همان اندازه پیچیده است که ممکن است برای اولین بار ظاهر شود. برای ورودی ایمیل، یک عنصر ورودی اضافه کردم، آن را تغییر اندازه دادم، متن را وارد کرده و متن را فرمت دادم. با انتخاب عنصر ورودی، روی دکمه Properties کلیک کنید و وقتی که عناصر Element ظاهر می شوند، بر روی دکمه قابل مشاهده - چشم - در گوشه سمت راست بالای پانل کلیک کنید.
دکمه را انتخاب کرده و دکمه Interactions - Lightning Bolt را در خواص کلیک کنید. وقتی پانل Interactions باز می شود، Interaction جدید را انتخاب کنید. کلیک کنید از تریدر پاپ پایین. در قسمت Action را انتخاب نمائید. از شما خواسته می شود که کدام علامت را نشان دهید. یک بار بر روی اسلحه کلیک کرده و بر روی عنصر ورودی کلیک کنید. با شناسایی عنصر، شما هم اکنون می توانید تعیین کنید که آیا عنصر را تحریک و یا نه. در این مورد من تصمیم گرفتم که جعبه ورودی را با سهولت در نشان داده و با مقدار زمان پیش فرض 300ms به آنجا بروم.
من همچنین می خواهم دکمه 65 پیکسل را به سمت راست حرکت داده و روی آن کلیک کنید. دکمه را انتخاب کردم، پانل تعاملات را باز کرد و Interaction جدید را انتخاب کرد. من از این تنظیمات استفاده کردم:
- راه اندازی : کلیک کنید
- اقدام: حرکت با
- حرکت جهت : 65 پیکسل در محور x
- انیمیشن : خطی
- مدت زمان: 300 میلی ثانیه
برای حذف تعامل، عنصر را انتخاب کنید و پانل تعاملات را باز کنید. تعامل در پانل را انتخاب کنید و بر روی زبانه ها می توانید آن را حذف کنید.
09 از 09
چگونه صفحه خود را در UXPin تست کنید
با توجه به اینکه شما در مرورگر کار می کنید، تست مرده ساده است. روی دکمه شبیه سازی طراحی کلیک کنید. صفحه در مرورگر باز خواهد شد و شما می توانید راه را آزمایش کنید. همچنین یک پنل اضافه خواهد شد به سمت چپ صفحه که اجازه می دهد تا برای نظرات، نقشه سایت اگر چند صفحه وجود دارد، تست قابلیت استفاده، به اشتراک گذاری زنده، ویرایش و بازگشت به داشبورد.
در پایین صفحه، یک پانل کوچک دیگر است که به شما امکان می دهد عناصر تعاملی را نشان دهد، نظرات را نشان می دهد یا پنهان می کنند و لینک پروژه را با دیگران به اشتراک می گذارند.